feat: 完成注册页面布局

src/components/count-down.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 const isDisabled = ref(false)
 const countDown = ref(60)
-const buttonText = ref('发送验证码')
+const buttonText = ref('获取验证码')
 
 const sendVerificationCode = () => {
   if (!regular.phone.test(props.phone)) {

src/components/phone-front.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup></script>
+
+<template>
+  <view class="phone-front">+ 86</view>
+</template>
+
+<style lang="scss" scoped>
+.phone-front {
+  height: 24px;
+  padding: 6px 10px;
+  line-height: 24px;
+  border: 0.5px solid #ccc;
+  border-radius: 4px 0 0 4px;
+}
+</style>

src/pages.json

@@ -87,6 +87,7 @@
       "type": "page",
       "layout": "default",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "注册"
       }
     }

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

@@ -48,7 +48,7 @@ defineExpose({
       </uv-form-item>
       <uv-form-item prop="password">
         <uv-input
-          placeholder="请输入验证码"
+          placeholder="请输入密码"
           prefixIcon="lock"
           size="large"
           prefixIconStyle="font-size: 22px;color: #909399"

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

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import CountDown from '@/components/count-down.vue'
+import PhoneFront from '@/components/phone-front.vue'
 const formRef = ref<any>()
 const account = reactive({
   name: '',
-  password: '',
+  code: '',
 })
 const accountRules = {
   name: [
     { required: true, type: 'string', message: '请输入正确手机号', trigger: ['blur', 'change'] },
   ],
-  password: [
-    { required: true, type: 'string', message: '请输入验证码', trigger: ['blur', 'change'] },
-  ],
+  code: [{ required: true, type: 'string', message: '请输入验证码', trigger: ['blur', 'change'] }],
 }
 
 function loginAction(isKeep: boolean) {
@@ -42,23 +41,15 @@ defineExpose({
       :rules="accountRules"
     >
       <uv-form-item prop="name">
-        <view class="user-account-front">+ 86</view>
-        <uv-input placeholder="11位手机号" size="large"></uv-input>
+        <PhoneFront />
+        <uv-input v-model="account.name" placeholder="11位手机号" size="large"></uv-input>
       </uv-form-item>
-      <uv-form-item prop="password">
-        <uv-input placeholder="输入验证码" size="large"></uv-input>
+      <uv-form-item prop="code">
+        <uv-input v-model="account.code" placeholder="输入验证码" size="large"></uv-input>
         <count-down />
       </uv-form-item>
     </uv-form>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.user-account-front {
-  height: 24px;
-  padding: 6px 10px;
-  line-height: 24px;
-  border: 0.5px solid #ccc;
-  border-radius: 4px 0 0 4px;
-}
-</style>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import CountDown from '@/components/count-down.vue'
+import PhoneFront from '@/components/phone-front.vue'
+const formRef = ref<any>()
+const account = reactive({
+  name: '',
+  code: '',
+  password: '',
+  rePassword: '',
+})
+const accountRules = {
+  name: [
+    { required: true, type: 'string', message: '请输入正确手机号', trigger: ['blur', 'change'] },
+  ],
+  code: [{ required: true, type: 'string', message: '请输入验证码', trigger: ['blur', 'change'] }],
+  password: [
+    { required: true, type: 'string', message: '请输入密码', trigger: ['blur', 'change'] },
+  ],
+  rePassword: [
+    { required: true, type: 'string', message: '请输入确定密码', trigger: ['blur', 'change'] },
+  ],
+}
+function toLoginPage() {
+  uni.navigateTo({
+    url: '/pages/login/index',
+  })
+}
+</script>
+
+<template>
+  <div class="register-panel">
+    <wd-tabs>
+      <wd-tab title="注册" name="register">
+        <uv-form
+          ref="formRef"
+          labelPosition="left"
+          labelWidth="0"
+          :model="account"
+          :rules="accountRules"
+        >
+          <uv-form-item prop="name">
+            <PhoneFront />
+            <uv-input v-model="account.name" placeholder="11位手机号" size="large"></uv-input>
+          </uv-form-item>
+          <uv-form-item prop="code">
+            <uv-input v-model="account.code" placeholder="输入验证码" size="large"></uv-input>
+            <count-down />
+          </uv-form-item>
+          <uv-form-item prop="password">
+            <uv-input
+              placeholder="请输入密码"
+              prefixIcon="lock"
+              size="large"
+              prefixIconStyle="font-size: 22px;color: #909399"
+            ></uv-input>
+          </uv-form-item>
+          <uv-form-item prop="rePassword">
+            <uv-input
+              placeholder="请输入确定密码"
+              prefixIcon="lock"
+              size="large"
+              prefixIconStyle="font-size: 22px;color: #909399"
+            ></uv-input>
+          </uv-form-item>
+        </uv-form>
+      </wd-tab>
+    </wd-tabs>
+    <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="toLoginPage"></uv-text>
+    </view>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/register/index.vue

@@ -2,16 +2,22 @@
 {
   layout: 'default',
   style: {
+    navigationStyle: 'custom',
     navigationBarTitleText: '注册',
   },
 }
 </route>
 
 <template>
-  <view class="register">注册</view>
+  <view class="register px-4">
+    <head-logo />
+    <RegisterPanel />
+  </view>
 </template>
 
 <script lang="ts" setup>
+import HeadLogo from '@/components/head-logo.vue'
+import RegisterPanel from './components/register-panel.vue'
 //
 </script>