jhlapp/pagesT/order/ReturnDetail.vue

<template>
	<view class="detail-view">
		<view class="top-view ">
			<view class="status-text">{{ order_detail.auditStatus === 1 ? '待审核' : order_detail.auditStatus === 2 ? '已审核' : '已驳回' }}</view>
			<view class="desc" v-if="order_detail.auditStatus !== 1">
				{{ order_detail.auditName || '' }}在{{ $u.timeFormat(order_detail.auditTime, 'yyyy-mm-dd hh:MM:ss') }}进行{{order_detail.auditStatus === 2 ? '审核' : '驳回'}}
			</view>
		</view>
		<view class="customer-view">
			<view class="title clearfix">
				<view class="float_left ellipsis">{{ order_detail.customerName || '' }}</view>
			</view>
			<!-- 收货地址 -->
			<view class="delivery-view">
				<view class="name-top clearfix">
					<view class="float_left ellipsis">{{ order_detail.realName || '--' }}</view>
					<view class="float_right mobile" @click="callPhone(order_detail.mobile)">
						<text>{{ order_detail.mobile || '--' }}</text>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view v-if="order_detail.area" class="address-view">
					{{ order_detail.area.provinceName }} {{ order_detail.area.cityName }} {{ order_detail.area.districtName }} {{ order_detail.address }}
				</view>
			</view>
			<view class="remark">备注：{{ order_detail.remark || '无' }}</view>
		</view>
		<view class="detail-cont">
			<view class="info-li clearfix">
				<view class="label">退货单号</view>
				<view class="value" @click="copy(order_detail.no)">
					<u-icon margin-right="20" label-pos="left" :label="order_detail.no || '--'" name="copy" custom-prefix="custom-icon" size="24"></u-icon>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">源订单号</view>
				<view class="value" @click="copy(order_detail.originNo)">
					<u-icon margin-right="20" label-pos="left" :label="order_detail.originNo || '--'" name="copy" custom-prefix="custom-icon" size="24"></u-icon>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">入库状态</view>
				<view class="value">
					<text :class="[parseInt(order_detail.inStatus) === 5 ? 'success-status' : 'danger-status']">
						{{ parseInt(order_detail.inStatus) === 4 ? '未入库' : '已入库' }}
					</text>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">所属店铺</view>
				<view class="value">{{ order_detail.shopName }}</view>
			</view>

			<view class="goods-title">商品清单</view>
			<view class="goods-ul">
				<view v-for="(item, index) in order_detail.details" :key="index" class="goods-li clearfix">
					<view class="goods-img float_left"><image :src="item.images[0]" mode="aspectFill"></image></view>
					<view class="float_left info">
						<view class="goods-name ellipsis">{{ item.goodsName }}</view>
						<view class="goods-num clearfix">
							<view class="float_left">{{ item.unitName }};{{ item.skuName }}</view>
							<text class="float_right">销售量：{{ $utils.formatNub(item.saleNum) }}{{ item.unitName }}</text>
						</view>
						<view class="goods-num clearfix">
							<text class="float_left price">{{ $utils.formattedNumber(item.returnUnitPrice) }}</text>
							<text class="float_right">退货量：{{ $utils.formatNub(item.num) }}{{ item.unitName }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label money-label">退货金额</view>
				<view class="value money-value">{{ $utils.formattedNumber(totalMoney) }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单人</view>
				<view class="value">{{ order_detail.operatorName || '无' }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">制单时间</view>
				<view class="value">{{ $u.timeFormat(order_detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
		</view>
		<view class="btn-bottom-view clearfix" v-if="order_detail.auditStatus === 1">
			<view v-if="$accessCheck($Access.ReturnWarehousingOrderDeleteOrderReturn)" class="left-btn" @click="openModel('确定要删除该退货单吗？', '删除')">
				<u-icon
					label-pos="bottom"
					margin-top="10rpx"
					custom-prefix="custom-icon"
					name="quxiaodingdan"
					color="#B8C0C8"
					label="删除"
					label-color="#62738E"
					label-size="20"
					size="40"
				></u-icon>
			</view>
			<view v-if="$accessCheck($Access.ReturnWarehousingOrderUpdateOrderReturn)" class="handel-btn" @click="openModel('确定要审核通过该退货单吗？', '审核')">审核</view>
			<view v-if="$accessCheck($Access.ReturnWarehousingOrder_updateOrderReturn)" class="handel-btn info-btn" @click="goPage(`/pagesT/order/AddReturn?id=${order_id}`)">
				编辑
			</view>
			<view v-if="$accessCheck($Access.ReturnWarehousingOrderUpdateOrderReturn)" class="handel-btn info-btn" @click="cancel_show = true">驳回</view>
		</view>
		<u-popup v-model="cancel_show" mode="bottom">
			<view class="pop-ul">
				<view class="sku-name">请输入驳回退货单原因</view>
				<view class="pop-li"><textarea style="width: 100%;" placeholder-class="input-pl" placeholder="请输入" v-model="cancelReason" /></view>
				<view class="btn" @click="rejectOrderReturn">确定</view>
			</view>
		</u-popup>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm" @cancel="modelCancel"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model_tag: '',
			model_show: false,
			model_content: '',
			order_id: 0,
			order_detail: { details: [] },
			selfRuleData: {},
			updata_istrue: false,
			cancle_istrue: false,
			userCenterId: false,
			cancelReason: '',
			cancel_show: false
		};
	},
	onPullDownRefresh() {
		this.getOrderOut();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		totalMoney() {
			let num = 0;
			this.order_detail.details.forEach(item => {
				num += Number(item.returnTotalPrice);
			});
			return num;
		}
	},
	onLoad(options) {
		this.order_id = options.id;
		this.getOrderOut();
	},
	methods: {
		// 详情
		getOrderOut() {
			this.$u.api
				.getOrderOut(this.order_id)
				.then(res => {
					uni.stopPullDownRefresh();
					this.order_detail = res.data;
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		// 打开提示框
		openModel(content, tag) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
		},
		// 审核
		modelConfirm() {
			switch (this.model_tag) {
				case '审核':
					this.auditOrderOut();
					break;
				case '删除':
					this.deleteOrderOut();
					break;
			}
		},
		modelCancel() {},
		// 退货单驳回
		rejectOrderReturn() {
			this.$u.api
				.rejectOrderReturn({
					id: this.order_detail.id,
					auditFailReason: this.cancelReason
				})
				.then(res => {
					this.$u.toast('驳回成功');
					this.cancel_show = false;
					this.getOrderOut();
				});
		},
		// 退货单删除
		deleteOrderOut() {
			this.$u.api.deleteOrderOut(this.order_detail.id).then(res => {
				this.$u.toast('删除成功');
				uni.navigateBack();
			});
		},
		// 审核订单
		auditOrderOut() {
			this.$u.api
				.auditOrderOut(this.order_detail.id, {
					auditName: this.userInfo.name
				})
				.then(res => {
					this.$u.toast('审核成功');
					this.getOrderOut();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-view {
	padding-bottom: 100rpx;
}
.top-view {
	background-color: $uni-color-primary;
	height: 200rpx;
	padding: 0 30rpx;
	color: #ffffff;
	font-size: 40rpx;
	.desc {
		font-size: 24rpx;
		padding-top: 10rpx;
	}
}
.customer-view {
	width: 710rpx;
	background-color: #ffffff;
	margin: 0 auto;
	border-radius: 20rpx;
	padding: 30rpx;
	transform: translateY(-80rpx);
	box-shadow: 0px 2px 12rpx 0px rgba(76, 80, 88, 0.16);
	.title {
		padding-bottom: 20rpx;
		.float_left {
			font-size: 32rpx;
			font-weight: bold;
			width: calc(100% - 120rpx);
		}
	}
	.delivery-view {
		font-size: 24rpx;
		color: #6c6c6c;
		.name-top {
			margin-bottom: 10rpx;
			.float_left {
				font-size: 28rpx;
				width: calc(100% - 180rpx);
			}
			.mobile {
				color: $uni-color-primary;
			}
		}
	}
	.remark {
		border-top: 1px solid #eeeeee;
		padding-top: 20rpx;
		line-height: 32rpx;
		margin-top: 20rpx;
	}
}
.detail-cont {
	width: 710rpx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx 0;
	overflow: hidden;
	transform: translateY(-50rpx);
	.info-li {
		padding: 0 30rpx;
		line-height: 80rpx;
		.label {
			float: left;
			color: #6c6c6c;
		}
		.value {
			float: right;
		}
		.money-label {
			font-weight: bold;
		}
		.money-value {
			font-weight: bold;
			font-size: 30rpx;
		}
	}
	.b-b {
		border-bottom: 1px solid #eeeeee;
	}
	.goods-title {
		background-color: #5e6a84;
		line-height: 72rpx;
		width: 644rpx;
		margin: 30rpx auto 0;
		color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 0 24rpx;
		position: relative;
		z-index: 1;
	}
	.goods-ul {
		padding: 0 30rpx 30rpx;
		box-shadow: 0px -3px 12rpx 0px #e4eaf5;
		border-bottom: 1px solid #eeeeee;
		.goods-li {
			padding-top: 24rpx;
			.goods-img {
				margin-right: 20rpx;
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 8rpx;
					display: block;
					border: 1px solid #eeeeee;
				}
			}
			.info {
				.goods-name {
					width: 470rpx;
					-webkit-line-clamp: 2;
					height: 68rpx;
					line-height: 34rpx;
				}
				.goods-num {
					padding-top: 10rpx;
					font-size: 24rpx;
					.float_left {
						&.price {
							font-size: 28rpx;
							font-weight: bold;
							color: $uni-color-error;
						}
					}
					.float_right {
					}
				}
			}
		}
	}
}
.btn-bottom-view {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 98rpx;
	background-color: #ffffff;
	padding: 0 38rpx;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px -4rpx 32rpx 0px rgba(156, 170, 175, 0.16);
	.left-btn {
		margin-top: 10rpx;
		float: left;
	}
	.handel-btn {
		margin-left: 30rpx;
		margin-top: 20rpx;
		float: right;
		width: 164rpx;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 32rpx;
		background-color: $uni-color-primary;
		border: 1rpx solid $uni-color-primary;
		color: #ffffff;
		&.info-btn {
			border: 1rpx solid #979797;
			background-color: transparent;
			color: #2d405e;
		}
	}
}
.pop-ul {
	line-height: 90rpx;
	.sku-name {
		font-weight: bold;
		padding: 0 24rpx;
	}

	.pop-li {
		padding: 24rpx;
		border-top: 1px solid #ecf0f7;
	}

	.btn {
		width: 100%;
		text-align: center;
		color: #ffffff;
		line-height: 90rpx;
		background-color: $uni-color-primary;
	}
	.title {
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #ecf0f7;
	}
	.desc {
		font-size: 28rpx;
		line-height: 36rpx;
		padding-bottom: 10rpx;
		padding: 10rpx 20rpx 0;
	}
	.desc-tip {
		font-size: 24rpx;
		line-height: 36rpx;
		padding-bottom: 10rpx;
		padding: 10rpx 20rpx 0;
		color: #879bba;
	}
	.btn-view {
		text-align: center;
		padding: 20rpx 0;
	}
}
</style>