mkw-visit-wx/pages/visit/detail.vue

<template>
	<page-meta :page-style="'overflow:'+(showCodes||showCancel?'hidden':'visible')"></page-meta>
	<view class="containers">
		<view class="db">
			<view class="dblist">
				<view>
					<view class="dbitem">
						<text class="dbtype">{{info.type_text}}</text>
						<view class="dbstatus bm">
							<view>{{info.audit_status_text}}</view>
							<view>
								<text style="margin-right:10px">访问时间：{{info.date}}</text>
								<text>{{info.visit_time.start_time}}至{{info.visit_time.end_time}}</text>
							</view>
							<view v-if="info.type=='2'">施工时段：{{info.work_start_time}}至{{info.work_end_time}}</view>
						</view>
						<view class="dbinfo justify-left">
							<view>
								<view>被访人：<text>{{info.accept_admin.name}}</text></view>
								<view>部门：<text>{{info.accept_admin.department.name}}</text></view>
								<view>访问区域：<text>{{info.visit_area.name}}</text></view>
							</view>
							<view>
								<view>拜访人：<text>{{info.name}}</text></view>
								<view>电话：{{info.mobile}}</view>
								<view v-if="info.type=='1'">事由：<text>{{info.reason}}</text></view>
								<view v-else-if="info.type=='3'">停车区域：<text>{{info.plate}}</text></view>
							</view>
						</view>
						<view class="dblong">
							<view>长期访客申请：<text>{{info.long_time==0?'否':'是'}}</text></view>
							<view v-if="info.long_time==1">长期访问时间：{{info.start_date}} 至 {{info.end_date}}</view>
						</view>

					</view>
				</view>
				<template v-if="info.type!='3'">
					<view class="dbtext">随访人员</view>
					<view class="dbitem sfyritem">
						<template v-if="info.follw_people.length>0">
							<view class="dbinfo justify-left" v-for="people in info.follw_people">
								<view>
									<view>
										随访人：<text>{{people.name}}</text>
									</view>
									<view>证件类型：<text>{{people.credent==1?'身份证':'护照'}}</text></view>
									<view>证件号：<text>{{people.idcard}}</text></view>
								</view>
								<view>
									电话：<text>{{people.mobile}}</text>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="dbinfo justify-left">
								无
							</view>
						</template>
					</view>
				</template>

				<template>
					<view class="dbtext">到访车辆</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo dbcars" v-if="info.cars">
							<view class="onechild" v-for="item in info.cars">
								车牌：<text>{{item}}</text>
							</view>
						</view>
						<view class="dbinfo dbcars" v-else>
							<view class="onechild">
								无
							</view>
						</view>
					</view>
				</template>

				<template v-if="info.type=='3'">
					<view class="dbtext">收货人</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo justify-left">
							<view>
								部门：<text>{{info.accept_goods_admin.department.name}}</text>
							</view>
							<view>
								人员：<text>{{info.accept_goods_admin.name}}</text>
							</view>
						</view>
					</view>
				</template>
				<view class="dbtext">被访人员</view>
				<view class="dbitem sfyritem">
					<view class="dbinfo justify-left">
						<view>
							部门：<text>{{info.accept_admin.department.name}}</text>
						</view>
						<view>
							人员：<text>{{info.accept_admin.name}}</text>
						</view>
					</view>
				</view>
				<template v-if="info.accept_admin_sign">
					<view class="dbtext">签字</view>
					<view class="dbitem sfyritem">
						<view class="dbinfo justify-left">
							<image style="width:100%" :src="info.accept_admin_sign_file.url" mode=""></image>
						</view>
					</view>
					
				</template>
				<view class="justify-between cancelcode">
					<button :class="info.audit_status<1?'wd100 cancelbtn':'cancelbtn'" v-if="info.audit_status<2&&info.audit_status!=5" @click="showCancelM"
						type="primary">取消拜访</button>
						
					<button :class="info.audit_status==3?'wd100 codebtn':'codebtn'" v-if="info.audit_status==1||info.audit_status==3" @click="createdCode"
						type="primary" style="">出示二维码</button>
				</view>
			</view>

		</view>

		<!-- 二维码 -->
		<u-popup class="codepop" :show="showCodes" mode="center" closeable="true" @close="closeshowCodes">
			<view class="userBox" style="padding:0 120rpx 0rpx 120rpx;">
				<view class="userInfoContent" style="padding: 40rpx;font-size: 28rpx;">
					<text class="">核销码：{{info.code}}</text>
				</view>
				<view class="qrcode">
					<canvas canvas-id='qrcode' style="width: 170px;height:170px;margin: 0 auto;">

					</canvas>
				</view>

			</view>
		</u-popup>
		
		
		<!-- 取消 -->
		<u-popup class="cancelpop" :show="showCancel" mode="center" closeable="true" @close="cancelCancel">
			<view class="userBox" style="padding:0 120rpx 0rpx 120rpx;">
				<view class="userInfoContent" style="padding: 40rpx;font-size: 36rpx;">
					<text class="">是否确认取消此次拜访?</text>
				</view>
				<view class="justify-between cancelbtns">
					<button @click="cancelCancel" class="cancelbtn">取消</button>
					<button @click="confirmCancel" class="codebtn">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import '@/static/css/bd.css'
	import uQRCode from "@/utils/qrcode.js"
	export default {
		data() {
			return {
				id: "",
				info: {},
				showCodes: false,
				showCancel:false
			}
		},
		onReady() {

		},
		onLoad(options) {
			this.id = options.id
			this.loadDetail()
		},
		methods: {
			closeshowCodes() {
				this.showCodes = false
			},
			createdCode(code) {
				var id = "qrcode";
				this.showCodes = true
				uQRCode.make({
					canvasId: id,
					componentInstance: this,
					text: this.info.code,
					size: 170,
					// margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {

					}
				})

			},
			showCancelM(){
				this.showCancel = true
			},
			confirmCancel(){
				this.info.audit_status = 5
				this.info.audit_status_text = "已取消"
				let that = this
				this.showCancel = false
				this.util.request({
					api: '/api/mobile/visit/visit-save',
					method: "POST",
					data: that.info,
					utilSuccess: function(res) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
						uni.navigateTo({
							url:'/pages/visit/visithistory'
						})
					},
					utilFail: function(res) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			cancelCancel(){
				this.showCancel = false
			},
			loadDetail() {
				let that = this
				this.util.request({
					api: '/api/mobile/user/my-visit-detail',
					method: "get",
					data: {
						id: that.id
					},
					utilSuccess: function(res) {
						that.info = res
					},
					utilFail: function(res) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			isnull(p) {
				if (p == '' || p == undefined || p == null || p == 'undefined' || p == 'null') {
					return ""
				} else {
					return p
				}
			}
		}


	}
</script>

<style scoped>
	.containers {
		background-color: #eceefe;
		min-height: 100vh;
		padding-top: 20rpx;
	}

	.dbtext {
		padding-top: 10rpx;
		margin-bottom: 30rpx;
		color: #303639;
		font-size: 40rpx;
		padding-left: 30rpx
	}
	.dbcars>view{
		width:100%;
		padding-left:0
	}
	.sfyritem {
		padding-bottom: 10rpx
	}

	.dbinfo>view text {
		color: #8f9596;
	}

	/deep/ .u-popup__content {
		background: #fff;
	}

	.cancelcode {
		margin: 60rpx 0;
		background-color: #eceefe;
	}

	.cancelcode button,.cancelbtns button {
		width: 45%
	}

	.cancelcode button.cancelbtn,.cancelbtns button.cancelbtn {
		background: #dddd;
		border: none;
		color:#333
	}

	.cancelcode button.codebtn,.cancelbtns button.codebtn {
		background: #044ed7;
		border: none;
		color:#fff
	}
	.cancelcode button.wd100{
		width:100%;
		
	}
</style>