loan/src/views/uploadPassword/index.vue

<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="$t('app.phoneNumber')"
        :placeholder="$t('app.enter') + $t('app.phoneNumber')"
        label-align="top"
        style="background: #12332100"
        type="tel"
      />

      <van-field
        v-model="loginData.code"
        class="login-btn"
        :label="$t('app.verificationCode')"
        :placeholder="$t('app.enter') + $t('app.verificationCode')"
        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">{{ $t('app.send') + $t('app.verificationCode') }}</div>
          </div>
        </template>
      </van-field>

      <van-field
        v-model="loginData.password"
        class="login-btn"
        label-align="top"
        :label="$t('app.login') + $t('app.password')"
        :placeholder="$t('app.passwordPlaceholder')"
        style="background: #12332100"
        type="password"
      />

      <van-field
        v-model="loginData.confirmPassword"
        class="login-btn"
        label-align="top"
        :label="$t('app.confirm') + $t('app.password')"
        :placeholder="$t('app.passwordPlaceholder1')"
        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"
        >
          {{ $t('app.confirm') + $t('app.update') }}
        </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";
import { useI18n } from 'vue-i18n';

const { t } = useI18n()
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(t('app.enter') + t('app.phoneNumber'))
  }
};

const next = () => {
  flag.value = '2'
}

const updatePwdBtn = () => {
  updatePwd({
    checkCode: loginData.checkCode,
    confirmPassword: loginData.confirmPassword,
    password: loginData.password
  }).then(res => {
    console.log(res)
    showToast(t('app.update') + t('app.success'))
  })
}
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>