CommunityApp/pagesM/comps/dt_order_item.vue

<template>
	<view class="dt-order-item" @tap="$emit('order', dataDetail)">
		<view class="state-row">
			<view v-if="isTimer && dataDetail.status == orderState.waitForPay" class="timer">
				<!-- <text v-if="isOutDate()">已过期</text>
        <block v-else> -->
				<DtTimer :start="dataDetail.expire" @timeover="onTimeover" />
				<text class="tips">后订单自动取消</text>
				<!-- </block> -->
			</view>
			<view v-else class="order-no" @click.stop="copyOrderSn(dataDetail.sn)">
				订单编号：{{ dataDetail.sn }}
				<text class="copy">复制</text>
			</view>
			<view
				class="state"
				:class="{
					'dt-color-primary': isColorPrimary.includes(dataDetail.status),
					'dt-color-error': isColorDanger.includes(dataDetail.status)
				}"
			>
				{{ dataDetail.statusTxt }}
			</view>
		</view>
		<view class="mid-row">
			<view v-for="(item, idx) in dataDetail.products" :key="idx" class="goods-item">
				<image class="main-pic" :src="item.thumbnail" mode="aspectFit"></image>
				<view class="rt-wrap">
					<view class="good-mn">
						<view class="goods-name dt-text-row-one">{{ item.name }}</view>
						<view class="goods-num">x {{ item.quantity }}</view>
					</view>
					<view class="specifications">{{ item.specificationsDesc }}</view>
					<view class="price">￥{{ item.price }}</view>
				</view>
			</view>
		</view>
		<view v-if="isFootShow" class="ft-row">
			<view class="real-pay">实付金额：￥{{ dataDetail.amount }}</view>
			<view class="opts">
				<!-- 待付款 -->
				<block v-if="dataDetail.status == orderState.waitForPay">
					<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap.stop="tapDepatch('cancel')">取消订单</button>
					<button class="btn-base btn-primary" hover-class="button-hover-scale" @tap.stop="tapDepatch('pay')">立即支付</button>
				</block>
				<!-- 待发货，虽然是取消订单的文字按钮，但执行的是申请售后（退货） -->
				<block v-else-if="dataDetail.status == orderState.waitForDelive">
					<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap.stop="tapDepatch('refund')">取消订单</button>
				</block>
				<!-- 待收货 -->
				<block v-else-if="dataDetail.status == orderState.waitForReceive">
					<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap.stop="tapDepatch('refund_choose')">申请售后</button>
					<button class="btn-base btn-primary" hover-class="button-hover-scale" @tap.stop="tapDepatch('receive')">确认收货</button>
				</block>
				<!-- 待评价 -->
				<block v-else-if="dataDetail.status == orderState.waitForAppraise">
					<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap.stop="tapDepatch('refund_choose')">申请售后</button>
					<button class="btn-base btn-primary" hover-class="button-hover-scale" @tap.stop="tapDepatch('appraise')">评价商品</button>
				</block>
				<!-- 已取消、已失败、已拒绝 -->
				<block v-else-if="isDel.includes(dataDetail.status)">
					<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap.stop="tapDepatch('delete')">删除订单</button>
				</block>
				<!-- 售后等待审核 -->
				<block v-else-if="dataDetail.status == orderState.saled_pending">
					<button class="btn-base btn-primary" hover-class="button-hover-scale" @tap.stop="tapDepatch('cancelRefund')">取消售后</button>
				</block>
				<!-- 售后审核通过 -->
				<!-- <block v-else-if="dataDetail.status == orderState.saled_approved">
          <button class="btn-base btn-primary"
            hover-class="button-hover-scale" 
            @tap.stop="tapDepatch('cancelRefund')">审核通过</button>
        </block> -->
				<!-- 售后审核失败 -->
				<!-- <block v-else-if="dataDetail.status == orderState.saled_failed">
          <button class="btn-base btn-primary"
            hover-class="button-hover-scale" 
            @tap.stop="tapDepatch('cancelRefund')">审核失败</button>
        </!-->
			</view>
		</view>
	</view>
