tiantian-care-wx/pages/login/login.vue

<template>
	<view style="background-color: aliceblue;height: 100vh;overflow: hidden;">
		<view style="margin: 100rpx auto;text-align: center;">
			<image style="width: 117rpx;height: 134rpx;" src="../../static/resource/icon/icon_login.png"></image>
		</view>
		<view style="margin: 40rpx auto;display: flex;justify-content: center;">
			<button type="default" class="btn btnlogin" open-type="getPhoneNumber"
				@getphonenumber="_getPhoneNumber">获取手机号登录</button>

			<image src="../../static/resource/imgs/btn_bg.png" class="btnbg"></image>
		</view>


		<view class="btn btnCancel" style="margin: 40rpx auto;" @click="toback">
			<text>取消并返回首页</text>
		</view>
	</view>
</template>

<script>
	import util from "../../utils/util.js";
	export default {
		data() {
			return {
				openidReady: false
			}
		},
		onShareAppMessage() {},
		onLoad() {
			var that = this;
			util.getOpenidInfo(function() {
				that.openidReady = true;
			}, true);
		},
		onReady() {},
		onHide() {},
		methods: {
			getStoredOpenid: function() {
				var user = uni.getStorageSync('userInfo_token') || {};
				return user.openid || (user.user_info ? user.user_info.openid : '');
			},

			_getPhoneNumber: function(o) {
				var that = this;
				if (null == o.detail.iv) {
					util.alert('为了更好的为您服务，请允许访问您的手机号码');
					return;
				}
				if (that.openidReady && that.getStoredOpenid()) {
					that.getPhone(o);
					return;
				}
				util.getOpenidInfo(function() {
					that.openidReady = true;
					that.getPhone(o);
				}, true);




			},

			loginGet() {
				uni.login({
					success: function(i) {
						console.log(i);
						util.request({
							api: 'customer/login-by-code',
							data: {
								code: i.code
							},
							method: 'POST',
							utilSuccess: function(i) {
								var s = i.user_info;
								console.log('user start');
								console.log(s);
								console.log('user end');
								util.request({
									api: 'customer/get-phone-by-openid',
									data: {
										encryptedData: t.detail.encryptedData,
										iv: t.detail.iv,
										openid: s.openid,
										sessionKey: s.session_key
									},
									method: 'POST',
									utilSuccess: function(e) {
										console.log('获取手机号 start');
										console.log(e);
										console.log('获取手机号 end');
										uni.setStorageSync('userInfo', e);
										uni.setStorageSync('userInfo_token', e);
										uni.switchTab({
											url: '/pages/index/index'
										});
									},
									utilFail: function(e) {
										that.login();
									}
								});
							}
						});
					}
				});

			},
			getPhone: function(t) {
				var that = this;
				var code = t.detail.code;
				var openid = this.getStoredOpenid();
				console.log("code", code);
				util.request({
					api: 'customer/mobile',
					data: {
						code: code,
						openid: openid
					},
					method: 'POST',
					utilSuccess: function(e) {
						console.log('获取手机号 start');
						console.log(e);
						console.log('获取手机号 end');
						uni.setStorageSync('userInfo', e);
						uni.setStorageSync('userInfo_token', e);
						uni.switchTab({
							url: '/pages/index/index'
						});
					},
					utilFail: function(e) {
						that.login();
					}
				});

			},

			login: function() {
				uni.login({
					success: function(t) {
						util.request({
							api: 'customer/login-by-code',
							data: {
								code: t.code
							},
							method: 'POST',
							utilSuccess: function(t) {
								uni.setStorageSync('userInfo', t);
								uni.setStorageSync('userInfo_token', t);
								util.isNull(t.access_token) ||
									uni.switchTab({
										url: '/pages/index/index'
									});
							},
							utilFail: function(o) {
								util.alert(o);
							}
						});
					},
					fail: function(e) {
						console.log('wx.login失败');
					}
				});
			},

			toback: function() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

		}
	}
</script>

<style>
	.btn {

		border-radius: 36rpx 36rpx 36rpx 36rpx;
		height: 72rpx;
		width: 347rpx;
		font-weight: 300;
		font-size: 26rpx;
		line-height: 72rpx;
		text-align: center;
		position: relative;
	}

	.btnbg {

		width: 400rpx;
		height: 76rpx;
		position: absolute;
		bottom: -36rpx;
		left: -27rpx;
	}

	.btnlogin {
		background: linear-gradient(90deg, #0ee2ba, #67f7dc);
		color: #fff !important;
	}

	.btnCancel {
		background: #fff;

		color: #303233;
	}
</style>