book-shop/pages-mall/pages/order/detail.vue

<template>
	<view class="page">
		<!-- 订单状态 -->
		<OrderStatus :type="orderInfo.status" :data="{order_details:goodsList,...orderInfo}"></OrderStatus>
		<!-- 地址 -->
		<view class="address">
			<AddressCard :data="addressInfo" :isGoSelect="false"></AddressCard>
		</view>
		<!-- 商品列表 -->
		<view class="goods">
			<TitleOperate :title="'共' + goodsNums + '件商品'" titleSize="30rpx"></TitleOperate>
			<view class="list">
				<view class="" v-for="(goods, index) in goodsList" :key="index">
					<!-- index != goodsList.length - 1 -->
					<orderDetailGoodsCard :data="goods" :showBorderBottom="false"></orderDetailGoodsCard>
					<!-- {{orderInfo.status}},,,{{goods.sub_status}} -->
					<!-- String(orderInfo.status)=='15'&& -->
					<view class="refundOpar" v-if="String(goods.sub_status)!=='10'">
						<text class="desc">该商品存在售后</text>
						<u-button shape="circle" size="small" type="default" @click="afterSalesDetail(goods.order_refund_id)">前往查看</u-button>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<TitleOperate title="订单信息" titleSize="30rpx"></TitleOperate>
			<view class="inner">
				<LineInfoOperate :orderInfo="orderInfo" :addressInfo="addressInfo"></LineInfoOperate>
			</view>
		</view>
		<!-- 操作按钮 -->
		<OrderOperate :data="{order_details:goodsList,...orderInfo}" @refresh="refreshPage"></OrderOperate>
	</view>
</template>

<script>
import OrderStatus from '@/pages-mall/components/order/order-status.vue';
import AddressCard from '@/pages/mine/components/address-card.vue';
import TitleOperate from '@/components/title-operate.vue';
import orderDetailGoodsCard from '@/pages-mall/components/order/orderdetail-goods-card.vue';
import LineInfoOperate from '@/pages-mall/components/line-info-operate.vue';
import OrderOperate from '@/pages-mall/components/order/order-operate.vue';
// 组件
import { orderOperate } from '@/pages-mall/mixins/order-operate.js';
export default {
	components: {
		OrderStatus,
		AddressCard,
		orderDetailGoodsCard,
		TitleOperate,
		LineInfoOperate,
		OrderOperate
	},
	mixins: [orderOperate],
	data() {
		return {
			orderId:null,
			// 订单信息
			orderInfo: {},
			// 地址信息
			addressInfo: {},
			// 商品列表
			goodsList: [],
			goodsNums:1,
			// 订单信息配置项
			// orderInfoOps: {},
		};
	},
	onLoad(ops) {
		if(!ops.order_id){
			uni.navigateBack();
			return;
		}
		this.orderId = ops.order_id;
		this.getOrderDetail();
		
	},
	methods:{
		refreshPage(){
			this.getOrderDetail();
		},
		getOrderDetail(){
			this.$u.api.getOrderDetailAjax(this.orderId).then(({code,data})=>{
				if(code==1){
					const addressBaseInfo = data.address_info;
					this.addressInfo = {
						...addressBaseInfo,
						address: addressBaseInfo.province+addressBaseInfo.city+addressBaseInfo.area,
						detail_address: addressBaseInfo.province+addressBaseInfo.city+addressBaseInfo.area+addressBaseInfo.street
					};
					this.goodsList = data.order_goods_info;
					console.log('this.goodsList>>>',this.goodsList.length,this.goodsList);
					this.getGoodsNums();
					this.orderInfo = data.order_info;
				}
			}).catch()
		},
		getGoodsNums(){
			let num = 0;
			this.goodsList.forEach(e=>num+=Number(e.goods_nums));
			this.goodsNums = num;
		},
	},
};
</script>

<style lang="scss" scoped>
.page {
	padding-bottom: 120rpx;
}
.address {
	margin-bottom: 24rpx;
	padding: 0 30rpx;
	background-color: $app-theme-bg-color;
}
.goods,
.order-info {
	margin-bottom: 24rpx;
	background-color: $app-theme-bg-color;
	.list,
	.inner {
		padding: 0 30rpx;
	}
}
.refundOpar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: red;
	.desc{
		margin-right: 20rpx;
	}
}
</style>