1.add.wxml
- <!--pages/projectadd/add.wxml-->
- <view class="container">
- <view class="common-header-xian"></view>
- <!-- 表单 -->
- <form bindreset="formReset" bindsubmit="saveData">
- <view class="address-cont-title b-f b-b">
- <view class="list address-box dis-flex b-b">
- <view class="left-name">
- <text class="f-30"> 项目类别 </text>
- </view>
- <view class="right-cont dis-flex">
- <input disabled="disabled" value="{{catename}}"></input>
- <input name="cate" disabled="disabled" style="display:none" value="{{cateid}}"></input>
- <input name="openid" disabled="disabled" style="display:none" value="{{openid}}"></input>
- </view>
- </view>
- <view class="list address-box dis-flex b-b">
- <view class="left-name">
- <text class="f-30"> 项目标题 </text>
- </view>
- <view class="right-cont dis-flex">
- <input name="title" placeholder="请输入项目标题" value=""></input>
- </view>
- </view>
- <view class="list address-box dis-flex b-b" bindtap="showPopup">
- <view class="left-name">
- <text class="f-30"> 起始时间 </text>
- </view>
- <view class="right-cont dis-flex">
- <input name="start_date" placeholder="请设置起始时间" value="{{start_date}}"></input>
- </view>
- </view>
- <view class="list address-box dis-flex b-b" bindtap="showPopup1">
- <view class="left-name">
- <text class="f-30"> 结束时间 </text>
- </view>
- <view class="right-cont dis-flex">
- <input name="end_date" placeholder="请设置结束时间" value="{{end_date}}"></input>
- </view>
- </view>
- <view class="list address-box dis-flex b-b">
- <view class="left-name">
- <text class="f-30"> 项目描述 </text>
- </view>
- <view class="right-cont dis-flex">
- <input name="desc" placeholder="请输入项目描述" value=""></input>
- </view>
- </view>
- </view>
- <view class="padding-box m-top35 profile-btn">
- <button formType="submit" disabled="{{disabled}}"> 保存 </button>
- </view>
- </form>
- <!--start 时间选择 -->
- <van-popup show="{{ show }}" bind:close="onClose" position="bottom">
- <view>
- <van-datetime-picker
- type="date"
- value="{{ currentDate }}"
- bind:input="onInput"
- min-date="{{ minDate }}"
- formatter="{{ formatter }}"
- bind:confirm="confirmFn"
- bind:cancel="cancelFn"
- />
- </view>
- </van-popup>
- <!-- 时间选择 -->
- <!--end 时间选择 -->
- <van-popup show="{{ show1 }}" bind:close="onClose" position="bottom">
- <view>
- <van-datetime-picker
- type="date"
- value="{{ currentDate1 }}"
- bind:input="onInput1"
- min-date="{{ minDate }}"
- formatter="{{ formatter }}"
- bind:confirm="confirmFn1"
- bind:cancel="cancelFn"
- />
- </view>
- </van-popup>
- <!-- 时间选择 -->
- </view>
- View Code
2.add.JS
- // pages/projectadd/add.JS
- let App = getApp();
- import { Base } from '../../utils/base.js'
- const util = require('../../utils/util.js')
- var base = new Base();
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- catename:'',
- cateid:'',
- openid:null,
- display: false,
- show: false,
- show1: false,
- currentDate: new Date().getTime(),// 初始日期 // 时间戳补 3 位
- currentDate1: new Date().getTime(),// 初始日期 // 时间戳补 3 位
- minDate: App.globalData.minDate,// 最小时间
- maxDate: App.globalData.maxDate,// 最大时间
- // 时间 - 显示赋值
- formatter(type, value) {
- if (type === 'year') {
- return `${value} 年 `;
- } else if (type === 'month') {
- return `${value} 月 `;
- } else if (type === 'day') {
- return `${value} 日 `;
- }
- return value;
- }
- },
- // 时间 - 当值变化时触发的事件 start
- onInput(event) {
- var newTime = new Date(event.detail);
- if(this.data.show==0){
- newTime =null;
- }else{
- //console.log(event.detail);
- newTime = util.formatTime(newTime);
- }
- this.setData({
- currentDate: event.detail,
- start_date: newTime,
- });
- },
- // 时间 - 当值变化时触发的事件 end
- onInput1(event) {
- var etime = event.detail+(86400-1)*1000;
- var newTime = new Date(etime);
- if (this.data.show1 == false) {
- newTime = null;
- } else {
- //console.log(event.detail);
- newTime = util.formatTime(newTime);
- }
- //console.log(newTime);
- this.setData({
- currentDate1: event.detail,
- end_date: newTime,
- // key1:1,
- });
- },
- // 时间 - 弹出框
- showPopup() {
- this.setData({ key: 1 });
- this.setData({ show: true });
- },
- // 时间 - 弹出框
- showPopup1() {
- this.setData({ key1: 1 });
- this.setData({ show1: true });
- },
- // 时间 - 弹出框关闭
- onClose() {
- this.setData({ show: false });
- this.setData({ show1: false });
- },
- // 时间 - 确定按钮
- confirmFn(e) {
- var newTime = new Date(e.detail);
- newTime = util.formatTime(newTime);
- this.setData({ start_date: newTime });
- //console.log(e.detail);
- this.setData({ show: false });
- },
- // 时间 - 确定按钮
- confirmFn1(e) {
- var newTime = new Date(e.detail);
- newTime = util.formatTime(newTime);
- this.setData({ end_date: newTime });
- this.setData({ show1: false });
- },
- // 时间 - 取消按钮
- cancelFn() {
- this.setData({ show: false });
- this.setData({ show1: false });
- },
- /**
- * 生命周期函数 -- 监听页面加载
- */
- onLoad: function (options) {
- console.log(options);
- let _this = this;
- let openid = App.hasOpenid()
- _this.setData({
- catename : options.catename,
- cateid : options.cateid,
- openid: openid
- });
- },
- /**
- * 表单提交
- */
- saveData: function (e) {
- let _this = this;
- let values = e.detail.value;
- //console.log(values);
- // 表单验证
- if (!_this.validation(values)) {
- App.showError(_this.data.error);
- return false;
- }
- // return false;
- // 按钮禁用
- _this.setData({
- disabled: true
- });
- // 提交到后端
- App._post('index/project/add_project', values, function (result) {
- App.showSuccess(result.msg, function () {
- //wx.navigateBack();
- // 跳转授权页面
- wx.switchTab({
- url: "/pages/projectadd/projectadd"
- });
- });
- }, false, function () {
- // 解除禁用
- _this.setData({
- disabled: false
- });
- });
- },
- /**
- * 表单验证
- */
- validation: function (values) {
- if (values.title.length < 1) {
- this.data.error = '项目标题不能为空';
- return false;
- }
- if (values.start_date.length < 1) {
- this.data.error = '项目起始时间不能为空';
- return false;
- }
- if (values.end_date.length < 1) {
- this.data.error = '项目起始时间不能为空';
- return false;
- }
- /* reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
- if (!reg.test(values.phone)) {
- this.data.error = '手机号不符合要求';
- return false;
- }*/
- return true;
- },
- /**
- * 生命周期函数 -- 监听页面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函数 -- 监听页面显示
- */
- onShow: function () {
- },
- /**
- * 生命周期函数 -- 监听页面隐藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函数 -- 监听页面卸载
- */
- onUnload: function () {
- },
- /**
- * 页面相关事件处理函数 -- 监听用户下拉动作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
- }
- })
- View Code
- 3.add.JSON
- {
- "usingComponents": {
- "van-datetime-picker": "vant-weapp/datetime-picker",
- "van-popup": "vant-weapp/popup"
- },
- "navigationBarTitleText": "添加项目"
- }
4.add.wxss
- /* pages/projectadd/add.wxss */
- .profile-list .admin {
- padding-left: 15px;
- font-size: 30rpx;
- color: #333;
- }
- .address-box .left-name {
- width: 85px;
- }
- .address-cont-title .list {
- width: auto;
- padding: 24rpx;
- }
- .tui-picker-detail text {
- padding: 0 10rpx;
- }
- .infoText {
- line-height: 56rpx;
- display: block;
- }
- picker-view {
- background-color: white;
- padding: 0;
- width: 100%;
- height: 480rpx;
- bottom: 0;
- position: fixed;
- }
- picker-view-column view {
- vertical-align: middle;
- font-size: 28rpx;
- line-height: 28rpx;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .animation-element-wrapper {
- display: flex;
- position: fixed;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- z-index: 21;
- }
- .animation-element {
- display: flex;
- position: fixed;
- width: 100%;
- height: 570rpx;
- bottom: 0;
- background-color: rgba(255, 255, 255, 1);
- }
- .animation-button {
- margin-top: 20rpx;
- top: 20rpx;
- width: 400rpx;
- height: 100rpx;
- line-height: 100rpx;
- align-items: center;
- }
- .address-text {
- color: #999;
- display: inline-flex;
- position: fixed;
- margin-top: 20rpx;
- height: 50rpx;
- text-align: center;
- line-height: 50rpx;
- font-size: 30rpx;
- font-family: Arial, Helvetica, sans-serif;
- }
- .left-bt {
- left: 30rpx;
- }
- .right-bt {
- right: 30rpx;
- color: #ec5151;
- }
- .line {
- display: block;
- position: fixed;
- height: 1rpx;
- width: 100%;
- margin-top: 89rpx;
- background-color: #eee;
- }
- .address-box .right-cont input {
- width: 100%;
- font-size: 30rpx;
- color: #444;
- }
- .profile-btn button {
- background: #ff495e;
- color: white;
- }
- .bargain-commont-bg {
- background: rgba(0, 0, 0, 0.6);
- position: fixed;
- right: 0;
- left: 0;
- top: 0;
- bottom: 0;
- z-index: 20;
- }
- .bright789_view_hide {
- display: none;
- }
- .bright789_view_show {
- display: block;
- }
- .f-34 {
- font-size: 34rpx;
- }
- .f-32 {
- font-size: 32rpx;
- }
- .f-31 {
- font-size: 31rpx;
- }
- .f-28 {
- font-size: 28rpx;
- }
- .f-26 {
- font-size: 26rpx;
- }
- .f-24 {
- font-size: 24rpx;
- }
- .f-22 {
- font-size: 22rpx;
- }
- .b-r {
- border-right: 1rpx solid #eee;
- }
- .b-b {
- border-bottom: 1rpx solid #eee;
- }
- .b-t {
- border-top: 1rpx solid #eee;
- }
- .m-top4 {
- margin-top: 4rpx;
- }
- .m-top10 {
- margin-top: 10rpx;
- }
- .m-top20 {
- margin-top: 25rpx;
- }
- .m-top35 {
- margin-top: 35rpx;
- }
- View Code
来源: http://www.bubuko.com/infodetail-3337595.html