program/src/pages/user_center/edit/confirm_phone_first/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="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        use-button-slot
        :custom-style=custom_style
        @change="inputSms"
        :maxlength="6"
      >
        <van-button slot="button" size="small" type="primary" @click="sand_sms"
                    class="flex"
                    v-if="time_show==false"
        >
          <text>发送验证码</text>
        </van-button>
        <view v-else slot="button" class="flex align-center">
          <van-count-down v-if="time_show" :auto-start="time_start" class="control-count-down" @finish="time_finished"
                          :time="time_count * 1000" format="ss"/>
          <text>后发送验证码</text>
        </view>

      </van-field>
      <div class="padding bottom_button">
        <button class="cu-btn lg cu-btn-primary text-white text-center " @click="to_finally_confirm">确定修改</button>
      </div>
    </div>
    <van-toast id="van-toast"/>
  </div>
</template>

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

var $this
export default {
  name: "uc_edit_container",
  components: {},
  data() {
    return {
      base_phone: "",
      phone: "",
      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: 30px auto;
      `,
      time_show: false,
      time_start: false,
      time_count: 60
    }
  },
  methods: {
    //假隐藏
    cut_phone($val) {
      let start = $val.slice(0, 4);

      let end = $val.slice(-2);
      return start + '******' + end;
    },
    inputSms($val) {
      $this.sms = $val.mp.detail
    },
    //  发送验证码
    sand_sms() {
      Toast.loading({
        duration: 0
      })
      let $param = {
        phone: $this.base_phone
      }
      userGetCode($param).then((res) => {
        Toast.clear()
        let $data = res.data
        $this.start_count_down()
        Toast.success($data.errmsg)
      })
    },
    //跳转最终修改手机的页面
    to_finally_confirm() {
      Toast.loading({
        duration: 0
      })
      let $params = {phone: $this.base_phone, code: $this.sms}
      userCheckCode($params).then((res) => {
        Toast.clear()
        let $data = res.data
        if ($data.code == 0) {
          Toast.success({
            message: $data.errmsg,
            onClose() {
              mpvue.navigateTo({
                url: "/pages/user_center/edit/confirm_phone_finally/main"
              })
            }
          })
        } else {
          Toast.fail($data.errmsg)
        }
      })
    },
    start_count_down() {
      $this.time_count = 60
      $this.time_start = $this.time_show = true
    },
    time_finished() {
      $this.time_start = $this.time_show = false
    }
  }
  ,
  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>