邀请函详情页面

src/projects/business/apis/Guest/from.js

@@ -19,7 +19,17 @@ export function getDeviceList() {
     })
 }
 
-//获取访客记录
+//访客离开操作
+export function out(id) {
+    return request({
+        url: '/mobile/guestInfoRecordApi/out/'+id,
+        //data: Qs.stringify({id:id}),
+        method: 'get',
+    })
+}
+
+
+//离开记录
 export function getDetail(id) {
     return request({
         url: '/mobile/guestInfoRecordApi/get/'+id,
@@ -27,7 +37,6 @@ export function getDetail(id) {
         method: 'get',
     })
 }
-
 //添加访客记录
 export function add(params) {
     return request.post('/mobile/guestInfoRecordApi/add', params,{

src/projects/business/views/Guest/From/Info.vue

@@ -1,59 +1,59 @@
 <template>
   <div>
-    <header class="mui-bar mui-bar-nav">
-      <h1 class="mui-title">邀请函详情</h1>
-      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-    </header>
-    <div class="mui-content">
+
+
+    <common @asynCallBack="asynCallBack"></common>
+    <top-header :pageTitle="pageTitle" v-if="step=='1'"   ></top-header>
+    <div class="mui-content margin60 "  v-if="step=='1'"   >
       <div class="mui-content-padded vongi-qingjiadt">
         <form class="mui-input-group">
           <div class="mui-input-row">
             <label>受邀人</label>
-            <span>刘韬</span>
+            <span>{{detail.name}}</span>
           </div>
           <div class="mui-input-row">
             <label>手机号码</label>
-            <span>15500001111</span>
+            <span>{{detail.mobilePhone}}</span>
           </div>
           <div class="mui-input-row">
             <label>身份证号</label>
-            <span>420400199301011010</span>
+            <span>{{detail.idCard}}</span>
           </div>
-          <div class="mui-input-row">
+          <div class="mui-input-row" v-if="detail.isUpPhoto">
             <label style="width: 50%">人脸识别照片</label>
-            <span class="vongi-qingjiadt-photo"
-              ><img src="~$project/assets/img/audit1.png" />
+
+            <span  style="width: 50%" v-if="!detail.photo" >未上传</span>
+            <span class="vongi-qingjiadt-photo"  v-if="detail.photo" >
+               <img  :src="detail.photo">
             </span>
           </div>
           <div class="mui-input-row">
             <label>受邀单位</label>
-            <span>湖北荆盛商贸有限公司</span>
+            <span>{{detail.unit}}</span>
           </div>
           <div class="mui-input-row">
             <label>访问事由</label>
-            <span>商务洽谈</span>
+            <span>{{detail.visitReasons}}</span>
           </div>
           <div class="mui-input-row">
             <label>邀访时间</label>
-            <span>2020-9-18 15:00:00</span>
+            <span>{{detail.visitDate}}</span>
           </div>
           <div class="mui-input-row">
             <label>结束时间</label>
-            <span>2020-9-18 17:30:00</span>
+            <span>{{detail.expirationTime}}</span>
           </div>
           <div class="mui-input-row">
-            <label style="width: 50%">人脸识别照片</label>
-            <span class="vongi-fkdat-name" style="width: 50%">
-              <a class="flew mui-navigate-right vongi-padright" href="">
-                <h5>冯</h5>
-                <h5>冯</h5>
-                <h5>冯</h5>
+            <label style="width: 50%">同行人员</label>
+            <span class="vongi-fkdat-name" style="width: 50%" >
+              <a class="flew mui-navigate-right vongi-padright"   v-if="list.length"  @click="step='2'" >
+                   <h5 v-for="mod in getFellow()">{{mod}}</h5>
               </a>
             </span>
           </div>
           <div class="mui-input-row">
             <label>车牌号</label>
-            <span>鄂D88888</span>
+            <span>{{detail.numberPlate}}</span>
           </div>
         </form>
       </div>
@@ -61,28 +61,194 @@
         <form class="mui-input-group vongi-login-form">
           <div class="mui-input-row">
             <label>邀请单状态</label>
-            <span class="color55f868">已确认</span>
+            <span :class="statusColor[detail.status]" v-text="status[detail.status]"></span>
             <!--<span class="colorf8b155">待确认</span>
 						<span class="color999">已过期</span>-->
           </div>
           <div class="mui-input-row">
             <label>发送时间</label>
-            <span>2020-09-16 10:00:00 </span>
+            <span>{{detail.createTime}}</span>
           </div>
           <div class="mui-input-row">
             <label>确认时间</label>
-            <span>2020-09-17 12:57:30 </span>
+            <span>{{detail.confirmationTime}} </span>
           </div>
         </form>
       </div>
-      <div class="vongi-btn vongi-login-btn">
-        <button class="mui-btn mui-btn-primary">确认访客已离开</button>
+
+
+
+
+    </div>
+    <div class="fyy-footer" v-if="!detail.outTime&&(detail.status=='1'||detail.status=='3')&&step=='1'">
+      <div class="bindfyy-btn">
+        <button type="button" class="mui-btn mui-btn-primary " @click="out"  >
+          确认访客已离开
+        </button>
+      </div>
+    </div>
+
+    <div class="fyy-footer" v-if="detail.status=='0'&&step=='1'">
+      <div class="bindfyy-btn">
+        <button type="button" class="mui-btn mui-active  "   >
+          等待受邀者确认...
+        </button>
       </div>
     </div>
+    <div class="fyy-footer" v-if="detail.outTime!=null&&step=='1'">
+      <div class="bindfyy-btn">
+        <button type="button" class="mui-btn  mui-active "   >
+          访客已离开
+        </button>
+      </div>
+    </div>
+
+    <header class="mui-bar mui-bar-nav"  v-if="step=='2'">
+      <h1 class="mui-title">同行人员</h1>
+      <a   class="mui-icon mui-icon-left-nav mui-pull-left"  @click="step='1'"></a>
+
+    </header>
+    <div   v-if="step=='2'" class="mui-content margin60">
+      <div class="mui-content-padded vongi-editme vongi-qingjiadt">
+        <form class="mui-input-group" v-for="(item,index) in list" style="padding-top: 10px">
+          <div class="mui-input-row">
+            <label>姓名<i class="colorfe616c"></i></label>
+            <span>{{item.name}}</span>
+
+          </div>
+          <div class="mui-input-row">
+            <label>手机号码</label>
+            <span>{{item.mobilePhone}}</span>
+
+          </div>
+          <div class="mui-input-row">
+            <label>身份证号</label>
+            <span>{{item.idCard}}</span>
+
+          </div>
+
+        </form>
+      </div>
+
+    </div>
+    <loading :visible="isLoading"></loading>
+
   </div>
 </template>
 
+
 <script>
+
+  import * as API_From from '@/apis/Guest/from'
+  import Common from '$project/components/Common.vue'
+  import Loading from '$project/components/Loading.vue'
+  import TopHeader from '$project/components/TopHeader.vue'
+  import {
+    mapGetters,
+    mapMutations
+  } from 'vuex'
+  import {
+
+  } from '$project/utils'
+  export default {
+    name: 'GuestFromInfo',
+    components: {
+      Common,
+      Loading,
+      TopHeader
+    },
+    data() {
+      return {
+        pageTitle: '邀请函详情',
+        step:'1',
+        id: '',
+        detail: {
+          id:'',
+          name:'',
+          mobilePhone:'',
+          unit:'',
+          visitReasons:'',
+
+          visitDate: '请选择',
+          expirationTime: '请选择',
+          issueDevice: '',
+          isUpPhoto:1,
+        },
+        list:[],
+        isLoading: false,
+
+        status: ['待确认', '已确认', '已拒绝','已过期'],
+        statusColor: ['colorf8b155', 'color55f868', 'colorfe616c','color999'],
+
+      }
+    },
+    created() {
+      this.id = this.$route.query.id;
+    },
+    methods:  {
+
+      getFellow(){
+        var sz=[];
+        if(this.list){
+          for(var  m in this.list){
+            var mod =this.list[m];
+            if(mod.name){
+              sz.push(mod.name.substring(0,1))
+            }
+          }
+        }
+        return sz;
+      },
+      out(){
+        this.isLoading = true;
+
+        API_From.out(this.id ).then(response => {
+          this.isLoading = false;
+
+          this.detail.outTime = true;
+
+        }).catch(error => {
+          this.isLoading = false;
+          mui.toast(error);
+        })
+      },
+      //获取详情
+      getDetail() {
+        this.isLoading = true;
+
+        API_From.getDetail(this.id ).then(response => {
+          this.isLoading = false;
+
+          this.detail = response.info;
+          this.list=response.list;
+        }).catch(error => {
+          this.isLoading = false;
+          mui.toast(error);
+        })
+      },asynCallBack(){},
+    },
+    mounted() {
+      if(this.id){
+        this.detail.id=this.id;
+        this.getDetail();
+      }
+
+
+    },
+
+
+    destroyed() {
+
+    },
+    computed: {
+      ...mapGetters({
+        openId: 'wx_openid',
+        token: 'token',
+        person_data: 'person_data',
+        person_popedom: 'person_popedom',
+      })
+    }
+  }
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/business/views/Guest/To/Info.vue

@@ -52,10 +52,10 @@
                     type="button"
                     style="width: 50%"
 
-                    @click="clickMyFile(detail)"
+                    @click="clickMyFile(subForm)"
             >
-            <div  v-if="!detail.photo">请上传</div>
-            <img     v-if="detail.photo" :src="detail.photo">
+            <div  v-if="!subForm.photo">请上传</div>
+            <img     v-if="subForm.photo" :src="subForm.photo">
             </button>
             <!--请上传-->
           </div>
@@ -136,10 +136,11 @@
                     type="text"
                     v-model="item.idCard"
                     class="mui-input-clear"
-                    placeholder="请输入单位名称"
+                    placeholder="请输入身份证号"
             />
           </div>
-          <div class="mui-input-row" v-if="detail.isUpPhoto" >
+
+          <div class="mui-input-row" v-if="false" >
             <label style="width: 50%"
             >人脸识别照片<i class="iconfont icon-tishi color4fc5f7" @click="valert"></i
             ></label>
@@ -331,7 +332,7 @@
         }
         return sz;
       },
-      //微信选择图片
+      //选择图片
       uploadPicture(event) {
 
 
@@ -370,26 +371,7 @@
         this.uploadpic(obj.field);
         this.cropperVisible = false;
       },
-      //微信选择图片
-      chooseImageWx(mod) {
-        this.indexModel=mod;
-
-        WxJsApi.chooseImage().then(res => {
-          var localData = res.localData;
 
-          if (localData.indexOf('data:image') != 0) {
-            //判断是否有这样的头部
-            localData = 'data:image/jpeg;base64,' + localData
-          }
-          localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
-          this.imgBase64 = localData;
-          //显示裁剪图片
-          //_this.showCropper(field);
-          this.uploadpic();
-        }).catch(error => {
-          mui.toast(error);
-        })
-      },
       //上传图片
       uploadpic() {
         this.isLoading = true;
@@ -462,7 +444,7 @@
     },
     mounted() {
       //获取微信配置
-     // WxJsApi.getWxConfig();
+
       this.getDetail();
 
     },