访客预约页面更新

miniprogram/pages/meeting/visitorIinvitation/visitorIinvitation.js

@@ -6,7 +6,13 @@ Page({
    */
   data: {
     value: '',
-     discountShow:false
+    showCardType: false,
+    arriveShow:false,
+    leaveShow:false,
+    submitSuccesShow:false,
+    columns: ['身份证', '护照', '通行证'],
+    fileList: [],
+    currentDate: new Date().getTime(),
   },
 
   /**
@@ -19,26 +25,7 @@ Page({
     })
   },
 
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady() {
 
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide() {
-
-    },
 
   /**
    * 生命周期函数--监听页面卸载
@@ -70,5 +57,56 @@ Page({
    */
   onShareAppMessage() {
 
-    }
+  },
+  getCardTypeHandle() {
+    this.setData({
+      showCardType: true
+    });
+  },
+  confirmHandle(){
+    this.setData({
+      showCardType: false,
+      arriveShow: false,
+      leaveShow:false
+    });
+  },
+  cancelHandle(){
+    this.setData({
+      showCardType: false,
+      arriveShow: false,
+      leaveShow:false
+    });
+  },
+  getArriveHandle(){
+    this.setData({
+      arriveShow: true
+    });
+
+  },
+  getLeaveHandle(){
+    this.setData({
+      leaveShow: true
+    });
+  },
+  afterRead(event) {
+    const { file } = event.detail;
+    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+    wx.uploadFile({
+      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
+      filePath: file.url,
+      name: 'file',
+      formData: { user: 'test' },
+      success(res) {
+        // 上传完成需要更新 fileList
+        const { fileList = [] } = this.data;
+        fileList.push({ ...file, url: res.data });
+        this.setData({ fileList });
+      },
+    });
+  },
+  onInput(event) {
+    this.setData({
+      currentDate: event.detail,
+    });
+  },
 })

miniprogram/pages/meeting/visitorIinvitation/visitorIinvitation.json

@@ -2,7 +2,11 @@
   "usingComponents": {
     "van-field": "@vant/weapp/field/index",
     "van-picker": "@vant/weapp/picker/index",
-    "van-popup": "@vant/weapp/popup/index"
+    "van-popup": "@vant/weapp/popup/index",
+    "van-uploader": "@vant/weapp/uploader/index",
+    "van-button": "@vant/weapp/button/index",
+    "van-datetime-picker": "@vant/weapp/datetime-picker/index",
+    "van-dialog": "@vant/weapp/dialog/index"
   }
 
 }

miniprogram/pages/meeting/visitorIinvitation/visitorIinvitation.wxml

@@ -4,66 +4,41 @@
   </view>
   <view class="inputView">
     <van-cell-group>
-      <van-field 
+      <van-field label="被访单位" model:value="{{ value }}" placeholder="请输入" border="{{ true }}" input-align="right" />
-	  label="被访人姓名" 
+      <van-field label="被访人姓名" model:value="{{ value }}" placeholder="请输入" border="{{ true }}" input-align="right" />
-	  model:value="{{ value }}"
+      <van-field label="被访人电话" model:value="{{ value }}" placeholder="请输入" border="{{ true }}" input-align="right" />
-	  placeholder="请输入" 
+     
-	  border="{{ true }}" 
+      <van-field label="访客姓名" model:value="{{ value }}" required placeholder="请输入" border="{{ true }}" input-align="right" />
-	  input-align="right" />
+      <van-field label="手机号码" model:value="{{ value }}" required placeholder="请输入" border="{{ true }}" input-align="right" />
-	  <van-field
+      <van-field label="身份证类型" model:value="{{ value}}" is-link required readonly placeholder="请选择" arrow-direction="down" input-align="right" bind:tap="getCardTypeHandle" />
-	  label="被访人电话" 
+      <van-field label="身份证号" model:value="{{ value }}" required placeholder="请输入" border="{{ true }}" input-align="right" />
-	  model:value="{{ value }}"
+      <van-field label="到访时间" model:value="{{ value }}" is-link required readonly placeholder="请选择" border="{{ true }}" arrow-direction="down" input-align="right" bind:tap="getArriveHandle" />
-	  placeholder="请输入" 
+      <van-field label="离开时间" model:value="{{ value }}" is-link required readonly placeholder="请选择" border="{{ true }}" arrow-direction="down" input-align="right" bind:tap="getLeaveHandle" />
-	  border="{{ true }}" 
+      <van-field label="来访事由" required model:value="{{ value }}" placeholder="请输入" border="{{ true }}" input-align="right" />
-	  input-align="right" />
+      <view class="uploadImgView">
-    <van-field
+        <view style="margin-bottom: 20rpx;">访客照片</view>
-	  label="被访单位" 
+        <van-uploader file-list="{{ fileList }}" upload-text="点击上传照片" bind:after-read="afterRead" />
-	  model:value="{{ value }}"
+        <view class="tipsView">提示:请保持五官清晰，以方便系统精准识</view>
-	  placeholder="请输入" 
+      </view>
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="访客姓名" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="手机号码" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="身份证号" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="到访时间" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="离开时间" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
-    <van-field
-	  label="来访事由" 
-    required
-	  model:value="{{ value }}"
-	  placeholder="请输入" 
-	  border="{{ true }}" 
-	  input-align="right" />
     </van-cell-group>
+    <view class="submitBtnView">
+      <van-button block type="info">提交</van-button>
+    </view>
+    <!-- 身份证类型弹框 -->
+    <van-popup show="{{ showCardType }}" round position="bottom">
+      <van-picker show-toolbar title="身份证类型" columns="{{ columns }}" bind:confirm="confirmHandle" bind:cancel="cancelHandle" />
+    </van-popup>
+    <!-- 到访时间选择弹框 -->
+    <van-popup show="{{ arriveShow }}" round position="bottom">
+      <van-datetime-picker type="datetime" value="{{ currentDate }}" bind:input="onInput" bind:confirm="confirmHandle" bind:cancel="cancelHandle" 
+      />
+    </van-popup>
+    <!-- 离开时间弹框 -->
+    <van-popup show="{{ arriveShow }}" round position="bottom">
+      <van-datetime-picker type="datetime" value="{{ currentDate }}" bind:input="onInput" bind:confirm="confirmHandle" bind:cancel="cancelHandle" 
+      />
+    </van-popup>
+    <!-- 提交成功弹框 -->
+    <van-dialog title="标题" message="弹窗内容" show="{{ submitSuccesShow }}" />
   </view>
 </view>

miniprogram/pages/meeting/visitorIinvitation/visitorIinvitation.wxss

@@ -20,3 +20,19 @@
 .inputView{
 	margin-top: 20rpx;
 }
+.uploadImgView{
+  padding: 16px;
+  background-color: #ffffff;
+  color: #646566;
+  font-size: 28rpx;
+}
+.tipsView{
+  text-align: center;
+  padding-top: 60rpx;
+  margin-bottom: 100rpx;
+}
+.submitBtnView{
+  width: 96%;
+  margin:0 auto ;
+  padding-bottom: 100rpx;
+}