tuanfeng-pc-mer/src/views/setup/phone/index.vue

<template>
  <div class="integralPage">
    <div class="configuration">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧手机号" prop="oldPhone">
          <el-input
            v-if="Number(privacyTime) === 0" disabled :value="hidden(oldPhone, 3, 4)" style="width: 70%"
            placeholder="请输入旧手机号"
          />
          <el-input v-else v-model="oldPhone" disabled style="width: 70%" placeholder="请输入旧手机号" />
        </el-form-item>
        <el-form-item label="新手机号" prop="newPhone">
          <el-input v-model="ruleForm.newPhone" maxlength="11" style="width: 70%" placeholder="请输入新手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <GraphicVerificationCode
            api-type="update"
            :phone="ruleForm.newPhone"
            @input="(e) => ruleForm.code = e"
          ></GraphicVerificationCode>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submint"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import GraphicVerificationCode from '@/components/GraphicVerificationCode/index.vue'
import {
  getAdminPhone,
  updatePhone
} from '@/api/privacy'
const JM = require('@/utils/rsaEncrypt.js')
export default {
  name: 'Phone',
  components: {
    GraphicVerificationCode
  },
  data() {
    // 旧手机号
    const oldPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入旧手机号'))
      } else if (/^1[3456789]\d{9}$/.test(value) === false) {
        return callback(new Error('请输入正确的手机号'))
      }
      callback()
    }
    // 新手机号
    const newPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入新手机号'))
      } else if (/^1[3456789]\d{9}$/.test(value) === false) {
        return callback(new Error('请输入正确的手机号'))
      }
      callback()
    }
    // 验证码
    const code = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入验证码'))
      }
      callback()
    }
    return {
      ruleForm: {
        newPhone: '',
        code: ''
      },
      oldPhone: '',
      rules: {
        oldPhone: [ { required: true, validator: oldPhone, trigger: 'blur' } ],
        newPhone: [ { required: true, validator: newPhone, trigger: 'blur' } ],
        code: [ { required: true, validator: code, trigger: 'blur' } ]
      },
      privacyTime: 0
    }
  },
  created() {
    this.getPhone()
    this.privacyTime = localStorage.getItem('privacyTime')
  },
  mounted() { },
  methods: {
    // 获取管理员电话
    getPhone() {
      getAdminPhone().then((res) => {
        this.oldPhone = res.data
      })
    },
    submint() {
      if (this.ruleForm.newPhone === '' || this.ruleForm.newPhone === undefined) {
        this.$message.error('请填写新手机号')
        return
      }
      if (/^1[3456789]\d{9}$/.test(this.ruleForm.newPhone) === false) {
        this.$message.error('请填写正确手机号')
        return false
      }
      if (this.ruleForm.code === '' || this.ruleForm.code === undefined) {
        this.$message.error('请填写验证码')
        return
      }
      var data = {
        code: JM.encrypt(this.ruleForm.code),
        newPhone: JM.encrypt(this.ruleForm.newPhone),
        phone: JM.encrypt(this.oldPhone)
      }
      updatePhone(data).then((res) => {
        if (res.code === '') {
          this.$message({
            message: '手机号修改成功',
            type: 'success'
          })
          this.getPhone()
          this.ruleForm = {
            newPhone: '',
            code: ''
          }
        }
      })
    },
    // 中间部分
    hidden(str, frontLen, endLen) {
      let endLenData = 0
      if (str.length !== 2) {
        endLenData = endLen
      }
      const len = str.length - frontLen - endLenData
      let xing = ''
      for (let i = 0; i < len; i++) {
        xing += '*'
      }
      return (
        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
      )
    }
  }
}
</script>

<style lang="scss" scpoed>
.integralPage {
	padding: 32px 20px;

	.configuration {
		width: 600px;
	}
}
</style>