onecric_h5/pages/login/login.vue

<template>
	<view class="login">
		<header-logo></header-logo>
		<view class="login-main" v-if="step == 1">
			<div class="title">
        <!-- LogIn -->
        {{ $t('login.login') }}
      </div>
			<div class="tip">
        <!-- We will send on otp to your Email ID / Mobile number -->
        {{ $t('login.lab') }}
      </div>
			<u--form labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
				<u-form-item prop="mobile" borderBottom ref="item1">
					<u--input placeholderStyle="color: #4E4E4E" color="#4E4E4E" fontSize="16px" v-model="userInfo.mobile" :placeholder="$t('login.lab1')" border="none">
						<template slot="prefix">
							<div class="code-box" @click="regionShow = true">
								<img class="thumbnail" :src="thumbnail" alt="">
								<div>+ {{ code }}</div>
							</div>
						</template>
					</u--input>
				</u-form-item>
				<!-- <u-form-item prop="password" borderBottom ref="item1">
					<u--input placeholderStyle="color: #4E4E4E" color="#4E4E4E" fontSize="16px" :type="!pwshow ? 'password' : 'text'" v-model="userInfo.password" :placeholder="$t('login.lab21')" border="none">
						<img class="pwd" slot="prefix" src="/static/image/login/pwd.svg" alt="">
						<template slot="suffix">
							<div>
								<img v-if="!pwshow" class="show" @click="pwshow = true" src="/static/image/login/show.svg" alt="">
								<img v-if="pwshow" class="show" @click="pwshow = false" src="/static/image/login/hide2.png" alt="">
							</div>
						</template>
					</u--input>
				</u-form-item> -->
			</u--form>
			<!-- <div class="forget">
				<div @click="$toUrl('/pages/forget/index')">{{$t('login.forget')}}?</div>
			</div> -->
			<div class="btn" @click="stepTwo">{{ $t('login.lab29') }}</div>
      <u-divider :text="$t('login.lab46')" textColor="#4E4E4E" lineColor="#dddddd" textSize="16px"></u-divider>
			<div class="btn1">
        <img class="google" src="/static/image/login/google.png" alt="">
        {{ $t('login.lab22') }}
        <div id="google_id1" data-client_id="798741970259-knrm21b19bmeh2miosrs11vkqilo5lo3.apps.googleusercontent.com"
          data-context="signin"
          data-auto_select="true"
          data-itp_support="true"
          data-auto_prompt="false"
          data-login_uri="https://m.onecric.tv">
        </div>
      </div>
      <!-- <div class="btn2" @click="faceLogin">
        <img class="google" src="/static/image/login/face.png" alt="">
        {{ $t('login.lab23') }}
      </div> -->
			<div class="footer-box">
				<div class="checkbox" @click="checked = !checked">
					<div class="no" v-if="!checked"></div>
					<img v-show="checked" class="img" src="/static/image/login/checked.png" alt="">
					{{ $t('login.lab24') }} &nbsp;<a class="line" @click.stop="$toUrl('/pages/login/agreement?type=1')">{{ $t('login.lab25') }}</a>&nbsp; {{ $t('login.lab26') }} &nbsp;<a class="line" @click.stop="$toUrl('/pages/login/agreement?type=2')">{{ $t('login.lab27') }}</a>&nbsp; {{ $t('login.lab28') }}
				</div>
				<div class="create">{{ $t('login.lab30') }} <a class="router" @click.stop="$toUrl('/pages/register/register')">{{ $t('login.lab31') }}</a></div>
			</div>
		</view>
    <div class="top1 flex" v-if="step == 2">
      <div class="flex" @click="stepBack">
        <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
        {{ $t('login.login') }}
      </div>
    </div>
    <view class="login-main" v-if="step == 2">
			<div class="title">
        <!-- Enter the 6 digit OTP -->
        {{ $t('login.lab3') }}
      </div>
			<div class="tip">{{ $t('login.lab4') }} +{{ code }} {{ userInfo.mobile }}</div>
      <div class="lab">
        <!-- In Case You Don't Find It, Check Your Junk Information. -->
        {{ $t('login.lab5') }}
      </div>
			<u--form labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
				<u-form-item prop="code" ref="item1">
          <u-code-input size="84rpx" hairline borderColor="#959595" fontSize="16px" space="37rpx" v-model="userInfo.code" mode="line"></u-code-input>
				</u-form-item>
			</u--form>
      <div class="fixed">
        <div class="box_btn_2">
          <div class="down-box" v-if="!timeFinish">
            <!-- Resend OTP IN  -->
            {{ $t('login.lab6') }}
            <u-count-down @finish="timeFinishFun" :autoStart="autoStart" name="down" :time="2 * 60 * 1000" format="mm:ss"></u-count-down></div>
          <div class="down-box" v-if="timeFinish"><div class="Resend" @click="stepTwo">
            <!-- Resend -->
            {{ $t('login.lab7') }}
          </div></div>
			    <div class="btn" @click="stepThree">
            <!-- verify -->
            {{ $t('login.lab29') }}
          </div>
        </div>
      </div>
		</view>
		<u-overlay :show="regionShow" @close="close" @open="open" :closeable="regionShow">
      <selectRegion :tournamentList="tournamentList" @close="close" @checkboxChange="checkboxChange"></selectRegion>
    </u-overlay>
	</view>
