applet/pages/set/payPassword.vue

<template>
  <view class="custom-form">
    <view class="custom-form-item">
      <text>支付密码</text>
      <input
        v-model="FormData.password"
        placeholder="请输入支付密码"
        :maxlength="6"
        type="number"
        :password="!showPassword"
      />
      <uv-icon
        :name="showPassword ? 'eye' : 'eye-fill'"
        size="36rpx"
        @click="changePassword"
      ></uv-icon>
    </view>
    <view class="custom-form-item">
      <text>验证码</text>
      <input v-model="FormData.captcha" placeholder="本账户手机验证码" />
      <uv-code
        :seconds="seconds"
        @end="end"
        @start="start"
        ref="code"
        @change="codeChange"
      ></uv-code>
      <uv-button @tap="getCode" color="#FFECEC" shape="circle">{{
        tips
      }}</uv-button>
    </view>
  </view>
  <view class="submit">
    <uv-button
      type="error"
      color="#EB5153"
      text="确认提交"
      shape="circle"
      @tap="submit"
    ></uv-button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { setPayPassword_Api } from "@/api/userInfo.js";
import { smsCode } from "@/api/login.js";

const FormData = ref({
  password: "",
  captcha: "",
});
const code = ref();
const seconds = ref(60);
const tips = ref("获取验证码");

const codeChange = (text) => {
  tips.value = text;
};

const showPassword = ref(false);
const changePassword = () => {
  showPassword.value = !showPassword.value;
};

const getCode = () => {
  if (code.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    smsCode({
      mobile: FormData.value.mobile,
    })
      .then((res) => {
        uni.$uv.toast("验证码已发送");
      })
      .finally((e) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        code.value.start();
      });
  } else {
    uni.$uv.toast("倒计时结束后再发送");
  }
};
const end = () => {
  uni.$uv.toast("倒计时结束");
};
const start = () => {
  uni.$uv.toast("倒计时开始");
};

const submit = () => {
  if (!FormData.value.password) {
    return uni.$uv.toast("支付密码不能为空");
  }
  if (FormData.value.password.length < 6) {
    uni.$uv.toast("支付密码长度不能少于6位");
    return;
  }
  if (!FormData.value.captcha) {
    return uni.$uv.toast("验证码不能为空");
  }
  setPayPassword_Api(FormData.value).then((res) => {
    uni.showToast({
      title: "设置成功",
      icon: "success",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 500);
  });
};
</script>

<style lang="scss" scoped>
.custom-form {
  padding: 20rpx 54rpx;
}

.custom-form {
  margin-bottom: 60rpx;

  .custom-form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    text {
      margin-right: 24rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: normal;
      color: #1a1a1a;
      flex-shrink: 0;
    }

    :deep(.input-placeholder) {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: normal;
      color: #d9d9d9;
    }
  }

  :deep(.uv-button) {
    height: 55rpx;
    margin-left: auto;
    color: #ea3527 !important;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: bold;
  }
}

.submit {
  margin: 0 60rpx;

  :deep(.uv-button) {
    height: 90rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
  }
}
</style>