From 491249bdf736a5f7d50417c889ad2db734b12383 Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期四, 07 九月 2023 10:22:07 +0800
Subject: [PATCH] 操作指引修改

---
 pages/customer-page/customer-index/customer-index.vue | 1103 +++++++++++++++++++++++++++++++++++----------------------
 1 files changed, 679 insertions(+), 424 deletions(-)

diff --git a/pages/customer-page/customer-index/customer-index.vue b/pages/customer-page/customer-index/customer-index.vue
index c74a242..b1c1aff 100644
--- a/pages/customer-page/customer-index/customer-index.vue
+++ b/pages/customer-page/customer-index/customer-index.vue
@@ -2,87 +2,186 @@
 	<view class="">
 		<view class="customer-index">
 			<view class="customer-index-body">
-				<!-- 寰呴鍙栧拰杞彂鎻愮叅鍗� -->
-				<view class="wait-collection" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain"></view>
+				<!-- 寰呴鍙栧拰杞彂閫氱煡鍗� -->
+				<view class="wait-collection"
+					:style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/customerbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
+				</view>
+				<!-- 寮曞椤� -->
+				<view class="noob-tour"
+					v-if="roleType===4">
+					<combined-title title="鎿嶄綔鎸囧紩"></combined-title>
+					<u-cell-group>
+						<u-cell title="鏂版墜鎸囧紩"
+							name='1'
+							:clickable="true"
+							@click="noobTour">
+							<u-badge type="primary"
+								value="01"
+								slot='icon'></u-badge>
+							<u-icon slot="value"
+								name="arrow-right"
+								size="30"
+								color="#b8b8b8"></u-icon>
+						</u-cell>
+					</u-cell-group>
+				</view>
 				<view style="position: relative;top: -120px;">
-					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty>
+					<u-empty mode="data"
+						icon="http://cdn.uviewui.com/uview/empty/data.png"
+						textSize="30"
+						iconSize="1000"
+						v-if="orderPlanData.length == 0"></u-empty>
 				</view>
 				<view class="collection-form">
-					<view class="collection-form-item" v-for="(item, index) in orderPlanData" :key="index" @click="cardBodyClick(item)">
+					<view class="collection-form-item"
+						v-for="(item, index) in orderPlanData"
+						:key="index"
+						@click="cardBodyClick(item)">
 						<view class="first-line">
 							<view class="dispatch-receive">
-								<view class="dispatch">{{ item.filedName }}</view>
+								<view class="dispatch">{{ item.filedName||'' }}</view>
 							</view>
-							<view class="point-number">
-								<text class="residue">{{ item.cars2 }}</text>
-								<text>/{{ item.carNum }}</text>
+							<view class="point-number"
+								v-if="roleType == 1">
+								<text class="residue">{{ item.cars2||'' }}</text>
+								<text>/{{ item.carNum ||''}}</text>
 							</view>
 						</view>
 						<view class="second-line">
-							<view class="coal-name">{{ item.coalName }}</view>
-							<view class="black-block"></view>
-							<view class="coal-type" v-if="item.orderType">{{ item.orderType }}</view>
+							<view class="coal-name">
+								<view class="">{{ item.coalName ||''}}</view>
+								<view class="black-bar"></view>
+								<view class="coal-type"
+									v-if="item.orderType">{{ item.orderType||'' }}</view>
+							</view>
 						</view>
 						<view class="third-line">
-							<view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
+							<!-- <view class="time-icon">
+								<view
+									:style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carNO.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
+								</view>
+							</view> -->
+							<view class="car-num">{{ item.code||''}}</view>
+						</view>
+						<view class="third-line">
+							<view class="time-icon">
+								<view
+									:style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
+								</view>
+							</view>
 							<view class="send-date">{{ item.sendDate }}</view>
 						</view>
 						<view class="fourth-line">
-							<u-button @tap.stop="receiveClick(item)" text="棰嗗彇" type="primary" v-if="item.carNum - item.cars2 != 0" shape="circle"></u-button>
-							<u-button text="杞彂" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button>
+							<view class="receive"
+								@click.stop="receiveClick(item)"
+								v-if="item.orderType!=='澶栬喘'">
+								<view class="button-image">棰嗗彇</view>
+							</view>
+							<view class="forward"
+								@click.stop="forwardClick(item)"
+								v-if="item.orderType!=='澶栬喘'">
+								<view class="button-image">杞彂</view>
+							</view>
+							<!-- <view class="forward"
+								@click.stop="validateClick(index)"
+								v-if='roleType===4'>
+								<view class="button-image">楠岃川</view>
+							</view> -->
 						</view>
 					</view>
 				</view>
 
