MeetMateApp/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>

		<view class="tbody">
			<block v-if="type == 'onelogin'">
				<image class="icon" mode="widthFix" src="../../static/me/avator.png"></image>
				<text class="mobile">+ 86 177****9870</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 == 'mobile' || type == 'pass'">
				<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="false">忘记密码</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">获取验证码</view>
					</view>
					<view class="other_list">
						<text class="left"></text>
						<text class="right" @click="type = 'pass'">密码登录</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/login/sel_no.png" v-if="is_agree == 0"></image>
					<image mode="widthFix" src="../../static/login/sel_yes.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>
		<view class="blankHeight"></view>
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				sel: 1,
				is_agree: 0,
				type: 'pass',
				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: '',
				password: '',
				code: '',
			}
		},
		onLoad() {
			setTimeout(function() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#00000000',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			}, 200);
		},
		onShow() {
			if (getApp().globalData.skey != "") {
				// console.log("====", getApp().globalData.skey);
				uni.switchTab({
					url: "/pages/index/index"
				});
			}
			// this.loadData();
		},
		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') {
					uni.navigateTo({
						url: '/pages/AboutUs/yszc'
					})
				} else {
					uni.navigateTo({
						url: page,
					});
				}
			},
			toRegist() {
				uni.navigateTo({
					url: "/pages/login/reg",
				});
			},
			toLogin() {
				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;
					}
				}

				uni.showLoading({
					mask: true,
				});
				console.log("host", this.$apiHost + method);
				uni.request({
					url: this.$apiHost + method, //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						loginType: this.type,
						mobile: this.mobile,
						password: this.password,
						code: this.code
					},
					header: {
						"content-type": "application/json", //自定义请求头信息
					},
					success: (res) => {
						console.log("----", res.data);
						if (res.data.success == "yes") {
							console.log("res.data", res.data);
							uni.setStorageSync("wapptoken", res.data.skey);
							getApp().globalData.skey = res.data.skey;
							if (res.data.nickname == '') {
								uni.redirectTo({
									url: '/pages/login/loginFirst'
								});
								return;
							}
							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();
					},
				});
			},

		}
	}
</script>

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