purchase-let/multipleShop/verificationOrder/detail.vue

<template>
	<view class="detail">
		<view class="detail-order_num">订单编号:{{shopInfo.order_id}}</view>
		<view class="detail-form">
			<view class="detail-form-item">收货人：{{shopInfo.real_name || '-'}}</view>
			<view class="detail-form-item">核销码：{{shopInfo.verify_code || '-'}}</view>
			<view class="detail-form-item">核销门店：{{shopInfo.store_name || '-'}}</view>
			<view class="detail-form-item">核销时间：{{shopInfo?.goods_list[0]?.writeoff_time || ''}}
			</view>
		</view>

		<view class="popup-goods">
			<view class="popup-goods-left">
				<u-image width="100rpx" height="100rpx" radius="8rpx" :src="shopInfo.goods_list[0].image" />
			</view>
			<view class="popup-goods-right">
				<view class="popup-goods-right-info">
					<text class='goods_name'>{{shopInfo?.goods_list[0]?.store_name || ''}}</text>
					<text class="goods_price">￥{{shopInfo?.goods_list[0]?.price || '0.00'}}</text>
				</view>
				<view class="popup-goods-num">x{{shopInfo?.goods_list[0]?.cart_num || 0}}</view>
			</view>
		</view>

		<view class="popup-goods-total">
			<text class="popup-goods-total-num">共计{{shopInfo.total_num || 0}}件</text>
		</view>

		<view class="batch-write" @click="onClickToWrite" v-if="shopInfo.is_writeoff != 1">
			<image class="btn-img" src="../images/scan.png"></image>
			<view class="btn-txt">扫码核销</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		getCurrentInstance
	} from "vue";
	import {
		writeOrderApi
	} from "@/api/order.js";
	const instance = getCurrentInstance().proxy;

	// 订单详情
	const shopInfo = ref({});
	onLoad(() => {
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('transferDataToDetail', function(data) {
			shopInfo.value = data;
		})
	})

	// 切换到核销
	const onClickToWrite = () => {
		uni.scanCode({
			success(resp) {
				writeOrderApi({
					verify_code: resp.result
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '核销成功',
							icon: 'none',
							success() {
								uni.$u.sleep(1500).then(rrr => {
									uni.navigateBack();
								})
							}
						})
					} else {
						uni.showToast({
							title: '核销失败',
							icon: 'none'
						})
					}
				})
			}
		})
	}
</script>
<style lang="scss">
	.detail {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 24rpx auto 0;
		padding: 0 30rpx 24rpx;
		box-sizing: border-box;

		.detail-order_num {
			height: 78rpx;
			line-height: 78rpx;
			margin-bottom: 24rpx;
			font-weight: 600;
			font-size: 26rpx;
			color: #333333;
			border-bottom: 2rpx solid #f1f1f1;
		}

		.detail-form {
			border-bottom: 2rpx solid #f1f1f1;
			margin-bottom: 24rpx;

			.detail-form-item {
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}

		.popup-goods {
			display: flex;
			justify-content: space-between;
			width: 630rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding-bottom: 1rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #f1f1f1;

			.popup-goods-left {
				margin-right: 24rpx;
			}

			.popup-goods-right {
				flex-grow: 1;

				.popup-goods-right-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.goods_name {
						font-size: 24rpx;
						color: #333333;
					}

					.goods_price {
						font-weight: bold;
						font-size: 24rpx;
						color: #060606;
					}
				}

				.popup-goods-num {
					margin-bottom: 20rpx;
					font-size: 24rpx;
					color: #777777;
					text-align: right;
				}
			}
		}

		.popup-goods-total {
			text-align: right;

			.popup-goods-total-num {
				font-size: 24rpx;
				color: #20B128;
				font-weight: 600;
			}
		}

		.batch-write {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 670rpx;
			height: 90rpx;
			background: #20B128;
			border-radius: 20rpx;
			margin-top: 50rpx;

			.btn-img {
				width: 76rpx;
				height: 76rpx;
			}

			.btn-txt {
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
			}
		}
	}
</style>