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">
			<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">本机号码一键登录</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'">
				<view class="name">手机号码：</view>
				<view class="item">
					<input type="text" 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="text" class="input" v-model="code" placeholder="请输入验证码" maxlength="6" />
						<view class="btn" v-if="captchaTime === 0" @click="getCode">获取验证码</view>
						<view class="btn" v-if="captchaTime > 0">{{ captchaTime }}秒后重试</view>
					</view>
					<view class="other_list">
						<text class="left"></text>
						<text class="right" @click="type = 'pass'" style="color: blue;">密码登录</text>
					</view>
				</block>
				<text class="btn_submit" @click="toLogin">登录/注册</text>
			</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="goPage('yhxy')">
					隐私协议
				</text>
				》和《
				<text class="xy" @click="goPage('yszc')">
					用户使用协议
				</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'
export default {
	components: {},
	data() {
		return {
			skey: '',
			sel: 1,
			is_agree: 0,
			type: 'mobile',
			myinfo: {
				nickname: '王思思',
				join_name: '注册日期：2024年5月',
				num_1: 0,
				num_2: 0,
				num_3: 0,
				num_4: 0,
				is_login: 'no',
				num_history: 0,
				num_collection: 0
			},
			mobile: '18899990000',
			password: '111111',
			code: '',
			captchaTime: 0,
			push_token: '',
			lat: '',
			lng: '',
		}
	},
	onLoad() {
		setTimeout(function () {
			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)
			}
		});
	},
	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: {
		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() {
			console.log('aaa');
			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;
				}
			}
			let channel = "";
			// #ifdef APP-PLUS
			channel = plus.runtime.channel;
			// #endif

			uni.showLoading({
				mask: true,
			});
			console.log("host", this.$apiHost + method);
			uni.request({
				url: this.$apiHost + method,
				data: {
					uuid: getApp().globalData.uuid,
					channel: channel,
					loginType: this.type,
					mobile: this.mobile,
					password: this.password,
					code: this.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") {
						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);
			}
		}

	}
}
</script>

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