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.
256 lines
6.5 KiB
256 lines
6.5 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">您的反馈：{{ typeList[item.type - 1] }}</view>
|
|
<text :class="{ 'ing': !item.answer }">{{ item.answer ? '已完成' : '受理中' }}</text>
|
|
</view>
|
|
<view class="top-suggest">
|
|
<view class="suggest" :class="{'suggest-mask': !item.openSuggest }">
|
|
{{ item.suggest }}
|
|
<view v-if="!item.openSuggest && item.showSuggestBtn" class="mask"></view>
|
|
</view>
|
|
<view v-if="item.showSuggestBtn" 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.answer" class="f-bottom">
|
|
<view class="title">
|
|
处理结果
|
|
<view v-if="item.showResultBtn" 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.deal_time }}</view>
|
|
</view>
|
|
<view class="result">
|
|
<view class="result-label">回复内容：</view>
|
|
<view class="result-content" :class="{'result-mask': !item.openResult }">
|
|
{{ item.answer }}
|
|
<view v-if="!item.openResult && item.showResultBtn" 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>
|
|
<addShuiyin />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as Api from '@/api/feedback/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
typeList: [
|
|
'功能异常：系统功能异常或不可用',
|
|
'系统建议：用的不爽，我有建议',
|
|
'功能新增：我想用的功能，希望能开发新增',
|
|
'服务建议：服务商服务不到位，我有建议',
|
|
],
|
|
list: [],
|
|
loading: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getMyFeedback();
|
|
},
|
|
methods: {
|
|
async getMyFeedback() {
|
|
if (this.loading) {
|
|
return;
|
|
}
|
|
this.loading = true;
|
|
Api.getMyFeedback({})
|
|
.then(result => {
|
|
console.log(result);
|
|
const data = result.data.data;
|
|
this.list = [...data]
|
|
// this.list = this.list.concat(data);
|
|
for (const item of this.list) {
|
|
item.openSuggest = false;
|
|
item.openResult = false;
|
|
item.showSuggestBtn = this.calcContentWidth(item.suggest);
|
|
item.showResultBtn = this.calcContentWidth(item.answer);
|
|
}
|
|
})
|
|
.finally(() => this.loading = false)
|
|
},
|
|
calcContentWidth(cont) {
|
|
if (cont) {
|
|
let len = 0;
|
|
let spliti = 0;
|
|
for (var i = 0; i < cont.length; i++) {
|
|
if (cont.charCodeAt(i) > 255 || cont.charCodeAt(i<0)) {
|
|
len += 17;
|
|
} else {
|
|
len += 10;
|
|
}
|
|
}
|
|
return len > 816;
|
|
}
|
|
return 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;
|
|
justify-content: space-between;
|
|
.type-info {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
width: calc(100% - 130rpx);
|
|
}
|
|
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;
|
|
width: 100%;
|
|
}
|
|
.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> |