travel-applet/pagesIndex/login/index.vue

<template>
	<view class="main">
		<view class="wx">
			<view class="wx_1">
				<text class="iconfont icon-weixin"></text>
			</view>
			<view class="wx_2">
				<button size="mini" @tap="otherLogin()">微信信任登录</button>
			</view>
			<view class="wx_3">
				<checkbox-group @change="changeAgree">
					<label>
						<checkbox :checked="agree" />
						<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		<!-- <uni-popup ref="dialogShow" type="center" :mask-click="false" background-color="#ffffff">
			<view class="popup">
				<view class="title">
					<text>绑定手机号</text>
				</view>
				<view class="wx_1">
					<text>确定获取微信绑定手机号吗？</text>
				</view>
				<view class="wx_2">
					<button size="mini" @tap="diaClose">取消</button>
					<button size="mini" open-type="getPhoneNumber" @getphonenumber="getUserPhone">确定</button>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				openid: '',
				form: {},
				// 用戶协议
				agree: true,
				// 注册账号信息
				user: {},
				// 弹框
				dialog: {
					title: '绑定手机号'
				},
			};
		},
		onShow: function() {
			const that = this;
			// 查询平台信息
			that.searchOpenids();
		},
		methods: {
			async searchOpenids() {
				const that = this;
				try {
					const res = uni.getStorageSync('openid');
					if (res) that.$set(that, `openid`, res);
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},

			// 其他登录方式
			async otherLogin() {
				const that = this;
				let agree = that.agree;
				let openid = that.openid;
				if (agree) {
					if (openid) {
						const res = await that.$api(`/user/login`, 'GET', {
							openid: openid
						})
						if (res.errcode == '0') {
							const token = await that.$token(`/tool/token`, 'GET', {
								token: res.data
							});
							if (token.errcode == '0') {
								that.$set(that, `user`, token.data);
								// 登录成功
								uni.getUserInfo({
									provider: 'weixin',
									success: function(info) {
										// 修改用户信息
										that.updatePhone({
											nick_name: info.userInfo.nickName,
											logo: [{
												url: info.userInfo.avatarUrl
											}],
										})
									}
								})
							}
						} else {
							uni.showToast({
								title: res.errmsg || '信息错误',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '系统更新中，请稍后再试!',
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私政策',
						icon: 'none'
					})
				}
			},
			// 获取手机号
			getUserPhone(e) {
				console.log(e);
				const that = this;
				uni.login({
					provider: 'weixin',
					success: async function(data) {
						let res = await that.$api(`/wechat/api/login/getPhone`, 'GET', {
							config: that.$config.wx_projectkey,
							code: data.code
						})
						if (res.errcode == '0') {
							// 登录成功
							uni.getUserInfo({
								provider: 'weixin',
								success: function(info) {
									const phone = res.data && res.data.phone_info && res.data
										.phone_info
										.purePhoneNumber || '';
									// 修改用户信息
									that.updatePhone({
										phone,
										nick_name: info.userInfo.nickName,
										logo: [{
											url: info.userInfo.avatarUrl
										}],
									})
								}
							})
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				});
			},
			async updatePhone(form) {
				const that = this;
				let user = that.user;
				let openid = that.openid;
				let arr = await that.$api(`/user/${user._id}`, 'POST', {
					openid,
					...form
				})
				if (arr.errcode == '0') {
					let res = await that.$api(`/user/${user._id}`, 'GET', {})
					uni.setStorage({
						key: 'token',
						data: res.data,
						success: function(res) {
							uni.navigateBack({
								delta: 1
							})
						},
						fail: function(err) {
							console.log(err);
						}
					})
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			},
			// 弹框关闭
			diaClose() {
				const that = this;
				that.$refs.dialogShow.close();
			},
			// 同意隐私协议
			changeAgree() {
				const that = this;
				let agree = true;
				if (that.agree) agree = false;
				that.$set(that, `agree`, agree);
			},
			// 查看隐私协议
			toAgree() {
				const that = this;
				uni.navigateTo({
					url: `/pagesOther/other/agree`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.wx {
			text-align: center;
			margin: 25vw 0 0 0;

			.wx_1 {
				margin: 0 0 5vw 0;

				.iconfont {
					color: var(--f35BColor);
				}

				text {
					font-size: 50px;
				}
			}

			.wx_2 {
				button {
					background: var(--f35BColor);
					color: var(--fffColor);
					font-size: var(--font16Size);
				}
			}

			.wx_3 {
				position: absolute;
				bottom: 10vw;
				width: 100vw;
				text-align: center;
				font-size: 12px;
			}

		}

		.popup {
			width: 86vw;
			padding: 2vw;

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

				text {
					color: var(--fFB1Color);
					font-size: var(--font16Size);
				}
			}

			.wx_1 {
				text-align: center;
				margin: 9vw 0;

				text {
					font-size: var(--font18Size);
				}
			}

			.wx_2 {
				text-align: center;

				button {
					margin: 0 2vw;
					font-size: var(--font16Size);
					padding: 0 10vw;
					color: var(--fffColor);
					background-color: var(--f35BColor);
				}

				button:nth-child(1) {
					background-color: var(--fFB1Color);
				}
			}
		}
	}
</style>