NN2023021801/addons/dbapp/pagesUser/setting/editSecurityPass.vue

<script>
import { mapState } from 'vuex'
import api from '@/api'
export default {
  data() {
    return {
      tips: '',
      passVisible: false,
      form: {
        phone: '',
        password: '',
        code: ''
      }
    }
  },
  computed: {
    ...mapState({
      user(state) {
        this.form.phone = state.user.mobile
        return state.user
      }
    })
  },
  methods: {
    async sendCode() {
      if (!this.form.phone) return
      await api.sendCode({ type: 'securitypass', mobile: this.form.phone })

      this.$refs.uCode.start()
    },
    async edit() {
      await api.editSecurityPass({
        ...this.form,
        password: this.$common.Encryption(this.form.password)
      })

      this.$common.toast('设置成功')
      setTimeout(() => {
        this.$common.back()
      }, 1000)
    }
  }
}
</script>

<template>
  <view class="page bg-white">
    <view class="main">
      <input
        type="text"
        v-model="form.phone"
        :disabled="JSON.stringify(user) !== '{}'"
        class="input"
        placeholder="请输入手机号"
        placeholder-style="color:#a9a9a9"
      />

      <u-input
        v-model="form.code"
        placeholder="输入验证码"
        placeholderStyle="color:#a9a9a9"
        border="none"
        customStyle="width: 605rpx;height: 100rpx;background: #f7f7f7;border-radius: 50rpx;padding: 0 60rpx;box-sizing: border-box;"
      >
        <template slot="suffix">
          <u-code
            ref="uCode"
            seconds="59"
            startText="获取验证码"
            changeText="已发送（Xs）"
            @change="text => (tips = text)"
          ></u-code>
          <view class="code" :class="tips.includes('s') ? 'wait' : ''" @click="sendCode">
            {{ tips }}
          </view>
        </template>
      </u-input>

      <view class="tip">
        提示：如若短信验证码发送成功，因运营商运营会稍有延迟，请确
        定手机号码不在欠费状态，以及信号良好状态。如果一直没收到， 请联系客服。
      </view>

      <view class="flex flex-center">
        <view class="title">安全密码</view>
        <u-code-input v-model="form.password" mode="box" dot size="60rpx"></u-code-input>
      </view>
    </view>

    <u-button
      text="确定"
      color="var(--theme)"
      shape="circle"
      :disabled="!(form.phone && form.password && form.code)"
      customStyle="width:650rpx;height:98rpx; position:fixed;bottom:100rpx;left:50%;transform:translate(-50%)"
      @click="edit"
    ></u-button>
  </view>
</template>

<style lang="scss" scoped>
.page {
  padding: 57rpx 46rpx 0;
}
.main {
  padding: 0 10rpx 0 25rpx;
}

.input {
  width: 605rpx;
  height: 100rpx;
  background: #f7f7f7;
  border-radius: 50rpx;
  padding: 0 60rpx;
  box-sizing: border-box;
  margin-bottom: 30rpx;
  text-align: left;

  &.pass {
    margin: 34rpx 0 31rpx;
  }
}

.passbox {
  position: relative;
  width: 605rpx;
  .eye {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    right: 63rpx;
    top: 50%;
    transform: translateY(-30%);
  }
}

.code {
  color: #637bf7;
  font-size: 28rpx;
  &.wait {
    color: var(--info);
  }
}

.tip {
  color: #f76363;
  font-size: 20rpx;
  margin: 26rpx 16rpx;
}

.title {
  color: #333333;
  font-size: 30rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

/deep/.u-code-input__item {
  border: none !important;
  background-color: #f3f3f3;
  border-radius: 20rpx;
}
</style>