From b0e249aa5d69791a5d9b9bec64d4e8897b4bae69 Mon Sep 17 00:00:00 2001
From: yangan <yangan0921@163.com>
Date: 星期五, 28 三月 2025 17:32:09 +0800
Subject: [PATCH] feat:体积缩小

---
 pages/customer-page/customer-index/customer-index.vue |  993 ++++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 653 insertions(+), 340 deletions(-)

diff --git a/pages/customer-page/customer-index/customer-index.vue b/pages/customer-page/customer-index/customer-index.vue
index 6437192..082d79e 100644
--- a/pages/customer-page/customer-index/customer-index.vue
+++ b/pages/customer-page/customer-index/customer-index.vue
@@ -1,381 +1,694 @@
 <template>
-	<view class="customer-index">
-		<view class="customer-index-body">
-			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty>
-			<card v-for="(item, index) in orderPlanData" :key="index" :name="item.id" @click="cardBodyClick">
-				<template v-slot:left>
-					<view class="card-left__top">
-						<text>{{ item.carNum }}</text>
-						寮�
-					</view>
-					<view class="card-left__utils">
-						<u-button @tap.stop="receiveClick(item)" text="棰嗗彇" type="primary" v-if="item.carNum != 0" shape="circle"></u-button>
-						<u-button text="杞彂" type="primary" @tap.stop="forwardClick(item)" shape="circle" v-if="item.cars2 != 0"></u-button>
-					</view>
-				</template>
-				<template v-slot:right-top>
-					<view class="right-top">
-						<view class="card-right-top-row">
-							<view>
-								<text>{{ item.deptName || '' }}</text>
+	<view class="">
+		<view class="customer-index">
+			<view class="customer-index-body">
+				<!-- 寰呴鍙栧拰杞彂鎻愮叅鍗� -->
+				<view class="wait-collection"
+					style="background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain">
+				</view>
+				<view style="position: relative;top: -120px;">
+					<u-empty mode="data"
+						icon="http://cdn.uviewui.com/uview/empty/data.png"
+						textSize="30"
+						iconSize="1000"
+						text="鏆傛棤鏁版嵁"
+						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="first-line">
+							<view class="dispatch-receive">
+								<view class="dispatch-dept">{{ item.deptName }}</view>
+								<view class="black-bar"></view>
+								<view class="dispatch">{{ item.filedName }}</view>
 							</view>
-							<view>
-								<text>{{ item.coalName }}</text>
+							<view class="point-number">
+								<text class="residue">{{ item.cars2 }}</text>
+								<text>/{{ item.carNum }}</text>
 							</view>
 						</view>
-						<view class="card-right-top-row">
-							<view>
-								<text>宸查鍙杮{ item.cars2 }}寮�</text>
+						<view class="second-line"
+							style="width: 94%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
+							v-if="item.orderType==='鍐呴攢'||item.orderType==='澶栬喘'">
+							{{item.customerName}}
+						</view>
+						<view class="second-line">
+							<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="card-right-top-row">
-							<!-- <view v-if="item.cars == item.cars2 ? false : true">
-								棰嗗彇锛�
-								<text class="lingqu" @tap.stop="numInput(item.id)">{{ item.receiveNum || '_______' }}</text>
-								寮�
-							</view> -->
-							<view v-if="item.cars == item.cars2 ? false : true">鍓╀綑{{ item.carNum - item.cars2 }}寮�</view>
-							<view v-else>宸查瀹�</view>
+						<view class="second-line">
+							{{item.orderCode}}
+						</view>
+						<view class="third-line">
+							<view class="time-icon">
+								<view
+									style="width: 24rpx;height: 24rpx;li ne-height: 24rpx;background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
+								</view>
+							</view>
+							<view class="send-date">{{ item.sendDate }}</view>
+						</view>
+						<view class="fourth-line">
+							<view class="receive"
+								@click.stop="receiveClick(item)">
+								<view class="button-image">棰嗗彇</view>
+							</view>
+							<view class="forward"
+								@click.stop="forwardClick(item)">
+								<view class="button-image">杞彂</view>
+							</view>
 						</view>
 					</view>