</template>

<script>
import selectRegion from '../components/selectRegion/index.vue'
	export default {
		components: {
      selectRegion
    },
		data() {
			return {
				userInfo: {
					mobile: "",
        	code: "",
					device_type: 'h5'
				},
				pwshow: false,
        step: 1,
				rules: {},
				checked: false,
				tournamentList: [],
        code: '',
        searchname: '',
        thumbnail: "",
        country_code: "",
        regionShow: false,
        autoStart: true,
        timeFinish: true,
			}
		},
		activated() {
			this.userInfo.mobile = ''
			this.userInfo.code = ''
		},
		created() {
      this.get_cricket_tournament("");
		},
		beforeDestroy () {
      window.removeEventListener("load", this.gload);
    },
    mounted() {
      window.addEventListener("load", this.gload);
	this.gload()
    },
		methods: {
      gload() {
        this.googleInit(this.handleCredentialResponse)
      // this.faceInit()
      },
			googleInit(fn) {
        if (window.google && window.google.accounts) {
          window.google.accounts.id.initialize({
            client_id: "798741970259-knrm21b19bmeh2miosrs11vkqilo5lo3.apps.googleusercontent.com",
            callback: fn,
          });
          const dom = document.getElementById("google_id1");
          window.google.accounts.id.renderButton(dom, {
              type: "standard",
              shape: "square",
              theme: "",
              width: dom.offsetWidth + 'px',
              logo_alignment: "center",
              text: "signup_with",
              size: "large"
          });
        } else {

        }
      },
      decodeJwtResponse(token) { //加密
        const strings = token.split(".");
        return JSON.parse(
          decodeURIComponent(
            escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/")))
          )
        );
      },
      handleCredentialResponse(response) {
        if (response) {
          const responsePayload = this.decodeJwtResponse(response.credential);
          uni.showLoading({
            title: this.$t('common.lab'),
          });
          let obj = {
            id: responsePayload.sub,
            name: responsePayload.name,
            photo: responsePayload.picture,
            // mobile: responsePayload.email,
            device_type: 'h5',
			 liveId: localStorage.liveId,
          }
          uni.$u.http
          .get("/api/v1/google_login", {
            params: obj,
          }).then(res => {
            uni.showToast({
              title: this.$t('login.lab35'),
              icon: "success",
            });
            this.$store.state.info = res;
            this.$store.state.isLogin = 1;
            uni.setStorage({
              key: "information",
              data: res,
            });
            this.$store.dispatch("getQiNiu");
						uni.switchTab({
							url: '/pages/Live/Live'
						})
          }).finally(() => {
            uni.hideLoading();
          });
        }
        return true;
      },
      faceInit() {
        if (!window.FB) {
          return
        }
        FB.init({
          appId: '606811134721321',
          status: true,
          oauth: true,
          cookie: true,
          xfbml: true,
          version: 'v16.0'
        });
        FB.getLoginStatus((response) => {
            console.error("status", response);
        }, {scope: 'public_profile,email,user_likes', return_scopes: true, auth_type: 'reauthenticate', auth_nonce: '{random-nonce}'})
      },
      faceLogin() {
        if (!window.FB) {
          return
        }
        FB.login((response) => {
          if (response.status == 'connected') {
            this.$nextTick(() => {
              this.getFaceInfo(response);
            });
          }
          
      }, {scope: 'public_profile,email,user_likes', return_scopes: true, auth_type: 'reauthenticate', auth_nonce: '{random-nonce}'});
      },
      getFaceInfo(callbackRes) {
        console.error('Welcome!  Fetching your information.... ', callbackRes);
        var token = callbackRes&&callbackRes.authResponse&&callbackRes.authResponse.accessToken || null;
        // var uid = callbackRes&&callbackRes.authResponse&&callbackRes.authResponse.userID || null;
        const params = {};
        if(token){
            params.access_token = token;
        }
        FB.api('/me?fields=email', 'get', params, (response) => {
        // console.error('Successful login for: ' + response.name, response);
            if(response.email){
                
            }
        });
        // FB.api('/me/permissions', 'get', params, function(response) {
        //     console.error(response, "uid-permissions");
        // });
      },
      stepTwo() {
				if (!this.checked) {
					uni.$u.toast(
            this.$t('login.lab32')
					);
					return
				}
				if (!this.userInfo.mobile) {
					uni.$u.toast(this.$t('login.lab33'));
					return
				}
				uni.showLoading({
					title: this.$t('common.lab'),
				});
				let mobile = this.code + '-' + this.userInfo.mobile
        uni.$u.http.get('/api/v1/getcode', {
          params: {
            type: 3,
            mobile: mobile
          }
        }).then(res => {
          uni.$u.toast(this.$t('login.lab13'));
          this.step = 2
          this.timeFinish = false
        }).finally(() => {
          uni.hideLoading();
        });
			},
      stepThree() {
        if (!this.userInfo.code || this.userInfo.code.length < 6) {
					uni.$u.toast(this.$t('login.lab14'));
					return
				}
        this.loginClick()
        return
        uni.showLoading({
					title: this.$t('common.lab'),
				});
				let mobile = this.code + '-' + this.userInfo.mobile
        uni.$u.http.get('/api/v1/verify_code', {
          params: {
            code: this.userInfo.code,
            mobile: mobile
          }
        }).then(res => {
          this.loginClick()
        }).catch(() => {
          uni.hideLoading();
        });
      },
			loginClick() {
				// if (!this.checked) {
				// 	uni.$u.toast(
        //     this.$t('login.lab32')
				// 	);
				// 	return
				// }
				// if (!this.userInfo.mobile) {
				// 	uni.$u.toast(this.$t('login.lab33'));
				// 	return
				// }
				// if (!this.userInfo.password) {
				// 	uni.$u.toast(this.$t('login.lab34'));
				// 	return
				// }
				// gtag("event", "login_H5", {
				// 	login_H5: "0",
				// });
        uni.showLoading({
					title: this.$t('common.lab'),
				});
				var obj = JSON.parse(JSON.stringify(this.userInfo));
				var adgroup_id = localStorage.getItem('adgroup_id');
        var agency_id = localStorage.getItem('agency_id');
        var code = localStorage.getItem('agency_code');
        adgroup_id && (obj.adgroup_id = JSON.parse(adgroup_id));
        agency_id && (obj.agency_id = JSON.parse(agency_id));
        // code && (obj.code = JSON.parse(code));
				obj.mobile = this.code + '-' + this.userInfo.mobile;
						obj.liveId = localStorage.liveId;
				uni.$u.http
          .get("/api/v1/login", {
            params: obj,
          })
          .then((res) => {
            uni.showToast({
              title: this.$t('login.lab35'),
              icon: "success",
            });
            this.$store.state.info = res;
            this.$store.state.isLogin = 1;
            uni.setStorage({
              key: "information",
              data: res,
            });
						this.userInfo.mobile = ''
						this.userInfo.code = ''
            this.$store.dispatch("getQiNiu");
						uni.switchTab({
							url: '/pages/Live/Live'
						})
          }).finally(() => {
            uni.hideLoading();
          });
			},
      stepBack() {
        this.step = 1
        this.userInfo.code = ''
      },
			get_cricket_tournament(value) {
        uni.$u.http
          .post(`/api/universal/getHot?code=${value}`, {})
          .then((res) => {
            this.tournamentList = res.CountryCode || [];
            if (this.searchname) {
              return
            }
            this.searchname = res.CountryCode[0].name;
            this.country_code = res.CountryCode[0].country_code;
            this.thumbnail = res.CountryCode[0].thumbnail;
            this.code = res.CountryCode[0].code;
          })
          .catch((res) => {});
      },
			checkboxChange(item) {
        this.searchname = item.name;
        this.country_code = item.country_code;
        this.thumbnail = item.thumbnail;
        this.code = item.code;
        this.regionShow = false;
      },
      close() {
        this.regionShow = false;
      },
      open() {
      },
      timeFinishFun() {
        this.timeFinish = true
      },
		}
	}
