feat: 查积分、支付、拆弹、取消订单

supplied-h5/src/view/joyful-selection/profile/index.vue

@@ -6,7 +6,12 @@
         <van-icon name="ellipsis" />
       </div>
       <div class="user-row">
-        <van-image round width="52" height="52" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <van-image
+          round
+          width="52"
+          height="52"
+          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        />
         <div>
           <b>张三</b>
           <p>欢迎来到悦享优选</p>
@@ -15,9 +20,26 @@
     </section>
 
     <section class="asset-card">
-      <div><small>我的积分</small><b>2368</b></div>
-      <div><small>成长值</small><b>3680</b></div>
-      <div><small>优惠券</small><b>5</b></div>
+      <van-image
+        width="64"
+        height="64"
+        fit="contain"
+        :src="require('@/assets/joyful-selection/profile/coins.png')"
+      />
+      <div class="asset-info">
+        <small>我的积分</small>
+        <b>{{ formattedPoints }}</b>
+      </div>
+      <button class="points-link" type="button" @click="$router.push('/joyful-selection/points')">
+        <van-image
+          width="18"
+          height="18"
+          fit="contain"
+          :src="require('@/assets/joyful-selection/profile/gift.png')"
+        />
+        <span>积分明细</span>
+        <van-icon name="arrow" />
+      </button>
     </section>
 
     <section class="panel">
@@ -26,14 +48,24 @@
         <span @click="$router.push('/joyful-selection/orders')">全部订单 <van-icon name="arrow" /></span>
       </div>
       <van-grid :column-num="5" :border="false">
-        <van-grid-item v-for="item in orderItems" :key="item.text" :icon="item.icon" :text="item.text" />
+        <van-grid-item
+          v-for="item in orderItems"
+          :key="item.text"
+          :icon="item.icon"
+          :text="item.text"
+        />
       </van-grid>
     </section>
 
     <section class="panel service-panel">
       <div class="panel-title"><b>我的服务</b></div>
       <div class="coming-soon">
-        <van-image width="104" height="80" fit="contain" src="https://img.yzcdn.cn/vant/empty-image-default.png" />
+        <van-image
+          width="104"
+          height="80"
+          fit="contain"
+          src="https://img.yzcdn.cn/vant/empty-image-default.png"
+        />
         <p>敬请期待</p>
       </div>
     </section>
@@ -41,6 +73,9 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
+import { useUserStore } from '@/store/user'
+
 export default {
   name: 'JoyfulSelectionProfile',
   data: () => ({
@@ -50,8 +85,25 @@ export default {
       { icon: 'send-gift-o', text: '待收货' },
       { icon: 'todo-list-o', text: '已完成' },
       { icon: 'after-sale', text: '售后' }
-    ],
-  })
+    ]
+  }),
+  computed: {
+    ...mapState(useUserStore, ['pointsBalance']),
+    formattedPoints() {
+      return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
+        maximumFractionDigits: 2
+      })
+    }
+  },
+  created() {
+    this.fetchUserPoints().catch(error => {
+      console.warn('查询用户积分失败', error)
+      this.$toast(error.message || '查询用户积分失败')
+    })
+  },
+  methods: {
+    ...mapActions(useUserStore, ['fetchUserPoints'])
+  }
 }
 </script>
 
@@ -121,18 +173,20 @@ export default {
   position: relative;
   z-index: 1;
   display: flex;
+  min-height: 92px;
+  align-items: center;
+  gap: 12px;
   margin: -40px 10px 16px;
-  padding: 20px 0 18px;
+  padding: 14px 16px;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0 4px 16px rgba(61, 68, 92, .06);
 }
 
-.asset-card div {
+.asset-info {
   display: grid;
   flex: 1;
-  gap: 6px;
-  text-align: center;
+  gap: 5px;
 }
 
 .asset-card small {
@@ -142,7 +196,23 @@ export default {
 
 .asset-card b {
   color: #ff5b20;
-  font-size: 16px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.points-link {
+  display: inline-flex;
+  height: 44px;
+  min-width: 118px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 999px;
+  background: #fff0ec;
+  color: #ff5b20;
+  font-size: 13px;
   font-weight: 700;
 }