|
@@ -1,23 +1,23 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
- <header class="mui-bar mui-bar-nav">
|
|
|
|
|
|
+ <header class="mui-bar mui-bar-nav" v-if="step=='1'" >
|
|
<h1 class="mui-title">访问邀请函</h1>
|
|
<h1 class="mui-title">访问邀请函</h1>
|
|
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
|
</header>
|
|
</header>
|
|
- <div class="mui-content margin60">
|
|
|
|
|
|
+
|
|
|
|
+ <div v-if="step=='1'" class="mui-content margin60">
|
|
<div class="mui-content-padded vongi-qingjiadt">
|
|
<div class="mui-content-padded vongi-qingjiadt">
|
|
<form class="mui-input-group">
|
|
<form class="mui-input-group">
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>邀请单位</label>
|
|
<label>邀请单位</label>
|
|
- <span>湖北荆鹏软件集团有限公司</span>
|
|
|
|
|
|
+ <span>{{detail.intervieweeUnit}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>邀请人</label>
|
|
<label>邀请人</label>
|
|
- <span>凡佳佳</span>
|
|
|
|
|
|
+ <span>{{detail.intervieweeName}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>联系方式</label>
|
|
<label>联系方式</label>
|
|
- <span class="color4fc5f7">15500001111</span>
|
|
|
|
|
|
+ <span ><a class="color4fc5f7" :href="'tel:'+detail.intervieweePhone">{{detail.intervieweePhone}}</a></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@@ -25,17 +25,18 @@
|
|
<form class="mui-input-group">
|
|
<form class="mui-input-group">
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>受邀人</label>
|
|
<label>受邀人</label>
|
|
- <span>凡佳佳</span>
|
|
|
|
|
|
+ <span>{{detail.name}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>联系方式</label>
|
|
<label>联系方式</label>
|
|
- <span>15500001111</span>
|
|
|
|
|
|
+ <span>{{detail.mobilePhone}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>身份证号</label>
|
|
<label>身份证号</label>
|
|
<input
|
|
<input
|
|
type="text"
|
|
type="text"
|
|
class="mui-input-clear"
|
|
class="mui-input-clear"
|
|
|
|
+ v-model="subForm.idCard"
|
|
placeholder="请输入身份证号"
|
|
placeholder="请输入身份证号"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
@@ -47,21 +48,22 @@
|
|
class="mui-btn mui-btn-block mui-navigate-right"
|
|
class="mui-btn mui-btn-block mui-navigate-right"
|
|
type="button"
|
|
type="button"
|
|
style="width: 50%"
|
|
style="width: 50%"
|
|
|
|
+ @click="chooseImage(detail)"
|
|
>
|
|
>
|
|
请上传
|
|
请上传
|
|
</button>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>来访单位</label>
|
|
<label>来访单位</label>
|
|
- <span>湖北荆盛商贸有限公司</span>
|
|
|
|
|
|
+ <span>{{detail.unit}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>来访事由</label>
|
|
<label>来访事由</label>
|
|
- <span>业务洽谈</span>
|
|
|
|
|
|
+ <span>{{detail.visitReasons}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>邀访时间</label>
|
|
<label>邀访时间</label>
|
|
- <span>2020-9-18 15:00:00</span>
|
|
|
|
|
|
+ <span>{{detail.visitDate}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>同行人员</label>
|
|
<label>同行人员</label>
|
|
@@ -69,13 +71,13 @@
|
|
class="mui-btn mui-btn-block color4fc5f7 vongi-fkdat-name"
|
|
class="mui-btn mui-btn-block color4fc5f7 vongi-fkdat-name"
|
|
type="button"
|
|
type="button"
|
|
style="width: 65%; padding-right: 15px"
|
|
style="width: 65%; padding-right: 15px"
|
|
|
|
+
|
|
>
|
|
>
|
|
<div class="flew">
|
|
<div class="flew">
|
|
- <h5>冯</h5>
|
|
|
|
- <h5>冯</h5>
|
|
|
|
- <h5>冯</h5>
|
|
|
|
- <span>添加</span>
|
|
|
|
- <i class="iconfont icon-zhuce"></i>
|
|
|
|
|
|
+ <h5 v-for="mod in getFellow()">{{mod}}</h5>
|
|
|
|
+
|
|
|
|
+ <span @click="step='2'">添加 <i class="iconfont icon-zhuce"></i></span>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@@ -83,6 +85,7 @@
|
|
<label>车牌号</label>
|
|
<label>车牌号</label>
|
|
<input
|
|
<input
|
|
type="text"
|
|
type="text"
|
|
|
|
+ v-model="subForm.numberPlate"
|
|
class="mui-input-clear"
|
|
class="mui-input-clear"
|
|
placeholder="请输入车牌号码"
|
|
placeholder="请输入车牌号码"
|
|
/>
|
|
/>
|
|
@@ -90,15 +93,298 @@
|
|
</form>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="fyy-footer">
|
|
|
|
|
|
+ <div class="fyy-footer" v-if="step=='1'">
|
|
<div class="bindfyy-btn">
|
|
<div class="bindfyy-btn">
|
|
- <button type="submit" class="mui-btn mui-btn-success">确认受邀</button>
|
|
|
|
|
|
+ <button type="submit" class="mui-btn mui-btn-success" @click="submit()">确认受邀</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <header class="mui-bar mui-bar-nav" v-if="step=='2'">
|
|
|
|
+ <h1 class="mui-title">添加同行人员</h1>
|
|
|
|
+ <a class="mui-pull-right color4fc5f7" @click="save()">保存</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 subForm.list" style="padding-top: 10px">
|
|
|
|
+ <div class="mui-input-row">
|
|
|
|
+ <label>姓名<i class="colorfe616c">*</i></label>
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ class="mui-input-clear"
|
|
|
|
+ v-model="item.name"
|
|
|
|
+ placeholder="请输入姓名"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mui-input-row">
|
|
|
|
+ <label>手机号码</label>
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="item.mobilePhone"
|
|
|
|
+ class="mui-input-clear"
|
|
|
|
+ placeholder="请输入手机号码"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mui-input-row">
|
|
|
|
+ <label>身份证号</label>
|
|
|
|
+ <input
|
|
|
|
+ type="text"
|
|
|
|
+ v-model="item.idCard"
|
|
|
|
+ class="mui-input-clear"
|
|
|
|
+ placeholder="请输入单位名称"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mui-input-row">
|
|
|
|
+ <label style="width: 50%"
|
|
|
|
+ >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i
|
|
|
|
+ ></label>
|
|
|
|
+ <button
|
|
|
|
+ class="mui-btn mui-btn-block mui-navigate-right"
|
|
|
|
+ type="button"
|
|
|
|
+ style="width: 50%"
|
|
|
|
+ @click="chooseImage(item)"
|
|
|
|
+ >
|
|
|
|
+ 请上传
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mui-input-row" @click="del(index)" style="text-align: center;color: red">
|
|
|
|
+ 删除
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="vongi-btn vongi-yj-btn">
|
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="add()" >
|
|
|
|
+ <i class="iconfont icon-zhuce"></i>添加同行人员
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <header class="mui-bar mui-bar-nav" v-if="step=='3'" >
|
|
|
|
+ <h1 class="mui-title">访客邀请码</h1>
|
|
|
|
+ </header>
|
|
|
|
+ <div class="mui-content vongi-yqma" v-if="step=='3'">
|
|
|
|
+ <div class="mui-content-padded">
|
|
|
|
+ <ul class="mui-table-view fyy-view">
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <label>受邀单位:</label>
|
|
|
|
+ <span>{{detail.unit}}</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <label>受 邀 人:</label>
|
|
|
|
+ <span>{{detail.name}}</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <label>访问单位:</label>
|
|
|
|
+ <span>{{detail.intervieweeUnit}}</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <label>邀请时间:</label>
|
|
|
|
+ <span>{{detail.visitDate}}</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <label>结束时间:</label>
|
|
|
|
+ <span>{{detail.expirationTime}}</span>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <div class="vongi-yqma-ma">
|
|
|
|
+ <img :src="qrCodeImg" id="qrcode">
|
|
|
|
+ </div>
|
|
|
|
+ <p>已生成访客邀请码</p>
|
|
|
|
+ </li>
|
|
|
|
+ <li class="mui-table-view-cell">
|
|
|
|
+ <p class="color4fc5f7">可通过收藏页面或截图保存二维码,<br/>如已上传人脸照片,进门时可通过设备识别</p>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="vongi-yqma-logo">
|
|
|
|
+ <img src="~$project/assets/img/logo_02.png" width="100"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
+
|
|
<script>
|
|
<script>
|
|
|
|
+ import * as API_To from '@/apis/Guest/to'
|
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
|
+ import QRCode from 'qrcodejs2'
|
|
|
|
+
|
|
|
|
+ import {
|
|
|
|
+ mapGetters,
|
|
|
|
+ mapMutations
|
|
|
|
+ } from 'vuex'
|
|
|
|
+ import * as WxJsApi from '$project/utils/wxJsApi'
|
|
|
|
+
|
|
|
|
+ import {
|
|
|
|
+ convertCanvasToImage,
|
|
|
|
+ currentTimeStamp,
|
|
|
|
+ parseUnixTime
|
|
|
|
+ } from '$project/utils'
|
|
|
|
+ export default {
|
|
|
|
+ name: 'GuestFromDeviceInfo',
|
|
|
|
+ components: {
|
|
|
|
+ Common,
|
|
|
|
+ Loading,
|
|
|
|
+ TopHeader
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ pageTitle: '访问邀请函',
|
|
|
|
+ id: '',
|
|
|
|
+ step:'1',
|
|
|
|
+ detail: {
|
|
|
|
+ },
|
|
|
|
+ subForm:{
|
|
|
|
+ id:'',
|
|
|
|
+ idCard:'',
|
|
|
|
+ photo:'',
|
|
|
|
+ numberPlate:'',
|
|
|
|
+ list:[],
|
|
|
|
+ },
|
|
|
|
+ indexModel:{
|
|
|
|
+ photo:''
|
|
|
|
+ },
|
|
|
|
+ isLoading: false,
|
|
|
|
+ qrCodeImg: '',
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.id = this.$route.query.id;
|
|
|
|
+ this.subForm.id=this.id;
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ save(){
|
|
|
|
+ if(this.subForm.list.length){
|
|
|
|
+ for(var m in this.subForm.list){
|
|
|
|
+ var mod =this.subForm.list[m]
|
|
|
|
+ if(!mod.name){
|
|
|
|
+ mui.toast("请补全同行人姓名")
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.step='1';
|
|
|
|
+ },
|
|
|
|
+ del(index) {
|
|
|
|
+ this.subForm.list.splice(index, 1);
|
|
|
|
+ },
|
|
|
|
+ add() {
|
|
|
|
+ this.subForm.list.push({});
|
|
|
|
+ },
|
|
|
|
+ getFellow(){
|
|
|
|
+ var sz=[];
|
|
|
|
+ if(this.subForm.list){
|
|
|
|
+ for(var m in this.subForm.list){
|
|
|
|
+ var mod =this.subForm.list[m];
|
|
|
|
+ if(mod.name){
|
|
|
|
+ sz.push(mod.name.substring(0,1))
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return sz;
|
|
|
|
+ },
|
|
|
|
+ //微信选择图片
|
|
|
|
+ chooseImage(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;
|
|
|
|
+ WxJsApi.uploadPic(this.imgBase64).then(response => {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ this.indexModel.photo=response;
|
|
|
|
+
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ mui.toast(error);
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //生成二维码
|
|
|
|
+ qrcode() {
|
|
|
|
+
|
|
|
|
+ let qrcode = new QRCode('qrcode', {
|
|
|
|
+ width: 200,
|
|
|
|
+ height: 200,
|
|
|
|
+ text: window.location.href,
|
|
|
|
+ correctLevel: QRCode.CorrectLevel.M,
|
|
|
|
+ // render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
|
|
|
|
+ colorLight: '#FFFFFF' ,
|
|
|
|
+ colorDark: '#33BB00'
|
|
|
|
+ })
|
|
|
|
+ var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
|
+ this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
|
+ },
|
|
|
|
+ //获取详情
|
|
|
|
+ getDetail() {
|
|
|
|
+ this.isLoading = true;
|
|
|
|
+
|
|
|
|
+ API_To.getDetail(this.id ).then(response => {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+
|
|
|
|
+ this.detail = response;
|
|
|
|
+ if(this.detail.status!='0'){
|
|
|
|
+ this.step='3'
|
|
|
|
+ //生成二维码
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.qrcode();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ mui.toast(error);
|
|
|
|
+ })
|
|
|
|
+ },asynCallBack(){},
|
|
|
|
+ submit(){
|
|
|
|
+ var btnArray = ['否', '是'];
|
|
|
|
+ var _this = this;
|
|
|
|
+ mui.confirm('确认当操作?', '提示', btnArray, function(e) {
|
|
|
|
+ if (e.index == 1) {
|
|
|
|
+ _this.isLoading = true;
|
|
|
|
+ API_To.update(_this.subForm).then(response => {
|
|
|
|
+ _this.step='3'
|
|
|
|
+ mui.toast("操作成功");
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ _this.isLoading = false;
|
|
|
|
+ mui.toast(error);
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ //获取微信配置
|
|
|
|
+ WxJsApi.getWxConfig();
|
|
|
|
+ this.getDetail();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ destroyed() {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|