program/src/pages/user_center/edit/confirm_phone_finally/index.vue

<template>
  <div class="uc_edit_container">
    <div class="main_content text-center">
      <img src="https://img.shuimuai.com/sign_phone_shuimu.png" class="main_icon" alt="">
      <view class="solid-bottom text-xl padding">
        <text class="text-black text-bold">验证当前手机号 {{ phone }}</text>
      </view>
      <view class=" text-sm">
        <text class="text-gray sub-title">为了你的账号安全，请输入验证码</text>
      </view>

      <van-field
        value="+86"
        center
        label="国家"
        readonly
        :custom-style='custom_style'
      >
      </van-field>

      <van-field
        :value="new_phone"
        label="手机号"
        placeholder="请输入手机号"
        maxlength="11"
        error-message="手机号格式错误"
        :custom-style="custom_style"
        type="number"
      />

      <van-field
        :value="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        use-button-slot
        :custom-style='custom_style'
      >
        <van-button slot="button" size="small" type="primary" @click="sand_sms"
        >发送验证码
        </van-button
        >
      </van-field>
      <div class="padding bottom_button">
        <button class="cu-btn lg cu-btn-primary text-white text-center " @click="confirm_modify">确定修改</button>
      </div>
    </div>
    <van-toast id="van-toast"/>
  </div>
</template>

<script>
import Toast from '../../../../../static/vant/toast/toast';
import {userChangePhone, userGetCode} from "../../../../requests/user";

var $this
export default {
  name: "uc_edit_container",
  components: {},
  data() {
    return {
      base_phone: "18802603801",
      phone: "18802603801",
      sms: "",
      custom_style: `width: 330px;
            height: 49px;
            background: rgba(242, 243, 255, 0.6);
            box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
            border-radius: 10px;
            margin: 20px auto;
      `,
      new_phone: ""
    }
  },
  methods: {
    //假隐藏
    cut_phone($val) {
      let start = $val.slice(0, 4);

      let end = $val.slice(-2);
      return start + '******' + end;
    },
    //  发送验证码
    sand_sms() {
      if (!$this.new_phone) {
        Toast.fail('手机号不为空')
      }
      let $param = {
        phone: $this.new_phone
      }
      userGetCode($param).then((res) => {
        let $data = res.data
        if ($data.code != 200) {
          Toast.fail($data.errmsg)
        }
      })
    },
    //确认修改
    confirm_modify() {
      // 修改成功跳转个人首页
      let $params = {
        code: $this.sms,
        new_phone: $this.new_phone,
        old_phone: $this.phone
      }
      userChangePhone($params).then((res) => {
        let $data = res.data
        if ($data.code == 0) {
          Toast.success($data.errmsg)
          mpvue.navigateBack({
            delta: 2
          })
        }
      })
    }
  }
  ,
  mounted() {
    let $userinfo = wx.getStorageSync('userinfo')
    $this.phone = $this.base_phone = $userinfo['phone']
    $this.phone = $this.cut_phone($this.phone)
  },
  created() {
    $this = this;
  },
  onLoad() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>