From b62578f8b43f15be89b3d14f463f11aed03e6fb9 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 09 五月 2024 18:57:25 +0800
Subject: [PATCH] 最新版本

---
 h5/pages/appointmentDetails/appointmentDetails.vue |  180 ++++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 144 insertions(+), 36 deletions(-)

diff --git a/h5/pages/appointmentDetails/appointmentDetails.vue b/h5/pages/appointmentDetails/appointmentDetails.vue
index 6c2248f..a58e09b 100644
--- a/h5/pages/appointmentDetails/appointmentDetails.vue
+++ b/h5/pages/appointmentDetails/appointmentDetails.vue
@@ -1,24 +1,32 @@
 <template>
 	<view class="box">
-		<view class="box_head">
-			<image src="@/static/logo@2x.png" mode="widthFix"></image>
-			<text class="box_head_a" v-if="info.status === 0">璁垮棰勭害寰呭鏍�</text>
-			<text class="box_head_a" style="color: ;" v-if="info.status === 2">璁垮棰勭害瀹℃牳閫氳繃</text>
-			<text class="box_head_a" v-if="info.status === 3">璁垮棰勭害瀹℃牳涓嶉�氳繃</text>
-			<text class="box_head_b" v-if="info.status === 0">鎮ㄧ殑棰勭害鍗曞凡鎻愪氦瀹℃牳锛岃绛夊緟琚浜哄鏍�</text>
-			<text class="box_head_b" v-if="info.status === 2">鎮ㄧ殑鏉ヨ鐢宠宸插鏍搁�氳繃锛岃鍦ㄩ棬鍗杩涜鐧�</text>
-			<text class="box_head_b" v-if="info.status === 3">鎮ㄧ殑鏉ヨ鐢宠宸茶椹冲洖锛屽師鍥犳槸锛氳繖鏄師鍥�</text>
+		<view class="head_wrap head_success" v-if="info.status == 1"> 
+			<view class="h1">璁垮棰勭害瀹℃牳閫氳繃</view>
+			<view class="h2">鎮ㄧ殑鏉ヨ鐢宠宸插鏍搁�氳繃锛岃鍦ㄨ瀹㈡満绛惧埌鍏ュ巶銆傚閬囩壒娈婃儏鍐碉紝鍙仈绯昏璁夸汉鎴栧畨淇濅汉鍛�</view>
+		</view>
+		<view class="qr_wrap" v-if="info.status == 1">
+			<canvas class="box_head_qrcode" canvas-id="img"></canvas>
+			<view class="text">浣跨敤璁垮鏈烘壂鐮佺鍒�</view>
+		</view>
+		<view class="head_wrap head_padding" v-if="info.status == 2"> 
+			<view class="h1">璁垮棰勭害寰呭鏍�</view>
+			<view class="h2">鎮ㄧ殑棰勭害鍗曞凡鎻愪氦瀹℃牳锛岃绛夊緟琚浜哄鏍�</view>
+		</view>
+		<view class="head_wrap head_error" v-if="info.status == 3"> 
+			<view class="h1">璁垮棰勭害瀹℃牳涓嶉�氳繃</view>
+			<view class="h2">鎮ㄧ殑鏉ヨ鐢宠宸茶椹冲洖锛屽鏈夌枒闂紝鍙仈绯昏璁夸汉</view>
 		</view>
 		<view class="box_list">
 			<view class="box_list_label">鎷滆淇℃伅</view>
+			<view class="box_list_tips" v-if="info.status === 2">璇锋敞鎰忔煡鐪嬪嚭鍏ラ棬绂佷笅鍙戞儏鍐碉紝濡傝嫢涓嬪彂澶辫触闇�閲嶆柊鐢宠</view>
 			<view class="box_list_item">
-				<view class="box_list_item_label">鎷滆鍛樺伐锛�</view>
+				<view class="box_list_item_label">琚浜哄憳锛�</view>
 				<view class="box_list_item_val">{{info.visitUserName}}</view>
 			</view>
-			<view class="box_list_item">
+			<!-- <view class="box_list_item">
 				<view class="box_list_item_label">杞︾墝鍙凤細</view>
 				<view class="box_list_item_val">{{info.carNos}}</view>
-			</view>
+			</view> -->
 			<view class="box_list_item">
 				<view class="box_list_item_label">鎷滆浜嬬敱锛�</view>
 				<view class="box_list_item_val">{{info.visitReason}}</view>
@@ -31,29 +39,71 @@
 				<view class="box_list_item_label">璁块棶闂ㄧ锛�</view>
 				<view class="box_list_item_val" v-if="info.doorGroupName && info.doorGroupName.length > 0">{{info.doorGroupName.join('銆�')}}</view>
 			</view>
+			<view class="box_list_item">
+				<view class="box_list_item_label">涓昏瀹細</view>
+				<view class="box_list_item_val">
+					{{info.name}} {{info.phone}}
+				</view>
+			</view>
 			<view class="box_list_item" v-for="(item, index) in info.withVisitsList" :key="index">
 				<view class="box_list_item_label">闅忚浜哄憳{{index + 1}}锛�</view>
