482 lines
13 KiB
Vue
482 lines
13 KiB
Vue
<template>
|
|
<view class="complaints">
|
|
<!-- 因为说扫码进入不要微信小程序自带的 返回首页按钮 那就只能 去掉自带的标题内容 自己搞了 -->
|
|
<div class="mainTop" :style="{ height: menu.bottom + 6 + 'px', paddingTop: menu.top + 'px' }">
|
|
<div class="pageTitle" :style="{ height: menu.height + 'px' }">优质文明服务监督</div>
|
|
</div>
|
|
<view class="complaints-content" :style="{ marginTop: menu.bottom + 6 + 'px' }">
|
|
|
|
<view class="complaints-content-unit" v-for="(unit, i) in complaintsRecord" :key="i"
|
|
@click="goDetail(unit)">
|
|
|
|
<view class="cp-u-left">
|
|
|
|
<text class="cp-u-type">
|
|
<text>{{ unit.date }}</text>
|
|
<text class="colorOr">{{ unit.SUGGESTION_STATE }}</text>
|
|
</text>
|
|
<text class="cp-u-title">{{ unit.SUGGESTION_REASON }} </text>
|
|
<view class="cp-u-type">
|
|
<text class="fwq">{{ unit.SERVERPART_NAME }}</text>
|
|
</view>
|
|
<view class="cp-u-type">
|
|
<view style="display:flex;align-items:center;justify-content:flex-end;">
|
|
<text class="ry">{{ unit.SUGGESTION_NAME }}</text>
|
|
<text class="dh">{{ unit.PHONE_NUMBER }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class='cp-u-right'>
|
|
<image mode="aspectFill" v-if="unit.IMAGELIST && unit.IMAGELIST.length > 0"
|
|
:src="unit.IMAGELIST[0].IMAGE_URL"></image>
|
|
<image mode="aspectFill" v-else src='https://eshangtech.com/ShopICO/no-picture.png'></image>
|
|
</view>
|
|
</view>
|
|
<view class="loading-text" v-if="complaintsRecord.length > 0">{{ pageMsg.isLoadMore ? '正在加载数据...' : `———
|
|
我是有底线的 ———`}}</view>
|
|
</view>
|
|
<view v-if="loadingType == 0 && complaintsRecord.length === 0" class="empty-state">
|
|
<view class="empty-icon">📋</view>
|
|
<view class="empty-title">暂无投诉建议</view>
|
|
<view class="empty-desc">您还没有提交过任何投诉建议</view>
|
|
</view>
|
|
<view class="rate-box" @click="goNew">
|
|
<text class="yj-ico">💬</text>
|
|
<view class="rate-ico">投诉建议</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import noData from '@/components/noData.vue'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loadingType: 1,
|
|
complaintsRecord: [],
|
|
|
|
pageMsg: {
|
|
pageSize: 10,
|
|
pageIndex: 1,
|
|
isLoadMore: true,
|
|
isScreen: false
|
|
},
|
|
menu: {}, // 手机的配置信息
|
|
}
|
|
},
|
|
components: {
|
|
noData
|
|
},
|
|
computed: {
|
|
...mapGetters(['user', 'serverPart'])
|
|
},
|
|
methods: {
|
|
|
|
getConsuptionRecord() {
|
|
let _this = this
|
|
|
|
_this.$api.getCoop({
|
|
action_type: 'GetSuggestionList',
|
|
wechatOpenid: _this.user.WECHATAPP_OPENID,
|
|
provinceCode: _this.user.PROVINCE_CODE || 530000,
|
|
// suggestionType: '2000,1000,4000',
|
|
suggestionType: '2000,1050,4000',
|
|
pageSize: _this.pageMsg.pageSize,
|
|
pageIndex: _this.pageMsg.pageIndex,
|
|
publicParticipation: true
|
|
|
|
}).then(function (res) {
|
|
// 安全检查：确保返回数据结构正确
|
|
if (res && res.Data && Array.isArray(res.Data.List)) {
|
|
if (_this.pageMsg.pageIndex === 1) {
|
|
_this.complaintsRecord = res.Data.List
|
|
} else {
|
|
_this.complaintsRecord = _this.complaintsRecord.concat(res.Data.List)
|
|
}
|
|
|
|
// 检查是否还有更多数据
|
|
if (res.Data.TotalCount && res.Data.TotalCount > _this.complaintsRecord.length) {
|
|
_this.pageMsg.isLoadMore = true
|
|
} else {
|
|
_this.pageMsg.isLoadMore = false
|
|
}
|
|
|
|
// 处理状态和日期
|
|
res.Data.List.forEach(v => {
|
|
if (v.SUGGESTION_STATE === 1000) {
|
|
v.SUGGESTION_STATE = '待处理'
|
|
} else if (v.SUGGESTION_STATE === 2000) {
|
|
v.SUGGESTION_STATE = '待反馈'
|
|
} else if (v.SUGGESTION_STATE === 3000) {
|
|
v.SUGGESTION_STATE = '已处理'
|
|
}
|
|
|
|
// 安全处理日期
|
|
if (v.SUGGESTION_CREATEDATE) {
|
|
v.date = _this.$utils.cutDate(new Date(v.SUGGESTION_CREATEDATE), 'YYYY-MM-DD hh:mm:ss')
|
|
} else {
|
|
v.date = '--'
|
|
}
|
|
|
|
// 确保图片列表存在
|
|
if (!v.IMAGELIST || !Array.isArray(v.IMAGELIST)) {
|
|
v.IMAGELIST = []
|
|
}
|
|
})
|
|
} else {
|
|
// 如果返回数据格式不正确，初始化为空数组
|
|
console.warn('API返回数据格式异常:', res)
|
|
if (_this.pageMsg.pageIndex === 1) {
|
|
_this.complaintsRecord = []
|
|
}
|
|
_this.pageMsg.isLoadMore = false
|
|
}
|
|
|
|
_this.loadingType = 0
|
|
}).catch(function (error) {
|
|
console.error('获取投诉建议列表失败:', error)
|
|
if (_this.pageMsg.pageIndex === 1) {
|
|
_this.complaintsRecord = []
|
|
}
|
|
_this.pageMsg.isLoadMore = false
|
|
_this.loadingType = 0
|
|
|
|
// 显示错误提示
|
|
uni.showToast({
|
|
title: '加载失败，请稍后重试',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
goDetail(item) {
|
|
console.log('itemitemitemitem', item);
|
|
|
|
uni.navigateTo({ url: `/pages/complaints/addComplaints?SUGGESTIONID=${item.SUGGESTION_ID}` })
|
|
},
|
|
goNew() {
|
|
uni.navigateTo({ url: '/pages/complaints/addComplaints' })
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
let _this = this
|
|
// _this.complaintsRecord = []
|
|
_this.pageMsg.isLoadMore = true
|
|
_this.pageMsg.pageIndex = 1
|
|
_this.getConsuptionRecord()
|
|
|
|
setTimeout(function () {
|
|
uni.stopPullDownRefresh()
|
|
}, 1000)
|
|
},
|
|
onReachBottom() {
|
|
if (this.pageMsg.isLoadMore) {
|
|
this.pageMsg.pageIndex += 1
|
|
this.getConsuptionRecord()
|
|
}
|
|
},
|
|
onShow() {
|
|
this.pageMsg.pageIndex = 1
|
|
this.pageMsg.isLoadMore = true
|
|
this.getConsuptionRecord()
|
|
},
|
|
onLoad() {
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.complaints {
|
|
background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
|
|
min-height: 100vh;
|
|
padding-bottom: 120rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mainTop {
|
|
width: 100%;
|
|
background-color: #f8f8f8;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
|
|
.pageTitle {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.complaints-content {
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.complaints-content-unit {
|
|
display: flex;
|
|
align-items: stretch;
|
|
background: #ffffff;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
|
border: 1rpx solid #f5f7fa;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
}
|
|
|
|
.cp-u-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.cp-u-right {
|
|
margin-left: 24rpx;
|
|
|
|
image {
|
|
height: 160rpx;
|
|
width: 160rpx;
|
|
border-radius: 16rpx;
|
|
background: linear-gradient(135deg, #f5f7fa, #ecf0f1);
|
|
object-fit: cover;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.cp-u-type {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #5d6d7e;
|
|
margin-bottom: 16rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.cp-u-title {
|
|
font-size: 28rpx;
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
width: 100%;
|
|
max-width: 420rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: 12rpx 0 16rpx 0;
|
|
}
|
|
|
|
.fwq {
|
|
font-size: 22rpx;
|
|
border-radius: 16rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding: 0 16rpx;
|
|
border: 2rpx solid #f8f9fa;
|
|
color: #34495e;
|
|
background: #fafbfc;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ry,
|
|
.dh {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #34495e;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dh {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.ry:before {
|
|
content: '';
|
|
background: url("https://eshangtech.com/ShopICO/icos/tsjy_ry.png") no-repeat center;
|
|
background-size: contain;
|
|
height: 28rpx;
|
|
width: 28rpx;
|
|
margin-right: 8rpx;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dh:before {
|
|
content: '';
|
|
background: url("https://eshangtech.com/ShopICO/icos/tsjy_sjh.png") no-repeat center;
|
|
background-size: contain;
|
|
height: 28rpx;
|
|
width: 28rpx;
|
|
margin-right: 8rpx;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.colorOr {
|
|
color: #e67e22;
|
|
background: rgba(230, 126, 34, 0.1);
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
border: 2rpx solid rgba(230, 126, 34, 0.2);
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.colorGr {
|
|
color: #52C88A;
|
|
background: rgba(82, 200, 138, 0.1);
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
border: 2rpx solid rgba(82, 200, 138, 0.2);
|
|
}
|
|
|
|
/* 空状态样式 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 200rpx 40rpx 160rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 160rpx;
|
|
margin-bottom: 40rpx;
|
|
opacity: 0.3;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 36rpx;
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 28rpx;
|
|
color: #5d6d7e;
|
|
line-height: 1.6;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.empty-action {
|
|
background: linear-gradient(135deg, #52C88A, #3B9F6B);
|
|
color: #ffffff;
|
|
padding: 24rpx 48rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
box-shadow: 0 8rpx 24rpx rgba(82, 200, 138, 0.4);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 4rpx 16rpx rgba(82, 200, 138, 0.4);
|
|
}
|
|
}
|
|
|
|
.rate-box {
|
|
position: fixed;
|
|
bottom: 160rpx;
|
|
right: 30rpx;
|
|
width: 200rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #52C88A, #3B9F6B);
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 32rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(82, 200, 138, 0.4);
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 4rpx 16rpx rgba(82, 200, 138, 0.5);
|
|
}
|
|
|
|
.rate-ico {
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.yj-ico {
|
|
font-size: 32rpx;
|
|
margin-right: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #5d6d7e;
|
|
line-height: 80rpx;
|
|
margin: 40rpx 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 响应式适配
|
|
@media (max-width: 750rpx) {
|
|
.complaints-content {
|
|
padding: 20rpx 24rpx;
|
|
}
|
|
|
|
.complaints-content-unit {
|
|
padding: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.cp-u-title {
|
|
font-size: 26rpx;
|
|
max-width: 280rpx;
|
|
}
|
|
|
|
.cp-u-right image {
|
|
height: 140rpx;
|
|
width: 140rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 160rpx 32rpx 120rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 26rpx;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
}
|
|
</style>
|