Merge branch 'feat/production-ready'

miniprogram/pages/index/index.js

@@ -14,11 +14,15 @@ Page({
     bleState: 'disconnected',
     hasDevice: false,
     deviceInfo: null,
-    devMode: false
+    devMode: false,
+    loading: true
+  },
+
+  onLoad: function () {
+    this.setData({ devMode: config.__DEV__ || false })
   },
 
   onShow: function () {
-    this.setData({ devMode: config.__DEV__ || false })
     this.checkState()
     this._onStatus = this.onBleStatus.bind(this)
     this._onBattery = this.onBleBattery.bind(this)
@@ -53,9 +57,10 @@ Page({
       return
     }
 
+    var isFirstLoad = self.data.loading
     self.setData({ connected: ble.isConnected() })
 
-    api.getDevices().then(function (data) {
+    var p1 = api.getDevices().then(function (data) {
       var devices = data.devices || []
       self.setData({ hasDevice: devices.length > 0 })
       if (devices.length > 0) {
@@ -65,14 +70,22 @@ Page({
           deviceInfo: devices[0]
         })
       }
-    }).catch(function () {})
+    }).catch(function (err) {
+      console.error('getDevices failed', err)
+    })
 
-    api.getSubscription().then(function (sub) {
+    var p2 = api.getSubscription().then(function (sub) {
       self.setData({
         subscription: sub,
         subRemaining: sub.remaining_days || 0
       })
-    }).catch(function () {})
+    }).catch(function (err) {
+      console.error('getSubscription failed', err)
+    })
+
+    Promise.all([p1, p2]).then(function () {
+      if (isFirstLoad) self.setData({ loading: false })
+    })
   },
 
   onBleStatus: function (status) {
@@ -98,7 +111,9 @@ Page({
       },
       onConnected: function () {
         self.setData({ connected: true, bleState: 'connected' })
-        ble.queryStatus().catch(function () {})
+        ble.queryStatus().catch(function (err) {
+          console.error('queryStatus failed', err)
+        })
       },
       onError: function (err) {
         self.setData({ connected: false, bleState: 'error' })
@@ -179,8 +194,6 @@ Page({
   },
 
   onViewSubscription: function () {
-    if (!this.data.subscription || this.data.subscription.status !== 'active') {
-      wx.navigateTo({ url: '/pages/subscribe-plans/subscribe-plans' })
-    }
+    wx.navigateTo({ url: '/pages/subscribe-plans/subscribe-plans' })
   }
 })

miniprogram/pages/index/index.wxml

@@ -1,5 +1,10 @@
 <view class="page">
-  <view class="page-content" wx:if="{{!hasDevice}}">
+  <view class="loading-container" wx:if="{{loading}}">
+    <view class="loading-spinner"></view>
+    <text class="loading-text">加载中...</text>
+  </view>
+
+  <view class="page-content" wx:if="{{!loading && !hasDevice}}">
     <view class="empty-device">
       <text class="empty-icon">📱</text>
       <view class="empty-text">还没有绑定设备</view>
@@ -11,16 +16,16 @@
     </view>
   </view>
 
-  <view class="page-content" wx:if="{{hasDevice}}">
+  <view class="page-content" wx:if="{{!loading && hasDevice}}">
     <view class="device-card">
-      <view class="device-icon">💆</view>
-      <view class="device-name">{{deviceName || '我的光面膜'}}</view>
-      <text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
-      <text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
-      <view class="device-battery" wx:if="{{connected}}">
-        <text>🔋</text>
-        <text>电量 {{battery}}%</text>
+      <view class="device-card-icon">💆</view>
+      <view class="device-card-name">{{deviceName || '光子美容仪'}}</view>
+      <view class="device-card-status">
+        <text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
+        <text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
+        <text class="device-card-battery" wx:if="{{connected}}">🔋 {{battery}}%</text>
       </view>
+      <button class="btn-reconnect" bindtap="onConnectBle" wx:if="{{!connected}}">重新连接</button>
     </view>
 
     <view class="sub-info" bindtap="onViewSubscription">
@@ -32,7 +37,9 @@
       <text class="sub-info-arrow">›</text>
     </view>
 
-    <button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
-    <button class="btn-secondary" bindtap="onManageDevice">设备管理</button>
+    <view class="action-buttons">
+      <button class="btn-primary" bindtap="onStartTreatment">开始护理</button>
+      <button class="btn-secondary" bindtap="onManageDevice">设备管理</button>
+    </view>
   </view>
 </view>

miniprogram/pages/index/index.wxss

@@ -19,6 +19,62 @@
   border: none;
 }
 
+.device-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 36rpx 28rpx;
+  text-align: center;
+}
+
+.device-card-icon {
+  font-size: 80rpx;
+  margin-bottom: 12rpx;
+}
+
+.device-card-name {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.device-card-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  margin-bottom: 8rpx;
+}
+
+.device-card-battery {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.btn-reconnect {
+  display: block;
+  width: 100%;
+  margin-top: 24rpx;
+  padding: 20rpx;
+  background: #f5f5f5;
+  color: #E6508C;
+  border: 2rpx solid #E6508C;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  text-align: center;
+}
+
+.btn-reconnect::after {
+  border: none;
+}
+
+.action-buttons {
+  margin-top: 30rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
 .sub-info {
   display: flex;
   justify-content: space-between;
@@ -28,6 +84,7 @@
   padding: 24rpx;
   margin-top: 20rpx;
 }
+
 .sub-info-left {
   display: flex;
   align-items: center;
@@ -35,10 +92,39 @@
   font-size: 28rpx;
   color: #333;
 }
+
 .sub-info-icon {
   font-size: 32rpx;
 }
+
 .sub-info-arrow {
   color: #999;
   font-size: 32rpx;
 }
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 200rpx 0;
+}
+
+.loading-spinner {
+  width: 64rpx;
+  height: 64rpx;
+  border: 6rpx solid #f0f0f0;
+  border-top-color: #E6508C;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  margin-top: 20rpx;
+  font-size: 28rpx;
+  color: #999;
+}