369 lines
9.7 KiB
Vue
369 lines
9.7 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, indexe) in 2" :key="indexe">
|
|
<div class="evaluate-item">
|
|
<div class="evaluate-item-top">
|
|
<div class="user-info">
|
|
<div class="info-img">
|
|
<el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />
|
|
</div>
|
|
<div class="info-txt">
|
|
<div class="info-txt-pos">
|
|
<div class="info-txt-c">
|
|
<div class="name">用户名888888</div>
|
|
<div class="time">2025.01.01</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="score-val">
|
|
<el-rate :model-value="3" :colors="colors" size="large" :disabled="true" />
|
|
</div>
|
|
</div>
|
|
<div class="evaluate-item-content">
|
|
<div class="content-txt">经过一段时间种植，都长出来了，也结出西红柿，中等个头，入口鲜嫩。性价比挺高，非常值得推荐。</div>
|
|
<div class="content-img">
|
|
<template v-for="(m, indexm) in 2" :key="indexm">
|
|
<div class="img-item">
|
|
<el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? ''" 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,
|
|
},
|
|
});
|
|
|
|
const data = reactive({
|
|
type: 1,
|
|
current: 1,
|
|
size: 20,
|
|
goodId: 0,
|
|
});
|
|
|
|
const colors = ref(['#99A9BF', '#25BF82', '#25BF82']);
|
|
const totalList = reactive([
|
|
{ title: '全部', name: 'all', num: 912 },
|
|
{ title: '成活率高', name: 'label1', num: 458 },
|
|
{ title: '抗病率高', name: 'label2', num: 242 },
|
|
{ title: '抗倒伏率高', name: 'label3', num: 106 },
|
|
{ title: '坐果率高', name: 'label4', num: 106 },
|
|
]);
|
|
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;
|
|
getContentList();
|
|
});
|
|
|
|
const getContentList = (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>
|