jiuyiUniapp/jiuyi2/pages/shop/order/refundStar.vue

<script setup>
	// 发起售后

	import {
		reactive,
		ref
	} from 'vue';
	// 物流信息
	import logistics from '@/components/shop/order/logistics';

	// 当前模式 select选择 form表单
	const mode = ref('select')
	// 类型列表
	const typeList = reactive([{
			name: '我要退款(无需退货)',
			text: '未收到货，活鱼商家协商之后申请',
		},
		{
			name: '已收到货，我要退货退款',
			text: '已收到货，需要退还已收到的货物',
		},
	])
	// 退款列表
	const typeIndex = ref('')
	// 申请原因列表
	const reasonList = reactive([{
		name: '不想要了',
	}, {
		name: '买错了',
	}])
	// 申请原因下标
	const reasonIndex = ref('')

	/**
	 * 选择售后
	 * @param {Object} index 选择的下标
	 */
	function handleType(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
		mode.value = 'form'
		uni.setNavigationBarTitle({
			title: '申请售后',
		})
	}
</script>

<template>
	<view class="app">
		<template v-if="mode === 'select'">
			<view class="detail">
				<logistics />
			</view>

			<!-- 列表类型 -->
			<view class="typeList plr20">
				<view class="list rows mtb30 ptb30 plr20 bfff br10" v-for="(item,index) in typeList" :key="index"
					@click="handleType(index)">
					<image class="wh45" src="/static/shop-sales.png" mode="aspectFit" />
					<view class="col f1 ml30">
						<view class="c333 f32">{{item.name}}</view>
						<view class="txt mt10 c999 f28">{{item.text}}</view>
					</view>
				</view>
			</view>
		</template>

		<template v-else-if="mode === 'form'">
			<!-- 商品信息 -->
			<view class="product df ptb20 plr20 bfff">
				<view class="poster wh160">
					<image class="wh160 br10"
						src="https://img13.360buyimg.com/n1/jfs/t1/117234/35/34799/82687/6449f2b4Fd6e2eef9/a754c5e178c9e9be.jpg.avif"
						mode="aspectFill" />
				</view>

				<!-- 产品名称 和 购买的规格 -->
				<view class="info mlr20 f1">
					<view class="name c333 f28">靠枕 纯棉靠枕 车载居家 纯棉100% 卡通靠枕 人体工学</view>
					<view class="spec mt10 c999 f26">款式：普通款 小熊</view>
				</view>

				<!-- 单价 数量 -->
				<view class="tar">
					<view class="price c666">
						<text class="f20">￥</text>
						<text class="f26">89</text>
					</view>
					<view class="number f24 c999">x 1</view>
				</view>
			</view>

			<!-- 申请信息 -->
			<view class="apply container">
				<view class="line ptb20">
					<picker :range="typeList" :value="typeIndex" range-key="name" @change="handleType">
						<view class="rows">
							<view class="key">申请类型</view>
							<view class="value f1 mlr20">{{typeList[typeIndex].name}}</view>
							<uni-icons type="right" color="#999" />
						</view>
					</picker>
				</view>

				<view class="line ptb20">
					<picker :range="reasonList" range-key="name" @change="handleType">
						<view class="rows">
							<view class="key">申请原因</view>
							<view class="value f1 mlr20">
								<text v-if="reasonIndex !== ''">{{reasonList[reasonIndex].name}}</text>
								<text v-else class="placeholderStyle">点击选择申请原因</text>
							</view>
							<uni-icons type="right" color="#999" />
						</view>
					</picker>
				</view>
			</view>

			<!-- 申请金额 -->
			<view class="price container ptb30">
				<view class="title f30">申请金额</view>
				<view class="value df mt10 c333 f60">
					<text>￥</text>
					<input type="text" class="input f1 c333 f60" :value="89" />
				</view>
			</view>

			<!-- 申请说明 -->
			<view class="form container">
				<view class="title mtb20 f30">申请说明</view>
				<textarea type="text" class="input mtb20 c333 f30" placeholder="必填,请您详细填写申请说明"
					placeholder-class="placeholderStyle" auto-height="true" />

				<view class="imgList df fww">
					<view class="imgs upload wh140">
						<image class="wh140" src="/static/shop-upload-image.png" mode="aspectFill" />
					</view>
				</view>
			</view>

			<view class="other container">
				<view class="line df mtb30">
					<view class="key w200">联系电话</view>
					<view class="value f1">13979897890</view>
				</view>
			</view>

			<view class="fill" style="height: 120rpx;"></view>

			<view class="footer plr30 bfff shadow">
				<view class="btn lg primary">提交申请</view>
			</view>
		</template>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		margin: 20rpx 0;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333;
		font-size: 32rpx;
		background-color: #fff;
	}

	// 
	.apply {
		.line+.line {
			border-top: 2rpx solid #eee;
		}
	}
</style>