</template>
<script>
import DtTimer from './dt_timer.vue';
export default {
	components: {
		DtTimer
	},
	props: {
		isTimer: {
			type: Boolean,
			default: true
		},
		isFootShow: {
			type: Boolean,
			default: true
		},
		dataDetail: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			timer: null
		};
	},
	computed: {
		isOutDate() {
			if (!this.dataDetail) {
				return false;
			}
			let item = this.dataDetail;
			let expire = this.$util.createDate(item.expire);
			let diffMills = expire.getTime() - new Date().getTime();
			if (diffMills < 0) {
				return true;
			}
			return false;
		},
		orderState() {
			return this.$global.orderState;
		},
		saledStatus() {
			return this.$global.saledStatus;
		},
		isDel() {
			return [
				// FAILED("已失败"), CANCELED("已取消"), DENIED("已拒绝")
				this.orderState.failed,
				this.orderState.cancel,
				this.orderState.denied
			];
		},
		isColorPrimary() {
			return [this.orderState.waitForPay, this.orderState.waitForDelive, this.orderState.waitForReceive, this.saledStatus.PENDING, this.saledStatus.APPROVED];
		},
		isColorDanger() {
			return [this.orderState.failed, this.orderState.denied, this.saledStatus.FAILED];
		}
	},
	methods: {
		//复制订单号
		copyOrderSn(sn) {
			uni.setClipboardData({ data: sn });
		},
		tapDepatch(flag) {
			this.$emit('tapbtn', {
				flag,
				item: this.dataDetail
			});
		},
		onTimeover() {
			this.$emit('timer');
		}
	},
	created() {}
};
</script>

<style lang="scss">
.dt-order-item {
	background-color: #fff;
	.state-row {
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		line-height: 80upx;
		border-bottom: 1upx solid #e5e5e5;
		.timer {
			color: $dt-color-error;
			.tips {
				padding-left: 10upx;
			}
		}
		.order-no {
			color: #666666;
			.copy {
				color: #0081ff;
				margin: 0rpx 10rpx;
			}
		}
		.order-state {
			font-size: 30upx;
			color: #666666;
		}
	}

	.mid-row {
		.goods-item {
			display: flex;
			padding: 30upx;
			height: 220rpx;
			box-sizing: border-box;
			border-bottom: 1upx solid #e5e5e5;
			.main-pic {
				width: 152upx;
				height: 152upx;
			}
			.rt-wrap {
				padding-left: 26upx;
				flex: 1;
				.good-mn {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 30upx;
					.goods-name {
						flex: 1;
						margin-right: 20upx;
						line-height: 1.5;
					}
				}
				.specifications {
					margin: 30upx 0 20upx;
					line-height: 1;
					color: #999999;
					font-size: 26upx;
					font-weight: 500;
				}
				.price {
					font-size: 30upx;
				}
			}
		}
	}

	.ft-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		height: 105upx;
		.opts {
			display: flex;
			.btn-base {
				margin-left: 20upx;
			}
		}
	}

	.btn-base {
		position: relative;
		width: 150upx;
		height: 56upx;
		line-height: 56upx;
		font-size: 28upx;
		border-radius: 25px;
		box-sizing: border-box;
	}
	.btn-base:before {
		// position: absolute;
		// top: 0;
		// left: 0;
		// width: 100%;
		// height: 100%;
		// border: 2upx solid $dt-color-primary;
		// border-radius: 6upx;
		// box-sizing: border-box;
		// content: '';
	}
	.btn-plain {
		background-color: transparent;
		color: $dt-text-color;
		border: 1upx solid #999;
	}
	.btn-plain:before {
		// border-color: #ccc;
		// box-sizing: border-box;
		// content: '';
	}
	.btn-primary {
		background-color: $base;
		color: #fff;
	}
	.btn-primary:before {
		border-color: $base;
		box-sizing: border-box;
		content: '';
	}
}
</style>