smart-tourism/smart-ui-app/pages/user/login.vue

<template>
	<view class="bg">
		<view class="p"><image src="../../static/profile.jpg" class="pic" mode="widthFix"></image></view>
		<view class="title">谢通门智慧旅游登录使用:</view>
		<view class="info">
			<text v-if="first">您的公开信息（昵称，头像等）</text>
			<text v-else>您的手机号</text>
		</view>
		<button class="btn" @click="getUserProfile()" v-if="first" :disabled="disabled">获取信息</button>
		<button class="btn" open-type="getPhoneNumber" :disabled="disabled" @getphonenumber="getPhoneNumber" style="background-color: #2196F3" v-else>获取手机号</button>
		<button class="btn" style="background-color: #9E9E9E;" @click="cancel()">取消</button>
	</view>
</template>
<script>
export default {
	data() {
		return {
			first: true, //是否第一次使用，第一次使用需要绑定手机号
			disabled: false //防止重复点击
		};
	},
	methods: {
		getUserProfile() {
			this.disabled = true;
			let code = '';
			uni.login({
				provider: 'weixin',
				success: res => {
					code = res.code;
				}
			});
			//获取用户信息
			uni.getUserProfile({
				desc: '用于完善会员资料',
				lang: 'zh_CN',
				provider: 'weixin',
				success: info => {
					this.$http.request({
						url: this.$http.urls.wxLogin + code,
						data: info,
						method: 'POST',
						success: res => {
							this.disabled = false;
							res.data.data.memberInfo.apiToken = res.data.data.apiToken;
							uni.setStorageSync('user', res.data.data.memberInfo);
							//未绑定手机号
							if (res.data.data.memberInfo.mobile == null || res.data.data.memberInfo.mobile == '') {
								this.first = false;
							} else {
								uni.navigateBack({ delta: 1 });
							}
						}
					});
				},
				fail: res => {
					this.disabled = false;
				}
			});
		},
		// 绑定用户手机号
		getPhoneNumber(e) {
			let item = {};
			uni.login({
				provider: 'weixin',
				success: res => {
					this.disabled = false;
					item.code = res.code;
					item.encryptedData = e.target.encryptedData;
					item.iv = e.target.iv;
					this.$http.request({
						url: this.$http.urls.bindWxMobile,
						data: item,
						method: 'POST',
						success: r => {
							uni.navigateBack({ delta: 1 });
						}
					});
				}
			});
		},
		cancel() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="less">
page {
	background-color: white;
}
.bg {
	padding: 30px;
	.p {
		text-align: center;
		padding: 15px;
		.pic {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 1px solid #9e9e9e;
		}
	}
	.title {
		font-weight: bold;
		font-size: 16px;
	}
	.info {
		color: #8b918d;
		margin-top: 10px;
		.icon {
			padding-right: 3px;
		}
	}
	.btn {
		margin-top: 20px;
		width: 75%;
		border-radius: 20px;
	}
}
</style>