junzitang/pagesT/order/ReturnSales.vue

<template>
	<view class="Return" :class="['qn-page-' + theme]" v-if="goods_data.id">
		<view class="header">
			<view style="margin-left: 30rpx; font-weight: 600;">退款商品</view>
			<view class="content">
				<image :src="goods_data.images[0]" mode="aspectFill"></image>
				<view class="texts">
					<text class="ellipsis goods-name">{{ goods_data.goodsName }}</text>
					<view class="details">
						<text v-if="goods_data.isEq === 5">{{ goods_data.u_1 }};</text>
						<text v-else>{{ goods_data.unitName }};</text>
						<block v-for="(ip, indexSP) in goods_data.specGroup" :key="indexSP">
							<text>{{ ip.specValueName }};</text>
						</block>
					</view>
					<view class="primary-color goods-price">
						<text v-if="goods_data.isEq === 5">{{ goods_data.originPrice }};</text>
						<text v-else>¥{{ goods_data.price }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ReturnMessage">
			<view class="title">退款信息</view>
			<view class="money number-box">
				<view>
					退款数量
					<text class="unit" v-if="goods_data.isEq === 5">/{{ goods_data.u_1 }}</text>
					<text class="unit" v-else>/{{ goods_data.unitName }}</text>
				</view>
				<block v-if="goods_data.returnStatus === 0">
					<u-number-box :positive-integer="false" :max="goods_data.outNumCopy" :min="0" v-model="goods_data.outNum"></u-number-box>
				</block>
				<block v-else>{{ goods_data.outNum }}</block>
			</view>
			<!-- <view class="money number-box">
				<view>
					退款金额
					<text class="unit">/元</text>
				</view>
				<block v-if="order_detail.returnStatus !== 2">
					<u-number-box :positive-integer="false" :max="goods_data.returnPriceCopy" :min="0" v-model="goods_data.returnPrice"></u-number-box>
				</block>
				<block v-else>{{ goods_data.returnPrice }}</block>
			</view>
			<view v-if="order_detail.returnStatus !== 2">
				<text class="Remarks">可修改，最多退款金额¥{{ goods_data.returnPriceCopy }}, 退款数量{{ goods_data.outNumCopy }}{{ goods_data.unitName }}</text>
			</view> -->
		</view>
		<view class="description">
			<view class="title">退款原因</view>
			<view class="news">
				<u-input v-if="goods_data.returnStatus === 0" v-model="add_form.remark" type="textarea" placeholder="请输入描述,有助于商家更好的处理" />
				<u-input v-else disabled v-model="add_form.remark" type="textarea" placeholder="退款原因" />
			</view>
		</view>
		<button v-if="goods_data.returnStatus === 0" class="primary-btn" @click="submit">提交</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			add_form: {},
			order_id: 0,
			goods_id: 0,
			skuId: 0,
			order_detail: {},
			goods_data: {}
		};
	},
	onLoad(options) {
		console.log(options);
		this.order_id = options.orderId;
		this.goods_id = options.goodsId;
		this.skuId = options.skuId;
		this.getOrderInfoById();
	},
	methods: {
		outNumBlur(val) {
			if (this.goods_data.outNum > this.goods_data.outNumCopy) {
				this.goods_data.outNum = this.goods_data.outNumCopy;
			}
		},
		priceBlur(val) {
			if (this.goods_data.returnPrice > this.goods_data.returnPriceCopy) {
				this.goods_data.returnPrice = this.goods_data.returnPriceCopy;
			}
		},
		// 获取订单详情
		getOrderInfoById() {
			this.$u.api.getOrderInfoById(this.order_id).then(({ data }) => {
				this.order_detail = data;
				const goods = data.goodsData.find(item => {
					return item.goodsId === parseInt(this.goods_id) && item.skuId === parseInt(this.skuId);
				});
				const outNum = goods.isEq === 5 ? Number(goods.u_1_buy) : Number(goods.outNum) || Number(goods.buyNum);
				this.goods_data = {
					...goods,
					originNum: goods.outNum,
					outNum: outNum,
					// returnPrice: goods.totalMoney,
					returnPriceCopy: Number(goods.totalMoney),
					outNumCopy: outNum
				};
				this.add_form = {
					originId: data.id,
					originNo: data.no,
					shopId: goods.shopId,
					shopName: goods.shopName,
					operatorName: data.operatorName,
					operatorId: data.operatorId,
					userCenterId: data.userCenterId,
					remark: '',
					customerId: data.customerId,
					customerName: data.customerName
				};
			});
		},
		submit() {
			if (!this.goods_data.outNum) {
				this.$u.toast('退货数量需大于0');
				return;
			}
			if (!this.goods_data.returnPrice) {
				this.$u.toast('退货金额需大于0');
				return;
			}
			const skuName = this.goods_data.specGroup
				.map(itemM => {
					return itemM.specValueName;
				})
				.join('_');
			let num = '';
			if (this.goods_data.isEq === 5) {
				if (this.goods_data.outNum === this.goods_data.u_1_buy) {
					num = this.goods_data.originNum;
				} else {
					num = this.$NP.times(this.goods_data.outNum, this.goods_data.conversion);
				}
			} else {
				num = this.goods_data.outNum;
			}
			let details = [
				{
					goodsBasicId: this.goods_data.goodsBasicId,
					goodsCode: this.goods_data.goodsCode,
					goodsId: this.goods_data.goodsId,
					goodsName: this.goods_data.goodsName,
					id: this.goods_data.id,
					num: num,
					returnTotalPrice: this.$NP.times(num, this.goods_data.returnPrice),
					returnUnitPrice: this.goods_data.returnPrice,
					saleNum: this.goods_data.buyNum,
					saleTotalPrice: this.goods_data.totalMoney,
					saleUnitPrice: this.goods_data.price,
					skuId: this.goods_data.skuId,
					skuName: skuName,
					unitName: this.goods_data.unitName
				}
			];
			this.$u.api
				.addOrderReturn({
					...this.add_form,
					details: details
				})
				.then(res => {
					this.$u.toast('提交成功');
					setTimeout(res => {
						uni.navigateBack();
					}, 2000);
				});
		}
	}
};
</script>

