fangliaoxiaochengxv/subPages/setting/setPwd.vue

<template>
  <view style="background-color: #FFFFFF;height: 100%;width: 100%;padding-top:80rpx">
    <view class="shopping-wrapper">
      <view>
        <u-icon name="close" bold color="#333333" size="20" @click="goBack()"></u-icon>
      </view>
      <view class="title">
        <view class="title-text mb8" v-if="type=='add'">请设置安全密码</view>
        <view class="title-text mb8" v-else-if="type=='set-2'">请输入原密码</view>
        <view class="title-text mb8" v-else>请输入新密码</view>
        <view class="title-prompt">6位数字</view>
      </view>
      <view class="mb12">
        <u-input
            :type="isPasswordVisible ? 'password' : 'text'"
            placeholder="确认安全密码"
            v-model="password"
            maxlength="6"
            :disabled="isSetPassword"
            shape="circle"
            placeholderStyle="color:#888888;"
            color="#333333"
            border="none"
            custom-style="background-color: #F3F6FC;padding-right: 20rpx;padding-left: 20rpx;opacity: 0.6;height: 94rpx;"
        >
          <template slot="suffix">
            <u-icon
                v-if="password.length>0&&!this.isSetPassword"
                :name="isPasswordVisible ? 'eye' : 'eye-off'"
                size="20"
                @click="togglePasswordVisibility"
            />
          </template>
        </u-input>
      </view>
      <view v-if="type=='add'">
        <u-input
            :type="isPasswordVisible2 ? 'password' : 'text'"
            placeholder="再次确认安全密码"
            v-model="password2"
            maxlength="6"
            :disabled="isSetPassword"
            shape="circle"
            placeholderStyle="color:#888888;"
            color="#333333"
            border="none"
            custom-style="background-color: #F3F6FC;padding-right: 20rpx;padding-left: 20rpx;opacity: 0.6;height: 94rpx;"
        >
          <template slot="suffix">
            <u-icon
                v-if="password2.length>0&&!this.isSetPassword"
                :name="isPasswordVisible2 ? 'eye' : 'eye-off'"
                size="20"
                @click="togglePasswordVisibility2"
            />
          </template>
        </u-input>
      </view>
      <view style="height: 108rpx; " class="btn-commnt" @click="setPassword()">
        <view class="btn-commnt-text" v-if="type=='add'||type=='set-3'">完成</view>
        <view class="btn-commnt-text" v-else>下一步</view>
      </view>
    </view>
  </view>
</template>
<script>
import {checkPayPswd, setPayPswd} from "@/common/api";
import {getUserInfo} from "@/common/api/user";

export default {
  data() {
    return {
      password: '',
      password2:'',
      userInfo: {},
      isSetPassword: false,
      isPasswordVisible: true,
      isPasswordVisible2: true,
      type: "add",
      verifyCode:"",
    };
  },
  onLoad(options) {
    // 保存查询参数到页面的数据对象中
    if (options.type) {
      this.type = options.type;
    }
    console.log("type", this.type)
  },
  onShow() {
    this.initUserInfo()
  },
  methods: {
    async getUserInfo() {
      const data = {}
      await getUserInfo(data)
          .then(res => {
            if (res.data) {
              uni.setStorageSync('token', res.data.token.token)
              uni.setStorageSync('userInfo', JSON.stringify(res.data))
              this.userInfo = res.data;
            }
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    async initUserInfo() {
      await this.getUserInfo();
      if (this.userInfo.pay_pswd && this.userInfo.pay_pswd.length > 0&& this.type == 'add' ) {
        this.isSetPassword = true;
        this.password = this.userInfo.pay_pswd;
        this.password2 = this.userInfo.pay_pswd;
      }
    },
    goBack() {
      uni.navigateBack({
        delta: 1 // 返回上一级页面
      });
    },
    change(e) {
    },
    togglePasswordVisibility() {
      this.isPasswordVisible = !this.isPasswordVisible;
    },
    togglePasswordVisibility2() {
      this.isPasswordVisible2 = !this.isPasswordVisible2;
    },
    savePad() {
      if (this.password.length < 6) {
        uni.showToast({
          title: '请输入6位数字',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (this.password!=this.password2 &&this.type=='add') {
        uni.showToast({
          title: '二次密码不一样，请重新确认',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (this.isSetPassword) {
        uni.showToast({
          title: '您已设置支付密码，无需重复设置',
          icon: 'none',
          duration: 2000
        });
        return
      }
      setPayPswd({pay_pswd: this.password}).then((res) => {
        if (this.type!="set-3"){
          uni.showToast({
            title: '保存成功'
          })
        }else{
          uni.showToast({
            title: '修改成功'
          })
        }
        this.isSetPassword = true
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/setting/index',
          });
        }, 500);
      })
    },
    verifyPad() {
      if (this.password.length < 6) {
        uni.showToast({
          title: '请输入6位数字',
          icon: 'none',
          duration: 2000
        });
        return
      }

      checkPayPswd({pay_pswd: this.password}).then((res) => {
        uni.navigateTo({
          url:  "/subPages/setting/setPwd?type=set-3",
      });
      })
    },
    setPassword() {
      switch (this.type) {
        case "add":
          this.savePad();
          break;
        case "set-1":
          break;
        case "set-2":
          this.verifyPad()
          break;
        case "set-3":
          this.savePad();
          break;
        default:
          break;
      }
    },
  }

}
</script>

<style lang="scss" scoped>
.shopping-wrapper {
  width: 630rpx;
  margin: 0rpx auto 0rpx;
  padding: 30rpx 30rpx 178rpx;

  .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
    justify-content: flex-start; /* 左对齐 */
    margin-top: 112rpx;
    margin-bottom: 124rpx;

    .title-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 48rpx;
      color: #262424;
      line-height: 68rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .title-prompt {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;;
    }
  }

  .btn-commnt {
    margin-top: 40rpx;
    background: linear-gradient(315deg, #CA9359 0%, #E2B98E 100%);
    border-radius: 292rpx 292rpx 292rpx 292rpx;
    opacity: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn-commnt-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      line-height: 42rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

</style>