jiuyiUniapp/jiuyi2/pages/index/appeal.vue

<script setup>
	/**
	 * 交易申诉
	 */
	import {
		ref
	} from 'vue';
	// 理由列表
	const reasonList = [{
			name: '发布不正当理由',
		},
		{
			name: '传播色情资源',
		},
		{
			name: '冒充他人',
		},
		{
			name: '涉嫌诈骗',
		},
		{
			name: '侵犯权益',
		}, {
			name: '其他',
		}
	]
	// 显示理由列表
	const reasonShow = ref(false)
	// 选择的理由下标
	const reasonIndex = ref(0)

	/**
	 * 切换下标
	 * @param {Object} index
	 */
	function handleReasonIndex(index) {
		// 关闭选项展示
		reasonShow.value = false
		if (reasonIndex.value === index) return
		reasonIndex.value = index
	}
</script>

<template>
	<view class="app">
		<view class="item oh pr mtb30 mlr30 br20 bFFFBF3">
			<view class="df">
				<!-- 榴莲果 -->
				<view class="fmid ptb20">
					<view class="wh110 mlr20">
						<image src="/static/fruit.png" mode="aspectFit" />
					</view>
				</view>

				<view class="f1 df fdc jcc mlr20 c333 f28">
					<view class="">交易价格：13.61</view>
					<view class="">交易数量：60.00</view>
				</view>

				<view class="label style1">已完成</view>
			</view>

			<view class="fmid mb30">
				<view class="c333 f28">交易哈希：000000000000000000000</view>
				<image class="wh24 ml10" src="/static/copy.png" mode="aspectFit" />
			</view>
		</view>

		<!-- 选择理由 -->
		<view class="select mtb30 mlr30 br20">
			<view class="ptb10 fmid c333 f28" @click="reasonShow = !reasonShow">
				<view>选择理由</view>
				<uni-icons type="right" color="#999" size="28rpx" />
			</view>

			<view class="reasonList" :class="{'active': reasonShow}">
				<view class="item oh df plr60" v-for="(item,index) in reasonList" :key="index" @click="handleReasonIndex(index)">
					<view class="f1 c333 f28">{{item.name}}</view>
					<uni-icons type="right" />
				</view>
			</view>
		</view>

		<!-- 显示其他 -->
		<view class="other mt30 mlr30" v-show="reasonList[reasonIndex].name == '其他'">
			<view class="title c333 f28">其他</view>

			<view class="textarea mt10 ptb20 plr20 br20">
				<textarea placeholder="请输入其他的理由" />
			</view>
		</view>

		<view class="fns mtb30 mlr30">
			<view class="appeal btn mauto cfff">撤销交易</view>

			<view class="rows mtb30">
				<view class="btn disabled f1">联系交易人</view>
				<view class="btn focus f1 ml30">申请客服介入</view>
			</view>

			<view class="mt30 tac">售后进度查询：申请客服介入</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 列表项
	.item {

		.fn {
			.button {
				border-radius: 20rpx 0 0 20rpx;
			}
		}

		// 标签
		.label {
			position: absolute;
			top: 0;
			right: 0;
			width: 120rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			border-radius: 0 20rpx 0 20rpx;

			&.style1 {
				background-image: linear-gradient(180deg, #FFBB35 0%, #FF3C35 100%);
			}

			&.style2 {
				background-image: linear-gradient(116deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
			}
		}
	}

	// 选择
	.select {
		background-color: #F1F1F1;
	}

	// 理由列表
	.reasonList {

		.item {
			height: 0;
			transition: .3s;
		}

		&.active {
			.item {
				height: 80rpx;
			}
		}
	}

	// 多行文本框
	.textarea {
		background-color: #F1F1F1;
	}

	// 撤销
	.appeal {
		width: 452rpx;
		background-color: #717171;
	}
</style>