cashier/fuintUniapp/pages/user/mobile.vue

<template>
  <view class="container">
    <view class="form">
      <!-- 手机号 -->
      <view class="form-item">
          <text class="iconfont icon-shoujihao"></text>
          <text class="pre-mobile">+86</text>
          <input class="form-item--input" style="padding-left: 12rpx;" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
      </view>
      <!-- 图形验证码 -->
      <view class="form-item">
        <text class="iconfont icon-tuxingyanzhengma"></text>
        <input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
        <view class="form-item--parts">
          <view class="captcha" @click="getCaptcha()">
            <image class="image" :src="captcha"></image>
          </view>
        </view>
      </view>
      <!-- 短信验证码 -->
      <view class="form-item">
        <text class="iconfont icon-yanzhengma"></text>
        <input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
        <view class="form-item--parts">
          <view class="captcha-sms" @click="handelSmsCaptcha()">
            <text v-if="!smsState" class="activate">获取验证码</text>
            <text v-else class="un-activate">重新发送({{ times }})秒</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="footer-fixed">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="doSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as UserApi from '@/api/user'
  import * as LoginApi from '@/api/login'
  import * as Verify from '@/utils/verify'
  import store from '@/store'
  
  // 倒计时时长(秒)
  const times = 60
  
  export default {
    data() {
      return {
        // 正在加载
        isLoading: false,
        // 手机号
        mobile: '',
        // 图形验证码信息
        captcha: "",
        // 图形验证码uuid
        captchaUuid: "",
        // 图形验证码
        captchaCode: '',
        // 短信验证码发送状态
        smsState: false,
        // 短信验证码
        smsCode: '',
        // 倒计时
        times,
      }
    },
    
    /**
     * 生命周期函数--监听页面加载
     */
    created() {
      // 获取图形验证码
      this.getCaptcha();
    },

    methods: {
      // 获取图形验证码
      getCaptcha() {
        const app = this
        LoginApi.captcha()
          .then(result => {
            app.captcha = result.data.captcha;
            app.captchaUuid = result.data.uuid;
            app.captchaCode = "";
        })
      },
      // 点击发送短信验证码
      handelSmsCaptcha() {
        const app = this
        if (Verify.isEmpty(app.mobile)) {
            app.$toast("请填写手机号");
            return false;
        }
        if (Verify.isEmpty(app.captchaCode)) {
            app.$toast("请填写图形验证码");
            return false;
        }
        if (!app.isLoading && !app.smsState) {
            app.sendSmsCaptcha();
        }
      },
      // 请求发送短信验证码接口
      sendSmsCaptcha() {
        const app = this
        app.isLoading = true
        LoginApi.sendSmsCaptcha({
              captchaKey: app.captcha.key,
              captchaCode: app.captchaCode,
              mobile: app.mobile,
              uuid: app.captchaUuid
          })
          .then(result => {
            // 显示发送成功
            if (result.data) {
               app.$toast(result.message)
               // 执行定时器
               app.timer()
            } else {
                app.$error(result.message)
            }
          })
          .finally(() => app.isLoading = false)
      },
      // 执行定时器
      timer() {
        const app = this
        app.smsState = true
        const inter = setInterval(() => {
          app.times = app.times - 1
          if (app.times <= 0) {
              app.smsState = false;
              app.times = times;
              clearInterval(inter);
          }
        }, 1000)
      },
      // 提交保存
      doSubmit() {
         const app = this;
         if (Verify.isEmpty(app.mobile)) {
             this.$toast('请输入您的手机号')
             return false
         }
         if (Verify.isEmpty(app.smsCode)) {
             this.$toast('请输入短信验证码')
             return false
         }
         app.isLoading = true;
         UserApi.save({"mobile": app.mobile, "verifyCode": app.smsCode})
             .then(result => {
               app.isLoading = false;
               if (result.code == 200) {
                   app.$success('保存成功！');
               } else {
                   app.$error(result.message ? result.message : '保存失败！');
               }
         }).catch(err => {
             app.isLoading = false;
         })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form {
      margin-top: 50rpx;
  }
  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 2rpx solid #cccccc;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-bottom: 25rpx;
    height: 110rpx;
    align-items: center;
    justify-content: center;
    .pre-mobile {
        line-height: 75rpx;
        color: #888888;
    }
  
    &--input {
      font-size: 26rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
      padding-left: 5rpx;
    }
  
    &--parts {
      min-width: 100rpx;
      height: 100%;
    }
  
    // 图形验证码
    .captcha {
      height: 100%;
  
      .image {
        display: block;
        width: 192rpx;
        height: 80rpx;
      }
    }
  
    // 短信验证码
    .captcha-sms {
      font-size: 22rpx;
      line-height: 50rpx;
      padding-right: 20rpx;
  
      .activate {
        color: #cea26a;
        border: #ccc solid 1px;
        padding: 18rpx;
        border-radius: 8rpx;
      }
  
      .un-activate {
        color: #9e9e9e;
      }
    }
  }

  // 底部操作栏
  .footer-fixed {
    z-index: 11;
    box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
    margin-top: 80rpx;
    .btn-wrapper {
      height: 100%;
      display: flex;
      text-align: center;
      align-items: center;
      padding: 0 30rpx;
      margin-bottom: 10rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      border-radius: 40rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);
    }
    
    .btn-item-back {
      margin-top: 20rpx;
      background: #FFFFFF;
      border: 1px solid $fuint-theme;
      color: #666666;
    }

  }
</style>