-				<view class="box_list_item_val">{{item.name}} {{item.phone}}</view>
+				<view class="box_list_item_val">
+					{{item.name}} {{item.phone}}
+					<view class="box_list_item_val_btn" v-if="[2,5,7,8,9].includes(item.status)">
+						<u-button text="鏌ョ湅浜岀淮鐮�" size="mini" @click="seeQrCode(item)" type="primary"></u-button>
+					</view>
+				</view>
 			</view>
 		</view>
+		<u-popup :show="show" mode="center" @close="close">
+			<view class="qrocde">
+				<canvas class="qrcode_img" canvas-id="img1"></canvas>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
+	import wxcode from 'uniapp-qrcode'
+	import { visitorSubDetail } from '@/api'
+
 	export default {
 		data() {
 			return {
-				info: {}
+				info: {
+					status: 1
+				},
+				show: false
 			};
 		},
 		onLoad(option) {
-			this.$u.api.detail({ id: option.id })
-				.then(res => {
-					if (res.code === 200) {
-						console.log(res)
-						this.info = res.data
-					}
-				})
+			// this.$u.api.detail({ id: option.id })
+			// visitorSubDetail({ id: option.id })
+			// 	.then(res => {
+			// 		if (res.code === 200) {
+			// 			this.info = res.data
+			// 			if (res.data.qrcode) {
+			// 				this.$nextTick(() => {
+			// 					wxcode.qrcode('img', res.data.qrcode, 320, 320)
+			// 				})
+			// 			}
+			// 		}
+			// 	})
+		},
+		methods: {
+			close() {
+				this.show = false
+			},
+			seeQrCode(code) {
+				if (code.qrcode) {
+					this.show = true
+					this.$nextTick(() => {
+						wxcode.qrcode('img1', code.qrcode, 300, 300)
+					})
+				} else {
+					uni.showToast({ title: '鏆傛棤浜岀淮鐮�', icon: 'none' })
+				}
+			}
 		}
 	}
 </script>
@@ -65,30 +115,68 @@
 <style lang="scss" scoped>
 	.box {
 		width: 100%;
-		.box_head {
-			width: 100%;
-			padding: 40rpx 0;
-			box-sizing: border-box;
-			background-color: #ffffff;
+		.qrocde {
+			width: 300rpx;
+			height: 300rpx;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			flex-direction: column;
-			image {
+			.qrcode_img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.qr_wrap{
+			background-color: #fff;
+			text-align: center;
+			.box_head_qrcode {
 				width: 320rpx;
 				height: 320rpx;
 			}
-			.box_head_a {
-				font-size: 36rpx;
-				font-weight: 600;
-				color: #025EEF;
-				margin-top: 30rpx;
+			.text{
+				font-size: 30rpx;
+				color: #279BAA;
+				padding: 20rpx 0 30rpx;
 			}
-			.box_head_b {
-				font-size: 26rpx;
+		}
+		.head_wrap{
+			padding: 30px;
+			
+			.h1{
+				margin-bottom: 16rpx;
+				font-weight: 600;
+				font-size: 36rpx;
+			}
+			.h2{
 				font-weight: 400;
-				color: #666666;
-				margin-top: 24rpx;
+				font-size: 26rpx;
+			}
+		}	
+		.head_padding{
+			background: #279BAA;
+			.h1{
+				color: #FFFFFF;
+			}
+			.h2{
+				color: #FFFFFF;
+			}
+		}
+		.head_error{
+			background: #FDEDED;
+			.h1{
+				color: #ED4545;
+			}
+			.h2{
+				color: #333333;
+			}
+		}
+		.head_success{
+			background: #E8F4F6;
+			.h1{
+				color: #279BAA;
+			}
+			.h2{
+				color: #333333;
 			}
 		}
 		.box_list {
@@ -97,6 +185,19 @@
 			background-color: #ffffff;
 			padding: 40rpx 30rpx;
 			box-sizing: border-box;
+			.box_list_tips {
+				width: 100%;
+				height: 52rpx;
+				padding: 0 20rpx;
+				box-sizing: border-box;
+				line-height: 52rpx;
+				background-color: rgba(224, 49, 42, 0.06);
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #E0312A;
+				border-radius: 4rpx;
+				margin: 30rpx 0;
+			}
 			.box_list_label {
 				font-size: 32rpx;
 				font-weight: 500;
@@ -108,6 +209,7 @@
 				align-items: center;
 				margin-top: 30rpx;
 				.box_list_item_label {
+					flex-shrink: 0;
 					font-size: 28rpx;
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
@@ -118,6 +220,12 @@
 					font-family: PingFangSC, PingFang SC;
 					font-weight: 400;
 					color: #333333;
+					display: flex;
+					align-items: center;
+					.box_list_item_val_btn {
+						width: 140rpx;
+						margin-left: 15rpx;
+					}
 				}
 			}
 		}

--
Gitblit v1.9.3