wxapp/pages/returnGoods/returnGoods.vue

<template>
	<view>
		<view class="box bg-white">
			<view class="text-black" style="margin-bottom: 10rpx;">您选择的商品:</view>
			<view class="goods-box flex">
				<view class="goods-pic bg-img" :style="'background-image: url('+ IMAGE_URL+ returnGoods.mainPhotoUrl+');'"></view>
				<view class="goods-con flex-sub clear flex flex-direction justify-between">
					<view class="flex flex-direction <align-start></align-start>">
						<view class="goods-name two-line text-black">{{returnGoods.goodsName}}</view>
						<view class="des">{{returnGoods.skuName}}</view>
					</view>
					<view class="text-red">￥{{returnGoods.actualAmount}}</view>
				</view>
			</view>
		</view>

		<!-- 仅退款 -->
		<view class="box bg-white" v-if="type==0">
			<view class="">
				<view class="flex justify-between" style="line-height: 40rpx;">
					<view class="text-black">退回瑞币</view>
					<view class="text-red">119.00</view>
				</view>
				<view class="flex justify-between coin">
					<view class="">实付款返还到瑞币账户</view>
					<view class="">瑞币数量可修改，最多119.00</view>
				</view>
			</view>
			<view class="flex reason-con">
				<view class="text-black">退款原因</view>
				<input type="text" class="flex-sub text-right" value="" placeholder="请填写退款原因200字以内" />
			</view>
		</view>

		<!-- 退货退款 -->
		<view class="box bg-white" v-if="type==1">
			<view class="flex justify-between reason-con" style="border-top: 0;" @tap="showModel">
				<view class="text-black">退款原因<text class="text-red">*</text></view>
				<view class="flex">{{checkedReason.content?checkedReason.content:'选择原因'}}<text class="cuIcon-right" style="color: #DDDDDD;"></text></view>
			</view>
			<view class="flex justify-between reason-con" v-if="checkedReason.content=='其他'">
				<view class="text-black">退货原因</view>
				<input type="text" v-model="reasonTxt" class="flex-sub text-right" value="" placeholder="请填写退货原因200字以内" />
			</view>
		</view>

		<!-- 上传凭证 -->
		<view class="box bg-white">
			<view class="text-black" style="padding-bottom: 10rpx;">上传凭证</view>
			<view class="image-box flex flex-wrap">
				<view class="image-item bg-img" v-for="(item,index) in images" :key="index" :style="'background-image: url('+IMAGE_URL+item+');'">
					<text class="cuIcon-roundclosefill" @tap="delImage(index)"></text>
				</view>
				<view v-if="images.length<maxLength" class="flex flex-direction justify-center align-center upload" @tap="chooseImage">
					<text class="cuIcon-pic" style="font-size: 48rpx;"></text>
					<view class="">上传图片</view>
					<view class="">(最多{{maxLength}}张)</view>
				</view>
			</view>
		</view>

		<u-popup v-model="isShow" mode="bottom" border-radius="20">
			<view class="reason-model">
				<view class="item flex justify-between align-center" v-for="(item,index) in reasons" :key="index" @tap="chooseReason(index)">
					<text>{{item.content}}</text>
					<text class="check" :class="currentIndex==index?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray'"></text>
				</view>
			</view>
			<view class="text-center" style="line-height: 100rpx;" @tap="closeModel">确定</view>
		</u-popup>

		<view class="" style="height: 100rpx;"></view>
		<view class="bottom-btn text-white text-center" @tap="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				IMAGE_URL: this.IMAGE_URL,
				isShow: false,
				reasons: [],
				currentIndex: -1,
				checkedReason: {},
				images: [],
				reasonTxt: "",
				type: "",
				maxLength:5
			};
		},
		computed: {
			returnGoods() {
				return this.$store.state.returnGoodsMsg
			}
		},
		onLoad(options) {
			this.type = options.type
			uni.setNavigationBarTitle({
				title: this.type == 0 ? "退款申请" : this.type == 1 ? "退货申请" : ""
			})
			this.getReasons()
		},
		methods: {
			getReasons() {
				this.$u.post('/api/v1/order/get_after_sales/resson').then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					this.reasons = res.data.data
					this.reasons.push({
						id: 0,
						content: "其他"
					})
				});
			},
			showModel() {
				this.isShow = true
			},
			closeModel() {
				this.checkedReason = this.reasons[this.currentIndex]
				this.isShow = false
			},
			chooseReason(i) {
				this.currentIndex = i
			},
			//删除图片
			delImage(i) {
				uni.showModal({
					title: '提示',
					content: '确认要删除该图片吗',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.images.splice(i, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: this.maxLength-this.images.length, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.log(res.tempFilePaths);
						let pics = res.tempFilePaths
						for (let i = 0; i < pics.length; i++) {
							this.uploadPic(pics[i])
						}
					}
				});
			},
			uploadPic(url) {
				uni.uploadFile({
					url: this.BASE_URL + '/api/v1/files/photo/upload',
					filePath: url,
					name: 'photo',
					success: (res) => {
						let result = JSON.parse(res.data)
						console.log(result)
						if (result.code == "SUCCESS") {
							console.log(result.data.data.url)
							if (this.images.length < this.maxLength) {
								this.images.push(result.data.data.url)
							} else {
								this.$u.toast("最多上传"+this.maxLength+"张图片");
							}
						}
					}
				});
			},
			submit() {
				console.log(this.type)
				if (this.type==1&&!this.checkedReason) {
					this.$u.toast("请选择退款原因");
					return
				}
				if (this.images.length == 0) {
					this.$u.toast("请上传凭证");
					return
				}
				let sendData = {
					orderGoodsIds: [this.returnGoods.goodsDetailId],
					reasonContent: this.reasonTxt,
					reasonImg: this.images.join(",")
				}
				if(this.checkedReason.id){
					sendData.reasonId = this.checkedReason.id
				}
				this.$u.post('/api/v1/order/return', sendData).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					uni.navigateTo({
						url: "/pages/afterSaleDetail/afterSaleDetail?orderGoodsId="+this.returnGoods.goodsDetailId
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.box {
		border-radius: 10rpx;
		margin: 30rpx;
		padding: 25rpx;

		.goods-pic {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.des {
			background-color: #F1F1F1;
			line-height: 40rpx;
			border-radius: 8rpx;
			padding: 0 15rpx;
			color: #AAAAAA;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.coin {
			font-size: 24rpx;
			color: #AAAAAA;
			padding: 10rpx 0 15rpx;

		}

		.reason-con {
			line-height: 80rpx;
			border-top: 1rpx solid #f1f1f1;

			input {
				margin-left: 50rpx;
				height: 80rpx;
			}
		}

		.image-box {
			&>view {
				width: 145rpx;
				height: 145rpx;
				border-radius: 10rpx;
				margin: 10rpx 0;
				margin-right: 20rpx;
				font-size: 20rpx;
				color: #AAAAAA;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}

			.upload {
				border: 1rpx solid #DDDDDD;
				box-sizing: border-box;
			}

			.image-item {
				position: relative;

				.cuIcon-roundclosefill {
					font-size: 32rpx;
					position: absolute;
					right: 5rpx;
					top: 5rpx;
					color: rgba(0, 0, 0, 0.6);
				}
			}
		}

	}

	.reason-model {
		padding: 30rpx;

		.item {
			line-height: 80rpx;
			border-bottom: 1rpx solid #F1F1F1;
		}

		.check {
			font-size: 34rpx;
		}
	}

	.bottom-btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		line-height: 100rpx;
		background-color: #C92219;
	}
</style>