<template>
|
<view class="page-wrapper">
|
<div class="bg-top"></div>
|
|
<div class="content-wrapper">
|
|
<!-- 页面标题 -->
|
<view class="text-2xl font-bold mb-4 text-center">我的投诉建议</view>
|
|
<!-- 投诉列表 -->
|
<view class="space-y-6 relative">
|
<view v-for="(item, index) in complaints" :key="index"
|
class="relative bg-white rounded-xl shadow-md p-4 pt-6 mt-10">
|
<!-- 编号圆形 -->
|
<view
|
class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 text-white text-center leading-8 rounded-full font-semibold shadow">
|
{{ index + 1 }}
|
</view>
|
|
<!-- 时间 -->
|
<view class="text-sm text-gray-500 mb-1">{{ item.time }}</view>
|
|
<!-- 用户提交内容 -->
|
<view class="text-base leading-snug mt-2">
|
投诉建议：
|
<text class="text-color-question">
|
{{ item.content }}
|
</text>
|
</view>
|
|
|
<!-- 后台回复 -->
|
<view class="text-base leading-snug mt-2">
|
处理状态：
|
<text :class="
|
item.status === '未处理' ? 'text-color-status-0' :
|
item.status === '处理中' ? 'text-color-status-1' :
|
item.status === '已处理' ? 'text-color-status-2' : ''
|
">
|
{{ item.status || '暂未回复' }}
|
</text>
|
</view>
|
|
<view class="text-base text-gray-600 mt-2">
|
回复：
|
<text :class="
|
item.status === '未处理' ? 'text-color-status-0' :
|
item.status === '处理中' ? 'text-color-status-1' :
|
item.status === '已处理' ? 'text-color-status-2' : ''
|
">
|
{{ item.reply ? item.reply : '暂未回复' }}
|
</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 提示为空 -->
|
<view v-if="complaints.length === 0" class="text-center text-color-reply-none mt-10">
|
还没有提交任何投诉或建议
|
</view>
|
</div>
|
<div class="bg-bottom"></div>
|
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
ref,
|
onMounted
|
} from 'vue'
|
import {
|
apiService
|
} from '@/apiservice/apiService'
|
import {
|
useUserStore
|
} from '@/stores/user'
|
|
const userStore = useUserStore()
|
const complaints = ref([])
|
|
async function fetchComplaints() {
|
const uuid = userStore.uuid
|
if (!uuid) return
|
|
try {
|
console.log(uuid)
|
const res = await apiService.advicesListByUuid(uuid)
|
if (res.code === 1000 && Array.isArray(res.data)) {
|
// 转换成前端需要的格式
|
console.log(res.data)
|
complaints.value = res.data.map(item => ({
|
time: item.createTime || '',
|
content: item.question || '',
|
reply: item.replytext || '',
|
status: item.status || '未处理'
|
}))
|
} else {
|
console.warn('获取投诉数据失败:', res.message)
|
complaints.value = []
|
}
|
} catch (err) {
|
console.error('网络或服务器错误:', err)
|
complaints.value = []
|
}
|
}
|
|
|
|
onMounted(() => {
|
fetchComplaints()
|
})
|
</script>
|
|
<style>
|
/* 布局与背景 */
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.mt-10 {
|
margin-top: 10rpx;
|
}
|
|
|
.bg-gray-100 {
|
background-color: #f3f4f6;
|
}
|
|
.min-h-screen {
|
min-height: 100vh;
|
}
|
|
/* 标题样式 */
|
.text-2xl {
|
font-size: 1.5rem;
|
line-height: 2rem;
|
}
|
|
.font-bold {
|
font-weight: 700;
|
}
|
|
.mb-4 {
|
margin-bottom: 1rem;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
/* 列表间距 */
|
.space-y-6 {
|
margin-top: 1.5rem;
|
}
|
|
.relative {
|
position: relative;
|
}
|
|
.bg-white {
|
background-color: #ffffff;
|
}
|
|
.rounded-xl {
|
border-radius: 0.75rem;
|
}
|
|
.shadow-md {
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
}
|
|
.p-4 {
|
padding: 1rem;
|
}
|
|
.pt-6 {
|
padding-top: 1.5rem;
|
}
|
|
.absolute {
|
position: absolute;
|
}
|
|
.-top-3 {
|
top: -0.75rem;
|
}
|
|
.-left-3 {
|
left: -0.75rem;
|
}
|
|
.w-8 {
|
width: 2rem;
|
}
|
|
.h-8 {
|
height: 2rem;
|
}
|
|
.bg-blue-500 {
|
background-color: #3b82f6;
|
}
|
|
.text-white {
|
color: #ffffff;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.leading-8 {
|
line-height: 2rem;
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
.font-semibold {
|
font-weight: 600;
|
}
|
|
.shadow {
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
}
|
|
/* 时间与内容样式 */
|
.text-sm {
|
font-size: 0.875rem;
|
line-height: 1.25rem;
|
}
|
|
.text-gray-500 {
|
color: #6b7280;
|
}
|
|
.mb-1 {
|
margin-bottom: 0.25rem;
|
}
|
|
.text-base {
|
font-size: 1rem;
|
line-height: 1.5rem;
|
}
|
|
.text-gray-800 {
|
color: #1f2937;
|
}
|
|
.leading-snug {
|
line-height: 1.375;
|
}
|
|
/* 回复样式 */
|
.text-gray-600 {
|
color: #4b5563;
|
}
|
|
.mt-2 {
|
margin-top: 0.5rem;
|
}
|
|
.text-gray-700 {
|
color: #374151;
|
}
|
|
.text-gray-400 {
|
color: #9ca3af;
|
}
|
|
/* 空提示 */
|
.mt-10 {
|
margin-top: 2.5rem;
|
}
|
|
.text-center {
|
text-align: center;
|
}
|
|
.text-color-time {
|
color: #6B7280;
|
}
|
|
.text-color-question {
|
color: #0F172A;
|
}
|
|
.text-color-status-0 {
|
color: #AAAAFF;
|
}
|
|
.text-color-status-1 {
|
color: #AAAA00;
|
}
|
|
.text-color-status-2 {
|
color: #00FF00;
|
}
|
|
.text-color-reply {
|
color: #3B82F6;
|
}
|
|
.text-color-reply-none {
|
color: #9CA3AF;
|
}
|
|
.page-wrapper {
|
position: relative;
|
min-height: 100vh;
|
/* 确保小内容时填满视口 */
|
overflow: hidden;
|
}
|
|
/* 顶部背景 */
|
.bg-top {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_top.jpg') no-repeat top center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 底部背景 */
|
.bg-bottom {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
height: 500rpx;
|
/* 可用固定像素或图片高度 */
|
background: url('https://farm.evcc.top/Uploads/yuanboyuan/background/bg_bottom.jpg') no-repeat bottom center;
|
background-size: cover;
|
z-index: 0;
|
}
|
|
/* 内容层 */
|
.content-wrapper {
|
position: relative;
|
z-index: 1;
|
padding: 2rem 1rem;
|
}
|
</style>
|
