leiyun
/
ai_uniapp_v2
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
10 Commits
1 Rama
4.2 MiB
 
 
 
Rama: main
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'main'
${ noResults }
ai_uniapp_v2/pages/recharge/recharge.vue

544 líneas
14 KiB
Original Enlace permanente Blame Histórico 

  1. <template>

  2.   <view class="recharge">

  3.     <!-- 余额卡 -->

  4.     <view class="head">

  5.       <view class="head-left">

  6.         <text class="kicker">AI在线点数包</text>

  7.         <text class="title">剩余 {{ balance }} 点</text>

  8.         <text class="user">用户：{{ userStore.nickname }}</text>

  9.       </view>

  10.       <view class="avatar">

  11.         <image v-if="userStore.avatar" class="avatar-img" :src="userStore.avatar" mode="aspectFill" />

  12.         <text v-else>AI</text>

  13.       </view>

  14.     </view>

  15. 

  16.     <!-- 套餐 -->

  17.     <view class="section-title">选择充值套餐</view>

  18.     <view class="grid">

  19.       <view

  20.         v-for="item in packages"

  21.         :key="item.id"

  22.         class="product"

  23.         :class="{ active: current && current.id === item.id, recommend: isRecommendedPackage(item) }"

  24.         @click="current = item"

  25.       >

  26.         <text v-if="item.badge" class="badge">{{ item.badge }}</text>

  27.         <text class="points">{{ item.points }}点</text>

  28.         <text v-if="isRecommendedPackage(item)" class="recommend-copy">日常创作首选</text>

  29.         <text class="price">￥{{ item.price_yuan }}</text>

  30.         <view v-if="item.old_price_yuan" class="offer-row">

  31.           <text class="old-price">￥{{ item.old_price_yuan }}</text>

  32.           <text v-if="item.bonus_percent" class="bonus">多送{{ item.bonus_percent }}%</text>

  33.         </view>

  34.       </view>

  35.     </view>

  36. 

  37.     <view class="buy-btn" :class="{ disabled: !current || paying }" @click="handleBuy">

  38.       {{ buyText }}

  39.     </view>

  40. 

  41.     <!-- 权益 -->

  42.     <view class="perks">

  43.       <view class="perk">

  44.         <text class="perk-title">点数长期有效</text>

  45.         <text class="perk-desc">购买后可用于所有 AI 图像工具</text>

  46.       </view>

  47.       <view class="perk">

  48.         <text class="perk-title">多端通用</text>

  49.         <text class="perk-desc">小程序、H5、PC 端共享点数</text>

  50.       </view>

  51.     </view>

  52. 

  53.     <!-- 购买须知 -->

  54.     <view class="notice">

  55.       <text class="notice-title">购买须知：</text>

  56.       <text class="notice-line">1、购买后长期有效，不支持退款；</text>

  57.       <text class="notice-line">2、同一账号点数可在小程序、H5、PC端使用；</text>

  58.       <text class="notice-line">3、点数适用于 AI 图片生成、高清修复、证件照、AI绘画等功能。</text>

  59.     </view>

  60.   </view>

  61. </template>

  62. 

  63. <script setup>

  64. import { ref, computed } from 'vue'

  65. import { onShow } from '@dcloudio/uni-app'

  66. import { useUserStore } from '@/store/user.js'

  67. import { useApp } from '@/utils/useApp.js'

  68. import { pointApi } from '@/api/index.js'

  69. import { reportCv } from '@/utils/pvcv.js'

  70. 

  71. const userStore = useUserStore()

  72. const { toast } = useApp()

  73. 

  74. const packages = ref([])

  75. const current = ref(null)

  76. const balance = ref(0)

  77. const paying = ref(false)

  78. 

  79. const buyText = computed(() => {

  80.   if (!current.value) return '请选择套餐'

  81.   return `确认充值（${current.value.price_yuan}元）`

  82. })

  83. 

  84. function isRecommendedPackage(item = {}) {

  85.   return String(item.badge || '').includes('推荐')

  86. }

  87. 

  88. function ensureLogin() {

  89.   if (!userStore.isLogin) {

  90.     uni.navigateTo({ url: '/pages/login/login' })

  91.     return false

  92.   }

  93.   return true

  94. }

  95. 

  96. async function loadPackages() {

  97.   try {

  98.     const res = await pointApi.getPackageList()

  99.     packages.value = res.list || []

  100.     current.value = packages.value.find((p) => p.badge === '推荐') || packages.value[0] || null

  101.   } catch (e) {

  102.     toast(e.msg || '套餐加载失败')

  103.   }

  104. }

  105. 

  106. async function loadBalance() {

  107.   if (!userStore.isLogin) return

  108.   try {

  109.     const res = await pointApi.getBalance()

  110.     balance.value = (res.data && res.data.points) || 0

  111.   } catch (e) {

  112.     // 登录失效由 request 统一处理

  113.   }

  114. }

  115. 

  116. function getWxLoginCode() {

  117.   return new Promise((resolve, reject) => {

  118.     // #ifdef MP-WEIXIN

  119.     uni.login({

  120.       provider: 'weixin',

  121.       success: (r) => (r.code ? resolve(r.code) : reject(new Error('获取登录凭证失败'))),

  122.       fail: () => reject(new Error('获取登录凭证失败'))

  123.     })

  124.     // #endif

  125.     // #ifndef MP-WEIXIN

  126.     reject(new Error('当前端暂不支持点数充值'))

  127.     // #endif

  128.   })

  129. }

  130. 

  131. function requestVirtualPayment(order) {

  132.   return new Promise((resolve, reject) => {

  133.     // #ifdef MP-WEIXIN

  134.     if (!wx.canIUse || !wx.canIUse('requestVirtualPayment')) {

  135.       reject(new Error('当前微信版本不支持虚拟支付，请升级微信'))

  136.       return

  137.     }

  138.     // 调起虚拟支付的完整参数（供审核/排查用）

  139.     const payParams = {

  140.       signData: order.signData,

  141.       paySig: order.paySig,

  142.       signature: order.signature,

  143.       mode: order.mode

  144.     }

  145.     console.log('[虚拟支付] wx.requestVirtualPayment 参数：\n' + JSON.stringify(payParams, null, 2))

  146.     wx.requestVirtualPayment({

  147.       ...payParams,

  148.       success: (res) => {

  149.         console.log('[虚拟支付] success：', JSON.stringify(res))

  150.         resolve(res)

  151.       },

  152.       fail: (err) => {

  153.         console.log('[虚拟支付] fail：', JSON.stringify(err))

  154.         reject(err)

  155.       }

  156.     })

  157.     // #endif

  158.     // #ifndef MP-WEIXIN

  159.     reject(new Error('当前端暂不支持点数充值'))

  160.     // #endif

  161.   })

  162. }

  163. 

  164. async function pollOrder(orderNo, times = 5) {

  165.   for (let i = 0; i < times; i++) {

  166.     try {

  167.       const res = await pointApi.getOrderStatus({ order_no: orderNo })

  168.       if (res.data && res.data.status === 20) {

  169.         balance.value = res.data.balance

  170.         return true

  171.       }

  172.     } catch (e) {

  173.       // 忽略单次失败，继续轮询

  174.     }

  175.     await new Promise((r) => setTimeout(r, 1500))

  176.   }

  177.   return false

  178. }

  179. 

  180. async function handleBuy() {

  181.   if (!ensureLogin()) return

  182.   if (!current.value || paying.value) return

  183.   reportCv('point_recharge_click')

  184. 

  185.   paying.value = true

  186.   uni.showLoading({ mask: true, title: '发起支付...' })

  187.   try {

  188.     const code = await getWxLoginCode()

  189.     const res = await pointApi.createOrder({ package_id: current.value.id, code })

  190.     const order = res.data

  191.     reportCv('point_recharge_order')

  192.     uni.hideLoading()

  193. 

  194.     // 打印后端返回的下单结果（含 env，1=沙箱不扣费 / 0=现网真实扣费）

  195.     console.log('[虚拟支付] createorder 返回：', JSON.stringify(order))

  196.     // 解析 signData 里的 env，直观确认环境

  197.     try {

  198.       const sd = JSON.parse(order.signData || '{}')

  199.       console.log('[虚拟支付] signData.env =', sd.env, sd.env === 1 ? '(沙箱-不扣费)' : '(现网-真实扣费!)')

  200.     } catch (e) {}

  201. 

  202.     await requestVirtualPayment(order)

  203. 

  204.     uni.showLoading({ mask: true, title: '确认到账...' })

  205.     const ok = await pollOrder(order.order_no)

  206.     uni.hideLoading()

  207.     if (ok) {

  208.       reportCv('point_recharge_paid')

  209.       toast('充值成功')

  210.     } else {

  211.       toast('支付成功，点数到账处理中')

  212.       loadBalance()

  213.     }

  214.   } catch (e) {

  215.     uni.hideLoading()

  216.     const errCode = e && e.errCode

  217.     if (errCode === -2) {

  218.       // 用户取消支付，不提示

  219.     } else {

  220.       toast((e && (e.msg || e.errMsg || e.message)) || '支付失败')

  221.     }

  222.   } finally {

  223.     paying.value = false

  224.   }

  225. }

  226. 

  227. onShow(() => {

  228.   loadPackages()

  229.   loadBalance()

  230. })

  231. </script>

  232. 

  233. <style lang="scss" scoped>

  234. $accent: #0b8cff;

  235. $muted: #8b95a3;

  236. 

  237. .recharge {

  238.   padding: 36rpx 36rpx calc(48rpx + env(safe-area-inset-bottom));

  239. }

  240. 

  241. /* 余额卡 */

  242. .head {

  243.   display: flex;

  244.   align-items: center;

  245.   justify-content: space-between;

  246.   gap: 32rpx;

  247.   min-height: 264rpx;

  248.   padding: 44rpx 40rpx;

  249.   border-radius: 36rpx;

  250.   color: #fff;

  251.   box-sizing: border-box;

  252.   background:

  253.     radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.28), transparent 28%),

  254.     linear-gradient(135deg, #0b8cff 0%, #20a7ff 48%, #20d3a2 100%);

  255.   box-shadow: 0 28rpx 56rpx rgba(11, 140, 255, 0.18);

  256. 

  257.   .head-left {

  258.     display: flex;

  259.     flex-direction: column;

  260.   }

  261.   .kicker {

  262.     font-size: 26rpx;

  263.     font-weight: 800;

  264.     color: rgba(255, 255, 255, 0.82);

  265.   }

  266.   .title {

  267.     margin-top: 14rpx;

  268.     font-size: 56rpx;

  269.     line-height: 1.35;

  270.     font-weight: 900;

  271.   }

  272.   .user {

  273.     margin-top: 12rpx;

  274.     font-size: 26rpx;

  275.     color: rgba(255, 255, 255, 0.78);

  276.   }

  277.   .avatar {

  278.     flex: 0 0 104rpx;

  279.     width: 104rpx;

  280.     height: 104rpx;

  281.     border-radius: 50%;

  282.     display: flex;

  283.     align-items: center;

  284.     justify-content: center;

  285.     font-size: 32rpx;

  286.     font-weight: 900;

  287.     color: #fff;

  288.     background: rgba(15, 23, 42, 0.24);

  289.     border: 4rpx solid rgba(255, 255, 255, 0.55);

  290.     overflow: hidden;

  291.   }

  292.   .avatar-img {

  293.     width: 100%;

  294.     height: 100%;

  295.   }

  296. }

  297. 

  298. .section-title {

  299.   margin: 48rpx 0 24rpx;

  300.   font-size: 34rpx;

  301.   font-weight: 900;

  302.   color: #1f2733;

  303. }

  304. 

  305. /* 套餐宫格 */

  306. .grid {

  307.   display: grid;

  308.   grid-template-columns: repeat(3, minmax(0, 1fr));

  309.   gap: 20rpx;

  310. }

  311. 

  312. .product {

  313.   position: relative;

  314.   overflow: hidden;

  315.   min-height: 212rpx;

  316.   padding: 28rpx 16rpx 24rpx;

  317.   border: 4rpx solid transparent;

  318.   border-radius: 28rpx;

  319.   display: flex;

  320.   flex-direction: column;

  321.   align-items: center;

  322.   justify-content: center;

  323.   gap: 16rpx;

  324.   color: #1f2733;

  325.   background: #fff;

  326.   box-shadow: 0 20rpx 44rpx rgba(15, 23, 42, 0.06);

  327.   transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

  328. 

  329.   &::before {

  330.     content: '';

  331.     position: absolute;

  332.     top: -54rpx;

  333.     right: -54rpx;

  334.     width: 136rpx;

  335.     height: 136rpx;

  336.     border-radius: 50%;

  337.     background: transparent;

  338.   }

  339. 

  340.   &::after {

  341.     content: '';

  342.     position: absolute;

  343.     left: 20rpx;

  344.     right: 20rpx;

  345.     bottom: 14rpx;

  346.     height: 4rpx;

  347.     border-radius: 999rpx;

  348.     background: transparent;

  349.   }

  350. 

  351.   .badge,

  352.   .points,

  353.   .recommend-copy,

  354.   .price,

  355.   .offer-row {

  356.     position: relative;

  357.     z-index: 1;

  358.   }

  359. 

  360.   &.recommend {

  361.     border-color: rgba(246, 196, 83, 0.82);

  362.     color: #fff;

  363.     background:

  364.       radial-gradient(circle at 82% 8%, rgba(255, 231, 163, 0.28), transparent 32%),

  365.       radial-gradient(circle at 8% 92%, rgba(202, 138, 4, 0.18), transparent 36%),

  366.       linear-gradient(160deg, #1c1917 0%, #111827 52%, #020617 100%);

  367.     box-shadow:

  368.       0 30rpx 72rpx rgba(15, 23, 42, 0.26),

  369.       0 0 0 6rpx rgba(246, 196, 83, 0.12);

  370.   }

  371. 

  372.   &.recommend::before {

  373.     background: radial-gradient(circle, rgba(255, 216, 106, 0.32), transparent 68%);

  374.   }

  375. 

  376.   &.active {

  377.     border-color: $accent;

  378.     background: linear-gradient(180deg, #f4faff 0%, #ffffff 68%);

  379.     box-shadow:

  380.       0 26rpx 56rpx rgba(11, 140, 255, 0.18),

  381.       0 0 0 8rpx rgba(11, 140, 255, 0.1);

  382.   }

  383. 

  384.   &.recommend.active {

  385.     border-color: #f6c453;

  386.     background:

  387.       radial-gradient(circle at 82% 8%, rgba(255, 231, 163, 0.38), transparent 32%),

  388.       radial-gradient(circle at 8% 92%, rgba(202, 138, 4, 0.22), transparent 38%),

  389.       linear-gradient(160deg, #27201a 0%, #111827 50%, #020617 100%);

  390.     box-shadow:

  391.       0 34rpx 78rpx rgba(15, 23, 42, 0.32),

  392.       0 0 0 8rpx rgba(246, 196, 83, 0.16),

  393.       inset 0 2rpx 0 rgba(255, 255, 255, 0.86);

  394.   }

  395.   &.recommend.active::after {

  396.     background: linear-gradient(90deg, transparent, rgba(255, 216, 106, 0.72), transparent);

  397.     box-shadow: 0 0 18rpx rgba(255, 216, 106, 0.3);

  398.   }

  399.   .badge {

  400.     position: absolute;

  401.     top: 16rpx;

  402.     left: 50%;

  403.     transform: translateX(-50%);

  404.     max-width: calc(100% - 24rpx);

  405.     padding: 6rpx 14rpx;

  406.     border-radius: 999rpx;

  407.     font-size: 20rpx;

  408.     font-weight: 900;

  409.     white-space: nowrap;

  410.     color: $accent;

  411.     background: rgba(11, 140, 255, 0.1);

  412.   }

  413.   &.recommend .badge {

  414.     color: #2a1803;

  415.     background: linear-gradient(135deg, #fff1b8 0%, #f6c453 50%, #d89a22 100%);

  416.     box-shadow: 0 10rpx 24rpx rgba(216, 154, 34, 0.32);

  417.   }

  418.   .points {

  419.     margin-top: 34rpx;

  420.     font-size: 40rpx;

  421.     font-weight: 900;

  422.   }

  423.   .recommend-copy {

  424.     margin-top: -10rpx;

  425.     font-size: 20rpx;

  426.     line-height: 1;

  427.     font-weight: 800;

  428.     color: #3b8bd8;

  429.   }

  430.   &.recommend .points {

  431.     color: #fff;

  432.     text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.32);

  433.   }

  434.   &.recommend .recommend-copy {

  435.     color: rgba(255, 220, 138, 0.92);

  436.   }

  437.   .price {

  438.     font-size: 26rpx;

  439.     font-weight: 800;

  440.     color: $accent;

  441.   }

  442.   &.recommend .price {

  443.     color: #ffd76a;

  444.     text-shadow: 0 2rpx 10rpx rgba(216, 154, 34, 0.22);

  445.   }

  446.   .offer-row {

  447.     display: flex;

  448.     align-items: center;

  449.     justify-content: center;

  450.     gap: 8rpx;

  451.     min-height: 30rpx;

  452.     white-space: nowrap;

  453.   }

  454.   .old-price {

  455.     color: #9aa6b2;

  456.     font-size: 21rpx;

  457.     text-decoration: line-through;

  458.   }

  459.   .bonus {

  460.     padding: 3rpx 8rpx;

  461.     border-radius: 999rpx;

  462.     color: #159a54;

  463.     background: #edfdf4;

  464.     font-size: 19rpx;

  465.     font-weight: 900;

  466.   }

  467.   &.recommend .old-price {

  468.     color: rgba(255, 255, 255, 0.45);

  469.   }

  470.   &.recommend .bonus {

  471.     color: #7a4a00;

  472.     background: linear-gradient(135deg, rgba(255, 241, 184, 0.96), rgba(255, 215, 106, 0.96));

  473.   }

  474. }

  475. 

  476. /* 确认充值 */

  477. .buy-btn {

  478.   display: flex;

  479.   align-items: center;

  480.   justify-content: center;

  481.   height: 96rpx;

  482.   margin-top: 36rpx;

  483.   border-radius: 24rpx;

  484.   font-size: 30rpx;

  485.   font-weight: 900;

  486.   color: #fff;

  487.   background: linear-gradient(135deg, #0b8cff, #20a7ff);

  488.   box-shadow: 0 24rpx 48rpx rgba(11, 140, 255, 0.22);

  489. 

  490.   &.disabled {

  491.     opacity: 0.6;

  492.   }

  493. }

  494. 

  495. /* 权益 */

  496. .perks {

  497.   display: grid;

  498.   grid-template-columns: repeat(2, minmax(0, 1fr));

  499.   gap: 20rpx;

  500.   margin-top: 36rpx;

  501. 

  502.   .perk {

  503.     padding: 28rpx 24rpx;

  504.     border-radius: 28rpx;

  505.     background: rgba(11, 140, 255, 0.08);

  506.   }

  507.   .perk-title {

  508.     font-size: 28rpx;

  509.     font-weight: 900;

  510.     color: $accent;

  511.   }

  512.   .perk-desc {

  513.     display: block;

  514.     margin-top: 14rpx;

  515.     font-size: 24rpx;

  516.     line-height: 1.45;

  517.     color: $muted;

  518.   }

  519. }

  520. 

  521. /* 购买须知 */

  522. .notice {

  523.   margin-top: 44rpx;

  524.   padding: 28rpx;

  525.   border-radius: 28rpx;

  526.   background: #fff;

  527.   box-shadow: 0 20rpx 44rpx rgba(15, 23, 42, 0.04);

  528. 

  529.   .notice-title {

  530.     display: block;

  531.     margin-bottom: 8rpx;

  532.     font-size: 26rpx;

  533.     font-weight: 800;

  534.     color: #8f98a6;

  535.   }

  536.   .notice-line {

  537.     display: block;

  538.     font-size: 26rpx;

  539.     line-height: 1.8;

  540.     color: $muted;

  541.   }

  542. }

  543. </style>