cmgd-mini-app/pages/order/detail.vue

<template>
	<view class="page-content">
		<nut-steps :current="detail.progress">
			<nut-step title="待付款">1</nut-step>
			<nut-step title="待发货">2</nut-step>
			<nut-step title="待收货">3</nut-step>
			<nut-step title="已完成">4</nut-step>
		</nut-steps>

		<nut-cell-group>
			<nut-cell>
				<view class="address-inner" v-if="detail.address_info">
					<text>{{detail.address_info.user_name}} - {{detail.address_info.tel_number}}</text>
					<text>{{detail.address_info.province_name + detail.address_info.city_name + detail.address_info.county_name + detail.address_info.street_name + detail.address_info.detail_info_new}}</text>
				</view>
			</nut-cell>
		</nut-cell-group>


		<nut-cell-group>
			<!-- <nut-cell is-link v-for="(goods,idx) in detail.goods" :key="idx"
				@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
				<template #title>
					<view class="detail">
						<view class="name">
							<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
							<text>{{goods.goods_name}}</text>
						</view>
						<view class="sku">{{goods.content}}</view>
					</view>
				</template>
			</nut-cell> -->

			<nut-cell v-for="(goods,index) in detail.goods" :key="index" center
				@click="navigateTo('/pages/mall/detail?id=' + goods.goods_id)">
				<template #title>
					<view class="goods-info-row">
						<view class="left-text">
							<view class="goods-name">
								<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
								<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
							</view>
							<text class="goods-no">串号：{{goods.goods_no}}</text>
						</view>
					</view>
				</template>
				<template #link>
					<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
				</template>
			</nut-cell>
		</nut-cell-group>



		<nut-cell-group>
			<nut-cell>
				<view class="total-price-inner">
					<text>商品总额</text>
					<nut-price :price="detail.pay_price" size="normal" :need-symbol="true" />
				</view>
			</nut-cell>
			<!-- <nut-cell>
				<view class="total-price-inner">
					<view>
						<text>邮费</text>
					</view>
					<view>
						<nut-price :price="0" size="normal" :need-symbol="true" />
					</view>
				</view>
			</nut-cell> -->
		</nut-cell-group>

		<nut-cell-group>
			<nut-cell title="订单编号" :desc="detail.order_no" />
			<nut-cell title="下单时间" :desc="detail.create_time" />
		</nut-cell-group>

		<nut-cell-group v-if="detail.progress >= 3">
			<nut-cell title="物流公司" :desc="detail.express_company" />
			<nut-cell title="物流单号" :desc="detail.express_no" />
		</nut-cell-group>


		<view v-if="detail.progress === 1 && !audit" class="wechat-img-inner">
			<nut-button type="primary" block @click="showPayImgs()">
				点我付款
			</nut-button>
		</view>
	</view>
</template>



<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		fetchOrderDetail
	} from '@/api/order';
	import {
		navigateTo,
	} from '@/utils/helper';


	import {
		fetchGetConfig
	} from '@/api/config';

	// 审核模式 默认开启 true
	const audit = ref(true);

	// 订单ID
	const id = ref(0)
	// 订单详情
	const detail = reactive({})
	// 支付码
	const images = ref([]);

	onLoad((options) => {
		id.value = options.id
	})



	/**
	 * 页面显示生命周期钩子
	 * 每次页面显示时都会执行
	 */
	onShow(() => {
		// 获取配置
		getConfig()
        // 获取订单详情
		fetchOrderDetail(id.value).then(res => {
			Object.assign(detail, res)
		})
	})


	// 获取配置
	const getConfig = () => {
		fetchGetConfig().then(res => {
			console.log('getConfig=====>', res)
			audit.value = res.appConfig.is_audit == 1
			console.log(res.appConfig.pay_imgs);
			let pay_imgs = JSON.parse(res.appConfig.pay_imgs) || [];
			let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs) || [];
			let pay_imgs_arr = pay_imgs.map(item => item.file_path) || [];
			let wechat_imgs_arr = wechat_imgs.map(item => item.file_path) || [];
			const merged_imgs_arr = pay_imgs_arr.concat(wechat_imgs_arr);
			images.value = merged_imgs_arr;
		})
	}

	// 显示支付码
	const showPayImgs = () => {
		if (images.value.length === 0) {
			uni.showToast({
				title: '暂无图片',
				icon: 'none'
			});
			return;
		}
		console.log('preview images:', images);
		uni.previewImage({
			urls: images.value
		});
	}
</script>

<style scoped lang="scss">
	.page-content {
		min-height: 100vh;
		background-color: #f2f3f5;
		padding: 20rpx;
	}

	.address-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.total-price-inner {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		// flex-direction: row;
		view:nth-child(2) {
			color: #fa2c19;
		}
	}

	.wechat-img-inner {
		margin-top: 60rpx;
		padding: 0rpx 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		// gap: 5px;
	}
</style>