CommunityApp/comps/dt_login.vue

<template>
  <FootDialog direction="center" :config="config" :isTitle="false" :isRadius="false" :visible.sync="dialogShow" @close="$emit('close')">
	 <!-- #ifdef MP-WEIXIN -->
		<template slot="main">
		  <view class="dt-login-wrap">
		    <view class="title">您还没登录</view>
		    <view class="subtitle">请先登录再进行操作</view>
		    <image class="login-icon" src="/static/common/login.png" ></image>
			
		    <view class="btn-wrap">
		      <button class="btn-base" 
		        hover-class="button-hover"
		        @tap="hide">暂不登录</button>
		      <button class=" btn-base "
			   style="color: #2f7ff5;"
		        hover-class="button-hover"
		        open-type="getPhoneNumber" 
		        @getphonenumber="tapGetPhoneNumber">立即登录</button>
		    </view>
		  </view>
		</template>
	<!-- #endif -->
    <!-- #ifdef APP-PLUS -->
		<template slot="main">
			<view class="dt-login-wrap">
			  <view class="title">登 录</view>
			  <view>
				  <view>
				  	<text>账号：</text>
				  	<input v-model="formData.account" type="number" placeholder="请输入账号"/>
				  </view> 
				  <view class="line"></view>
				  <view>
				  	<text>密码：</text>
				  	<input v-model="formData.passwd"  placeholder="请输入密码" />
				  </view> 
			  </view>
			  <view class="btn-wrap">
			    <button class="btn-base dt-color-primary" 
			      hover-class="button-hover"
			      @tap="touristLogin">登 录</button>
			  </view>
			</view>
		</template>		
    <!-- #endif -->
	
  </FootDialog>
</template>
<script>
import FootDialog from './foot_dialog.vue'
import { setTimeout } from 'timers';

