wjt
2024-06-27 69a74309ed12cc13f0fa9fb90c5bffad17ade360
policy/changePhone/changePhone.vue
@@ -1,22 +1,267 @@
<!-- 企业登录 -->
<template>
   <view>
   <view class="companylogin">
      <view class="content-box">
         <view class="form">
            <view class="form-item margin-bottom">
               <view class="form-label">
                  手机号
               </view>
               <view class="form-input">
                  <input type="number"  placeholder="请输入11位手机号" v-model="form.phone"/>
               </view>
            </view>
            <view class="form-item">
               <view class="form-label">
                  验证码
               </view>
               <view class="form-input set-flex set-flex-content-between">
                  <input type="number" placeholder="请输入验证码" v-model="form.code"/>
                  <view @click="getCode">
                     <text class="driver"></text>
                     <text class="getcode">{{tips}}</text>
                  </view>
               </view>
            </view>
         </view>
         <view style="margin-top: 56rpx;">
            <view class="per-button" @click="changeCode">修改手机号</view>
         </view>
      </view>
   </view>
</template>
<script>
   import { getNewVerify, getInfo, checkCode, updatePhone } from '@/api/auth.js'
   export default {
      data() {
         return {
            tips: '获取验证码',
            form: {
               phone: '',
               code: '',
               userType: ''
            },
            loginToken: '',
            isSendCode: false,
            countdownTime: 20,
            timer: ''
         }
      },
      onLoad(options) {
         if(options.code) {
            this.form.userType = options.code
         }
         if(options.companyId) {
            this.form.companyId = options.companyId
         }
      },
      onUnload() {
         if(this.timer) {
            clearTimeout(this.timer)
            this.timer = null
         }
      },
      methods: {
         getCode() {
            if(!this.form.phone){
               uni.showToast({
                  title: '请输入手机号',
                  icon: 'none'
               })
               return
            }
            if(!this.$u.test.mobile(this.form.phone)){
               uni.showToast({
                  title: '请输入正确的手机号',
                  icon: 'none'
               })
               return
            }
            if (!this.isSendCode) {
               this.isSendCode = true
               uni.showLoading({
                  title: '正在获取验证码'
               })
               getNewVerify({phone: this.form.phone }).then(val => {
                     if(val.data.code == 200) {
                        this.startCountdown()
                        uni.hideLoading();
                        this.tips = `${this.countdownTime}s后重新获取`
                        uni.$u.toast('验证码已发送');
                     }
               })
            } else {
               uni.$u.toast('倒计时结束后再发送');
            }
         },
         startCountdown() {
            if(this.timer) {
               clearTimeout(this.timer)
               this.timer = null
            }
            if(this.countdownTime <= 0) {
               this.tips = "重新获取"
               this.isSendCode = false
               this.countdownTime = 20
               return
            }
            this.timer = setTimeout(() => {
               this.countdownTime--
               this.tips = `${this.countdownTime}s后重新获取`
               this.startCountdown()
            }, 1000)
         },
         async checkCode() {
            try{
               const { data } = await checkCode(this.form)
               if(data.code == 200 && data.data) {
                  return Promise.resolve()
               } else {
                  uni.showToast({
                     title: '验证码错误',
                     icon: 'none'
                  })
                  throw "验证码错误"
                  return Promise.reject('验证码错误')
               }
            } catch(err) {
               uni.showToast({
                  title: '验证码错误',
                  icon: 'none'
               })
               throw "验证码错误"
            }
         },
         async changeCode() {
            await this.checkCode()
            if(!this.form.phone){
               uni.showToast({
                  title: '请输入手机号',
                  icon: 'none'
               })
               return
            }
            if(!this.$u.test.mobile(this.form.phone)){
               uni.showToast({
                  title: '请输入正确的手机号',
                  icon: 'none'
               })
               return
            }
            updatePhone(this.form).then(val => {
               if(val.data.code == 200) {
                  if(val.data.data == 1) {
                     uni.showToast({
                        title: '修改成功,请重新登录',
                        icon: 'none'
                     })
                     uni.clearStorage()
                     setTimeout(() => {
                        uni.reLaunch({
                           url: '/pages/companyLogin/companyLogin?code=02'
                        })
                     }, 500)
                  } else {
                     uni.showToast({
                        title: '修改成功',
                        icon: 'none'
                     })
                     setTimeout(() => {
                        uni.navigateBack()
                     }, 500)
                  }
               }
            })
         },
         getInfo() {
            getInfo().then(val => {
               console.log(val)
               uni.setStorageSync('userInfo',  val.data.data)
               if(this.form.userType == '02') {
                  uni.redirectTo({
                     url:`/pages/companyIndex/companyIndex`
                  })
               } else if(this.form.userType == '01'){
                  uni.redirectTo({
                     url:`/policy/policyIndex/policyIndex`
                  })
               }
            })
         },
         goRegister() {
            uni.navigateTo({
               url: `/pages/registerCompany/registerCompany`
            })
         }
      }
   }
</script>
<style>
</style>
<style scoped lang="scss">
   .companylogin {
      padding-top: 60rpx;
      &>.image-box {
         width: 100%;
         height: 345rpx;
         text-align: center;
         background-color: #111;
         &>image{
            width: 100%;
            height: 345rpx;
         }
      }
      .content-box{
         border-radius: 40rpx 40rpx 0 0;
         padding: 40rpx 32rpx;
         position: relative;
         top: -40rpx;
         background-color: white;
         .form {
            .form-item{
               .form-label{
                  font-size: 34rpx;
                  margin: 0 0 24rpx 16rpx;
               }
               .form-input{
                  background-color: #F7F7F7;
                  padding: 20rpx;
                  border-radius: 20rpx;
               }
            }
         }
         .margin-bottom{
            margin-bottom: 36rpx;
         }
         .getcode{
            color: #1171E0;
            font-size: 34rpx;
            font-weight: 500;
            width: 20%;
         }
         .driver{
            display: inline-block;
            vertical-align: middle;
            margin-right: 20rpx;
            width: 2rpx;
            height: 48rpx;
            background-color: #C3C6CD;
         }
      }
      .company-register{
         position: fixed;
         bottom: 32rpx;
         left: 50%;
         transform: translateX(-50%);
         padding: 16rpx 46rpx;
         color: #1171E0;
         display: inline-block;
         border-radius: 12rpx;
         border: 2rpx solid #ABD2FF;
         background: #F0F8FF;
      }
   }
</style>