ledehui-B/src/packages/order/after-sale-detail.vue

<template>
	<view class="container">
		<Navbar title="我的订单" background-color="#fff" color="#333"></Navbar>
		<view class="head">
			<text class="status">{{ infoStatus | filterStatus }}</text>
		</view>
		<!-- <view class="logistics" @click="tologistics" v-if="logList.length">
			<text class="icon">&#xe6f3;</text>
			<view class="logistics-detail">
				<text class="word12 title">{{ logList[0].context }}</text>
				<text class="word12-gray9 time">{{ logList[0].time }}</text>
			</view>
			<text class="right">&#xe70d;</text>
		</view> -->
		<view class="address-info" v-if="infoStatus === 2">
			退货地址：{{returnInfo.address}}
			<view>
				<text class="name">{{returnInfo.name}}</text>
				<text class="phone">{{returnInfo.phone}}</text>
			</view>
		</view>
		<view class="order-wrap">
			<OrderItem :sku="skuList" :oid="oid" :total="payment"></OrderItem>
		</view>
		<view class="row">
			退款金额
			<text>¥{{info.amount | moneyFormat}}</text>
		</view>
		<view class="row">
			售后方式
			<text>{{typeMap[info.afterType]}}</text>
		</view>
		<view class="row row2">
			退款原因
			<text>{{info.afterReason}}</text>
		</view>
		<view class="remark">
			{{info.afterRemark}}
		</view>
		<view class="detail">
			<text class="word12-gray9">订单编号：</text>
			<text class="word12-gray9 half">{{ oid }}</text>
			<text class="word12-gray9">申请时间</text>
			<text class="word12-gray9 half">{{ info.created }}</text>
		</view>
		<button class="conchat" open-type="contact" :session-from="`7moor|${_userInfo.nickname}|${_userInfo.avatar}|${JSON.stringify({uid: _userInfo.uid})}`">
			<view class="left">
				<IconText class="icon" :code="`\ue751`" size="12" color="#333"></IconText>
				联系客服
			</view>
			<IconText :code="`\ue84a`" size="12" color="#999"></IconText>
		</button>
		<view class="steps-box">
			<uni-steps :options="histories" active-color="#333" :active="0" direction="column" />
		</view>
		<view class="btn-box" v-if="infoStatus === 1">
			<view class="btn btn2" @click.stop="cancelAfterSaleModal">撤销售后</view>
		</view>
		<view class="bottom-btn" v-if="infoStatus === 2">
			<view class="solid-btn" @click="toDeliverGoods">去发货</view>
		</view>
		<ShowModal ref="cancelOrder" title="提示" @submit="cancelAfterSale" leftBtnText="取消" content="确定要撤销该售后吗"
			btnText="确认" />
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Vue,
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({
		filters: {
			filterStatus(val: any) {
				let objMap: any = {
					1: '已申请待审核',
					2: '已审核待退货',
					3: '已退货待确认',
					5: '已审核待退款',
					6: '售后成功',
					7: '售后失败'
				}
				return objMap[val] || '';
			},
			phoneStatus(val: string): string {
				if (!val) return '';
				return val.substring(0, 3) + '****' + val.substring(7);
			},
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			},
			freightFormat(val: any) {
				if (val <= 0) {
					return "包邮"
				} else {
					return (+val).toFixed(2);
				}
			}
		}
	})
	export default class OrderDetail extends Vue {
		@baseModule.Getter('_userInfo') _userInfo: any;
		detail: any = {
			address: {
				phone: ''
			}
		};
		oid: number = 0;
		info: any = {};
		Status: any = {};
		minite: number = 0;
		second: number = 0;
		timer: any = null; // 倒计时定时器
		from: string = '';
		logList: any[] = [];
		isFirst: boolean = false;
		payment: number = 0;
		skuList: any[] = [];
		infoStatus: number = 0;
		statusMap: any = {
			1: '已申请待审核',
			2: '已审核待退货',
			3: '已退货待确认',
			5: '已审核待退款',
			6: '售后成功',
			7: '售后失败'
		};
		typeMap: any = {
			2: '仅退款',
			3: '退货退款'
		};
		statusMap2: any = {
			1: '未收货',
			2: '已收货'
		};
		returnInfo: any = {};
		histories: any = [];
		onLoad() {
			// this.from = this.$Route.query.from;
			// this.getShareInfo();
			// this.getDetail();
		}
		onShow() {
			if (this.$Route.query.id) {
				this.getDetail();
			}
		}
		updateData() {
			this.getDetail();
		}
		getDetail(): void {
			let id = this.$Route.query.id;
			if (!id) return;
			// 获取订单详情
			this.$http
				.get({
					url: this.$api.getAfterSaleDetail,
					data: {
						id: id
					}
				})
				.then((res: any) => {
					this.detail = res;
					// 以下变量均为app层级太深无法渲染创建
					this.info = res.afterSale;
					this.payment = +res.afterSale.payment;
					this.skuList = res.skuList;
					this.oid = res.afterSale.oid;
					this.returnInfo = res.returnInfo;
					this.infoStatus = res.afterSale.status;
					this.histories = res.histories.map((item: any) => {
						return {
							...item,
							title: item.content,
							desc: item.created
						}
					});
				})
				.catch((err: any) => {
					console.log(err);
				});
		}
		tologistics(): void {
			this.$Router.push({
				path: '/packages/order/logistics',
				query: {
					oid: this.oid
				}
			});
		}
		cancelAfterSaleModal() {
			(this.$refs.cancelOrder as any).open();
		}
		cancelAfterSale() {
			this.$http
				.put({
					url: this.$api.cancelAfterSale,
					data: {
						id: this.info.id
					}
				})
				.then((res: any) => {
					uni.hideLoading();
					this.$Router.pushTab({
						path: '/pages/order/order-list',
					});
					uni.showToast({
						title: "已撤销售后",
						icon: 'none'
					})
				}, (err: any) => {
					uni.hideLoading();
					console.log(err);
				});
		}

		toDeliverGoods() {
			this.$Router.push({
				path: '/packages/order/deliver-goods',
				query: {
					id: this.info.id
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.word14 {
		@include word-vw(14, $gray3);
	}

	.word12 {
		@include word-vw(12);
	}

	.word12-gray9 {
		@include word-vw(12, $gray9);
	}

	.container {
		width: 100vw;
		padding-bottom: vw(100);
		background: #F8F8F8;
	}

	.address {
		width: 100%;
		background-color: white;
		padding: $cell-padding;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;

		.icon {
			@include icon(16, $gray9);
		}

		.address-detail {
			width: vw(310);
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			margin-left: 10px;

			.area {
				width: vw(310);
				margin-top: vw(8);
			}

			.name {
				width: vw(200);
			}
		}
	}

	.logistics {
		width: 100%;
		background-color: white;
		padding: $cell-padding;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-flow: row;
		flex-wrap: wrap;
		align-content: space-between;
		margin: 10px 0;

		.icon {
			@include icon(16, $gray9);
			margin-top: 3px;
		}

		.right {
			@include icon(12, $gray9);
			align-self: center;
		}

		.logistics-detail {
			width: vw(280);
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;

			.time {
				width: vw(280);
				margin-top: vw(8);
			}

			.title {
				width: vw(280);
				line-height: 1.5;
			}
		}
	}

	.remark {
		margin-top: 1px;
		width: 100vw;
		background-color: white;
		@include word-vw(14);
		padding: vw(15);
		box-sizing: border-box;
	}

	.head {
		width: 100vw;
		height: vw(90);
		@include flex-y(center, flex-start);
		background: #333333;
		padding: $cell-padding;
		box-sizing: border-box;
		color: #fff;
		font-size: vw(12);

		.status {
			font-size: vw(18);
			margin-bottom: vw(5);
			font-weight: 600;
		}
	}

	.address-info {
		width: 100%;
		padding: vw(10) vw(15);
		box-sizing: border-box;
		@include word-vw(14, #666);
		line-height: vw(20);
		background: #fff;

		.name {
			margin-right: vw(12);
		}

		view {
			margin-top: vw(8);
		}
	}

	.order-wrap {
		width: 100vw;
		display: flex;
		margin-top: vw(10);
		flex-wrap: wrap;
		align-content: space-between;
		background: white;
		padding-top: vw(10);

		.oid {
			flex: 1;
			padding: vw(15);
			box-sizing: border-box;
			@include word-vw(12);
		}

		.time {
			flex: 1;
			padding: vw(15);
			box-sizing: border-box;
			text-align: right;
		}

		.total-detail {
			width: 100%;
			padding: vw(6) vw(15);
			box-sizing: border-box;
			border-top: vw(1) solid #F5F5F5;
			border-bottom: vw(1) solid #F5F5F5;
			line-height: vw(27);

			.top {
				@include word-vw(14, #333);
				@include flex-x();
			}

			.bottom {
				@include word-vw(14, #999);
				@include flex-x();
			}
		}

		.total {
			width: 100%;
			height: vw(50);
			text-align: right;
			padding: 0 vw(15);
			box-sizing: border-box;
			@include flex-x(flex-end);
			background: #fff;
			@include word-vw(14, #999);

			text {
				@include word-vw(16, #333);
			}
		}
	}

	.row {
		height: vw(40);
		@include flex-x();
		background: #fff;
		@include word-vw(14, #333);
		padding: 0 vw(15);
		margin-top: vw(10);
	}

	.row2 {
		margin-top: vw(1);
	}

	.remark {
		@include word-vw(14, #333);
		padding: vw(10) vw(15);
		margin-top: vw(1);
		line-height: vw(20);
	}

	.oid {
		height: vw(36);
		@include flex-x();
		background: #fff;
		margin-top: vw(10);
		padding: 0 vw(15);
		box-sizing: border-box;
		@include word-vw(14, #999);
	}

	.detail {
		margin-top: 10px;
		@include flex-x();
		flex-wrap: wrap;
		align-content: space-between;
		width: 100vw;
		padding: vw(10) vw(15);
		box-sizing: border-box;
		background-color: white;
		line-height: 2;

		.half {
			width: vw(250);
			text-align: right;
		}
	}

	.conchat {
		@include flex-x();
		@include word-vw(14, #333);
		height: vw(50);
		background: #fff;
		margin-top: vw(10);
		padding: 0 vw(15);

		.icon {
			margin-right: vw(10);
		}

		&::after {
			border: none;
		}
	}
	
	.steps-box{
		background: #fff;
		margin-top: vw(10);
	}

	.btn-box {
		height: vw(56);
		@include flex-x(flex-end);
		width: 100%;
		padding: 0 vw(15);
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;

		.btn {
			height: vw(30);
			width: vw(90);
			line-height: vw(30);
			@include word-vw(12, #fff);
			background: $btn-color;
			border-radius: vw(15);
			margin-left: vw(10);
			text-align: center;
			box-sizing: border-box;
		}

		.btn2 {
			color: #333;
			border: vw(1) solid #BF2071;
			background: #FFEBF1;
		}
	}

	.bottom-btn {
		height: vw(60);
		width: 100%;
		background: #fff;
		@include flex-x(center);
		position: fixed;
		bottom: 0;
		left: 0;

		.solid-btn {
			background: $bk-color;
			@include solid-btn(345, 48, #333);
			border-radius: vw(24);
			@include word-vw(14, #fff);
		}
	}

	.select-pay-type {
		background: #FAFAFA;
		border-top-right-radius: vw(34);
		border-top-left-radius: vw(34);
		overflow: hidden;
		padding: vw(20) vw(10);
		box-sizing: border-box;
		@include flex-y();

		.title {
			@include word-vw(18, #333);
			font-weight: bold;
		}

		.time-tip {
			@include word-vw(10, #999);
			margin-top: vw(5);
		}

		.amount {
			@include word-vw(40, #000);
			font-weight: 450;
			margin-top: vw(20);
		}

		.price {
			@include word-vw(14, #999);
			margin-top: vw(3);
		}

		.pay-item-box {
			border-radius: vw(10);
			overflow: hidden;
			width: 100%;
			margin-top: vw(36);
		}

		.pay-item {
			background: #fff;
			// margin-bottom: vw(10);
			height: vw(70);
			line-height: vw(70);
			padding: 0 vw(18);
			// border-radius: vw(10);
			@include word-vw(16, #333);
			@include flex-x();
			overflow: hidden;
			margin-bottom: vw(1);

			.item-left {
				@include flex-x(flex-start);
			}

			.icon {
				margin-right: vw(10);
			}

			.item-right {
				.icon {
					margin: 0;
				}
			}
		}

		.popup-btn-box {
			width: 100%;
			@include flex-x();
			margin-top: vw(20);

			.btn {
				font-weight: bold;
				border-radius: vw(24);
				height: vw(48);
				@include flex-x(center);
			}

			.cancel-btn {
				width: vw(127);
				background: #fff;
				@include word-vw(16, $btn-color);

			}

			.confirm-btn {
				width: vw(355);
				background: $btn-color;
				@include word-vw(16, #fff);
			}
		}
	}
</style>