book-hi/pages-mall/components/order/order-goods-card.vue

<template>
	<view @click.stop="goOrderInfo(data.id)">
		<view class="sigleI" v-for="(item,index) in data.order_details" :key="item.id">
			<view class="content">
				<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>
					<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>
			
			<!-- {{data.status}}============{{item.sub_status}} -->
			<!-- 
			sub_status：10=正常(非售后订单),20=仅退款,21=卖家同意,22=卖家驳回,30=退货退款,31=卖家同意(用户填写退货单号),32=卖家驳回,33=等待卖家收货确认中,34=卖家确认收货,验货没问题金额已原路退回 
			 -->
			 <!-- String(data.status)=='15'&& -->
			<view class="oparBtns" v-if="String(item.sub_status)!=='10'">
				 <!-- <text v-if="item.sub_status=='20'">退款审核中</text>
				 <text v-if="item.sub_status=='21'">退款成功</text>
				 <text v-if="item.sub_status=='22'">退款失败</text>
				 <text v-if="item.sub_status=='30'">退货申请中，等待客服审核</text>
				 <text v-if="item.sub_status=='31'">售后中</text>
				 <text v-if="item.sub_status=='32'">申请失败，如有疑问可联系客服</text>
				 <text v-if="item.sub_status=='33'">等待卖家收货确认</text>
				 <text v-if="item.sub_status=='34'">卖家已确认收货，正在退款中</text>
				 <text v-if="item.sub_status=='344'">退款成功</text> -->
				 <text class="descp">该商品存在售后</text>
				 <!-- <u-button type="default" size="mini" shape="circle" @click="afterSalesDetail(item.order_refund_id)">前往查看</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderOperate
	} from '@/pages-mall/mixins/order-operate.js';
	export default {
		name: 'goods-card',
		mixins: [orderOperate],
		props: {
			// 数据源
			data: {
				type: Object,
				default: () => {
					return {};
				}
			},
			// 是否显示下边框
			showBorderBottom: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.sigleI{
		border-bottom: 1rpx solid $app-theme-border-color;
	}
	.oparBtns{
		padding: 15rpx 30rpx;
		// text-align: right;
	}
	.content {
		display: flex;
		align-items: center;
		align-content: space-between;
		padding: 30rpx;

		// &.showBorderBottom {
		// 	margin-bottom: 30rpx;
		// 	padding-bottom: 24rpx;
		// 	border-bottom: 1rpx solid $app-theme-border-color;
		// }

		.pic {
			margin-right: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}

		.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;
				height: 28rpx;
			}

			.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;
				}
			}
		}
	}
	.descp{
		margin-right: 20rpx;
		color: #aaa;
	}
</style>