</script>

<style lang="scss" scoped>
.login-main {
	padding: 8vh 16px 30rpx;
  .u-form {
    margin-bottom: 31px;
  }
	.title {
		font-weight: 600;
		font-size: 18px;
		color: #242424;
		margin-bottom: 16px;
    line-height: 1;
	}
	.tip {
		font-weight: 400;
		font-size: 14px;
		color: #4E4E4E;
    line-height: 1;
	}
	.u-form {
		padding-top: 5.5vh;
	}
	.pwd {
		height: 16px;
		display: block;
	}
	.show {
		display: block;
		cursor: pointer;
		width: 20px;
	}
	/deep/ .u-input__content__prefix-icon {
		margin-right: 12px;
	}
	/deep/ .u-input__content__subfix-icon {
		padding-right: 5px;
	}
  .checkbox {
		position: relative;
		padding-left: 28px;
		font-weight: 400;
		font-size: 12px;
		color: #4E4E4E;
		margin-bottom: 26px;
    margin-top: 16px;
    .no {
      width: 14px;
      height: 14px;
      border: 1px solid #B1B1B1;
      border-radius: 3px;
      position: absolute;
      left: 0;
      top: 1px;
    }
    .line {
      text-decoration: underline;
      margin: 0 3px;
    }
    .img {
      width: 16px;
      position: absolute;
      left: 0;
      top: 1px;
    }
	}
  .u-divider {
    margin: 40px 0;
  }
  .btn1 {
    background-color: #F1F6F7;
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    font-weight: 500;
    font-size: 16px;
    color: #242424;
    margin-bottom: 26px;
    .google {
      width: 14px;
      margin-right: 6px;
    }
    #google_id {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
  .btn2 {
    background-color: #6563FF;
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    position: relative;
    .google {
      height: 14px;
      margin-right: 6px;
    }
    .fb-login-button {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
  .code-box {
    display: flex;
    align-items: center;
    .thumbnail {
      width: 30px;
      margin-right: 11px;
    }
  }
  .lab {
    font-weight: 400;
    font-size: 12px;
    color: #4E4E4E;
    margin-top: 32px;
    line-height: 1;
  }
  
}
.top1 {
  background-color: #262E4A;
  height: 40px;
  font-weight: 500;
  font-size: 16px;
  padding: 0 16px;
  color: #fff;
  .u-icon {
    margin-right: 10px;
  }
}
.forget {
	font-weight: 400;
	font-size: 12px;
	color: #E02D01;
	text-align: right;
	padding-top: 16px;
	display: flex;
	justify-content: flex-end;
}
.btn {
  cursor: pointer;
  background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
  border-radius: 4px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.u-divider {
	margin: 20px 0;
}
.box_btn_2 {
  .down-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #4E4E4E;
    margin-bottom: 16px;
  }
  .u-count-down {
    margin-left: 3px;
  }
  .Resend {
    font-weight: 900;
    color: #DE2D01;
}
}
.btn1 {
    background-color: #F1F6F7;
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    font-weight: 500;
    font-size: 16px;
    color: #242424;
    margin-bottom: 26px;
    .google {
      width: 14px;
      margin-right: 6px;
    }
    #google_id1 {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
  .btn2 {
    background-color: #6563FF;
    border-radius: 4px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    position: relative;
    .google {
      height: 14px;
      margin-right: 6px;
    }
    .fb-login-button {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
.footer-box {
	.checkbox {
		position: relative;
		padding-left: 28px;
		font-weight: 400;
		font-size: 12px;
		color: #4E4E4E;
		margin-bottom: 26px;
	}
	.no {
		width: 14px;
		height: 14px;
		border: 1px solid #B1B1B1;
		border-radius: 3px;
		position: absolute;
		left: 0;
		top: 1px;
	}
	.line {
		text-decoration: underline;
		margin: 0 3px;
	}
	.img {
		width: 16px;
		position: absolute;
		left: 0;
		top: 1px;
	}
	
	.create {
		font-weight: 400;
		font-size: 14px;
		text-align: center;
		color: #1F1F1F;
		.router {
			color: #FA3301;
			margin-left: 3px;
		}
	}
}
.u-form-item + .u-form-item {
	margin-top: 20px;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 16px;
  bottom: 20px;
  background-color: #fff;
}
</style>