feat(mini): align companion pages and show OTA progress

banban-mini/src/pages/bind/index.tsx

@@ -1,3 +1,4 @@
+import { getPageStyle } from '@/utils/page-style'
 import { View, Text, Image, Input, Button } from '@tarojs/components'
 import { useEffect, useRef, useState } from 'react'
 import Taro, { useDidShow, useDidHide, useRouter } from '@tarojs/taro'
@@ -175,6 +176,7 @@ export default function Bind() {
   const [bindStatus, setBindStatus] = useState<number | null>(null)
   const [cardUUID, setCardUUID] = useState('')
   const [bindHint, setBindHint] = useState('')
+  const [bindResultDestination, setBindResultDestination] = useState('/pages/device/index')
   const [bindExpiresAt, setBindExpiresAt] = useState('')
   const [remainingBindSeconds, setRemainingBindSeconds] = useState(0)
   const pollingRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -370,13 +372,7 @@ export default function Bind() {
             : session.card_uuid ? `绑定完成，卡号 ${session.card_uuid}，稍后可关联宝贝` : '绑定完成，稍后可关联宝贝'
         )
         Taro.showToast({ title: isAddingCard ? '新卡添加成功' : '设备绑定成功', icon: 'success' })
-        setTimeout(() => {
-          if (isAddingCard || session.child_id) {
-            goDevicePage()
-          } else {
-            goManagePage()
-          }
-        }, 500)
+        setBindResultDestination(isAddingCard || session.child_id ? '/pages/device/index' : '/pages/sleep/index')
         return
       }
 
@@ -568,7 +564,7 @@ export default function Bind() {
 
   if (loading) {
     return (
-      <View className='bind-page'>
+      <View className='bind-page' style={getPageStyle(true)}>
         <View className='loading'>
           <Text>加载中...</Text>
         </View>
@@ -577,8 +573,68 @@ export default function Bind() {
     )
   }
 
+  const sessionVisible = bindStatus !== null && [
+    SESSION_STATUS_PENDING, SESSION_STATUS_COMPLETED, SESSION_STATUS_EXPIRED,
+    SESSION_STATUS_FAILED, SESSION_STATUS_CANCELLED,
+  ].includes(bindStatus)
+
+  if (sessionVisible) {
+    const completed = bindStatus === SESSION_STATUS_COMPLETED
+    const pending = bindStatus === SESSION_STATUS_PENDING
+    const title = pending ? '请在设备上贴卡' : completed
+      ? isAddingCard ? '新卡添加完成' : '设备绑定成功'
+      : isExpiredBind ? '贴卡时间已过' : '贴卡未完成'
+    return (
+      <View className='bind-page bind-state-page' style={getPageStyle(true)}>
+        <View className='bind-header'>
+          <View className='back-btn' onClick={handleBack}>
+            <Image className='back-icon' src={require('../../assets/tab-icons/arrow-left.png')} mode='aspectFit' />
+            <Text className='back-text'>返回</Text>
+          </View>
+        </View>
+        <View className='bind-result'>
+          {pending ? (
+            <>
+              <Text className='bind-result-title'>{title}</Text>
+              <View className='bind-countdown-ring'>
+                <Text className='bind-countdown-value'>{formatRemainingTime(remainingBindSeconds)}</Text>
+                <Text className='bind-countdown-label'>剩余贴卡时间</Text>
+              </View>
+              <View className='bind-instruction'>
+                <Text className='bind-instruction-title'>{isAddingCard ? '加卡指令已发送' : '绑卡指令已发送'}</Text>
+                <Text className='bind-result-description'>{bindHint}</Text>
+              </View>
+              <Button className='bind-result-button waiting' disabled>等待设备确认</Button>
+            </>
+          ) : (
+            <>
+              <Image className='bind-result-art' mode='aspectFit'
+                src={completed ? require('../../assets/ui/dog-success.png') : require('../../assets/ui/dog-failure.png')} />
+              <Text className='bind-result-title'>{title}</Text>
+              <Text className='bind-result-description'>{bindHint}</Text>
+              {completed ? (
+                <Button className='bind-result-button primary' onClick={() => Taro.reLaunch({ url: bindResultDestination })}>
+                  {bindResultDestination.includes('/sleep/') ? '去关联宝贝' : '返回首页'}
+                </Button>
+              ) : (
+                <>
+                  <Button className='bind-result-button primary' onClick={() => {
+                    resetBindSessionState()
+                    if (isExpiredBind && !isAddingCard) handleScanCode()
+                  }}>重新开始</Button>
+                  <Button className='bind-result-button secondary' onClick={goDevicePage}>返回首页</Button>
+                </>
+              )}
+            </>
+          )}
+        </View>
+        {systemBanner}
+      </View>
+    )
+  }
+
   return (
-    <View className='bind-page'>
+    <View className='bind-page' style={getPageStyle(true)}>
       <View className='bind-header'>
         <View className='back-btn' onClick={handleBack}>
           <Image className='back-icon' src={require('../../assets/tab-icons/arrow-left.png')} mode='aspectFit' />
@@ -587,16 +643,6 @@ export default function Bind() {
         <Text className='title'>{pageTitle}</Text>
       </View>
 
-      {bindStatus === SESSION_STATUS_PENDING && (
-        <Image className='bind-state-mascot pending' src={require('../../assets/ui/dog-running.png')} mode='aspectFit' />
-      )}
-      {bindStatus === SESSION_STATUS_COMPLETED && (
-        <Image className='bind-state-mascot success' src={require('../../assets/ui/dog-success.png')} mode='aspectFit' />
-      )}
-      {(bindStatus === SESSION_STATUS_EXPIRED || bindStatus === SESSION_STATUS_FAILED || bindStatus === SESSION_STATUS_CANCELLED) && (
-        <Image className='bind-state-mascot failure' src={require('../../assets/ui/dog-failure.png')} mode='aspectFit' />
-      )}
-
       {isAddingCard ? (
         <View className='pending-device-card'>
           <View className='icon-bg orange'>