shop-pc/pages/account/index/order/detail/index.vue

<!--
 * @Author: ch
 * @Date: 2022-05-08 01:14:03
 * @LastEditors: ch
 * @LastEditTime: 2022-05-11 22:22:15
 * @Description: file content
-->
<template>
	<div>
		<div class="box">
			<StatusInfo :orderInfo="orderInfo" @changeStatus="getOrderInfo"/>
			<StatusStep :orderInfo="orderInfo" />
		</div>
		<LogisitcsInfo :orderInfo="orderInfo" />
		<div class="pay-type" v-if="orderInfo.payType !== 1">
			<p>支付方式：{{orderInfo.payTypeDesc}}</p>
			<p>支付时间：{{orderInfo.submitTime}}</p>
		</div>
		<GoodsInfo :orderInfo="orderInfo"/>
	</div>
</template>
<script>
import {ApiGetOrderDetail} from '@/plugins/api/order';
import StatusInfo from './module/StatusInfo.vue';
import StatusStep from './module/StatusStep.vue';
import LogisitcsInfo from './module/LogisitcsInfo.vue';
import GoodsInfo from './module/GoodsInfo.vue';
export default {
	components: { StatusInfo, StatusStep, LogisitcsInfo, GoodsInfo },
	data(){
		return {
			orderInfo : {}
		}
	},
	mounted(){
		this.getOrderInfo();
	},
	methods:{

		/**
		 * 获取订单最新信息
		 */
		async getOrderInfo(){
			const {error, result} = await ApiGetOrderDetail(this.$route.query.id);
			if(error){
				this.$message.warning(error.message);
				return false;
			}
			this.orderInfo = {...result};
		},
	}
}
</script>
<style lang="scss" scoped>
.box{
	border: 1px solid #ddd;
	border-radius: 4px;
	display: flex;
}
.pay-type{
	border: 1px solid #ddd;
	background: #f8f8f8;
	height: 59px;
	line-height: 59px;
	padding: 0 30px;
	display: flex;
	justify-content: space-between;
}
</style>