473 lines
11 KiB
Vue
473 lines
11 KiB
Vue
<template>
|
|
<view class="feedback-container">
|
|
<view class="feedback-tabs">
|
|
<view :class="['tab', {active: activeTab === 0} ]" @click="activeTab = 0">提交反馈</view>
|
|
<view :class="['tab', {active: activeTab === 1} ]" @click="activeTab = 1">我的反馈</view>
|
|
</view>
|
|
<view v-if="activeTab === 0">
|
|
<!-- 反馈表单 -->
|
|
<view class="feedback-form">
|
|
<view class="form-title">提交反馈</view>
|
|
<view class="form-item">
|
|
<view class="label">标题</view>
|
|
<input v-model="title" placeholder="请输入反馈标题" class="title-input" />
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="label">反馈类型</view>
|
|
<picker @change="onTypeChange" :value="typeIndex" :range="typeOptions" range-key="label">
|
|
<view class="picker">{{ typeOptions[typeIndex]?.label || '请选择类型' }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="label">反馈描述</view>
|
|
<textarea
|
|
v-model="description"
|
|
placeholder="请详细描述您的问题或建议..."
|
|
class="content-textarea"
|
|
maxlength="500"
|
|
/>
|
|
<view class="char-count">{{ description.length }}/500</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="label">联系方式</view>
|
|
<input v-model="contact" placeholder="手机号或邮箱（选填）" class="contact-input" />
|
|
</view>
|
|
<button @click="submitFeedback" class="submit-btn" :disabled="!canSubmit">
|
|
提交反馈
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<!-- 我的反馈列表 -->
|
|
<view class="feedback-list">
|
|
<view class="list-title">我的反馈</view>
|
|
<view v-if="feedbackList.length === 0" class="empty-tip">
|
|
暂无反馈记录
|
|
</view>
|
|
<view v-else>
|
|
<view
|
|
v-for="item in feedbackList"
|
|
:key="item.id"
|
|
class="feedback-item"
|
|
@click="viewDetail(item)"
|
|
>
|
|
<view class="item-header">
|
|
<view class="type-tag" :class="getTypeClass(item.type)">{{ getTypeLabel(item.type) }}</view>
|
|
<view class="status-tag" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
|
|
</view>
|
|
<view class="item-content">
|
|
<view class="item-title">{{ item.title }}</view>
|
|
<view class="item-desc">{{ item.description }}</view>
|
|
<image v-if="item.picUrl" :src="item.picUrl" class="item-img" mode="aspectFill" />
|
|
</view>
|
|
<view class="item-footer">
|
|
<text class="time">{{ formatTime(item.createTime) }}</text>
|
|
<text v-if="item.reply" class="reply-count">已回复</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed, watch, nextTick } from 'vue'
|
|
import meetingRoomApi from '@/sheep/api/meetingRoom'
|
|
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
|
|
const typeOptions = ref<{ value: string; label: string }[]>([])
|
|
const typeIndex = ref(0)
|
|
const title = ref('')
|
|
const description = ref('')
|
|
const contact = ref('')
|
|
const feedbackList = ref<any[]>([])
|
|
const activeTab = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = 5
|
|
const hasMore = ref(true)
|
|
const loading = ref(false)
|
|
|
|
const canSubmit = computed(() => {
|
|
return title.value.trim() && description.value.trim()
|
|
})
|
|
|
|
async function loadTypeOptions() {
|
|
try {
|
|
const res: any = await meetingRoomApi.getFeedbackType()
|
|
if (res.data && Array.isArray(res.data.data)) {
|
|
typeOptions.value = res.data.data.map(item => ({
|
|
value: item.value,
|
|
label: item.label
|
|
}))
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: '获取反馈类型失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
function onTypeChange(e: any) {
|
|
typeIndex.value = e.detail.value
|
|
}
|
|
|
|
function getTypeLabel(type: string) {
|
|
const option = typeOptions.value.find(item => item.value === type)
|
|
return option ? option.label : type
|
|
}
|
|
|
|
function getTypeClass(type: string) {
|
|
const classMap: Record<string, string> = {
|
|
'投诉': 'type-complain',
|
|
'建议': 'type-suggest',
|
|
'BUG报告': 'type-bug',
|
|
'功能需求': 'type-feature'
|
|
}
|
|
return classMap[type] || 'type-other'
|
|
}
|
|
|
|
function getStatusText(status: string | number) {
|
|
if (status === 1 || status === '1') return '已处理'
|
|
// 只要不是1都显示未处理
|
|
return '未处理'
|
|
}
|
|
|
|
function getStatusClass(status: string | number) {
|
|
if (status === 1 || status === '1') return 'status-completed'
|
|
// 只要不是1都用未处理样式
|
|
return 'status-pending'
|
|
}
|
|
|
|
function formatTime(time: string) {
|
|
if (!time) return ''
|
|
return new Date(time).toLocaleDateString()
|
|
}
|
|
|
|
async function submitFeedback() {
|
|
if (!canSubmit.value) {
|
|
uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
try {
|
|
uni.showLoading({ title: '提交中...' })
|
|
const data = {
|
|
title: title.value.trim(),
|
|
type: typeOptions.value[typeIndex.value].value,
|
|
description: description.value.trim(),
|
|
contact: contact.value.trim()
|
|
}
|
|
const response: any = await meetingRoomApi.submitFeedback(data)
|
|
uni.hideLoading()
|
|
if (response.code === 0) {
|
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
|
// 清空表单
|
|
title.value = ''
|
|
description.value = ''
|
|
contact.value = ''
|
|
typeIndex.value = 0
|
|
// 刷新列表
|
|
loadFeedbackList()
|
|
} else {
|
|
uni.showToast({ title: response.msg || '提交失败', icon: 'none' })
|
|
}
|
|
} catch (error) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '提交失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
function viewDetail(item: any) {
|
|
uni.navigateTo({
|
|
url: `/pages/integrated/feedback/detail?id=${item.id}`
|
|
})
|
|
}
|
|
|
|
async function loadFeedbackList(isLoadMore = false, autoFill = false) {
|
|
if (loading.value || (!hasMore.value && isLoadMore)) return
|
|
loading.value = true
|
|
try {
|
|
const response: any = await meetingRoomApi.getFeedbackList({
|
|
current: page.value,
|
|
size: pageSize
|
|
})
|
|
if (response.code === 0 && response.data) {
|
|
const records = response.data.records || []
|
|
if (isLoadMore) {
|
|
feedbackList.value = feedbackList.value.concat(records)
|
|
} else {
|
|
feedbackList.value = records
|
|
}
|
|
hasMore.value = records.length === pageSize
|
|
if (hasMore.value) page.value += 1
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
// H5端自动补齐：只有 autoFill=true 时才自动补齐
|
|
if (autoFill) {
|
|
await nextTick()
|
|
if (hasMore.value) {
|
|
const listDom = document.querySelector('.feedback-list')
|
|
if (listDom && listDom.scrollHeight <= window.innerHeight) {
|
|
await loadFeedbackList(true, true)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function refreshList() {
|
|
page.value = 1
|
|
hasMore.value = true
|
|
loadFeedbackList(false, true)
|
|
}
|
|
|
|
// 监听页面触底事件，下拉加载更多
|
|
onReachBottom(() => {
|
|
if (activeTab.value === 1) {
|
|
loadFeedbackList(true, false)
|
|
}
|
|
})
|
|
|
|
// 切换tab时重置分页并刷新
|
|
watch(activeTab, (val) => {
|
|
if (val === 1) {
|
|
refreshList()
|
|
}
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
if (activeTab.value === 1) {
|
|
page.value = 1
|
|
hasMore.value = true
|
|
loadFeedbackList(false, true).then(() => {
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
} else {
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadTypeOptions().then(() => {
|
|
if (activeTab.value === 1) {
|
|
refreshList()
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.feedback-container {
|
|
padding: 24rpx;
|
|
background: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.feedback-tabs {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
overflow: hidden;
|
|
margin-bottom: 24rpx;
|
|
.tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 28rpx 0;
|
|
font-size: 30rpx;
|
|
color: #888;
|
|
background: #f7f8fa;
|
|
&.active {
|
|
color: #1777FF;
|
|
background: #fff;
|
|
font-weight: bold;
|
|
border-bottom: 4rpx solid #1777FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feedback-form {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
.form-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 24rpx;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.title-input {
|
|
height: 80rpx;
|
|
padding: 0 24rpx;
|
|
background: #f7f8fa;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.picker {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
padding: 0 24rpx;
|
|
background: #f7f8fa;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.content-textarea {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
padding: 24rpx;
|
|
background: #f7f8fa;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.char-count {
|
|
text-align: right;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 8rpx;
|
|
}
|
|
.contact-input {
|
|
height: 80rpx;
|
|
padding: 0 24rpx;
|
|
background: #f7f8fa;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #007aff;
|
|
color: #fff;
|
|
border-radius: 8rpx;
|
|
font-size: 32rpx;
|
|
&:disabled {
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feedback-list {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
.list-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.empty-tip {
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
padding: 60rpx 0;
|
|
}
|
|
.feedback-item {
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
padding: 24rpx 0;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
.type-tag {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
&.type-complain {
|
|
background: #ffebee;
|
|
color: #d32f2f;
|
|
}
|
|
&.type-suggest {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
&.type-bug {
|
|
background: #f3e5f5;
|
|
color: #7b1fa2;
|
|
}
|
|
&.type-feature {
|
|
background: #e8f5e8;
|
|
color: #388e3c;
|
|
}
|
|
&.type-other {
|
|
background: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
}
|
|
.status-tag {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
&.status-pending {
|
|
background: #fff3e0;
|
|
color: #f57c00;
|
|
}
|
|
&.status-processing {
|
|
background: #e8f5e8;
|
|
color: #388e3c;
|
|
}
|
|
&.status-completed {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
&.status-closed {
|
|
background: #f5f5f5;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.item-content {
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.item-desc {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
.item-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
margin-top: 8rpx;
|
|
background: #f7f8fa;
|
|
}
|
|
}
|
|
.item-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.reply-count {
|
|
font-size: 24rpx;
|
|
color: #007aff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|