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="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode="aspectFill"/>
				</view>
				<view class="center">
					<view>{{ commodity.title }}</view>
					<view>{{ commodity.smallTitle }}</view>
				</view>
				<view class="right">×{{ commodity.total }}</view>
			</view>


			<!--<commoditySelect ></commoditySelect>-->

			<!-- 申请类型&申请原因 -->
			<view class="item2">
				<view class="type">
					<span>申请类型</span>
					<span>退货退款</span>
				</view>
				<uv-line></uv-line>
				<view class="reason">
					<view>申请原因</view>
					<view>
						<uv-input placeholder="请输入申请原因" border="none" clearable></uv-input>
					</view>
				</view>
			</view>

			<!--  退货数量&申请金额-->
			<view class="item3">
				<view class="type">
					<span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span>
					<span>
						<uv-number-box :min="1" :max="100"></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 disabled placeholder="$" border="none" clearable></uv-input>
					</view>
				</view>
			</view>

			<!-- 申请说明 -->
			<view class="item4">
				<view>申请说明(选填)</view>
				<view>
					<uv-input 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 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: {
					title: '商品名称',
					smallTitle: '产品规格：120*4*75【桌子尺寸】',
					total: 1,
				},
			}
		},
		onShow() {
			console.log("===");
			this.$refs.commoditySelect.getList()
		},
		methods: {

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

			// 选择退换货商品回调
			selectCommodity(e) {
				console.log(e, "selectCommodity--e")
				this.commodity = e
				this.$refs.spPopup.close()
			},

			confirm() {
				console.log("===");
			},
			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;
					}
				}

				.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>