new-cashier/jeepay-ui-uapp-agent/pageWork/setUp/takeMoneyPwd.vue

<template>
  <view class="border"></view>
  <!-- v-if="vdata.index === 0" -->
  <view class="pw-box" v-if="vdata.index === 0">
    <view class="disc">
      <text>验证密码</text>
      <text>请输入支付密码，以验证身份</text>
    </view>
    <view class="">
      <verification-code-style
        :latticeNum="6"
        ref="verCode"
        @getInputVerification="getInputVerification1"
        ciphertextSty="1"
      ></verification-code-style>
    </view>
  </view>
  <view class="pw-box" v-if="vdata.index === 1">
    <view class="disc">
      <text>设置新密码</text>
      <text>请输入新的支付密码</text>
    </view>
    <view class="">
      <verification-code-style
        :latticeNum="6"
        @getInputVerification="getInputVerification2"
        ciphertextSty="1"
      ></verification-code-style>
    </view>
  </view>
  <view class="" style="width: 580rpx; margin: 0 auto" v-if="vdata.index === 2">
    <view class="pw-box">
      <view class="disc">
        <text>验证新密码</text>
        <text>请再输入一次新的支付密码</text>
      </view>
      <view class="">
        <verification-code-style
          :latticeNum="6"
          ref="newVerCode"
          @getInputVerification="getInputVerification3"
          ciphertextSty="1"
        ></verification-code-style>
      </view>
      <view class="left" @click="back"> <text style="margin-left: 10rpx">重新设置密码</text> </view>
    </view>
    <!-- <view class="btn" @click="change">
      <text>确认修改</text>
    </view> -->
  </view>

  <JDeletedTips ref="tips" @confirm="phoneConfirm" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue"
import { $isAgentSipw, $updateAgentSipw, $isSipw } from "../../http/apiManager.js"
import { onLoad, onBackPress } from "@dcloudio/uni-app"
import { Base64 } from "js-base64"
import verificationCodeStyle from "@/components/verification-code-style2/verification-code-style2"
import JDeletedTips from "@/components/newComponents/JDeletedTips/JDeletedTips"
const vdata = reactive({
  oldPwd: "",
  index: 0,
  newPwd: "",
  confirmPwd: "",
  allowChange: false,
  isBack: false, //是否允许退出
})
const { ctx } = getCurrentInstance()
const tips = ref(null)
onBackPress(() => {
  if (vdata.isBack) {
    return false
  } else {
    tips.value.open("是否退出支付密码修改?退出将不会保存您所做的修改")
    return true
  }
})
onLoad((options) => {
  //判断是否有密码
  let ispwd = ""
  $isSipw()
    .then((res) => {
      console.log(res.bizData)
      ispwd = res.bizData
      if (options.pwd === "0" || !ispwd) {
        vdata.index = 1
      } else {
        vdata.index = 0
      }
    })
    .catch((err) => {
      console.log(err)
    })
})

const phoneConfirm = () => {
  vdata.isBack = true
  uni.navigateBack({
    delta: 1,
  })
}
const getInputVerification1 = (e) => {
  // console.log(e)
  if (e && e.length === 6) {
    vdata.oldPwd = e
    $isAgentSipw({
      originalPwd: Base64.encode(e),
    }).then((res) => {
      if (res.bizData) {
        vdata.index = 1
      } else {
        uni.showToast({
          icon: "none",
          title: "密码验证错误",
        })
        ctx.$refs.verCode.cleanVal()
      }
    })
  }
}
const getInputVerification2 = (e) => {
  if (e.length === 6) {
    vdata.index = 2
    vdata.newPwd = e
  }
}

const getInputVerification3 = (e) => {
  if (e.length === 6) {
    if (e !== vdata.newPwd) {
      uni.showToast({
        icon: "none",
        title: "两次输入的密码不一致",
      })
      ctx.$refs.newVerCode.cleanVal()
    } else {
      vdata.allowChange = true
      vdata.confirmPwd = e
      change()
    }
  }
}
const change = () => {
  if (vdata.allowChange) {
    $updateAgentSipw({
      originalPwd: Base64.encode(vdata.oldPwd),
      confirmPwd: Base64.encode(vdata.newPwd),
    }).then((res) => {
      uni.showToast({
        icon: "success",
        title: "修改成功",
      })
      vdata.isBack = true
      uni.navigateBack({
        delta: 1,
      })
    })
  }
}
const back = () => {
  vdata.index = 1
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.border {
  height: 1rpx;
  width: 100%;
  background-color: #f5f6fc;
}
.swiper {
  background-color: #ff5500;
  margin-top: 154rpx;
  height: 80vh;
  .swiper-item {
    width: 100%;
    background-color: #3981ff;
  }
}
.btn {
  width: 393rpx;
  height: 120rpx;
  border-radius: 20rpx;
  background: $primaryColor;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 33rpx;
  color: #fff;
  margin-top: 500rpx;
}

.pw-box {
  // height: 400rpx;
  width: 580rpx;
  // background-color: aqua;
  margin: 0 auto;
  margin-top: 156rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .disc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-bottom: 182rpx;
    text {
      &:nth-child(1) {
        font-weight: bold;
        font-size: 40rpx;
        color: #000;
        margin-bottom: 30rpx;
      }
      &:nth-child(2) {
        font-weight: bold;
        font-size: 33rpx;
        color: #2e2e2e;
      }
    }
  }
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2735b4;
    font-size: 25rpx;
    margin-top: 53rpx;
  }
}
.popview {
  box-sizing: border-box;
  width: 630rpx;
  height: 412rpx;
  border-radius: 20rpx;
  background: #fff;
  padding: 50rpx 50rpx 30rpx 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  top: -500rpx;
  left: -310rpx;
  .title {
    font-weight: bold;
    font-size: 33rpx;
    color: #000;
  }
  .content {
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .op {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
      width: 45%;
      height: 110rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>