评分组件

src/Components/Rating/Rating.vue

+<template>
+  <div class="rating">
+    <div v-for="index in maxStars" :key="index" class="star" :style="{ fontSize: fontSize }">
+      <div
+        class="filled"
+        :style="{
+          width: getStarWidth(index) + '%',
+          color: color,
+        }"
+      >
+        ★
+      </div>
+      ★
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Rating',
+  props: {
+    score: {
+      type: Number,
+      required: true,
+    },
+    maxStars: {
+      type: Number,
+      default: 5,
+    },
+    color: {
+      type: String,
+      default: '#D44118',
+    },
+    fontSize: {
+      type: String,
+      default: '30rpx',
+    },
+  },
+  methods: {
+    getStarWidth(index) {
+      const fullStars = Math.floor(this.score);
+      const fraction = this.score - fullStars;
+
+      if (index <= fullStars) {
+        return 100;
+      } else if (index === fullStars + 1) {
+        return fraction * 100;
+      } else {
+        return 0;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.rating {
+  display: flex;
+}
+
+.star {
+  position: relative;
+  font-size: 22rpx;
+  color: #d3d3d3;
+}
+
+.filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/pages/shop/shop.vue

@@ -45,14 +45,15 @@
                 <text class="tj">推荐</text>
               </view>
               <view class="score-icon">
-                <wd-rate
+                <!-- <wd-rate
                   color="#fff"
                   readonly
                   v-model="shopInfo.grade"
                   size="22rpx"
                   space="8rpx"
                   :active-color="['#FA5151']"
-                />
+                /> -->
+                <myRate :score="grade" />
               </view>
             </view>
             <view class="shop-business-hours">
@@ -313,7 +314,9 @@ import {
   addImgUrlPrefix,
   navigationSelect,
 } from '@/utils/common';
+import myRate from '@/Components/Rating/Rating.vue';
 const imgUrl = import.meta.env.VITE_APP_IMG_URL;
+const grade = ref(1.8);
 const current = ref(0);
 const old = reactive({ scrollTop: 0 });
 const activeId = ref(1);