count-pass-app/subpages/order/mixed.vue

<template>
	<view class="order-infos">
		<view class="code-wrap">
			<view>
				<image style="width:84px;height:66px" src="/subpages/static/czzn-img/order/order-detail1.png"
					mode="aspectFit" />

			</view>
		</view>
		<view class="order-card">
			<view class="order-card-title">
				<text class="info">{{ orderInfo.tenantName || '' }}</text>
				<text  class="status" style="background:#2cab0c">{{$t('order.mainOrder')}}</text>
				<view class="orderStatus-info" v-if="orderInfo.orderType != '4'">
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 0"
						src="/subpages/static/czzn-img/state/not-factory.png"></u--image>
					<u--image width="100rpx" height="88rpx"
						v-if="orderInfo.orderStatus == 1 && orderInfo.weighingStatus == 0"
						src="/subpages/static/czzn-img/state/in-factory.png"></u--image>
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 2"
						src="/subpages/static/czzn-img/state/completed.png"></u--image>
					<u--image width="100rpx" height="88rpx"
						v-if="orderInfo.orderStatus == 1 && orderInfo.weighingStatus != 0"
						src="/subpages/static/czzn-img/state/weighed.png"></u--image>
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 4"
						src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
				</view>
				<view class="orderStatus-info" v-if="orderInfo.orderType == '4'">
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 0"
						src="/subpages/static/czzn-img/state/no-take-order.png"></u--image>
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 1"
						src="/subpages/static/czzn-img/state/start-take-order.png"></u--image>
					<u--image width="100rpx" height="88rpx" v-if="orderInfo.orderStatus == 2"
						src="/subpages/static/czzn-img/state/completed.png"></u--image>
					<u--image width="100rpx" height="88rpx"
						v-if="orderInfo.enabledMarkType == 1 || orderInfo.orderStatus == 4"
						src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
				</view>
			</view>
			<view class="order-card-info">

				<view class="row">
					<p class="cell">
						<text class="label">{{ $t('order.orderDate') }}</text>
						<text class="info">{{ orderInfo.setDate || '' }}</text>
					</p>
					<p class="cell">
						<text class="no">No {{ orderInfo.code || '' }}</text>
					</p>
				</view>
				<view class="row">
					<p class="cell">
						<text class="label">{{ $t('order.vehicleType') }}</text>
						<text class="info" v-if="orderInfo.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
						<text class="info" v-if="orderInfo.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
						<text class="info" v-if="orderInfo.vehicleType == '103'">{{ $t('order.materialsOrder') }}</text>
						<text class="info" v-if="orderInfo.vehicleType == '104'">{{ $t('order.transferOrder') }}</text>
						<span class="tag tag-ls" v-if="orderInfo.orderType == '1'">{{ $t('order.temp') }}</span>
						<span class="tag tag-gd" v-if="orderInfo.orderType == '2'">{{ $t('order.fixed') }}</span>
					</p>
				</view>
				<view class="row">
					<p class="cell">
						<text class="label">{{ $t('order.companyName') }}</text>
						<text class="info">{{ orderInfo.companyName || '' }}</text>
					</p>
				</view>
				<view class="row">
					<view class="cell">
						<text class="label">{{ $t('order.materialName') }}</text>
						<text class="info">{{ orderInfo.materialName || '' }}</text>
					</view>
					<view class="cell">
						<text class="label">{{ $t('order.orderNumber') }}</text>
						<text class="info">{{ orderInfo.orderNumber || '' }}{{ orderInfo.orderType ==
								'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT') }}</text>
					</view>
				</view>
				<view class="row">
					<p class="cell">
						<text class="label">{{ $t('order.driver') }}</text>
						<text class="info">{{ orderInfo.driver || '' }}</text>
					</p>
					<p class="cell">
						<text class="label">{{ $t('order.vehicle') }}</text>
						<text class="info">{{ orderInfo.vehicle || '' }}</text>
					</p>
				</view>
				<!-- 
							<view class="row" v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus != 0">
								<p class="cell">
									<text class="label">{{ $t('order.tareWeight') }}</text>
									<text class="info">{{ orderInfo.tareWeight || '0' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.grossWeight') }}</text>
									<text class="info">{{ orderInfo.grossWeight || '0' }}</text>
								</p>
							</view>
							<view class="row" v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus != 0">
								<p class="cell">
									<text class="label">{{ $t('order.netWeight') }}</text>
									<text class="info">{{ orderInfo.netWeight || '0' }}</text>
								</p>
							</view>
							<view class="row" v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus == 1">
								<p class="cell">
									<text class="label">{{ $t('order.inTime') }}</text>
									<text class="info">{{ orderInfo.inTime || '' }}</text>
								</p>
							</view>
							<view class="row" v-if="orderInfo.orderStatus != 0 && orderInfo.weighingStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outTime') }}</text>
									<text class="info">{{ orderInfo.outTime || '' }}</text>
								</p>
							</view>
							<view class="row" v-if="orderInfo.orderStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outDate') }}</text>
									<text class="info">{{ orderInfo.outDoorTime || '' }}</text>
								</p>
							</view> -->
			</view>

		</view>
		<view class="order-mixed">

		</view>
		<view class="swiper-box">
			<u-tabs :list="tabList" @click="onTabClick" :is-scroll="false" :current="currentTab" bar-width="60"
				lineWidth="60" active-color="orange"></u-tabs>
			<view v-if="currentTab == 0 && orderHaxMixedList.length > 0">
				<view class="order-card" v-for="(item, index) in orderHaxMixedList" :key="index">
					<view class="order-card-title">
						<text class="info">{{ item.tenantName || '' }}</text>
						<text  class="status" style="background:rgb(235 199 22)">{{$t('order.suppOrder')}}</text>
						<view class="orderStatus-info" v-if="item.orderType != '4'">
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
								src="/subpages/static/czzn-img/state/not-factory.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.orderStatus == 1 && item.weighingStatus == 0"
								src="/subpages/static/czzn-img/state/in-factory.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
								src="/subpages/static/czzn-img/state/completed.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.orderStatus == 1 && item.weighingStatus != 0"
								src="/subpages/static/czzn-img/state/weighed.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 4"
								src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
						</view>
						<view class="orderStatus-info" v-if="item.orderType == '4'">
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
								src="/subpages/static/czzn-img/state/no-take-order.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 1"
								src="/subpages/static/czzn-img/state/start-take-order.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
								src="/subpages/static/czzn-img/state/completed.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.enabledMarkType == 1 || item.orderStatus == 4"
								src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
						</view>
					</view>
					<view class="order-card-info">
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.orderDate') }}</text>
								<text class="info">{{ item.setDate || '' }}</text>
							</p>
							<p class="cell">
								<text class="no">No {{ item.code || '' }}</text>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.vehicleType') }}</text>
								<text class="info" v-if="item.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
								<text class="info"
									v-if="item.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
								<span class="tag tag-ls" v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
								<span class="tag tag-gd" v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.companyName') }}</text>
								<text class="info">{{ item.companyName || '' }}</text>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.materialName') }}</text>
								<text class="info">{{ item.materialName || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.orderNumber') }}</text>
								<text class="info">{{ item.orderNumber || '' }}{{ item.orderType ==
										'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT') }}</text>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.driver') }}</text>
								<text class="info">{{ item.driver || '' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.vehicle') }}</text>
								<text class="info">{{ item.vehicle || '' }}</text>
							</p>
						</view>
						<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus != 0">
							<p class="cell">
								<text class="label">{{ $t('order.tareWeight') }}</text>
								<text class="info">{{ item.tareWeight || '0' }}</text>
							</p>
							<p class="cell">
								<text class="label">{{ $t('order.grossWeight') }}</text>
								<text class="info">{{ item.grossWeight || '0' }}</text>
							</p>
						</view>
						<view class="row">
							<p class="cell">
								<text class="label">{{ $t('order.netWeight') }}</text>
								<text class="info">{{ item.netWeight || '0' }}</text>
							</p>
						</view>
						<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus == 1">
							<p class="cell">
								<text class="label">{{ $t('order.inTime') }}</text>
								<text class="info">{{ item.inTime || '' }}</text>
							</p>
						</view>
						<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus == 2">
							<p class="cell">
								<text class="label">{{ $t('order.outTime') }}</text>
								<text class="info">{{ item.outTime || '' }}</text>
							</p>
						</view>
						<view class="row" v-if="item.orderStatus == 2">
							<p class="cell">
								<text class="label">{{ $t('order.outDate') }}</text>
								<text class="info">{{ item.outDoorTime || '' }}</text>
							</p>
						</view>
					</view>
					<view class="order-card-bottom" v-if="item.isMain == 1">
						<view class="btn">
							<u-button class="btn" type='error' shape="circle" size="small"
								@click="onCancelMixedOrderClick(item.id)">
								{{ $t('base.button.cancel') }}
							</u-button>
						</view>
					</view>

				</view>
			</view>
			<view v-if="currentTab == 1 && orderUnMixedList.length > 0">
				<view class="order-card" v-for="(item, index) in orderUnMixedList" :key="index">
					<view class="order-card-title">
						<text class="info">{{ item.tenantName || '' }}</text>
						<text  class="status" style="background:rgb(235 199 22)">{{$t('order.suppOrder')}}</text>
						<view class="orderStatus-info" v-if="item.orderType != '4'">
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
								src="/subpages/static/czzn-img/state/not-factory.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.orderStatus == 1 && item.weighingStatus == 0"
								src="/subpages/static/czzn-img/state/in-factory.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
								src="/subpages/static/czzn-img/state/completed.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.orderStatus == 1 && item.weighingStatus != 0"
								src="/subpages/static/czzn-img/state/weighed.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 4"
								src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
						</view>
						<view class="orderStatus-info" v-if="item.orderType == '4'">
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 0"
								src="/subpages/static/czzn-img/state/no-take-order.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 1"
								src="/subpages/static/czzn-img/state/start-take-order.png"></u--image>
							<u--image width="100rpx" height="88rpx" v-if="item.orderStatus == 2"
								src="/subpages/static/czzn-img/state/completed.png"></u--image>
							<u--image width="100rpx" height="88rpx"
								v-if="item.enabledMarkType == 1 || item.orderStatus == 4"
								src="/subpages/static/czzn-img/state/cancellation.png"></u--image>
						</view>
					</view>
					<view class="order-card-info">
						<view class="order-card-info">
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.orderDate') }}</text>
									<text class="info">{{ item.setDate || '' }}</text>
								</p>
								<p class="cell">
								<text class="no">No {{ item.code || '' }}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.vehicleType') }}</text>
									<text class="info"
										v-if="item.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
									<text class="info"
										v-if="item.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
									<span class="tag tag-ls" v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
									<span class="tag tag-gd" v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.companyName') }}</text>
									<text class="info">{{ item.companyName || '' }}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.materialName') }}</text>
									<text class="info">{{ item.materialName || '' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.orderNumber') }}</text>
									<text class="info">{{ item.orderNumber || '' }}{{ item.orderType ==
											'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT') }}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.driver') }}</text>
									<text class="info">{{ item.driver || '' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.vehicle') }}</text>
									<text class="info">{{ item.vehicle || '' }}</text>
								</p>
							</view>
							<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus != 0">
								<p class="cell">
									<text class="label">{{ $t('order.tareWeight') }}</text>
									<text class="info">{{ item.tareWeight || '0' }}</text>
								</p>
								<p class="cell">
									<text class="label">{{ $t('order.grossWeight') }}</text>
									<text class="info">{{ item.grossWeight || '0' }}</text>
								</p>
							</view>
							<view class="row">
								<p class="cell">
									<text class="label">{{ $t('order.netWeight') }}</text>
									<text class="info">{{ item.netWeight || '0' }}</text>
								</p>
							</view>
							<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus == 1">
								<p class="cell">
									<text class="label">{{ $t('order.inTime') }}</text>
									<text class="info">{{ item.inTime || '' }}</text>
								</p>
							</view>
							<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outTime') }}</text>
									<text class="info">{{ item.outTime || '' }}</text>
								</p>
							</view>
							<view class="row" v-if="item.orderStatus == 2">
								<p class="cell">
									<text class="label">{{ $t('order.outDate') }}</text>
									<text class="info">{{ item.outDoorTime || '' }}</text>
								</p>
							</view>
						</view>
					</view>
					<view class="order-card-bottom" v-if="item.isMain == 0">
						<view class="btn">
							<u-button class="btn" type='error' shape="circle" size="small"
								@click="onOrderMixedClick(item.id)">
								{{ $t('base.button.submit') }}
							</u-button>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-toast ref="loadingToast"></u-toast>
	</view>
</template>

<script>
	import {
		getOrderInfo,
		getOrderMixedList,
		operateMixedOrder,
		cancelMixedOrder
	} from '../../api/order'
	export default {
		data() {
			return {
				tabList: [{
					"name": this.$t('order.hasMixed'),
					"tabIndex": 0
				}, {
					"name": this.$t('order.unMixed'),
					"tabIndex": 1
				}],
				currentTab: 0,
				orderInfo: {},
				orderHaxMixedList: [],
				orderUnMixedList: [],
				statusBarHeight: null,
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			console.log("收到的参数信息、", options);
			this.bindOrderInfo()
			this.bindMixedOrderInfo()
			debugger
			let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
			this.statusBarHeight = sysInfo.statusBarHeight;
			this.rect = wx.getMenuButtonBoundingClientRect();
			console.log(this.rect, this.statusBarHeight);
		},
		methods: {
			onTabClick(item) {
				this.bindMixedOrderInfo()
				console.log("选择的Tab项、", item);
				this.currentTab = item.tabIndex
			},
			onOrderMixedClick(orderId) {
				var that = this;
				uni.showModal({
					// title: '提示',
					content: that.$t('order.isConfirmMixedOrder'),
					showCancel: true,
					cancelText: that.$t('base.button.cancel'),
					confirmText: that.$t('base.button.confirm'),
					success: function(res) {
						if (res.confirm) {
							let param = {
								"mainOrderId": that.orderInfo.id,
								"orderId": orderId,
								"tenantId": that.orderInfo.tenantId
							}
							that.$refs.loadingToast.show({
								type: "loading",
								message: that.$t('base.common.loading'),
								duration: "1000000"
							})
							operateMixedOrder(param).then(res => {
								that.$refs.loadingToast.hide()
								if (res.data.code == 0) {
									that.bindMixedOrderInfo()
								}
							}).catch(res => {
								that.$refs.loadingToast.hide()
								console.log("调用异常返回、", res);
							});
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2]; //上一个页面
							prevPage.$vm.isRefresh = true
							uni.navigateBack();
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
							that.$refs.loadingToast.hide()

						}
					}
				})

			},
			onCancelMixedOrderClick(orderId) {
				var that = this;
				uni.showModal({
					// title: '提示',
					content: that.$t('order.isCancelMixedOrder'),
					showCancel: true,
					cancelText: that.$t('base.button.cancel'),
					confirmText: that.$t('base.button.confirm'),
					success: function(res) {
						if (res.confirm) {
							let param = {
								"orderId": orderId,
								"tenantId": that.orderInfo.tenantId
							}
							that.$refs.loadingToast.show({
								type: "loading",
								message: that.$t('base.common.loading'),
								duration: "1000000"
							})
							cancelMixedOrder(param).then(res => {
								that.$refs.loadingToast.hide()
								if (res.data.code == 0) {
									that.bindMixedOrderInfo()
								}
								let pages = getCurrentPages();
								let prevPage = pages[pages.length - 2]; //上一个页面
								prevPage.$vm.isRefresh = true
								uni.navigateBack();
							}).catch(res => {
								that.$refs.loadingToast.hide()
								console.log("调用异常返回、", res);
							});
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
							that.$refs.loadingToast.hide()
						}
					}
				})
			},

			bindOrderInfo() {
				getOrderInfo(this.options).then(res => {
					if (res.statusCode == 200) {
						this.orderInfo = res.data.data
						console.log("获取到订单信息、", this.orderInfo);
					}
				})
			},
			bindMixedOrderInfo() {
				getOrderMixedList(this.options).then(res => {
					if (res.statusCode == 200) {
						this.orderHaxMixedList = res.data.data.mixed
						this.orderUnMixedList = res.data.data.orderList
						console.log("获取到已拼车订单信息、", this.orderHaxMixedList);
						console.log("获取到未拼车订单信息、", this.orderUnMixedList);
					}
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	page {
		box-sizing: border-box;
		/* padding: 40rpx 40rpx 80rpx; */
		height: 100%;
		background-image: url('/subpages/static/czzn-img/order/order-detail2.png');
		background-size: 750rpx 100%;
	}

	/* #endif*/
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';

	/deep/ .u-cell {
		background-color: #e5ecf8;
	}

	/deep/.u-tabs__wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #dfebff;
		border-radius: 5px;
	}

	// .code-wrap {
	// 	padding: 24rpx;
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: space-around;

	// 	.code-info {
	// 		color: #fff;
	// 		justify-content: space-around;

	// 		.label {
	// 			font-size: 36rpx;
	// 		}

	// 		.info {
	// 			font-size: 28rpx;
	// 		}
	// 	}
	// }

	// .topbar {
	// 	width: 100%;
	// 	text-align: center;
	// 	font-size: 32rpx;
	// 	color: #fff;
	// 	line-height: 88rpx;
	// 	font-weight: bold;
	// 	position: relative;

	// 	.back-icon {
	// 		position: absolute;
	// 		padding: 20rpx;
	// 		color: #fff;
	// 		bottom: 0;
	// 		left: 0;
	// 	}
	// }


	.order-mixed {
		padding: 6rpx 0rpx 6rpx 0rpx;
		margin: 12rpx 12rpx 0;
	}
</style>