jhlapp/pagesT/order/AddReturn.vue

<template>
	<view class="detail-view">
		<u-form label-width="140" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="选择订单" prop="originNo">
					<u-input @click="goPage('/pagesT/order/selOrder')" class="dis-input" disabled v-model="add_form.originNo" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item v-if="add_form.originNo" label="退货商铺"><u-input class="dis-input" disabled v-model="add_form.shopName" placeholder="请选择" /></u-form-item>
				<u-form-item required label="商品清单" label-position="top">
					<view class="goods-view">
						<view class="desc">
							共{{ goods_list.length }}种商品，{{ numTotal }}个
							<!-- <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon> -->
						</view>
						<block v-for="(item, index) in goods_list" :key="index">
							<image v-if="index <= 4" :src="item.images ? item.images[0] : '../../static/img/goods.png'" mode="aspectFill"></image>
						</block>
						<view class="more-goods" @click="openSelect('sel_pop')"><u-icon name="more-dot-fill" size="36" color="#6c6c6c"></u-icon></view>
					</view>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="订单备注" label-position="top"><u-input type="textarea" v-model="add_form.remark" /></u-form-item>
			</view>
		</u-form>
		<u-popup v-model="sel_pop" mode="bottom">
			<view class="sel-goods-pop">
				<view class="pop-tit clearfix">
					<view class="float_left">本次已选商品</view>
					<!-- <view class="float_right" @click="clearGoods">
						<text class="custom-icon custom-icon-shanchu"></text>
						<text>清空</text>
					</view> -->
				</view>
				<scroll-view class="goods-ul" scroll-y>
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
						<view class="goods-name">{{ item.goodsName }}</view>
						<view class="goods-code clearfix">
							<view class="float_left">{{ item.goodsCode }}</view>
							<view class="float_right">
								<view style="width:200rpx;display: inline-block;border: 1px solid #eeeeee; vertical-align: middle;border-radius: 8rpx;text-align: right;padding: 0 10rpx;">
									<input style="height: 40rpx;line-height: 40rpx;" type="digit" v-model="item.returnUnitPrice" />
								</view>
								元/{{ item.unitName }}
							</view>
						</view>
						<view class="goods-code clearfix">
							<view class="float_left">
								{{ item.unitName }};
								<text v-for="(sku, skuI) in sku.specGroup" :key="skuI">{{ sku.specValueName }};</text>
							</view>
							<view class="float_right"><u-number-box :min="0" :index="index" :value="item.num"></u-number-box></view>
						</view>
						<text class="custom-icon custom-icon-shanchu" @click="delGoods(index, item)"></text>
					</view>
					<view style="padding-top: 100rpx;" v-if="!goods_list.length"><u-empty text="未选择商品" mode="data"></u-empty></view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="detail-bottom"><view class="handel-btn" @click="submit">提交订单</view></view>
		<u-modal :show-cancel-button="true" @confirm="topConfirm" v-model="tip_show" :content="tip_content"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderout_id: '',
			sel_pop: false,
			tip_show: false,
			tip_content: '',
			goods_list: [],
			delete_array: [],
			orderData: '',
			add_form: {
				originId: '', //销售订单id
				originNo: '', //销售订单no
				shopId: '',
				shopName: '',
				operatorName: '', //制单人
				remark: '', //备注
				details: []
			},
			rules: {
				originNo: [
					{
						required: true,
						message: '请选择订单',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'change'
					}
				]
			}
		};
	},
	watch: {
		orderData(val) {
			if (val) {
				const allowReturn = val.allowReturn;
				const allowReturnDay = val.allowReturnDay;
				if (allowReturn === 4) {
					this.tip_content = `已经超过${allowReturnDay}天,建议不能退货, 是否确定强制退货?`;
					this.tip_show = true;
					return;
				}
				this.getOrderInfoById(val.userCenterId, val.id);
			}
		}
	},
	computed: {
		userName() {
			return this.$store.state.userInfo.name;
		},
		numTotal() {
			if (!this.goods_list.length) {
				return 0;
			} else if (this.goods_list.length === 1) {
				return Number(this.goods_list[0].num);
			} else {
				let sum = 0;
				this.goods_list.forEach(item => {
					sum = sum + Number(item.num);
				});
				return sum;
			}
		}
	},

	onLoad(options) {
		if (options.id) {
			this.orderout_id = options.id;
			uni.setNavigationBarTitle({
				title: '编辑退货单'
			});
			this.getOrderOut();
		}
	},
	methods: {
		openSelect(key) {
			this[key] = true;
		},
		topConfirm() {
			this.$u.toast('您已确定强制退货!');
			this.getOrderInfoById(val.userCenterId, val.id);
		},
		//  退货单详情接口
		async getOrderOut() {
			this.$u.api.getOrderOut(this.orderout_id).then(res => {
				this.add_form = {
					originId: res.data.originId, //销售订单id
					originNo: res.data.no, //销售订单no
					shopId: res.data.shopId,
					shopName: res.data.shopName,
					operatorName: res.data.operatorName, //制单人
					remark: res.data.remark, //备注
					details: []
				};
				this.goods_list = res.data.details.map(item => {
					return {
						...item,
						saleNum: item.extend.saleNum
					};
				});
			});
		},
		// 获取订单详情
		getOrderInfoById() {
			this.$u.api
				.getOrderInfoById(this.orderData.userCenterId, {
					orderId: this.orderData.id
				})
				.then(res => {
					this.orderSelResult(res.data);
				});
		},
		submit() {
			const details = this.goods_list.map(item => {
				const skuName = this.orderout_id
					? item.skuName
					: item.specGroup
							.map(itemM => {
								return itemM.specValueName;
							})
							.join('_');
				return {
					id: item.id,
					goodsId: item.goodsId,
					goodsCode: item.goodsCode,
					goodsName: item.goodsName,
					goodsBasicId: item.goodsBasicId,
					skuId: item.skuId,
					skuName: skuName,
					unitName: item.unitName,
					num: item.num,
					saleNum: item.saleNum,
					saleUnitPrice: item.saleUnitPrice, // 销售单价
					returnUnitPrice: item.returnUnitPrice, // 退货单价
					returnTotalPrice: item.returnUnitPrice * item.num, // 退货总价
					saleTotalPrice: item.saleUnitPrice * item.saleNum // 销售总价
				};
			});
			const params = {
				...this.add_form,
				deleteArray: this.delete_array,
				operatorName: this.userName,
				details: details
			};
			this.$refs.uForm.validate(valid => {
				if (!details.length) {
					this.$u.toast('无退货商品');
					return;
				}
				if (valid) {
					if (this.orderout_id) {
						this.$u.api.updateOrderReturn(this.orderout_id, params).then(res => {
							this.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						});
					} else {
						this.$u.api.addOrderOut(params).then(res => {
							this.$u.toast('操作成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						});
					}
				}
			});
		},
		delGoods(index, row) {
			if (this.goods_list.length === 1) {
				this.$u.toast('至少保留一条');
				return;
			}
			if (this.delete_array.indexOf(row.id) === -1) {
				this.delete_array.push(row.id);
			}
			this.goods_list.splice(index, 1);
		},
		orderSelResult(row) {
			this.add_form.originId = row.id;
			this.add_form.originNo = row.no;
			this.userCenterId = row.userCenterId;
			// 订单状态 orderStatus
			this.orderStatus = row.orderStatus;
			this.add_form.shopId = row.shopId;
			this.add_form.shopName = row.shopName;
			this.goods_list = row.goodsData.map(item => {
				return {
					images: item.images,
					id: item.id,
					goodsId: item.goodsId,
					goodsName: item.goodsName,
					goodsCode: item.goodsCode,
					goodsBasicId: item.goodsBasicId,
					skuId: item.skuId,
					unitName: item.unitName,
					specGroup: item.specGroup,
					num: item.buyNum,
					saleNum: item.buyNum,
					saleUnitPrice: item.price, // 销售单价
					returnUnitPrice: item.returnPrice, // 退货单价
					returnTotalPrice: item.price * item.buyNum, // 退货总价
					saleTotalPrice: item.price * item.buyNum // 销售总价
				};
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss" scoped>
.form-model-view {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	padding: 0 20rpx;
	text-align: right;
	.goods-view {
		text-align: left;
		position: relative;
		.desc {
			font-size: 24rpx;
			color: #6c6c6c;
			position: absolute;
			right: 0;
			top: -80rpx;
		}
		image {
			width: 102rpx;
			height: 102rpx;
			border-radius: 8rpx;
			margin: 0 6rpx;
			vertical-align: middle;
		}
		.more-goods {
			width: 102rpx;
			height: 102rpx;
			border-radius: 8rpx;
			margin: 0 6rpx;
			display: inline-block;
			background-color: #eeeeee;
			line-height: 102rpx;
			text-align: center;
			vertical-align: middle;
		}
	}
	.sel-goods-view {
		text-align: center;
		display: flex;
		.sel-li {
			line-height: 32rpx;
			flex: 2;
			.icon {
				margin-bottom: 16rpx;
				.custom-icon {
					font-size: 46rpx;
					color: $uni-color-primary;
				}
			}
		}
	}
}
.sel-goods-pop {
	padding-bottom: 1px;
	.pop-tit {
		line-height: 70rpx;
		background-color: #f5f5f5;
		padding: 0 24rpx;
		.float_right {
			font-size: 24rpx;
			color: #666666;
			.custom-icon-shanchu {
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
	.goods-ul {
		min-height: 400rpx;
		max-height: 600rpx;
		.goods-li {
			padding: 24rpx;
			position: relative;
			border-bottom: 1px solid #f5f5f5;
			.goods-name {
				width: 660rpx;
			}
			.goods-code {
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.custom-icon-shanchu {
				position: absolute;
				right: 24rpx;
				top: 24rpx;
				width: 40rpx;
				height: 40rpx;
				color: $uni-color-error;
			}
		}
	}
	.btn-view {
		width: 680rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		background-color: $uni-color-primary;
		color: #ffffff;
		text-align: center;
		margin: 20rpx auto;
	}
}
</style>