支付分样式优化

haha-admin-web/stylelint.config.js

@@ -3,25 +3,11 @@
 /** @type {import("stylelint").Config} */
 export default {
   extends: [
-    "stylelint-config-standard",
-    "stylelint-config-html/vue",
+    "stylelint-config-standard-scss",
+    "stylelint-config-recommended-vue/scss",
     "stylelint-config-recess-order"
   ],
-  plugins: ["stylelint-scss", "stylelint-order", "stylelint-prettier"],
-  overrides: [
-    {
-      files: ["**/*.(css|html|vue)"],
-      customSyntax: "postcss-html"
-    },
-    {
-      files: ["*.scss", "**/*.scss"],
-      customSyntax: "postcss-scss",
-      extends: [
-        "stylelint-config-standard-scss",
-        "stylelint-config-recommended-vue/scss"
-      ]
-    }
-  ],
+  plugins: ["stylelint-prettier"],
   rules: {
     "prettier/prettier": true,
     "selector-class-pattern": null,

haha-mp/src/components/BrandSlogan.vue

@@ -4,7 +4,7 @@
       <image
         class="brand-slogan__logo"
         :class="{ 'brand-slogan__logo--mono': mono }"
-        src="/static/icons/payscore.svg"
+        src="/static/icons/pay-socre-logo.png"
         mode="aspectFit"
       ></image>
       <view v-if="hasDivider" class="brand-slogan__divider" :class="{ 'brand-slogan__divider--dark': dark }"></view>
@@ -18,8 +18,6 @@ import { computed } from 'vue'
 
 interface Props {
   type?: 'standard' | 'score' | 'orderComplete'
-  score?: number
-  serviceType?: string
   dark?: boolean
   compact?: boolean
   mono?: boolean
@@ -27,8 +25,6 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'standard',
-  score: 550,
-  serviceType: '先享后付',
   dark: false,
   compact: false,
   mono: false
@@ -38,15 +34,7 @@ const modeClass = computed(() => `brand-slogan--${props.type}`)
 
 const hasDivider = computed(() => props.type === 'orderComplete')
 
-const displayText = computed(() => {
-  if (props.type === 'score') {
-    return `微信支付分 ${props.score}分及以上优享`
-  }
-  if (props.type === 'orderComplete') {
-    return `微信支付分 | ${props.serviceType}`
-  }
-  return `微信支付分 ${props.serviceType}`
-})
+const displayText = '微信支付分 | 550分以上优享'
 </script>
 
 <style lang="scss" scoped>

haha-mp/src/pages/payscore/enable.vue

@@ -1,20 +1,15 @@
 <template>
   <view class="container">
     <!-- 微信风格头部 -->
-    <view class="wx-header">
+    <!-- <view class="wx-header">
       <view class="header-content">
         <image class="header-logo" src="/static/icons/payscore-white.svg" mode="aspectFit"></image>
         <text class="header-title">微信支付分</text>
       </view>
-    </view>
+    </view> -->
 
     <!-- 主要内容区 -->
     <view class="content">
-      <!-- 品牌标语 -->
-      <view class="slogan-wrapper">
-        <BrandSlogan type="score" :score="550" :dark="true" />
-      </view>
-
       <!-- 分数要求卡片 - 突出显示 -->
       <view class="score-card">
         <view class="score-badge">必需条件</view>
@@ -36,7 +31,7 @@
             <view class="benefit-icon benefit-icon-1">
               <text class="icon-emoji">💳</text>
             </view>
-            <text class="benefit-title">先享后付</text>
+            <text class="benefit-title">550分优享</text>
             <text class="benefit-desc">开门后付款</text>
           </view>
           
@@ -58,12 +53,27 @@
         </view>
       </view>
 
-      <!-- 详细说明 -->
+      <!-- 使用须知 -->
       <view class="info-card">
-        <text class="card-title">什么是微信支付分？</text>
-        
+        <text class="card-title">使用须知</text>
+
         <view class="card-content">
-          <text class="desc-text">微信支付分是微信支付基于历史行为作出的综合评分，用于评估用户的信用水平。开通后可享受先享后付、免押金等便捷服务。</text>
+          <view class="notice-item">
+            <text class="notice-icon notice-icon--correct">✓</text>
+            <text class="notice-text">请依次排队购买，有序选购商品</text>
+          </view>
+          <view class="notice-item">
+            <text class="notice-icon notice-icon--correct">✓</text>
+            <text class="notice-text">选购完成后请随手关门，避免影响他人</text>
+          </view>
+          <view class="notice-item">
+            <text class="notice-icon notice-icon--wrong">✗</text>
+            <text class="notice-text">请勿遮挡柜内摄像头，确保商品识别准确</text>
+          </view>
+          <view class="notice-item">
+            <text class="notice-icon notice-icon--wrong">✗</text>
+            <text class="notice-text">请勿向柜中放入杂物或非购买物品</text>
+          </view>
         </view>
       </view>
 
@@ -99,7 +109,7 @@
           <view class="step-number step-4">4</view>
           <view class="step-content">
             <text class="step-title">开通成功</text>
-            <text class="step-desc">成功后即可使用先享后付服务</text>
+            <text class="step-desc">成功后即可使用微信支付分服务</text>
           </view>
         </view>
       </view>
@@ -136,9 +146,8 @@
         </view>
       </button>
       
-      <view class="service-section">
-        <text class="service-text">如有疑问，请联系客服</text>
-        <text class="service-link" @click="contactService">{{ customerServicePhone }}</text>
+      <view class="slogan-wrapper">
+        <BrandSlogan type="score" :dark="true" />
       </view>
     </view>
   </view>
@@ -324,7 +333,7 @@ checkPayscoreStatus()
 /* 微信风格头部 - 纯色背景 */
 .wx-header {
   width: 100%;
-  background: $color-success;
+  background: $color-wechat-green;
   padding: 32rpx 40rpx 28rpx;
   box-sizing: border-box;
   
@@ -395,7 +404,7 @@ checkPayscoreStatus()
     .score-number {
       font-size: 96rpx;
       font-weight: bold;
-      color: $color-success;
+      color: $color-wechat-green;
       line-height: 1;
     }
     
@@ -410,13 +419,13 @@ checkPayscoreStatus()
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(76, 175, 80, 0.05);
+    background: rgba(7, 193, 96, 0.05);
     padding: 16rpx 24rpx;
     border-radius: 12rpx;
     
     .desc-icon {
       font-size: 28rpx;
-      color: $color-success;
+      color: $color-wechat-green;
       margin-right: 12rpx;
     }
     
@@ -464,7 +473,7 @@ checkPayscoreStatus()
       align-items: center;
       justify-content: center;
       margin-bottom: 20rpx;
-      background: $color-success;
+      background: $color-wechat-green;
         
       .icon-emoji {
         font-size: 40rpx;
@@ -503,11 +512,36 @@ checkPayscoreStatus()
   }
   
   .card-content {
-    .desc-text {
+    .notice-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 16rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .notice-icon {
+      font-size: 28rpx;
+      font-weight: bold;
+      margin-right: 12rpx;
+      flex-shrink: 0;
+      line-height: 1.6;
+
+      &--correct {
+        color: $color-wechat-green;
+      }
+
+      &--wrong {
+        color: $color-error;
+      }
+    }
+
+    .notice-text {
       font-size: 28rpx;
       color: $color-text-secondary;
       line-height: 1.6;
-      display: block;
     }
   }
 }
@@ -549,13 +583,13 @@ checkPayscoreStatus()
       color: #FFFFFF;
       margin-right: 24rpx;
       flex-shrink: 0;
-      background: $color-success;
+      background: $color-wechat-green;
       
       &.step-1,
       &.step-2,
       &.step-3,
       &.step-4 {
-        background: $color-success;
+        background: $color-wechat-green;
       }
     }
     
@@ -585,8 +619,8 @@ checkPayscoreStatus()
   margin-bottom: 30rpx;
   
   .tips-card {
-    background: rgba(76, 175, 80, 0.05);
-    border: 2rpx solid rgba(76, 175, 80, 0.2);
+    background: rgba(7, 193, 96, 0.05);
+    border: 2rpx solid rgba(7, 193, 96, 0.2);
     border-radius: 16rpx;
     padding: 32rpx 28rpx;
     display: flex;
@@ -594,7 +628,7 @@ checkPayscoreStatus()
     
     .tips-icon {
       font-size: 40rpx;
-      color: $color-success;
+      color: $color-wechat-green;
       margin-right: 20rpx;
       flex-shrink: 0;
     }
@@ -620,7 +654,7 @@ checkPayscoreStatus()
         }
         
         .tip-dot {
-          color: $color-success;
+          color: $color-wechat-green;
           font-size: 28rpx;
           margin-right: 12rpx;
           flex-shrink: 0;
@@ -650,7 +684,7 @@ checkPayscoreStatus()
   .enable-button {
     width: 100%;
     height: 88rpx;
-    background: $color-success;
+    background: $color-wechat-green;
     border-radius: 44rpx;
     border: none;
     display: flex;
@@ -693,7 +727,7 @@ checkPayscoreStatus()
     
     .service-link {
       font-size: 24rpx;
-      color: $color-success;
+      color: $color-wechat-green;
       font-weight: 500;
     }
   }

haha-mp/src/pages/payscore/scoreLow.vue

@@ -0,0 +1,376 @@
+<template>
+  <view class="container">
+    <!-- 警告头部 -->
+    <view class="header">
+      <view class="header-bg"></view>
+      <!-- 警告图标 -->
+      <view class="warn-icon-wrap">
+        <svg class="warn-icon" viewBox="0 0 120 120">
+          <circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="4" opacity="0.3"/>
+          <circle cx="60" cy="60" r="44" fill="rgba(255,255,255,0.15)"/>
+          <line x1="60" y1="32" x2="60" y2="70" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>
+          <circle cx="60" cy="86" r="5" fill="#FFFFFF"/>
+        </svg>
+      </view>
+      <text class="header-title">分数未达标</text>
+      <text class="header-subtitle">暂不符合先享后付开通条件</text>
+    </view>
+
+    <!-- 分数卡片 -->
+    <view class="score-card">
+      <text class="score-label">您的微信支付分</text>
+      <view class="score-value-row">
+        <text class="score-number">480</text>
+        <text class="score-unit">分</text>
+      </view>
+      <view class="score-threshold">
+        <text class="threshold-text">550分及以上可开通</text>
+      </view>
+      <!-- 进度条 -->
+      <view class="progress-bar">
+        <view class="progress-track">
+          <view class="progress-fill" :style="{ width: '58%' }"></view>
+        </view>
+        <view class="progress-labels">
+          <text class="progress-label">0</text>
+          <text class="progress-label progress-label--goal">550</text>
+          <text class="progress-label">850+</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 如何提升分数 -->
+    <view class="tips-section">
+      <text class="section-title">如何提升支付分</text>
+
+      <view class="tip-card">
+        <view class="tip-item">
+          <view class="tip-num">1</view>
+          <view class="tip-content">
+            <text class="tip-title">完善个人信息</text>
+            <text class="tip-desc">在微信支付中完善实名信息、绑定银行卡等资料</text>
+          </view>
+        </view>
+
+        <view class="tip-item">
+          <view class="tip-num">2</view>
+          <view class="tip-content">
+            <text class="tip-title">保持良好的支付习惯</text>
+            <text class="tip-desc">按时支付各类生活缴费、信用卡还款等</text>
+          </view>
+        </view>
+
+        <view class="tip-item">
+          <view class="tip-num">3</view>
+          <view class="tip-content">
+            <text class="tip-title">多使用微信支付</text>
+            <text class="tip-desc">日常消费多使用微信支付，积累信用记录</text>
+          </view>
+        </view>
+
+        <view class="tip-item">
+          <view class="tip-num">4</view>
+          <view class="tip-content">
+            <text class="tip-title">遵守信用约定</text>
+            <text class="tip-desc">按时履约，避免产生违约记录</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 温馨提示 -->
+    <view class="notice-card">
+      <text class="notice-icon">💡</text>
+      <text class="notice-text">微信支付分每月1日更新，保持良好的信用行为有助于提升分数</text>
+    </view>
+
+    <!-- 品牌标语 -->
+    <view class="brand-wrap">
+      <BrandSlogan type="score" :score="550" :dark="true" :mono="true" />
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="btn-back" @click="handleBack">暂不开通</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import BrandSlogan from '@/components/BrandSlogan.vue'
+
+const handleBack = () => {
+  uni.navigateBack({
+    fail: () => {
+      uni.reLaunch({ url: '/pages/index/index' })
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background: $color-bg-secondary;
+  padding-bottom: 160rpx;
+}
+
+/* 警告头部 */
+.header {
+  background: linear-gradient(135deg, #FF9800, #F57C00);
+  padding: 48rpx 40rpx 44rpx;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-bg {
+  position: absolute;
+  top: -60rpx;
+  right: -40rpx;
+  width: 240rpx;
+  height: 240rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.warn-icon-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24rpx;
+}
+
+.warn-icon {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.header-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  display: block;
+  margin-bottom: 8rpx;
+  letter-spacing: 4rpx;
+}
+
+.header-subtitle {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.85);
+  display: block;
+}
+
+/* 分数卡片 */
+.score-card {
+  margin: -30rpx 30rpx 30rpx;
+  background: $color-bg-primary;
+  border-radius: 20rpx;
+  padding: 40rpx 32rpx 36rpx;
+  text-align: center;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
+}
+
+.score-label {
+  font-size: 26rpx;
+  color: $color-text-secondary;
+  display: block;
+  margin-bottom: 12rpx;
+}
+
+.score-value-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  margin-bottom: 16rpx;
+}
+
+.score-number {
+  font-size: 96rpx;
+  font-weight: 800;
+  color: $color-warning;
+  line-height: 1;
+}
+
+.score-unit {
+  font-size: 32rpx;
+  color: $color-text-secondary;
+  margin-left: 8rpx;
+}
+
+.score-threshold {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 28rpx;
+}
+
+.threshold-text {
+  font-size: 26rpx;
+  color: $color-error;
+  font-weight: 500;
+  background: rgba(244, 67, 54, 0.06);
+  padding: 10rpx 24rpx;
+  border-radius: 20rpx;
+}
+
+/* 进度条 */
+.progress-bar {
+  padding: 0 8rpx;
+}
+
+.progress-track {
+  height: 12rpx;
+  background: $color-bg-tertiary;
+  border-radius: 6rpx;
+  overflow: hidden;
+  margin-bottom: 12rpx;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, $color-warning, #FF7043);
+  border-radius: 6rpx;
+  transition: width 0.6s ease;
+}
+
+.progress-labels {
+  display: flex;
+  justify-content: space-between;
+}
+
+.progress-label {
+  font-size: 20rpx;
+  color: $color-text-tertiary;
+
+  &--goal {
+    color: $color-error;
+    font-weight: 600;
+  }
+}
+
+/* 提升建议 */
+.tips-section {
+  padding: 0 30rpx;
+  margin-bottom: 24rpx;
+
+  .section-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: $color-text-primary;
+    margin-bottom: 20rpx;
+    display: block;
+  }
+}
+
+.tip-card {
+  background: $color-bg-primary;
+  border-radius: 16rpx;
+  padding: 28rpx 28rpx 8rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+.tip-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 24rpx;
+}
+
+.tip-num {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  background: $color-bg-tertiary;
+  color: $color-text-secondary;
+  font-size: 24rpx;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 20rpx;
+}
+
+.tip-content {
+  flex: 1;
+}
+
+.tip-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+  display: block;
+  margin-bottom: 6rpx;
+}
+
+.tip-desc {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+  line-height: 1.5;
+  display: block;
+}
+
+/* 温馨提示 */
+.notice-card {
+  margin: 0 30rpx 24rpx;
+  background: rgba(255, 152, 0, 0.05);
+  border: 2rpx solid rgba(255, 152, 0, 0.15);
+  border-radius: 14rpx;
+  padding: 24rpx 28rpx;
+  display: flex;
+  align-items: flex-start;
+}
+
+.notice-icon {
+  font-size: 36rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.notice-text {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+  line-height: 1.6;
+  flex: 1;
+}
+
+/* 品牌标语 */
+.brand-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 0 30rpx;
+  margin-bottom: 16rpx;
+  opacity: 0.5;
+}
+
+/* 底部按钮 */
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24rpx 40rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background: $color-bg-primary;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.btn-back {
+  width: 100%;
+  height: 88rpx;
+  background: $color-bg-tertiary;
+  border-radius: 44rpx;
+  border: none;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: $color-text-secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active {
+    background: $color-border;
+    transform: scale(0.98);
+  }
+}
+</style>

haha-mp/src/pages/payscore/settlement.vue

@@ -0,0 +1,357 @@
+<template>
+  <view class="container">
+    <!-- 成功头部 -->
+    <view class="header">
+      <view class="success-icon-wrap">
+        <svg class="success-icon" viewBox="0 0 120 120">
+          <circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="4" opacity="0.3"/>
+          <circle cx="60" cy="60" r="44" fill="rgba(255,255,255,0.15)"/>
+          <path d="M 38 60 L 52 76 L 82 46" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </view>
+      <text class="header-title">结算完成</text>
+      <text class="header-subtitle">AI 视觉识别已完成，订单已生成</text>
+    </view>
+
+    <!-- 订单结算卡片 -->
+    <view class="settlement-card">
+      <view class="card-header">
+        <text class="card-title">购买商品</text>
+        <text class="card-order-no">订单号：HHA20260528142001</text>
+      </view>
+
+      <view class="product-list">
+        <view class="product-item">
+          <image class="product-img" src="/static/logo.png" mode="aspectFill"></image>
+          <view class="product-info">
+            <text class="product-name">可口可乐 330ml</text>
+            <text class="product-spec">罐装</text>
+          </view>
+          <view class="product-right">
+            <text class="product-count">×2</text>
+            <text class="product-price">¥7.00</text>
+          </view>
+        </view>
+
+        <view class="product-item">
+          <image class="product-img" src="/static/logo.png" mode="aspectFill"></image>
+          <view class="product-info">
+            <text class="product-name">农夫山泉 550ml</text>
+            <text class="product-spec">瓶装</text>
+          </view>
+          <view class="product-right">
+            <text class="product-count">×1</text>
+            <text class="product-price">¥2.50</text>
+          </view>
+        </view>
+
+        <view class="product-item">
+          <image class="product-img" src="/static/logo.png" mode="aspectFill"></image>
+          <view class="product-info">
+            <text class="product-name">乐事薯片 原味 75g</text>
+            <text class="product-spec">袋装</text>
+          </view>
+          <view class="product-right">
+            <text class="product-count">×1</text>
+            <text class="product-price">¥8.50</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 支付方式 -->
+      <view class="pay-section">
+        <view class="pay-row">
+          <text class="pay-label">支付方式</text>
+          <view class="pay-method">
+            <image class="pay-icon" src="/static/icons/payscore.svg" mode="aspectFit"></image>
+            <text class="pay-text">微信支付分 · 先享后付</text>
+          </view>
+        </view>
+        <view class="pay-row">
+          <text class="pay-label">扣款方式</text>
+          <text class="pay-value">确认收货后自动扣款</text>
+        </view>
+      </view>
+
+      <!-- 合计 -->
+      <view class="total-row">
+        <text class="total-label">合计</text>
+        <view class="total-right">
+          <text class="total-currency">¥</text>
+          <text class="total-amount">18.00</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 品牌标语 -->
+    <view class="brand-wrap">
+      <BrandSlogan type="orderComplete" serviceType="先享后付" :dark="true" />
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="btn-order" @click="goHome">返回首页</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import BrandSlogan from '@/components/BrandSlogan.vue'
+
+const goHome = () => {
+  uni.reLaunch({
+    url: '/pages/index/index'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background: $color-bg-secondary;
+  padding-bottom: 160rpx;
+}
+
+/* 绿色头部 */
+.header {
+  background: $color-wechat-green;
+  padding: 40rpx 40rpx 36rpx;
+  text-align: center;
+}
+
+.success-icon-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+
+.success-icon {
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.header-title {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  display: block;
+  margin-bottom: 8rpx;
+  letter-spacing: 4rpx;
+}
+
+.header-subtitle {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+  display: block;
+}
+
+/* 结算卡片 */
+.settlement-card {
+  margin: -20rpx 30rpx 24rpx;
+  background: $color-bg-primary;
+  border-radius: 20rpx;
+  padding: 32rpx 28rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid $color-border;
+}
+
+.card-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.card-order-no {
+  font-size: 22rpx;
+  color: $color-text-tertiary;
+}
+
+/* 商品列表 */
+.product-list {
+  margin-bottom: 8rpx;
+}
+
+.product-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid $color-bg-tertiary;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.product-img {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 12rpx;
+  background: $color-bg-tertiary;
+  flex-shrink: 0;
+}
+
+.product-info {
+  flex: 1;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.product-name {
+  font-size: 28rpx;
+  color: $color-text-primary;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.product-spec {
+  font-size: 22rpx;
+  color: $color-text-secondary;
+  margin-top: 4rpx;
+}
+
+.product-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  margin-left: 16rpx;
+}
+
+.product-count {
+  font-size: 24rpx;
+  color: $color-text-secondary;
+  margin-bottom: 6rpx;
+}
+
+.product-price {
+  font-size: 30rpx;
+  color: $color-text-primary;
+  font-weight: 600;
+}
+
+/* 支付方式 */
+.pay-section {
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid $color-border;
+}
+
+.pay-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12rpx 0;
+}
+
+.pay-label {
+  font-size: 26rpx;
+  color: $color-text-secondary;
+}
+
+.pay-method {
+  display: flex;
+  align-items: center;
+}
+
+.pay-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+}
+
+.pay-text {
+  font-size: 26rpx;
+  color: $color-text-primary;
+  font-weight: 500;
+}
+
+.pay-value {
+  font-size: 26rpx;
+  color: $color-text-primary;
+}
+
+/* 合计 */
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 2rpx solid $color-text-primary;
+}
+
+.total-label {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.total-right {
+  display: flex;
+  align-items: baseline;
+}
+
+.total-currency {
+  font-size: 28rpx;
+  color: $color-error;
+  font-weight: 600;
+}
+
+.total-amount {
+  font-size: 48rpx;
+  color: $color-error;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* 品牌标语 */
+.brand-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 0 30rpx;
+  margin-bottom: 16rpx;
+}
+
+/* 底部按钮 */
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24rpx 40rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background: $color-bg-primary;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.btn-order {
+  width: 100%;
+  height: 88rpx;
+  background: $color-wechat-green;
+  border-radius: 44rpx;
+  border: none;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active {
+    opacity: 0.9;
+    transform: scale(0.98);
+  }
+}
+</style>

haha-mp/src/pages/payscore/success.vue

@@ -0,0 +1,294 @@
+<template>
+  <view class="container">
+    <!-- 微信绿色头部 -->
+    <view class="header">
+      <view class="header-bg"></view>
+      <!-- 成功图标 -->
+      <view class="success-icon-wrap">
+        <svg class="success-icon" viewBox="0 0 120 120">
+          <circle cx="60" cy="60" r="52" fill="none" stroke="#FFFFFF" stroke-width="4" opacity="0.3"/>
+          <circle cx="60" cy="60" r="44" fill="rgba(255,255,255,0.15)"/>
+          <path d="M 38 60 L 52 76 L 82 46" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </view>
+      <text class="header-title">开通成功</text>
+      <text class="header-subtitle">微信支付分已开通</text>
+    </view>
+
+    <!-- 分数卡片 -->
+    <view class="score-card">
+      <text class="score-label">当前微信支付分</text>
+      <view class="score-value-row">
+        <text class="score-number">650</text>
+        <text class="score-unit">分</text>
+      </view>
+      <view class="score-badge">
+        <text class="badge-dot"></text>
+        <text class="badge-text">已达标 · 可享受先享后付服务</text>
+      </view>
+    </view>
+
+    <!-- 权益卡片 -->
+    <view class="benefits-section">
+      <text class="section-title">已解锁权益</text>
+      <view class="benefits-grid">
+        <view class="benefit-card">
+          <view class="benefit-icon benefit-icon-1">
+            <text class="icon-emoji">💳</text>
+          </view>
+          <text class="benefit-title">先享后付</text>
+          <text class="benefit-desc">开门后付款</text>
+        </view>
+
+        <view class="benefit-card">
+          <view class="benefit-icon benefit-icon-2">
+            <text class="icon-emoji">🛡️</text>
+          </view>
+          <text class="benefit-title">免密支付</text>
+          <text class="benefit-desc">小额自动扣款</text>
+        </view>
+
+        <view class="benefit-card">
+          <view class="benefit-icon benefit-icon-3">
+            <text class="icon-emoji">⚡</text>
+          </view>
+          <text class="benefit-title">快速开门</text>
+          <text class="benefit-desc">扫码即开</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 品牌标语 -->
+    <view class="brand-wrap">
+      <BrandSlogan type="score" :score="550" :dark="true" />
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="btn-start" @click="handleStart">开始使用</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import BrandSlogan from '@/components/BrandSlogan.vue'
+
+const handleStart = () => {
+  uni.reLaunch({
+    url: '/pages/index/index'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background: $color-bg-secondary;
+  padding-bottom: 160rpx;
+}
+
+/* 绿色头部 */
+.header {
+  background: $color-wechat-green;
+  padding: 48rpx 40rpx 44rpx;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.header-bg {
+  position: absolute;
+  top: -60rpx;
+  right: -40rpx;
+  width: 240rpx;
+  height: 240rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.success-icon-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24rpx;
+}
+
+.success-icon {
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.header-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #FFFFFF;
+  display: block;
+  margin-bottom: 8rpx;
+  letter-spacing: 4rpx;
+}
+
+.header-subtitle {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.8);
+  display: block;
+}
+
+/* 分数卡片 */
+.score-card {
+  margin: -30rpx 30rpx 30rpx;
+  background: $color-bg-primary;
+  border-radius: 20rpx;
+  padding: 40rpx 32rpx;
+  text-align: center;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
+}
+
+.score-label {
+  font-size: 26rpx;
+  color: $color-text-secondary;
+  display: block;
+  margin-bottom: 16rpx;
+}
+
+.score-value-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+
+.score-number {
+  font-size: 96rpx;
+  font-weight: 800;
+  color: $color-wechat-green;
+  line-height: 1;
+}
+
+.score-unit {
+  font-size: 32rpx;
+  color: $color-text-secondary;
+  margin-left: 8rpx;
+}
+
+.score-badge {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(7, 193, 96, 0.08);
+  padding: 12rpx 28rpx;
+  border-radius: 24rpx;
+}
+
+.badge-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: $color-wechat-green;
+  margin-right: 10rpx;
+  flex-shrink: 0;
+}
+
+.badge-text {
+  font-size: 24rpx;
+  color: $color-wechat-green;
+}
+
+/* 权益 */
+.benefits-section {
+  padding: 0 30rpx;
+  margin-bottom: 30rpx;
+
+  .section-title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: $color-text-primary;
+    margin-bottom: 20rpx;
+    display: block;
+  }
+
+  .benefits-grid {
+    display: flex;
+    justify-content: space-between;
+    gap: 20rpx;
+  }
+
+  .benefit-card {
+    flex: 1;
+    background: $color-bg-primary;
+    border-radius: 16rpx;
+    padding: 28rpx 16rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+
+    .benefit-icon {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 16rpx;
+      background: $color-wechat-green;
+
+      .icon-emoji {
+        font-size: 36rpx;
+        color: #FFFFFF;
+      }
+    }
+
+    .benefit-title {
+      font-size: 26rpx;
+      font-weight: 600;
+      color: $color-text-primary;
+      margin-bottom: 6rpx;
+    }
+
+    .benefit-desc {
+      font-size: 22rpx;
+      color: $color-text-secondary;
+    }
+  }
+}
+
+/* 品牌标语 */
+.brand-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 0 30rpx;
+  margin-bottom: 16rpx;
+}
+
+/* 底部按钮 */
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 24rpx 40rpx;
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  background: $color-bg-primary;
+  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.btn-start {
+  width: 100%;
+  height: 88rpx;
+  background: $color-wechat-green;
+  border-radius: 44rpx;
+  border: none;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active {
+    opacity: 0.9;
+    transform: scale(0.98);
+  }
+}
+</style>

haha-mp/src/pages/products/products.vue

@@ -102,7 +102,7 @@
     <!-- 底部操作栏 -->
     <view v-if="!loading && !errorMsg" class="bottom-bar">
       <view class="bottom-trust">
-        <BrandSlogan type="standard" serviceType="先享后付" :compact="true" />
+        <BrandSlogan type="standard" :compact="true" />
       </view>
       <view class="bottom-actions">
         <view class="btn-back" @click="goBack">返回</view>

haha-mp/src/static/icons/payscore-white.svg

@@ -1,4 +1,7 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#FFFFFF"/>
-  <path d="M696.8 369.6L469.2 597.2c-12.5 12.5-32.8 12.5-45.3 0L307.2 480.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l94.1 94.1 205-205c12.5-12.5 32.8-12.5 45.3 0s12.5 32.9-.1 45.4z" fill="#FFFFFF"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <!-- 聊天气泡 + 支付标记 - 白色版，透明背景 -->
+  <g transform="translate(40,38)" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M-17,-12 C-17,-20 -9,-26 1,-26 C11,-26 18,-20 18,-12 C18,-5 13,1 7,3 L11,10 L2,5 C-5,4 -8,1 -13,-5 C-15.5,-7 -17,-9.5 -17,-12 Z"/>
+  </g>
+  <text x="40" y="54" text-anchor="middle" fill="#FFFFFF" font-family="system-ui,-apple-system,sans-serif" font-size="18" font-weight="700">¥</text>
 </svg>

haha-mp/src/static/icons/payscore.svg

@@ -1,4 +1,16 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-  <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#FFD700"/>
-  <path d="M696.8 369.6L469.2 597.2c-12.5 12.5-32.8 12.5-45.3 0L307.2 480.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l94.1 94.1 205-205c12.5-12.5 32.8-12.5 45.3 0s12.5 32.9-.1 45.4z" fill="#FFD700"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#07C160"/>
+      <stop offset="100%" stop-color="#06AD56"/>
+    </linearGradient>
+  </defs>
+  <rect width="80" height="80" rx="18" fill="url(#bg)"/>
+  <!-- 微信气泡 + 支付标记 -->
+  <g transform="translate(40,38)" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+    <!-- 聊天气泡轮廓 -->
+    <path d="M-17,-12 C-17,-20 -9,-26 1,-26 C11,-26 18,-20 18,-12 C18,-5 13,1 7,3 L11,10 L2,5 C-5,4 -8,1 -13,-5 C-15.5,-7 -17,-9.5 -17,-12 Z"/>
+  </g>
+  <!-- ¥ 符号 -->
+  <text x="40" y="54" text-anchor="middle" fill="#FFFFFF" font-family="system-ui,-apple-system,sans-serif" font-size="18" font-weight="700">¥</text>
 </svg>

haha-mp/src/uni.scss

@@ -34,6 +34,9 @@ $color-border: #EEEEEE;
 
 /* ---------- 功能色 ---------- */
 $color-success: #4CAF50;
+/* 微信支付分官方品牌色 */
+$color-wechat-green: #07C160;
+$color-wechat-green-dark: #06AD56;
 $color-warning: #FF9800;
 $color-error: #F44336;
 $color-info: #2196F3;

haha-mp/src/utils/config.ts

@@ -20,7 +20,7 @@ export const API_CONFIG = {
   // baseUrl: 'http://localhost:7077/api',  // 本地开发
 
   // 请求超时时间（毫秒）
-  timeout: 30000,
+  timeout: 10000,
 
   // 是否显示请求日志
   enableLog: isDevelopment