332 lines
6.5 KiB
Plaintext
332 lines
6.5 KiB
Plaintext
<template>
|
|
<view class="review-management-page">
|
|
<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
|
|
<view v-if="loading" class="skeleton-wrapper">
|
|
<view class="skeleton-card" style="height: 150rpx;"></view>
|
|
<view class="skeleton-tabs">
|
|
<view class="skeleton-item skeleton-text" style="width: 100%; height: 44rpx;"></view>
|
|
</view>
|
|
<view v-for="i in 3" :key="i" class="skeleton-card">
|
|
<view class="skeleton-item skeleton-text" style="width: 100%; height: 300rpx;"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面实际内容 -->
|
|
<view v-else class="page-content" :class="{'height-pre':showReview}">
|
|
|
|
<!-- 1. 数据看板 -->
|
|
<view class="summary-card">
|
|
<view class="data-item">
|
|
<view class="value"><text class="score">{{ satisfaction }}</text><up-icon name="star-fill"
|
|
color="#ff9900" size="20"></up-icon></view>
|
|
<text class="label">满意度</text>
|
|
</view>
|
|
<view class="data-item">
|
|
<text class="value">{{total}}</text>
|
|
<text class="label">总评价数</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. Tabs 切换 -->
|
|
<view class="sticky-tabs-wrapper">
|
|
<up-tabs :list="reviewTabs" :current="currentTab" @change="onTabChange" lineColor="#fa6400"
|
|
:activeStyle="{ color: '#fa6400', fontWeight: 'bold' }" :inactiveStyle="{ color: '#666' }">
|
|
</up-tabs>
|
|
</view>
|
|
|
|
<view class="review-list">
|
|
<view class="review-card" v-for="review in reviewList" :key="review">
|
|
<view class="reviewer-info">
|
|
<text class="name" style="font-weight: bold;" >{{ review.nick }}</text>
|
|
<up-rate v-model="review.source" readonly activeColor="#ff9900" size="16"></up-rate>
|
|
<text class="time">{{ Service.formatDate(review.addTime,1) }}</text>
|
|
</view>
|
|
<text class="review-text">{{ review.sign }}</text>
|
|
</view>
|
|
|
|
<up-loadmore status="nomore" nomoreText="没有更多评价了"></up-loadmore>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
import { Service } from "@/Service/Service";
|
|
import { CNRiderDataService } from '@/Service/CN/CNRiderDataService'
|
|
|
|
|
|
const loading = ref<boolean>(true);
|
|
const currentTab = ref<number>(0);
|
|
|
|
|
|
let satisfaction = ref(0)
|
|
let status = ref('nomore')
|
|
let page = ref(1)
|
|
|
|
let showReview = ref(false)
|
|
let review = ref('')
|
|
|
|
let storeInfo = ref<any>()
|
|
let total = ref(0)
|
|
|
|
const reviewTabs = ref([
|
|
{ name: '全部' }, { name: '好评' }, { name: '差评' }
|
|
]);
|
|
|
|
const reviewList = ref<Array<any>>([]);
|
|
|
|
let currentId = ref('')
|
|
|
|
onLoad(() => {
|
|
getData()
|
|
});
|
|
onShow(() => { });
|
|
|
|
|
|
|
|
// 获取数据
|
|
const getData = () => {
|
|
status.value = 'loadmore'
|
|
page.value = 1
|
|
reviewList.value = []
|
|
getList()
|
|
}
|
|
|
|
|
|
const getList = () => {
|
|
if (status.value == 'loading' || status.value == 'nomore') {
|
|
return
|
|
}
|
|
status.value = 'loading'
|
|
CNRiderDataService.GetRiderEvaluate(currentTab.value, page.value).then(res => {
|
|
loading.value = false
|
|
if (res.data) {
|
|
satisfaction.value = res.data.satisfaction
|
|
total.value=res.data.total.value
|
|
reviewList.value = [...reviewList.value, ...res.data.evaluateList]
|
|
page.value++
|
|
status.value = res.data.evaluateList == 10 ? 'loadmore' : 'nomore'
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const onTabChange = (e : { index : number }) => {
|
|
currentTab.value = e.index;
|
|
getData()
|
|
};
|
|
|
|
const replyTo = () => {
|
|
|
|
if (review.value == '') {
|
|
return
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.height-pre {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
@keyframes skeleton-blink {
|
|
0% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0 50%;
|
|
}
|
|
}
|
|
|
|
.skeleton-item {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-blink 1.5s infinite linear;
|
|
}
|
|
|
|
.skeleton-rect {
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.skeleton-text {
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-wrapper {
|
|
padding: 24rpx;
|
|
background-color: #f7f7f7;
|
|
|
|
.skeleton-tabs {
|
|
padding: 20rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.skeleton-card {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
.review-management-page {
|
|
background-color: #f7f7f7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.summary-card {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
background-color: #fff8f5;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin: 24rpx;
|
|
|
|
.data-item {
|
|
.value {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 8rpx;
|
|
display: block;
|
|
}
|
|
|
|
.text-red {
|
|
color: #fa5151;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sticky-tabs-wrapper {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
|
|
:deep(.up-tabs__wrapper__nav__item) {
|
|
flex: 1;
|
|
}
|
|
|
|
:deep(.up-tabs__wrapper__nav) {
|
|
position: relative;
|
|
|
|
.unread-badge {
|
|
position: absolute;
|
|
top: 16rpx;
|
|
right: 20rpx;
|
|
background-color: #fa5151;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
min-width: 32rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
border-radius: 16rpx;
|
|
text-align: center;
|
|
padding: 0 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.review-list {
|
|
padding: 24rpx;
|
|
|
|
.review-card {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
&.bad-review {
|
|
border: 1rpx solid #fef0f0;
|
|
}
|
|
|
|
.reviewer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
|
|
.name {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.review-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin: 20rpx 0;
|
|
display: block;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.review-images {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
.image-placeholder {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
overflow: hidden;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.merchant-reply {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
font-size: 26rpx;
|
|
|
|
.reply-label {
|
|
color: #fa6400;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.reply-text {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.reply-action {
|
|
text-align: right;
|
|
margin-top: 20rpx;
|
|
|
|
text {
|
|
display: inline-block;
|
|
border: 1rpx solid #fa6400;
|
|
color: #fa6400;
|
|
font-size: 26rpx;
|
|
padding: 8rpx 24rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |