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

<script setup>
	// 订单详情
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app';

	// 订单方法
	import order from '@/common/js/order.js'
	// api
	import api from '@/api/index.js'
	// util
	import util from '@/common/js/util';
	// 
	import productList from '@/components/shop/productList/productList'
	// 物流信息
	import logisticsVue from '@/components/shop/order/logistics';
	// 地址
	import JyCommodityAddress from '@/components/public/jy-commodity-address'

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

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

	onUnload(() => {
		// 移除监听
		removeListener()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateOrderDetail', () => {
			// 获取订单详情
			getDetail()
		})
	}

	// 移除监听
	function removeListener() {
		uni.$off('updateOrderDetail')
	}

	// 获取订单详情
	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)
	}

	// 取消订单
	function handleCancel() {
		order.orderCancel({
			orderId: orderId.value
		}).then(res => {
			uni.$emit('updateOrderList')
			// 获取订单详情
			getDetail()
			return
		})
	}
</script>

<template>
	<view class="app">
		<!-- 物流状态 -->
		<view class="detail">
			<logisticsVue :detail="detail" :logistics="logistics" />
		</view>

		<!-- 地址详情 -->
		<view class="bfff mtb20 p25">
			<!-- 地址 -->
			<JyCommodityAddress v-model:address="detail.address" :shopEdit="[0,1].includes(detail.status)" />
		</view>

		<!-- 商品信息 -->
		<view class="product oh plr30 bfff br20">
			<view class="header line rows ptb20 f28">
				<!-- 店铺 -->
				<view class="store df aic thd f1">
					<image class="wh50 br10" :src="detail.merImg" mode="aspectFill" />
					<view class="name ml10 c333">{{detail.merName}}</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods mtb20 plr10 df" v-for="(item,index) in detail.orderDetailList">
				<!-- 产品图 -->
				<image class="wh180 br10" :src="item.productInfo.sliderImage.split(',')[0]" mode="aspectFill" />
				<!-- 产品信息 -->
				<view class="f1 ml20 mr10">
					<view class="name f30 t2hd">{{item.productName}}</view>
					<view class="spec mt10 c999 f26">升级款 {{item.sku}}</view>
				</view>
				<!-- 其他 -->
				<view class="tar">
					<view class="price">
						<text class="f20">￥</text>
						<text class="f30">{{item.price}}</text>
					</view>
					<view class="c999 f28">x{{item.payNum}}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order mt30 f26 c999">
				<view class="line mtb20 rows">
					<text>订单编号：{{detail.orderNo}}</text>
					<view class="btn ti closeHollow plr20" @click="handleCopy(detail.orderNo)">复制</view>
				</view>

				<template v-if="showOrderDetail">
					<view class="line mtb20">
						<text>支付方式：微信支付</text>
					</view>

					<view class="line mtb20">
						<text>物流公司：{{logistics.logisticsCompanyName}}</text>
					</view>

					<view class="line mtb20 rows">
						<view class="f1">快递单号：{{detail.logistics.orderNo}}</view>
						<view class="btn ti closeHollow plr20" @click="handleCopy(detail.logistics.orderNo)">复制</view>
					</view>

					<view class="line mtb20">
						<text>下单时间：{{detail.createTime}}</text>
					</view>

					<view class="line mtb20">
						<text>发货时间：2024-12-10 18:00</text>
					</view>

					<view class="line mtb20">
						<text>收货时间：2024-12-15 17:00</text>
					</view>
				</template>

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

		<!-- 商品列表 -->
		<view class="productList mtb30 mlr20">
			<productList choicenessTitle="true" />
		</view>

		<view class="fill"></view>
		<view class="footer df jcr plr30 bfff shadow" v-if="[0,1].includes(detail.status)">
			<template v-if="detail.status == 0">
				<view class="btn bar closeHollow plr30" @click="handleCancel">取消订单</view>
				<view class="btn bar warmHollow plr30" @click="order.orderPay(detail)">继续付款</view>
			</template>
			<template v-if="detail.status == 1">
				<view class="btn bar closeHollow plr30">申请退款</view>
				<!-- <view class="btn bar warmHollow plr30">催发货</view> -->
			</template>
			<template v-if="detail.status == 3">
				<view class="btn bar closeHollow plr30">申请退款</view>
				<view class="btn bar closeHollow plr30">查看物流</view>
				<view class="btn bar warmHollow plr30">确认收货</view>
			</template>
			<template v-if="detail.status == 4">
				<view class="btn bar closeHollow plr30">申请退款</view>
				<view class="btn bar warmHollow plr30">评价</view>
			</template>
			<template v-if="detail.status == 6">
				<view class="btn bar closeHollow plr30">取消售后</view>
				<view class="btn bar closeHollow plr30">钱款去向</view>
				<view class="btn bar warmHollow plr30">平台介入</view>
			</template>
		</view>
	</view>
</template>

<style lang="scss">

</style>