JP-ChargeTeam51/pages/login/login.vue

<template>
	<view class="wrap">
		<ujp-navbar :isBack="false" title="">

			<view slot="right" v-if="!personInfo&&!member" @click="show3=true"
				style=" margin-right: 10px;color:#00B962"> 游客模式</view>
		</ujp-navbar>

		<view class="login">
			<view class="login-title">
				<h3>手机号登录/注册</h3>
				<p>欢迎来到{{projectName}}</p>
				<p v-if="activityInfo"><span style="color: red;">*</span>正在参加活动<span style="color: #3fbd70;">
						<邀请有礼>
					</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 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>我已阅读并同意</span>
						<span @click="gotoUrl('pages/article/details?code=YHXY')" style="color: #3fbd70;">《会员协议》</span>和
						<span @click="gotoUrl('pages/article/details?code=YSZC')" style="color: #3fbd70;">《隐私协议》</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>

		<u-modal v-model="show3" v-show="!show1" class="showOss" confirm-text="注册会员" cancel-text="先不注册"
			:show-title="false" width="650" border-radius="30" title="" :show-cancel-button="false"
			:show-confirm-button="false">
			<view class="slot-content">
				<!-- :show-title="false" -->

				<view>
					<img src="@/assets/img/Nipic_24385267_20191128181916139081.png" style="width: 100%;"></img>
				</view>
				<view>
					<table  class="classtable">
						
						<tr>
							<td class="td1">
								<img src="@/assets/img/Nipic_youke.png" style="width: 24px;"></img>
								<p style="color: rgb(74, 164, 97);line-height: 10px;">游客</p>
							</td>
							<td class="td2">
								
									<p><span class="dian">·</span>无需注册 先付后退</p>
									<p><span class="dian">·</span><span style="color:#F44336">不可使用</span>平台各类代金券</p>
								
							</td>
						</tr>
						<tr>
							<td style="color: #fff;line-height: 3px;" >11</td>
						</tr>
						<tr>
							<td class="td1">
								<img src="@/assets/img/Nipic_vip.png" style="width: 24px;"></img>
								<p style="color: #FF9800;line-height: 10px;">会员</p>
							</td>
							<td class="td2">
								
									<p><span class="dian">·</span>充电最低<span  style="color:#4aa461">0.66元</span>/度（含服务费）</p>
									<p><span class="dian">·</span>账户充值赠送代金券</p>
									<p><span class="dian">·</span>更有服务费包月会员等超多福利</p>
								
							</td>
						</tr>
					</table>

				</view>
				<view style="    margin: auto  60rpx; ">
					<u-button shape="circle" @click="touristConfirm"
						style="    width: 200rpx;    background-color: #fff !important; margin: 20rpx;float: left;margin-bottom: 20px; "
						szie="mini" type="success" plain>游客模式</u-button>
					<u-button shape="circle" style=" float: left;   width: 200rpx; margin: 20rpx;margin-bottom: 20px; "
						szie="mini" type="success" @click="show3=false">会员模式</u-button>
				</view>
			</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.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 {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			} else {
				if (!this.member) {
					this.show3 = true
				}
				

			}


		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
			if (this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		onShow() {
			this.checkSubscribe()
		},
		methods: {
			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);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			gotoGz() {
				this.carhelp.setGzDate()
				var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				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;
			},
			loginresponse(response, bl) {
				uni.hideLoading();

				var token = response ? response.data.token : '';
				this.carhelp.setToken(token);
				this.carhelp.setPersonInfo(response.data.regUser);
				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 == '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>
	.classtable{
		margin: 40rpx 40rpx;
		tr{
			margin-top: 8px;
		}
		.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
			}
		}
	}
	.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');
		}
	}

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

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

		/*	font-size: 28rpx;*/
		.login {
			width: 600rpx;
			padding-top: 80rpx;
			margin: 0 auto;

			.login-title {
				text-align: left;

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

					/*				font-size: 48rpx;*/
					font-weight: normal;
				}

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

			.login-form-item {
				margin-top: 40px;

				.title {
					margin-bottom: 8px;

					@include themeify {
						font-size: themed('font-size2');
						font-weight: themed('fontWeight');
						letter-spacing: themed('letterSpacing');
					}
				}

				.input {
					border-bottom: 1px solid #f7f7f7;
					position: relative;
				}

				.code {
					position: absolute;
					right: 0;
					top: 7px;
					color: #1677FF;
				}

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

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

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

			.login-btn {
				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;
			}
		}
	}
</style>