feat: 账号密码登录页面布局

src/components/head-logo.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup></script>
+
+<template>
+  <view class="head-logo"></view>
+</template>
+
+<style lang="scss" scoped>
+.head-logo {
+  width: 100%;
+  height: 200px;
+  margin: 20rpx 0;
+  background-color: pink;
+}
+</style>

src/pages/agreement/index.vue

@@ -0,0 +1,21 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '用户协议',
+    navigationStyle: 'default',
+  },
+}
+</route>
+
+<template>
+  <view class="agreement">用户协议</view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/forget-password/index.vue

@@ -0,0 +1,21 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '忘记密码',
+    navigationStyle: 'default',
+  },
+}
+</route>
+
+<template>
+  <view class="forget-password">忘记密码</view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/login/components/login-panel.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import PanelAccount from './panel-account.vue'
+import PanelPhone from './panel-phone.vue'
+const isKeep = ref(false)
+
+function toRegister() {
+  uni.navigateTo({
+    url: '/pages/register/index',
+  })
+}
+</script>
+
+<template>
+  <view class="login-panel">
+    <wd-tabs>
+      <wd-tab title="账户密码登录" name="account">
+        <PanelAccount />
+      </wd-tab>
+      <wd-tab title="手机验证码登录" name="phone">
+        <view class="content">
+          <PanelPhone />
+        </view>
+      </wd-tab>
+    </wd-tabs>
+    <view class="control-panel my-2 flex items-center justify-between">
+      <wd-checkbox v-model="isKeep" shape="square">记住密码</wd-checkbox>
+      <view class="text text-[#3c9cff]">记住密码</view>
+    </view>
+    <uv-button mt3 type="primary" text="登 录" w-full></uv-button>
+    <view class="text-area mt-10 text-center">
+      <uv-text type="primary" text="注册账户" align="center" @click="toRegister"></uv-text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/login/components/panel-account.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const formRef = ref<any>()
+const account = reactive({
+  name: '',
+  password: '',
+})
+const accountRules = {
+  name: [{ required: true, type: 'string', message: '请输入账号', trigger: ['blur', 'change'] }],
+  password: [
+    { required: true, type: 'string', message: '请输入密码', trigger: ['blur', 'change'] },
+  ],
+}
+
+function loginAction(isKeep: boolean) {
+  // 是否通过了验证
+  formRef.value
+    ?.validate()
+    .then((res) => {
+      // 登录逻辑
+    })
+    .catch((err) => {
+      if (Array.isArray(err) && err.length) {
+        showToast(err[0].message)
+      }
+    })
+}
+defineExpose({
+  loginAction,
+})
+</script>
+
+<template>
+  <div class="panel-account">
+    <uv-form
+      ref="formRef"
+      labelPosition="left"
+      labelWidth="0"
+      :model="account"
+      :rules="accountRules"
+    >
+      <uv-form-item prop="name">
+        <uv-input
+          placeholder="请输入正确的账号"
+          prefixIcon="account"
+          size="large"
+          prefixIconStyle="font-size: 22px;color: #909399"
+        ></uv-input>
+      </uv-form-item>
+      <uv-form-item prop="password">
+        <uv-input
+          placeholder="请输入密码"
+          prefixIcon="lock"
+          type="password"
+          size="large"
+          prefixIconStyle="font-size: 22px;color: #909399"
+        ></uv-input>
+      </uv-form-item>
+    </uv-form>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/login/components/panel-phone.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const formRef = ref<any>()
+const account = reactive({
+  name: '',
+  password: '',
+})
+const accountRules = {
+  name: [{ required: true, type: 'string', message: '请输入账号', trigger: ['blur', 'change'] }],
+  password: [
+    { required: true, type: 'string', message: '请输入密码', trigger: ['blur', 'change'] },
+  ],
+}
+
+function loginAction(isKeep: boolean) {
+  // 是否通过了验证
+  formRef.value
+    ?.validate()
+    .then((res) => {
+      // 登录逻辑
+    })
+    .catch((err) => {
+      if (Array.isArray(err) && err.length) {
+        showToast(err[0].message)
+      }
+    })
+}
+defineExpose({
+  loginAction,
+})
+</script>
+
+<template>
+  <div class="panel-phone">
+    <uv-form
+      ref="formRef"
+      labelPosition="left"
+      labelWidth="0"
+      :model="account"
+      :rules="accountRules"
+    >
+      <uv-form-item prop="name">
+        <uv-input
+          placeholder="请输入正确的账号"
+          prefixIcon="account"
+          size="large"
+          prefixIconStyle="font-size: 22px;color: #909399"
+        ></uv-input>
+      </uv-form-item>
+      <uv-form-item prop="password">
+        <uv-input
+          placeholder="请输入密码"
+          prefixIcon="lock"
+          type="password"
+          size="large"
+          prefixIconStyle="font-size: 22px;color: #909399"
+        ></uv-input>
+      </uv-form-item>
+    </uv-form>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/login/index.vue

@@ -0,0 +1,26 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '登录',
+  },
+}
+</route>
+
+<template>
+  <view class="login px-4">
+    <head-logo />
+    <login-panel />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import HeadLogo from '@/components/head-logo.vue'
+import LoginPanel from './components/login-panel.vue'
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/register/index.vue

@@ -0,0 +1,20 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '注册',
+  },
+}
+</route>
+
+<template>
+  <view class="register">注册</view>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/utils/common/index.ts

@@ -0,0 +1,20 @@
+/**
+ * 对uni交互方法进行二次封装
+ */
+
+export function showToast(title: string, options: UniApp.ShowToastOptions = {}) {
+  return new Promise((resolve, reject) => {
+    uni.showToast({
+      title,
+      duration: 2000,
+      icon: 'none',
+      ...options,
+      success(res) {
+        resolve(res)
+      },
+      fail(error) {
+        reject(error)
+      },
+    })
+  })
+}