-				<!-- 鍘嗗彶鎻愮叅鍗� -->
+				<!-- 鍘嗗彶閫氱煡鍗� -->
 				<view class="history-numbers">
-					<combined-title title="鍘嗗彶鎻愮叅鍗�"></combined-title>
-					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="historyScrolltolower">
-						<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="historyCoalData.length == 0"></u-empty>
-						<view class="history-information" v-for="(item, index) in historyCoalData" :key="index" @click="faYundetail(item)">
+					<combined-title title="鍘嗗彶閫氱煡鍗�"></combined-title>
+					<scroll-view :scroll-top="scrollTop"
+						scroll-y="true"
+						class="scroll-Y"
+						@scrolltolower="historyScrolltolower">
+						<u-empty mode="data"
+							icon="http://cdn.uviewui.com/uview/empty/data.png"
+							textSize="30"
+							iconSize="1000"
+							v-if="historyCoalData.length == 0"></u-empty>
+						<view class="history-information"
+							v-for="(item, index) in historyCoalData"
+							:key="index"
+							@click="faYundetail(item)">
 							<view class="first">
 								<view class="">{{ item.deptName || '' }}</view>
-								<view class=""><u-icon name="arrow-right" color="#999999" size="40"></u-icon></view>
+								<view class=""><u-icon name="arrow-right"
+										color="#999999"
+										size="40"></u-icon></view>
 							</view>
 							<view class="second">
-								<view class="">{{ item.coalName || '' }}</view>
+								<view class="coal-name">{{ item.coalName || '' }}</view>
 								<view class="order-type">{{ item.orderType || '' }}</view>
 							</view>
 							<view class="third">
 								<view class="third-line">
-									<view class="third-line_text">棰嗗彇鏁帮細</view>
+									<view class="third-line_text">棰嗗彇鏁�:</view>
 									<view class="third-line_num">{{ item.cars2 }}</view>
 								</view>
 								<view class="third-line">
-									<view class="third-line_text">鍓╀綑鏁帮細</view>
-									<view class="third-line_num" v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
-									<view class="third-line_num" v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
+									<view class="third-line_text">鍓╀綑鏁�:</view>
+									<view class="third-line_num"
+										v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
+									<view class="third-line_num"
+										v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
 								</view>
 								<view class="third-line">
-									<view class="third-line_text">鎻愮叅鍗曚釜鏁帮細锛�</view>
+									<view class="third-line_text">閫氱煡鍗曚釜鏁�:</view>
 									<view class="third-line_num">{{ item.tmCount }}</view>
 								</view>
 							</view>
 							<view class="fourth">
-								<view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view>
+								<view class="fourth-icon">
+									<view
+										:style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
+									</view>
+								</view>
 								<view class="senddate">{{ item.sendDate }}</view>
 							</view>
 							<view class="fourth">
-								<view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view>
+								<view class="fourth-icon">
+									<view
+										:style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carnNUm.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'26rpx',height:'26rpx',lineHeight:'26rpx'}">
+									</view>
+								</view>
 								<view class="senddate">{{ item.orderCode }}</view>
 							</view>
 						</view>
-						<view class="more_text" v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view>
+						<view class="more_text"
+							v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view>
 						<view class="white-block"></view>
 					</scroll-view>
 				</view>
 			</view>
+			<!-- 鍥剧墖棰勮寮瑰嚭妗� -->
+			<view class="previewImage-container">
+				<view class="previewImage-container">
+					<previewImage ref="previewImage"
+						:imgs="TourImgList"
+						:saveBtn='false'></previewImage>
+				</view>
+			</view>
 			<!-- 棰嗗彇寮瑰嚭妗� -->
-			<u-popup :show="show" @close="close" @open="open" mode="center" round="10">
+			<u-popup :show="show"
+				@close="close"
+				@open="open"
+				mode="center"
+				round="10">
 				<view class="receiverPopup">
 					<view class="receiverPopup__title"><text>纭棰嗗彇鏁伴噺</text></view>
