first commit

2026-09-11 01:45:04 +08:00
commit 0a8d60d87f
145 changed files with 40978 additions and 0 deletions
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "empty-state": "/components/empty-state/empty-state"
+  }
+}
@@ -0,0 +1,216 @@
+import { request } from '../../utils/request'
+import { QuotaItem, UserInfo, GoodsItem, QuotaFlowItem, PagedResult, VirtualPayResult, OrderItem } from '../../types/models'
+import { QUOTA_NAMES, GoodsType, GOODS_TYPE_NAMES } from '../../utils/config'
+import { fenToYuan, formatDate, formatDateTime } from '../../utils/format'
+
+const GOODS_ICONS: Record<number, string> = {
+  [GoodsType.MEMBER]: 'icon-crown',
+  [GoodsType.UPLOAD]: 'icon-camera',
+  [GoodsType.AI]: 'icon-sparkles',
+  [GoodsType.CLOSET_SHARE]: 'icon-hanger',
+  [GoodsType.OUTFIT_SHARE]: 'icon-shirt',
+}
+
+const GOODS_FILTERS = [
+  { name: '全部', value: 0 },
+  { name: '会员包', value: 1 },
+  { name: '上传包', value: 2 },
+  { name: 'AI 推荐包', value: 3 },
+  { name: '衣柜分享包', value: 4 },
+  { name: '搭配分享包', value: 5 },
+]
+
+type PayPlatform = 'android' | 'ios' | 'harmony' | 'windows'
+
+// 归一化平台：后端仅接受 android/ios/harmony/windows，devtools/mac 等调试环境默认按 android 处理
+function normalizePlatform(): PayPlatform {
+  let p = 'android'
+  try {
+    p = wx.getSystemInfoSync().platform
+  } catch (e) {
+    // 获取失败时回退 android，避免请求体缺失导致参数校验失败
+  }
+  if (p === 'ios' || p === 'harmony' || p === 'windows') return p
+  return 'android'
+}
+
+Page({
+  data: {
+    view: 'mall' as 'mall' | 'flow',
+    userInfo: {} as UserInfo,
+    isVip: false,
+    vipExpireText: '',
+    quotas: [] as QuotaItem[],
+    goodsFilters: GOODS_FILTERS,
+    activeFilter: 0,
+    goods: [] as GoodsItem[],
+    flowList: [] as QuotaFlowItem[],
+    goodsIcons: GOODS_ICONS,
+    orderVisible: false,
+    orderGoods: null as GoodsItem | null,
+    loading: true,
+  },
+
+  onLoad(query: Record<string, string>) {
+    if (query.tab === 'flow') this.setData({ view: 'flow' })
+  },
+
+  onShow() {
+    this.fetchUser()
+    this.fetchQuota()
+    this.fetchGoods()
+    if (this.data.view === 'flow') this.fetchFlow()
+  },
+
+  fetchUser() {
+    request<UserInfo>({ url: '/user/info', showError: false })
+      .then((user) => {
+        const isVip = user.vip_type !== 1
+        this.setData({
+          userInfo: user,
+          isVip,
+          vipExpireText: isVip && user.vip_expire ? `有效期至 ${formatDate(user.vip_expire)}` : '',
+        })
+      })
+      .catch(() => {})
+  },
+
+  fetchQuota() {
+    request<{ quotas: QuotaItem[] }>({ url: '/quota/info', showError: false })
+      .then((res) => {
+        const quotas = res.quotas.map((q) => ({
+          ...q,
+          _name: QUOTA_NAMES[q.quota_type] || '额度',
+          _percent: q.total > 0 ? Math.round((q.used / q.total) * 100) : 0,
+        }))
+        this.setData({ quotas })
+      })
+      .catch(() => {})
+  },
+
+  fetchGoods() {
+    const params: Record<string, any> = { page: 1, page_size: 50 }
+    const filter = this.data.activeFilter
+    if (filter > 0) params.goods_type = filter
+    request<PagedResult<GoodsItem>>({ url: '/goods', data: params, auth: false })
+      .then((res) => {
+        const goods = res.list.map((g) => ({
+          ...g,
+          _icon: GOODS_ICONS[g.goods_type] || 'icon-crown',
+          _typeName: GOODS_TYPE_NAMES[g.goods_type] || '',
+          _priceText: fenToYuan(g.discount_price),
+          _originText: fenToYuan(g.price),
+        }))
+        this.setData({ goods, loading: false })
+      })
+      .catch(() => this.setData({ loading: false }))
+  },
+
+  fetchFlow() {
+    request<PagedResult<QuotaFlowItem>>({ url: '/quota/flow', data: { page: 1, page_size: 50 } })
+      .then((res) => {
+        const list = res.list.map((it) => ({
+          ...it,
+          _time: formatDateTime(it.created_at),
+          _sign: it.change_num > 0 ? `+${it.change_num}` : `${it.change_num}`,
+          _name: QUOTA_NAMES[it.quota_type] || '额度',
+        }))
+        this.setData({ flowList: list })
+      })
+      .catch(() => {})
+  },
+
+  onGoodsFilter(e: WechatMiniprogram.TouchEvent) {
+    const index = Number(e.currentTarget.dataset.index)
+    if (index === this.data.activeFilter) return
+    this.setData({ activeFilter: index, loading: true })
+    this.fetchGoods()
+  },
+
+  onTapMember() {
+    this.setData({ activeFilter: 1, loading: true })
+    this.fetchGoods()
+  },
+
+  onSwitchMall() {
+    this.setData({ view: 'mall' })
+  },
+  onSwitchFlow() {
+    this.setData({ view: 'flow' })
+    this.fetchFlow()
+  },
+
+  onBuy(e: WechatMiniprogram.TouchEvent) {
+    const goods = e.currentTarget.dataset.goods as GoodsItem
+    this.setData({ orderGoods: goods, orderVisible: true })
+  },
+
+  onCloseOrder() {
+    this.setData({ orderVisible: false })
+  },
+  noop() {},
+
+  confirmPay() {
+    if (!this.data.orderGoods) return
+    request<VirtualPayResult>({
+      url: '/order/virtual',
+      method: 'POST',
+      data: {
+        goods_code: this.data.orderGoods.goods_code,
+        platform: normalizePlatform(),
+      },
+    })
+      .then((res) => {
+        this.setData({ orderVisible: false })
+        this.doPayment(res)
+      })
+      .catch(() => {})
+  },
+
+  doPayment(res: VirtualPayResult) {
+    wx.requestVirtualPayment({
+      signData: res.sign_data,
+      paySig: res.pay_sig,
+      signature: res.signature,
+      mode: 'short_series_goods',
+      success: () => {
+        // 拉起成功仅代表进入支付页，最终到账以后端发货推送为准，轮询订单确认
+        this.pollOrder(res.order_no)
+      },
+      fail: () => {},
+    })
+  },
+
+  pollOrder(orderNo: string) {
+    let count = 0
+    const timer = setInterval(() => {
+      count++
+      request<PagedResult<OrderItem>>({ url: '/order', data: { page: 1, page_size: 50 }, showError: false })
+        .then((res) => {
+          const order = res.list.find((it) => it.order_no === orderNo)
+          if (order && order.order_status === 2) {
+            clearInterval(timer)
+            wx.showToast({ title: '支付成功', icon: 'success' })
+            this.fetchQuota()
+            this.fetchUser()
+          } else if (order && (order.order_status === 3 || order.order_status === 4 || order.order_status === 5)) {
+            clearInterval(timer)
+            const msg = order.order_status === 5 ? '订单已退款' : '订单未支付成功'
+            wx.showToast({ title: msg, icon: 'none' })
+          } else if (count >= 10) {
+            this.finishPayTimeout(timer)
+          }
+        })
+        .catch(() => {
+          if (count >= 10) this.finishPayTimeout(timer)
+        })
+    }, 1500)
+  },
+
+  finishPayTimeout(timer: ReturnType<typeof setInterval>) {
+    clearInterval(timer)
+    wx.showToast({ title: '到账可能有延迟，请稍后查看', icon: 'none' })
+    this.fetchQuota()
+    this.fetchUser()
+  },
+})
@@ -0,0 +1,95 @@
+<view class="page mall-page">
+  <navigation-bar title="额度与会员" />
+
+  <!-- 商城视图 -->
+  <scroll-view wx:if="{{view === 'mall'}}" scroll-y class="scroll-body">
+    <!-- 会员卡 -->
+    <view class="card member-card">
+      <view class="member-left">
+        <view class="icon icon-crown member-icon"></view>
+        <view>
+          <view class="member-name">{{isVip ? '月度会员' : '开通会员'}}</view>
+          <view class="member-desc">{{isVip ? vipExpireText : '开通会员，解锁更多 AI 与上传权益'}}</view>
+        </view>
+      </view>
+      <view class="member-btn" bindtap="onTapMember">{{isVip ? '立即续费' : '立即开通'}}</view>
+    </view>
+
+    <!-- 额度网格 -->
+    <view class="quota-grid">
+      <view class="quota-cell" wx:for="{{quotas}}" wx:key="quota_type">
+        <view class="quota-name">{{item._name}}</view>
+        <view class="quota-num">{{item.remain}}<text class="quota-total">/ {{item.total}}</text></view>
+        <view class="quota-bar">
+          <view class="quota-fill {{item._percent >= 80 ? 'warn' : ''}}" style="width: {{item._percent}}%"></view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 额度明细入口 -->
+    <view class="card flow-entry" bindtap="onSwitchFlow">
+      <text>额度明细</text>
+      <view class="icon icon-chevron-right"></view>
+    </view>
+
+    <!-- 商品筛选 -->
+    <scroll-view scroll-x class="goods-filter" show-scrollbar="{{false}}">
+      <view class="filter-row">
+        <view
+          wx:for="{{goodsFilters}}"
+          wx:key="name"
+          class="filter-item {{activeFilter === index ? 'active' : ''}}"
+          data-index="{{index}}"
+          bindtap="onGoodsFilter"
+        >{{item.name}}</view>
+      </view>
+    </scroll-view>
+
+    <!-- 商品列表 -->
+    <view class="goods-list">
+      <view class="goods-card card" wx:for="{{goods}}" wx:key="goods_code">
+        <view class="icon {{item._icon}} goods-icon"></view>
+        <view class="goods-info">
+          <view class="goods-name">{{item.goods_name}}</view>
+          <view class="goods-desc">{{item.description}}</view>
+        </view>
+        <view class="goods-right">
+          <view class="goods-price num">{{item._priceText}}</view>
+          <view class="goods-origin num" wx:if="{{item.price > item.discount_price}}">{{item._originText}}</view>
+          <view class="buy-btn" data-goods="{{item}}" bindtap="onBuy">购买</view>
+        </view>
+      </view>
+    </view>
+
+    <view class="footer-space"></view>
+  </scroll-view>
+
+  <!-- 额度明细视图 -->
+  <scroll-view wx:else scroll-y class="scroll-body">
+    <view class="flow-head" bindtap="onSwitchMall">← 返回商城</view>
+    <view class="flow-list">
+      <view class="flow-row card" wx:for="{{flowList}}" wx:key="quota_flow_uuid">
+        <view class="flow-left">
+          <view class="flow-reason">{{item.reason || item._name}}</view>
+          <view class="flow-time">{{item._time}}</view>
+        </view>
+        <view class="flow-right">
+          <view class="flow-num {{item.change_num > 0 ? 'plus' : ''}}">{{item._sign}}</view>
+          <view class="flow-after">剩余 {{item.new_value}}</view>
+        </view>
+      </view>
+    </view>
+    <empty-state wx:if="{{!flowList.length}}" icon="icon-doc" title="暂无额度明细" />
+  </scroll-view>
+
+  <!-- 订单确认弹窗 -->
+  <view wx:if="{{orderVisible}}" class="mask" bindtap="onCloseOrder">
+    <view class="sheet" catchtap="noop">
+      <view class="sheet-grabber"></view>
+      <view class="order-goods">{{orderGoods.goods_name}}</view>
+      <view class="order-desc">{{orderGoods.description}}</view>
+      <view class="order-amount">实付 <text class="order-price num">{{orderGoods._priceText}}</text></view>
+      <view class="btn btn-primary" bindtap="confirmPay">立即支付</view>
+    </view>
+  </view>
+</view>
@@ -0,0 +1,330 @@
+.mall-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-body {
+  flex: 1;
+  height: 0;
+}
+
+/* 会员卡 */
+.member-card {
+  margin: 24rpx;
+  background: #E8F2FF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.member-left {
+  display: flex;
+  align-items: center;
+}
+
+.member-icon {
+  width: 72rpx;
+  height: 72rpx;
+  color: #007AFF;
+  margin-right: 24rpx;
+}
+
+.member-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #007AFF;
+}
+
+.member-desc {
+  font-size: 24rpx;
+  color: #8E8E93;
+  margin-top: 8rpx;
+}
+
+.member-btn {
+  height: 64rpx;
+  padding: 0 32rpx;
+  border: 1rpx solid #007AFF;
+  border-radius: 32rpx;
+  color: #007AFF;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* 额度网格 */
+.quota-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24rpx;
+  gap: 20rpx;
+}
+
+.quota-cell {
+  width: calc(50% - 10rpx);
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+
+.quota-name {
+  font-size: 24rpx;
+  color: #8E8E93;
+}
+
+.quota-num {
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #000;
+  margin-top: 8rpx;
+}
+
+.quota-total {
+  font-size: 24rpx;
+  color: #C7C7CC;
+  font-weight: 400;
+}
+
+.quota-bar {
+  height: 10rpx;
+  background: #F2F2F7;
+  border-radius: 5rpx;
+  margin-top: 16rpx;
+  overflow: hidden;
+}
+
+.quota-fill {
+  height: 100%;
+  background: #007AFF;
+  border-radius: 5rpx;
+}
+
+.quota-fill.warn {
+  background: #FF9500;
+}
+
+.flow-entry {
+  margin: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 28rpx;
+  color: #000;
+}
+
+.flow-entry .icon {
+  width: 28rpx;
+  height: 28rpx;
+  color: #C7C7CC;
+}
+
+/* 商品筛选 */
+.goods-filter {
+  background: #fff;
+  white-space: nowrap;
+  margin-bottom: 20rpx;
+}
+
+.filter-row {
+  display: inline-flex;
+  padding: 20rpx 24rpx;
+}
+
+.filter-item {
+  flex-shrink: 0;
+  padding: 0 28rpx;
+  height: 56rpx;
+  line-height: 56rpx;
+  border-radius: 28rpx;
+  font-size: 24rpx;
+  color: #3C3C43;
+  background: #F2F2F7;
+  margin-right: 16rpx;
+}
+
+.filter-item.active {
+  background: #007AFF;
+  color: #fff;
+}
+
+/* 商品列表 */
+.goods-list {
+  padding: 0 24rpx;
+}
+
+.goods-card {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  padding: 24rpx;
+}
+
+.goods-icon {
+  width: 72rpx;
+  height: 72rpx;
+  color: #007AFF;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+
+.goods-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.goods-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #000;
+}
+
+.goods-desc {
+  font-size: 24rpx;
+  color: #8E8E93;
+  margin-top: 6rpx;
+}
+
+.goods-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.goods-price {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #007AFF;
+}
+
+.goods-origin {
+  font-size: 22rpx;
+  color: #C7C7CC;
+  text-decoration: line-through;
+}
+
+.buy-btn {
+  margin-top: 12rpx;
+  height: 56rpx;
+  padding: 0 32rpx;
+  border-radius: 28rpx;
+  background: #007AFF;
+  color: #fff;
+  font-size: 24rpx;
+  display: flex;
+  align-items: center;
+}
+
+.footer-space {
+  height: 40rpx;
+}
+
+/* 额度明细视图 */
+.flow-head {
+  padding: 24rpx;
+  font-size: 26rpx;
+  color: #007AFF;
+}
+
+.flow-list {
+  padding: 0 24rpx;
+}
+
+.flow-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16rpx;
+  padding: 24rpx;
+}
+
+.flow-reason {
+  font-size: 28rpx;
+  color: #000;
+}
+
+.flow-time {
+  font-size: 22rpx;
+  color: #C7C7CC;
+  margin-top: 8rpx;
+}
+
+.flow-right {
+  text-align: right;
+}
+
+.flow-num {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #8E8E93;
+}
+
+.flow-num.plus {
+  color: #34C759;
+}
+
+.flow-after {
+  font-size: 22rpx;
+  color: #C7C7CC;
+  margin-top: 4rpx;
+}
+
+/* 订单弹窗 */
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 200;
+}
+
+.sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  padding: 20rpx 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+.sheet-grabber {
+  width: 72rpx;
+  height: 10rpx;
+  border-radius: 5rpx;
+  background: #E5E5EA;
+  margin: 0 auto 24rpx;
+}
+
+.order-goods {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #000;
+  text-align: center;
+}
+
+.order-desc {
+  font-size: 24rpx;
+  color: #8E8E93;
+  text-align: center;
+  margin-top: 12rpx;
+}
+
+.order-amount {
+  font-size: 28rpx;
+  color: #000;
+  text-align: center;
+  margin: 32rpx 0;
+}
+
+.order-price {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #FF9500;
+}