小程序接入支付功能

2026-09-29 01:14:24 +08:00
1 parent edf1e51846
commit 07a90e860d
@@ -0,0 +1,79 @@
+const { post, login } = require('../../utils/pay-api.js')
+
+// 同购买页：用上次的身份当初始值，退款按钮不会先冒出来再消失
+const cachedIsAdmin = Boolean(wx.getStorageSync('isAdmin'))
+
+function formatTime(timestamp) {
+  const d = new Date(timestamp)
+  const pad = (n) => (n < 10 ? '0' + n : '' + n)
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
+Page({
+  data: {
+    loading: false,
+    list: [],
+    error: '',
+    isIos: false,
+    isAdmin: cachedIsAdmin, // 退款目前是管理员功能
+  },
+
+  // 每次切到这一页都刷新一次，买完回来看得到
+  onShow() {
+    // iPhone 上买的订单只能用户自己去 App Store 申请退款，按钮就不显示了
+    this.setData({ isIos: wx.getSystemInfoSync().platform === 'ios' })
+    this.load()
+  },
+
+  async load() {
+    this.setData({ loading: true, error: '' })
+    try {
+      const code = await login()
+      const data = await post('/pay/my', { code })
+      wx.setStorageSync('isAdmin', Boolean(data.isAdmin))
+      this.setData({
+        isAdmin: Boolean(data.isAdmin),
+        list: (data.list || []).map((item) => Object.assign({}, item, { timeText: formatTime(item.deliveredAt) })),
+      })
+    } catch (err) {
+      this.setData({ error: err.message })
+    } finally {
+      this.setData({ loading: false })
+    }
+  },
+
+  copyCode(e) {
+    wx.setClipboardData({ data: e.currentTarget.dataset.code })
+  },
+
+  onRefund(e) {
+    const outTradeNo = e.currentTarget.dataset.order
+    wx.showModal({
+      title: '申请退款',
+      content: '退款后这张激活码会作废，确定要退吗？',
+      confirmText: '退款',
+      cancelText: '再想想',
+      success: (res) => {
+        if (res.confirm) this.doRefund(outTradeNo)
+      },
+    })
+  },
+
+  async doRefund(outTradeNo) {
+    wx.showLoading({ title: '退款中', mask: true })
+    try {
+      const code = await login()
+      await post('/pay/refund', { outTradeNo, code })
+      wx.showToast({ title: '退款已发起', icon: 'none' })
+      await this.load()
+    } catch (err) {
+      wx.showToast({ title: err.message, icon: 'none', duration: 3000 })
+    } finally {
+      wx.hideLoading()
+    }
+  },
+
+  onPullDownRefresh() {
+    this.load().then(() => wx.stopPullDownRefresh())
+  },
+})
@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "我的",
+  "enablePullDownRefresh": true,
+  "usingComponents": {}
+}
@@ -0,0 +1,31 @@
+<view class="page">
+  <view class="head">
+    <view class="head-title">我的激活码</view>
+    <view class="head-sub">点一下激活码即可复制</view>
+  </view>
+
+  <view wx:if="{{error}}" class="banner">{{error}}</view>
+  <view wx:if="{{loading && !list.length}}" class="banner">加载中…</view>
+
+  <view wx:for="{{list}}" wx:key="code" class="card" data-code="{{item.code}}" bindtap="copyCode">
+    <view class="card-name">{{item.productName}}<text wx:if="{{item.env === 1}}" class="card-tag">沙箱测试</text></view>
+    <view class="card-code">{{item.code}}</view>
+    <view class="card-bottom">
+      <view class="card-time">{{item.timeText}}</view>
+      <view
+        wx:if="{{isAdmin && !isIos && item.env === 0}}"
+        class="card-refund"
+        data-order="{{item.outTradeNo}}"
+        catchtap="onRefund"
+      >申请退款</view>
+    </view>
+  </view>
+
+  <view wx:if="{{isIos && list.length}}" class="tip">iPhone 上买的订单开发者退不了，需要退款请到 App Store → 购买记录里申请。</view>
+
+  <view wx:if="{{!loading && !list.length && !error}}" class="placeholder">
+    <view class="placeholder-icon">🎫</view>
+    <view class="placeholder-title">还没有激活码</view>
+    <view class="placeholder-desc">去「购买测试」买一个，发货后这里就会出现</view>
+  </view>
+</view>
@@ -0,0 +1,102 @@
+.page {
+  min-height: 100vh;
+  padding: 32rpx 28rpx 48rpx;
+  background: var(--bg);
+}
+
+.head {
+  margin-bottom: 28rpx;
+}
+
+.head-title {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.head-sub {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.banner {
+  padding: 22rpx 26rpx;
+  margin-bottom: 20rpx;
+  border-radius: var(--r-lg);
+  background: var(--panel);
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 25rpx;
+  line-height: 1.6;
+}
+
+.card {
+  padding: 26rpx 28rpx;
+  margin-bottom: 20rpx;
+  border-radius: var(--r-lg);
+  background: var(--panel);
+}
+
+.card:active {
+  background: var(--panel-2);
+}
+
+.card-name {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.card-tag {
+  margin-left: 14rpx;
+  padding: 2rpx 14rpx;
+  border-radius: var(--r-pill);
+  background: rgba(245, 158, 11, 0.16);
+  color: #f0b45c;
+  font-size: 20rpx;
+}
+
+.card-code {
+  margin-top: 14rpx;
+  font-size: 38rpx;
+  font-weight: 600;
+  letter-spacing: 4rpx;
+  color: var(--cyan);
+  word-break: break-all;
+}
+
+.card-time {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+.card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12rpx;
+}
+
+.card-refund {
+  padding: 6rpx 22rpx;
+  border-radius: var(--r-pill);
+  border: 2rpx solid rgba(255, 255, 255, 0.14);
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 22rpx;
+}
+
+.card-refund:active {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.tip {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  line-height: 1.7;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+/* 空态跟着标题走，不用撑满整屏 */
+.placeholder {
+  height: auto;
+  padding: 140rpx 40rpx 0;
+}