167 lines
3.3 KiB
Vue
167 lines
3.3 KiB
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> |