export default {
  components: {
    FootDialog
  },
  data () {
    return {
      config: {
        mainBgColor: 'transparent'
      },
      dialogShow: false,
      respWx:{},
      respWx2:{},
      respLogin:{},
      timer:null,
	  inviteCode:null,
	  formData:{
	  	account:'',
	  	passwd:''
	  },
	  formRules:{
			account:[{
			  required:true,
			  message:'请输入账号'
			},{
			  type:'mobile',
			  message:'手机号码有误！'
			}],
			passwd:[{
			  required:true,
			  message:'请输入密码'
			}]
		}
    }
  },
  methods: {
    show () {
		console.log("show");
		let that=this
		this.inviteCode = this.$auth.getInviteCode() 
		console.log("inviteCode",this.inviteCode);
      this.dialogShow=true;
      this.$mpi.wxLogin().then(res => {
        this.respWx = res
		console.log("res",res);
      })
      this.setTimer()
    },
    hide () {
		console.log("hide");
      if(this.timer){
        clearTimeout(this.timer)
        this.timer = null
        console.log('clearTimeout')
      }
      this.dialogShow=false;
    },

    async setTimer(){
		console.log("setTimer");
      this.respWx = await this.$mpi.wxLogin()
      this.timer = setTimeout(()=>{
        this.setTimer()
      },240000) // 每隔4分钟重新请求 jscode
    },
    
    async login(detail){
	  console.log("2:login",detail);
      try{
        this.$dialog.showLoading()
        if(!this.respLogin.sessionKey){
          this.respLogin = await this.$api.loginByCode({
            _isReject:true,
            code:this.respWx.code
          })
          
        }
		console.log(this.respLogin);
        let resp = await this.$api.loginByWxapp({
          _isReject:true,
          openId: this.respLogin.openId,
          sessionKey: this.respLogin.sessionKey,
          encryptedData: detail.encryptedData,
          iv: detail.iv,
		  inviteCode: this.inviteCode
        })
        console.log(56,resp)
        resp.openId = this.respLogin.openId
        resp.sessionKey = this.respLogin.sessionKey
        let userType = this.$global.userType.member
        this.$auth.login(userType, resp.sessionId, resp.userId, resp)
        this.hide()
		// this.$auth.setInviteCode(null);
		this.$auth.removeInviteCode();
		let a = this.$auth.getInviteCode();
		if(this.inviteCode){
			this.$emit('getDistributorCoupon')
		}else{
			this.$emit('signIn', resp)
		}
		
      }catch(err){
        // console.log(72,err)
        this.$dialog.alert({
          content: err.errmsg || '服务繁忙~'
        })
      }finally{
        this.$dialog.hideLoading()
        if(this.timer){
          clearTimeout(this.timer)
          this.setTimer()
        }
      }
    },
	/**
	 * app 登陆逻辑
	 */
	async touristLogin() {
		console.log("");
		if(!this.validate(this.formRules,this.formData)){
		  return
		}
		try{
			this.$dialog.showLoading()
			if(!this.respLogin.sessionKey){
			  this.respLogin = await this.$api.loginByCode({
			    _isReject:true,
			    code:this.respWx.code
			  })
			}
			let resp = await this.$api.touristLogin({
				account:this.formData.account,
				passwd:this.formData.passwd
			})
			console.log(resp)
			let userType = this.$global.userType.member
			resp.openId = this.respLogin.openId
			resp.sessionKey = this.respLogin.sessionKey
			this.$auth.login(userType, resp.sessionId, resp.userId, resp)
			this.hide()
			this.$auth.removeInviteCode();
			let a = this.$auth.getInviteCode();
			if(this.inviteCode){
				this.$emit('getDistributorCoupon')
			}else{
				this.$emit('signIn', resp)
			}
		  }catch(err){
			// console.log(72,err)
			this.$dialog.alert({
			  content: err.errmsg || '服务繁忙~'
			})
		  }finally{
			this.$dialog.hideLoading()
			if(this.timer){
			  clearTimeout(this.timer)
			  this.setTimer()
			}
		  }

	},
	/**1 ：点击登陆
	 * @param {Object} e
	 */
    async tapGetPhoneNumber (e) {
		console.log(1,"点击登陆")
      // console.log(48,e.detail)

      if(e.detail.errMsg != 'getPhoneNumber:ok') {
        return
      }

      // let authSetting = await this.$mpi.wxGetSetting()
      // if(authSetting['scope.userInfo']) {
      //   let userInfo = await this.$mpi.wxGetUserInfo()
      //   console.log(56,userInfo)
      // }
      // console.log(55,authSetting)
	  this.login(e.detail)
    },

  },
  beforeDestroy() {
    if(this.timer){
      clearTimeout(this.timer)
      this.timer = null
      console.log('clearTimeout')
    }
  }
}
</script>

<style lang="scss">
button{
	font-size: 28rpx;
}

.dt-login-wrap {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 560upx;
  background-color: #fff;
  border-radius: 16upx;

  .title {
    padding-top:60upx;
    padding-bottom:28upx;
    font-size: 32upx;
    font-weight: bold;
  }
  .subtitle {
	color: #7e7e7e;
    font-size: 26upx;
  }
  .login-icon {
    margin: 25upx auto 52upx;
    width: 320upx;
    height: 340upx;
  }
  .btn-wrap {
    display: flex;
    width: 100%;
    line-height: 80upx;
	padding:8rpx 0rpx;
	font-size: 24rpx;
    border-top:1upx solid #f2f2f2;
    .btn-base {
	  padding: 0 60rpx;
      flex: 1;
      text-align: center;
      color:#66656a;
      border-radius:0;
    }
    .btn-base:before {
      position: absolute;
      top: 0;
      right: 1upx;
      width: 100%;
      height: 100%;
      border-right:1upx solid #ebebeb;
      content: "";
    }
    .btn-base:last-child:before {
      display: none;
      content: "";
    }
  }
  
}
</style>