hotel-tablecloth-uniapp-24-08-29/pages_order/order/refundsOrExchange.vue

<template>
	<view class="refundsOrExchange">
		<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">

			<!-- 商品简介 -->
			<view class="itme1" @click="openSpPopup">
				<view class="left">
					<image :src="commodity.goodsPic" mode="aspectFill" />
				</view>
				<view class="center">
					<view>{{ commodity.goodsName }}</view>
					<view>商品规格:{{ commodity.sku }}</view>
					<view>下单时间:{{ commodity.startTime }}</view>
				</view>
				<view class="right">×{{ commodity.num }}</view>
			</view>
			<!-- 暂未选择商品的时候 -->
			<!-- <view v-else style="height: 200rpx;;display: flex;justify-content: center;align-items: center;font-size: 36px;">
				请选择商品...
			</view> -->

			<!-- 申请类型&申请原因 -->
			<view class="item2">
				<view class="type">
					<span>申请类型</span>
					<span>{{ titleIndex == 0?'退货退款':'换货'}}</span>
				</view>
				<uv-line></uv-line>
				<view class="reason">
					<view>申请原因</view>
					<view>
						<uv-input v-model="form.reason" placeholder="请输入申请原因" border="none" clearable></uv-input>
					</view>
				</view>
			</view>

			<!--  退货数量&申请金额-->
			<view class="item3">
				<view class="type">
					<span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span>
					<span>
						<uv-number-box v-model="form.refundNum" :min="1" :max="commodity.num"></uv-number-box>
					</span>
				</view>
				<uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
				<view class="reason" v-if='titleIndex == 0 ? true :false'>
					<view>申请金额</view>
					<view>
						<uv-input v-model="form.reasonPrice" disabled  border="none" clearable></uv-input>
					</view>
				</view>
			</view>

			<!-- 申请说明 -->
			<view class="item4">
				<view>申请说明(选填)</view>
				<view>
					<uv-input v-model="form.reasonInfo" placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
				</view>
				<view>
					<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
						@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
				</view>
			</view>


			<!-- 联系电话 -->
			<view class="item5">
				<view class="phone">
					<view>联系电话</view>
					<view>
						<uv-input v-model="form.phone" placeholder="请输入联系电话" border="none" clearable></uv-input>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
			:fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
			:height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius' :bottom='bottomBtnStyle.bottom'>
		</bottomBtn>

		<!--商品选择-->
		<uv-popup ref="spPopup" :round="30">
			<commoditySelect height="60vh" @selectSp="selectCommodity" ref="commoditySelect" />
		</uv-popup>

	</view>
</template>

<script>
	import bottomBtn from "../../components/bottom/bottomBtn.vue"
	import commoditySelect from "../components/commodity/commoditySelect.vue"

	export default {
		onLoad(option) {
			this.titleIndex = option.index
		},
		components: {
			bottomBtn,
			commoditySelect
		},
		data() {
			return {
				titleIndex: 0,
				title: ['申请退货', '申请换货'],
				fileList: [],
				bottomBtnStyle: {
					color: '#FFF',
					backgroundColor: '#fd5100',
					fontSize: '34rpx',
					text: '提交申请',
					width: '400rpx',
					height: '80rpx',
					borderRadius: '100rpx',
					bottom: '40rpx'
				},
				commodity: {
					goodsName: '',
					sku: '',
					num: 0,
					startTime: '',
					goodsPic: '',
				},
				form: {
					id: "",
					phone: "",
					reason: "",
					reasonInfo: "",
					reasonPic: "",
					reasonPrice: "",
					refundNum: "",
					type: '', //0退货 1换货
				},
			}
		},
		onShow() {
			this.$refs.commoditySelect.getList()
		},
		methods: {

			openSpPopup() {
				this.$refs.spPopup.open('bottom');
			},

			// 选择退换货商品回调
			selectCommodity(e) {
				console.log(e, "selectCommodity--e")
				console.log(e.id, 'e.id');
				this.form.id = e.id //设置租赁ID
				this.form.reasonPrice = e.price //设置退款金额(押金)
				this.form.refundNum = e.num //设置数量
				this.commodity = e
				this.$refs.spPopup.close()
			},

			//确认退换货
			confirm() {
				this.form.type = this.titleIndex
				this.form.reasonPic = this.fileList.map(item=>item.url).join(",")
				console.log(this.form, "form");
				 
				this.$api('refundOrder', this.form, res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "success",
							title: "申请成功"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/center'
							})
						}, 3000)
					}
				})
			},
			deleteImage(e) {
				this.fileList.splice(e.index, 1)
			},
			afterRead(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.refundsOrExchange {
		.frame {

			display: flex;
			flex-direction: column;
			gap: 30rpx;
			// width: 100%;
			padding: 40rpx 40rpx 0 40rpx;
			background-color: #f5f5f5;


			.itme1 {
				display: flex;
				height: 200rpx;
				background-color: #ffffff;

				.left {
					padding: 20rpx;
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
					background-color: #ffffff;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.center {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 20rpx;
					width: 60%;
					padding: 0rpx 0 0 20rpx;
					background-color: #ffffff;

					// 给第一个 view 设置样式
					>view:first-of-type {
						font-size: 36rpx;
						color: #333;
					}

					// 给第二个 view 设置样式
					>view:nth-of-type(2) {
						font-size: 28rpx;
						color: #666666;
					}

					// 给第三个 view 设置样式
					>view:nth-of-type(3) {
						font-size: 28rpx;
						color: #666666;
					}
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 10%;
					color: #666666;
					background-color: #ffffff;
				}
			}

			.item2 {
				// width: 100vw;

				.type {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					padding: 0 0 0 20rpx;

					>span:nth-of-type(1) {
						width: 30%;
					}

					>span:nth-of-type(2) {
						width: 70%;
					}
				}

				.reason {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					// margin: 10rpx 0 0 0;
					padding: 10rpx 0 0 20rpx;

					>view:nth-of-type(1) {
						width: 30%;
					}

					>view:nth-of-type(2) {
						width: 70%;
						padding: 0 20rpx 0 0;
					}
				}
			}

			.item3 {
				// width: 100vw;

				.type {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					padding: 0 0 0 20rpx;

					>span:nth-of-type(1) {
						width: 70%;
					}

					>span:nth-of-type(2) {
						width: 30%;
					}
				}

				.reason {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					// margin: 10rpx 0 0 0;
					padding: 10rpx 0 0 20rpx;

					>view:nth-of-type(1) {
						width: 30%;
					}

					>view:nth-of-type(2) {
						width: 70%;
						padding: 0 20rpx 0 0;
					}
				}
			}

			.item4 {
				display: flex;
				flex-direction: column;
				padding: 10rpx 0 0 20rpx;
				background-color: #FFF;

				>view:nth-of-type(1) {
					background-color: #FFF;
				}

				>view:nth-of-type(2) {
					margin: 10rpx 0 10rpx 0;
					background-color: #FFF;

				}
			}

			.item5 {
				display: flex;
				flex-direction: column;
				padding: 0 0 0 20rpx;
				background-color: #FFF;

				.phone {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					// margin: 10rpx 0 0 0;
					padding: 10rpx 0 0 20rpx;

					>view:nth-of-type(1) {
						width: 30%;
					}

					>view:nth-of-type(2) {
						width: 70%;
						padding: 0 20rpx 0 0;
					}
				}
			}
		}
	}
</style>