onecric_h5/pages/register/register.vue

<template>
	<view class="login">
		<header-logo></header-logo>
		<view class="login-main" v-if="step == 1">
			<div class="title">
        <!-- Sign Up -->
        {{ $t('login.registertips') }}
      </div>
			<div class="tip">
        <!-- We will send on otp to your Mobile phone -->
        {{ $t('login.lab36') }}
      </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>
      <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="btn" @click="stepTwo">
        <!-- Continue -->
        {{ $t('login.lab37') }}
      </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.lab38') }}
        <div id="google_id" data-client_id="798741970259-knrm21b19bmeh2miosrs11vkqilo5lo3.apps.googleusercontent.com"
          data-context="signin"
          data-auto_select="true"
          data-itp_support="true"
          data-auto_prompt="false"
          allow_parent_origin="https://m.onecric.tv">
        </div>
      </div>
      <!-- <div class="btn2" @click="faceLogin">
        <img class="google" src="/static/image/login/face.png" alt="">
        {{ $t('login.lab39') }}
      </div> -->
		</view>
    <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.lab8') }}
          </div>
        </div>
      </div>
		</view>
    <view class="login-main1" v-if="step == 3">
      <div class="top flex">
        <div class="flex" @click="stepBack">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          <!-- Sign Up -->
          {{ $t('login.registertips') }}
        </div>
      </div>
      <div class="section">
        <div class="tip">+{{ code }} {{ userInfo.mobile }}</div>
        <u--form labelPosition="left" :rules="rules" ref="uForm" :model="userInfo">
          <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.lab40')" border="none">
              <img class="pwd" slot="prefix" src="/static/image/login/pwd.svg" alt="">
            </u--input>
          </u-form-item>
        </u--form>
        <div class="checkbox" @click="pwshow = !pwshow">
          <div class="no" v-if="!pwshow"></div>
          <img v-show="pwshow" class="img" src="/static/image/login/checked.png" alt="">
          <!-- Show Password -->
          {{ $t('login.lab41') }}
        </div>
        <div class="text">
          <!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -->
          {{ $t('login.lab42') }}
        </div>
        <div class="checkbox bold" @click="checked1 = !checked1">
          <div class="no" v-if="!checked1"></div>
          <img v-show="checked1" class="img" src="/static/image/login/checked.png" alt="">
          <!-- I have read and agree to the -->
          {{ $t('login.lab43') }}
          <a class="line" @click.stop="$toUrl('/pages/login/agreement?type=1')">
            <!-- Terms of Use -->
          {{ $t('login.lab44') }}
          </a>
        </div>
      </div>
      <div class="fixed">
			  <div class="btn" @click="registered">
          <!-- Sign Up -->
          {{ $t('login.registertips') }}
        </div>
				<div class="create">
          <!-- Already have an account? -->
          {{ $t('login.lab45') }}
          <a class="router" @click.stop="$toUrl('/pages/login/login')">
            <!-- Log In -->
            {{ $t('login.login') }}
          </a></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: "",
        	password: "",
          code: ''
				},
				pwshow: false,
				rules: {},
				checked: false,
				checked1: false,
        step: 1,
        tournamentList: [],
        code: '',
        searchname: '',
        thumbnail: "",
        country_code: "",
        regionShow: false,
        autoStart: true,
        timeFinish: true,
			}
		},
    created() {
      this.get_cricket_tournament("");
    },
    beforeDestroy () {
      window.removeEventListener("load", this.gload);
    },
    mounted() {
      window.addEventListener("load", 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_id");
          window.google.accounts.id.renderButton(dom, {
              type: "standard",
              shape: "square",
              theme: "",
              width: dom.offsetWidth + 'px',
              logo_alignment: "center",
              text: "signin_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,
            device_type: 'h5',
          }
          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: 1,
            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
				}
        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.step = 3
          this.timeFinish = true
        }).finally(() => {
          uni.hideLoading();
        });
      },
      registered() {
        if (!this.checked1) {
					uni.$u.toast(
						"Please agree to the User Agreement"
					);
					return
				}
        if (!this.userInfo.password) {
					uni.$u.toast("Please enter your password");
					return
				}
        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));
        uni.$u.http.get('/api/v1/registered', {
          params: {
            ...obj,
            mobile: this.code + '-' + this.userInfo.mobile,
          }
        }).then(res => {
          uni.showToast({
            title: this.$t('login.lab13'),
            icon: "success"
          })
          this.step = 1
          this.userInfo.code = ''
          this.userInfo.password = ''
          this.userInfo.mobile = ''
          this.$toUrl('/pages/login/login')
        }).finally(() => {
          uni.hideLoading();
        });
      },
      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
      },
      stepBack() {
        this.step = 2
        this.userInfo.code = ''
        this.userInfo.password = ''
      }
		}
	}
</script>

<style lang="scss" scoped>
.login-main {
	padding: 8vh 16px 30rpx;
	.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;
  }
}
.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;
}
}
.login-main1 {
  .top {
    background-color: #262E4A;
    height: 40px;
    font-weight: 500;
    font-size: 16px;
    padding: 0 16px;
    color: #fff;
    .u-icon {
      margin-right: 10px;
    }
  }
  .section {
    padding: 32px 16px 0;
    .tip {
      font-weight: 400;
      font-size: 14px;
      line-height: 1;
      color: #4E4E4E;
    }
  }
  .u-form {
		padding-top: 9vh;
	}
	.pwd {
		height: 16px;
		display: block;
	}
  .checkbox {
		position: relative;
		padding-left: 28px;
		font-weight: 400;
		font-size: 12px;
		color: #4E4E4E;
		margin-bottom: 16px;
    margin-top: 16px;
    .no {
      width: 14px;
      height: 14px;
      border: 1px solid #B1B1B1;
      border-radius: 3px;
      position: absolute;
      left: 0;
      top: 1px;
    }
    .img {
      width: 16px;
      position: absolute;
      left: 0;
      top: 1px;
    }
    .line {
      color: #FA3301;
      margin-left: 3px;
    }
	}
  .bold {
    font-weight: 600;
  }
  /deep/ .u-input__content__prefix-icon {
		margin-right: 12px;
	}
  .text {
    font-weight: 400;
    font-size: 12px;
    color: #4E4E4E;
    line-height: 16px;
  }
  .create {
		font-weight: 400;
		font-size: 14px;
		text-align: center;
		color: #1F1F1F;
    margin-top: 26px;
		.router {
			color: #FA3301;
			margin-left: 3px;
		}
	}
}
.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;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  padding: 16px;
  bottom: 20px;
  background-color: #fff;
}
</style>