book-hi/pages-mall/components/after-sales/order-card1.vue

<template>
	<view class="slot">
		<!-- 商品卡片 -->
		<OrderGoodsCard :data="data" showBorderBottom>
			<view class="status-slot">
				<!-- 
				 0=正常(非售后订单),20=仅退款,21=卖家同意,22=卖家驳回,
				 30=退货退款,31=卖家同意(用户填写退货单号),
				 32=卖家驳回,33=等待卖家收货确认中,
				 34=卖家确认收货,验货没问题金额已原路退回
				 -->
				<text v-if="data.sub_status == 20">仅退款，客服审核中</text>
				<text v-if="data.sub_status == 21">仅退款，审核通过</text>
				<text v-if="data.sub_status == 22">仅退款，审核失败</text>
				<text v-if="data.sub_status == 30">退货退款，客服审核中</text>
				<text v-if="data.sub_status == 31">审核通过，请填写退货快递单号</text>
				<text v-if="data.sub_status == 32">审核失败</text>
				<text v-if="data.sub_status == 33">等待卖家收货确认</text>
				<text v-if="data.sub_status == 34">卖家已确认收货，金额原路退回</text>
			</view>
		</OrderGoodsCard>
		<view class="content" :class="{ showBorderBottom }" v-for="(item,index) in data.order_details" :key="item.id">
			<view class="pic">
				<u-image width="180rpx" height="180rpx" :src="item.goods_cover"></u-image>
			</view>
			<view class="info">
				<view class="title">{{ item.goods_title }}</view>
				<view class="desc">
					<view class="sku item">
						<text>规格</text>
						<text>{{ item.goods_sku }}</text>
					</view>
					<!-- <view class="express item">
						<text>运费</text>
						<text>{{ data.order_details.express || '包邮' }}</text>
					</view> -->
				</view>
				<view class="price">
					<text>￥</text>
					<text>{{ item.goods_price_selling }}</text>
				</view>
			</view>
			<view class="status">
				<view class="status-label">
					<slot></slot>
				</view>
				<view class="num">
					<text>×</text>
					<text>{{ item.goods_nums }}</text>
				</view>
			</view>
		</view>
		<!-- 待付款 -->
		<view class="operate">
			<u-button type="primary" size="small" shape="circle" @click.stop="goPay(data)">售后详情</u-button>
		</view>
		<!-- 待发货 -->
		<view class="operate" v-if="data.status == 11">
			<view class="paystyle">
				实付款:{{data.actual_total_amount}}
			</view>
			<!-- <u-button type="primary" size="small" shape="circle" @click="pushDelivery(data)">提醒发货</u-button> -->
			<u-button type="default" style="margin-right: 24rpx;" size="small" shape="circle" @click="applyAfterSales(data.id)">申请售后</u-button>
		</view>
		<!-- 待收货 -->
		<view class="operate" v-if="data.status == 12">
			<u-button type="default" style="margin-right: 24rpx;" size="small" shape="circle" @click="applyAfterSales(data.id)">申请售后</u-button>
			<u-button type="primary" size="small" shape="circle" @click.stop="confirmReceipt(data)">确认收货</u-button>
		</view>
		<!-- 待评价 -->
		<!-- <view class="operate" v-if="data.status == 3">
			<u-button type="default" style="margin-right: 24rpx;" size="small" shape="circle" @click="applyAfterSales()">申请售后</u-button>
			<u-button type="primary" size="small" shape="circle" @click="goEvaluate()">去评价</u-button>
		</view> -->
		<!-- 已完成 -->
		<view class="operate" v-if="data.status == 13">
			<view class="paystyle">
				实付款:{{data.actual_total_amount}}
			</view>
			<!-- <u-button type="default" style="margin-right: 24rpx;" size="small" shape="circle" @click="deleteOrder()">删除记录</u-button>
			<u-button type="primary" size="small" shape="circle" @click.stop="goOrderInfo(data.id)">查看详情</u-button> -->
		</view>
		<!-- 已完成 -->
		<view class="operate" v-if="data.status == 14">
			<!-- <view class="paystyle">
				实付款:{{data.actual_total_amount}}
			</view> -->
			<!-- <u-button type="default" style="margin-right: 24rpx;" size="small" shape="circle" @click="deleteOrder()">删除记录</u-button>
			<u-button type="primary" size="small" shape="circle" @click.stop="goOrderInfo(data.id)">查看详情</u-button> -->
		</view>
	</view>
</template>

<script>
import { orderOperate } from '@/pages-mall/mixins/order-operate.js';
import OrderGoodsCard from '@/pages-mall/components/order/order-goods-card.vue';
export default {
	name: 'order-card',
	// 工单操作方法混入
	mixins: [orderOperate],
	components: {
		OrderGoodsCard
	},
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		// 付款
		goPayResult(e) {
			
		},
	}
};
</script>

<style lang="scss" scoped>
.slot {
	background-color: $app-theme-bg-color;
	border-radius: 16rpx;
	box-shadow: $app-theme-shadow;
	padding: 30rpx;
	margin-top: 20rpx;
	.goods {
		display: flex;
		align-items: center;
		align-content: space-between;
		padding-bottom: 26rpx;
		border-bottom: 1rpx solid $app-theme-border-color;
		margin-bottom: 32rpx;
		.pic {
			margin-right: 24rpx;
		}
		.info {
			width: 280rpx;
			margin-right: 20rpx;
			.title {
				width: 100%;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-text-black-color;
				margin-bottom: 14rpx;
			}
			.desc {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				margin-bottom: 18rpx;
				.item {
					margin-right: 24rpx;
					text:nth-child(1) {
						font-size: 24rpx;
						color: $app-theme-card-gray-color;
						margin-right: 8rpx;
					}
					text:nth-child(2) {
						font-size: 24rpx;
						color: $app-theme-card-gray-deep-color;
					}
				}
			}
			.price {
				text:nth-child(1) {
					font-size: 16rpx;
					color: $app-theme-text-black-color;
				}
				text:nth-child(2) {
					font-size: 28rpx;
					color: $app-theme-text-black-color;
				}
			}
		}
		.status {
			width: 120rpx;
			.status-label {
				width: 100%;
				text-align: right;
				font-size: 28rpx;
				color: $app-theme-color;
				margin-bottom: 100rpx;
			}
			.num {
				width: 100%;
				text-align: right;
				text:nth-child(1) {
					font-size: 24rpx;
					color: $app-theme-text-gray-white-color;
					vertical-align: bottom;
				}
				text:nth-child(2) {
					font-size: 28rpx;
					color: $app-theme-text-gray-white-color;
					vertical-align: bottom;
				}
			}
		}
	}
}
.operate {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.paystyle{
	// font-weight: bold;
	margin-right: 20rpx;
	color: $app-theme-text-money-color;
}
</style>