2021-9-13

api/login.js

@@ -1,57 +1,64 @@
-import request from '@/utils/request'
-
-// 登录
-export function login(data) {
-	return request({
-		url: '/api/login',
-		method: 'post',
-		data
-	});
-}
-// 注册
-export function register(data) {
-	return request({
-		url: '/api/register',
-		method: 'post',
-		data
-	});
-}
-// 验证码
-export function verify(data) {
-	// type=register为注册
-	// type=login为登录
-	return request({
-		url: '/api/register/verify',
-		method: 'post',
-		data
-	});
-}
-
-// 获取用户信息
-export function getUserInfo(data) {
-	return request({
-		url: '/api/userinfo',
-		method: 'get',
-		data
-	});
-}
-
-// 短信登录
-export function loginMobile(data) {
-	return request({
-		url: '/api/login/mobile',
-		method: 'post',
-		data
-	});
-}
-// #ifdef APP-PLUS
-// 微信授权登录
-export function loginWx(data) {
-	return request({
-		url: '/api/wechat/appauth',
-		method: 'get',
-		data
-	});
-}
-// #endif
-
+import request from '@/utils/request'
+
+// 登录
+export function login(data) {
+	return request({
+		url: '/api/login',
+		method: 'post',
+		data
+	});
+}
+// 注册
+export function register(data) {
+	return request({
+		url: '/api/register',
+		method: 'post',
+		data
+	});
+}
+// 验证码
+export function verify(data) {
+	// type=register为注册
+	// type=login为登录
+	return request({
+		url: '/api/register/verify',
+		method: 'post',
+		data
+	});
+}
+
+// 获取用户信息
+export function getUserInfo(data) {
+	return request({
+		url: '/api/userinfo',
+		method: 'get',
+		data
+	});
+}
+
+// 短信登录
+export function loginMobile(data) {
+	return request({
+		url: '/api/login/mobile',
+		method: 'post',
+		data
+	});
+}
+// #ifdef APP-PLUS
+// 微信授权登录
+export function loginWx(data) {
+	return request({
+		url: '/api/wechat/appauth',
+		method: 'get',
+		data
+	});
+}
+// #endif
+//绑定手机号
+export function bangding(data) {
+	return request({
+		url: '/api/binding',
+		method: 'POST',
+		data
+	});
+}

pages/public/wxLogin.vue

