onecric_h5/pages/login/index.vue

<!-- 登录注册 -->
<template>
	<view class="index">
		<view class="index-back" style="position: fixed;top: 0;left: 0;right: 0;">
			<!-- <u-navbar :background="bg" back-icon-color="#fff" :is-fixed="false">
			</u-navbar> -->
			<image src="../../static/image/common/grade-left.png" mode="" @click="back()"></image>
		</view>
		<!-- <downloadHead v-if="show1"></downloadHead> -->
		<!-- <image @click="back()" src="../../static/image/live/grade-left.png" class="back" mode=""></image> -->
		<!-- 手机号登录 -->
		<view style="width:100%;display:flex;justify-content: center;align-items: center;margin-top:160rpx;">
			<image src="../../static/image/login/newlogo.png" style="width:310rpx;height:174rpx"></image>
		</view>
		<view class="" style="width:inherit;margin-top: 0rpx;">
			<view class="login" v-if="type==1&&current==0">
				<view class="">
					<u-tabs :list="tabList" @click="change" :current="current" lineHeight="4" lineWidth="100rpx"
						lineColor="#DC3C23" :activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}"
						:inactiveStyle="{color:'#fff',fontSize:'32rpx'}
					"></u-tabs>
					<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
				</view>
				<!-- 	<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;" @click="toSelcet()">
					<view style="margin-left: 15px;" v-if="searchname!=''">{{searchname}}(+{{searchcode}})</view>
					<view style="margin-left: 15px;" v-if="searchname==''">Select your area code </view>
				</view> -->
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;color: #000000"
					@click="poupuu()">
					<view style="margin-left: 15px;">
						<image :src="thumbnail" style="width: 40px;height: 30px;"></image>
						<view v-if="country_code" style="position: relative;top: -10px;right: -8px;display: inline-block;">
							{{searchname}}({{country_code}})</view>
					</view>

				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<!-- 	<view class="flex-center" @click="region = true">

						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<text style="color:#111111">{{from.code1}}</text>
						<image style="width:22rpx;height: 12rpx;margin-left:16rpx" src="../../static/image/login/nd.png"
							mode=""></image>
					</view> -->
					<view class="flex-center">
						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<u--input border="surround" v-model="from.code1" @change="toSelcetChange"
							style="color:#000000 !important;width:50px;border: 0px;" placeholder-style="color:#A0A4A7"
							customStyle="padding:0px !important;"></u--input>

					</view>
					<input type="text" value="" placeholder-style="color:#A0A4A7" v-model="from.mobile"
						:placeholder="$t('common.inputPhone')" style="color:#000000 !important;" />
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<view class=" flex-center">
						<image style="width:32rpx;height: 36rpx;margin-left:30rpx;"
							src="../../static/image/login/code.png" mode="">
						</image>
						<!-- <div style="width:22rpx;height:36rpx;border-right:1rpx solid #a0a4a7;margin-left:60rpx;"></div> -->
					</view>
					<input type="text" value="" v-model="from.code" placeholder-style="color:#A0A4A7"
						placeholder="Verifcation code" style="color:#000000 !important;" />
					<text @tap="getCode(3)" style="margin-right:20rpx;">{{tips}}</text>

				</view>

				<view class="btn" :class="{'btn-active':from.code != 0 }" @click="submit(1)"
					style="background:#DC3C23 !important;">
					{{$t('login.login')}}
				</view>

			</view>
			<!-- 密码登录 -->
			<view class="passlogin" v-if="type==1&&current==1">
				<view class="">
					<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
					<view class="">
						<u-tabs :list="tabList" @click="change" lineHeight="4" lineWidth="100rpx" :current="current"
							lineColor="#DC3C23" :activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}"
							:inactiveStyle="{color:'#fff',fontSize:'32rpx'}
						"></u-tabs>
						<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
					</view>
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;color: #000000"
					@click="poupuu()">
					<view style="margin-left: 15px;">
						<image :src="thumbnail" style="width: 40px;height: 30px;"></image>
						<view style="position: relative;top: -10px;right: -8px;display: inline-block;">
							{{searchname}}({{country_code}})</view>
					</view>

				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<!-- 	<view class="flex-center" @click="region=!region">
						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image> 
						<text style="color:#111111">{{from.code1}}</text>
						<image style="width:22rpx;height: 12rpx;margin-left:16rpx"
							src="../../static/image/login/nd.png" mode=""></image> 
						<!-- <image style="width:22rpx;height: 12rpx;margin-left:16rpx"
							src="../../static/image/login/login2.png" mode=""></image> -->
					<!-- </view> -->
					<view class="flex-center">
						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<u--input border="surround" v-model="from.code1" @change="toSelcetChange"
							style="color:#000000 !important;width:50px;border: 0px;" placeholder-style="color:#A0A4A7"
							customStyle="padding:0px !important;"></u--input>

					</view>

					<input v-model="from.mobile" type="text" value="" placeholder-style="color:#A0A4A7"
						:placeholder="$t('common.inputPhone')" style="color:#000000 !important;" />
				</view>
				<view class="input flex-start inputCss" style="background:#ffffff;border-radius: 5rpx;">
					<view class="flex-center">
						<image style="width:32rpx;height: 36rpx;margin-left:30rpx;"
							src="../../static/image/login/pwd.png" mode="">
						</image>
					</view>
					<u--input class="inp" border="none" color="#000000" :placeholder="$t('common.inputPw')"
						v-model="from.password" :type="pwshow?'text':'password'" style="padding-left: 20rpx;"
						placeholder-style="color: #A0A4A7">
						<image slot="suffix" @click="pwshow = !pwshow"
							style="width: 36rpx;height: 24rpx;margin-right:20rpx;"
							:src="!pwshow?'/static/image/login/hide.png':'/static/image/login/show.png'"
							mode="aspectFill">
						</image>
					</u--input>
					<!-- <input type="text" value="" v-model="from.password" placeholder-style="color:white" placeholder="请输入密码" /> -->
					<!-- <image style="width: 36rpx;height: 24rpx;" src="../../static/image/login/login3.png" mode=""></image> -->
				</view>

				<view class="btn" :class="{'btn-active':from.password != 0 }" @click="submit(2)"
					style="background:#DC3C23 !important;">
					{{$t('login.login')}}
				</view>
			</view>
			<!-- w忘记密码 -->
			<view class="regit" v-if="type==2">
				<view class="">
					<view class="">
						<u-tabs :list="tabList" @click="change" lineHeight="4" lineWidth="100rpx" lineColor="#DC3C23"
							:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" :inactiveStyle="{color:'#fff',fontSize:'32rpx'}
					"></u-tabs>
						<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
					</view>
					<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;color: #000000"
					@click="poupuu()">
					<view style="margin-left: 15px;">
						<image :src="thumbnail" style="width: 40px;height: 30px;"></image>
						<view style="position: relative;top: -10px;right: -8px;display: inline-block;">
							{{searchname}}({{country_code}})</view>
					</view>

				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<!-- <text style="color:white">{{from.code1}}</text>
						<image style="width:22rpx;height: 12rpx;margin-left:16rpx"
							src="../../static/image/login/login2.png" mode=""></image> -->
					<!-- <image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<text style="color:#111111">{{from.code1}}</text>
						<image style="width:22rpx;height: 12rpx;margin-left:16rpx" src="../../static/image/login/nd.png"
							mode=""></image> -->

					<view class="flex-center">
						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<u--input border="surround" v-model="from.code1" @change="toSelcetChange"
							style="color:#000000 !important;width:50px;border: 0px;" placeholder-style="color:#A0A4A7"
							customStyle="padding:0px !important;"></u--input>

					</view>
					<input type="text" value="" v-model="from.mobile" placeholder-style="color:#A0A4A7"
						:placeholder="$t('common.inputPhone')" style="color:#000000 !important;" />
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<view class="flex-center">
						<!-- <image style="width:32rpx;height: 36rpx;" src="../../static/image/login/login4.png" mode="">
						</image> -->
						<image style="width:32rpx;height: 36rpx;margin-left:30rpx;"
							src="../../static/image/login/code.png" mode="">
						</image>
					</view>
					<input type="text" value="" placeholder-style="color:#A0A4A7" v-model="from.code"
						placeholder="Verifcation code" style="color:#000000 !important;" />
					<text @tap="getCode(2)" style="margin-right:20rpx;">{{tips}}</text>
				</view>
				<view class="input flex-start inputCss" style="background:#ffffff;border-radius: 5rpx;">
					<u--input class="inp" border="none" color="#000000" :placeholder="$t('common.inputPw')"
						v-model="from.password" :type="pwshow?'text':'password'" style="padding-left: 30rpx;"
						placeholder-style="color: #a0a4a7">
						<image slot="suffix" @click="pwshow = !pwshow"
							style="width: 36rpx;height: 24rpx;margin-right:20rpx;"
							:src="!pwshow?'/static/image/login/hide.png':'/static/image/login/show.png'"
							mode="aspectFill">
						</image>
					</u--input>
				</view>
				<view class="input flex-start inputCss" style="background:#ffffff;border-radius: 5rpx;">
					<u--input class="inp" border="none" color="#000000" :placeholder="$t('login.reEnter')"
						v-model="password1" :type="pwshow1?'text':'password'" style="padding-left: 30rpx;"
						placeholder-style="color: #A0A4A7">
						<image slot="suffix" @click="pwshow1 = !pwshow1"
							style="width: 36rpx;height: 24rpx;margin-right:20rpx;"
							:src="!pwshow1?'/static/image/login/hide.png':'/static/image/login/show.png'"
							mode="aspectFill">
						</image>
					</u--input>
				</view>
				<!-- <view class="input flex-start inputCss">
					<u--input class="inp" v-model="from.password"  type="password" style="padding-left: 20rpx;" :password-icon="true" placeholder-style="color: #fff" />
				</view> -->
				<view class="btn" :class="{'btn-active':from.password != 0 }" @click="submit(3)"
					style="background:#DC3C23 !important;">
					{{$t('login.forgetBtn')}}
				</view>
			</view>
			<!-- ''''''''''''''''''''''''注册 -->
			<view class="regit" v-if="type==3">
				<view class="">
					<view class="">
						<u-tabs :list="[{name:$t('login.registertips')}]" @click="change" lineHeight="4"
							lineWidth="100rpx" lineColor="#DC3C23"
							:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" :inactiveStyle="{color:'#fff',fontSize:'32rpx'}
					"></u-tabs>
						<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
					</view>
					<!-- <u-tabs :list="tabList" bg-color="" inactive-color="#B3B4B7" bar-width="120" :is-scroll="false" gutter="400" font-size="32" active-color="#DC3C23" :current="current" @change="change"></u-tabs> -->
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<view class=" flex-center" @click="poupuu">
						<image style="width:25rpx;height: 36rpx;margin-left:30rpx;margin-right:10rpx;"
							src="../../static/image/login/phone.png" mode=""></image>
						<text style="color:#111111">{{from.code1}}</text>
						<image style="width:22rpx;height: 12rpx;margin-left:16rpx" src="../../static/image/login/nd.png"
							mode=""></image>
					</view>
					<input type="text" value="" v-model="from.mobile" placeholder-style="color:#a0a4a7"
						:placeholder="$t('common.inputPhone')" style="color:#000000 !important;" />
				</view>
				<view class="input flex-start" style="background:#ffffff;border-radius: 5rpx;">
					<view class=" flex-center">
						<image style="width:32rpx;height: 36rpx;margin-left:30rpx;"
							src="../../static/image/login/code.png" mode="">
						</image>
					</view>
					<input type="text" value="" v-model="from.code" placeholder-style="color:#a0a4a7"
						placeholder="Verifcation code" style="color:#000000 !important;" />
					<text @tap="getCode(1)" style="margin-right:20rpx;">{{tips}}</text>
				</view>
				<view class="input flex-start inputCss" style="background:#ffffff;border-radius: 5rpx;">
					<u--input class="inp" border="none" color="#000000" :placeholder="$t('common.inputPw')"
						v-model="from.password" :type="pwshow?'text':'password'" style="padding-left: 20rpx;"
						placeholder-style="color: #A0A4A7">
						<image slot="suffix" @click="pwshow = !pwshow"
							style="width: 36rpx;height: 24rpx;margin-right:20rpx;"
							:src="!pwshow?'/static/image/login/hide.png':'/static/image/login/show.png'"
							mode="aspectFill">
						</image>
					</u--input>
				</view>
				<!-- <view class="input flex-start">
					<input type="text" value="" placeholder-style="color:white" placeholder="请重新输入密码" />
				</view> -->
				<view class="btn" :class="{'btn-active':from.password != 0 }" @click="submit(4)"
					style="background:#DC3C23 !important;">
					{{$t('login.register')}}
				</view>
			</view>
			<!-- <view class="btn-tab flex" v-if="type==1">
				<text style="color: #DC3C23;"
					@click="type=3,tabList=[{name:$t('login.register')},{}]">{{$t('login.registertips')}}</text>
				<text @click="type=2,tabList=[{name:$t('login.forget')},{}]">{{$t('login.forget')}}?</text>
			</view> -->
		</view>
		<view v-if="type==1">
			<!-- 		<view class="btn" @click="type=3,tabList=[{name:$t('login.register')},{}]"
				style="margin-top:60rpx;color:#DC3C23 !important;border:1rpx solid #DC3C23;background:transparent !important;">
				{{$t('login.registertips')}}
			</view> -->
			<view style="display: flex;justify-content: center;margin-top:80rpx;">
				<text @click="type=2,tabList=[{name:$t('login.forget')},{}]"
					style="color:#DC3C23;">{{$t('login.forget')}}</text>
			</view>
		</view>
		<view class="flex-center agree">
			<image :src="!isAgree?'/static/image/match/match_notselected.png':'/static/image/login/select.png'" mode=""
				@click="isAgree = !isAgree "></image>
			<view class="flex-start">
				I read and agree <text @click="$toUrl('./agreement?type=1')">UserService Agreement</text> and <text
					@click="$toUrl('./agreement?type=2')">Privacy Pollcy</text>
			</view>
		</view>
		<!-- 倒计时插件 -->
		<u-code :seconds="seconds" :startText="$t('login.getCode')" ref="uCode" @change="codeChange"
			:endText="$t('login.getCode')" changeText="Xs"></u-code>
		<!-- <u-verification-code @change="codeChange" :seconds="seconds" ref="uCode" ></u-verification-code> -->
		<!-- <u-picker v-model="region" mode="time"></u-picker> -->
		<!-- 	<u-picker itemHeight="60" :closeOnClickOverlay="true" :cancelText="$t('news.cancel')"
			:confirmText="$t('news.confirm')" mode="selector" @close="region=false" :columns="countryCode"
			@cancel="region=false" @confirm="regionConfirm" :show="region" keyName="nameCode" :default-selector="[0]">
		</u-picker> -->
		<view>
			<u-overlay :show="region" @close="close" @open="open" :closeable='region'>

				<view class="list"
					style="height: 90vh;background: #fff;width: 90%; margin: 0 auto; margin-top: 50px; border-radius: 20px; overflow-y: auto;">
					<view class="flex header-box">
						<text class="size24 c6"></text>
						<image src="../../static/image/match/close_ico.png" mode="heightFix" class="close-icon"
							@click="close"></image>
					</view>
					<u--input placeholder="Search your area code" prefixIcon="search" @change="searchcodeLogin"
						color="#333" border="none" v-model="searchValue" fontSize="28rpx"
						:customStyle="{borderRadius:'50px',padding:'4px 12px',background:'#F5F5F5',margin:'20px'}"
						prefixIconStyle="font-size: 30px;color:#999"></u--input>
					<view class="li font28 flex" v-for="(item,index) in tournamentList" :key="index"
						@click="checkboxChange(item,index)" style="	padding:20px;">
						<view>
							<image :src="item.thumbnail" style="width: 50px;height: 30px;"></image>
							<text
								style="position: relative;top: -10px;right: -8px;">{{item.name}}({{item.country_code}})</text>
						</view>
						<text>+{{item.code}}</text>
					</view>
				</view>
				<!-- 		<view v-for="(item,index) in countryCode[0]">
					<text>{{item.name}}</text>
				</view> -->
			</u-overlay>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				current: 0,
				searchValue: '',
				seconds: 60,
				isAgree: true,
				pwshow: false,
				pwshow1: false,
				searchcode: '',
				thumbnail: '',
				searchname: '',
				custom: {
					'padding': '20px'
				},
				region: false,
				tabList: [{
						name: this.$t('login.Number')
					},
					{
						name: this.$t('login.Password')
					}
				],
				tips: 'get code', //验证码倒计时
				password1: '',
				country_code: '',
				from: {
					mobile: '',
					password: '',
					code1: '+91',
					code: '',
					device_type: 'H5'
				},
				timer: null,
				tournamentList: [],
				bg: {
					backgroundColor: 'transparent'
				},
				countryCode: [], //区号
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		computed: {
			system() {
				return this.$store.state.system
			},
			show1: {
				get() {
					return this.$store.state.show
				},
				set() {
					// this.$store.state.info.midMask = !this.$store.state.info.midMask
				}
			}
		},
		watch: {
			type(e) {
				if (e == 2 || e == 3) {
					this.current = 0
				}
			},
			// region(e) {
			// 	if (e) {
			// 		this.countryCode = []
			// 	}
			// }
		},

		mounted() {
			this.getCountryCode()
			this.get_cricket_tournament('')
		},
		methods: {
			poupuu() {
				this.region = !this.region
				this.get_cricket_tournament('')
			},
			open() {
				// console.log('open');
			},
			close() {
				console.log('close')
				this.region = false
				// console.log('close');
			},
			back() {
				console.log(3);
			},
			toSelcet() {
				this.$toUrl('./selcetcode')
			},
			toSelcetChange() {
				let value = (this.from.code1).slice(1)
				setTimeout(() => {
					this.get_cricket_tournament(value)
				}, 500)
			},
			searchcodeLogin() {
				this.get_cricket_tournament(this.searchValue)
			},
			checkboxChange(item, index) {
				this.region = false
				this.searchcode = item.code
				this.searchname = item.name
				this.countryCode = item.countryCode
				this.from.code1 = '+' + item.code
			},
			get_cricket_tournament(value) {
				uni.$u.http.post(`/api/universal/getHot?code=${value}`, {}).then(res => {
					console.log(res)

					this.tournamentList = res.CountryCode
					this.searchcode = res.CountryCode[0].code
					this.searchname = res.CountryCode[0].name
					this.country_code = res.CountryCode[0].country_code
					this.thumbnail = res.CountryCode[0].thumbnail
					console.log(this.tournamentList, 1)
				}).catch(res => {})
			},
			// 提交表单
			submit(type) { //1注册 ，2登录 ， 3忘记密码	
				gtag('event', 'login_H5', {
					'login_H5': '0'
				});
				uni.showLoading({
					title: this.$t('common.lab')
				})
				if (!this.isAgree) return uni.$u.toast('Please agree to the User Agreement and Privacy Policy');
				if (!this.from.mobile) return uni.$u.toast('Please enter your phone number');
				if (type == 2 && !this.from.password) return uni.$u.toast('Please enter your password');

				if (type == 1 && !this.from.code) return uni.$u.toast('Please enter the verification code');
				// if(type == 3 || type == 4 && !this.from.code) return uni.$u.toast('Please enter the verification code');
				// if(type == 3 || type == 4 && !this.from.password) return uni.$u.toast('Please enter your password');
				let that = this;
				let obj = JSON.parse(JSON.stringify(this.from))
				obj.mobile = (this.from.code1).slice(1) + '-' + this.from.mobile
				if (type == 1 || type == 2) { //登录
					if (type == 2) {
						obj.code = ''
					}
					uni.$u.http.get('/api/user/login', {
						params: obj
					}).then(res => {

						this.$store.state.info = res;
						this.$store.state.isLogin = 1;
						uni.setStorage({
							key: 'information',
							data: res
						})
						// this.$store.dispatch('logout','')
						uni.hideLoading()
						// setTimeout(res=>{
						this.$store.dispatch('loginTim', res);
						// },200)
						uni.reLaunch({
							url: '/'
						})
						this.$store.dispatch('getQiNiu')
					})
				}
				if (type == 3) { //忘记密码
					if (this.password1 != this.from.password) {
						return this.$toast(this.$t('login.pwErr'))
					}
					uni.$u.http.get('/api/user/forgotPassword', {
						params: this.from
					}).then(res => {
						uni.showToast({
							title: this.$t('login.lab13'),
							icon: "success"
						})
						that.from.code = ''
						that.from.password = ''
						that.back();
						uni.hideLoading();

					})
				}
				if (type == 4) { //注册
					uni.$u.http.get('/api/user/registered', {
						params: that.from
					}).then(res => {
						uni.showToast({
							title: this.$t('login.lab13'),
							icon: "success"
						})
						that.from.code = ''
						that.from.password = ''
						that.back();
						uni.hideLoading()
					})
				}
				this.$refs.uCode.reset();

			},

			// 获取验证码
			getCode(code) {
				let mobile = (this.from.code1).slice(1) + '-' + this.from.mobile
				if (!this.from.mobile) return uni.$u.toast('The cell phone number is empty');
				if (this.$refs.uCode.canGetCode) {
					console.log(11)
					uni.$u.http.get('/api/user/getCode', {
						params: {
							type: code,
							mobile: mobile
						}
					}).then(res => {
						uni.$u.toast(this.$t('login.lab13'));
						this.$refs.uCode.start();

					})
				} else {
					uni.$u.toast(this.$t('common.lab3'));
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			//获取国家区号
			getCountryCode() {
				let arr = {};
				if (JSON.stringify(this.system) == '{}') {
					arr = JSON.parse(localStorage.getItem('system')) || {}
				} else {
					arr = this.system
				}
				if (JSON.stringify(arr) == '{}') {
					this.timer = setInterval(res => {
						this.getCountryCode()
					}, 1000)
					return
				} else {
					clearInterval(this.timer)
				}


				arr.CountryCode.forEach(item => {
					item.nameCode = '+' + item.code + ' ' + item.name
				})
				this.countryCode.push(arr.CountryCode)

				console.log(this.countryCode);
			},

			change(e) {
				this.current = e.index
			},
			// 地区选中回调
			regionConfirm(e) {
				this.region = false;
				this.from.code1 = '+' + e.value[0].code
			},
			back() {
				if (this.type == 1) {
					uni.$u.route({
						type: 'back'
					})
				} else {
					this.type = 1
					this.tabList = [{
							name: this.$t('login.Number')
						},
						{
							name: this.$t('login.Password')
						}
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box {
		padding: 11rpx 33rpx;

		.close-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.index {
		overflow: hidden;
		padding: 0 48rpx;
		min-height: 100vh;
		background: url(../../static/image/login/newbg.jpg)center top / 100% 100% no-repeat;

		.index-back {
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 40rpx;
			}
		}
	}

	.agree {
		color: #fff;
		width: 100vw;
		text-align: center;
		transform: translateX(-6%);
		margin-top: 150rpx;
		font-size: 24rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		text {

			color: rgb(220, 60, 35);
		}
	}

	.back {
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
	}

	.input {
		padding: 28rpx 0;
		margin-top: 52rpx;

		.input-left {
			color: #fff;
			width: 130rpx;
			border-right: 2rpx solid #fff;
		}

		input {
			flex: 1;
			color: #fff;
			font-size: 30rpx;
			margin-left: 32rpx;
		}

		text {
			color: #DC3C23;
			font-size: 28rpx;
		}

		border-bottom: 2rpx solid #FFF;
	}

	.btn {
		color: #fff;
		text-align: center;
		font-size: 36rpx;
		padding: 28rpx 0;
		border-radius: 100rpx;
		// opacity: 0.3;
		margin-top: 96rpx;
		background-color: rgba(255, 255, 255, 0.7);
	}

	.btn-tab {
		color: #fff;
		font-size: 30rpx;
		margin-top: 66rpx;
	}

	.btn-active {
		background: linear-gradient(90deg, #FFDFAB 0%, #DC3C23 100%);
	}

	.inputCss {
		/deep/ .inp {
			.u--input__input {
				color: #fff !important; //颜色在这里
			}

			// .u--input__right-icon__item {
			// 	margin-top: 16rpx;
			// }
		}
	}
</style>