point-app/pages/login/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one" v-if="platform.uniPlatform=='app'">
				<uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
					<uni-forms-item label="手机号" name="phone">
						<uni-easyinput type="text" v-model="form.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code">
						<uni-easyinput type="text" v-model="form.code" placeholder="请输入验证码" />
						<button type="default" size="mini">验证码</button>
					</uni-forms-item>
					<view class="btn">
						<button type="default" size="mini" @click="toSubmit('form')">提交登录</button>
					</view>
				</uni-forms>
			</view>
			<view class="two" v-else-if="platform.uniPlatform=='mp-weixin'">
				<view class="icon">
					<text class="iconfont icon-weixin"></text>
				</view>
				<view class="btn">
					<button type="default" size="mini" @tap="wxLogin()" :open-type="openType" @getphonenumber="getUserPhone">微信信任登录</button>
				</view>
			</view>
			<view class="thr">
				<view class="thr_1">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox :checked="agree" />
							<text @tap="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				// 平台信息
				platform: {},
				//openid
				openid: '',
				// 隐私协议
				agree: false,
				form: {},
				rules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '账号长度在{maxLength}个字符',
							}
						]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}, ]
					},
				},
				// 微信登陆
				// 无账号
				is_user: false,
				openType: '',
			};
		},
		onShow: function() {
			const that = this;
			that.search();
		},
		methods: {
			// 同意隐私协议
			changeAgree() {
				const that = this;
				if (that.agree) that.$set(that, `agree`, false)
				else that.$set(that, `agree`, true);
			},
			// 查看隐私协议
			toAgree() {
				uni.navigateTo({
					url: `/pages/other/agree`
				})
			},
			search() {
				const that = this;
				uni.getStorage({
					key: 'system',
					success: function(res) {
						if (res.data) that.$set(that, `platform`, res.data);
						// 获取openid
						that.searchOpenid()
					}
				})
			},
			// 查询openid
			searchOpenid() {
				const that = this;
				if (that.platform.uniPlatform == 'mp-weixin') {
					uni.login({
						provider: 'weixin',
						success: async function(res) {
							const aee = await that.$api(`/wechat/api/login/app`, 'GET', {
								js_code: res.code,
								config: 'pointApp'
							})
							if (aee.errcode == '0') {
								that.$set(that, `openid`, aee.data.openid);
								// 微信登录
								that.openidLogin(aee.data.openid);
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})
				} else if (that.platform.uniPlatform == 'app') {
					console.log('to do');
				}
			},
			// 微信登录
			async openidLogin(e) {
				const that = this;
				let res = await that.$api(`/user/wxLogin`, 'POST', {
					openid: e
				})
				if (res.errcode == '0') {
					uni.setStorage({
						data: res.data,
						key: 'token',
						success: function() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				} else {
					if (res.errcode == '-5') {
						console.log('无账号');
						that.$set(that, `is_user`, false)
					}
				}
			},
			// 微信信任登录
			async wxLogin() {
				const that = this;
				if (that.agree) {
					uni.getUserProfile({
						desc: '用于展示',
						success: async function(res) {
							let parmas = {
								openid: that.openid,
								icon: [{
									url: res.userInfo.avatarUrl
								}],
								name: res.userInfo.nickName,
							}
							const arr = await that.$api(`/user`, 'POST', parmas);
							if (arr.errcode == '0') {
								const agg = await that.$api(`/user/wxLogin`, 'POST', {
									openid: that.openid
								})
								if (agg.errcode == '0') {
									uni.setStorage({
										data: agg.data,
										key: 'token',
										success: function() {
											uni.navigateBack({
												delta: 1
											})
										}
									})
								} else {
									uni.showToast({
										title: agg.errmsg,
										icon: 'none'
									});
								}
							} else {
								uni.showToast({
									title: arr.errmsg,
									icon: 'none'
								});
							}
						},
						fail: function(err) {
							console.log(err);
						}
					})

				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// 获取手机号
			getUserPhone(e) {
				console.log('1');
				const that = this;
			},
		}
		// },
		// // 微信信任登录
		// wxLogin() {
		// 	const that = this;
		// 	let agree = that.agree;
		// 	if (agree) {
		// 		uni.getUserProfile({
		// 			desc: '用户展示',
		// 			success: function(res) {
		// 				uni.login({
		// 					success: function(resl) {

		// 					},
		// 					fail: function(errl) {
		// 						console.log(errl);
		// 					}
		// 				})
		// 			},
		// 			fail: function(err) {
		// 				console.log(err);
		// 			}
		// 		})
		// 		// uni.login({
		// 		// 	success: async function(event) {
		// 		// 		const res = await that.$api(`/wechat/api/login/app`, 'GET', {
		// 		// 			js_code: event.code,
		// 		// 			config: 'pointApp'
		// 		// 		})
		// 		// 		if (res.errcode == '0') {
		// 		// 			// 用openid登录
		// 		// 			// that.openidLogin(res.data.openid);
		// 		// 			let arr = await that.$api(`/user/wxLogin`, 'POST', {
		// 		// 				openid: res.data.openid
		// 		// 			})
		// 		// 			if (arr.errcode == '0') {
		// 		// 				console.log('登录成功');
		// 		// 			} else {
		// 		// 				if (arr.errcode == '-5') {
		// 		// 					// 去注册
		// 		// 					// that.registerWxuser(e);
		// 		// 					that.$set(that, `errcode`, arr.errcode)
		// 		// 				} else {
		// 		// 					uni.showToast({
		// 		// 						title: arr.errmsg,
		// 		// 						icon: 'none'
		// 		// 					})
		// 		// 				}
		// 		// 			}
		// 		// 		} else {
		// 		// 			console.log(res);
		// 		// 		}
		// 		// 	}
		// 		// })
		// 		// console.log(that.errcode);
		// 		// console.log('1');
		// 		// if (that.errcode == '-5') {
		// 		// 	console.log('2');
		// 		// 	uni.getUserProfile({
		// 		// 		desc: '用户展示',
		// 		// 		success: function(res) {
		// 		// 			console.log(res);
		// 		// 			console.log(e);
		// 		// 		},
		// 		// 		fail: function(err) {
		// 		// 			console.log(err);
		// 		// 		}
		// 		// 	})
		// 		// }

		// 	} else {
		// 		uni.showToast({
		// 			title: '请阅读并同意用户协议和隐私政策',
		// 			icon: 'none'
		// 		})
		// 	}
		// },
		// // openid登录
		// async openidLogin(e) {
		// 	const that = this;
		// 	let res = await that.$api(`/user/wxLogin`, 'POST', {
		// 		openid: e
		// 	})
		// 	if (res.errcode == '0') {
		// 		console.log('登录成功');
		// 	} else {
		// 		if (res.errcode == '-5') {
		// 			// 去注册
		// 			that.registerWxuser(e);
		// 		} else {
		// 			uni.showToast({
		// 				title: res.errmsg,
		// 				icon: 'none'
		// 			})
		// 		}
		// 	}
		// },
		// // wx注册
		// registerWxuser(e) {
		// 	const that = this;
		// 	console.log(e);
		// 	uni.getUserProfile({
		// 		desc: '用户展示',
		// 		success: function(res) {
		// 			console.log(res);
		// 			console.log(e);
		// 		},
		// 		fail: function(err) {
		// 			console.log(err);
		// 		}
		// 	})
		// },
		// // 账号登录
		// toSubmit(ref) {
		// 	const that = this;
		// 	that.$refs[ref].validate().then(async params => {
		// 		let agree = that.agree;
		// 		if (agree) {
		// 			console.log(params);
		// 		} else {
		// 			uni.showToast({
		// 				title: '请阅读并同意用户协议和隐私政策',
		// 				icon: 'none'
		// 			})
		// 		}

		// 	}).catch(err => {
		// 		console.log(err);
		// 	})
		// },

	}
</script>

<style lang="scss">
	.main {
		.one {
			padding: 2vw;

			.btn {
				text-align: center;
				margin: 0 0 2vw 0;

				button {
					margin: 0 2vw;
					background-color: var(--f35BColor);
					color: var(--fffColor);
				}
			}
		}

		.two {
			text-align: center;
			margin: 20vw 0;

			.icon {
				margin: 0 0 5vw 0;

				text {
					font-size: 60px;
				}
			}

			.btn {
				button {
					background-color: var(--f35BColor);
					color: var(--fffColor);
				}
			}
		}

		.thr {
			.thr_1 {
				padding: 0 2vw;
				font-size: 14px;
				text-align: center;
				position: absolute;
				width: 96vw;
				bottom: 25vw;
			}
		}
	}
</style>