init

src/views/forget/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#F9BF3A00"/>
+  <div class="content">
+
+    <j-gap height="50" background="#F9BF3A" opacity="0"/>
+    <j-gap height="120" opacity="1"/>
+    <van-field
+      v-model="loginData.phoneNumber"
+      v-if="flag === '1'"
+      class="login-btn"
+      label="手机号码"
+      placeholder="请输入手机号码"
+      label-align="top"
+      style="background: #12332100"
+      type="tel"
+    />
+
+    <van-field
+      v-model="loginData.code"
+      class="login-btn"
+      v-if="flag === '1'"
+      label="验证码"
+      placeholder="请输入验证码"
+      label-align="top"
+      style="background: #12332100"
+      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"
+      v-if="flag === '2'"
+      label="登录密码"
+      label-align="top"
+      placeholder="请设置6-16位密码"
+      style="background: #12332100"
+      type="password"
+    />
+
+    <van-field
+      v-model="loginData.confirmPassword"
+      class="login-btn"
+      v-if="flag === '2'"
+      label="确认密码"
+      label-align="top"
+      placeholder="请再次输入密码"
+      style="background: #12332100"
+      type="password"
+    />
+
+    <van-button
+      :disabled="!loginData.phoneNumber || !loginData.code"
+      color="linear-gradient(to right, #D2A64C, #F9D88D)"
+      round
+      style="width: 100%; margin: 20px 0"
+      v-if="flag === '1'"
+      @click.stop="next"
+    >
+      下一步
+    </van-button>
+
+    <van-button
+      :disabled="!loginData.password || !loginData.confirmPassword"
+      color="linear-gradient(to right, #D2A64C, #F9D88D)"
+      round
+      style="width: 100%; margin: 20px 0"
+      v-if="flag === '2'"
+      @click.stop="updatePwdBtn"
+    >
+      确认修改
+    </van-button>
+
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from "vue";
+import {sendSmsForget, updatePwd} from "@/api/login";
+import {showToast} from "vant";
+
+const loginData = reactive({
+  phone: null,
+  phoneNumber: '',
+  code: null,
+  password: '',
+  confirmPassword: '',
+  checkCode: '',
+})
+
+const flag = ref('1')
+
+
+const time = ref(60 * 1000);
+const countDown = ref();
+const countDownFlag = ref(false);
+const start = () => {
+  if (loginData.phoneNumber) {
+    countDown.value.start();
+    countDownFlag.value = true
+    sendSmsForget({
+      phoneNumber: loginData.phoneNumber
+    }).then(res => {
+      console.log(res)
+      loginData.code = res
+      loginData.checkCode = res
+      onFinish()
+    })
+  } else {
+    showToast('请输入手机号')
+  }
+};
+
+const next = () => {
+  flag.value = '2'
+}
+
+const updatePwdBtn = () => {
+  updatePwd({
+    checkCode: loginData.checkCode,
+    confirmPassword: loginData.confirmPassword,
+    password: loginData.password
+  }).then(res => {
+    console.log(res)
+  })
+}
+
+
+const onFinish = () => {
+  countDownFlag.value = false
+  countDown.value.reset();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0 10px;
+  background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
+  height: 100vh;
+
+
+
+}
+</style>