driverSchool/pages/login/login.vue

<template>
  <view class="content">

    <view class="kuang">
      <view class="land">您好，</view>
      <view class="land">欢迎登录驾悦同行</view>
    </view>
    <view style="text-align: center;">
      <image src="../../static/imgs/hh.png" style="width: 80%; height: 200px;  margin: 40px auto; "></image>
    </view>

    <view class="xiaoannoi">
      <u-button v-if="privacyPolicyChecked == true" text="手机号快捷登录" class="dl" :customStyle="{color:'#ffffff'}"
                color="#2c78f5" open-type='getPhoneNumber' @getphonenumber="getPhone"></u-button>
      <u-button v-else text="手机号快捷登录" class="dl" :customStyle="{color:'#ffffff'}" color="#2c78f5"
                @click="shibai()"></u-button>
    </view>
    <view class="dbottom">
      <view class="axquan" v-if="privacyPolicyChecked == false" @click="privacyPolicyChecked = true"></view>
      <view class="axquanl" v-if="privacyPolicyChecked == true" @click="privacyPolicyChecked = false">
        <uni-icons type="checkmarkempty" color="#ffffff" size="14"></uni-icons>
      </view>
      <text>请您认真阅读</text>
      <text class="lan" @click="goPolicy()">《用户协议》</text>
      <text>和</text>
      <text class="lan" @click="goPolicy()">《隐私政策》</text>
    </view>

    <!-- <u-popup :show="show" mode="center" @close="close" @open="open">
                <view class="cont-popup">
            <view class="popup-title">
              <text>请选择身份</text>
            </view>
                   <view class="dix"  @click="getshenfen('jcyh')">
             <text>用户</text>
             <view class="qiu" v-if="shenfen != 'jcyh'"></view>
             <view class="lqiu" v-if="shenfen == 'jcyh'">
               <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
             </view>
             </view>
              <view class="dix"  @click="getshenfen('jcdb')">
              <text>代办</text>
              <view class="qiu" v-if="shenfen != 'jcdb'"></view>
              <view class="lqiu" v-if="shenfen == 'jcdb'">
                <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
              </view>
            </view>
                </view>
          <view class="anniu" @click="getsxshenfen()">
            <text>确认选择</text>
          </view>
      </u-popup> -->
  </view>
</template>

<script>
import request from '../../utils/request';
import config from '@/config'
import {
  getLocalUserInfo,
  setLocalUserInfo,
  setToken, setUserInfo
} from '@/utils/auth.js'

export default {
  data() {
    return {
      yd: false,
      shenfen: 'jcyh',
      show: false,
      baseUrl: this.$imagesUrl,
      loginUrl: this.$baseUrl,
      appId: this.$appId,
      appSecret: this.$appSecret,
      privacyPolicyChecked: false,
      phoneNumber: "",
      isButtonDisabled: false,
      countdownTime: 60,
      qh: [{
        text: '密码登录'
      },
        {
          text: '验证码登录'
        }
      ],
      columns: [
        ['用户', '代办']
      ],
      tel: '',
      yzm: '',
      wrod: '',
      activeid: 0
    }
  },
  onLoad() {
    this.wxlogin()
  },
  computed: {
    buttonText() {
      if (this.isButtonDisabled) {
        return `${this.countdownTime}s 后重新发送`;
      } else {
        return "获取验证码";
      }
    },
  },
  methods: {
    wxlogin() {
      uni.login({
        provider: 'weixin',
        success(res) {
          if (res.code) {
            uni.setStorageSync('c1', res.code);
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    },
    async getsxshenfen() {
      let data = {
        roleCode: this.shenfen
      }
      let res = await request({
        url: '/appInspection/userOwn/updateRole',
        method: 'post',
        params: data
      })
      if (res.code == 200) {
        uni.redirectTo({
          url: '/pages/detection/my'
        })
      }
    },
    getshenfen(text) {
      this.shenfen = text
    },
    open() {
    },
    close() {
    },
    goPolicy() {
      uni.navigateTo({
        url: "/pages/login/PrivacyPolicy"
      })
    },

    async getAppinfo() {
      let res = await request({
        url: '/getAppInfo',
        method: 'get',
      })
      console.log('getappinfo', res);
    },
    //授权
    authorize() {
      uni.showToast({
        icon: "none",
        title: "请阅读并勾选用户协议",
        duration: 2000
      })
    },
    shibai() {
      uni.showToast({
        icon: "none",
        title: "请阅读并勾选用户协议",
        duration: 2000
      })
    },
    getPhone(e) {
      console.log('执行了');
      config.header = config.header || {}
      config.header['tenant-id'] = '180'
      if (this.privacyPolicyChecked == false) {
        uni.showToast({
          icon: "none",
          title: "请阅读并勾选用户协议",
          duration: 2000
        })
        return;
      }
      uni.checkSession({
        success: () => {
          uni.request({
            url: this.loginUrl + "/userClient/repair/wxLogin",
            method: "POST",
            header: config.header,
            data: {
              code: uni.getStorageSync('c1'),
              encryptedIv: e.detail.iv,
              encryptedData: e.detail.encryptedData,
              inviteId: uni.getStorageSync('inviteId') ? uni.getStorageSync(
                  'inviteId') : null,
              type: 'jx',
            },
            success: (rex) => {
              console.log('yongdao返回', rex)
              if (rex.data.code == 0) {
                // if (this.loginStatus) {
                // 	clearInterval(this.loginStatus)
                // }
                setToken(rex.data.data.token)
				        setLocalUserInfo(rex.data.data.userinfo)
                //uni.setStorageSync('App-Token', );
                if (this.returnUrl) {
                  uni.navigateBack()
                } else {
                  this.userinfo()
                  console.log('跳转');
                }
              }
              if (rex.data.code == 500) {
                uni.clearStorageSync();
                uni.showToast({
                  icon: 'none',
                  title: rex.data.msg
                })
                console.log('走错误请求');
                this.wxlogin()
              }
            },
            fail: (res) => {
              console.log("fail", res);
              uni.showToast({
                icon: "error",
                title: "登录失败，请重新点击并授权！",
                duration: 2000
              })
            }
          })
        },
        fail: () => {
          uni.showToast({
            icon: 'error',
            duration: 2000,
            title: "登录状态过期，重新登录"
          });
        }
      })


    },

    userinfo() {
      console.log('执行了');
      request({
        url: '/app-api/jx/auth/getAppInfo',
        method: 'get',

      }).then((res) => {
        let userJson = {}
        userJson.userId = res.data.user.id
        uni.setStorageSync('role', res.data.role)
        uni.setStorageSync('userinfo', res.data.user)
        uni.reLaunch({
          url: '/newPages/newIndex/index'
        })
      })
    },

    getxz(index) {
      this.activeid = index
    },
    goregister() {
      uni.redirectTo({
        url: '/pages/login/register'
      })
    },
    goforgot() {
      uni.redirectTo({
        url: '/pages/login/forgot'
      })
    },
    goselect() {
      console.log('执行');
      uni.redirectTo({
        url: '/pages/index/index'
      })
    },
    // 验证码方法
    sendVerificationCode() {
      let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
      if (!reg.test(this.tel)) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的11位手机号'
        })
        this.tel = '';
        return false;
      }
      if (this.isButtonDisabled) {
        return; // 如果按钮已禁用，则直接返回
      }
      const data = {
        phone: this.tel,
      }
      request({
        url: '/loginSmsCode',
        method: 'post',
        params: data
      }).then((res) => {
        console.log('验证码', res);
        if (res.code == 200) {
          uni.showToast({
            title: '验证码已发送 请注意查收',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '网络不佳请稍后再试',
            icon: 'none'
          })
        }
      })


      this.disableButton(); // 禁用按钮
      this.startCountdown(); // 启动倒计时

    },
    disableButton() {
      this.isButtonDisabled = true;
    },
    enableButton() {
      this.isButtonDisabled = false;
    },
    startCountdown() {
      let countdown = setInterval(() => {
        this.countdownTime--;
        if (this.countdownTime === 0) {
          clearInterval(countdown);
          this.enableButton(); // 启用按钮
        }
      }, 1000);
    },
  }
}
</script>

<style scoped lang="scss">
.jsq {
  border: none !important;
  font-size: 14px;
  font-weight: 400;
  color: #0078FF;
}

.anniu {
  width: 150px;
  height: 40px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #0D2E8D;
  color: #FFFFFF;
  margin: 0 auto;
}

.cont-popup {
  height: 250px;
  width: 300px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 10px;
}

.popup-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #0D2E8D;
}