-				</template>
-				<template v-slot:right-bottom>
-					<view class="code">
-						<text>缂栧彿锛歿{ item.code || '' }}</text>
-					</view>
-				</template>
-			</card>
-		</view>
-		<view class="history-numbers">
-			<combined-title title="鍘嗗彶鎻愮叅鍗�"></combined-title>
-			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="historyScrolltolower">
-				<uni-table border stripe emptyText="鏆傛棤鏇村鏁版嵁" :loading="loading">
-					<uni-tr>
-						<uni-th width="100" align="center">鍙戣繍鏃ユ湡</uni-th>
-						<uni-th width="100" align="center">鎵�灞炲崟浣�</uni-th>
-						<uni-th align="center" width="150">鐓ゅ満鍚嶇О</uni-th>
-						<uni-th align="center" width="100">鐓ょ鍚嶇О</uni-th>
-						<uni-th align="center" width="150">璁㈠崟缂栧彿</uni-th>
-						<uni-th align="center" width="100">璁㈠崟鍓╀綑閲�</uni-th>
-						<uni-th align="center" width="80">鎻愮叅鍗曚釜鏁�</uni-th>
-					</uni-tr>
-					<uni-tr v-for="(item, index) in historyCoalData" :key="index">
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.sendDate }}</uni-td>
-						<uni-td align="left" @row-click="faYundetail(item)">{{ item.deptName }}</uni-td>
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.filedName }}</uni-td>
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.coalName }}</uni-td>
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.orderCode }}</uni-td>
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.carNumSurplus }}</uni-td>
-						<uni-td align="center" @row-click="faYundetail(item)">{{ item.tmCount }}</uni-td>
-					</uni-tr>
-				</uni-table>
-				<view class="more_text" v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view>
-			</scroll-view>
-		</view>
-		<!-- 棰嗗彇寮瑰嚭妗� -->
-		<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>
+
+				<!-- 鍘嗗彶鎻愮叅鍗� -->
+				<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"
+							text="鏆傛棤鏁版嵁"
+							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>
+							<view class="second">
+								<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_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>
+								<view class="third-line">
+									<view class="third-line_text">鎻愮叅鍗曚釜鏁�:</view>
+									<view class="third-line_num">{{ item.tmCount }}</view>
+								</view>
+							</view>
+							<view class="fourth">
+								<view class="fourth-icon">
+									<view
+										style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
+									</view>
+								</view>
+								<view class="senddate">{{ item.sendDate }}</view>
+							</view>
+							<view class="fourth">
+								<view class="fourth-icon">
+									<view
+										style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;">
+									</view>
+								</view>
+								<view class="senddate">{{ item.orderCode }}</view>
+							</view>
+						</view>
+						<view class="more_text"
+							v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view>
+						<view class="white-block"></view>
+					</scroll-view>
+				</view>
 			</view>
-		</u-popup>
+			<!-- 棰嗗彇寮瑰嚭妗� -->
+			<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"
+							:disabled="canClick"
+							:loading="popupDetermineClickLoading"></u-button></view>
+				</view>
+			</u-popup>
+		</view>
 	</view>
 </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
