jiuyiUniapp/jiuyi2/pages/shop/order/logistics.vue

<script setup>
	// 
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 产品列表
	import productList from '@/components/shop/productList/productList.vue';
	// 地址
	import JyCommodityAddress from '@/components/public/jy-commodity-address'

	// 订单详情
	const detail = reactive({
		createTime: '',
		coutDownTime: '',
		// 订单商品列表信息
		orderDetailList: [],
		// 物流信息
		logistics: {},
	})
	// 物流信息
	const logistics = computed(() => detail.logistics.info ? detail.logistics.info[0] : {
		logisticsTraceDetailList: []
	})
	// 订单id
	const orderId = ref('')
	// 查看更多订单信息
	const showMore = ref(false)

	// 物流状态
	const flow = computed(() => {
		return []
	})
	// 物流状态
	const formatFlow = computed(() => {
		let result = [...logistics.value.logisticsTraceDetailList]
		if (!showMore.value) result.length = Math.min(logistics.value.logisticsTraceDetailList.length, 2)
		return result
	})

	onLoad((option) => {
		if (option.orderId) orderId.value = option.orderId
		// 获取订单详情
		getDetail()
	})

	// 获取订单详情
	function getDetail() {
		api.shop.getOrderDetail({
			query: {
				id: orderId.value
			}
		}).then(res => {
			if (res.code == 200) {
				let result = res.data
				result.status = Number(result.status)
				Object.assign(detail, {}, result)
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 文本复制
	 * @param {Object} text
	 */
	function handleCopy(text) {
		util.copyText(text)
	}
</script>

<template>
	<view class="app">
		<!-- 地址详情 -->
		<view class="bfff mtb20 p25">
			<!-- 地址 -->
			<JyCommodityAddress v-model:address="detail.address" :shopEdit="false" />
		</view>

		<!-- 快递公司 -->
		<view class="container rows ptb20 f28">
			<image class="wh70" src="/static/shop-logistics.png" mode="aspectFit" />
			<view class="value f1 mlr20">快递公司：{{logistics.logisticsCompanyName}}</view>
			<view class="btn sm closeHollow plr20" @click="handleCopy(logistics.logisticsCompanyName)">复制</view>
		</view>

		<!-- 订单编号 -->
		<view class="container rows ptb20 f28">
			<image class="wh70" src="/static/shop-document.png" mode="aspectFit" />
			<view class="value f1 mlr20">订单编号：{{detail.logistics.orderNo}}</view>
			<view class="btn sm closeHollow plr20" @click="handleCopy(detail.logistics.orderNo)">复制</view>
		</view>

		<!-- 订单流程 -->
		<view class="container">
			<view class="flow mtb30">
				<view class="item df" v-for="(item,index) in formatFlow" :key="index">
					<view class="rank ver">
						<view class="line first"></view>
						<view class="circle cir"></view>
						<view class="line f1"></view>
					</view>
					<view class="content f1 ml20 pb20">
						<view class="f30">{{item.desc}}</view>
						<view class="mt10 f28">2024-03-05 13:24:00</view>
					</view>
				</view>
			</view>

			<view class="mtb30 fmid c999" @click="showMore = !showMore">
				<template v-if="!showMore">
					<text>查看更多订单信息</text>
					<uni-icons type="bottom" color="" />
				</template>
				<template v-else>
					<text>收起</text>
					<uni-icons type="top" color="" />
				</template>
			</view>
		</view>

		<!-- 推荐产品列表 -->
		<view class="productList mtb30 mlr30">
			<productList choicenessTitle="true" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.container {
		overflow: hidden;
		margin: 20rpx 0;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333;
		background-color: #fff;
	}

	// 流程
	.flow {
		.item {
			color: #999;

			&:nth-child(1) {
				color: #37B111;

				.circle {
					background-color: #37B111;
				}

				.line.first {
					opacity: 0;
				}
			}

			// 
			&:nth-last-child(1) {
				.line:nth-last-child(1) {
					opacity: 0;
				}
			}

			// 
			.circle {
				width: 20rpx;
				height: 20rpx;
				background-color: #ccc;
			}

			// 
			.line {
				border-left: 2rpx solid #ccc;

				// 
				&.first {
					height: 15rpx;
				}
			}
		}
	}
</style>