|
|
@@ -1,735 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 微信风格头部 -->
|
|
|
- <!-- <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="score-card">
|
|
|
- <view class="score-badge">必需条件</view>
|
|
|
- <view class="score-main">
|
|
|
- <text class="score-number">550</text>
|
|
|
- <text class="score-unit">分及以上</text>
|
|
|
- </view>
|
|
|
- <view class="score-desc">
|
|
|
- <text class="desc-icon">ℹ</text>
|
|
|
- <text class="desc-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">550分优享</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="info-card">
|
|
|
- <text class="card-title">使用须知</text>
|
|
|
-
|
|
|
- <view class="card-content">
|
|
|
- <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>
|
|
|
-
|
|
|
- <!-- 开通流程 -->
|
|
|
- <view class="steps-section">
|
|
|
- <text class="section-title">如何开通</text>
|
|
|
-
|
|
|
- <view class="step-item">
|
|
|
- <view class="step-number step-1">1</view>
|
|
|
- <view class="step-content">
|
|
|
- <text class="step-title">点击开通按钮</text>
|
|
|
- <text class="step-desc">授权开启微信支付分服务</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="step-item">
|
|
|
- <view class="step-number step-2">2</view>
|
|
|
- <view class="step-content">
|
|
|
- <text class="step-title">完成身份验证</text>
|
|
|
- <text class="step-desc">根据提示完成身份信息验证</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="step-item">
|
|
|
- <view class="step-number step-3">3</view>
|
|
|
- <view class="step-content">
|
|
|
- <text class="step-title">等待评分结果</text>
|
|
|
- <text class="step-desc">系统将自动评估您的信用分数</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="step-item">
|
|
|
- <view class="step-number step-4">4</view>
|
|
|
- <view class="step-content">
|
|
|
- <text class="step-title">开通成功</text>
|
|
|
- <text class="step-desc">成功后即可使用微信支付分服务</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 温馨提示 -->
|
|
|
- <view class="tips-section">
|
|
|
- <view class="tips-card">
|
|
|
- <text class="tips-icon">💡</text>
|
|
|
- <view class="tips-content">
|
|
|
- <text class="tips-title">温馨提示</text>
|
|
|
- <view class="tip-item">
|
|
|
- <text class="tip-dot">•</text>
|
|
|
- <text class="tip-content">微信支付分评估过程不收取任何费用</text>
|
|
|
- </view>
|
|
|
- <view class="tip-item">
|
|
|
- <text class="tip-dot">•</text>
|
|
|
- <text class="tip-content">请确保已实名认证并绑定银行卡</text>
|
|
|
- </view>
|
|
|
- <view class="tip-item">
|
|
|
- <text class="tip-dot">•</text>
|
|
|
- <text class="tip-content">良好的信用记录有助于提升分数</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 底部操作区 -->
|
|
|
- <view class="footer">
|
|
|
- <button class="enable-button" @click="handleEnablePayscore" :loading="isEnabling">
|
|
|
- <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="slogan-wrapper">
|
|
|
- <BrandSlogan type="score" :dark="true" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-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';
|
|
|
-
|
|
|
-declare const wx: any
|
|
|
-
|
|
|
-const isEnabling = ref(false)
|
|
|
-const customerServicePhone = CUSTOMER_SERVICE_PHONE
|
|
|
-
|
|
|
-// 返回上一页
|
|
|
-const goBack = () => {
|
|
|
- uni.navigateBack()
|
|
|
-}
|
|
|
-
|
|
|
-// 处理开通支付分
|
|
|
-const handleEnablePayscore = async () => {
|
|
|
- if (isEnabling.value) return
|
|
|
-
|
|
|
- try {
|
|
|
- isEnabling.value = true
|
|
|
-
|
|
|
- // 调用开通接口,获取支付分订单信息
|
|
|
- const result = await enablePayscore()
|
|
|
-
|
|
|
- // 如果已开通,直接提示
|
|
|
- if (result.enabled) {
|
|
|
- uni.showModal({
|
|
|
- title: '已开通',
|
|
|
- content: '您已开通微信支付分,无需重复开通',
|
|
|
- showCancel: false,
|
|
|
- success: () => {
|
|
|
- goBack()
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 调起微信支付分开通页面
|
|
|
- const { outOrderNo, serviceId, appId } = result
|
|
|
-
|
|
|
- if (!outOrderNo || !serviceId) {
|
|
|
- throw new Error('缺少必要参数')
|
|
|
- }
|
|
|
-
|
|
|
- // 使用微信官方 API 调起支付分开通页面
|
|
|
- wx.openBusinessView({
|
|
|
- businessType: 'payscore',
|
|
|
- extraData: {
|
|
|
- mch_id: '1612345678', // 商户号,需要替换为真实的
|
|
|
- service_id: serviceId,
|
|
|
- out_order_no: outOrderNo
|
|
|
- },
|
|
|
- success: (res: any) => {
|
|
|
- logger.log('调起支付分成功:', res)
|
|
|
- // 用户已完成授权操作,轮询确认开通状态
|
|
|
- pollEnableStatus(outOrderNo)
|
|
|
- },
|
|
|
- fail: (err: any) => {
|
|
|
- logger.error('调起支付分失败:', err)
|
|
|
- // 用户取消或失败,仍然可以手动确认
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '开通失败或已取消,请重试',
|
|
|
- confirmText: '再试一次'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- } catch (error: any) {
|
|
|
- logger.error('开通支付分失败:', error)
|
|
|
- uni.showModal({
|
|
|
- title: '开通失败',
|
|
|
- content: error.message || '开通过程中出现错误,请稍后重试',
|
|
|
- confirmText: '再试一次'
|
|
|
- })
|
|
|
- } finally {
|
|
|
- isEnabling.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 轮询确认开通状态
|
|
|
-const pollEnableStatus = (outOrderNo: string) => {
|
|
|
- let count = 0
|
|
|
- const maxCount = 30 // 最多轮询 30 次
|
|
|
-
|
|
|
- const timer = setInterval(async () => {
|
|
|
- count++
|
|
|
-
|
|
|
- if (count >= maxCount) {
|
|
|
- clearInterval(timer)
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '开通超时,请重新尝试',
|
|
|
- confirmText: '重试'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- // 调用确认开通接口(通过统一请求封装,自动携带 token)
|
|
|
- const data = await confirmEnablePayscore(outOrderNo)
|
|
|
-
|
|
|
- if (data?.enabled) {
|
|
|
- clearInterval(timer)
|
|
|
-
|
|
|
- // 开通成功
|
|
|
- uni.showModal({
|
|
|
- title: '开通成功',
|
|
|
- content: '您已成功开通微信支付分,现在可以扫码开门了!',
|
|
|
- showCancel: false,
|
|
|
- success: () => {
|
|
|
- const pages = getCurrentPages()
|
|
|
- if (pages.length > 1) {
|
|
|
- const prevPage = pages[pages.length - 2]
|
|
|
- if (prevPage && (prevPage as any).onPayscoreEnabled) {
|
|
|
- ;(prevPage as any).onPayscoreEnabled()
|
|
|
- }
|
|
|
- uni.navigateBack()
|
|
|
- } else {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- logger.error('轮询开通状态失败:', error)
|
|
|
- }
|
|
|
- }, 2000) // 每 2 秒轮询一次
|
|
|
-}
|
|
|
-
|
|
|
-// 联系客服
|
|
|
-const contactService = () => {
|
|
|
- uni.makePhoneCall({
|
|
|
- phoneNumber: CUSTOMER_SERVICE_PHONE
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 检查支付分状态(页面加载时)
|
|
|
-const checkPayscoreStatus = async () => {
|
|
|
- try {
|
|
|
- const result = await checkPayscoreEnabled()
|
|
|
- if (result.enabled) {
|
|
|
- // 如果已开通,提示用户
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '您已开通微信支付分,无需重复开通',
|
|
|
- showCancel: false,
|
|
|
- success: () => {
|
|
|
- goBack()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- logger.error('检查支付分状态失败:', error)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 页面加载时检查状态
|
|
|
-checkPayscoreStatus()
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-/* 微信支付分页面 — 使用设计令牌 */
|
|
|
-
|
|
|
-.container {
|
|
|
- min-height: 100vh;
|
|
|
- background: $color-bg-secondary;
|
|
|
- padding-bottom: 200rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 微信风格头部 - 纯色背景 */
|
|
|
-.wx-header {
|
|
|
- width: 100%;
|
|
|
- background: $color-wechat-green;
|
|
|
- padding: 32rpx 40rpx 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .header-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .header-logo {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .header-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .header-subtitle {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.content {
|
|
|
- padding: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.slogan-wrapper {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-}
|
|
|
-
|
|
|
-/* 分数要求卡片 - 突出显示 */
|
|
|
-.score-card {
|
|
|
- background: $color-bg-primary;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 40rpx 32rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .score-badge {
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- background: $color-error;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 22rpx;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .score-main {
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
- justify-content: center;
|
|
|
- margin: 32rpx 0 24rpx;
|
|
|
-
|
|
|
- .score-number {
|
|
|
- font-size: 96rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: $color-wechat-green;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .score-unit {
|
|
|
- font-size: 28rpx;
|
|
|
- color: $color-text-secondary;
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .score-desc {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(7, 193, 96, 0.05);
|
|
|
- padding: 16rpx 24rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
-
|
|
|
- .desc-icon {
|
|
|
- font-size: 28rpx;
|
|
|
- color: $color-wechat-green;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .desc-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $color-text-secondary;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 核心权益 - 三列布局 */
|
|
|
-.benefits-section {
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .benefits-grid {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .benefit-card {
|
|
|
- flex: 1;
|
|
|
- background: $color-bg-primary;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 32rpx 20rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .benefit-icon {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- background: $color-wechat-green;
|
|
|
-
|
|
|
- .icon-emoji {
|
|
|
- font-size: 40rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .benefit-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .benefit-desc {
|
|
|
- font-size: 22rpx;
|
|
|
- color: $color-text-secondary;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 信息卡片 */
|
|
|
-.info-card {
|
|
|
- background: $color-bg-primary;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 24rpx 32rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .card-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .card-content {
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 开通流程 */
|
|
|
-.steps-section {
|
|
|
- background: $color-bg-primary;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 40rpx 32rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .step-item {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 32rpx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .step-number {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-right: 24rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- background: $color-wechat-green;
|
|
|
-
|
|
|
- &.step-1,
|
|
|
- &.step-2,
|
|
|
- &.step-3,
|
|
|
- &.step-4 {
|
|
|
- background: $color-wechat-green;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .step-content {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .step-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- display: block;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .step-desc {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $color-text-secondary;
|
|
|
- display: block;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 温馨提示 */
|
|
|
-.tips-section {
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .tips-card {
|
|
|
- background: rgba(7, 193, 96, 0.05);
|
|
|
- border: 2rpx solid rgba(7, 193, 96, 0.2);
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 32rpx 28rpx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .tips-icon {
|
|
|
- font-size: 40rpx;
|
|
|
- color: $color-wechat-green;
|
|
|
- margin-right: 20rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .tips-content {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .tips-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: $color-text-primary;
|
|
|
- display: block;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tip-item {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .tip-dot {
|
|
|
- color: $color-wechat-green;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .tip-content {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $color-text-secondary;
|
|
|
- line-height: 1.6;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 底部操作区 */
|
|
|
-.footer {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background: $color-bg-primary;
|
|
|
- padding: 32rpx 40rpx;
|
|
|
- padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
|
|
- box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .enable-button {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- background: $color-wechat-green;
|
|
|
- border-radius: 44rpx;
|
|
|
- border: none;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- &[disabled] {
|
|
|
- background: $color-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;
|
|
|
- font-weight: 600;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .service-section {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .service-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $color-text-tertiary;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .service-link {
|
|
|
- font-size: 24rpx;
|
|
|
- color: $color-wechat-green;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|