<style scoped lang="scss">
.Return {
	padding: 15rpx;
	.header {
		width: 710rpx;
		padding-top: 16rpx;
		background-color: #ffffff;
		width: 100%;
		height: 250rpx;
		border-radius: 20rpx;
		.content {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;
			image {
				margin-left: 40rpx;
				width: 140rpx;
				height: 140rpx;
				border-radius: 10px;
			}
			.texts {
				padding: 10rpx;
				width: 500rpx;
				height: 140rpx;
				// border: 1rpx solid blue;
				margin-right: 30rpx;
				font-weight: 500rpx;
				.details {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
				}
				.goods-price {
					padding-top: 10rpx;
				}
			}
		}
	}
	.ReturnMessage {
		width: 710rpx;
		margin: 20rpx 0;
		width: 100%;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 30rpx;
		.title {
			padding-bottom: 10rpx;
			font-weight: bold;
		}
		.money {
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			.unit {
				font-size: 24rpx;
				color: #6c6c6c;
			}
		}
		.Remarks {
			font-size: 22rpx;
			color: #999999;
		}
	}
	.description {
		width: 710rpx;
		background-color: #ffffff;
		width: 100%;
		border-radius: 16rpx;
		padding: 30rpx;
		.title {
			padding-bottom: 10rpx;
			font-weight: bold;
		}
		.news {
			font-size: 20rpx;
			margin-top: 10rpx;
			background-color: #f5f9fc;
			height: 150rpx;
			border-radius: 15rpx;
			padding: 15rpx;
		}
	}
	.primary-btn {
		width: 710rpx;
		position: fixed;
		height: 80rpx;
		bottom: 10rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}
}
</style>