123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700 |
- <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') }} <a class="line" @click.stop="$toUrl('/pages/login/agreement?type=1')">{{ $t('login.lab25') }}</a> {{ $t('login.lab26') }} <a class="line" @click.stop="$toUrl('/pages/login/agreement?type=2')">{{ $t('login.lab27') }}</a> {{ $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>
|