461 lines
13 KiB
Vue
461 lines
13 KiB
Vue
<template>
|
|
<div class="c-evaluate-warp">
|
|
<div class="evaluate-warp-top">
|
|
<div class="user-evaluate">
|
|
<div class="score">{{ score }}</div>
|
|
<div class="score-tips">
|
|
<div class="tips">用户评价</div>
|
|
<div class="score-val"><el-rate v-model="score" :allow-half="true" :colors="colors" size="large" :disabled="true" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="(n, index) in totalList" :key="n.name" class="top-tag-btn" @click="selectLabel(n.name)">
|
|
<div class="tag-btn-warp">
|
|
<div class="tag-btn-pos" :class="currentlabel != n.name ? 'normal' : 'act'">
|
|
<span class="label-title">{{ n.title || '--' }}</span>
|
|
<span class="label-num">{{ n.num || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="user-do-warp">
|
|
<div class="do-title">用户评价</div>
|
|
<div class="do-date"><el-rate v-model="score" allow-half="true" :colors="colors" size="large" :disabled="false" /></div>
|
|
<div class="do-title">评价内容</div>
|
|
<div class="do-fill">
|
|
<el-input v-model="remark" type="textarea" placeholder="质量好，品质过硬，值得推荐！"></el-input>
|
|
<!-- <upImg></upImg> -->
|
|
</div>
|
|
<div class="is-anonymous">
|
|
<div class="do-is" :class="isAnonymous ? 'do-is-act' : 'do-is-no'" @click="doAnonymous">
|
|
<div class="is-radio"></div>
|
|
<span class="do-is-txt">匿名评价</span>
|
|
</div>
|
|
<div class="do-submit">
|
|
<el-button type="primary" @click="submitEvaluate">提交评价</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evaluate-list">
|
|
<div class="list-content">
|
|
<template v-for="(e, index) in 1" :key="index">
|
|
<div class="evaluate-item">
|
|
<div class="evaluate-item-top">
|
|
<div class="user-info">
|
|
<div class="info-img">
|
|
<el-image :src="getAssetsFile('images/avatar.jfif')?.href ?? ''" fit="cover" />
|
|
</div>
|
|
<div class="info-txt">
|
|
<div class="info-txt-pos">
|
|
<div class="info-txt-c">
|
|
<div class="name">{{ mockData[currentMock].userName }}</div>
|
|
<div class="time">{{ mockData[currentMock].createTime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="score-val">
|
|
<el-rate :model-value="mockData[currentMock].stars" :colors="colors" size="large" :disabled="true" />
|
|
</div>
|
|
</div>
|
|
<div class="evaluate-item-content">
|
|
<div class="content-txt">{{ mockData[currentMock].content }}</div>
|
|
<div class="content-img">
|
|
<template v-for="(m, indexm) in 1" :key="indexm">
|
|
<div class="img-item">
|
|
<el-image :src="goodUrl ? goodUrl : ''" fit="cover" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
|
import upImg from '@/components/upImg.vue';
|
|
import { agriculturalContent } from '@/apis/agricultural.js';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
let score = ref(4.5);
|
|
|
|
const props = defineProps({
|
|
goodId: {
|
|
type: Number,
|
|
default: () => 0,
|
|
},
|
|
goodUrl: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
});
|
|
|
|
const currentMock = ref(0);
|
|
|
|
const mockData = ref([
|
|
{
|
|
userName: '用户17378225',
|
|
createTime: '2025.02.05',
|
|
content: '正准备复购,基本没踩雷！推荐购买。',
|
|
stars: 4,
|
|
},
|
|
{
|
|
userName: '用户35613587',
|
|
createTime: '2025.02.06',
|
|
content: '平台服务：发货很快，来平台买过好多次了，喜欢平台服务。',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户33578135',
|
|
createTime: '2025.02.08',
|
|
content: '物流挺快，到货了也没发现有坏损。',
|
|
stars: 4.5,
|
|
},
|
|
{
|
|
userName: '用户23467467',
|
|
createTime: '2025.02.10',
|
|
content: '包装无损坏，拍品也很好，以后就在平台上购买了，放心，省心，还在犹豫亲们可以下单啦！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户78613489',
|
|
createTime: '2025.02.14',
|
|
content: '实物跟图片描述的一样，不错，值的赞，值得推荐！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户23497825',
|
|
createTime: '2025.02.18',
|
|
content: '少发了商品，在平台联系商家后处理速度很快，马上补发了，商家态度也好。',
|
|
stars: 4,
|
|
},
|
|
{
|
|
userName: '用户35789421',
|
|
createTime: '2025.02.24',
|
|
content: '买错了。退换速度很快，商家很好交流，平台处理速度也很快。',
|
|
stars: 4,
|
|
},
|
|
{
|
|
userName: '用户83154378',
|
|
createTime: '2025.02.26',
|
|
content:
|
|
'货品质量非常好，与平台页面描述的完全一致，非常满意，完全超出期望值，发货速度非常快，包装非常仔细严实，运送速度很快，很满意的一次平台购物！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户61398765',
|
|
createTime: '2025.03.01',
|
|
content: '东西很好，价美物廉！收到的时候包装完整，货品比我想象中的还要好！不得不得竖起大拇指。下次需要的时候我还会再来的！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户91357862',
|
|
createTime: '2025.03.05',
|
|
content: '包装很完整，没有破损。发货迅速，态度很好，很满意！很好，很好！没想到平台的服务这么好，商品质量好而价低廉，下次还来，祝生意兴隆！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户31578673',
|
|
createTime: '2025.03.08',
|
|
content: '先说商品质量，总体不错，包装严实，再为平台服务点赞啦，最后点评快递发货很快。希望平台有更多优惠，祝生意兴隆！',
|
|
stars: 5,
|
|
},
|
|
{
|
|
userName: '用户43124789',
|
|
createTime: '2025.03.10',
|
|
content:
|
|
'超级喜欢，非常支持，质量非常好，与平台描述的完全一致，非常满意，完全超出期望值，发货速度非常快，包装非常仔细严实，物流公司服务态度很好，运送速度很快，很满意的一次购物。平台客服态度很专业、热情，有问必答，回复也很快。',
|
|
stars: 5,
|
|
},
|
|
]);
|
|
|
|
function getRandomIndex(mockData) {
|
|
if (!Array.isArray(mockData) || mockData.length === 0) {
|
|
throw new Error('mockData 必须是非空数组');
|
|
}
|
|
currentMock.value = Math.floor(Math.random() * mockData.length);
|
|
}
|
|
|
|
const data = reactive({
|
|
type: 1,
|
|
current: 1,
|
|
size: 20,
|
|
goodId: 0,
|
|
});
|
|
|
|
const colors = ref(['#99A9BF', '#25BF82', '#25BF82']);
|
|
const totalList = reactive([
|
|
{ title: '全部', name: 'all', num: 1 },
|
|
{ title: '成活率高', name: 'label1', num: 0 },
|
|
{ title: '抗病率高', name: 'label2', num: 0 },
|
|
{ title: '抗倒伏率高', name: 'label3', num: 0 },
|
|
{ title: '坐果率高', name: 'label4', num: 0 },
|
|
]);
|
|
let currentlabel = ref('all');
|
|
|
|
const selectLabel = (name) => {
|
|
currentlabel.value = name;
|
|
};
|
|
|
|
let remark = ref('');
|
|
let isAnonymous = ref(false);
|
|
|
|
const doAnonymous = () => {
|
|
isAnonymous.value = !isAnonymous.value;
|
|
};
|
|
|
|
onMounted(() => {
|
|
data.goodId = props.goodId;
|
|
getRandomIndex(mockData.value);
|
|
// getContentList('1');
|
|
});
|
|
|
|
const getContentList = (type) => {
|
|
data.type = type;
|
|
agriculturalContent(data).then((res) => {
|
|
if (res.code === '200') {
|
|
console.log(res);
|
|
}
|
|
});
|
|
};
|
|
|
|
const submitEvaluate = () => {};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.c-evaluate-warp {
|
|
width: 100%;
|
|
::v-deep() {
|
|
.el-rate {
|
|
.el-icon {
|
|
font-size: 22px !important;
|
|
}
|
|
}
|
|
}
|
|
.evaluate-warp-top {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
.user-evaluate {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
.score,
|
|
.score-tips {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.score {
|
|
width: 80px;
|
|
height: 80px;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
color: $color-main;
|
|
background: $color-main-table-header;
|
|
line-height: 80px;
|
|
}
|
|
.score-tips {
|
|
padding-left: 16px;
|
|
vertical-align: middle;
|
|
.tips {
|
|
font-size: 18px;
|
|
color: $color-666;
|
|
}
|
|
.score-val {
|
|
}
|
|
}
|
|
}
|
|
.top-tag-btn {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
.tag-btn-warp {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.tag-btn-pos {
|
|
padding: 0 16px;
|
|
height: 48px;
|
|
font-size: 18px;
|
|
border-radius: 16px;
|
|
line-height: 48px;
|
|
&.normal {
|
|
background: $color-main-table-header;
|
|
}
|
|
&.act {
|
|
font-weight: 600;
|
|
color: $color-fff;
|
|
background: $color-main;
|
|
}
|
|
.label-title,
|
|
.label-num {
|
|
display: inline-block;
|
|
}
|
|
.label-num {
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.user-do-warp {
|
|
width: 100%;
|
|
.do-title {
|
|
width: 100%;
|
|
font-size: 18px;
|
|
line-height: 36px;
|
|
}
|
|
.do-fill {
|
|
padding: 16px;
|
|
min-height: 100px;
|
|
border-radius: 16px;
|
|
background: $color-f5;
|
|
::v-deep() {
|
|
.el-textarea__inner {
|
|
font-size: 16px;
|
|
color: $color-666;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
.is-anonymous {
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
margin: 16px 0;
|
|
width: 100%;
|
|
.do-is {
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
&.do-is-act {
|
|
.is-radio {
|
|
border: 1px solid $color-main;
|
|
background: $color-main;
|
|
}
|
|
.do-is-txt {
|
|
color: $color-main;
|
|
}
|
|
}
|
|
&.do-is-no {
|
|
.is-radio {
|
|
border: 1px solid $color-da;
|
|
background: $color-fff;
|
|
}
|
|
.do-is-txt {
|
|
color: $color-999;
|
|
}
|
|
}
|
|
.do-is-txt,
|
|
.is-radio {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.do-is-txt {
|
|
padding-left: 8px;
|
|
}
|
|
.is-radio {
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
}
|
|
.is-radio::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: $color-fff;
|
|
content: ' ';
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.evaluate-list {
|
|
width: 100%;
|
|
.list-content {
|
|
width: 100%;
|
|
.evaluate-item {
|
|
margin: 16px 0;
|
|
width: 100%;
|
|
.evaluate-item-top {
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
.user-info {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
width: calc(100% - 150px);
|
|
.info-img,
|
|
.info-txt {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.info-img {
|
|
overflow: hidden;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
}
|
|
.info-txt {
|
|
padding-left: 16px;
|
|
.info-txt-pos {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
height: 64px;
|
|
flex-direction: column;
|
|
.name {
|
|
font-size: 16px;
|
|
}
|
|
.time {
|
|
font-size: 14px;
|
|
color: $color-999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.score-val {
|
|
width: 150px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.evaluate-item-content {
|
|
width: 100%;
|
|
.content-txt {
|
|
width: 100%;
|
|
font-size: 18px;
|
|
}
|
|
.content-img {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
margin-top: 24px;
|
|
.img-item {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: 138px;
|
|
height: 138px;
|
|
border-radius: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|