From 41b4bda9bdea226ae5228c8a9a6aee988c9869a1 Mon Sep 17 00:00:00 2001
From: "tianhaoyun@didiglobal.com" <tianhaoyun@didiglobal.com>
Date: Mon, 13 Jan 2025 15:35:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20rate=E4=B8=AD=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=8F=92=E6=A7=BD=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/pages/rate/index.mpx                  | 24 ++++++++++++++-----
 package.json                                  |  2 +-
 .../__tests__/components/rate/rate.spec.js    |  6 ++---
 .../mpx-cube-ui/src/components/rate/index.mpx | 10 ++++----
 .../mpx-cube-ui/src/components/rate/index.ts  |  4 ++--
 .../src/components/rate/rate-item-index.ts    |  6 ++---
 .../src/components/rate/rate-item.mpx         |  7 +++---
 7 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/example/pages/rate/index.mpx b/example/pages/rate/index.mpx
index 3181d38..e2a8fd0 100644
--- a/example/pages/rate/index.mpx
+++ b/example/pages/rate/index.mpx
@@ -3,7 +3,10 @@
     <base-container>
       <view class="content">
         <view class="rate-wrapper">
-          <rate wx:model="{{value}}" wx:model-prop="value" disabled="{{disabled}}" max="{{_max}}" justify="{{justify}}" allowHalf="{{allowHalf}}">
+          <rate wx:model="{{value}}" wx:model-prop="value" disabled="{{disabled}}" isCustomize="{{customize}}" max="{{_max}}" justify="{{justify}}" allowHalf="{{allowHalf}}">
+            <rate-item wx:for="{{_max}}" wx:key="item" index="{{item}}" value="{{value}}">
+              <view class="rate-item-demo"></view>
+            </rate-item>
           </rate>
         </view>
         <view class="options">
@@ -39,8 +42,8 @@
                   <view class="item">CustomStar</view>
                   <switch 
                     color="{{ switchColor }}"
-                    checked="{{ customStar }}"
-                    bindchange="updateCustomStar"
+                    checked="{{ customize }}"
+                    bindchange="updateCustomize"
                   />
                 </view>
                 <view class="group-item">
@@ -70,7 +73,7 @@
     data: {
       value: 4.5,
       max: '5',
-      customStar: false,
+      customize: false,
       justify: false,
       allowHalf: true,
       disabled: true,
@@ -98,9 +101,9 @@
         const { value } = e.detail
         this.justify = value
       },
