daimp-front/sub-operation-service/src/views/ecommerce/components/evaluate.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>