feat: 对接完接口

src/pages/register/index.vue

@@ -1,4 +1,4 @@
-<route lang="json5">
+<route lang="json5" type="page">
 {
   style: {
     navigationBarTitleText: '注册',
@@ -15,30 +15,17 @@
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
           <input
+            v-model="form.member_username"
             type="text"
             placeholder-class="text-#889BC6"
             class="text-right flex-1 text-14"
-            placeholder="请输入手机号"
+            placeholder="请输入用户名"
           />
         </view>
-        <view class="flex items-center py-15">
-          <image class="w-24 h-24" src="@/static/images/login/message.png" mode="aspectFit" />
-          <input
-            type="text"
-            placeholder-class="text-#889BC6"
-            class="text-right flex-1 text-14"
-            placeholder="请输入短信验证码"
-          />
-          <view
-            class="py-6 rounded-full ml-15 px-15 text-12 text-white btn-gradient text-14 text-#889BC6"
-            @click="handleGetCode"
-          >
-            获取验证码
-          </view>
-        </view>
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
           <input
+            v-model="form.member_password"
             placeholder-class="text-#889BC6"
             type="password"
             class="text-right flex-1 text-14"
@@ -48,6 +35,7 @@
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
           <input
+            v-model="form.confirm_member_password"
             placeholder-class="text-#889BC6"
             type="password"
             class="text-right flex-1 text-14"
@@ -57,6 +45,7 @@
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
           <input
+            v-model="form.pay_password"
             placeholder-class="text-#889BC6"
             type="password"
             class="text-right flex-1 text-14"
@@ -66,6 +55,7 @@
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
           <input
+            v-model="form.confirm_pay_password"
             placeholder-class="text-#889BC6"
             type="password"
             class="text-right flex-1 text-14"
@@ -75,12 +65,24 @@
         <view class="flex items-center py-15">
           <image class="w-24 h-24" src="@/static/images/login/invite.png" mode="aspectFit" />
           <input
+            v-model="form.invitation_code"
             placeholder-class="text-#889BC6"
-            type="password"
+            type="text"
             class="text-right flex-1 text-14"
             placeholder="请输入邀请码"
           />
         </view>
+        <view class="flex items-center py-15">
+          <image class="w-24 h-24" src="@/static/images/login/message.png" mode="aspectFit" />
+          <input
+            v-model="form.verify_code"
+            type="text"
+            placeholder-class="text-#889BC6"
+            class="text-right flex-1 text-14"
+            placeholder="请输入图形验证码"
+          />
+          <image :src="codeUrl" class="ml-10 w-80 h-30" @click="handleGetCode" />
+        </view>
       </view>
       <view
         class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
@@ -95,29 +97,97 @@
 <script lang="ts" setup>
 import NavBar from '@/components/NavBar.vue'
 import { isLogged } from '@/interceptors/route'
+import { registerAPI } from '@/service'
 import { useUserStore } from '@/store/user'
+import { mergeStep } from '@/utils'
 
 const userStore = useUserStore()
+const form = ref({
+  member_username: '',
+  // member_nickname: '',
+  member_password: '',
+  confirm_member_password: '',
+  verify_code: '',
+  invitation_code: '',
+  pay_password: '',
+  confirm_pay_password: '',
+})
 
 let redirect = '/'
 onLoad((options) => {
   redirect = options.redirect ?? '/'
+  form.value.invitation_code = options.invitation_code ?? ''
 })
 
-const handleRegister = () => {
-  userStore.setUserInfo({
-    token: '123456',
+const handleRegister = mergeStep(async () => {
+  if (!form.value.member_username) {
+    uni.showToast({
+      title: '请输入用户名',
+      icon: 'none',
+    })
+    return
+  }
+  if (!form.value.verify_code) {
+    uni.showToast({
+      title: '请输入图形验证码',
+      icon: 'none',
+    })
+    return
+  }
+  if (!form.value.member_password) {
+    uni.showToast({
+      title: '请输入登录密码',
+      icon: 'none',
+    })
+    return
+  }
+  if (form.value.member_password !== form.value.confirm_member_password) {
+    uni.showToast({
+      title: '两次输入的密码不一致',
+      icon: 'none',
+    })
+    return
+  }
+  if (!form.value.pay_password) {
+    uni.showToast({
+      title: '请输入支付密码',
+      icon: 'none',
+    })
+    return
+  }
+  if (form.value.pay_password !== form.value.confirm_pay_password) {
+    uni.showToast({
+      title: '两次输入的支付密码不一致',
+      icon: 'none',
+    })
+    return
+  }
+  // if (!form.value.invitation_code) {
+  //   uni.showToast({
+  //     title: '请输入邀请码',
+  //     icon: 'none',
+  //   })
+  //   return
+  // }
+  const {
+    data: { token },
+  } = await registerAPI(form.value).catch(() => {
+    handleGetCode()
+    throw new Error('注册失败')
   })
+  userStore.setToken(token)
   uni.reLaunch({
     url: redirect,
   })
-}
-onLoad(() => {
+})
+const { codeUrl, refreshCode: handleGetCode } = useCaptcha()
+onLoad(async (options) => {
   if (isLogged()) {
     uni.reLaunch({
       url: redirect,
     })
   }
+  form.value.invitation_code = options.invite ?? ''
 })
 </script>