official-website-portals/src/views/components/Evaluate.vue

<template>
    <section class="section-padding bg-gradient-to-b from-dark to-dark/95 relative">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <div class="inline-block px-4 py-1 rounded-full bg-primary/20 text-secondary text-sm font-medium mb-4">
              客户评价
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">客户对我们的评价</h2>
            <p class="text-gray-400 text-lg">听听我们的客户怎么说，他们的满意是我们前进的动力</p>
          </div>
          
          <div class="grid md:grid-cols-3 gap-8">
            <!-- 评价1 -->
            <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover" v-for="(item,index) in commentList" :key="'commentitem' + index">
              <div class="flex items-center mb-6">
                <img :src="item.avatar" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
                <div>
                  <h4 class="font-semibold text-secondary">{{item.name}}</h4>
                  <p class="text-gray-400 text-sm">某科技园区</p>
                </div>
              </div>
              <div class="text-yellow-400 mb-4">
                <i class="fa fa-star mgr" v-for="(starit,sindex) in item.starShow" :key="'stat' + item.id + sindex"></i>
                <i class="fa fa-star-half-o mgr" v-if="item.starShowHalf"></i>
                <!-- <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i> -->
              </div>
              <p class="text-gray-400 italic">
                {{item.content}}
              </p>
            </div>
            
            <!-- 评价2 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
              <div class="flex items-center mb-6">
                <img src="https://picsum.photos/id/65/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
                <div>
                  <h4 class="font-semibold text-secondary">李局长</h4>
                  <p class="text-gray-400 text-sm">某应急管理局</p>
                </div>
              </div>
              <div class="text-yellow-400 mb-4">
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star-half-o mgr"></i>
              </div>
              <p class="text-gray-400 italic">
                "应急指挥系统在几次突发事件中发挥了关键作用，反应迅速，调度高效。明君科技的技术支持也非常及时，解决问题能力强，是可靠的合作伙伴。"
              </p>
            </div> -->
            
            <!-- 评价3 -->
            <!-- <div class="bg-dark/60 border border-primary/20 rounded-xl p-8 card-hover">
              <div class="flex items-center mb-6">
                <img src="https://picsum.photos/id/91/100/100" alt="客户头像" class="w-14 h-14 rounded-full object-cover mr-4 border-2 border-secondary">
                <div>
                  <h4 class="font-semibold text-secondary">王校长</h4>
                  <p class="text-gray-400 text-sm">某大学</p>
                </div>
              </div>
              <div class="text-yellow-400 mb-4">
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
                <i class="fa fa-star mgr"></i>
              </div>
              <p class="text-gray-400 italic">
                "智慧校园平台极大地提升了我们的管理效率和教学质量，学生和老师的反馈都非常好。明君科技的定制化能力很强，能够根据我们的需求提供个性化解决方案。"
              </p>
            </div> -->
          </div>
        </div>
    </section>
</template>
<script setup>
import Website from "@/api/api";
import { computed, onMounted, ref, watch } from 'vue';
onMounted(() => {
  getCommentData()
})
const commentList = ref([])

const getCommentData = async () => {
  console.log('00')
  const website = new Website()
  const res = await website.getCommentPage({pageNum: 1,pageSize: 3})
  console.log('77',res)
  if(res.code == 200){
    let resLs = res.data?.records || []
    if(resLs.length > 0){
      resLs.forEach(element => {
        let star = Number(element.star)
        if(!star){
          element.starShow = 0
          element.starShowHalf = false
        } else {
          if(Number.isInteger(star)){
            element.starShow = star
            element.starShowHalf = false
          } else {
            element.starShow = Math.trunc(star)
            element.starShowHalf = true
          }
        }
      });
      commentList.value = resLs
    } else {
      commentList.value = [
        {
          id: 1790,
          name: '张经理',avatar: 'https://picsum.photos/id/64/100/100',
          remark: '某科技园区',
          starShow: 5,
          starShowHalf: false,
          content: '"明君科技为我们园区提供的智能管理系统非常出色，不仅提升了管理效率，也为入驻企业提供了更好的服务体验。他们的技术团队专业且负责，值得信赖。"',star: 4.5
        } // 测试数据
      ]
    }
  }
}
</script>
<style lang="scss">

</style>