consumer模块完成90%，前端完成supabase对接

2026-02-04 17:21:15 +08:00
parent 8a535e3f38
commit 39aa1b6bec
1335 changed files with 191376 additions and 4 deletions
--- a/mall/pages/user/bind-email.uvue
+++ b/mall/pages/user/bind-email.uvue
@@ -0,0 +1,179 @@
+<template>
+  <view class="page-container">
+    <view class="form-group">
+      <view class="input-item">
+        <text class="label">邮箱</text>
+        <input class="input" type="text" placeholder="请输入邮箱地址" v-model="email" />
+      </view>
+      <view class="input-item">
+        <text class="label">验证码</text>
+        <input class="input" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
+        <text class="code-btn" @click="sendCode">{{ counting ? `${count}s` : '获取验证码' }}</text>
+      </view>
+    </view>
+    
+    <button class="submit-btn" @click="handleSubmit">确认绑定</button>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import supa from '@/components/supadb/aksupainstance.uts'
+
+const email = ref('')
+const code = ref('')
+const counting = ref(false)
+const count = ref(60)
+
+const sendCode = async () => {
+  if (counting.value) return
+  if (!email.value || !email.value.includes('@')) {
+    uni.showToast({
+      title: '请输入正确的邮箱',
+      icon: 'none'
+    })
+    return
+  }
+  
+  uni.showLoading({ title: '发送中...' })
+  
+  try {
+      const { error } = await supa.auth.updateUser({
+          email: email.value
+      })
+      
+      uni.hideLoading()
+      
+      if (error != null) {
+          uni.showToast({
+              title: '发送失败: ' + error.message,
+              icon: 'none'
+          })
+          return
+      }
+
+      counting.value = true
+      count.value = 60
+      
+      const timer = setInterval(() => {
+        count.value--
+        if (count.value <= 0) {
+          clearInterval(timer)
+          counting.value = false
+        }
+      }, 1000)
+      
+      uni.showToast({
+        title: '验证码已发送',
+        icon: 'none'
+      })
+  } catch(e) {
+      uni.hideLoading()
+      console.error(e)
+      uni.showToast({ title: '发送异常', icon: 'none' })
+  }
+}
+
+const handleSubmit = async () => {
+  if (!email.value || !code.value) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    })
+    return
+  }
+  
+  uni.showLoading({ title: '绑定中...' })
+  
+  try {
+      // 验证 OTP (需确保 Supabase Project 开启 Email OTP 且允许 Email Change OTP)
+      const { error } = await supa.auth.verifyOtp({
+          email: email.value,
+          token: code.value,
+          type: 'email_change'
+      })
+      
+      uni.hideLoading()
+      
+      if (error != null) {
+          uni.showToast({
+              title: '绑定失败: ' + error.message,
+              icon: 'none'
+          })
+          return
+      }
+      
+      uni.showToast({
+        title: '绑定成功',
+        icon: 'success'
+      })
+      
+      // 更新本地存储
+      const userInfo = uni.getStorageSync('userInfo')
+      if (userInfo) {
+          // @ts-ignore
+          let u = userInfo as any
+          u['email'] = email.value
+          uni.setStorageSync('userInfo', u)
+      }
+      
+      setTimeout(() => {
+        uni.navigateBack()
+      }, 1500)
+  } catch(e) {
+      uni.hideLoading()
+      console.error(e)
+      uni.showToast({ title: '系统错误', icon: 'none' })
+  }
+}
+</script>
+
+<style>
+.page-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.form-group {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 0 15px;
+  margin-bottom: 30px;
+}
+
+.input-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid #eee;
+}
+
+.input-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  width: 70px;
+  font-size: 14px;
+  color: #333;
+}
+
+.input {
+  flex: 1;
+  font-size: 14px;
+}
+
+.code-btn {
+  color: #007aff;
+  font-size: 14px;
+  padding: 5px 10px;
+}
+
+.submit-btn {
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 25px;
+  font-size: 16px;
+}
+</style>