-      updateCustomStar (e) {
+      updateCustomize (e) {
         const { value } = e.detail
-        this.customStar = value
+        this.customize = value
       },
       updateAllowHalf (e) {
         const { value } = e.detail
@@ -115,6 +118,11 @@
   padding-top: 10px
   height 100%
   background-color rgba(239, 239, 244, .7)
+  .rate-item-demo
+    width: 100%
+    height: 100%
+    background-size: 100%
+    background-color: grey
   .options
     margin: 20px 0
     .rate-option-list
@@ -144,6 +152,10 @@
           border-bottom: none
 .desc
   margin-top 15px
+
+.cube-rate-item_active
+  .rate-item-demo
+    background-color: orange
 </style>
 
 <script type="application/json">
diff --git a/package.json b/package.json
index 30dbbb3..1219860 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "docs:prod": "npm run example:build && NODE_ENV=production npm run docs:build && cp -r ./example/dist/web ./docs/.vuepress/dist/example",
     "example:build": "cd example && npm run build:web",
     "example:dev": "cd example && npm run watch:web",
-    "example:mp:dev": "cd example && npm run watch:mp",
+    "example:mp:dev": "cd example && npm run watch:ali",
     "fix": "eslint --fix --ext .js,.ts,.mpx packages/",
     "lint": "eslint --ext .js,.ts,.mpx packages/",
     "prepare": "husky install",
diff --git a/packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js b/packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js
index b2a5ebc..8fde1b1 100644
--- a/packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js
+++ b/packages/mpx-cube-ui/__tests__/components/rate/rate.spec.js
@@ -42,9 +42,9 @@ describe('component rate unit test', function () {
     // })
 
     it(' wx:model', async () => {
-      // const rates = component.querySelector('rate').querySelector('.cube-rate-items')
-      const rates = component.querySelector('rate').querySelector('.cube-rate-items').querySelectorAll('.cube-rate-item')
-      console.log(44, rates.length)
+      // const rates = component.querySelector('rate').querySelectorAll('rate-item')
+      const rates = component.querySelector('rate').querySelector('.cube-rate-items')
+      console.log(44, rates.dom.innerHTML)
       const rate1 = rates[0].querySelector('.cube-rate-item_active')
       const rate2 = rates[1].querySelector('.cube-rate-item-def')
       const rate3 = rates[2].querySelector('.cube-rate-item-def')
diff --git a/packages/mpx-cube-ui/src/components/rate/index.mpx b/packages/mpx-cube-ui/src/components/rate/index.mpx
index 2ea5533..871ed2f 100644
--- a/packages/mpx-cube-ui/src/components/rate/index.mpx
+++ b/packages/mpx-cube-ui/src/components/rate/index.mpx
@@ -8,10 +8,11 @@
     catchmousedown="handleStart"
     catchmousemove="handleMove"
     catchmouseup="handleEnd">
-    <slot wx:if="{{isCustom}}">
-    </slot>
-    <view class="cube-rate-items" id="cube-rate-items" wx:class="{{rateClass}}" wx:else>
-      <rate-item class="rate-item" wx:for="{{max}}" wx:key="item" index="{{item}}" value="{{value}}" isCustom="{{false}}"/>
+    <view class="cube-rate-items" id="cube-rate-items" wx:class="{{rateClass}}" >
+      <slot wx:if="{{isCustomize}}"></slot>
+      <block wx:else>
+        <rate-item wx:for="{{max}}" wx:key="item" index="{{item}}" value="{{value}}" isCustomize="{{false}}"/>
+      </block>
     </view>
   </view>
 </template>
@@ -29,7 +30,6 @@
     vertical-align: top
     flex-wrap: nowrap
     max-width: $var(rate-max-width)
-
   .cube-rate-justify
     width: $var(rate-justify-width)
     justify-content: space-between
diff --git a/packages/mpx-cube-ui/src/components/rate/index.ts b/packages/mpx-cube-ui/src/components/rate/index.ts
index 5e2c20d..c7ea672 100644
--- a/packages/mpx-cube-ui/src/components/rate/index.ts
+++ b/packages/mpx-cube-ui/src/components/rate/index.ts
@@ -50,7 +50,7 @@ createComponent({
     /**
      * @description 是否自定义
      */
-    isCustom: {
+    isCustomize: {
       type: Boolean,
       value: false
     }
@@ -77,7 +77,7 @@ createComponent({
   },
   lifetimes: {
     created() {
-      this.domName = this.isCustom ? '#cube-rate' : '#cube-rate-items'
+      this.domName = this.isCustomize ? '#cube-rate' : '#cube-rate-items'
       this.mousePressed = false
     }
   },
diff --git a/packages/mpx-cube-ui/src/components/rate/rate-item-index.ts b/packages/mpx-cube-ui/src/components/rate/rate-item-index.ts
index 72affa4..b0f7ea3 100644
--- a/packages/mpx-cube-ui/src/components/rate/rate-item-index.ts
+++ b/packages/mpx-cube-ui/src/components/rate/rate-item-index.ts
@@ -1,5 +1,5 @@
 import { createComponent } from '@mpxjs/core'
-import { isWeb } from '../../common/helper/utils'
+import { isWx } from '../../common/helper/utils'
 
 createComponent({
   properties: {
@@ -11,14 +11,14 @@ createComponent({
       type: Number,
       value: 0
     },
-    isCustom: {
+    isCustomize: {
       type: Boolean,
       value: true
     }
   },
   computed: {
     rateItemClass() {
-      const indexValue = isWeb ? this.index : this.index + 1
+      const indexValue = isWx ? this.index + 1 : this.index
       return {
         'cube-rate-item_active': indexValue <= this.value,
         'cube-rate-item_half_active': indexValue === this.value + 0.5
diff --git a/packages/mpx-cube-ui/src/components/rate/rate-item.mpx b/packages/mpx-cube-ui/src/components/rate/rate-item.mpx
index d8f0edd..954bbe8 100644
--- a/packages/mpx-cube-ui/src/components/rate/rate-item.mpx
+++ b/packages/mpx-cube-ui/src/components/rate/rate-item.mpx
@@ -1,7 +1,8 @@
 <template>
   <view class="cube-rate-item" wx:class="{{rateItemClass}}">
-    <slot wx:if="{{isCustom}}"></slot>
-    <view wx:else class="cube-rate-item-def"></view>
+    <view class="cube-rate-item-def">
+      <slot></slot>
+    </view>
   </view>
 </template>
 <script src="./rate-item-index.ts" lang="ts"></script>
@@ -20,8 +21,6 @@
     content: ""
     display: block
     padding: $var(rate-item-after-padding)
-  &:last-child
-    margin-right: $var(rate-item-last-child-margin-right)
   .cube-rate-item-def
     position: absolute
     width: $var(rate-item-def-width)