fix: resolve subscription UX issues and add placeholder pages
- Profile: show "未订阅" card when subscription inactive/0 days - Profile: subscription management navigates to page instead of modal - Subscribe-plans: data-driven plan cards with mock payment flow - Subscribe-plans: show current subscription status at top - Subscribe-prompt: "先使用普通模式" goes to wear-check directly - Add help and contact placeholder pages - Fix unbindDevice to work without explicit deviceId
这个提交包含在:
@@ -1,14 +1,17 @@
|
||||
var http = require('../../utils/request')
|
||||
var api = require('../../utils/api')
|
||||
var config = require('../../config/env')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight: 44,
|
||||
plans: [
|
||||
{ plan: 'monthly', price: '¥99', desc: '约3.3元/天' },
|
||||
{ plan: 'yearly', price: '¥899', desc: '省¥289' }
|
||||
{ key: 'monthly', name: '月卡', price: 99, priceLabel: '¥99', desc: '约3.3元/天' },
|
||||
{ key: 'yearly', name: '年卡', price: 899, priceLabel: '¥899', desc: '省¥289', tag: '推荐' }
|
||||
],
|
||||
selected: 'yearly',
|
||||
purchasing: false
|
||||
purchasing: false,
|
||||
subscription: null,
|
||||
subRemaining: 0
|
||||
},
|
||||
|
||||
onBack: function () {
|
||||
@@ -24,15 +27,59 @@ Page({
|
||||
this.setData({ statusBarHeight: app.globalData.statusBarHeight })
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
this.loadSubscription()
|
||||
},
|
||||
|
||||
loadSubscription: function () {
|
||||
var self = this
|
||||
api.getSubscription().then(function (sub) {
|
||||
self.setData({
|
||||
subscription: sub,
|
||||
subRemaining: sub.remaining_days || 0
|
||||
})
|
||||
}).catch(function () {})
|
||||
},
|
||||
|
||||
onSelect: function (e) {
|
||||
this.setData({ selected: e.currentTarget.dataset.plan })
|
||||
},
|
||||
|
||||
onPurchase: function () {
|
||||
var self = this
|
||||
var selected = this.data.selected
|
||||
var plan = null
|
||||
for (var i = 0; i < this.data.plans.length; i++) {
|
||||
if (this.data.plans[i].key === selected) {
|
||||
plan = this.data.plans[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!plan) return
|
||||
|
||||
wx.showModal({
|
||||
title: '暂未开放',
|
||||
content: '在线购买功能尚未开放,请联系管理员开通订阅。',
|
||||
showCancel: false
|
||||
title: '确认支付',
|
||||
content: '模拟支付 ¥' + plan.price + '?(测试环境)',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
self.doPurchase(plan)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
doPurchase: function (plan) {
|
||||
var self = this
|
||||
self.setData({ purchasing: true })
|
||||
api.purchase(plan.key).then(function (order) {
|
||||
self.setData({ purchasing: false })
|
||||
wx.showToast({ title: '支付成功', icon: 'success' })
|
||||
setTimeout(function () {
|
||||
wx.redirectTo({ url: '/pages/subscribe-success/subscribe-success?plan=' + plan.key })
|
||||
}, 1000)
|
||||
}).catch(function (err) {
|
||||
self.setData({ purchasing: false })
|
||||
wx.showToast({ title: err.message || '支付失败', icon: 'none' })
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -6,6 +6,18 @@
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<!-- Current subscription status -->
|
||||
<view class="current-sub" wx:if="{{subscription && subscription.status === 'active' && subRemaining > 0}}">
|
||||
<view class="current-sub-row">
|
||||
<text class="current-sub-label">当前套餐</text>
|
||||
<text class="current-sub-value">{{subscription.plan === 'trial' ? '试用' : subscription.plan === 'monthly' ? '月卡' : subscription.plan === 'yearly' ? '年卡' : subscription.plan}}</text>
|
||||
</view>
|
||||
<view class="current-sub-row">
|
||||
<text class="current-sub-label">剩余天数</text>
|
||||
<text class="current-sub-value">{{subRemaining}}天</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-title">选择订阅套餐</view>
|
||||
|
||||
<view class="service-card">
|
||||
@@ -17,17 +29,11 @@
|
||||
</view>
|
||||
|
||||
<view class="plans">
|
||||
<view class="plan {{selected === 'monthly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="monthly">
|
||||
<view class="plan-price">¥99</view>
|
||||
<view class="plan-name">月卡</view>
|
||||
<view class="plan-save">约3.3元/天</view>
|
||||
</view>
|
||||
<view class="plan {{selected === 'yearly' ? 'selected' : ''}}" bindtap="onSelect" data-plan="yearly">
|
||||
<view class="plan-tag" wx:if="{{selected !== 'yearly'}}">推荐</view>
|
||||
<view class="plan-tag plan-tag-active" wx:else>推荐</view>
|
||||
<view class="plan-price">¥899</view>
|
||||
<view class="plan-name">年卡</view>
|
||||
<view class="plan-save">省¥289</view>
|
||||
<view class="plan {{selected === item.key ? 'selected' : ''}}" wx:for="{{plans}}" wx:key="key" bindtap="onSelect" data-plan="{{item.key}}">
|
||||
<view class="plan-tag {{selected === item.key ? 'plan-tag-active' : ''}}" wx:if="{{item.tag}}">{{item.tag}}</view>
|
||||
<view class="plan-price">{{item.priceLabel}}</view>
|
||||
<view class="plan-name">{{item.name}}</view>
|
||||
<view class="plan-save">{{item.desc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -1,3 +1,29 @@
|
||||
.current-sub {
|
||||
background: #fff9e6;
|
||||
border: 2rpx solid #DCB982;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.current-sub-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
|
||||
.current-sub-label {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.current-sub-value {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
在新工单中引用
屏蔽一个用户