.dix {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0px;
  font-size: 18px;
  font-weight: bold;
}

.lqiu {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #0D2E8D;
  background: #0D2E8D;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qiu {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #E8E8E8;
}

button {
  border: none !important;
  background: none !important;
  margin: 0px;
  display: block;
}

button:focus {
  color: #0078FF;
  outline: none;
  box-shadow: none;
}

.content {
  box-sizing: border-box;
  padding-top: 1px;
  // background-image: url('http://www.nuoyunr.com/lananRsc/jdc-bj.png');

  background-size: cover;
  width: 100%;
  height: calc(100vh);
}

.top {
  box-sizing: border-box;
  padding: 0px 27px;
  padding-top: 100px;


  // background-color:lightseagreen;

  background-position: center;
  width: 100%;
  // height: 385px;
}

.touxiang {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: #D7D7D7;
  margin: 0 auto;
  margin-bottom: 40px;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.twotap {
  width: 100%;
  display: flex;
  align-items: center;

  view {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    margin-right: 38.5px;
  }
}

.blck {
  color: #333333 !important;
  font-weight: bold !important;
}

.inputs {
  box-sizing: border-box;
  padding: 16px 0px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #E8E8E8;
  margin-top: 20px;
}

.wjworb {
  margin-top: 5px;
  width: 100%;
  display: flex;
  font-size: 12px;
  color: #0078FF;
  justify-content: flex-end;
  align-items: center;

}

.dl {
  width: 90%;
  height: 44px;
  background-color: #0D2E8D;
  border-radius: 50px;
  margin: 0 auto;
  font-size: 16px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 300px;
}

.xiaoannoi {
  width: 90%;
  height: 40px;
  margin: 0 auto;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 80px;
}

.hging {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #636363;
  margin-top: 20px;
}

.wx {
  width: 38px;
  height: 38px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0px auto;
  margin-top: 20px;

  image {
    width: 100%;
    height: 100%;
  }
}

.hui {
  font-size: 10px;
  width: 100%;
  text-align: center;
  font-weight: 400;
  color: #666666;
}

.dbottom {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #333333;
  margin-top: 40px;
  position: fixed;
  bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lan {
  color: #2c78f5;
}

.land {

  font-size: 25px;
  font-weight: bold;
  color: #2c78f5;
  margin-bottom: 5px;
}

.kuang {
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
}

.axquan {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #AAAAAA;
  margin-right: 5px;
}

.axquanl {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #AAAAAA;
  margin-right: 5px;
  background-color: #2c78f5;
}
</style>