init

src/views/uploadPassword/index.vue

@@ -0,0 +1,221 @@
+<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"/>
+    <view class="action">
+
+      <van-field
+        v-model="loginData.phoneNumber"
+        disabled
+        class="login-btn"
+        label="手机号码"
+        placeholder="请输入手机号码"
+        label-align="top"
+        style="background: #12332100"
+        type="tel"
+      />
+
+      <van-field
+        v-model="loginData.code"
+        class="login-btn"
+        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"
+        label="登录密码"
+        label-align="top"
+        placeholder="请设置6-16位密码"
+        style="background: #12332100"
+        type="password"
+      />
+
+      <van-field
+        v-model="loginData.confirmPassword"
+        class="login-btn"
+        label="确认密码"
+        label-align="top"
+        placeholder="请再次输入密码"
+        style="background: #12332100"
+        type="password"
+      />
+
+
+      <view style="padding: 20px">
+
+        <van-button
+          :disabled="!loginData.password || !loginData.confirmPassword"
+          color="linear-gradient(to right, #D2A64C, #F9D88D)"
+          round
+          style="width: 100%; margin: 20px 0"
+          @click.stop="updatePwdBtn"
+        >
+          确认修改
+        </van-button>
+      </view>
+    </view>
+
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from "vue";
+import {sendSmsForget, updatePwd} from "@/api/login";
+import {showToast} from "vant";
+import {getCustomerInfo} from "@/api";
+import {resetData} from "@/utils/dataUtil";
+
+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)
+    showToast('修改成功')
+  })
+}
+const customerInfo = reactive({
+  "account": 0,
+  "borrowAccount": 0,
+  "id": 0,
+  "lastLoginIp": "",
+  "lastLoginTime": "",
+  "loansFlag": 0,
+  "nickName": "",
+  "phoneNumber": "",
+  "realNameAuth": 0,
+  "repaymentAccount": 0,
+  "status": 0,
+  "updateTime": "",
+  "withdrawFlag": 0
+})
+const _getCustomerInfo = () => {
+  getCustomerInfo().then(res => {
+    resetData(customerInfo, res)
+    loginData.phoneNumber = customerInfo.phoneNumber
+  })
+}
+
+
+
+const onFinish = () => {
+  countDownFlag.value = false
+  countDown.value.reset();
+}
+
+onMounted(() => {
+  _getCustomerInfo()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0 10px;
+  background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
+  height: 100vh;
+
+  .action {
+    margin: 20px;
+    border-radius: 20px;
+    overflow: hidden;
+    background: #fff;
+    display: flex;
+    flex-flow: column;
+    box-shadow: 0 0 1vw 0px #e0e0e0;
+    &-content {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20px 20px;
+      box-shadow: 0 0 1vw 0px #e0e0e0;
+
+      &-item {
+        margin: 20px 0;
+      }
+
+      .id-card-box {
+        border-radius: 10px;
+        box-shadow: 0 0 1vw 0px #e0e0e0;
+        width: 500px;
+        height: 300px;
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .tt {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      background: #f6f9fd;
+      color: #738aa4;
+      padding: 20px 0;
+    }
+    //
+  }
+
+
+}
+</style>