MoeNovaClient/pages/login/login.vue

<template>
	<view class="page">
		<view class="header">
			<!-- <view class="left"> -->
			<!-- <image class="img" mode="widthFix" src="../../static/login/close.png"></image> -->
			<!-- </view> -->
			<view class="title">登录/注册</view>
			<view class="subtitle">手机号登录/注册</view>
		</view>

		<view class="tbody">
			<!-- <view class="tbody" style="position: fixed;top: 70%;left: 50%;transform: translate(-50%,-50%);"> -->
			<block v-if="type == 'onelogin'">
				<image class="icon" mode="widthFix" src="../../static/me/avator.png"></image>
				<text class="mobile">+ 86 1**********</text>
				<text class="tips">首次验证通过即注册萌创星球账号</text>
				<text class="btn_submit blick-btn-animation">本机号码一键登录</text>
				<view class="other">
					<view class="pass" @click="type = 'pass'">密码登录</view>
					<view class="line"></view>
					<view class="mob" @click="type = 'mobile'">手机号登录</view>
				</view>
			</block>
			<block v-if="type == 'pass' || type == 'mobile'">
				<template v-if="isSmsLogin">
					<view class="name">手机号码：</view>
					<view class="item">
						<input type="number" class="input" v-model="mobile" placeholder="请输入手机号码" maxlength="11" />
					</view>
					<block v-if="type == 'pass'">
						<view class="name">登录密码：</view>
						<view class="item">
							<input type="password" class="input" v-model="password" placeholder="请输入登录密码"
								maxlength="32" />
						</view>
						<view class="other_list">
							<text class="left" v-if="true" @click="type = 'mobile'">验证码登录</text>
							<text class="left" v-else></text>
							<text class="right" @click="type = 'mobile'" v-if="false">验证码登录</text>
							<text class="right" @click="toRegist">还没有账号？开始注册</text>
						</view>
					</block>

					<block v-if="type == 'mobile'">
						<view class="name">验证码：</view>
						<view class="item">
							<input type="number" class="input" v-model="code" placeholder="请输入验证码" maxlength="6" />
							<view class="btn blick-btn-animation" v-if="captchaTime === 0" @click="getCode">获取验证码</view>
							<!-- 使用云函数发送验证码 -->
							<!-- <view class="btn blick-btn-animation" v-if="captchaTime === 0" @click="sendSms()">获取验证码</view> -->
							<view class="btn" v-if="captchaTime > 0">{{ captchaTime }}秒后重试</view>
						</view>
						<view class="other_list" v-if="false">
							<text class="left"></text>
							<text class="right" @click="type = 'pass'" style="color: blue;">密码登录</text>
						</view>
					</block>
					<text class="btn_submit  white" @click="toLogin">登录/注册</text>
					<text class="btn_submit blick-btn-animation" @click="oneClickLoginFun">一键登录</text>
				</template>
				<template v-else>
					<view
						style="width: 100%;height: 500rpx;display: flex;justify-content: center;align-items: flex-end;">
						<text class="btn_submit blick-btn-animation" @click="oneClickLoginFun">一键登录</text>
					</view>
				</template>
			</block>

			<view class="wechat" v-if="false">
				<image class="img" mode="widthFix" src="../../static/login/wechat.png"></image>
			</view>
			<view class="agree">
				<view class="agree2" @click="agreeChk()">
					<image mode="widthFix" src="../../static/icon/wd_icon_gouxuan04.png" v-if="is_agree == 0"></image>
					<image mode="widthFix" src="../../static/icon/wd_icon_gouxuan05.png" v-if="is_agree == 1"></image>
					<text>我已阅读并同意</text>
				</view>
				《
				<text class="xy" @click="goWeb('https://e.zhichao.art/web/yszc.php', '隐私协议')">
					隐私协议
				</text>
				》和《
				<text class="xy" @click="goWeb('https://e.zhichao.art/web/yhxy.php', '用户使用协议')">
					用户使用协议
				</text>
				》
			</view>
			<view class="agree" v-if="false"><text class="agree2">{{ push_token }}</text></view>
		</view>
		<view class="blankHeight"></view>

		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	import pubc from '@/common/public.js'
	import {
		mapState
	} from 'vuex'
	import channel from "@/common/channel.js";
	import verificationCode from '@/common/verificationCode';

	export default {
		components: {},
		computed: {
			...mapState('hideModule', ['isSmsLogin'])
		},
		data() {
			return {
				skey: '',
				sel: 1,
				is_agree: 0,
				type: 'mobile',
				myinfo: {
					nickname: '',
					join_name: '',
					num_1: 0,
					num_2: 0,
					num_3: 0,
					num_4: 0,
					is_login: 'no',
					num_history: 0,
					num_collection: 0
				},
				mobile: '',
				password: '',
				code: '',
				captchaTime: 0,
				push_token: '',
				lat: '',
				lng: '',
				univerifyStyle: {
					"fullScreen": false, // 是否全屏显示，默认值： false
					"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
					"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）
					"icon": {
						"path": "/static/logo.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
						"width": "60px", //图标宽度 默认值：60px
						"height": "60px" //图标高度 默认值：60px
					},
					"closeIcon": {
						// "path": "/static/icon/whiteBackground.png", // 自定义显示在授权框中的取消图片，仅支持本地图片
						"width": "60px", //图标宽度 默认值：60px (HBuilderX 4.0+ 仅iOS支持)
						"height": "60px" //图标高度 默认值：60px (HBuilderX 4.0+ 仅iOS支持)
					},
					"phoneNum": {
						"color": "#202020" // 手机号文字颜色 默认值：#202020
					},
					"slogan": {
						"color": "#BBBBBB" //  slogan 字体颜色 默认值：#BBBBBB
					},
					"authButton": {
						"normalColor": "#131313", // 授权按钮正常状态背景颜色 默认值：#3479f5
						"highlightColor": "#131313", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
						"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
						"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
						"title": "本机号码一键登录", // 授权按钮文案 默认值："本机号码一键登录"
						"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
					},
					"otherLoginButton": {
						"visible": false, // 是否显示其他登录按钮，默认值：true
						"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
						"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
						"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565
						"title": "其他登录方式", // 其他登录方式按钮文字 默认值："其他登录方式"
						"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）
						"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
					},
					"privacyTerms": {
						"defaultCheckBoxState": false, // 条款勾选框初始状态 默认值： true
						"isCenterHint": true, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
						"uncheckedImage": "/static/icon/wd_icon_gouxuan04.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
						"checkedImage": "/static/icon/wd_icon_gouxuan05.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
						"checkBoxSize": 20, // 可选 条款勾选框大小
						"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
						"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3
						"prefix": "我已阅读并同意", // 条款前的文案 默认值："我已阅读并同意"
						"suffix": "并使用本机号码登录", // 条款后的文案 默认值："并使用本机号码登录"
						"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
							{
								"url": "https://e.zhichao.art/web/yszc.php", // 点击跳转的协议详情页面
								"title": "隐私协议" // 协议名称
							},
							{
								"url": "https://e.zhichao.art/web/yhxy.php", // 点击跳转的协议详情页面
								"title": "用户使用协议" // 协议名称
							}
						]
					},
					"buttons": { // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
						"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
						"list": [{
								"provider": "apple",
								// "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
							},
							{
								"provider": "weixin",
								// "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
							}
						]
					}
				},
				templateId: 36155, //短信模板ID 
				expMinute: '15', //短信有效时间
				randomVerificationCode: '',
			}
		},
		onLoad() {
			setTimeout(function() {
				console.log(this.isSmsLogin, 'isSmsLogin');
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#00000000',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			}, 200);
			let that = this;
			// uni.getPushClientId({
			// 	success: (res) => {
			// 		console.log("su:", res.cid);
			// 		that.push_token = res.cid;
			// 	},
			// 	fail(err) {
			// 		that.push_token = '';
			// 		console.log(err)
			// 	}
			// });
			let channelStr = channel && channel.getCurrentStore() && channel.getCurrentStore().channel;
			if (channelStr && channelStr == 'huawei') {
				this.univerifyStyle.privacyTerms.defaultCheckBoxState = false;
			} else {
				this.univerifyStyle.privacyTerms.defaultCheckBoxState = true;

			}
			this.oneClickLoginFun(channel);
		},
		onShow() {
			// let hsign = pubc.Encrypt("aboa-wifl-kwfl-zjfk-wlaa_FA0412932BAE9D98506580ADB348BEF9");
			// console.log("hsign", hsign)


			// let skey = uni.getStorageSync("wapptoken");
			// if (skey != null && skey != "" && skey != undefined) {
			// 	uni.switchTab({
			// 		url: "/pages/index/index"
			// 	});
			// 	return;
			// }
			// let that = this;
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		that.lat = res.latitude;
			// 		that.lng = res.longitude;
			// 	},
			// 	fail: function(error) {
			// 		console.error('获取位置失败：', error);
			// 	}
			// });


		},
		methods: {
			goWeb(url, title) {
				uni.navigateTo({
					url: `/pages/webview/index?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
				})
			},
			onBack() {},
			agreeChk() {
				if (this.is_agree == 0) {
					this.is_agree = 1;
				} else {
					this.is_agree = 0;
				}
			},
			goPage(page) {
				if (page == 'yhxy') {
					uni.navigateTo({
						url: '/pages/AboutUs/yhxy'
					})
				} else if (page == 'yszc') {
					// #ifdef APP-PLUS
					plus.runtime.openWeb('https://e.zhichao.art/web/yszc.php') // plus.runtime.openWeb(href);
					// #endif

					// #ifdef H5
					window.open('https://e.zhichao.art/web/yszc.php')
					// #endif

					// uni.navigateTo({
					// 	url: '/pages/AboutUs/yszc'
					// })
				} else {
					uni.navigateTo({
						url: page,
					});
				}
			},
			toRegist() {
				uni.navigateTo({
					url: "/pages/login/reg",
				});
			},
			toLogin() {
				let that = this;
				if (this.mobile.length != 11) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				if (this.type == 'pass') {
					if (this.password.length < 6) {
						uni.showToast({
							title: "请输入不小于6位的密码",
							icon: "none",
						});
						return;
					}
				} else {
					if (this.code.length < 4) {
						uni.showToast({
							title: "请输入手机验证码",
							icon: "none",
						});
						return;
					}
				}
				if (this.is_agree == 0) {
					uni.showToast({
						title: "请确认并选择协议",
						icon: "none",
					});
					return;
				}
				let method = '/Member/gamelogin';
				if (this.btn_type == 'reg') {
					method = '/Member/register';
					if (this.code.length < 4) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
				} else if (this.btn_type == 'reset') {
					method = '/Member/resetPass';
					if (this.code.length < 4) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
				}
				this.loginInterface({
					isOneClickLogin: false,
					phone: ''
				}, )

			},
			loginInterface({
				isOneClickLogin,
				phone
			}) {
				let that = this;
				let channel = "";
				// #ifdef APP-PLUS
				channel = plus.runtime.channel;
				// #endif

				uni.showLoading({
					mask: true,
				});
				console.log("host", this.$apiHost + method);
				let mobile = this.mobile;
				let code = this.code;
				let type = this.type;
				console.log(type, 89);
				let method = '/Member/gamelogin';
				if (isOneClickLogin) {
					mobile = phone;
					code = '123601';
					type = 'mobile';
				}
				uni.request({
					url: this.$apiHost + method,
					data: {
						uuid: getApp().globalData.uuid,
						channel: channel,
						loginType: type,
						mobile,
						password: this.password,
						code,
						push_token: this.push_token,
						lat: this.lat,
						lng: this.lng,
					},
					header: {
						"content-type": "application/json",
					},
					success: (res) => {
						console.log("----", res.data);
						if (res.data.success == "yes") {
							uni.showToast({
								title: "登录成功",
								icon: "none",
							});
							console.log("res.data", res.data);
							if (res.data.uuid.length > 5) {
								uni.setStorageSync("app_uuid", res.data.uuid);
								getApp().globalData.uuid = res.data.uuid;
							}
							uni.setStorageSync("is_login", "yes");
							uni.setStorageSync("wapptoken", res.data.skey);
							getApp().globalData.skey = res.data.skey;
							if (res.data.header_c != "") {
								getApp().globalData.headerSign = pubc.Encrypt(res.data.header_c + "_" +
									getApp().globalData.uuid);
								uni.setStorageSync("headerSign", getApp().globalData.headerSign);
							}
							getApp().globalData.headerC = res.data.header_c;
							if (res.data.nickname == '') {
								uni.redirectTo({
									url: '/pages/my/step'
								});
								return;
							}
							// 获取用户信息储存全局
							uni.request({
								url: this.$apiHost + '/User/getinfo',
								data: {
									uuid: getApp().globalData.uuid,
									skey: getApp().globalData.skey
								},
								header: {
									"content-type": "application/json",
									'sign': getApp().globalData.headerSign
								},
								success: (res) => {
									console.log("--获取用户信息--:", res.data);

									if (res.data.need_login == "yes") {

									}
									if (res.data.aihao) {
										this.aihao_tags = res.data.aihao.split(",");
									}
									if (res.data.nickname) {
										getApp().globalData.nickname = res.data.nickname
										uni.removeStorageSync("nickname");
										uni.setStorageSync("nickname", res.data.nickname);
									}
									if (res.data.mobile) {
										getApp().globalData.mobile = res.data.mobile
										uni.removeStorageSync("mobile", res.data.mobile);
										uni.setStorageSync("mobile", res.data.mobile);
									}
									if (res.data.user_id) {
										getApp().globalData.user_id = res.data.user_id
										uni.removeStorageSync("user_id");
										uni.setStorageSync("user_id", res.data.user_id);
									}
									if (res.data.avator) {
										getApp().globalData.avator = res.data.avator
										uni.removeStorageSync("avator");
										uni.setStorageSync("avator", res.data.avator);
									}

								},
								complete: (com) => {
									// uni.hideLoading();
								},
								fail: (e) => {
									console.log("----e:", e);
								}
							});
							uni.switchTab({
								url: "/pages/index/index",
							});
						} else if (res.data.success == "no") {
							uni.showToast({
								title: res.data.str,
								icon: "none",
							});
						} else {
							uni.showToast({
								title: "操作失败，请联系客服",
								icon: "none",
							});
						}
					},
					complete: (com) => {
						uni.hideLoading();
					},
				});
			},
			getCode() {
				if (this.mobile.length != 11) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					});
					return;
				}
				this.captchaTime = 60;

				uni.request({
					url: this.$apiHost + '/Web/getcode', //仅为示例，并非真实接口地址。
					data: {
						skey: this.skey,
						mobile: this.mobile,
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("----", res.data)
						uni.showToast({
							title: res.data.str,
							icon: 'none'
						})
						if (res.data.success == 'yes') {
							this.getCodeTime();
						} else {
							this.captchaTime = 0;
						}
					}
				});
			},
			getCodeTime() {
				if (this.captchaTime > 0) {
					setTimeout(() => {
						this.captchaTime--;
						this.getCodeTime();
					}, 1000);
				}
			},

			oneClickLoginFun() {
				let _this = this;
				//预登陆
				uni.preLogin({
					provider: 'univerify',
					success() { //预登录成功
						// 显示一键登录选项
						uni.login({
							provider: 'univerify',
							univerifyStyle: _this.univerifyStyle,
							success(res) { // 登录成功
								console.log(res.authResult.access_token);
								console.log(res.authResult.openid);
								// 此处获取了openid和access_token
								// {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
								// 通过uniCloud.callFunction函数实现前端获取手机号
								uniCloud.callFunction({
									name: "oneClickLogin", // 填写你自己的云函数名称
									//传入上面获取的openid和access_token获取手机号
									data: {
										access_token: res.authResult
											.access_token, // 客户端一键登录接口返回的access_token
										openid: res.authResult.openid // 客户端一键登录接口返回的openid
									}
								}).then((dataRes) => {
									//此处已经成功获取手机号等信息
									console.log("云函数返回的参数1", dataRes)
									let phone = dataRes.result.data.phoneNumber
									if (phone) {
										_this.loginInterface({
											isOneClickLogin: true,
											phone,
										})
										setTimeout(() => {
											uni.closeAuthView() //关闭一键登录弹出窗口 
										}, 500)
									} else {

									}
									// 获取手机号后根据自己的需求做后面的登录操作即可
									//...
								}).catch((err) => {
									console.log(err);
									console.log("云函数报错", err)
									uni.showToast({
										title: err.errMsg,
										icon: "none"
									})
									this_ = this
									setTimeout(() => {
										uni.closeAuthView() //关闭一键登录弹出窗口
										_this.onClickMsgLogin()
										uni.showToast({
											title: "请插入SIM卡并且使用流量后再重试",
											icon: "none"
										})
									}, 500)
								})
							},
							fail(res) { // 登录失败
								console.log(res.errCode)
								console.log(res.errMsg)
							}
						})
					},
					fail(res) {
						// 预登录失败
						// 不显示一键登录选项（或置灰）
						// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
						console.log(res.errCode)
						console.log(res.errMsg)
						_this.onClickMsgLogin()
						uni.hideToast();
						uni.showToast({
							title: "请插入SIM卡并且使用流量后再重试",
							icon: "none",
							duration: 3000
						})
					}
				})
			},
			// 一键登录失败
			onClickMsgLogin() {
				uni.closeAuthView()
				uni.hideToast();
				setTimeout(() => {
					uni.showToast({
						title: "请插入SIM卡并且使用流量后再重试",
						icon: "none",
						duration: 3000
					})
				}, 500)


			},
			// 发送短信验证码
			sendSms() {
				// 手机号格式验证
				const mobileRegex = /^1[3-9]\d{9}$/;
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				// 检查是否在倒计时中
				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					});
					return;
				}

				// 生成验证码
				const code = verificationCode.generateCode();
				console.log("生成的验证码：", code);
				console.log({
					templateId: this.templateId,
					phone: this.mobile,
					code: code,
					expMinute: this.expMinute
				});
				// 调用云函数发送验证码
				uniCloud.callFunction({
					name: "smsVerification",
					data: {
						templateId: this.templateId + '',
						phone: this.mobile + '',
						code: code + '',
						expMinute: this.expMinute + '',
						name: '萌创星球',
					}
				}).then((dataRes) => {
					console.log("云函数返回的参数", dataRes);
					if (dataRes.result && dataRes.result.success) {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'none'
						});
						// 开始倒计时
						this.captchaTime = 60;
						this.getCodeTime();
					} else {
						uni.showToast({
							title: dataRes.result.message || '验证码发送失败',
							icon: 'none'
						});
						this.captchaTime = 0;
					}
				}).catch((err) => {
					console.log("发送验证码失败：", err);
					uni.showToast({
						title: '验证码发送失败',
						icon: 'none'
					});
					this.captchaTime = 0;
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'login.scss';
</style>