CommunityApp/pagesM/pages/order_sale_detail.vue

<template>
	<view class="dt-page">
		<template v-if="emptyType == 0">
			<view class="hd-wrap">
				<view class="order-state">{{ dataDetail.statusTxt }}</view>
				<view v-if="dataDetail.localStatus == saledStatus.PENDING" class="order-state-tips">订单售后审核中，请耐心等待商家处理</view>
				<view v-else-if="dataDetail.localStatus == saledStatus.APPROVED" class="order-state-tips">订单售后审核通过，请按商家安排处理</view>
				<view v-else-if="dataDetail.localStatus == saledStatus.FAILED" class="order-state-tips">售后已被拒绝</view>
				<view v-else-if="dataDetail.localStatus == saledStatus.COMPLETED" class="order-state-tips">售后完成，欢迎再次购买</view>
				<view v-else-if="dataDetail.localStatus == saledStatus.CANCELED" class="order-state-tips">售后已取消，欢迎再次购买</view>
			</view>

			<view class="dt-contractor-wrap">
				<block v-if="dataDetail.type === saledType.AFTERSALES_REPLACEMENT">
					<image
						class="contractor-icon"
						:class="{
							'no-addr': !dataDetail.replacement.area
						}"
						src="http://139.9.103.171:1888/img/image/contractor.png"
						mode="aspectFit"
					></image>
					<view class="rt-wrap">
						<view class="contractor-name">联系人：{{ dataDetail.replacement.consignee }}</view>
						<view class="contractor-mibile">联系电话：{{ dataDetail.replacement.phone }}</view>
						<view v-if="addr" class="contractor-addr">
							收货地址：
							<view class="mutil-value">{{ dataDetail.replacement.area + dataDetail.replacement.address }}</view>
						</view>
					</view>
				</block>
				<block v-else-if="dataDetail.type === saledType.AFTERSALES_RETURNS">
					<image class="bank-icon" src="http://139.9.103.171:1888/img/image/bank.png" mode="aspectFit"></image>
					<view class="rt-wrap">
						<view class="contractor-name">收款银行：{{ dataDetail.returns.bank }}</view>
						<view class="contractor-mibile">支付方式：{{ dataDetail.returns.method === 'ONLINE' ? '在线支付' : '线下支付' }}</view>
					</view>
				</block>
			</view>

			<view class="dt-order-item">
				<view class="state-row">
					<view class="order-no" @click="copyOrderSn(dataDetail.orderSN)">
						订单编号：{{ dataDetail.orderSN }}
						<text class="copy">复制</text>
					</view>
					<view
						class="state"
						:class="{
							'dt-color-primary': isColorPrimary.includes(dataDetail.localStatus),
							'dt-color-error': isColorDanger.includes(dataDetail.localStatus)
						}"
					>
						{{ dataDetail.statusTxt }}
					</view>
				</view>
				<view class="mid-row">
					<view v-for="(item, idx) in dataDetail.aftersalesItems" :key="idx">
						<view 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>
			</view>
			<view class="order-detail-wrap">
				<view class="detail-item">
					<view class="title">申请时间</view>
					<view class="value">{{ dataDetail.createdDate | dateFormat('yyyy-MM-dd hh:mm:ss') }}</view>
				</view>
				<view class="detail-item">
					<view class="title">申请总件数</view>
					<view class="value">{{ dataDetail.quantityAll }}</view>
				</view>
				<view class="detail-item">
					<view class="title">退款/售后类型</view>
					<view class="value">{{ dataDetail.typeTxt }}</view>
				</view>
				<view class="line"></view>
				<view class="detail-item detail-block">
					<view class="title">退款/售后原因</view>
					<view class="value single-line">{{ dataDetail.reason }}</view>
				</view>
			</view>
			<FootToolbar bgColor="#fff">
				<view slot="main" class="btn-wrap">
					<block v-if="dataDetail.localStatus == saledStatus.PENDING">
						<button class="btn-base btn-plain" hover-class="button-hover-scale" @tap="cancelRefund">取消售后</button>
						<button class="btn-base btn-primary btn-primary-plain" hover-class="button-hover-scale" @tap="tapCall">商家电话</button>
					</block>
					<!-- 其他 -->
					<block v-else><button class="btn-base btn-primary btn-primary-plain" hover-class="button-hover-scale" @tap="tapCall">商家电话</button></block>
				</view>
			</FootToolbar>
		</template>
		<DtEmpty :type="emptyType" />
	</view>
