wui-components-v2 1.1.24 → 1.1.26

package/components/form-control/form-control.vue

@@ -37,8 +37,8 @@ const form = ref<any>(null)
 const model = ref<any>({})
 const fields = computed(() => {
   return props.fieldGroup?.fields.filter((item) => {
-    // return !item.title?.includes('y')
-    return !item.title?.endsWith('y')// 排除字符串的最后一个字符为y的项
+    return item
+    // return !item.title?.endsWith('y')// 排除字符串的最后一个字符为y的项
   })
 })
 // 初始化表单数据
@@ -275,7 +275,7 @@ defineExpose({
               @success="(e) => { handleFileChange(e, item) }"
             />
           </wd-cell>
-          <wd-cell v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect'" :prop="item.sourceId" :title="item.title" title-width="100px">
+          <wd-cell v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselect'" :style="{ display: item.title?.includes('y') ? 'none' : null }" :prop="item.sourceId" :title="item.title" title-width="100px">
             <mulselectPicker v-model="model[item.sourceId]" :source-id="item.sourceId" :title="item.title" :ext-control-type="Number(item.max) === 1 ? 'relselect' : 'ss' " :readonly="item.disabled" :clearable="!item.disabled" />
           </wd-cell>
           <wd-cell v-else-if="ControlTypeSupportor.getControlType(item, props.entity && props.entity[item.sourceId]) === 'relselectvalue'" :prop="item.sourceId" :title="item.title" title-width="100px">

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

@@ -15,7 +15,6 @@ const props = defineProps<Props>()
 // 定义 Props 类型
 interface Props {
   tabbarItems: TabbarItem[]
-  showRagister?: boolean
 }
 const subloading = ref(false)
 const router = useRouter()
@@ -91,14 +90,11 @@ function handleSubmit() {
       console.log(error, 'error')
     })
 }
-// 注册
-function handleRe() {
-  router.push('/pages/register/register')
-}
 </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
@@ -120,11 +116,6 @@ function handleRe() {
           登录
         </wd-button>
       </view>
-      <view v-if="showRagister" class="p-4 pt-0">
-        <wd-button block :round="false" type="text" @click="handleRe">
-          注册
-        </wd-button>
-      </view>
     </wd-form>
   </view>
 </template>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, defineOptions, defineProps, reactive, ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import type { TabbarItem } from '../../composables/useTabbar'
+import loginForm from '../login-form/login-form.vue'
+import phoneLoginForm from '../phone-login-form/phone-login-form.vue'
+
+defineOptions({
+  name: 'LoginFormBox',
+})
+
+const props = defineProps<Props>()
+// 定义 Props 类型
+interface Props {
+  tabbarItems: TabbarItem[]
+  showRagister?: boolean
+  gurl?: string// 获取验证码接口
+  url?: string// 手机号登录接口
+}
+const router = useRouter()
+
+// 登录模式
+const loginMode = ref('account')
+
+// 注册
+function handleRe() {
+  router.push('/pages/register/register')
+}
+
+// 切换登录模式
+function changeLoginMode(mode: string) {
+  loginMode.value = mode
+}
+</script>
+
+<template>
+  <view class="bg-white pa-3 dark:bg-[var(--wot-dark-background2)]">
+    <!-- //手机登录 -->
+    <phoneLoginForm v-if="loginMode === 'phone'" :tabbar-items="props.tabbarItems" :url="props.url" :gurl="props.gurl" />
+    <!-- //账号登录 -->
+    <loginForm v-if="loginMode === 'account'" :tabbar-items="props.tabbarItems" />
+
+    <view class="pa-3 pt-0">
+      <wd-divider v-if="props.gurl">
+        或
+      </wd-divider>
+      <view v-if="props.gurl" class="p-4 pt-0">
+        <wd-button v-show="loginMode === 'account'" block :round="false" type="info" @click="changeLoginMode('phone')">
+          手机短信登录
+        </wd-button>
+        <wd-button v-show="loginMode === 'phone'" block :round="false" type="info" @click="changeLoginMode('account')">
+          账号登录
+        </wd-button>
+      </view>
+      <view v-if="showRagister" class="p-4 pt-0">
+        <view class="flex items-center justify-center text-size-24rpx">
+          <text>还没有账户？</text>
+          <wd-button block :round="false" type="text" size="small" @click="handleRe">
+            立即注册
+          </wd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

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

@@ -0,0 +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, login } 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>

package/components/wui-login/wui-login.vue

@@ -1,7 +1,7 @@
 <!-- 纯色风格登录页面 -->
 <script setup lang="ts">
 import { defineOptions, defineProps } from 'vue'
-import LoginForm from '../login-form/login-form.vue'
+import loginFormBox from '../login-form-box/login-form-box.vue'
 import { useManualTheme } from '../../composables/useManualTheme'
 import type { TabbarItem } from '../../composables/useTabbar'
 
@@ -15,6 +15,8 @@ interface Props {
   tabbarItems: TabbarItem[]
   loginlog: any
   showRagister?: boolean
+  gurl?: string// 获取验证码接口
+  url?: string// 手机号登录接口
 }
 const {
   currentThemeColor,
@@ -35,7 +37,7 @@ const {
       <image class="h-250px w-250px" src="./footerImg.png" />
     </view>
     <view class="flex-1 border-rd-t-2 p-y-2 .dark:bg-[--wot-dark-background2] .light:bg-white">
-      <LoginForm :tabbar-items="props.tabbarItems" :show-ragister="showRagister" />
+      <loginFormBox :tabbar-items="props.tabbarItems" :show-ragister="showRagister" :gurl="props.gurl" :url="props.url" />
     </view>
   </view>
 </template>

package/components/wui-login1/wui-login.vue

@@ -1,7 +1,7 @@
 <!-- 自定义背景风格登录页面 -->
 <script setup lang="ts">
 import { defineOptions, defineProps } from 'vue'
-import LoginForm from '../login-form/login-form.vue'
+import loginFormBox from '../login-form-box/login-form-box.vue'
 import { useManualTheme } from '../../composables/useManualTheme'
 import type { TabbarItem } from '../../composables/useTabbar'
 
@@ -13,7 +13,8 @@ const props = defineProps<{
   loginBackgroundimg: string
   tabbarItems: TabbarItem[]
   showRagister?: boolean
-
+  gurl?: string// 获取验证码接口
+  url?: string// 手机号登录接口
 }>()
 const {
   currentThemeColor,
@@ -33,7 +34,7 @@ console.log(currentThemeColor)
       </text>
     </view>
     <view class="flex-1 border-rd-t-2 p-y-2 .dark:bg-[--wot-dark-background2] .light:bg-white">
-      <LoginForm :tabbar-items="props.tabbarItems" :show-ragister="showRagister" />
+      <loginFormBox :tabbar-items="props.tabbarItems" :show-ragister="showRagister" :gurl="props.gurl" :url="props.url" />
     </view>
   </view>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wui-components-v2",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "wui 组件库",
   "author": "wgxshh",
   "license": "MIT",