baozhida-deliver-medicine-app/components/x-orderManagement.vue

<template>
	<view style="width: 100%;">
		<view class="card_ordermang" v-for="(item,index) in orderList" :key="index" @click="goOrderDetails(item)">
			<view class="head_ordermang space_between">
				<view class="waybill_title">运单号:<span>{{item.waybillNo}}</span></view>
				<span class="card_state" :style="{color:getState(item.status)}">{{orderStatus(item.status)}}</span>
			</view>
			<view class="title_ordermang"><span>收货地址:</span>{{item.consigneeAddressDetails}}</view>
			<view class="title_ordermang"><span>收货电话:</span>{{item.consigneeAddressPhone}}</view>
			<view class="title_ordermang"><span>下单时间:</span>{{item.orderTime}}</view>
			<view style="display: flex;" v-if="item.status == 1">
				<view class="btn_printil markd10" v-if="item.status == 1 || item.status == 2 || item.status == 3"
					@click.stop="modifyOrder(item)">
					<u-button size="small" type="warning" text="修改订单"></u-button>
				</view>
				<!-- <view class="btn_printil markd10" @click.stop="printBarCode(item)">
					<u-button size="small" type="primary" text="打印条码"></u-button>
				</view> -->
				<view class="btn_printil markd10" @click.stop="sendOrders(item)">
					<u-button size="small" type="success" text="派单"></u-button>
				</view>
			</view>
			<view style="display: flex;" v-if="item.status == 2">
				<view class="btn_printil markd10" @click.stop="rejection(item)">
					<u-button size="small" type="error" text="拒收"></u-button>
				</view>
				<view class="btn_printil markd10" @click.stop="signFor(item)">
					<u-button size="small" type="primary" text="签收"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="signForShow" mode="center" round="6" closeable :closeOnClickOverlay="false" @close="close">
			<view class="center_in title_sign">{{signRejection}}</view>
			<view class="card_sign_for">
				<view class="img_sign_rejection">订单号: {{orderNumber}}</view>
				<view class="card_image_sign">
					<view class="img_sign_rejection">{{signRejection}}图片</view>
					<u-upload :fileList="fileList1" name="1" multiple :maxCount="10" @afterRead="afterRead"
						@delete="deletePic"></u-upload>
				</view>
				<view class="rejection_card" v-if="rejectionFlag">
					<view class="img_sign_rejection">拒收原因</view>
					<u-textarea v-model="rejectionValue" placeholder="请输入拒收原因" autoHeight></u-textarea>
				</view>
				<u-button size="small" type="primary" text="确定" @click="confirm()"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const ENV = require('@/.env.js')
	export default {
		name: 'xOrderManagement',
		props: {
			// 订单列表
			orderList: {
				type: Array,
				default: () => [],
			},
			userInfo: {
				type: Object,
				default: () => {},
			}
		},
		data() {
			return {
				signForShow: false,
				fileList1: [],
				rejectionValue: '',
				rejectionFlag: false,
				signRejection: '',
				orderNumber: '',
				imageUrl: '',
			}
		},
		mounted() {
			// console.log(this.userInfo, 26)
		},
		methods: {
			// 打印条码
			printBarCode(value) {
				this.$cache.setCache('commodity', JSON.stringify(value))
				uni.navigateTo({
					url: '/pages/order/quantum?waybillNo=' + value.waybillNo + '&printType=barCode'
				});
			},
			// 派单
			sendOrders(value) {
				this.$emit('sendOrders', value)
			},
			// 拒收
			rejection(value) {
				this.orderNumber = value.waybillNo
				this.signForShow = true
				this.rejectionFlag = true
				this.signRejection = '拒收'
			},
			// 签收
			signFor(value) {
				this.orderNumber = value.waybillNo
				this.signForShow = true
				this.rejectionFlag = false
				this.signRejection = '签收'
			},
			// 确定签收/拒收
			confirm() {
				let params = {
					waybillNo: this.orderNumber,
					receiptImg: this.imageUrl,
					status: 3,
					rejectionReason: this.rejectionValue,
				}
				if (this.rejectionFlag) {
					params.status = 4
				} else {
					params.status = 3
				}
				this.$api.post('/api/waybill/receipt', params).then(res => {
					console.log(res, 266)
					if (res.code == 200) {
						uni.$u.toast(res.msg)
						this.signForShow = false
						this.$emit('operateSuccessfully')
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			// 打印温湿度记录
			humidityRecording(value) {
				this.$cache.setCache('commodity', JSON.stringify(value))
				uni.navigateTo({
					url: '/pages/order/quantum?waybillNo=' + value.waybillNo + '&printType=record'
				});
			},
			// 修改订单
			modifyOrder(value) {
				this.$cache.setCache('orderDetails', value)
				uni.redirectTo({
					url: '/pages/order/addWaybill?title=修改订单&type=2'
				});
			},
			// 订单详情
			goOrderDetails(value) {
				this.$cache.setCache('orderDetails', value)
				uni.navigateTo({
					url: '/pages/order/orderDetails?type=details'
				});
			},
			// 订单状态
			orderStatus(value) {
				if (value == 1) {
					return '已下单'
				} else if (value == 2) {
					return '配送中'
				} else if (value == 3) {
					return '已送达'
				} else if (value == 4) {
					return '已取消'
				}
			},
			// 订单文字颜色
			getState(value) {
				if (value == 1) {
					return '#9ddd54'
				} else if (value == 2) {
					return '#4bc7fc'
				} else if (value == 3) {
					return '#1cc723'
				} else if (value == 4) {
					return '#fe880e'
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				uni.showLoading({
					title: '上传中',
					mask: true,
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				var arr = []
				this.fileList1.forEach(item1 => {
					arr.push(item1.url)
				})
				uni.hideLoading();
				this.imageUrl = arr.join()
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				var arr = []
				this.fileList1.forEach(item1 => {
					arr.push(item1.url)
				})
				this.imageUrl = arr.join()
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: ENV.APP_DEV_URL + '/api/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'Authorization': 'Bearer ' + uni.getStorageSync('access_token'),
						},
						success: (res) => {
							let state = JSON.parse(res.data)
							setTimeout(() => {
								if (state.code == 200) {
									resolve(state.data)
								}
							}, 100)
						}
					});
				})
			},
			close() {
				console.log(22)
				this.signForShow = false
			},
		}
	}
</script>

<style lang="scss">
	.card_ordermang {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.head_ordermang {
		margin-bottom: 10rpx;
	}

	.title_ordermang {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #909399;

		span {
			font-size: 26rpx;
			color: #909399;
			margin-right: 10rpx;
		}
	}

	.waybill_title {
		font-size: 32rpx;

		span {
			margin-left: 10rpx;
		}
	}

	.card_state {
		color: #606266;
		font-size: 32rpx;
	}

	.card_specification {
		display: flex;
		align-items: center;
	}

	.specification_title {
		margin-right: 20rpx;
	}

	.btn_printil {
		flex: 1;
		margin-top: 10px;
	}

	.markd10:nth-child(1) {
		margin: 10rpx 10rpx 0rpx 0rpx;
	}

	.markd10:nth-child(2) {
		margin: 10rpx 0rpx 0rpx 10rpx;
	}

	.title_sign {
		padding: 10rpx 0rpx;
		height: 60rpx;
	}

	.card_sign_for {
		width: 600rpx;
		padding: 10rpx 20rpx 20rpx 20rpx;
	}

	.rejection_card {
		margin-bottom: 20rpx;
	}

	.card_image_sign {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
	}

	.img_sign_rejection {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
</style>