微信支付分应用规范

docs/微信支付分合作品牌线上应用规范.md

@@ -0,0 +1,218 @@
+# 微信支付分合作品牌线上应用规范
+
+> **文档版本**：2023-03-22 更新版  
+> **适用场景**：先享后付类、免押类业务场景  
+> **来源**：微信支付设计
+
+---
+
+## 目录
+
+1. [品牌标语](#1-品牌标语)
+2. [应用指南 - 基本说明](#2-应用指南---基本说明)
+3. [商品展示页](#3-商品展示页)
+4. [订单提交页](#4-订单提交页)
+5. [订单完成页](#5-订单完成页)
+6. [运营位](#6-运营位)
+7. [活动落地页](#7-活动落地页)
+
+---
+
+## 1. 品牌标语
+
+### 1.1 视觉设计规范
+
+| 元素 | 规范要求 |
+|------|----------|
+| **Logo** | 可选用彩色或单色 logo；选择单色时 logo 与文字颜色一致 |
+| **字体** | 苹方 Regular，字号不小于 22px（@2x） |
+| **文字颜色** | 浅色背景：`#666666`；深色背景：`#000000` |
+| **分割线** | 颜色与文字颜色相同，透明度 60%，长度与文字高度平齐 |
+| **整体高度** | 不小于 30px；图形与文字的间距、比例固定 |
+
+### 1.2 标准版本
+
+| 版本类型 | 文案 | 说明 |
+|----------|------|------|
+| **标准版本** | 微信支付分 先X后付 | 无分数要求时使用 |
+| **带分数要求版** | 微信支付分 550分及以上优享 | 有明确分数要求时使用 |
+
+### 1.3 业务场景文案示例
+
+| 业务类型 | 表单/按钮文案 |
+|----------|---------------|
+| 先享后付类 | 微信支付分 先住后付、微信支付分 先用后付、微信支付分 先吃后付 |
+| 免押类 | 微信支付分 免押速住、微信支付分 免押骑行 |
+| 带分数要求 | 微信支付分 XXX分及以上优享 |
+
+---
+
+## 2. 应用指南 - 基本说明
+
+### 2.1 主要体验路径
+
+```
+开通前：商品展示页 → 开通流程 → 订单提交页 → 订单完成页 → 订单详情页
+       ↓
+       运营位 → 活动落地页
+       ↓
+       其他路径
+```
+
+### 2.2 各场景展现形式
+
+| 体验场景 | 展现形式 |
+|----------|----------|
+| 商品展示页 | 标签（标题、结构） |
+| 订单提交页 | 表单、按钮 |
+| 订单完成页 | 弹窗、标签、表单 |
+| 运营位 | 标题、按钮 |
+| 活动落地页 | 标题、按钮 |
+
+---
+
+## 3. 商品展示页
+
+> **定义**：商家小程序中的商品列表或商品详情页  
+> **目的**：强调权益感知，驱动用户做出开通决策
+
+### 3.1 标签设计规范
+
+#### 标准样式
+
+| 业务类型 | 标签文案 | 示例 |
+|----------|----------|------|
+| 先享后付类 | 微信支付分 先X后付 | 微信支付分 先吃后付、微信支付分 先住后付 |
+| 免押类 | 微信支付分 免押XX | 微信支付分 免押速住、微信支付分 免押骑行 |
+
+#### 不带 Logo 样式
+
+适用于各种纯文字、不宜出现 logo 的标签场景
+
+#### 极简样式
+
+适用于页面标签过多、位置展示空间不足的情况
+
+> **注意**：标签的颜色、大小、风格建议与支付分 logo 协调且不影响 logo 自身的识别性
+
+---
+
+## 4. 订单提交页
+
+> **定义**：支付行为发生前的内容确认页面，也可理解为"进入支付流程的上一页"  
+> **用户行为**：订单内容确认、支付方式选择
+
+### 4.1 表单规范
+
+#### 多行表单
+
+表单需与微信支付分品牌标语结合展示
+
+| 版本 | 文案示例 |
+|------|----------|
+| 带分数要求版 | 微信支付分 先用后付 + 550分及以上优享 |
+| 业务解释版 | 微信支付分 先用后付 + 0元下单，确认收货后付款 |
+
+#### 单行表单
+
+| 业务类型 | 简化版文案 | 完整版文案 |
+|----------|------------|------------|
+| 先享后付类 | 微信支付分先X后付 | 微信支付分 先用后付（确认收货后付款） |
+| 免押类 | 微信支付分免押XX | 微信支付分 免押租借 |
+
+### 4.2 按钮规范
+
+| 版本 | 按钮文案 |
+|------|----------|
+| 带分数要求版 | 微信支付分 XXX分及以上优享 |
+| 不带分数要求版 | 微信支付分优享 |
+
+| 业务类型 | 按钮文案示例 |
+|----------|--------------|
+| 先享后付类 | 先住后付、微信支付分优享、微信支付分 XXX分及以上优享 |
+| 免押类 | 免押租借、微信支付分优享、微信支付分 XXX分及以上优享 |
+
+> **注意**：按钮自身颜色、大小、风格不受规范约束，可根据具体页面 UI 风格而定
+
+---
+
+## 5. 订单完成页
+
+> **定义**：支付行为发生后的内容确认页面  
+> **用户行为**：等待支付过程、确认支付内容
+
+### 5.1 标签规范（标准样式）
+
+| 业务类型 | 标签文案 | 示例 |
+|----------|----------|------|
+| 先享后付类 | 微信支付分 \| 先X后付 | 微信支付分 先用后付、微信支付分 先住后付 |
+| 免押类 | 微信支付分 \| 免押XX | 微信支付分 免押速住、微信支付分 免押骑行 |
+
+> **注意**：标签的颜色、大小、风格可根据具体页面 UI 风格而定
+
+### 5.2 下单中弹窗规范
+
+**适用场景**：App 端使用免确认模式下单时
+
+| 元素 | 规范要求 |
+|------|----------|
+| **弹窗尺寸** | 150px × 150px |
+| **背景颜色** | `#111111` 或 `rgba(17,17,17,0.7)` |
+| **文字颜色** | `#FFFFFF` |
+
+---
+
+## 6. 运营位
+
+> **定义**：先享后付类、免押类业务相关的宣传广告位，通常为活动落地页的入口  
+> **目的**：着重福利展现，具备操作引导
+
+### 6.1 标题规范
+
+| 业务类型 | 标题结构 | 示例 |
+|----------|----------|------|
+| 先享后付类 | 主标题（商家配置）+ 副标题「微信支付分先X后付」 | 机舱购物轻松享 + 微信支付分先享后付 |
+| 免押类 | 主标题（商家配置）+ 副标题「微信支付分免押XX」 | 你要的汉服都在这里 + 微信支付分免押租借 |
+
+### 6.2 引导按钮规范
+
+| 业务类型 | 按钮文案 | 说明 |
+|----------|----------|------|
+| 先享后付类 | 立即参与、立即使用 | 「立即XX」格式 |
+| 免押类 | 立即租借、立即申请 | 「立即XX」格式 |
+
+> **注意**：微信支付分 logo 需在文案前展示
+
+---
+
+## 7. 活动落地页
+
+> **定义**：先享后付类、免押类业务的核心介绍页  
+> **目的**：强化福利信息，简化信息层级降低理解成本，强化操作引导
+
+### 展现形式
+
+- **标题**：概括活动基本内容
+- **按钮**：引导用户进行下一步操作
+
+> 具体文案规范参照运营位标题、按钮规范执行
+
+---
+
+## 附录：错误示例提醒
+
+### 品牌标语错误用法
+
+❌ 禁止出现各类不规范使用情况，请严格按照视觉设计规范执行
+
+### 正确用法要点
+
+1. **Logo 使用**：确保展示清晰，可选用彩色或单色
+2. **字体规范**：苹方 Regular，字号不小于 22px
+3. **颜色规范**：根据背景颜色选择对应文字颜色
+4. **比例规范**：图形与文字间距、比例固定，整体高度不小于 30px
+5. **文案规范**：严格使用标准版本或带分数要求版，不得随意更改
+
+---
+
+*本文档根据微信支付官方《微信支付分合作品牌线上应用规范》整理，仅供学习和参考使用。*

haha-mp/src/components/BrandSlogan.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="brand-slogan" :class="[modeClass, { 'brand-slogan--compact': compact }]">
+    <view class="brand-slogan__body">
+      <image
+        class="brand-slogan__logo"
+        :class="{ 'brand-slogan__logo--mono': mono }"
+        src="/static/icons/payscore.svg"
+        mode="aspectFit"
+      ></image>
+      <view v-if="hasDivider" class="brand-slogan__divider" :class="{ 'brand-slogan__divider--dark': dark }"></view>
+      <text class="brand-slogan__text" :class="{ 'brand-slogan__text--dark': dark }">{{ displayText }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'standard' | 'score' | 'orderComplete'
+  score?: number
+  serviceType?: string
+  dark?: boolean
+  compact?: boolean
+  mono?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'standard',
+  score: 550,
+  serviceType: '先享后付',
+  dark: false,
+  compact: false,
+  mono: false
+})
+
+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}`
+})
+</script>
+
+<style lang="scss" scoped>
+.brand-slogan {
+  display: flex;
+  align-items: center;
+  min-height: 60rpx;
+
+  &__body {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  &__logo {
+    width: 36rpx;
+    height: 36rpx;
+    flex-shrink: 0;
+
+    &--mono {
+      opacity: 0.6;
+    }
+  }
+
+  &__divider {
+    width: 2rpx;
+    height: 28rpx;
+    background: #666666;
+    opacity: 0.6;
+    flex-shrink: 0;
+
+    &--dark {
+      background: #000000;
+    }
+  }
+
+  &__text {
+    font-size: 24rpx;
+    color: #666666;
+    line-height: 1.5;
+    white-space: nowrap;
+    font-family: 'PingFang SC', -apple-system, 'Helvetica Neue', sans-serif;
+
+    &--dark {
+      color: #000000;
+    }
+  }
+
+  &--compact {
+    min-height: 48rpx;
+
+    .brand-slogan__logo {
+      width: 32rpx;
+      height: 32rpx;
+    }
+
+    .brand-slogan__text {
+      font-size: 22rpx;
+    }
+  }
+}
+</style>

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

@@ -3,12 +3,18 @@
     <!-- 微信风格头部 -->
     <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 class="content">
+      <!-- 品牌标语 -->
+      <view class="slogan-wrapper">
+        <BrandSlogan type="score" :score="550" :dark="true" />
+      </view>
+
       <!-- 分数要求卡片 - 突出显示 -->
       <view class="score-card">
         <view class="score-badge">必需条件</view>
@@ -124,7 +130,10 @@
     <!-- 底部操作区 -->
     <view class="footer">
       <button class="enable-button" @click="handleEnablePayscore" :loading="isEnabling">
-        <text class="button-text">{{ isEnabling ? '开通中...' : '立即开通' }}</text>
+        <view class="button-content">
+          <image class="button-logo" src="/static/icons/payscore-white.svg" mode="aspectFit"></image>
+          <text class="button-text">{{ isEnabling ? '开通中...' : '立即开通' }}</text>
+        </view>
       </button>
       
       <view class="service-section">
@@ -140,6 +149,7 @@ import { ref } from 'vue'
 // @ts-ignore
 import { enablePayscore, checkPayscoreEnabled, confirmEnablePayscore } from '@/api/payscore'
 
+import BrandSlogan from '@/components/BrandSlogan.vue'
 import { logger } from '@/utils/logger';
 import { CUSTOMER_SERVICE_PHONE } from '@/utils/config';
 
@@ -336,6 +346,12 @@ $wx-orange: #FF9F00;
     justify-content: center;
     height: 100%;
   }
+
+  .header-logo {
+    width: 44rpx;
+    height: 44rpx;
+    margin-right: 16rpx;
+  }
   
   .header-title {
     font-size: 36rpx;
@@ -353,6 +369,12 @@ $wx-orange: #FF9F00;
   padding: 30rpx;
 }
 
+.slogan-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30rpx;
+}
+
 /* 分数要求卡片 - 突出显示 */
 .score-card {
   background: $wx-card-bg;
@@ -651,6 +673,18 @@ $wx-orange: #FF9F00;
       background: $wx-border;
       opacity: 0.6;
     }
+
+    .button-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .button-logo {
+      width: 36rpx;
+      height: 36rpx;
+      margin-right: 12rpx;
+    }
     
     .button-text {
       font-size: 32rpx;

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

@@ -102,7 +102,10 @@
     <!-- 底部操作栏 -->
     <view v-if="!loading && !errorMsg" class="bottom-bar">
       <view class="btn-back" @click="goBack">返回</view>
-      <view class="btn-open" @click="handleOpenDoor">开门购物</view>
+      <view class="bottom-bar-center">
+        <BrandSlogan type="standard" service-type="先享后付" :compact="true" />
+        <view class="btn-open" @click="handleOpenDoor">开门购物</view>
+      </view>
     </view>
   </view>
 </template>
@@ -114,6 +117,7 @@ import { getDeviceProducts, scanDoor } from '@/api/device';
 import { checkPayscoreEnabled } from '@/api/payscore';
 import { isLoggedIn } from '@/utils/auth';
 import { logger } from '@/utils/logger';
+import BrandSlogan from '@/components/BrandSlogan.vue';
 import type { FloorConfig } from '@/api/device';
 
 // 页面参数
@@ -578,8 +582,15 @@ const goBack = () => {
   color: #666;
   background: #f0f0f0;
 }
-.btn-open {
+.bottom-bar-center {
   flex: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10rpx;
+}
+.btn-open {
+  width: 100%;
   text-align: center;
   padding: 22rpx 0;
   border-radius: 44rpx;

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

@@ -0,0 +1,4 @@
+<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>