hitap-chat/pages/logIn/logIn.vue

<template>
  <view id="page">
    <view class="Width100 Box" :style="bgUrl1">
      <view class="Content MarginAuto">
        <image :src="$.imgSrc + '/scimg/logo1.png'" mode="aspectFit" class="Block Logo"></image>
        <view class="NavBox Width100 MarginT_60rpx">
          <view class="Unit FloatL PositionR" v-for="(item,index) in navList" @click="chooseNav(item.type)">
            <text class="Block" :class="currNav == item.type ? 'FontS_46rpx Color_1A1F39 FontBold':'FontS_42rpx Color_B4BAC9'">
              {{ item.label }}</text>
            <view class="Line BG_0064FF PositionA" v-show="currNav == item.type"></view>
          </view>
          <view class="ClearB"></view>
        </view>
        <!-- <view class="TypeBox MarginT_60rpx" v-if="currNav == 1">
          <view class="Unit FloatL" v-for="(item,index) in typeList" @click="chooseType(item.type)">
            <view class="Point FloatL" v-show="currType == item.type">
              <image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image>
            </view>
            <view class="Point Border FloatL BorderR_50 InsideB" v-show="currType != item.type"></view>
            <text class="Block MarginL_20rpx FontS_32rpx FloatL">{{item.label}}</text>
            <view class="ClearB"></view>
          </view>
          <view class="ClearB"></view>
        </view> -->
        <view class="InputBox" :class="currNav == 1 ? 'MarginT_40rpx' : 'MarginT_80rpx'">
          <view class="Input MarginT_40rpx BG_F6F7FB">
<!--            <view class="Num FloatL TextLeft MarginL_60rpx">-->
<!--              <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>-->
<!--            </view>-->
            <input type="text" placeholder="请输入用户名" v-model="logInData.phone" class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx">
            <view class="ClearB"></view>
          </view>
          <view class="Input MarginT_40rpx BG_F6F7FB" v-if="currNav == 1">
            <input type="text" v-model="logInData.validateCode" placeholder="请输入验证码" class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx">
            <view class="CodeBox FloatR MarginR_60rpx" @click="getCode">
              <text class="Block FontS_28rpx" :class="isCodeDisabled ? 'Color_B4BAC9':'Color_0064FF'">{{ btnText }}</text>
            </view>
            <view class="ClearB"></view>
          </view>
          <view class="Input MarginT_40rpx BG_F6F7FB">
            <input type="password" v-model="logInData.password" placeholder="请输入您的密码" class="Height100 Input2 FloatL MarginL_60rpx FontS_32rpx">
            <view class="ClearB"></view>
          </view>
        </view>
       <!-- <view class="Agree Width100 MarginT_60rpx" @click="chooseAgree">
          <view class="Point FloatL" v-if="isAgree">
            <image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image>
          </view>
          <view class="Point Border FloatL BorderR_50 InsideB" v-else></view>
          <text class="Block FloatL MarginL_20rpx Color_605F72 FontS_26rpx">本人已同意</text>
          <text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(2)">《用户协议》</text>
          <text class="Block FloatL Color_605F72 FontS_26rpx">与</text>
          <text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(3)">《隐私协议》</text>
          <view class="ClearB"></view>
        </view> -->
        <button type="button" :disabled="isDisabled" class="Btn Block Width100 Color_FFFFFF FontS_36rpx FontBold" @click="confirmSub">{{ currNav == 1 ? '注册':'登录' }}</button>
        <text @click="findPsw" class="Block MarginT_40rpx TextCenter FontS_26rpx Color_0064FF" v-if="currNav == 2">找回密码？</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // 组件
  components: {},
  data() {
    return {
      // 公用的js
      $: this.$,
      bgUrl1:'', // 登录信息背景图
      isAgree:false,
      navList:[
        // {type:1,label:'注册'},
        {type:2,label:'登录'},
      ],
      currNav:2,
      currType:1,
      isDisabled:false,
      logInData:{
        phone:'', //
        validateCode:'', //
        password:'', //
      }, //
      btnText:'获取验证码',
      times:null,
      seconds:60,
      isCodeDisabled:false,
    }
  },
  // 页面加载
  onLoad(e) {
    if(typeof(e.type) != 'undefined'){
      this.currNav = e.type
    }
  },
  // 页面显示
  onShow() {
    // 顶部背景图
    this.bgUrl1 = "background-image:url('" + this.$.imgSrc + "/scimg/bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 472rpx;"
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {
    checkAgree(type){
      let urlKey = 'portalTextType'
      this.$.open('/pages/logIn/agree?type=' + type)
    },
    getCode(){
      if(!this.$.isEmpty(this.logInData.phone)){
        this.$.toast('请输入手机号')
        return
      }
      let datas = {
        phone:this.logInData.phone,
        type:2
      }
      this.isCodeDisabled = true
      this.$request.globalRequest('/hyjg-admin/mapi/account/sendSmsCode', datas, 'POST').then(res => {
        if(res.code == 0){
          this.timeDown()
        }else{
          this.$.toast(res.msg)
          this.isCodeDisabled = false
        }
      })
    },
    timeDown(){
      this.times = setInterval(() => {
        if(this.seconds > 0){
          this.seconds --
          this.btnText = this.seconds + 'S'
        }else {
          this.seconds = 60
          this.isCodeDisabled = false
          this.btnText = '获取验证码'
          clearInterval(this.times)
        }
      },1000)
    },
    // 提交
    confirmSub(){
      // this.$.setData('token','1')
      // this.$.openTab('/pages/index/index')
      // return
      // this.$.open('/pages/logIn/userInfo')
      let url = '/hyjg-admin/mapi/account/register'
      if(!this.$.isEmpty(this.logInData.phone)){
        this.$.toast('请填写用户名')
        return
      }
      if(!this.$.isEmpty(this.logInData.password)){
        this.$.toast('请填写密码')
        return
      }
      // if(!this.isAgree){
      //   this.$.toast('请勾选用户协议和隐私协议')
      //   return
      // }
      let datas = {
        nuserid: this.logInData.phone,
        cuserpwd: this.logInData.password,
      }
      url = '/hiddenDanger/auth/login'
      this.$.showLoading('登录中...')
      this.isDisabled = true
      this.$request.globalRequest(url, datas, 'POST').then(res => {
        if(res.code === 200){
          this.$.toast('登录成功')
          this.$.setData('token',res.result.nuserid)
          this.$.setData('userInfo', { username: res.result.nuserid,role:res.result.role })
          setTimeout(() => {
            this.$.hideLoading('登录中...')
            this.isDisabled = false
            this.$.openTab('/pages/index/index')
          },1500)
        }else{
          this.$.toast(res.message)
          this.isDisabled = false
        }
      })
    },
    // 找回密码
    findPsw(){
      this.$.open('/pages/logIn/findPsw')
    },
    chooseAgree(){
      this.isAgree = !this.isAgree
    },
    chooseNav(type){
      this.currNav = type
    },
    chooseType(type){
      this.currType = type
    },
    // 跳转页面
    skipPage(even){
      this.$.open(even)
    },
  },
  onReady() {
  },
  // 页面卸载
  onUnload() {

  },
  // 触发下拉刷新
  onPullDownRefresh() {
    // 延迟关闭刷新动画
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
  },
}
</script>

