微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/miniprogram/components/heart-icon/heart-icon.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

apps/miniprogram - 副本/miniprogram/components/heart-icon/heart-icon.ts

@@ -0,0 +1,30 @@
+Component({
+  properties: {
+    /** 评分 0-10，超出范围自动 clamp */
+    score: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    heartEmoji: '💙',
+  },
+
+  observers: {
+    score(val: number) {
+      const s = val < 0 ? 0 : val > 10 ? 10 : val
+      let emoji: string
+      if (s > 8.5) {
+        emoji = '💖'
+      } else if (s > 7) {
+        emoji = '🧡'
+      } else if (s > 5) {
+        emoji = '💛'
+      } else {
+        emoji = '💙'
+      }
+      this.setData({ heartEmoji: emoji })
+    },
+  },
+})

apps/miniprogram - 副本/miniprogram/components/heart-icon/heart-icon.wxml

@@ -0,0 +1 @@
+<text class="heart-icon">{{heartEmoji}}</text>

apps/miniprogram - 副本/miniprogram/components/heart-icon/heart-icon.wxss

@@ -0,0 +1,6 @@
+.heart-icon {
+  font-size: 22rpx;
+  line-height: 1;
+  position: relative;
+  top: -4rpx;
+}