</template>

<script>
import DtTimer from '../comps/dt_timer.vue';
import DtContractor from '../comps/dt_contractor.vue';
import DtOrderItem from '../comps/dt_order_item.vue';
import DtEmpty from '../comps/dt_empty.vue';
import FootToolbar from '../comps/foot_toolbar.vue';
export default {
	components: {
		DtTimer,
		DtContractor,
		DtOrderItem,
		DtEmpty,
		FootToolbar
	},
	data() {
		return {
			dataDetail: {},
			receiver: {},
			param: {},
			leaveMsg: ''
		};
	},
	computed: {
		footSafe() {
			return `padding-bottom:${this.safeAreaBottom}px`;
		},
		saledStatus() {
			return this.$global.saledStatus;
		},
		saledStatusName() {
			return this.$global.saledStatusName;
		},
		saledType() {
			return this.$global.saledType;
		},
		saledTypeName() {
			return this.$global.saledTypeName;
		},
		isColorPrimary() {
			return [this.saledStatus.PENDING, this.saledStatus.APPROVED];
		},
		isColorDanger() {
			return [this.saledStatus.FAILED];
		}
	},
	methods: {
		//复制订单号
		copyOrderSn(sn) {
			uni.setClipboardData({ data: sn });
		},
		async cancelRefund() {
			this.$dialog.confirm({
				content: '确定取消售后吗？',
				success: async res => {
					if (res.confirm) {
						todoCancelRefund();
					}
				}
			});
			let ctx = this;
			async function todoCancelRefund() {
				let resp = await ctx.$api.cancelAftersales({
					_isShowLoading: true,
					id: ctx.dataDetail.id
				});
				ctx.$dialog.success('取消成功', () => {
					ctx.$util.refreshPage(['pages/mine', 'pages/mine_order_list']);
					ctx.onPullDownRefreshPage();
				});
			}
		},
		tapCall() {
			let phone = this.dataDetail.store.phone;
			if (phone) {
				this.makePhoneCall(phone);
			} else {
				this.$dialog.alert({
					content: '暂无商家电话号码，请通过“我的>>联系商家”拨打服务电话'
				});
			}
		},

		async queryDataDetail() {
			try {
				// 售后详情
				let resp = await this.$api.findAftersales({
					_isShowLoading: true,
					_isReject: true,
					id: this.loadOptions.adfterSaleId
				});
				if (resp) {
					this.emptyType = 0;

					let aftersalesItems = resp.aftersalesItems;
					resp.localStatus = this.saledStatus[resp.status];
					resp.statusTxt = this.saledStatusName[resp.status];
					resp.quantityAll = 0;
					aftersalesItems.map(item => {
						item.specificationsDesc = item.specifications.join('　');
						resp.quantityAll += item.quantity;
						return item;
					});
					resp.typeTxt = this.saledTypeName[resp.type];
					console.log(183, this.saledTypeName, resp.type);

					console.log(188, resp);
					this.dataDetail = resp;
				} else {
					this.emptyType = 1;
				}
			} catch (err) {
				console.log(err);
				this.emptyType = 2;
				this.$dialog.alert({
					content: err.errmsg || '暂无数据~'
				});
			}
		},

		onLoadPage() {
			wx.hideShareMenu();
			if (this.isLoad) {
				this.memberId = this.$auth.getMemberId();
			}
			this.queryDataDetail();
		}
	}
};
</script>

