video_mini/pagesA/login/login.vue

<template>
	<view class="content" v-if="idfd==1">
		<view class="header">
			<image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/shilu-login/1.png"></image>
				<input class="sl-input" v-model="mobile" type="number" maxlength="11" placeholder="输入手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码"
					password="true" />
			</view>
		</view>
		<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
			<text style="font-size: 40upx;">登录</text>
		</view>
		<!-- #ifdef H5 || APP-->
		<view class="register">
			<view @click="goRegister">立即注册</view>
			<view @click="goPassWord">忘记密码</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="list" style="margin-top: 10px; color: #666; font-size: 14px;text-align: center;">openid：{{openid}}</view> -->
		<button class="button-login" @click="getUserInfo1()"
			style="margin-top: 35rpx; font-size: 26upx; color: #fff; height: 80rpx; line-height: 80rpx;">获取微信授权
		</button>
		<view class="agreenment">
			<navigator url="reg" open-type="navigate" @click="goRegister">注册账户</navigator>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				openid: '',
				unionid: '',
				userinfowx: '',
				idfd: 1,
				fxpid: 0,
			};
		},
		onLoad(e) {
			console.log('查看分享也=-------', e)
			if (e.fxpid) {
				this.fxpid = e.fxpid
				uni.setStorageSync('invite_number', e.invite)
				if (e.fxpid > 0) {
					uni.setStorage({
						key: 'fxpid',
						data: e.fxpid
					})
				}
			}
		},

		methods: {

			goRegister() {
				uni.navigateTo({
					url: "/pagesA/login/register"
				})
			},
			goPassWord() {
				uni.navigateTo({
					url: "/pagesA/login/forget"
				})
			},
			bindLogin() {
				let that = this
				if (!this.mobile) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					});
					this.userfocus = true
					return false;
				}
				if (!this.password) {
					uni.showToast({
						title: '密码不能为空',
						icon: "none"
					});
					this.paswfocus = true
					return false;
				}
				let data = {
					'account': this.mobile,
					'password': this.password
				};
				if (this.openid) {
					data.openid = this.openid;
				}
				that.$httpRequest({
					url: "/api/user/login",
					method: "GET",
					data: data
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('userinfo', res.data.userinfo);
						uni.setStorageSync('config', res.data.config);
						uni.showModal({
							title: "提示",
							content: res.msg,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getUserInfo() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
								console.log(infoRes);
							}
						});
					}
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(75, 196, 93, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-login1 {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, rgba(75, 196, 93, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;
		color: #fff;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreenment {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreenment text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.register {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.register view {
		text-align: center;
		color: #C79556;
		font-size: 32rpx;
		line-height: 100rpx;
		margin: 0 40rpx;
	}
</style>