-		}
-	},
-	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) {
-					if (this.pageCurrent > 1) {
-						this.historyCoalData = this.historyCoalData.concat(res.data.records);
-						this.loading = false;
-					} else {
-						this.historyCoalData = res.data.records;
-						this.loading = false;
-					}
-					// this.historyCoalData = [...this.historyCoalData, ...res.data.records];
-					// this.total = res.data.total;
-					// this.loading = false;
-				}
-			});
-		},
-		// 涓婃媺鍔犺浇
-		historyScrolltolower() {
-			if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
-			this.pageCurrent++;
-			this.getJhOrderPlanDataPage();
-		},
-		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.data ? res.data : '棰嗗彇澶辫触');
-					}
-				});
-			} else {
-				uni.showToast({
-					title: '璇疯緭鍏ラ鍙栨暟閲�',
-					icon: 'none'
-				});
+	import combinedTitle from '@/components/combined-title/combined-title.vue';
+	import { customerId } from '@/utils/status';
+	export default {
+		props: {
+			orderPlanDataStore: {
+				type: Array,
+				default: []
 			}
-			this.show = false;
 		},
-		/**
-		 * @瀹㈡埛棰嗗彇
-		 * 棰嗗彇寮规
-		 */
-		receiveClick(item) {
-			this.show = true;
-			this.getOrderNum.id = item.id; // 鑾峰彇棰嗗彇鎻愮叅鍗曠殑id
+		components: {
+			combinedTitle
 		},
-		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(name) {
-			console.log(name, 'name');
-			let code = null;
-			let cars2 = null;
-			this.orderPlanData.forEach(item => {
-				if (item.id == name) {
-					code = item.code;
-					cars2 = item.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,
+				popupDetermineClickLoading: false
+			};
+		},
+		onLoad() {
+			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() {
+				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.popupDetermineClickLoading = true;
+					this.getOrderNum.num = this.receiveNum;
+					uni.showLoading({ title: '鍔犺浇涓�...' });
+					this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
+						uni.hideLoading();
+						if (res.code == 0) {
+							this.popupDetermineClickLoading = false;
+							this.getOrderNum.num = '';
+							this.GetOrderPlan();
+							this.show = false;
+							uni.showToast({
+								title: '棰嗗彇鎴愬姛锛�',
+								icon: 'none',
+								duration: 1000
+							});
+						} else {
+							this.popupDetermineClickLoading = false;
+							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;
 				}
-			});
-			uni.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${name}&code=${code}&cars2=${cars2}` });
-		},
-		// 鐐瑰嚮鍘嗗彶鎻愮叅鍗曚竴琛岃幏鍙栬鎯�
-		faYundetail(v) {
-			uni.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}` });
-		},
-		// 杞彂
-		forwardClick(obj) {
-			uni.navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}` });
+			},
+			/**
+			 * @瀹㈡埛棰嗗彇
+			 * 棰嗗彇寮规
+			 */
+			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}` });
+			},
+			// 鐐瑰嚮鍘嗗彶鎻愮叅鍗曡幏鍙栬鎯�
+			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}` });
+			}
 		}
-	}
-};
+	};
 </script>
 
-<style lang="scss" scoped>
-.scroll-Y {
-	height: 600rpx;
-	margin-bottom: vww(50);
-	.more_text {
-		color: #999;
-		font-size: 24rpx;
-		text-align: center;
+<style lang="scss"
+	scoped>
+	@mixin flex {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 	}
-}
-::v-deep.customer-index {
-	width: 94%;
-	margin: 0 auto;
-	// 涓讳綋
-	.customer-index-body {
-		margin-bottom: vww(10);
-		.card-left__top {
-			margin-top: vww(26);
+
+	.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;
-			color: #ffffff;
-			text {
-				font-size: vww(48);
-				font-weight: 800;
-			}
 		}
-		.card-left__utils {
-			display: flex;
-			padding: 0 vww(15) 0 vww(15);
-			.u-button {
-				width: vww(55);
-				height: vww(24);
-				background-color: #fff;
-				color: #1987ff;
+	}
+
+	.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-weight: 300;
+				color: #303030;
+				@include flex;
+				margin: vww(10) vww(10) 0;
 			}
-		}
-		.right-top {
-			display: flex;
-			flex-flow: column nowrap;
-			align-content: space-around;
-			.card-right-top-row {
-				margin-top: vww(8);
-				text-align: center;
-				.lingqu {
-					margin-right: vww(10);
-					border-bottom: 1px solid #000000;
-					width: vww(30);
-					height: vww(30);
+
+			.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);
 				}
-				&:nth-child(1) {
-					display: flex;
-					justify-content: space-between;
-					view {
-						text-align: center;
-						width: 50%;
+
+				.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;
+				}
+			}
+		}
+	}
+
+	::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: 370rpx;
+					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: flex-start;
+							align-items: center;
+
+							.dispatch-dept {
+
+								display: flex;
+								align-items: center;
+							}
+
+							.black-bar {
+								width: 2rpx;
+								height: 30rpx;
+								background: #515151;
+								margin-left: vww(12);
+							}
+
+							.dispatch {
+								margin-left: vww(12);
+								min-width: vww(50);
+							}
+
+						}
+
+						.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: 40%;
+						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;
+						}
+					}
+
+					.fourth-line {
+						width: 100%;
+						height: vww(30);
+						@include flex;
+						justify-content: flex-start;
+						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);
+							}
+						}
 					}
 				}
 			}
 		}
 
-		.code {
-			margin-top: vww(7);
-			text-align: center;
-		}
+		// 棰嗗彇寮瑰嚭妗�
+		.receiverPopup {
+			height: vww(110);
 
-		// .newTask-card-body-row {
-		// 	text-align: center;
-		// 	.lingqu {
-		// 		margin-right: vww(10);
-		// 		border-bottom: 1px solid #000000;
-		// 		width: vww(30);
-		// 		height: vww(30);
-		// 	}
+			.receiverPopup__title {
+				margin: vww(10) auto 0;
+				width: 80%;
+				text-align: center;
+			}
 
-		// &:nth-child(1) {
-		// 	font-weight: 600;
-		// }
+			.receiverPopup__input {
+				width: 80%;
+				margin: vww(10) auto 0;
 
-		// &:nth-child(2) {
-		// 	margin-top: vww(10);
-		// 	font-weight: 600;
-		// }
+				.u-input {
+					border: 1px solid #dddddd;
+				}
+			}
 
-		// &:nth-child(3) {
-		// 	margin-top: vww(10);
-		// 	font-weight: 600;
-		// }
+			&__btn {
+				margin: vww(10) auto;
+				width: 50%;
 
-		// &:nth-child(4) {
-		// 	margin-top: vww(10);
-		// 	font-weight: 600;
-		// }
-
-		// view {
-		// 	display: inline-block;
-
-		// 	&:nth-child(1) {
-		// 		margin-right: vww(20);
-		// 	}
-		// }
-		// }
-
-		.utilsBtn {
-			display: flex;
-
-			.u-button {
-				width: 30%;
+				.u-button {
+					height: vww(20);
+				}
 			}
 		}
 	}
-
-	// 棰嗗彇寮瑰嚭妗�
-	.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>

--
Gitblit v1.9.1