<style>
	page {
	  background:#FFFFFF;
	}
</style>
<style lang="scss" scoped>

.Box{
  padding-top:var(--status-bar-height);
  .Content{
    width: calc(100% - 176rpx);
    padding: 132rpx 0rpx 180rpx 0rpx;
    .Logo{
      width: 150rpx;
      height: 150rpx;
    }
    .NavBox{
      .Unit{
        margin-right: 110rpx;
        .Line{
          left: 50%;
          transform: translateX(-50%);
          bottom: -26rpx;
          width: 74rpx;
          height: 10rpx;
          border-radius: 6rpx;
        }
      }
    }
    .TypeBox{
      .Unit{
        margin-right: 108rpx;
        .Point{
          width: 46rpx;
          height: 46rpx;
        }
        .Border{
          width: 46rpx;
          height: 46rpx;
          border: 4rpx solid #B3BACB;
        }
      }
    }
    .InputBox{
      .Input{
        height: 110rpx;
        border-radius: 56rpx;
        .CodeBox{
          text{
            line-height: 110rpx;
          }
        }
        .Num{
          width: 110rpx;
          border-right: 4rpx solid #DADADA;
          margin-top: 34rpx;
        }
        .Input1{
          width: calc(100% - 260rpx);
        }
        .Input2{
          width: calc(100% - 120rpx);
        }
      }
    }
    .Agree{
      .Point{
        width: 34rpx;
        height: 34rpx;
      }
      .Border{
        width: 34rpx;
        height: 34rpx;
        border: 2rpx solid #B3BACB;
      }
    }
    .Btn{
      margin-top: 196rpx;
      height: 108rpx;
      background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%);
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(194,218,255,1);
      border-radius: 54rpx;
      line-height: 108rpx;
    }
  }
}
</style>