482 lines
11 KiB
Vue
482 lines
11 KiB
Vue
<template>
|
|
<view class="complaints-page">
|
|
<view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
|
|
<NavHeader title="投诉建议" />
|
|
</view>
|
|
<view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
|
|
<scroll-view
|
|
class="form-content"
|
|
scroll-y="true"
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="listRefreshing"
|
|
@refresherrefresh="onListRefresh"
|
|
@scrolltolower="onListLoadMore"
|
|
:lower-threshold="80"
|
|
>
|
|
<!-- 投诉建议表单 -->
|
|
<view class="form-section">
|
|
<view class="section-title">填写投诉建议</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="form-item">
|
|
<view class="input-wrapper">
|
|
<text class="input-label">标题 <text class="required">*</text></text>
|
|
<input
|
|
class="input-field"
|
|
type="text"
|
|
v-model="formData.title"
|
|
placeholder="请输入标题"
|
|
maxlength="100"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容 -->
|
|
<view class="form-item">
|
|
<view class="textarea-wrapper">
|
|
<text class="textarea-label">内容 <text class="optional">（选填）</text></text>
|
|
<textarea
|
|
class="textarea-field"
|
|
v-model="formData.content"
|
|
placeholder="请详细描述您的投诉或建议..."
|
|
maxlength="1000"
|
|
:auto-height="true"
|
|
></textarea>
|
|
<view class="char-count">
|
|
<text>{{ formData.content.length }}/1000</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-section">
|
|
<button
|
|
class="submit-btn"
|
|
:class="{ disabled: loading || !canSubmit }"
|
|
:disabled="loading || !canSubmit"
|
|
@click="handleSubmit"
|
|
>
|
|
{{ loading ? '提交中...' : '提交' }}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 我的投诉建议列表 -->
|
|
<view class="list-section">
|
|
<view class="section-title">我的投诉建议</view>
|
|
<view class="empty-list" v-if="!listLoading && suggestList.length === 0">
|
|
<text class="empty-text">暂无投诉建议记录</text>
|
|
</view>
|
|
<view
|
|
class="suggest-card"
|
|
v-for="(item, index) in suggestList"
|
|
:key="item.id || index"
|
|
>
|
|
<view class="card-header">
|
|
<text class="card-title">{{ item.title || '无标题' }}</text>
|
|
<text class="card-time">{{ formatTime(item.createTime) }}</text>
|
|
</view>
|
|
<text class="card-content" v-if="item.content">{{ item.content }}</text>
|
|
<view class="card-reply" v-if="getReplyText(item)">
|
|
<text class="reply-label">{{ item.replyName }}回复：</text>
|
|
<text class="reply-text">{{ getReplyText(item) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-footer" v-if="suggestList.length > 0">
|
|
<text v-if="listLoadMore" class="footer-text">加载中...</text>
|
|
<text v-else-if="!listHasMore" class="footer-text">没有更多了</text>
|
|
<text v-else class="footer-text">上拉加载更多</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { createLaborUnionSuggest,getLaborUnionSuggestPage } from '@/api/profile.js'
|
|
import NavHeader from "@/components/NavHeader/NavHeader.vue";
|
|
|
|
export default {
|
|
components: {
|
|
NavHeader
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
loading: false,
|
|
formData: {
|
|
title: '',
|
|
content: ''
|
|
},
|
|
suggestList: [],
|
|
listPageNo: 1,
|
|
listPageSize: 10,
|
|
listHasMore: true,
|
|
listLoading: false,
|
|
listLoadMore: false,
|
|
listRefreshing: false
|
|
}
|
|
},
|
|
computed: {
|
|
headerHeight() {
|
|
return this.statusBarHeight + 44
|
|
},
|
|
// 是否可以提交
|
|
canSubmit() {
|
|
return this.formData.title && this.formData.title.trim().length >= 1
|
|
}
|
|
},
|
|
onLoad() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
|
this.loadSuggestList()
|
|
},
|
|
methods: {
|
|
formatTime(val) {
|
|
if (val == null || val === '') return ''
|
|
let ts = Number(val)
|
|
if (!Number.isFinite(ts)) return val
|
|
if (String(ts).length <= 10) ts *= 1000
|
|
const d = new Date(ts)
|
|
const y = d.getFullYear()
|
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
const h = String(d.getHours()).padStart(2, '0')
|
|
const min = String(d.getMinutes()).padStart(2, '0')
|
|
return `${y}-${m}-${day} ${h}:${min}`
|
|
},
|
|
getReplyText(item) {
|
|
const text = item.replyContent
|
|
return text ? String(text).trim() : ''
|
|
},
|
|
getReplyTime(item) {
|
|
const t = item.replyTime
|
|
return t != null && t !== '' ? this.formatTime(t) : ''
|
|
},
|
|
async loadSuggestList(append = false) {
|
|
if (this.listLoading) return
|
|
this.listLoading = true
|
|
try {
|
|
const res = await getLaborUnionSuggestPage({
|
|
pageNo: this.listPageNo,
|
|
pageSize: this.listPageSize
|
|
})
|
|
const raw = res.list || res.records || (res.data && (res.data.list || res.data.records)) || []
|
|
const list = Array.isArray(raw) ? raw : []
|
|
this.suggestList = append ? this.suggestList.concat(list) : list
|
|
this.listHasMore = list.length >= this.listPageSize
|
|
} catch (e) {
|
|
console.error('加载投诉建议列表失败:', e)
|
|
if (!append) this.suggestList = []
|
|
uni.showToast({ title: '加载列表失败', icon: 'none' })
|
|
} finally {
|
|
this.listLoading = false
|
|
this.listLoadMore = false
|
|
this.listRefreshing = false
|
|
}
|
|
},
|
|
onListRefresh() {
|
|
this.listRefreshing = true
|
|
this.listPageNo = 1
|
|
this.listHasMore = true
|
|
this.loadSuggestList()
|
|
},
|
|
onListLoadMore() {
|
|
if (!this.listHasMore || this.listLoadMore || this.listLoading) return
|
|
this.listLoadMore = true
|
|
this.listPageNo += 1
|
|
this.loadSuggestList(true)
|
|
},
|
|
// 提交表单
|
|
async handleSubmit() {
|
|
// 验证标题
|
|
if (!this.formData.title || this.formData.title.trim().length < 1) {
|
|
uni.showToast({
|
|
title: '请输入标题',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
try {
|
|
this.loading = true
|
|
|
|
// 构建提交数据
|
|
const submitData = {
|
|
title: this.formData.title.trim(),
|
|
content: this.formData.content ? this.formData.content.trim() : ''
|
|
}
|
|
|
|
// 调用接口
|
|
const res = await createLaborUnionSuggest(submitData)
|
|
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
this.formData.title = ''
|
|
this.formData.content = ''
|
|
this.listPageNo = 1
|
|
this.listHasMore = true
|
|
this.loadSuggestList()
|
|
} catch (error) {
|
|
console.error('提交投诉建议失败:', error)
|
|
uni.showToast({
|
|
title: error.message || '提交失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.complaints-page {
|
|
min-height: 100vh;
|
|
background: #e2e8f1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-fixed-wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: #e2e8f1;
|
|
}
|
|
|
|
.main-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.form-content {
|
|
flex: 1;
|
|
height: 0;
|
|
padding: 0 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-section {
|
|
margin-top: 30rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 24rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 30rpx;
|
|
|
|
.input-wrapper {
|
|
position: relative;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.input-label {
|
|
width: 160rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
|
|
.required {
|
|
color: #d51c3c;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.optional {
|
|
color: #999999;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #1a1819;
|
|
}
|
|
}
|
|
|
|
.textarea-wrapper {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx 24rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.textarea-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
|
|
.optional {
|
|
color: #999999;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.textarea-field {
|
|
width: 100%;
|
|
min-height: 300rpx;
|
|
font-size: 28rpx;
|
|
color: #1a1819;
|
|
line-height: 1.6;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.char-count {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-section {
|
|
margin-top: 40rpx;
|
|
padding-bottom: 24rpx;
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #004294 0%, #0066cc 100%);
|
|
border-radius: 44rpx;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
&.disabled {
|
|
background: #cccccc;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-section {
|
|
margin-top: 24rpx;
|
|
padding-bottom: 40rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.empty-list {
|
|
padding: 60rpx 0;
|
|
text-align: center;
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.suggest-card {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 12rpx;
|
|
|
|
.card-title {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #1a1819;
|
|
}
|
|
|
|
.card-time {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
flex-shrink: 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
line-height: 1.5;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.card-reply {
|
|
background: #f0f6ff;
|
|
border-radius: 12rpx;
|
|
padding: 16rpx;
|
|
border-left: 4rpx solid #004294;
|
|
|
|
.reply-label {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #004294;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.reply-text {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.reply-time {
|
|
display: block;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-footer {
|
|
padding: 24rpx 0;
|
|
text-align: center;
|
|
.footer-text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|