You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
6.4 KiB
226 lines
6.4 KiB
<template>
|
|
<view class="container">
|
|
<view v-if="list && list.length > 0" class="f-list">
|
|
<view v-for="(item, index) in list" :key="index" class="f-item">
|
|
<view class="f-top">
|
|
<view class="top-type">
|
|
<view class="type-info">您的反馈：{{ item.type }}</view>
|
|
<text :class="{ 'ing': item.status !== 1 }">{{ item.status === 1 ? '已完成' : '受理中' }}</text>
|
|
</view>
|
|
<view class="top-suggest">
|
|
<view class="suggest" :class="{'suggest-mask': !item.openSuggest }">
|
|
{{ item.suggest }}
|
|
<view v-if="!item.openSuggest" class="mask"></view>
|
|
</view>
|
|
<view class="btn" @click="item.openSuggest = !item.openSuggest">
|
|
{{ item.openSuggest ? '收起' : '展开' }}
|
|
<image src="/static/arrow-right.png" mode="aspectFill" :style="{ transform: `rotate(${item.openSuggest ? '-90deg': '90deg'})`}"></image>
|
|
</view>
|
|
</view>
|
|
<view class="time">{{ item.create_time }}</view>
|
|
</view>
|
|
<view v-if="item.status === 1" class="f-bottom">
|
|
<view class="title">
|
|
处理结果
|
|
<view class="btn" @click="item.openResult = !item.openResult">
|
|
{{ item.openResult ? '收起' : '展开' }}
|
|
<image src="/static/arrow-right.png" mode="aspectFill" :style="{ transform: `rotate(${item.openResult ? '-90deg': '90deg'})`}"></image>
|
|
</view>
|
|
</view>
|
|
<view class="result" style="margin-bottom: 30rpx;">
|
|
<view class="result-label">处理时间：</view>
|
|
<view class="result-content" style="color: #333;">{{ item.solveTime }}</view>
|
|
</view>
|
|
<view class="result">
|
|
<view class="result-label">回复内容：</view>
|
|
<view class="result-content" :class="{'result-mask': !item.openResult }">
|
|
{{ item.solveResult }}
|
|
<view v-if="!item.openResult" class="mask"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="list && list.length === 0" class="none">
|
|
<image :src="$picUrl+'/static/f-none.png'" mode="aspectFill"></image>
|
|
<view class="none-tip">还没有反馈内容哦~</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
type: '系统功能异常或不可用',
|
|
suggest: '点击退款按钮，系统一直转圈，没有反应，请尽快修复解决，另外，系统上能否对接更多好资源。有时候系统打开会显示一直在加载中，不知道是什么原因有时候又没有这个情况。',
|
|
create_time: '2024-04-01 20:22:31',
|
|
status: 0,
|
|
solveTime: '2024-04-01 20:22:31',
|
|
solveResult: '您好，您反馈的系统问题，我们已经修复，请您删除下小程序，再重新搜索进入小程序即可。供应链系统资源我们-直都在努力对接中，感谢您',
|
|
openSuggest: false,
|
|
openResult: false,
|
|
},
|
|
{
|
|
type: '系统功能异常或不可用系统功能异常或不可用系统功能异常或不可用',
|
|
suggest: '点击退款按钮，系统一直转圈，没有反应，请尽快修复解决，另外，系统上能否对接更多好资源。有时候系统打开会显示一直在加载中，不知道是什么原因有时候又没有这个情况。',
|
|
create_time: '2024-04-01 20:22:31',
|
|
status: 1,
|
|
solveTime: '2024-04-01 20:22:31',
|
|
solveResult: '您好，您反馈的系统问题，我们已经修复，请您删除下小程序，再重新搜索进入小程序即可。供应链系统资源我们-直都在努力对接中，感谢您',
|
|
openSuggest: false,
|
|
openResult: false,
|
|
}
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 20rpx 24rpx;
|
|
.f-list {
|
|
.f-item {
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
background: #fff;
|
|
.f-top {
|
|
.top-type {
|
|
display: flex;
|
|
margin-bottom: 27rpx;
|
|
.type-info {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
width: calc(100% - 130rpx);
|
|
}
|
|
uni-text {
|
|
width: 90rpx;
|
|
height: 40rpx;
|
|
background: #EFFBF7;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #52BC8C;
|
|
margin-left: 40rpx;
|
|
&.ing {
|
|
color: #fff;
|
|
background: #FB6569;
|
|
}
|
|
}
|
|
}
|
|
.top-suggest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.suggest {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 32rpx;
|
|
position: relative;
|
|
&.suggest-mask {
|
|
height: 64rpx;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, transparent 0 , rgba(255, 255, 255, 0.8) 100%);
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
margin-top: 30rpx;
|
|
>image {
|
|
width: 11rpx;
|
|
height: 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.time {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
.f-bottom {
|
|
border-top: 1px solid #EAEAEA;
|
|
padding-top: 30rpx;
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
.btn {
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
margin-left: auto;
|
|
>image {
|
|
width: 11rpx;
|
|
height: 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.result {
|
|
display: flex;
|
|
font-size: 26rpx;
|
|
.result-label {
|
|
flex-shrink: 0;
|
|
color: #999999;
|
|
}
|
|
.result-content {
|
|
flex: 1;
|
|
color: #666666;
|
|
position: relative;
|
|
&.result-mask {
|
|
height: 64rpx;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, transparent 0 , rgba(255, 255, 255, 0.8) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.none {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 152rpx;
|
|
>image {
|
|
width: 400rpx;
|
|
height: 348rpx;
|
|
}
|
|
.none-tip {
|
|
color: #222222;
|
|
font-size: 30rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |