WenWuGuanJia/pages/user/login.vue

<!--
## 代码风格与命名规范问题
1. 全局变量滥用 ：代码中使用了 _this 全局变量（第50行），这是一种非常过时且危险的做法。在Vue组件中，应当使用箭头函数或 bind 方法来保持正确的 this 上下文，而不是依赖外部变量。这种写法会导致作用域混乱，增加调试难度。
2. 命名不一致 ：方法命名风格混乱，有的使用驼峰命名（如 onGetUserProfile ），有的使用下划线风格（如 changMobileLogin ），还有的使用混合风格（如 wechatLogin ）。
3. 硬编码问题 ：代码中存在大量硬编码值，如第203行的 appid: 'wxf651ba4b0025640a' 和第204行的 main_body_id: '1' 。这些值应该通过配置文件或环境变量管理。
4. 注释不规范 ：注释风格不一致，有的使用 // ，有的使用 /* */ ，且部分注释与代码逻辑不符。例如第104行的注释 "切换微信登录" 与方法实现不符，该方法只是简单地设置 ismobile=false 。
## 逻辑结构与流程问题
1. 状态管理混乱 ：组件中同时使用了 $db （本地存储）、 $store （Vuex）和组件内部 data 来管理状态，导致状态管理逻辑分散，难以追踪。
2. 生命周期钩子使用不当 ：在 mounted 钩子中仅仅赋值 _this = this ，这是完全多余的操作。而在 onShow 钩子中，混合了用户信息检查和微信登录逻辑，职责不清晰。
3. 条件渲染逻辑复杂 ：模板中使用了 v-if="ismobile" 和微信小程序条件编译 #ifdef MP-WEIXIN 混合控制登录方式显示，逻辑嵌套过深，可读性差。
4. 导航逻辑不一致 ：登录成功后，根据 redirect 参数的存在与否，使用了不同的导航方法： $common.navigateTo 、 uni.navigateBack 和 uni.switchTab ，逻辑分散且不一致。
## 错误处理与安全性问题
1. 错误处理不完善 ：微信登录失败时（第246-263行），虽然有错误处理，但手机登录失败时（第167-175行）只是简单显示错误信息，没有更详细的错误分类和处理。
2. 密码安全问题 ：密码输入框（第14行）使用了简单的 :password="true" ，但没有任何密码强度检测或加密措施。
3. 网络请求错误处理缺失 ： $api.login 和 $api.third 调用中没有 catch 块来处理网络请求失败的情况，可能导致程序在网络异常时崩溃。
4. 数据验证不足 ：虽然有简单的手机号和密码非空验证，但没有更严格的格式验证（如手机号格式正则验证）。
## 性能与可维护性问题
1. 重复代码 ：登录成功后的存储逻辑（第144-152行和第212-224行）在手机登录和微信登录中重复出现，应当提取为公共方法。
2. 冗余代码 ：第265-274行的 uni.login 代码被注释掉，属于死代码，应当移除。
3. 依赖外部库不当 ：代码中使用了 $common 、 $api 、 $db 等全局依赖，但没有明确的导入语句，增加了代码的耦合度和维护难度。
4. 样式与逻辑混合 ：模板中直接使用了内联样式（如第40行的 :style="{width:'160rpx',height: '40rpx'}" ），违反了样式与逻辑分离的原则。
5. 微信登录逻辑过时 ：使用了 uni.getUserProfile 方法，但根据微信小程序的最新政策，这种登录方式已经过时，应当使用更现代的登录流程。
-->

<template>
	<view class="body">
		<u-navbar title="登录" bgColor="rgba(255,255,255,0.3)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<block>
			<view v-if="ismobile" class="login-bg">
				<view class="login-card">
					<view class="login-head">
						<image class="logoimg" :src="baseLogo" mode="widthFix"></image>
					</view>
					<view class="login-input login-margin-b">
						<input type="number" v-model="username" placeholder="请输入手机号" />
					</view>
					<view class="login-input">
						<input :password="true" v-model="password" placeholder="请输入密码(6-16位)" />
					</view>
					<view class="cu-bar btn-group margin-top">
						<button class="cu-btn bg-orange shadow-blur round" :loading="loading" @tap="login">{{ loading ? '登录中...' : '登 录' }}</button>
					</view>
					<view class="flex justify-center">
						<view class="text-gray text-sm margin-top-xl" @tap="register">注册新账户</view>
					</view>
				</view>
			</view>

			<!--  #ifdef  MP-WEIXIN	 -->
			<view v-else class="logView">
				<view class="logbt">
					<view class="login-head">
						<image class="logoimg" :src="baseLogo" mode="widthFix"></image>
					</view>
					<view class="loginTitile"><text decode="true">请点击微信登录，并授权获取公开信息， 登录后您将获得更多权益</text></view>
					<view class="btn-container">
						<view @click="onGetUserProfile" style="background-color: #cd5e3c; width: 200rpx; border-radius: 80rpx" class="cu-btn bg-orange shadow-blur round">
							<text class="cuIcon-lightauto"></text>
							微信登录
						</view>
						<view style="background-color: #dcdcdc; color: #000; width: 200rpx; border-radius: 80rpx; margin-left: 30rpx" class="cu-btn bg-orange shadow-blur round" @click="back()">
							<text class="cuIcon-lightauto"></text>
							暂不登录
						</view>
					</view>
				</view>
				<view class="text-gray text-sm margin-top-xl" :style="{width:'160rpx',height: '40rpx'}" @click="changMobileLogin()">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </view>
			</view>
			<!--  #endif -->
		</block>
	</view>
</template>

<script>
var _this;
import { baseLogo } from '../../config/config.js';
export default {
	data() {
		return {
			loading: false,
			user: [],
			username: '',
			password: '',
			class_id: '',
			ismobile: false,
			group_id: 1,
			code: '',
			baseLogo: baseLogo,
			redirect: ''
		};
	},
	mounted() {
		_this = this;
	},
	onLoad(e) {
		console.log(e);
		if (e.redirect) {
			this.redirect = e.redirect;
		}
	},
	onShow() {
		this.user = this.$common.userInfo();
		console.log('this.user: ', this.user);
		if (typeof this.user == 'undefined' || this.user == '' || this.user == null) {
		} else {
			this.$common.navigateTo('index');
		}
		// #ifdef MP-WEIXIN
		this.wxLogin();
		// #endif
	},
	methods: {
		wxLogin() {
			wx.login({
				success: (res) => {
					this.code = res.code;
					console.log('code' + res);
				},
				fail: function (error) {
					console.log('login failed ' + error);
				}
			});
		},
    //返回首页
    back(){
      uni.switchTab({
        url: '/pages/wenWuPage/wenWuPage',
      })
    },
		//切换微信登录
		wechatLogin(){
			_this.ismobile=false;
		},
		//切换手机登录
		changMobileLogin(){
			_this.ismobile=true;

		},
		register() {
			this.$common.navigateTo('register');
		},
		login() {
			_this.loading = true;
			if (_this.username == '' || _this.username.length < 11) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号'
				});
				_this.loading = false;
				return;
			}
			if (_this.password == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入密码'
				});
				_this.loading = false;
				return;
			}
			_this.$api.login(
				{
					account: _this.username,
					password: _this.password
				},
				(data) => {
					//console.log(data);
					if (data.code == 1) {
						_this.loading = false;
						//console.log(data);

						try {
							_this.$db.set('upload', 1);
							_this.$db.set('login', 1);
							_this.$db.set('token', data.data.userinfo.token);
							_this.$db.set('user', data.data.userinfo);
							_this.$db.set('auth', data.data.auth);
							_this.$store.commit('setAccessToken', data.data.userinfo.token);
							_this.$store.commit('setActivityId', 0);
						} catch (e) {}

						_this.$common.successToShow(data.msg, function () {
							// _this.$common.navigateTo('index');

							if (_this.redirect != '') {
								console.log(_this.redirect);
								if (_this.redirect.indexOf('%2F') > 0) {
									_this.redirect = '/' + unescape(_this.redirect);
								}
								_this.$common.navigateTo(_this.redirect);
								return;
							}
							uni.navigateBack();
						});
					} else {
						_this.loading = false;
            console.log('$api.login失败：', data);
						uni.showToast({
							duration: 1500,
							icon: 'none',
							title: data.msg
						});
					}
				}
			);
		},

		onGetUserProfile() {
			// uni.showLoading({
			// 	title:"正在登录中..."
			// })
			var platform = 'wechat';
			var that = this;
			var fid = uni.getStorageSync('parentid') ? uni.getStorageSync('parentid') : '';
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: (res) => {
					console.log(res, '55');
					var invite_id = _this.$db.get('invite_id');
					if (!invite_id) invite_id = 0;
					console.log(invite_id);
					_this.$api.third(
						{
							code: _this.code,
							platform: platform,
							encrypted_data: res.encryptedData,
							iv: res.iv,
							raw_data: res.rawData,
							signature: res.signature,
							invite_id: invite_id,
							appid: 'wxf651ba4b0025640a',
							main_body_id: '1'
						},
						(data) => {
							console.log(data, '登录成功');
							// console.log(data.data.userinfo)
							var res = data.data;
							if (data.code == 1) {
								this.$common.successToShow('登录成功!');
								try {
									this.$db.set('upload', 1);
									this.$db.set('login', 1);
									this.$db.set('auth', res.auth);
									this.$db.set('user', res.userinfo);
									this.$db.set('token', res.auth.token);
									this.$db.set('mainBodyUserInfo', res.mainBodyUserInfo);
									_this.$store.commit('accessToken', data.data.userinfo.token);
									_this.$db.set('setActivityId', 9);
									_this.$db.set('activityId', 9);
									this.$store.commit('setAccessToken', res.auth.token);
									this.$store.commit('setActivityId', 9);
									this.$store.commit('activityId', 9);
								} catch (e) {
									console.log('e: ', e);
								}
								uni.switchTab({
									url: '/pages/index/index'
								});
								if (this.redirect != '') {
									console.log(this.redirect);
									if (this.redirect.indexOf('%2F') > 0) {
										this.redirect = '/' + unescape(this.redirect);
									}
									this.$common.navigateTo(this.redirect);
									return;
								}
								uni.navigateBack();
							} else {
								_this.wxLogin();
							}
						}
					);
				},
				fail: (res) => {
					console.log('res登录失败: ', res);
					_this.wxLogin(); //重新获取登录code
					uni.hideLoading();
					if (res.errMsg == 'getUserInfo:cancel' || res.errMsg == 'getUserInfo:fail auth deny') {
						uni.showModal({
							title: '用户授权失败',
							showCancel: false,
							content: '请点击重新授权，如果未弹出授权，请尝试长按删除小程序，重新进入!',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateBack();
								}
							}
						});
					}
				}
			});
			// uni.login({
			// 	success: loginRes => {
			// 		uni.hideLoading();
			// 		console.log('第一次登录'+loginRes.code)
			// 		if (loginRes.code && loginRes.code!='') {
			// 			console.log('2222222222222222222')

			// 		}
			// 	}
			// })
		}
	}
};
</script>

<style>
page {
	background: #fff;
}

.content {
	height: 100%;
}

.logView {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	/* 垂直居中 */
	width: 100%;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.logbt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	/* 垂直居中 */
	width: 100%;
	background: none;
	border: none !important;
}

.logbt:after {
	border: none !important;
}

.logbt .logoimg {
	width: 200rpx;
	height: 200rpx;
	display: block;
}

.logbt .wechatimg {
	width: 150rpx;
	height: 150rpx;
	display: block;
}

.loginTitile {
	padding: 50rpx;
	font-size: 28rpx;
	color: #787878;
	line-height: 1.3;
	text-align: center;
}

.loginBtn {
	width: 300rpx;
	height: 70rpx;
	line-height: 70rpx;
	color: #fff;
	background: #2562a1;
	border-radius: 10rpx;
	border: none;
}

image {
	width: 100rpx;
	height: 100rpx;
}

.mobileLogin {
	background: none;
	color: #999;
	text-align: center;
	margin: 40rpx auto;
	border: none;
	font-size: 26rpx;
}

.landing[type='primary'] {
	height: 84rpx;
	line-height: 84rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	/* background: linear-gradient(left, #86B5F4, #4790EF); */
	background-color: #ffbc32;
}

.login-btn {
	padding: 10rpx 20rpx;
	margin-top: 60rpx;
}

.login-function {
	overflow: auto;
	padding: 20rpx 20rpx 30rpx 20rpx;
}

.login-forget {
	float: left;
	font-size: 26rpx;
	color: #999;
}

.login-register {
	color: #666;
	float: right;
	font-size: 26rpx;
}

.login-input input {
	background: #f2f5f6;
	font-size: 28rpx;
	padding: 10rpx 25rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
}

.login-margin-b {
	margin-bottom: 25rpx;
}

.login-input {
	padding: 10rpx 20rpx;
}

.login-head {
	font-size: 34rpx;
	text-align: center;
	padding: 25rpx 10rpx 55rpx 10rpx;
}

.login-head image {
	width: 200rpx;
}

.login-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 10rpx 25rpx;
	position: relative;
	margin-top: 120rpx;
}

.login-bg {
		height: 100%;
		padding: 25rpx;
	}
	.btn-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
</style>