Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fef25072 1 parent a64e5698

feat(反馈列表): 添加反馈状态显示和下拉刷新功能 

- 在反馈列表中添加状态标签显示
- 实现下拉刷新功能
- 将模拟数据替换为真实API调用
- 更新相关样式和字段映射
Inline Side-by-side
Showing 3 changed files with 84 additions and 59 deletions
......@@ -38,6 +38,12 @@
color: #999;
}
.header-right {
display: flex;
align-items: center;
gap: 12rpx;
}
.feedback-type {
background: #fb923c;
color: #fff;
......@@ -46,6 +52,25 @@
font-size: 22rpx;
font-weight: 500;
}
.feedback-status {
padding: 6rpx 12rpx;
border-radius: 16rpx;
font-size: 20rpx;
font-weight: 500;
&.status-pending {
background: #fef3c7;
color: #d97706;
border: 1rpx solid #fbbf24;
}
&.status-processed {
background: #d1fae5;
color: #059669;
border: 1rpx solid #34d399;
}
}
}
.feedback-content {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-17 12:19:40
* @LastEditTime: 2025-07-18 16:08:29
* @FilePath: /jgdl/src/pages/feedBackList/index.vue
* @Description: 意见反馈列表页面
-->
......@@ -14,6 +14,10 @@
:style="scrollStyle"
@scrolltolower="loadMore"
:lower-threshold="50"
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@refresherrestore="onRefreshRestore"
>
<!-- 反馈列表 -->
<view class="feedback-list" v-if="feedbackList.length > 0">
......@@ -22,10 +26,13 @@
:key="index"
class="feedback-card"
>
<!-- 卡片头部：时间和类型 -->
<!-- 卡片头部：时间、类型和状态 -->
<view class="card-header">
<view class="feedback-time">{{ formatTime(item.created_at) }}</view>
<view class="feedback-time">{{ item.created_time }}</view>
<view class="header-right">
<view class="feedback-type">{{ getCategoryName(item.category) }}</view>
<view class="feedback-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
</view>
</view>
<!-- 反馈内容 -->
......@@ -52,13 +59,13 @@
</view>
<!-- 回复内容 -->
<view class="reply-section" v-if="item.reply_content">
<view class="reply-section" v-if="item.reply">
<view class="reply-header">
<text class="reply-label">回复内容：</text>
<text class="reply-time">{{ formatTime(item.reply_time) }}</text>
<text class="reply-time">{{ item.reply_time }}</text>
</view>
<view class="reply-content">
<text class="reply-text">{{ item.reply_content }}</text>
<text class="reply-text">{{ item.reply }}</text>
</view>
</view>
</view>
......@@ -103,8 +110,9 @@
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Toast } from '@nutui/nutui-taro'
// import { getFeedbackListAPI } from '@/api/other'
import './index.less'
// 导入接口
import { getFeedbackListAPI } from '@/api/other'
// 反馈类型映射
const categoryMap = {
......@@ -161,6 +169,27 @@ const getCategoryName = (category) => {
}
/**
* 获取状态文本
*/
const getStatusText = (status) => {
const statusMap = {
3: '待处理',
5: '已处理'
}
return statusMap[status] || '未知状态'
}
/**
* 获取状态样式类
*/
const getStatusClass = (status) => {
return {
'status-pending': status === 3,
'status-processed': status === 5
}
}
/**
* 格式化时间
*/
const formatTime = (timestamp) => {
......@@ -175,7 +204,7 @@ const formatTime = (timestamp) => {
}
/**
* 获取反馈列表数据 - 使用Mock数据
* 获取反馈列表数据 - 使用真实API
*/
const getFeedbackList = async (isRefresh = false) => {
if (loading.value) return
......@@ -183,56 +212,16 @@ const getFeedbackList = async (isRefresh = false) => {
loading.value = true
try {
// Mock数据
const mockData = [
{
id: 1,
category: '1',
note: '希望能增加夜间模式功能，这样在晚上使用时眼睛会更舒服一些。',
images: ['https://picsum.photos/200/200?random=1', 'https://picsum.photos/200/200?random=2'],
contact: '138****8888',
created_at: Math.floor(Date.now() / 1000) - 86400,
reply_content: '感谢您的建议，我们已将夜间模式功能加入开发计划，预计下个版本上线。',
reply_time: Math.floor(Date.now() / 1000) - 3600
},
{
id: 2,
category: '3',
note: '首页的搜索框位置有点偏上，建议调整到更容易点击的位置。',
images: [],
contact: 'wechat_user123',
created_at: Math.floor(Date.now() / 1000) - 172800,
reply_content: null,
reply_time: null
},
{
id: 3,
category: '5',
note: '发现有些车辆信息显示不完整，价格和配置信息缺失。',
images: ['https://picsum.photos/200/200?random=3'],
contact: '159****6666',
created_at: Math.floor(Date.now() / 1000) - 259200,
reply_content: '我们已经修复了车辆信息显示问题，感谢您的反馈！',
reply_time: Math.floor(Date.now() / 1000) - 86400
},
{
id: 4,
category: '7',
note: '应用启动速度有点慢，希望能优化一下性能。',
images: [],
contact: null,
created_at: Math.floor(Date.now() / 1000) - 345600,
reply_content: null,
reply_time: null
const page = isRefresh ? 0 : currentPage.value
const params = {
page: page,
limit: pageSize.value
}
]
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 1000))
const response = await getFeedbackListAPI(params)
const startIndex = isRefresh ? 0 : currentPage.value * pageSize.value
const endIndex = startIndex + pageSize.value
const newData = mockData.slice(startIndex, endIndex)
if (response && response.code === 1 && response.data) {
const newData = response.data.list || []
if (isRefresh) {
feedbackList.value = newData
......@@ -242,15 +231,19 @@ const getFeedbackList = async (isRefresh = false) => {
}
// 判断是否还有更多数据
hasMore.value = endIndex < mockData.length
const totalLoaded = isRefresh ? newData.length : feedbackList.value.length
hasMore.value = totalLoaded < response.data.total
if (!isRefresh) {
currentPage.value++
}
} else {
console.error('API返回错误:', response)
Toast.fail(response?.msg || '获取数据失败')
}
} catch (error) {
console.error('获取反馈列表失败:', error)
Toast.fail(error.message || '获取数据失败')
Toast.fail(error.message || '网络错误，请重试')
} finally {
loading.value = false
refreshing.value = false
......@@ -266,6 +259,13 @@ const onRefresh = () => {
}
/**
* 下拉刷新恢复
*/
const onRefreshRestore = () => {
refreshing.value = false
}
/**
* 加载更多
*/
const loadMore = () => {
......
......@@ -169,7 +169,7 @@ const onHelpCenter = () => {
*/
const onFeedback = () => {
Taro.navigateTo({
url: '/pages/feedBack/index'
url: '/pages/feedBackList/index'
})
}
......