-					<view class="receiverPopup__input"><u--input v-model="receiveNum" @change="change" placeholder="璇疯緭鍏ュ唴瀹�" type="number" border="surround"></u--input></view>
-					<view class="receiverPopup__btn"><u-button text="纭畾" type="primary" @click="popupDetermineClick"></u-button></view>
+					<view class="receiverPopup__input"><u--input v-model="receiveNum"
+							@change="change"
+							placeholder="璇疯緭鍏ュ唴瀹�"
+							type="number"
+							border="surround"></u--input></view>
+					<view class="receiverPopup__btn"><u-button text="纭畾"
+							type="primary"
+							@click="popupDetermineClick"
+							:disabled="canClick"></u-button></view>
 				</view>
 			</u-popup>
 		</view>
@@ -90,417 +189,573 @@
 </template>
 
 <script>
-import card from '@/components/card/card.vue';
-import combinedTitle from '@/components/combined-title/combined-title.vue';
-import { customerId } from '@/utils/status';
-export default {
-	props: {
-		orderPlanDataStore: {
-			type: Array,
-			default: []
-		}
-	},
-	components: {
-		card,
-		combinedTitle
-	},
-	watch: {
-		orderPlanDataStore: {
-			handler(v) {
-				this.orderPlanData = v;
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	computed: {
-		roleType() {
-			return uni.getStorageSync('roleType');
-		}
-	},
-	data() {
-		return {
-			orderPlanData: [],
-			show: false, // 棰嗗彇鎻愮叅鍗曞脊鍑烘
-			receiveNum: null,
-			getOrderNum: {
-				num: '',
-				id: null
-			},
-			historyCoalData: [],
-			// 琛ㄦ牸鍔犺浇鐘舵��
-			loading: false,
-			scrollTop: 0,
-			// 姣忛〉鏁版嵁閲�
-			pageSize: 10,
-			// 褰撳墠椤�
-			pageCurrent: 1,
-			// 鏁版嵁鎬婚噺
-			total: 0,
-			// 鏄惁鏄剧ず鏇村鏁版嵁
-			showMoreData: false
-		};
-	},
-	onLoad() {},
-	onShow() {
-		this.init();
-	},
-	methods: {
-		init() {
-			this.GetOrderPlan();
-			this.getJhOrderPlanDataPage();
-		},
-		// 鑾峰彇鍙戣繍璁″垝鍒楄〃
-		GetOrderPlan() {
-			uni.showLoading({ title: '鍔犺浇涓�...' });
-			this.$reqGet('GetOrderPlan').then(res => {
-				if (res.data) {
-					this.orderPlanData = res.data;
-					uni.hideLoading();
-				}
-			});
-		},
-		// 鑾峰彇鍘嗗彶鎻愮叅鍗�
-		getJhOrderPlanDataPage() {
-			this.loading = true;
-			this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
-				if (res.data.records) {
-					this.total = res.data.total;
-					if (this.pageCurrent > 1) {
-						this.historyCoalData = this.historyCoalData.concat(res.data.records);
-						this.historyCoalData = this.ArrSet(this.historyCoalData, 'id');
-						this.loading = false;
-					} else {
-						this.historyCoalData = res.data.records;
-						this.loading = false;
-					}
-				}
-			});
-		},
-		// 涓婃媺鍔犺浇
-		historyScrolltolower() {
-			if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
-			this.pageCurrent++;
-			this.getJhOrderPlanDataPage();
-		},
-		//fix 鐐瑰嚮鎻愮叅鍗曡繑鍥炰細澧炲姞閲嶅鏁版嵁
-		ArrSet(Arr, id) {
-			var obj = {};
-			const arrays = Arr.reduce((setArr, item) => {
-				obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item));
-				return setArr;
-			}, []);
-			return arrays;
-		},
-		popupDetermineClick() {
-			if (this.receiveNum) {
-				this.getOrderNum.num = this.receiveNum;
-				uni.showLoading({ title: '鍔犺浇涓�...' });
-				this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.getOrderNum.num = '';
-						this.GetOrderPlan();
-						uni.showToast({
-							title: '棰嗗彇鎴愬姛锛�',
-							icon: 'none',
-							duration: 1000
-						});
-					} else {
-						this.$u.toast(res.msg ? res.msg : '棰嗗彇澶辫触');
-					}
-				});
-			} else {
-				uni.showToast({
-					title: '璇疯緭鍏ラ鍙栨暟閲�',
-					icon: 'none'
-				});
+	import { onlineurl } from '@/api/request.js'
+	import combinedTitle from '@/components/combined-title/combined-title.vue';
+	import { customerId } from '@/utils/status';
+	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
+	export default {
+		props: {
+			orderPlanDataStore: {
+				type: Array,
+				default: []
 			}
-			this.show = false;
 		},
-		/**
-		 * @瀹㈡埛棰嗗彇
-		 * 棰嗗彇寮规
-		 */
-		receiveClick(item) {
-			this.show = true;
-			this.getOrderNum.id = item.id; // 鑾峰彇棰嗗彇鎻愮叅鍗曠殑id
+		components: {
+			combinedTitle,
+			previewImage
 		},
-		open() {},
-		close() {
-			this.show = false;
-			this.receiveNum = null;
+		watch: {
+			orderPlanDataStore: {
+				handler(v) {
+					this.orderPlanData = v;
+				},
+				deep: true,
+				immediate: true
+			}
 		},
-		change(e) {
-			console.log('杈撳叆妗�', e);
+		computed: {
+			roleType() {
+				return uni.getStorageSync('roleType');
+			},
 		},
-		// 鎻愮叅鍗曡鎯�
-		cardBodyClick(v) {
-			// console.log(name, 'name');
-			// let code = null;
-			// let cars2 = null;
-			// this.orderPlanData.forEach(item => {
-			// 	if (item.id == name) {
-			// 		code = item.code;
-			// 		cars2 = item.cars2;
-			// 	}
-			// });
-			uni.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
+		data() {
+			return {
+				orderPlanData: [],
+				show: false, // 棰嗗彇閫氱煡鍗曞脊鍑烘
+				receiveNum: null,
+				getOrderNum: {
+					num: '',
+					id: null
+				},
+				historyCoalData: [],
+				// 琛ㄦ牸鍔犺浇鐘舵��
+				loading: false,
+				scrollTop: 0,
+				// 姣忛〉鏁版嵁閲�
+				pageSize: 10,
+				// 褰撳墠椤�
+				pageCurrent: 1,
+				// 鏁版嵁鎬婚噺
+				total: 0,
+				// 鏄惁鏄剧ず鏇村鏁版嵁
+				showMoreData: false,
+				cars2: "",
+				carNum: "",
+				// 鍓╀綑鐨勯�氱煡鍗曟暟閲�
+				carNumSurplus: '',
+				canClick: false,
+				onlineurl,
+				previewImageShow: false,
+				previewImageSrc: '',
+				TourImgList: ['https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality01.jpg',
+					'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality02.jpg',
+					'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality03.jpg',
+					'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality04.jpg',
+					'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality05.jpg'
+				],
+				imgIndex: 0,
+				startX: 0, // 瑙︽懜璧峰鐐圭殑X鍧愭爣
+				endX: 0, // 瑙︽懜缁撴潫鐐圭殑X鍧愭爣
+				transition: false
+			};
 		},
-		// 鐐瑰嚮鍘嗗彶鎻愮叅鍗曡幏鍙栬鎯�
-		faYundetail(v) {
-			uni.navigateTo({
-				url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&coalName=${v.coalName}&deptName=${v.deptName}`
-			});
+		onLoad() {},
+		onShow() {
+			this.init();
 		},
-		// 杞彂
-		forwardClick(obj) {
-			if (obj.cars2 == 0) return this.$u.toast('璇峰厛棰嗗彇鍚庡啀杞彂');
-			uni.navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}` });
+		methods: {
+			init() {
+				this.GetOrderPlan();
+				this.getJhOrderPlanDataPage();
+				this.onlineurl = onlineurl;
+			},
+			// 鑾峰彇鍙戣繍璁″垝鍒楄〃
+			GetOrderPlan() {
+				uni.showLoading({ title: '鍔犺浇涓�...' });
+				this.$reqGet('GetOrderPlan').then(res => {
+					if (res.data) {
+						this.orderPlanData = res.data;
+						uni.hideLoading();
+					}
+				});
+			},
+			// 鑾峰彇鍘嗗彶閫氱煡鍗�
+			getJhOrderPlanDataPage() {
+				uni.showLoading({
+					title: '鍔犺浇涓�'
+				});
+				this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
+					if (res.data.records) {
+						this.total = res.data.total;
+						if (this.pageCurrent > 1) {
+							this.historyCoalData = this.historyCoalData.concat(res.data.records);
+							this.historyCoalData = this.ArrSet(this.historyCoalData, 'id');
+							uni.hideLoading();
+						} else {
+							this.historyCoalData = res.data.records;
+							uni.hideLoading();
+						}
+					}
+				});
+			},
+			// 涓婃媺鍔犺浇
+			historyScrolltolower() {
+				if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
+				this.pageCurrent++;
+				this.getJhOrderPlanDataPage();
+			},
+			//fix 鐐瑰嚮閫氱煡鍗曡繑鍥炰細澧炲姞閲嶅鏁版嵁
+			ArrSet(Arr, id) {
+				var obj = {};
+				const arrays = Arr.reduce((setArr, item) => {
+					obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item));
+					return setArr;
+				}, []);
+				return arrays;
+			},
+			popupDetermineClick() {
+				if (this.receiveNum > 0) {
+					this.getOrderNum.num = this.receiveNum;
+					uni.showLoading({ title: '鍔犺浇涓�...' });
+					this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
+						uni.hideLoading();
+						if (res.code == 0) {
+							this.getOrderNum.num = '';
+							this.GetOrderPlan();
+							this.show = false;
+							uni.showToast({
+								title: '棰嗗彇鎴愬姛锛�',
+								icon: 'none',
+								duration: 1000
+							});
+						} else {
+							this.$u.toast(res.msg ? res.msg : '棰嗗彇澶辫触');
+						}
+					});
+				} else if (Number(this.receiveNum) <= 0) {
+					uni.showToast({
+						title: '璇疯緭鍏ュ悎娉曠殑鏁板瓧',
+						icon: 'none'
+					});
+					this.show = true;
+				} else {
+					uni.showToast({
+						title: '璇疯緭鍏ラ鍙栨暟閲�',
+						icon: 'none'
+					});
+					this.show = true;
+				}
+			},
+			/**
+			 * @瀹㈡埛棰嗗彇
+			 * 棰嗗彇寮规
+			 */
+			receiveClick(item) {
+				this.show = true;
+				this.getOrderNum.id = item.id; // 鑾峰彇棰嗗彇閫氱煡鍗曠殑id
+				this.cars2 = item.cars2
+				this.carNum = item.carNum
+			},
+			open() {},
+			close() {
+				this.show = false;
+				this.receiveNum = null;
+			},
+			change(e) {
+				console.log('杈撳叆妗�', e);
+				this.canClick = e > (this.carNum - this.cars2)
+				if (this.canClick) {
+					this.$u.toast('宸茶秴杩囧綋鍓嶆棩璁″垝閫氱煡鍗曟暟閲�,璇烽噸鏂拌緭鍏�')
+				}
+			},
+			// 閫氱煡鍗曡鎯�
+			cardBodyClick(v) {
+				uni
+					.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2?v.cars2:""}` });
+			},
+			// 鐐瑰嚮鍘嗗彶閫氱煡鍗曡幏鍙栬鎯�
+			faYundetail(v) {
+				uni.navigateTo({
+					url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&coalName=${v.coalName}&deptName=${v.deptName}`
+				});
+			},
+			// 杞彂
+			forwardClick(obj) {
+				if (obj.cars2 == 0) return this.$u.toast('璇峰厛棰嗗彇鍚庡啀杞彂');
+				uni
+					.navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}` });
+			},
+			// 楠岃川
+			validateClick(index) {
+				uni
+					.navigateTo({ url: `/pages/driver-page/driver-index/bill-of-lading-details/selectOrderPlan/selectOrderPlan?index=${index}` });
+			},
+			noobTour(v) {
+				this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality01.jpg')
+			}
 		}
-	}
-};
+	};
 </script>
 
-<style lang="scss" scoped>
-@mixin flex {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-.wait-collection {
-	width: 100%;
-	height: 600rpx;
-	position: relative;
-	top: vww(-10);
-	z-index: 0;
-}
-.white-block {
-	width: 100%;
-	height: vww(50);
-	margin-top: vww(10);
-}
-.scroll-Y {
-	height: 900rpx;
-	.more_text {
-		color: #333;
-		font-size: 24rpx;
-		text-align: center;
-	}
-}
-.history-numbers {
-	width: 100%;
-	position: relative;
-	top: vww(-110);
-	.history-information {
-		width: 690rpx;
-		height: 398rpx;
-		margin: vww(10) vww(15);
-		background: #ffffff;
-		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
-		border-radius: 20rpx;
-		@include flex flex-direction: column;
-		align-items: flex-start;
-		justify-content: space-evenly;
-		overflow: hidden;
-		.first {
-			width: 96%;
-			height: 34rpx;
-			font-size: 32rpx;
-			font-family: Microsoft YaHei;
-			font-weight: 300;
-			color: #303030;
-			@include flex;
-			margin: vww(10) vww(10) 0;
-		}
-		.second {
-			width: 50%;
-			height: 31rpx;
-			font-size: 30rpx;
-			font-family: Microsoft YaHei;
-			font-weight: 300;
-			color: #515151;
-			margin: vww(10) vww(10) 0;
-			@include flex;
-			.order-type {
-				color: #035cfb;
-				border: 2px solid #035cfb;
-				border-radius: 4rpx;
-				padding: vww(2) vww(4);
-				text-align: center;
-			}
-		}
-		.third {
-			width: 96%;
-			height: 31rpx;
-			font-size: 30rpx;
-			font-family: Microsoft YaHei;
-			font-weight: 300;
-			color: #515151;
-			margin: vww(10) vww(10) 0;
-			@include flex;
-			.third-line {
-				@include flex;
-				&_text {
-					color: #919090;
-				}
-				&_num {
-					color: #035cfb;
-				}
-			}
-		}
-		.fourth {
-			width: 50%;
-			height: 31rpx;
-			font-size: 30rpx;
-			font-family: Microsoft YaHei;
-			font-weight: 300;
-			color: #515151;
-			margin: vww(10) vww(10) 0;
-			@include flex;
-		}
-	}
-}
-
-::v-deep.customer-index {
-	width: 100%;
-	margin: 0 auto;
-	// 涓讳綋
-	.customer-index-body {
-		.collection-form {
-			width: vww(345);
-			margin: 0 vww(15);
-			position: relative;
-			top: vww(-144);
-			.collection-form-item {
-				width: 690rpx;
-				height: 300rpx;
-				background: #ffffff;
-				box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
-				border-radius: 20rpx;
-				overflow: hidden;
-				@include flex flex-direction: column;
-				position: relative;
-				align-items: flex-start;
-				margin-top: vww(10);
-				.first-line {
-					width: 94%;
-					height: vww(30);
-					margin: vww(10) vww(16) 0 vww(16);
-					display: flex;
-					justify-content: space-between;
-					.dispatch-receive {
-						width: 70%;
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-					}
-					.point-number {
-						width: 15%;
-						text {
-							font-size: 24rpx;
-							font-family: Microsoft YaHei;
-							font-weight: 400;
-							color: #c78a64;
-						}
-						.residue {
-							font-size: 40rpx;
-							font-family: CTCuHeiSJ;
-							font-weight: 400;
-							color: #f81414;
-						}
-					}
-				}
-				.second-line {
-					width: 60%;
-					height: vww(30);
-					display: flex;
-					justify-content: space-evenly;
-					align-items: center;
-					.coal-name {
-						width: 30%;
-						height: 30rpx;
-						font-size: 30rpx;
-						font-family: Microsoft YaHei;
-						font-weight: 300;
-						color: #515151;
-						position: relative;
-						display: flex;
-						justify-content: space-between;
-					}
-					.black-block {
-						width: 2rpx;
-						height: 30rpx;
-						background: #515151;
-					}
-					.coal-type {
-						width: 24%;
-						height: 30rpx;
-						font-size: 30rpx;
-						font-family: Microsoft YaHei;
-						font-weight: 300;
-						color: #515151;
-					}
-				}
-				.third-line {
-					width: 40%;
-					height: vww(30);
-					margin-left: vww(15);
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					.send-date {
-						width: 148rpx;
-						height: 24rpx;
-						line-height: 24rpx;
-						font-size: 28rpx;
-						font-family: Microsoft YaHei;
-						font-weight: 300;
-						color: #515151;
-					}
-				}
-				.fourth-line {
-					width: 40%;
-					height: vww(30);
-					@include flex;
-					position: relative;
-					left: 60%;
-					bottom: vww(10);
-					.u-button {
-						width: vww(50);
-						height: vww(30);
-					}
-				}
-			}
-		}
+<style lang="scss"
+	scoped>
+	@mixin flex {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 	}
 
-	// 棰嗗彇寮瑰嚭妗�
-	.receiverPopup {
-		height: vww(110);
+	.wait-collection {
+		width: 100%;
+		height: 600rpx;
+		position: relative;
+		top: vww(-10);
+		z-index: 0;
+	}
 
-		.receiverPopup__title {
-			margin: vww(10) auto 0;
-			width: 80%;
+	.white-block {
+		width: 100%;
+		height: vww(50);
+		margin-top: vww(10);
+	}
+
+	.scroll-Y {
+		height: 900rpx;
+
+		.more_text {
+			color: #333;
+			font-size: 24rpx;
 			text-align: center;
 		}
+	}
 
-		.receiverPopup__input {
-			width: 80%;
-			margin: vww(10) auto 0;
+	.history-numbers {
+		width: 100%;
+		position: relative;
+		top: vww(-110);
 
-			.u-input {
-				border: 1px solid #dddddd;
+		.history-information {
+			width: 690rpx;
+			height: 398rpx;
+			margin: vww(10) vww(15);
+			background: #ffffff;
+			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
+			border-radius: 20rpx;
+			@include flex flex-direction: column;
+			align-items: flex-start;
+			justify-content: space-evenly;
+			overflow: hidden;
+
+			.first {
+				width: 96%;
+				height: 34rpx;
+				font-size: 32rpx;
+				font-weight: 300;
+				color: #303030;
+				@include flex;
+				margin: vww(10) vww(10) 0;
 			}
-		}
 
-		&__btn {
-			margin: vww(10) auto;
-			width: 50%;
-			.u-button {
-				height: vww(20);
+			.second {
+				width: 100%;
+				height: 31rpx;
+				font-size: 30rpx;
+				font-weight: 300;
+				color: #515151;
+				margin: vww(10) vww(10) 0;
+				@include flex;
+				justify-content: flex-start;
+
+				.coal-name {
+					min-width: vww(30);
+					height: vww(20);
+					margin-right: vww(21);
+				}
+
+				.order-type {
+					color: #035cfb;
+					border: 2px solid #035cfb;
+					border-radius: 4rpx;
+					padding: vww(2) vww(4);
+					text-align: center;
+				}
+			}
+
+			.third {
+				width: 96%;
+				height: 31rpx;
+				font-size: 30rpx;
+				font-weight: 300;
+				color: #515151;
+				margin: vww(10) vww(10) 0;
+				@include flex;
+
+				.third-line {
+					@include flex;
+
+					&_text {
+						color: #919090;
+					}
+
+					&_num {
+						color: #035cfb;
+					}
+				}
+			}
+
+			.fourth {
+				width: 100%;
+				height: 31rpx;
+				font-size: 30rpx;
+				font-weight: 300;
+				color: #515151;
+				margin: vww(10) vww(10) 0;
+				@include flex;
+
+				.fourth-icon {
+					width: vww(13);
+					height: vww(13);
+					margin-right: vww(14);
+				}
+
+				.senddate {
+					flex: 1;
+				}
 			}
 		}
 	}
-}
-</style>
+
+	.noob-tour {
+		margin-bottom: vww(10);
+		position: relative;
+		top: -120px;
+	}
+
+	.u-popup {
+		.u-transition {
+			.u-popup__content {
+				.editDriverPopup-container-box {}
+
+				//closeIcon
+				.u-popup__content__close--top-right {
+					.u-icon {
+						.u-icon__icon {
+							font-size: vww(20) !important;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	::v-deep.customer-index {
+		width: 100%;
+		margin: 0 auto;
+
+		// 涓讳綋
+		.customer-index-body {
+			.collection-form {
+				width: vww(345);
+				margin: 0 vww(15);
+				position: relative;
+				top: vww(-144);
+
+				.collection-form-item {
+					width: 690rpx;
+					height: 300rpx;
+					background: #ffffff;
+					box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
+					border-radius: 20rpx;
+					overflow: hidden;
+					@include flex flex-direction: column;
+					position: relative;
+					align-items: flex-start;
+					margin-top: vww(10);
+
+					.first-line {
+						width: 94%;
+						height: vww(30);
+						margin: vww(10) vww(16) 0 vww(16);
+						display: flex;
+						justify-content: space-between;
+
+						.dispatch-receive {
+							width: 70%;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+						}
+
+						.point-number {
+							width: 15%;
+
+							text {
+								font-size: 24rpx;
+								font-weight: 400;
+								color: #c78a64;
+							}
+
+							.residue {
+								font-size: 40rpx;
+								font-weight: 400;
+								color: #f81414;
+							}
+						}
+					}
+
+					.second-line {
+						width: 100%;
+						height: vww(30);
+						margin-left: vww(16);
+						display: flex;
+						align-items: center;
+						justify-content: flex-start;
+
+						.coal-name {
+							flex-grow: 1;
+							height: 30rpx;
+							font-size: 30rpx;
+							font-weight: 300;
+							color: #515151;
+							position: relative;
+							display: flex;
+							align-items: center;
+
+							.black-bar {
+								width: 2rpx;
+								height: 30rpx;
+								background: #515151;
+								margin-left: vww(12);
+							}
+
+							.coal-type {
+								margin-left: vww(12);
+								min-width: vww(50);
+								height: 30rpx;
+								line-height: 30rpx;
+								font-size: 30rpx;
+								font-weight: 300;
+								color: #515151;
+							}
+						}
+					}
+
+					.third-line {
+						width: 80%;
+						height: vww(30);
+						margin-left: vww(15);
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+
+						.send-date {
+							margin-left: vww(14);
+							width: 148rpx;
+							height: 24rpx;
+							line-height: 24rpx;
+							font-size: 28rpx;
+							font-weight: 300;
+							color: #515151;
+						}
+
+						.car-num {
+							color: #515151;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+
+						.time-icon {
+							width: 24rpx;
+							height: 24rpx;
+							line-height: 24rpx;
+						}
+					}
+
+					.fourth-line {
+						width: 100%;
+						height: vww(30);
+						@include flex;
+						justify-content: flex-end;
+						position: relative;
+						bottom: vww(10);
+						left: 25%;
+
+						.receive,
+						.forward {
+							width: vww(123);
+							height: vww(48);
+							@include flex;
+							justify-content: center;
+							color: #ffffff;
+							font-size: 28rpx;
+							position: absolute;
+
+							.button-image {
+								width: 100%;
+								height: 100%;
+								background: url('../../../static/image/banner/button.png') no-repeat;
+								background-size: cover;
+								font-size: 28rpx;
+								font-weight: 300;
+								color: #ffffff;
+								text-align: center;
+								line-height: vww(45);
+							}
+						}
+
+						.receive {
+							left: vww(20);
+						}
+
+						.forward {
+							width: vww(106);
+							left: vww(140);
+
+							.button-image {
+								width: 100%;
+								height: 100%;
+								background: url('../../../static/image/banner/transpartent.png') no-repeat;
+								background-size: cover;
+								font-size: 28rpx;
+								font-weight: 300;
+								color: #3b56eb;
+								text-align: center;
+								line-height: vww(45);
+							}
+						}
+					}
+				}
+			}
+		}
+
+		// 棰嗗彇寮瑰嚭妗�
+		.receiverPopup {
+			height: vww(110);
+
+			.receiverPopup__title {
+				margin: vww(10) auto 0;
+				width: 80%;
+				text-align: center;
+			}
+
+			.receiverPopup__input {
+				width: 80%;
+				margin: vww(10) auto 0;
+
+				.u-input {
+					border: 1px solid #dddddd;
+				}
+			}
+
+			&__btn {
+				margin: vww(10) auto;
+				width: 50%;
+
+				.u-button {
+					height: vww(20);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file

--
Gitblit v1.9.1