clsd/app/pages/user/login.vue

<template>
	<view class="bg">
		<view class="p">
			<image src="../../static/favicon.png" class="pic" mode="widthFix"></image>
		</view>
		<view class="title">承揽时代:</view>
		<view class="info">您的公开信息（昵称，头像等）</view>
		<button class="btn" @click="getUserProfile()" :disabled="disabled">微信一键登录</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				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) => {
						let item = info.userInfo;
						item.code = code;
						this.http.request({
							url: '/app/user/login',
							data: item,
							method: 'POST',
							success: (res) => {
								this.disabled = false;
								uni.setStorageSync('user', res.data.data);
								uni.navigateBack();
							},
							fail: (res) => {
								this.disabled = false;
							}
						});
					},
					fail: (res) => {
						this.disabled = false;
					}
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.bg {
		padding: 30px;
		.p {
			text-align: center;
			padding: 15px;
			.pic {
				width: 90px;
				height: 90px;
				border-radius: 50%;
			}
		}
		.title {
			font-weight: bold;
			font-size: 16px;
			color: $font-c;
		}
		.info {
			color: #8b918d;
			margin-top: 10px;
			font-size: 13px;
			.icon {
				padding-right: 3px;
			}
		}
		.btn {
			margin-top: 20px;
			border-radius: 30px;
		}
	}
</style>