shop-app/pages/order/detail/index.vue

<!--
 * @Author: ch
 * @Date: 2022-03-31 14:26:09
 * @LastEditors: ch
 * @LastEditTime: 2022-05-13 15:04:20
 * @Description: file content
-->
<template>
	<view>
		<StatusTips :orderInfo="orderInfo" @close="timerCloseOrder"></StatusTips>
		<UiWhiteBox>
			<UiGoodsInfo :class="index === orderInfo.products.length - 1 && 'goods-info__last'"
				v-for="(item, index) in orderInfo.products" :data="item" :key="index">
				<template slot="operation">
					<view class="goods-info-operation" v-if="item.afterSaleApplyFlag || [2,3,4].includes(item.detailStatus)">
						<UiButton size="min" type="primaryLine" v-if="item.afterSaleApplyFlag" 
						 @click="$Router.push(`/saleAfterSelect?id=${item.orderProductId}`)">申请售后</UiButton>
						<template v-else>
							<UiButton size="min" type="line"
								 @click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">
								 {{ item.detailStatus === 2 ? '退款中' :  item.detailStatus === 3 ? '已退款' : '退款关闭'}}
							</UiButton>
							<!-- <UiButton size="min" type="line" v-if="item.detailStatus === 3"
								 @click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">已退款</UiButton>
							<UiButton size="min" type="line" v-if="item.detailStatus === 4"
								 @click="$Router.push(`/saleAfterDetail?orderProductId=${item.orderProductId}`)">退款关闭</UiButton> -->
						</template>
					</view>
				</template>
			</UiGoodsInfo>
		</UiWhiteBox>
		<LogisitcsInfo :logisitcsInfo="orderInfo.logistics" :orderId="orderInfo.orderId"/>
		<OrderInfo :orderInfo="orderInfo" />
		<Operation :orderInfo="orderInfo" v-if="orderInfo.orderStatus !== 3"></Operation>
	</view>
</template>
<script>
import UiGoodsInfo from '@/components/UiGoodsInfo.vue';
import UiWhiteBox from '@/components/UiWhiteBox.vue';
import UiButton from '@/components/UiButton.vue';
import {ApiGetOrderDetail, ApiPutCancelOrder} from '@/common/api/order';
import StatusTips from './components/StatusTips.vue';
import OrderInfo from './components/OrderInfo.vue';
import LogisitcsInfo from './components/LogisitcsInfo.vue';
import Operation from './components/Operation.vue';
export default {
	components: { UiGoodsInfo, UiWhiteBox, UiButton, StatusTips, OrderInfo, LogisitcsInfo, Operation },
	data(){
		return {
			orderInfo : {
				products:[],
				logistics:{}
			},
		}
	},
	onLoad(){
		this.getOrderInfo();
	},
	methods : {
		/**
		 * 获取订单最新信息
		 */
		async getOrderInfo(){
			const {error, result} = await ApiGetOrderDetail(this.$Route.query.id);
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.orderInfo = {...result};
		},
		/**
		 * 超时自动关闭订单
		 */
		timerCloseOrder(){
			this.orderInfo = {...this.orderInfo, orderStatus : 2, cancelReason:'超时未支付'};
			this.getOrderInfo();
		}
		
	}
	
}
</script>
<style lang="scss">
page {
	background: $color-grey1;
	padding-bottom: 138rpx;
}
</style>>

<style lang="scss" scoped>
.goods-info-operation{
	padding-top: 30rpx;
	text-align: right;
}
.goods-info__last{
	border: 0;
}

</style>