@@ -1,291 +1,312 @@
-<template>
-	<view class="content">
-		<!-- #ifdef MP -->
-		<image class="bg-img" ：src="/static/img/img09.png" mode=" scaleToFill"></image>
-		<view class="logo-img-box">
-			<image class="logo-img" src="/static/img/img10.png" mode=" aspectFit"></image>
-			<button class="userInfo" type="warn" open-type="getUserInfo" @getuserinfo="userInfoData">
-				<text class="iconfont iconweixin"></text>
-				<text>微信授权登录</text>
-			</button>
-		</view>
-		<!-- #endif -->
-		<view class="Mask" v-show="MaskShow">
-			<view class="Mask-box">
-				<view class="title">申请获取您的手机号</view>
-				<view class="text">为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权</view>
-				<view class="btn_box">
-					<button class="weixin" @click="ToIndex()">取消</button>
-					<button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">手机号授权</button>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-// #ifdef H5
-import { loginWinxin } from '@/utils/wxAuthorized';
-// #endif
-// #ifdef MP-WEIXIN
-import { wechatMpAuth } from '@/api/wx';
-// #endif
-import { mapMutations } from 'vuex';
-import { getUserInfo, bangding } from '@/api/login.js';
-export default {
-	data() {
-		return {
-			userInfo: {}, //授权用户信息
-			code: '', //授权code
-			loding: false, //判断是否在点击中
-			MaskShow: false // 手机号授权弹窗
-		};
-	},
-	onLoad(option) {
-		this.loadData();
-	},
-	methods: {
-		loadData() {
-			// #ifdef H5
-			loginWinxin();
-			// #endif
-		},
-		// #ifndef H5
-		// 用户确认授权
-		userInfoData(e) {
-			const that = this;
-			// #ifdef MP-WEIXIN
-			if (!this.loding) {
-				wx.getUserProfile({
-					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-					success: res => {
-						that.userInfo = res;
-						that.loadMp();
-					},
-					fail: err => {
-						console.log('getUserProfile出错', err);
-					}
-				});
-			}
-			// #endif
-		},
-		// #endif
-		// #ifdef MP-WEIXIN
-		loadMp(option) {
-			let obj = this;
-			obj.loding = true;
-			// 获取登录授权页数据
-			let user = obj.userInfo;
-			// 获取推广人id
-			let spread_spid = uni.getStorageSync('spread') || '';
-			// let spread_code = uni.getStorageSync('spread_code') || '';
-			uni.showLoading({
-				title: '授权中',
-				mask: true
-			});
-			wx.login({
-				success(e) {
-					wechatMpAuth({
-						code: e.code,
-						iv: user.iv,
-						encryptedData: user.encryptedData,
-						spread_spid: spread_spid,
-						// #ifdef MP
-						spread_code: spread_code
-						// #endif
-					})
-						.then(({ data }) => {
-							obj.loding = false;
-							obj.wchatAuth(data);
-							console.log(data);
-						})
-						.catch(e => {
-							obj.loding = false;
-							uni.hideLoading();
-						});
-				},
-				fill: function(e) {
-					obj.loding = false;
-					console.log(e);
-				}
-			});
-		},
-		wchatAuth(data) {
-			let obj = this;
-			// 保存token
-			uni.setStorageSync('token', data.token);
-			// 获取用户基础信息
-			getUserInfo({})
-				.then(e => {
-					uni.hideLoading();
-					obj.login();
-					// 保存返回用户数据
-					obj.setUserInfo(e.data);
-					obj.ToIndex();
-					// if (e.data.phone == null || !e.data.phone ) {
-					// 	obj.MaskShow = true;
-					// } else {
-					// 	obj.ToIndex();
-					// }
-				})
-				.catch(e => {
-					uni.hideLoading();
-				});
-		},
-		// #endif
-		ToIndex() {
-			let obj = this;
-			let ur = uni.getStorageSync('present') || '/pages/index/index';
-			// 用于处理缓存bug
-			if (ur == 'pages/product/product') {
-				ur = '/pages/index/index';
-			}
-			uni.switchTab({
-				url: ur,
-				fail(e) {
-					uni.navigateTo({
-						url: ur,
-						fail(e) {
-							uni.navigateTo({
-								url: '/pages/index/index'
-							});
-						}
-					});
-				}
-			});
-		},
-		// 绑定手机号
-		PhoneNumber(e) {
-			let obj = this;
-			obj.MaskShow = false;
-			(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
-
-			uni.setStorageSync('code', obj.code);
-			bangding({
-				flag: 1,
-				cache_key: obj.cache_key,
-				code: obj.code,
-				iv: obj.iv,
-				encryptedData: obj.encryptedData
-			}).then(function(e) {
-				if (e.data.is_bind == 1) {
-					console.log('bangding1');
-					bangding({
-						flag: 1,
-						cache_key: obj.cache_key,
-						code: obj.code,
-						iv: obj.iv,
-						encryptedData: obj.encryptedData,
-						step: 1
-					})
-						.then(function(e) {
-							// 获取用户基础信息
-							obj.GetUser();
-							obj.$api.msg(e.msg);
-							obj.$nextTick(function() {
-								obj.ToIndex();
-							});
-						})
-						.catch(e => {
-							console.log(e);
-						});
-				} else {
-					console.log('bangding2');
-					obj.$api.msg(e.msg);
-					// 获取用户基础信息
-					obj.GetUser();
-					obj.$api.msg(e.msg);
-					obj.$nextTick(function() {
-						obj.ToIndex();
-					});
-				}
-			});
-		},
-		GetUser() {
-			// 获取用户基础信息
-			getUserInfo({})
-				.then(({ data }) => {
-					this.setUserInfo(data);
-					console.log(data, 11);
-					console.log(uni.getStorageSync('userInfo'), 55);
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-page,
-.content {
-	height: 100%;
-}
-
-.Mask {
-	position: fixed;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(51, 51, 51, 0.7);
-	.Mask-box {
-		margin: auto;
-		margin-top: 320rpx;
-		padding: 50rpx 30rpx;
-		width: 90%;
-		height: 450rpx;
-		top: 500rpx;
-		left: 10%;
-		background-color: #ffffff;
-		border-radius: 15rpx;
-		.title {
-			text-align: center;
-			font-size: 35rpx;
-			font-weight: 700;
-		}
-		.text {
-			font-size: 30rpx;
-			color: #848484;
-			padding-top: 50rpx;
-		}
-		.btn_box {
-			margin: 70rpx 0 0 0;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-	}
-}
-
-.weixin {
-	// background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
-	background: $base-color;
-	width: 40%;
-	color: #ffffff;
-	border-radius: 50rpx;
-	border: none;
-	margin: 0 20rpx;
-}
-.bg-img,
-.logo-img-box {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.logo-img {
-	margin-top: 20vh;
-	margin-left: 176rpx;
-	width: 385rpx;
-	height: 394rpx;
-}
-.userInfo {
-	margin: 0 100rpx;
-	margin-top: 50rpx;
-	color: #ffffff;
-	border-radius: 99rpx;
-	background-color: $base-color !important;
-}
+<template>
+	<view class="content">
+		<!-- #ifdef MP -->
+		<image class="bg-img" ：src="/static/img/img09.png" mode=" scaleToFill"></image>
+		<view class="logo-img-box">
+			<image class="logo-img" src="/static/img/img10.png" mode=" aspectFit"></image>
+			<button class="userInfo" type="warn" open-type="getUserInfo" @getuserinfo="userInfoData">
+				<text class="iconfont iconweixin"></text>
+				<text>微信授权登录</text>
+			</button>
+		</view>
+		<!-- #endif -->
+		<view class="Mask" v-show="MaskShow">
+			<view class="Mask-box">
+				<view class="title">申请获取您的手机号</view>
+				<view class="text">为了方便您的取货和我们的送货，并获取更多优惠活动,需要您的手机授权</view>
+				<view class="btn_box">
+					<button class="weixin" @click="ToIndex()">取消</button>
+					<button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">手机号授权</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+// #ifdef H5
+import { loginWinxin } from '@/utils/wxAuthorized';
+// #endif
+// #ifdef MP-WEIXIN
+import { wechatMpAuth } from '@/api/wx';
+// #endif
+import { mapMutations } from 'vuex';
+import { getUserInfo, bangding } from '@/api/login.js';
+export default {
+	data() {
+		return {
+			userInfo: {}, //授权用户信息
+			code: '', //授权code
+			loding: false, //判断是否在点击中
+			MaskShow: false // 手机号授权弹窗
+		};
+	},
+	onLoad(option) {
+		this.loadData();
+	},
+	methods: {
+		loadData() {
+			// #ifdef H5
+			loginWinxin();
+			// #endif
+		},
+		// #ifndef H5
+		// 用户确认授权
+		userInfoData(e) {
+			const that = this;
+			// #ifdef MP-WEIXIN
+			if (!this.loding) {
+				uni.showModal({
+					title: '温馨提示',
+					content: '亲，授权微信登录后才能正常使用小程序功能',
+					success: res => {
+						if (res.confirm) {
+							wx.getUserProfile({
+								desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+								success: res => {
+									that.userInfo = res;
+									that.loadMp();
+								},
+								fail: err => {
+									uni.showToast({
+										title: '您拒绝了请求,不能正常使用小程序',
+										icon: 'error',
+										duration: 2000
+									});
+									return;
+								}
+							});
+						} else if (res.cancel) {
+							//如果用户点击了取消按钮
+							uni.showToast({
+								title: '您拒绝了请求,不能正常使用小程序',
+								icon: 'error',
+								duration: 2000
+							});
+							return;
+						}
+					}
+				});
+			}
+			// #endif
+		},
+		// #endif
+		// #ifdef MP-WEIXIN
+		loadMp(option) {
+			let obj = this;
+			obj.loding = true;
+			// 获取登录授权页数据
+			let user = obj.userInfo;
+			// 获取推广人id
+			let spread_spid = uni.getStorageSync('spread') || '';
+			// let spread_code = uni.getStorageSync('spread_code') || '';
+			uni.showLoading({
+				title: '授权中',
+				mask: true
+			});
+			wx.login({
+				success(e) {
+					wechatMpAuth({
+						code: e.code,
+						iv: user.iv,
+						encryptedData: user.encryptedData,
+						spread_spid: spread_spid,
+						// #ifdef MP
+						spread_code: spread_code
+						// #endif
+					})
+						.then(({ data }) => {
+							obj.loding = false;
+							obj.wchatAuth(data);
+							console.log(data);
+						})
+						.catch(e => {
+							obj.loding = false;
+							uni.hideLoading();
+						});
+				},
+				fill: function(e) {
+					obj.loding = false;
+					console.log(e);
+				}
+			});
+		},
+		wchatAuth(data) {
+			let obj = this;
+			// 保存token
+			uni.setStorageSync('token', data.token);
+			// 获取用户基础信息
+			getUserInfo({})
+				.then(e => {
+					uni.hideLoading();
+					obj.login();
+					// 保存返回用户数据
+					obj.setUserInfo(e.data);
+					obj.ToIndex();
+					// if (e.data.phone == null || !e.data.phone ) {
+					// 	obj.MaskShow = true;
+					// } else {
+					// 	obj.ToIndex();
+					// }
+				})
+				.catch(e => {
+					uni.hideLoading();
+				});
+		},
+		// #endif
+		ToIndex() {
+			let obj = this;
+			let ur = uni.getStorageSync('present') || '/pages/index/index';
+			// 用于处理缓存bug
+			if (ur == 'pages/product/product') {
+				ur = '/pages/index/index';
+			}
+			uni.switchTab({
+				url: ur,
+				fail(e) {
+					uni.navigateTo({
+						url: ur,
+						fail(e) {
+							uni.navigateTo({
+								url: '/pages/index/index'
+							});
+						}
+					});
+				}
+			});
+		},
+		// 绑定手机号
+		PhoneNumber(e) {
+			let obj = this;
+			obj.MaskShow = false;
+			(obj.iv = e.detail.iv), (obj.encryptedData = e.detail.encryptedData);
+
+			uni.setStorageSync('code', obj.code);
+			bangding({
+				flag: 1,
+				cache_key: obj.cache_key,
+				code: obj.code,
+				iv: obj.iv,
+				encryptedData: obj.encryptedData
+			}).then(function(e) {
+				if (e.data.is_bind == 1) {
+					console.log('bangding1');
+					bangding({
+						flag: 1,
+						cache_key: obj.cache_key,
+						code: obj.code,
+						iv: obj.iv,
+						encryptedData: obj.encryptedData,
+						step: 1
+					})
+						.then(function(e) {
+							// 获取用户基础信息
+							obj.GetUser();
+							obj.$api.msg(e.msg);
+							obj.$nextTick(function() {
+								obj.ToIndex();
+							});
+						})
+						.catch(e => {
+							console.log(e);
+						});
+				} else {
+					console.log('bangding2');
+					obj.$api.msg(e.msg);
+					// 获取用户基础信息
+					obj.GetUser();
+					obj.$api.msg(e.msg);
+					obj.$nextTick(function() {
+						obj.ToIndex();
+					});
+				}
+			});
+		},
+		GetUser() {
+			// 获取用户基础信息
+			getUserInfo({})
+				.then(({ data }) => {
+					this.setUserInfo(data);
+					console.log(data, 11);
+					console.log(uni.getStorageSync('userInfo'), 55);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page,
+.content {
+	height: 100%;
+}
+
+.Mask {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(51, 51, 51, 0.7);
+	.Mask-box {
+		margin: auto;
+		margin-top: 320rpx;
+		padding: 50rpx 30rpx;
+		width: 90%;
+		height: 450rpx;
+		top: 500rpx;
+		left: 10%;
+		background-color: #ffffff;
+		border-radius: 15rpx;
+		.title {
+			text-align: center;
+			font-size: 35rpx;
+			font-weight: 700;
+		}
+		.text {
+			font-size: 30rpx;
+			color: #848484;
+			padding-top: 50rpx;
+		}
+		.btn_box {
+			margin: 70rpx 0 0 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+	}
+}
+
+.weixin {
+	// background: linear-gradient(90deg, rgba(36, 214, 78, 1), rgba(45, 187, 89, 1));
+	background: $base-color;
+	width: 40%;
+	color: #ffffff;
+	border-radius: 50rpx;
+	border: none;
+	margin: 0 20rpx;
+}
+.bg-img,
+.logo-img-box {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.logo-img {
+	margin-top: 20vh;
+	margin-left: 176rpx;
+	width: 385rpx;
+	height: 394rpx;
+}
+.userInfo {
+	margin: 0 100rpx;
+	margin-top: 50rpx;
+	color: #ffffff;
+	border-radius: 99rpx;
+	background-color: $base-color !important;
+}
 </style>