<style lang="scss" scoped>
.dt-page {
	min-height: 100vh;
	background-color: #f2f2f2;

	.hd-wrap {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background-color: $dt-color-primary;
		color: #fff;
		font-weight: 400;

		.order-state {
			padding-top: 40upx;
			width: 100%;
			font-size: 48upx;
			line-height: 1;
		}

		.order-state-tips {
			display: flex;
			width: 100%;
			padding-bottom: 30upx;
			padding-top: 10upx;
			font-size: 24upx;
			line-height: 1.5;

			.time-wrap {
				padding: 0 10upx;
			}
		}
	}

	.dt-contractor-wrap {
		display: flex;
		background-color: #fff;
		padding: 24upx 30upx;
		.contractor-icon {
			margin-top: 50upx;
			margin-right: 30upx;
			width: 30upx;
			height: 30upx;
		}
		.bank-icon {
			margin-top: 30rpx;
			margin-right: 30rpx;
			width: 40rpx;
			height: 30rpx;
		}
		.no-addr {
			margin-top: 30upx;
		}
		.rt-wrap {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-weight: 400;

			.contractor-name {
				font-size: 28upx;
			}
			.contractor-mibile,
			.contractor-addr {
				font-size: 26upx;
				color: #666666;
			}
			.contractor-mibile {
				margin-top: 10upx;
				margin-bottom: 10upx;
			}
			.contractor-addr {
				display: flex;
				align-items: flex-start;
				.mutil-value {
					flex: 1;
				}
			}
		}
	}

	.dt-order-item {
		margin-top: 20upx;
		background-color: #fff;
		.state-row {
			display: flex;
			justify-content: space-between;
			padding: 0 30upx;
			line-height: 80upx;
			border-bottom: 1upx solid #e5e5e5;

			.order-no {
				color: #666666;
				.copy {
					color: #8467DD;
					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;
					}
				}
			}
		}
	}

	.detail-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 20upx 0;
		padding: 0 30upx;
		height: 90upx;
		background-color: #fff;

		.title {
			display: flex;
			align-items: center;
			margin-right: 20upx;
			color: #666666;
			font-weight: 400;
		}

		.value {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.input-box {
				width: 100%;
				text-align: right;
			}
		}
	}

	.order-detail-wrap {
		width: 100%;
		padding: 10upx 0;
		background-color: #fff;

		& > .detail-item {
			height: 68rpx;
			margin: 0;
		}
		& > .detail-block {
			flex-direction: column;
			height: fit-content;
			padding: 10upx 30upx;
			align-items: flex-start;
			.single-line {
				padding: 10upx 0;
				justify-content: flex-start;
				width: 100%;
			}
		}

		.line {
			margin: 10upx auto;
			width: 690upx;
			height: 1upx;
			background-color: #e5e5e5;
		}

		.card {
			margin: 0 10upx;
			padding: 0 6upx;
			height: 32upx;
			line-height: 32upx;
			font-size: 22upx;
			background-color: #ffc600;
			border-radius: 4upx;
			color: #fff;
		}
	}

	.btn-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100vw;
		height: 100upx;
		background-color: #fff;
		padding: 0 30upx;
		box-sizing: border-box;

		.btn-base {
			position: relative;
			margin: 0 0 0 30upx;
			width: 150upx;
			height: 56upx;
			line-height: 56upx;
			font-size: 28upx;
			border-radius: 6upx;
		}

		.btn-base:before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: 2upx solid $dt-color-primary;
			border-radius: 6upx;
			content: '';
		}

		.btn-plain {
			background-color: transparent;
			color: $dt-text-color;
		}

		.btn-plain:before {
			border-color: #ccc;
			content: '';
		}

		.btn-primary {
			background-color: $dt-color-primary;
			color: #fff;
		}

		.btn-primary:before {
			border-color: $dt-color-primary;
			content: '';
		}

		.btn-primary-plain {
			background-color: transparent;
			color: $dt-color-primary;
		}
	}
}
</style>