JP-ChargeTeam51/pages/temporary/logo0125.vue

<template>
	<view class="wrap">
		<!--年会注册 -->
		

		<view class="login">
			<view class="login-title-linear-gradient">
				<view class="login-title">
					<img style="height:80rpx;" src="@/assets/logo/logo-nezha.png"></img>
				</view>
				<view class="login-title" style="padding-top: 40rpx;">
					
					<!-- <h3>哪吒车主登录/注册</h3> -->
					<img style="height:80rpx;" src="@/assets/img/nazha0125.png"></img>
					
					<p>欢迎来到{{projectName}}</p>
					<p v-if="activityInfo"><span style="color: red;">*</span>正在参加活动<span style="color: #3fbd70;">
							&lt;邀请有礼>
						</span></p>
				</view>
				<view class="login-form">
					<view class="login-form-item">
						<view class="title">手机号</view>
						<view class="input">
							<u-input :customStyle="customStyle" :placeholderStyle="placeholderStyle"
								v-model="form.telephone" type="number" placeholder="请输入手机号"
								placeholder-style="font-size:16px;color:#ccc;" />
						</view>
						<view class="tips">未注册的手机号验证后将自动注册</view>
					</view>
				</view>
			</view>
			
			<view class="login-form">
			
				<view class="login-form-item">
					<view class="title">验证码</view>
					<view class="input">
						<u-input :customStyle="customStyle" :placeholderStyle="placeholderStyle"
							v-model="form.verifyCode" type="number" placeholder="请输入验证码"
							placeholder-style="font-size:16px;color:#ccc;" />
						<view class="code" :style="isCodeTipsColor ? 'color: #999999;' : ''" @click="getCode">
							{{codeTips}}</view>
					</view>
					<view style="width: 350px;">
						<u-checkbox-group>
							<u-checkbox class="tips" active-color="green" v-model="value" shape="circle"
								@change="checkboxChange()"></u-checkbox>
						</u-checkbox-group>
						<span style="font-size: 24rpx;">我已阅读并同意</span>
						<span @click="gotoUrl('pages/article/details?code=YHXY')" style="color: #3fbd70;font-size: 24rpx;">《会员协议》</span>和
						<span @click="gotoUrl('pages/article/details?code=YSZC')" style="color: #3fbd70;font-size: 24rpx;">《隐私协议》</span>
					</view>
				</view>
			</view>
			<u-button :style="[inputStyle]" class="login-btn" type="success" shape="circle" @click="login">登录</u-button>
			<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start"
				change-text="已发送(Xs)">
			</u-verification-code>
		</view>

		<view class="foot" v-if="!show2">
			<span style="color: red;">*</span>我们将使用您的微信昵称及头像，为您补全本平台帐号相关基础信息，请点击下方“<span
				style="color: #3fbd70;">使用完整服务</span>”。
		</view>
		<u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" :show-cancel-button="false"
			confirm-color="#53b56b" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;">请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，然后进行会员注册</view>
		</u-modal>




	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
	import * as API_weixin from '@/apis/weixin.js'

	import {
		checkPhone
	} from '@/utils'

	export default {
		data() {
			return {
				elderMode: false,
				customStyle: {
					'font-size': '28rpx'
				},
				placeholderStyle: "font-size:28rpx",
				form: {
					telephone: '',
					verifyCode: '',
				},
				activityInfo: null,
				isSendMsgIng: false,
				isCodeTipsColor: false,
				sendMsgSecond: 60,
				codeTips: '',
				value: false,
				code: '',
				codeId: '',
				projectName: '',
				show1: false,
				show2: false,
				show3: false,
				touristBl: false,
				personInfo: null,
				member: false,

			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.form.telephone) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['success'];
				}
				return style;
			}
		},
		onLoad(op) {
			this.projectName = process.car.ProjectName;
			if (op.member) {
				this.member = true;
			}
			if (op.jpcode2) {
				this.code = op.jpcode2;
			}
			if (op.codeId) {
				this.codeId = op.codeId;
			}
			if (op.jpcode) {

				var str1 = op.jpcode.slice(0, 19);
				var str2 = op.jpcode.slice(20, 21);
				var str3 = op.jpcode.slice(22);

				if (str1 == 'jp_team51_charge_id') {
					if (str2 == 'A') {
						this.code = str2;
						this.codeId = str3;
						uni.showToast({
							title: "注册后享受充电服务"
						})
					}
				}

			}
			var obj = this.carhelp.get("friends_invitation")

			if (obj) {
				if (obj.date + 1000 * 60 * 60 * 24 > new Date().getTime()) {
					this.form.inviteId = obj.op.uid
					this.form.code = obj.op.icode
					this.activityInfo = "true";
				}

			}
			
			this.personInfo = this.carhelp.getPersonInfo()
			if (this.personInfo) {
				if (this.personInfo.userType == "1") {

				} else {
					this.loginresponse()
					// uni.redirectTo({
					// 	url: '/pages/index/index'
					// })
				}
			} else {
				
			}


		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
			if (this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		onShow() {
			this.checkSubscribe()
		},
		methods: {
			loginresponse(response, bl) {
			//giveCard(){
				//var NODE_NAME=  process.env['NODE_NAME']
				if(response){
					var token = response ? response.data.token : '';
					
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					
				}
			
				uni.hideLoading();
				loginApi.giveCard().then((response2) => {
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: response2.message,
						success: res => {
							if (res.confirm) {
								//付钱  改为组件
								this.loginresponse2(response,true,true);
					
							} else if (res.cancel) {
								//('用户点击取消');
							}
						}
					});
					
				}).catch(error => {
					uni.showModal({
						title: '提示',
						content: error,
						showCancel:false,
						success: res => {
							if (res.confirm) {
								//付钱  改为组件
								this.loginresponse2(response,true,false);
					
							} else if (res.cancel) {
								//('用户点击取消');
							}
						}
					});
					//this.loginresponse2(response,true,false);
				})
			},
			touristConfirm() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				this.form.nickName = this.carhelp.getUserInfo().nickname;
				this.form.headImg = this.carhelp.getUserInfo().headimgurl;
				this.form.openId = this.carhelp.getOpenId();
				this.form.source = 2 //创建渠道1电单车2电车

				loginApi.registerGuest(this.form).then((response) => {
					this.loginresponse(response,true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			gotoGz() {
				this.carhelp.setGzDate()
			var url = process.car.gzUrl;
				window.location.href = url

			},
			checkSubscribe() {
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId()
				}).then((res) => {

					if (res.data == "0") {
						this.show1 = true
						
					} else {
						//this.init();
						this.show1 = false;
						this.show2 = true;


						//this.carhelp.setGzDate() 

					}

					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})

			},

			theme(type) {
				if (type == 'elder') {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);
					let data = {
						"font-size": '32rpx',
					};
					this.customStyle = data;
					this.placeholderStyle = "font-size:32rpx"; //data;
				} else {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);
					let data = {
						"font-size": '28rpx',
					};
					this.customStyle = data;
					this.placeholderStyle = "font-size:28rpx"; //data;
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			start() {
				if (!this.isSendMsgIng) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					loginApi.getVerifyCode(this.form.telephone).then((response) => {
						uni.hideLoading();
						this.carhelp.set("getvcodetime", new Date().getTime());

						if (!"") {
							//倒计时
							uni.showToast({
								title: "发送成功"
							})
						} else {
							uni.showToast({
								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			},
			//倒计时
			end() {
				this.sendMsgSecond = 60;
				this.isSendMsgIng = false;
				this.isCodeTipsColor = false;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}

				var checkPhoneResult = checkPhone(this.form.telephone);

				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				this.$refs.uCode.start();
				this.isCodeTipsColor = true;
			},
			checkboxChange() {
				this.value = !this.value;
			},
			loginresponse2(response, bl,bl2) {
				uni.hideLoading();
				
				if(!response){
					if(bl2){
						
						uni.redirectTo({
							url: '/pages/cardBag/cardBag?k=1'
						})
						
					}else{
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
					
				}else{
					
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					
					if(bl2){
						
						uni.redirectTo({
							url: '/pages/cardBag/cardBag?k=1'
						})
						
					}else if (!bl && !response.data.regUser.carId) {
						var url = "/pages/login/completeInfo?login=1"

						if (this.code == 'A') {
							url += "&jpcode=jp_team51_charge_id:A_" + this.codeId
						}
						uni.redirectTo({
							url: url
						})

					} else if (this.code == 'A') {

						var k = API.codeOperation("jp_team51_charge_id:A_" + this.codeId);
						if (k) {
							uni.redirectTo({
								url: k
							})
						}

					}else if(this.code == 'card'){
						
						uni.redirectTo({
							url: '/pages/cardBag/cardDetail?id='+ this.codeId
						})
						
					}else if (this.code == 'invoice') {
						uni.redirectTo({
							url: '/pages/MyInvoice/invoiceManagement'
						})
					}else {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				}
			},
			login() {
				// if(!this.show2){
				// 	this.show1=true;
				// 	return
				// }

				var checkPhoneResult = checkPhone(this.form.telephone);

				if (!this.form.telephone || checkPhoneResult != true) {
					uni.showToast({
						title: checkPhoneResult,
						icon: "none"
					})
					return;
				}
				if (!this.form.verifyCode) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				if (!this.value) {
					uni.showToast({
						title: "请勾选协议",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				//this.form.nickName= this.form.telephone;
				this.form.nickName = this.carhelp.getUserInfo().nickname;
				this.form.headImg = this.carhelp.getUserInfo().headimgurl;
				this.form.openId = this.carhelp.getOpenId();
				this.form.source = 2 //创建渠道1电单车2电车


				if (this.personInfo && this.personInfo.userType == "1") {

					loginApi.validateGuestCode(this.form).then((response) => {
						this.loginresponse(response, true)

					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				} else {
					loginApi.validateCode(this.form).then((response) => {
						this.loginresponse(response)

					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}


			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.login-title-span{
		    font-size: 36rpx;
		    float: right;
			color:#00B962
	}
	.classtable{
		margin: 0rpx 40rpx;
		
		.td1{
			width: 50rpx;
			    padding: 12rpx 0;
			text-align: center;
			img{
				width: 48rpx;
				height: 48rpx;
			}
			font-size: 10px;
		}
		.td2{
			padding-left: 16rpx;
			font-size: 12px;
			line-height: 24px;
			.dian{
				padding :0 10rpx
			}
		}
		
	}
	.btnview{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		.btnview1{
			
		}
		.btnview2{
			color:#999999 ;
			padding-bottom:38rpx ;
		}
	}
	.foot {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;


		padding: 0 10px;
	}


	@import "@/_theme.scss";

	.all {
		@include themeify {
			font-size: themed('font-size2');
		}
	}

	::v-deep .placeholderStyle {
		font-size: themed('font-size2');
	}

	.wrap {
		//background: linear-gradient(#D6EEDC, #F3F4F4);
		@include themeify {
			font-size: themed('font-size2');
		}

		/*	font-size: 28rpx;*/
		.login {
			//width: 600rpx;
		
			//
			.login-title-linear-gradient {
				background: linear-gradient(180deg, rgba(160,188,255,1) 0%,rgba(160,188,255,0) 100%);
				
			}
			.login-title {
				padding: 0 56rpx 0 56rpx;
				padding-top: 80rpx;
				
				text-align: left;

				h3 {
					color: rgba(16, 16, 16, 1);

					font-size: 56rpx;
					/*			;*/
					font-weight: bold;
					font-family: AlibabaPuHui-bold;
				}

				p {
					margin-top: 4px;
					color: #777
				}
			}

			.login-form-item {
				margin: 0 56rpx;
				width: 600rpx;
				margin-top: 40px;

				.title {
					margin-bottom: 8px;
					color: rgba(16, 16, 16, 1);
					font-size: 36rpx;
					@include themeify {
					
						font-weight: themed('fontWeight');
						letter-spacing: themed('letterSpacing');
					}
				}

				.input {
					border-bottom: 1px solid #f7f7f7;
					position: relative;
					box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
				}

				.code {
					position: absolute;
					right: 0;
					top: 7px;
					color: rgb(63, 189, 112);
				}

				.tips {
					color: $u-type-info;
					margin-top: 12px;

					@include themeify {
						font-size: themed('font-size1');
					}

					/*				font-size: 12px;*/
					span {
						color: #3fbd70;
					}
				}
			}

			.login-btn {
				width: 600rpx;
				margin: 0 auto;
				margin-top: 40px;
				background-color: #a7dbc2;

				@include themeify {
					font-size: themed('font-size3');
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
	}
	::v-deep .uni-input-placeholder{
		color:#ccc
	}
	.u-checkbox-group{
		width: 40rpx;
	}
</style>