first commit
This commit is contained in:
322
src/pages/userFunc/comment.vue
Normal file
322
src/pages/userFunc/comment.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 评价分类标签 -->
|
||||
<view class="evaluation-tabs">
|
||||
<up-tabs :list="tabList" :current="currentTab" @click="handleTabChange" :scrollable='false'
|
||||
lineColor='var(--nav-mian)' lineWidth='50'
|
||||
:activeStyle="{color: 'var(--nav-mian)',fontWeight: 'bold',transform: 'scale(1.05)'}"
|
||||
:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
|
||||
itemStyle=" padding-left: 30rpx; padding-right: 30rpx; height: 34px;"></up-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 评价列表 -->
|
||||
<view class="evaluation-list">
|
||||
<view class="evaluation-item" v-for="(item, index) in evaluations" :key="index">
|
||||
<!-- 商品信息 -->
|
||||
|
||||
<view class="" style=" display: flex;align-items: start;">
|
||||
<view class="goods-info">
|
||||
<image :src="Service.GetMateUrlByImg(item.goodsImg)" mode="aspectFill" class="goods-image">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- 评价内容 -->
|
||||
<view class="evaluation-content">
|
||||
<view class="" style="display: flex; align-items: start;">
|
||||
<view class="goods-details">
|
||||
<text class="goods-name">{{ item.goodsName }}</text>
|
||||
</view>
|
||||
<u-icon name="trash" size="40rpx" color="#CCCCCC" class="delete-icon"
|
||||
@click="deleteEvaluation(item)"></u-icon>
|
||||
</view>
|
||||
<!-- 星级评分 -->
|
||||
<view class="" style="display: flex; align-items: baseline; gap: 10rpx;">
|
||||
<up-rate v-model="item.source" style="margin-top: 15rpx;" gutter='2' size="28rpx"
|
||||
:allowHalf='true' active-color="#FF8C00" :readonly="true"></up-rate>
|
||||
<view class="" style="color:#FF8C00 ; font-size: 24rpx; font-weight: bold;">
|
||||
{{Number(item.source).toFixed(1) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<!-- 评价文字 -->
|
||||
<view class="" style="padding: 20rpx; background-color: #f1f1f1; border-radius: 20rpx;">
|
||||
<text class="evaluation-text">{{ item.remark }}</text>
|
||||
|
||||
<!-- 评价图片 -->
|
||||
<view class="evaluation-images" v-if="item.imgs">
|
||||
<image :src="Service.GetMateUrlByImg(img)" mode="aspectFill" class="evaluation-img"
|
||||
v-for="(img, imgIndex) in JSON.parse(item.imgs)" :key="imgIndex"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 评价信息 -->
|
||||
<view class="evaluation-meta" >
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<text class="evaluation-date">{{ Service.formatDate(item.addTime, 1) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" v-if="evaluations.length === 0">
|
||||
<image :src="Service.GetpayImg('/static/userFunc/null.png')" />
|
||||
<text class="empty-text">暂无评价</text>
|
||||
</view>
|
||||
|
||||
<up-loadmore v-if="evaluations.length !== 0" :status="status" />
|
||||
<view class="" style="width: 100%; height: 80rpx;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Service } from '@/Service/Service'
|
||||
import { UserService } from "@/Service/api/UserService"
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
|
||||
// 评价分类标签
|
||||
const tabList = ref([
|
||||
{ name: '全部' },
|
||||
{ name: '好评' },
|
||||
{ name: '中评' },
|
||||
{ name: '差评' }
|
||||
]);
|
||||
|
||||
// 当前选中的标签
|
||||
const currentTab = ref(0);
|
||||
let page = ref(1);
|
||||
let status = ref('nomore');
|
||||
let viewCount = ref(0);
|
||||
|
||||
// 评价列表数据
|
||||
const evaluations = ref<Array<any>>([]);
|
||||
|
||||
onLoad(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
// 处理标签切换
|
||||
const handleTabChange = (index : any) => {
|
||||
currentTab.value = index.index;
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
evaluations.value = [];
|
||||
page.value = 1;
|
||||
status.value = 'loadmore';
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'loading' || status.value == 'nomore') {
|
||||
return;
|
||||
}
|
||||
status.value = 'loading';
|
||||
|
||||
let source = 0;
|
||||
if (currentTab.value == 1) source = 1;
|
||||
else if (currentTab.value == 2) source = 2;
|
||||
else if (currentTab.value == 3) source = 3;
|
||||
|
||||
UserService.GetUserEvaluateList(source, page.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
evaluations.value = [...evaluations.value, ...res.data.list];
|
||||
if (res.data.viewCount) {
|
||||
viewCount.value = res.data.viewCount;
|
||||
}
|
||||
status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore';
|
||||
page.value++;
|
||||
} else {
|
||||
Service.Msg(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 删除评价
|
||||
const deleteEvaluation = (item : any) => {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这条评价吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
UserService.DelUserEvaluate(item.geId).then(res=>{
|
||||
if (res.code == 0) {
|
||||
Service.Msg(res.data)
|
||||
getData()
|
||||
} else {
|
||||
Service.Msg(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 浏览统计样式 */
|
||||
.view-stats {
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.stats-text {
|
||||
font-size: 26rpx;
|
||||
color: #4B5563;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 评价分类标签样式 */
|
||||
.evaluation-tabs {
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 评价列表样式 */
|
||||
.evaluation-list {
|
||||
padding: 0 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.evaluation-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
/* 商品信息样式 */
|
||||
.goods-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.goods-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 评价内容样式 */
|
||||
.evaluation-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.evaluation-text {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 48rpx;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 评价图片样式 */
|
||||
.evaluation-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.evaluation-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
/* 评价信息样式 */
|
||||
.evaluation-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.evaluation-date {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.evaluation-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hot-tag {
|
||||
font-size: 26rpx;
|
||||
color: #FF6600;
|
||||
margin-right: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
font-size: 26rpx;
|
||||
color: #FF6600;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 120rpx;
|
||||
|
||||
img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user