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

<template>
	<view class="order-card">
		<view class="order-card-title">
			<text class="info">{{shareInfo.share.tenantName || ''}}</text>
			<text class="no">No {{shareInfo.share.code || ''}}</text>
			<view class="orderStatus-info">
				<u--image width="100rpx" height="88rpx" v-if="shareInfo.share.orderStatus == 0"
					src="/subpages/static/img/no-take-order.png"></u--image>
				<u--image width="100rpx" height="88rpx" v-if="shareInfo.share.orderStatus == 1"
					src="/subpages/static/img/start-take-order.png"></u--image>
				<u--image width="100rpx" height="88rpx" v-if="shareInfo.share.orderStatus == 2"
					src="/subpages/static/img/completed.png"></u--image>
				<u--image width="100rpx" height="88rpx" v-if="shareInfo.share.orderStatus == 4"
					src="/subpages/static/img/cancellation.png"></u--image>
			</view>
		</view>
		<view class="order-info">
			<view class="order-type">
				<span class="tag tag-l" v-if="shareInfo.share.orderType == '1'">{{$t('order.temp')}}</span>
				<span class="tag tag-g" v-if="shareInfo.share.orderType == '2'">{{$t('order.fixed')}}</span>
				<span class="tag tag-s" v-if="shareInfo.share.orderType == '4'">{{$t('order.share')}}</span>
			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('order.orderDate')}}</text>
					<text class="info">{{shareInfo.share.setDate || ''}}</text>
				</p>
			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('order.vehicleType')}}</text>
					<text class="info" v-if="shareInfo.share.vehicleType == '101'">{{$t('order.saleOrder')}}</text>
					<text class="info" v-if="shareInfo.share.vehicleType == '102'">{{$t('order.purchaseOrder')}}</text>
				</p>
			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('mine.customer')}}</text>
					<text class="info">{{shareInfo.share.companyName || ''}}</text>
				</p>
			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('mine.mater')}}</text>
					<text class="info">{{shareInfo.share.materialName || ''}}</text>
				</p>

			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('order.orderDate')}}</text>
					<text class="info">{{shareInfo.share.createTime || ''}}</text>
				</p>
			</view>
			<view class="row">
				<p class="cell">
					<text class="label">{{$t('order.allowOrderReceiving')}}</text>
					<text class="info">{{shareInfo.share.orderNumber}} {{$t('customer_meter.unitN')}}</text>
				</p>
				<p class="cell">
					<text class="label">{{$t('order.haveOrderReceiving')}}</text>
					<text class="info">{{( shareInfo.orderInfo.length)}} {{$t('customer_meter.unitN')}}</text>
				</p>
			</view>
			<view class="row p">
				<p class="cell">
					<text class="label">{{$t('order.orderNumber')}}</text>
					<u--input v-model="form.orderNumber" type="number" border="none" :placeholder="$t('base.common.placeholderI') +$t('order.orderReceiveNumber')">
					</u--input>
				</p>
			</view>
			<view class="row" @click="showPopup('popupVehicle')">
				<p class="cell">
					<text class="label">{{$t('order.vehicle')}}</text>
					<u--input readonly v-model="form.vehicle" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicle')"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					</u--input>
				</p>
			</view>
		</view>
		<view>
			<u-button type="primary" color='#4680F9' @click="onSubmit()">{{$t('order.orderReceiving')}}</u-button>
		</view>
		<PopupSelect ref="popupVehicle" :option="vehicleList" @onConfirm="onVehicleConfirm" />
	</view>
</template>

<script>
	import {
		publicUrl
	} from '../../utils/config'
	import PopupSelect from '../../components/popup-select/index'
	import {
		getShareOrderInfo,
		driverReceiving
	} from "../../api/order"
	import {
		getVehicleListByCondition,
	} from "../../api/driver"
	import {
		mapMutations,
	} from 'vuex';
	export default {
		components: {
			PopupSelect
		},
		data() {
			return {
				shareInfo: {
					share: {},
					orderInfo: []
				},
				vehicleList: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //车牌选项
				form: {
					vehicle: '',
					appDriverId: '',
					orderNumber: '',
				},
				userType: "0",
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('userType') != '4') {
				uni.showModal({
					content: '您不是司机身份,不可接单',
					showCancel: false,
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							getApp().globalData.index = 0
							uni.switchTab({
								url: '/pages/home/home'
							})
						}
					}
				})
				return;
			}
			this.getOrderInfoById(options)
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login'
			}),
			//获取订单详情
			getOrderInfoById(data) {
				let that = this
				getShareOrderInfo(data).then(res => {
					if (res.statusCode == 200) {
						that.shareInfo = res.data.data.data
						console.log("获取到订单信息、", that.shareInfo);
						that.onGetVehicelList();
					}
				})
			},
			onGetVehicelList() {
				let that = this
				let data = {}
				getVehicleListByCondition(data).then(res => {
					if (res.statusCode == 200) {
						if (res.data.data.length > 0) {
							that.vehicleList = [{
								text: this.$t('order.notSelected'),
								value: null
							}] //物料选项

							res.data.data.forEach(item => {
								that.vehicleList.push({
									text: item.vehicle,
									value: item.id
								})
							})
						}
						console.log("获取到车号信息、", that.vehicleList);
					}
				})
			},
			//确定接单
			onSubmit() {
				let that = this
				if (!that.shareInfo || !that.shareInfo.share || !that.shareInfo.share.id) {
					uni.showToast({
						title: "不存在共享订单信息",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.orderNumber) {
					uni.showToast({
						title: "请输入订单数量",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.vehicle) {
					uni.showToast({
						title: "请选择车辆信息",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				let data = {
					...that.form,
					tenantId: that.shareInfo.share.tenantId,
					orderId: that.shareInfo.share.id,
				}
				driverReceiving(data).then(res => {
					if (res.data.code == 0 && res.statusCode == 200) {
						uni.showModal({
							content: '接单成功',
							showCancel: false,
							success: ({
								confirm,
								cancel
							}) => {
								if (confirm) {
									uni.switchTab({
										url: '/pages/home/home'
									})
								}
							}
						})
					}
				})
			},
	
			onVehicleConfirm(item) {
				this.form.vehicle = "";
				this.form.appDriverId = "";
				if (item.value) {
					this.form.vehicle = item.text
					this.form.appDriverId = item.value
				}
			},

			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
		}
	}
</script>
<style lang="scss" scoped>
	.order-card {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 4rpx 20rpx;
		border: solid 1px #c1bebe;

		.order-card-title {
		display: flex;
		justify-content: space-between;
		background: linear-gradient(to right, #a9a7a7, #fff);
		padding: 14rpx;
		line-height: 40rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		position: relative;
		flex-direction: column;
		border-bottom: solid 1px #6a6a6a;

			.orderStatus-info {
				position: absolute;
				right: 0;
				padding-right: 10px;

				.iconImg {
					width: 100rpx;
					height: 88rpx;
					margin-top: 15rpx;
				}

				.iconImg2 {
					width: 100rpx;
					height: 100rpx;
					margin-top: 15rpx;
				}

				.iconImg1 {
					width: 130rpx;
					height: 80rpx;
					margin-top: 20rpx;
				}
			}

			.no {
				font-size: 22rpx;
				color: #f20505;

			}

			.info {}
		}

		.order-info {
			background-color: #fff;
			font-size: 28rpx;
			line-height: 56rpx;
			padding: 24rpx;
			color: #333;
			position: relative;

			.order-type {
				position: absolute;
				right: 10px;
				top: 5px;
			}

			.tag {
				padding: 0 20rpx 0 16rpx;
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.tag-l {
				border: 1px solid #f9ae3d;
				background-color: #fdf6ec;
				color: #f9ae3d;
			}

			.tag-g {
				border: 1px solid #3c9cff;
				background-color: #ecf5ff;
				color: #3c9cff;
			}

			.tag-s {
				border: 1px solid #f56c6c;
				background-color: #f0ecec;
				color: #f56c6c;
			}



			.row {
				align-items: center;
				display: flex;

				.cell {
					flex: 1;
					display: flex;

					.label {
						width: 150rpx;
						font-size: 26rpx;
						font-weight: bold;
					}

					.info {
						flex: 1;
						font-size: 20rpx;
					}

				}
			}

			.p {
				padding-top: 28rpx;
				border-top: 2rpx solid #d6d7d9;
			}

			.share-button {
				width: 150rpx;
				position: absolute;
				right: 0;
				bottom: 0;
				background: transparent;
			}
		}

		.top {
			padding-top: 50rpx;
		}

		.order-bottom {
			display: flex;
			justify-content: flex-end;
			padding: 24rpx;
			border-top: solid 1px #6a6a6a;
			background: linear-gradient(to right, #d0cece, #fff);

			.btn {
				width: 25%;
				margin-left: 32rpx;
			}
		}
	}
</style>