feat: 完成页面开发

2024-12-27 19:01:54 +08:00
parent b642a7d5e7
commit 6d62cc0567
52 changed files with 1463 additions and 31 deletions
@@ -0,0 +1,133 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '注册',
+    navigationStyle: 'custom',
+  },
+  notNeedLogin: false,
+}
+</route>
+<template>
+  <view class="login-container relative">
+    <NavBar />
+    <view class="pt-45">
+      <view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
+        <view class="flex items-center py-15">
+          <image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
+          <input
+            type="text"
+            placeholder-class="text-#889BC6"
+            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
+            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
+            placeholder-class="text-#889BC6"
+            type="password"
+            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/password.png" mode="aspectFit" />
+          <input
+            placeholder-class="text-#889BC6"
+            type="password"
+            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/password.png" mode="aspectFit" />
+          <input
+            placeholder-class="text-#889BC6"
+            type="password"
+            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/password.png" mode="aspectFit" />
+          <input
+            placeholder-class="text-#889BC6"
+            type="password"
+            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/invite.png" mode="aspectFit" />
+          <input
+            placeholder-class="text-#889BC6"
+            type="password"
+            class="text-right flex-1 text-14"
+            placeholder="请输入邀请码"
+          />
+        </view>
+      </view>
+      <view
+        class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
+        @click="handleRegister"
+      >
+        注册
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import NavBar from '@/components/NavBar.vue'
+import { isLogged } from '@/interceptors/route'
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+
+let redirect = '/'
+onLoad((options) => {
+  redirect = options.redirect ?? '/'
+})
+
+const handleRegister = () => {
+  userStore.setUserInfo({
+    token: '123456',
+  })
+  uni.reLaunch({
+    url: redirect,
+  })
+}
+onLoad(() => {
+  if (isLogged()) {
+    uni.reLaunch({
+      url: redirect,
+    })
+  }
+})
+</script>
+
+<style lang="scss">
+.login-container {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding-bottom: 200rpx;
+  background-image: url('@/static/images/login-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>