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

<script>
import { mapState } from 'vuex'
import api from '@/api'
import Pass from '@/pages/login/components/pass.vue'
export default {
  components: { Pass },
  data() {
    return {
      tips: '',
      passVisible: false,
      form: {
        phone: '',
        password: '',
        code: ''
      }
    }
  },
  computed: {
    ...mapState({
      user(state) {
        this.form.phone = state.user.mobile
        return state.user
      },
      params: 'params'
    })
  },
  onLoad() {
    let { type } = this.params
    uni.setNavigationBarTitle({ title: type === 'edit' ? '修改登录密码' : '忘记密码' })
  },
  methods: {
    async sendCode() {
      if (!this.form.phone) {
        this.$common.toast('请输入手机号')
        return
      }
      await api.sendCode({ type: 'editpass', mobile: this.form.phone })

      this.$refs.uCode.start()
    },
    async edit() {
      await api.editLoginPass({
        ...this.form,
        password: this.$common.Encryption(this.form.password)
      })
      this.$common.toast('修改成功，请重新登录')
      setTimeout(() => {
        this.$store.commit('exit', 'logout')
      }, 1500)
    }
  }
}
</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="60"
            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="passbox">
        <Pass v-model="form.password" round="50rpx" />
      </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;
}
</style>