wui-components-v2 1.1.69 → 1.1.71

package/components/phone-login-form/phone-login-form.vue

@@ -1,204 +1,204 @@
-<script setup lang="ts">
-import { defineOptions, defineProps, onUnmounted, reactive, ref } from 'vue'
-import { useRouter } from 'uni-mini-router'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import { getUserConfig } from '../../api/login'
-import { req } from '../../api/index'
-import { useUser } from '../../composables/useUser'
-import { useTabbar } from '../../composables/useTabbar'
-import type { TabbarItem } from '../../composables/useTabbar'
-
-defineOptions({
-  name: 'PhoneLoginForm',
-})
-
-const props = defineProps<Props>()
-// 定义 Props 类型
-interface Props {
-  gurl?: string// 获取验证码接口
-  url?: string// 手机号登录接口
-  tabbarItems: TabbarItem[]
-}
-const codeLoading = ref(false) // 添加验证码按钮加载状态
-const countdown = ref(0) // 添加倒计时
-const timer = ref(0) // 添加定时器引用
-const subloading = ref(false)
-const router = useRouter()
-const toast = useGlobalToast()
-const { setUserInfo } = useUser()
-const model = reactive<{
-  phone: string
-  code: string
-}>({
-  phone: '',
-  code: '',
-
-})
-const { setTabbarItemActive } = useTabbar(props.tabbarItems)
-const form = ref()
-// 添加获取验证码函数
-function handleGetCode() {
-  // 如果正在倒计时或加载中，则不执行
-  if (countdown.value > 0 || codeLoading.value) {
-    return
-  }
-
-  // 验证手机号
-  if (!model.phone) {
-    return toast.warning('请先填写手机号')
-  }
-
-  if (!/^1[3-9]\d{9}$/.test(model.phone)) {
-    return toast.warning('请输入正确的手机号')
-  }
-
-  // 开始获取验证码流程
-  codeLoading.value = true
-
-  // 模拟发送验证码请求
-  // // 这里应该替换为实际的API调用
-  // setTimeout(() => {
-  //   codeLoading.value = false
-  //   // 启动倒计时
-  //   startCountdown()
-  //   toast.success('验证码已发送')
-  // }, 1000)
-  if (!props.gurl)
-    return toast.error({ msg: '请设置登录接口' })
-  // 实际使用时替换上面的模拟代码
-  req({
-    url: props.gurl,
-    method: 'POST',
-    data: {
-      number: model.phone,
-    },
-  }).then((res: any) => {
-    codeLoading.value = false
-    if (res.success) {
-      // 启动倒计时
-      startCountdown()
-      toast.success('验证码已发送')
-    }
-    else {
-      toast.error(res.msg)
-    }
-  }).catch(() => {
-    codeLoading.value = false
-    toast.error('验证码发送失败')
-  })
-}
-
-// 添加启动倒计时函数
-function startCountdown() {
-  countdown.value = 60
-  if (timer.value) {
-    clearInterval(timer.value)
-  }
-  timer.value = setInterval(() => {
-    if (countdown.value > 0) {
-      countdown.value--
-    }
-    else {
-      if (timer.value) {
-        clearInterval(timer.value)
-      }
-    }
-  }, 1000)
-}
-
-// 添加清理定时器函数
-function clearTimer() {
-  if (timer.value) {
-    clearInterval(timer.value)
-    timer.value = 0
-  }
-}
-onUnmounted(() => {
-  clearTimer()
-})
-// 提交登录表单
-function handleSubmit() {
-  form.value
-    .validate()
-    .then(async ({ valid, errors }: any) => {
-      if (valid) {
-        if (!props.url)
-          return toast.error({ msg: '请设置登录接口' })
-        try {
-          subloading.value = true
-          // 登录
-          const res = await req({
-            url: props.url,
-            method: 'POST',
-            data: {
-              number: model.phone,
-              code: model.code,
-            },
-          })
-
-          if (res.success) {
-            // 保存token
-            uni.setStorageSync('TOKEN', res.msg)
-            // 获取用户配置
-            const res1 = await getUserConfig()
-            if (res1.status === 'success') {
-              // 保存用户信息
-              setUserInfo(res1.user)
-              // 跳转首页
-              router.pushTab('/pages/index/index')
-              setTabbarItemActive('index')
-              toast.success({ msg: '登录成功！' })
-            }
-          }
-          else {
-            toast.error({ msg: res.msg })
-          }
-        }
-        catch (error: any) {
-          console.log(error, 'error')
-        }
-      }
-      else {
-        toast.error({ msg: '请填写登录信息' })
-        console.log(errors, 'errors')
-      }
-      subloading.value = false
-    })
-    .catch((error: any) => {
-      toast.error({ msg: error })
-      console.log(error, 'error')
-    })
-}
-</script>
-
-<template>
-  <view class="bg-white pa-3 dark:bg-[var(--wot-dark-background2)]">
-    <!-- //账号登录 -->
-    <wd-form ref="form" :model="model">
-      <wd-cell-group border>
-        <wd-input
-          v-model="model.phone" label="手机号" label-width="100px" prop="phone" clearable placeholder="请输入手机号"
-          :rules="[{ required: true, message: '请填写手机号' }, { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
-        />
-        <wd-input
-          v-model="model.code" required type="text" :rules="[{ required: true, message: '请填写验证码' }]" label="验证码"
-          prop="code"
-        >
-          <template #suffix>
-            <wd-button
-              size="small" :round="false" :loading="codeLoading" :disabled="countdown > 0"
-              @click="handleGetCode"
-            >
-              {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
-            </wd-button>
-          </template>
-        </wd-input>
-      </wd-cell-group>
-      <view class="p-4">
-        <wd-button block :loading="subloading" :round="false" @click="handleSubmit">
-          登录
-        </wd-button>
-      </view>
-    </wd-form>
-  </view>
-</template>
+<script setup lang="ts">
+import { defineOptions, defineProps, onUnmounted, reactive, ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { getUserConfig } from '../../api/login'
+import { req } from '../../api/index'
+import { useUser } from '../../composables/useUser'
+import { useTabbar } from '../../composables/useTabbar'
+import type { TabbarItem } from '../../composables/useTabbar'
+
+defineOptions({
+  name: 'PhoneLoginForm',
+})
+
+const props = defineProps<Props>()
+// 定义 Props 类型
+interface Props {
+  gurl?: string// 获取验证码接口
+  url?: string// 手机号登录接口
+  tabbarItems: TabbarItem[]
+}
+const codeLoading = ref(false) // 添加验证码按钮加载状态
+const countdown = ref(0) // 添加倒计时
+const timer = ref(0) // 添加定时器引用
+const subloading = ref(false)
+const router = useRouter()
+const toast = useGlobalToast()
+const { setUserInfo } = useUser()
+const model = reactive<{
+  phone: string
+  code: string
+}>({
+  phone: '',
+  code: '',
+
+})
+const { setTabbarItemActive } = useTabbar(props.tabbarItems)
+const form = ref()
+// 添加获取验证码函数
+function handleGetCode() {
+  // 如果正在倒计时或加载中，则不执行
+  if (countdown.value > 0 || codeLoading.value) {
+    return
+  }
+
+  // 验证手机号
+  if (!model.phone) {
+    return toast.warning('请先填写手机号')
+  }
+
+  if (!/^1[3-9]\d{9}$/.test(model.phone)) {
+    return toast.warning('请输入正确的手机号')
+  }
+
+  // 开始获取验证码流程
+  codeLoading.value = true
+
+  // 模拟发送验证码请求
+  // // 这里应该替换为实际的API调用
+  // setTimeout(() => {
+  //   codeLoading.value = false
+  //   // 启动倒计时
+  //   startCountdown()
+  //   toast.success('验证码已发送')
+  // }, 1000)
+  if (!props.gurl)
+    return toast.error({ msg: '请设置登录接口' })
+  // 实际使用时替换上面的模拟代码
+  req({
+    url: props.gurl,
+    method: 'POST',
+    data: {
+      number: model.phone,
+    },
+  }).then((res: any) => {
+    codeLoading.value = false
+    if (res.success) {
+      // 启动倒计时
+      startCountdown()
+      toast.success('验证码已发送')
+    }
+    else {
+      toast.error(res.msg)
+    }
+  }).catch(() => {
+    codeLoading.value = false
+    toast.error('验证码发送失败')
+  })
+}
+
+// 添加启动倒计时函数
+function startCountdown() {
+  countdown.value = 60
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+  timer.value = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--
+    }
+    else {
+      if (timer.value) {
+        clearInterval(timer.value)
+      }
+    }
+  }, 1000)
+}
+
+// 添加清理定时器函数
+function clearTimer() {
+  if (timer.value) {
+    clearInterval(timer.value)
+    timer.value = 0
+  }
+}
+onUnmounted(() => {
+  clearTimer()
+})
+// 提交登录表单
+function handleSubmit() {
+  form.value
+    .validate()
+    .then(async ({ valid, errors }: any) => {
+      if (valid) {
+        if (!props.url)
+          return toast.error({ msg: '请设置登录接口' })
+        try {
+          subloading.value = true
+          // 登录
+          const res = await req({
+            url: props.url,
+            method: 'POST',
+            data: {
+              number: model.phone,
+              code: model.code,
+            },
+          })
+
+          if (res.success) {
+            // 保存token
+            uni.setStorageSync('TOKEN', res.msg)
+            // 获取用户配置
+            const res1 = await getUserConfig()
+            if (res1.status === 'success') {
+              // 保存用户信息
+              setUserInfo(res1.user)
+              // 跳转首页
+              router.pushTab('/pages/index/index')
+              setTabbarItemActive('index')
+              toast.success({ msg: '登录成功！' })
+            }
+          }
+          else {
+            toast.error({ msg: res.msg })
+          }
+        }
+        catch (error: any) {
+          console.log(error, 'error')
+        }
+      }
+      else {
+        toast.error({ msg: '请填写登录信息' })
+        console.log(errors, 'errors')
+      }
+      subloading.value = false
+    })
+    .catch((error: any) => {
+      toast.error({ msg: error })
+      console.log(error, 'error')
+    })
+}
+</script>
+
+<template>
+  <view class="bg-white pa-3 dark:bg-[var(--wot-dark-background2)]">
+    <!-- //账号登录 -->
+    <wd-form ref="form" :model="model">
+      <wd-cell-group border>
+        <wd-input
+          v-model="model.phone" label="手机号" label-width="100px" prop="phone" clearable placeholder="请输入手机号"
+          :rules="[{ required: true, message: '请填写手机号' }, { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
+        />
+        <wd-input
+          v-model="model.code" required type="text" :rules="[{ required: true, message: '请填写验证码' }]" label="验证码"
+          prop="code"
+        >
+          <template #suffix>
+            <wd-button
+              size="small" :round="false" :loading="codeLoading" :disabled="countdown > 0"
+              @click="handleGetCode"
+            >
+              {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
+            </wd-button>
+          </template>
+        </wd-input>
+      </wd-cell-group>
+      <view class="p-4">
+        <wd-button block :loading="subloading" :round="false" @click="handleSubmit">
+          登录
+        </wd-button>
+      </view>
+    </wd-form>
+  </view>
+</template>