ec.uniapp-master/pages/user/register/register.vue

<template>
	<view>
		<lf-nav title="登录/注册" :showIcon="true" bgColor="#fff"></lf-nav>
		<view style="display: flex;justify-content: center;align-items: center;margin-top: 300rpx;">
			<image class="img" src="/static/images/login.png" mode="widthFix"></image>
		</view>
		<view class="fixed-btn">
			<button class="btn1" hover-class="lf-opacity" @click="toPhoneLogin">手机号登录</button>
			<button class="btn2" hover-class="lf-opacity" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>
		</view>
	</view>
</template>

<script>
	import { config, wechat, GetUrl } from '@/common/js/utils.js';
	export default {
		data(){
			return {
				code: '',
				url: '',
				logo: '',
				author: config.PACKAGES.author,
				config: '',
				showAgreement: false,
				agreement: '',
				open_id: '',
				h5_url: ''
			}
		},
		onShow(){
			var token = this.$cookieStorage.get('user_token');
			// this.setData({
			//   token: token
			// });
			this.token = token;
			
			var initInfo = this.$cookieStorage.get('init');
			
			if (initInfo && initInfo.shop_show_logo) {
				this.setData({
					logo: initInfo.shop_show_logo
				});
			}
			
			if (token) {
				// uni.switchTab({
				// 	url: '/pages/user/personal/personal'
				// });
				this.$url('/pages/user/my/center', {type: 'launch'})
			} else {
				// #ifdef MP-WEIXIN
				this.wxLogin();
				// #endif
			}
		},
		onLoad(e){
			// 第三方平台配置颜色
			var bgConfig = this.$cookieStorage.get('globalConfig') || '';
			this.setData({
				config: bgConfig
			});
			if (e.url) {
				this.url = decodeURIComponent(e.url);
				console.log('this.url',this.url)
			}
			if (e.shop_id) {
				this.$cookieStorage.set('shop_id', e.shop_id);
			}
			
			this.getGreementInfo();
			
		},
		methods: {
			// 获取用户协议
			getGreementInfo() {
				console.log("获取协议")
			// 	this.$http.get({
			// 		api: 'api/user/agreement'
			// 	}).then(res => {
			// 		if (res.statusCode == 200) {
			// 			res = res.data;
			
			// 			if (res.status) {
			// 				this.setData({
			// 					agreement: res.data
			// 				});
			// 			}
			// 		}
			// 	});
			},
			// 小程序静默登录
			wxLogin(){
				uni.showLoading({
					title: '正在自动登录',
					mask: true
				});
				uni.login({
					success: res => {
						console.log(res);
						if (res.code) {
							this.autoLogin(res.code);
						} else {
							this.$msg('获取code失败');
						}
					},
				});
			},
			// 通过code自动登录
			autoLogin(code) {
				this.$http.post({
					api: 'api/oauth/miniprogram/login',
					data: {
						code: code,
						open_type: 'miniprogram',
						shop_id: this.$cookieStorage.get('shop_id') || '',
						agent_code: this.$cookieStorage.get('coupon_agent_code') || this.$cookieStorage.get('agent_code') || '',
						clerk_id: this.$cookieStorage.get('clerk_id') || '',
						agent_code_time: this.$cookieStorage.get('agent_code_time') || '',
						shop_id_time: this.$cookieStorage.get('shop_id_time') || ''
					}
				}).then(res => {
						res = res.data;
						if (res.data && res.data.open_id) {
							this.setData({
								open_id: res.data.open_id
							});
						} // 如果接口返回token就直接登录，如果没有则弹出授权
			
						if (res.data.access_token) {
							console.log('已经返回给我了token');
							uni.hideLoading();
							var access_token = res.data.token_type + ' ' + res.data.access_token;
							var expires_in = res.data.expires_in || 315360000;
							this.$cookieStorage.set("user_token", access_token, expires_in);
							this.getUserInfo(access_token);
						} else {
							uni.hideLoading();
						}
				}).catch(rej => {
					uni.hideLoading();
					uni.showModal({
						content: '请求失败，请重试',
						showCancel: false,
						success: res => {
							if (res.confirm || !res.cancel && !res.confirm) {
								this.wxLogin();
							}
						}
					});
				});
			},
			// 获取用户手机号
			getPhoneNumber(e) {
				if (e.detail.encryptedData) {
					uni.login({
						success: res => {
							if (res.code) {
								this.setData({
									code: res.code
								});
								this.phone(e);
							} else {
								uni.showModal({
									content: " 获取code失败",
									showCancel: false
								});
							}
						}
					});
					return;
				} else {
					this.toPhoneLogin();
				}
			},
			// 通过手机号登录注册
			phone(e) {
				uni.showLoading({
					title: '正在登录',
					mask: true
				});
				this.$http.post({
					api: 'api/oauth/miniprogram/mobile',
					data: {
						open_type: 'miniprogram',
						code: this.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						open_id: this.open_id,
						shop_id: this.$cookieStorage.get('shop_id') || '',
						agent_code: this.$cookieStorage.get('coupon_agent_code') || this.$cookieStorage.get('agent_code') || '',
						clerk_id: this.$cookieStorage.get('clerk_id') || '',
						agent_code_time: this.$cookieStorage.get('agent_code_time') || '',
						shop_id_time: this.$cookieStorage.get('shop_id_time') || ''
					}
				}).then(res => {
					if (res.statusCode == 200) {
						res = res.data;
			
						if (res.data.access_token) {
							var access_token = res.data.token_type + ' ' + res.data.access_token;
							var expires_in = res.data.expires_in || 315360000; // debugger;
							this.getUserInfo(access_token);
							this.$cookieStorage.set("user_token", access_token, expires_in); // this.$cookieStorage.set("user_token",access_token,expires_in);
							// uni.setStorageSync("user_token",access_token);
						} else {
							uni.showModal({
								content: res.message || '请求失败，请重试',
								showCancel: false
							});
						}
					} else {
						uni.showModal({
							content: '请求失败，请重试',
							showCancel: false
						});
					}
			
					uni.hideLoading();
				}).catch(rej => {
					uni.hideLoading();
					uni.showModal({
						content: '请求失败，请重试',
						showCancel: false
					});
				});
			},
			// 接口获取用户信息
			getUserInfo(token){
				this.$http.get({
					api: 'api/user',
					header: {
						Authorization: token
					}
				}).then(res => {
					// console.log("1111", res)
					// this.userInfo = res.data;
					this.$cookieStorage.set('user_info', res.data);
					if (this.url) {
						this.$url("/" + this.url, {type: 'redirect'});
					} else {
						this.$url('/pages/user/my/center', {type: 'launch'})
					}
				})
			},
			// 跳转到手机号验证码登录
			toPhoneLogin(){
				if (this.url) {
					// uni.navigateTo({
					// 	url: '/pages/user/loginType/loginType?url=' + encodeURIComponent(this.url) + '&open_id=' + this.open_id
					// });
					this.$url('/pages/user/loginType/loginType?url=' + encodeURIComponent(this.url) + '&open_id=' + this.open_id);
				} else {
					// wx.navigateTo({
					// 	url: '/pages/user/loginType/loginType?open_id=' + this.open_id
					// });
					this.$url('/pages/user/loginType/loginType?open_id=' + this.open_id);
				}
				
			},
			setData: function(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
			
						data = data[key2];
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.illustration{
		width: 750rpx;
		height: 750rpx;
		position: fixed;
		top: 44%;
		left: 0;
		margin-top: -375rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.fixed-btn{
		width: 630rpx;
		height: max-content;
		position: fixed;
		left: calc(50% - 315rpx);
		top: calc(40% + 375rpx);
		display: flex;
		justify-content: space-between;
		.btn1, .btn2{
			width: 300rpx;
			height: 100rpx;
			border-radius: 60rpx;
			border: 1rpx solid #15716E;
			box-sizing: border-box;
			line-height: 100rpx;
			font-size: 32rpx;
		}
		.btn1{
			background-color: #F3F8F8;
			color: #15716E;
		}
		.btn2{
			background-color: #15716E;
			color: #FFFFFF;
		}
	}
</style>