init

src/views/register/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#ffffff00"/>
+
+  <div class="content">
+    <j-gap height="50" background="#F9BF3A" opacity="0"/>
+    <div class="slogan">
+      <div class="slogan-1">注册</div>
+    </div>
+
+
+    <div class="input-box">
+      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
+      <van-field
+        v-model="loginData.phoneNumber"
+        class="login-btn"
+        label="手机号码"
+        placeholder="请输入手机号码"
+        type="tel"
+      />
+
+      <van-field
+        v-model="loginData.code"
+        class="login-btn"
+        label="验证码"
+        placeholder="请输入验证码"
+        type="number"
+      >
+        <template #button>
+          <div class="password-btn">
+            <van-count-down v-show="countDownFlag" ref="countDown" :auto-start="false" :time="time" @finish="onFinish">
+              <template #default="timeData">
+                <span class="block">{{ timeData.seconds }}秒</span>
+              </template>
+            </van-count-down>
+            <div v-show="!countDownFlag" style="color: #bc7c1c" @click="start">发送验证码</div>
+          </div>
+        </template>
+      </van-field>
+
+      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
+      <van-field
+        v-model="loginData.password"
+        class="login-btn"
+        label="登录密码"
+        placeholder="请设置6-16位密码"
+        type="text"
+      />
+
+    </div>
+
+    <van-button
+      :disabled="!loginData.password || !loginData.phoneNumber"
+      color="linear-gradient(to right, #D2A64C, #F9D88D)"
+      round
+      style="width: 100%; margin: 20px 0"
+      @click.stop="registerBtn"
+    >
+      注册
+    </van-button>
+
+    <view class="op">
+      <view class="register" @click="goLogin">登录</view>
+    </view>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from "vue";
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+import {register, sendSmsRegister} from "@/api/login";
+import {useUserStore} from "@/store/modules/user";
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const loginData = reactive({
+  phone: null,
+  phoneNumber: '',
+  code: null,
+  password: '',
+  loginRole: 5,
+  openId: '',
+  ticket: null,
+  randStr: null
+})
+const time = ref(60 * 1000);
+const countDown = ref();
+const countDownFlag = ref(false);
+const start = () => {
+  if (loginData.phoneNumber) {
+    countDown.value.start();
+    countDownFlag.value = true
+    sendSmsRegister({
+      phoneNumber: loginData.phoneNumber
+    }).then(res => {
+      console.log(res)
+      loginData.code = res
+      onFinish()
+    })
+  } else {
+    showToast('请输入手机号')
+  }
+};
+
+
+const registerBtn = () => {
+  register(loginData).then(res => {
+    // goLogin()
+    userStore.login({
+      mobile: loginData.phoneNumber,
+      password: loginData.password
+    }).then(res => {
+      router.replace('/home')
+    }, err => {
+      router.replace('/home')
+    })
+  })
+}
+
+const goLogin = () => {
+  router.back()
+}
+
+
+
+const onFinish = () => {
+  countDownFlag.value = false
+  countDown.value.reset();
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0 20px;
+  background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
+  height: 100vh;
+
+  .slogan {
+    padding-top: 168px;
+
+    .slogan-1 {
+      font-size: 70px;
+      color: #3f3f3f;
+    }
+
+    .slogan-2 {
+      font-weight: 400;
+      font-size: 32px;
+      color: #333333;
+    }
+  }
+
+  .input-box {
+    margin-top: 40px;
+    padding: 20px 0 10px 0;
+    background: #fff;
+    border-radius: 20px;
+    box-shadow: 0px 0px 7px -3px #b4b3b3;
+
+    .login-btn {
+      margin-bottom: 40px;
+      background: #12332100;
+    }
+
+    .password-btn {
+      border-left: 1px solid #CCCCCC;
+      padding-left: 20px;
+    }
+  }
+
+  .op {
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+  }
+}
+
+</style>