zz--front/pages/login/login.vue

<template>
	<view style="height: 100%;">
		<image mode="widthFix" src="/static/login_bg.jpg" class="full_img"></image>
		<u-navbar title="登录" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view style="padding: 0 40rpx;margin-top: 90%;"><u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: ''
		};
	},
	mounted() {},
	methods: {
		getPhoneNumber(e) {
			let that = this;
			if (e.detail.encryptedData) {
				//用户同意授权
				var datas = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					code: that.code
				};
				that.$api.login(datas).then(
					res => {
						if (res.data.code == 200) {
							uni.setStorageSync('union_id', res.data.data.union_id);
							uni.setStorageSync('token', res.data.data.token);
							uni.navigateBack();
						}else{
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							}); 
						}
					},
					err => {
						console.log(err);
					}
				);
			}
		}
	},
	onLoad(option) {
		let that = this;
		this.from = option.from;
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				that.code = loginRes.code;
			}
		});
	}
};
</script>
<style>
.u-border-bottom:after,
.u-border-left:after,
.u-border-right:after,
.u-border-top-bottom:after,
.u-border-top:after,
.u-border:after {
	border: none !important;
}
page {
	background-color: #bee0ff;
	height: 100%;
	width: 100%;
}
</style>
<style scoped>
.full_img {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	z-index: -999;
	top: 0;
}

.head {
	height: 96rpx;
	width: 100%;
	line-height: 96rpx;
	margin-top: 40rpx;
	text-align: center;
	display: flex;
	position: relative;
	justify-content: center;
}
.icon {
	position: absolute;
	left: 30rpx;
}
</style>