|
|
@@ -2,21 +2,37 @@
|
|
|
<view class="complaint-list-root">
|
|
|
<erp-nav-bar title="投诉与建议" />
|
|
|
|
|
|
- <scroll-view scroll-y class="list-scroll-view" :show-scrollbar="false" @scrolltolower="onReachEnd">
|
|
|
+ <scroll-view scroll-y class="list-scroll-view" :show-scrollbar="false" @scrolltolower="onReachEnd"
|
|
|
+ :refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="onPullDownRefresh">
|
|
|
<view class="list-inner">
|
|
|
<view class="complaint-card" v-for="item in displayList" :key="item.id" @click="goDetail(item)">
|
|
|
- <view class="card-header">
|
|
|
- <view class="type-badge">{{ item.feedbackTypeLabel }}</view>
|
|
|
- <view class="status-text" :class="item.status === '1' ? 'done' : 'pending'">
|
|
|
- {{ item.status === '1' ? '已处理' : '待处理' }}
|
|
|
+ <view class="card-head">
|
|
|
+ <view class="head-left">
|
|
|
+ <view class="type-tag">
|
|
|
+ <view class="tag-dot"></view>
|
|
|
+ <text>{{ item.feedbackTypeLabel }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="head-right" :class="item.status === '1' ? 'done' : 'pending'">
|
|
|
+ <view class="status-dot"></view>
|
|
|
+ <text>{{ item.status === '1' ? '已处理' : '待处理' }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
<view class="card-content">
|
|
|
<text class="content-text">{{ item.content }}</text>
|
|
|
</view>
|
|
|
- <view class="card-footer">
|
|
|
+
|
|
|
+ <view class="card-images" v-if="item.imageUrls && item.imageUrls.length > 0">
|
|
|
+ <view class="img-cell" v-for="(url, idx) in item.imageUrls" :key="idx"
|
|
|
+ @click.stop="previewImage(item.imageUrls, idx)">
|
|
|
+ <image :src="url" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-foot">
|
|
|
<text class="time-text">{{ item.createTime }}</text>
|
|
|
- <view class="arrow-icon"></view>
|
|
|
+ <text class="arrow">›</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -55,6 +71,7 @@ export default {
|
|
|
return {
|
|
|
loading: false,
|
|
|
noMore: false,
|
|
|
+ refresherTriggered: false,
|
|
|
pageNum: 1,
|
|
|
displayList: [],
|
|
|
typeMap: {}
|
|
|
@@ -87,12 +104,24 @@ export default {
|
|
|
goDetail(item) {
|
|
|
uni.navigateTo({ url: `/pages/mine/complaint/detail/index?id=${item.id}` });
|
|
|
},
|
|
|
+ previewImage(urls, current) {
|
|
|
+ uni.previewImage({ urls, current });
|
|
|
+ },
|
|
|
refresh() {
|
|
|
this.displayList = [];
|
|
|
this.noMore = false;
|
|
|
this.pageNum = 1;
|
|
|
this.loadData();
|
|
|
},
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.refresherTriggered = true;
|
|
|
+ this.displayList = [];
|
|
|
+ this.noMore = false;
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.loadData().finally(() => {
|
|
|
+ this.refresherTriggered = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
onReachEnd() {
|
|
|
if (!this.loading && !this.noMore) this.loadData();
|
|
|
},
|
|
|
@@ -112,6 +141,7 @@ export default {
|
|
|
feedbackType: item.feedbackType,
|
|
|
feedbackTypeLabel: this.typeMap[item.feedbackType] || item.feedbackType || '未知类型',
|
|
|
content: item.content,
|
|
|
+ imageUrls: item.imageUrls ? item.imageUrls.split(',').filter(u => u) : [],
|
|
|
status: item.status || '0',
|
|
|
createTime: item.createTime
|
|
|
}));
|
|
|
@@ -140,7 +170,7 @@ export default {
|
|
|
.complaint-list-root {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
- background: #f8fafb;
|
|
|
+ background: #F4F6F9;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
@@ -158,71 +188,137 @@ export default {
|
|
|
|
|
|
.complaint-card {
|
|
|
background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 32rpx;
|
|
|
margin-bottom: 24rpx;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
|
|
+ box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.03);
|
|
|
+ transition: transform 0.15s ease;
|
|
|
}
|
|
|
|
|
|
-.card-header {
|
|
|
+.complaint-card:active {
|
|
|
+ transform: scale(0.985);
|
|
|
+}
|
|
|
+
|
|
|
+.card-head {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
-.type-badge {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #C1001C;
|
|
|
- background: rgba(193, 0, 28, 0.06);
|
|
|
- padding: 6rpx 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
+.head-left {
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-.status-text {
|
|
|
- font-size: 26rpx;
|
|
|
+.type-tag {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #5A6577;
|
|
|
+ background: #F4F6F9;
|
|
|
+ padding: 8rpx 18rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tag-dot {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background: #C1001C;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.head-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.head-right .status-dot {
|
|
|
+ width: 12rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.head-right.pending {
|
|
|
+ color: #E8900C;
|
|
|
}
|
|
|
|
|
|
-.status-text.pending {
|
|
|
- color: #ff9800;
|
|
|
+.head-right.pending .status-dot {
|
|
|
+ background: #E8900C;
|
|
|
+ box-shadow: 0 0 0 4rpx rgba(232, 144, 12, 0.12);
|
|
|
}
|
|
|
|
|
|
-.status-text.done {
|
|
|
- color: #4caf50;
|
|
|
+.head-right.done {
|
|
|
+ color: #34A853;
|
|
|
+}
|
|
|
+
|
|
|
+.head-right.done .status-dot {
|
|
|
+ background: #34A853;
|
|
|
+ box-shadow: 0 0 0 4rpx rgba(52, 168, 83, 0.12);
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ margin-bottom: 18rpx;
|
|
|
}
|
|
|
|
|
|
.content-text {
|
|
|
font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- line-height: 1.6;
|
|
|
+ color: #1A1A2E;
|
|
|
+ line-height: 1.7;
|
|
|
display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.card-footer {
|
|
|
+.card-images {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.card-images::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.img-cell {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #F5F6F8;
|
|
|
+}
|
|
|
+
|
|
|
+.img-cell image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.card-foot {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ border-top: 1rpx solid #F0F0F3;
|
|
|
}
|
|
|
|
|
|
.time-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: #bbb;
|
|
|
+ color: #B0B8C5;
|
|
|
}
|
|
|
|
|
|
-.arrow-icon {
|
|
|
- width: 14rpx;
|
|
|
- height: 14rpx;
|
|
|
- border-right: 3rpx solid #ccc;
|
|
|
- border-top: 3rpx solid #ccc;
|
|
|
- transform: rotate(45deg);
|
|
|
- margin-left: 10rpx;
|
|
|
+.arrow {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #CBD2DB;
|
|
|
+ font-weight: 300;
|
|
|
+ line-height: 1;
|
|
|
+ margin-right: -4rpx;
|
|
|
}
|
|
|
|
|
|
.list-status-info {
|
|
|
@@ -271,23 +367,30 @@ export default {
|
|
|
|
|
|
.footer-bar {
|
|
|
background: #fff;
|
|
|
- padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
|
|
|
+ padding: 24rpx 40rpx;
|
|
|
+ padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
|
flex-shrink: 0;
|
|
|
- border-top: 1rpx solid #f0f0f0;
|
|
|
+ box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
|
|
|
.submit-btn {
|
|
|
width: 100%;
|
|
|
- height: 96rpx;
|
|
|
+ height: 92rpx;
|
|
|
background: #C1001C;
|
|
|
color: #fff;
|
|
|
- border-radius: 48rpx;
|
|
|
+ border-radius: 46rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
border: none;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(193, 0, 28, 0.2);
|
|
|
+ transition: opacity 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn:active {
|
|
|
+ opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
.submit-btn::after {
|