获取手机号码

common/js/request.js

@@ -7,7 +7,7 @@ export default {
 			invoke(args) {
 				// request 触发前拼接 url 
 				args.url = 'https://www.opsoul.com' + args.url;
-				// args.url = 'http://192.168.2.3:80' + args.url;
+				// args.url = 'http://10.45.137.214:80' + args.url;
 				// args.url = 'http://127.0.0.1:80' + args.url;
 				if (args.data) {
 					args.data.deptId = globalData.deptId;
@@ -121,6 +121,29 @@ export default {
 		uni.setStorageSync('userProfile', userInfo);
 		return true;
 	},
+	async storageExistUser() {
+		uni.clearStorageSync('userProfile');
+		// 获取微信登录凭证
+		const wxLoginRes = await wx.login();
+		// 获取openid
+		const wxAuthRes = await uni.request({
+			url: '/wx/auth',
+			header: {
+				code: wxLoginRes.code
+			}
+		})
+		const openId = wxAuthRes[1].data.data.openid;
+		// 从服务端获取用户信息
+		let wxGetUserRes = await this.qryUserInfo(openId);
+		let userInfo = null;
+		if (wxGetUserRes.data) {
+			userInfo = {
+				...wxGetUserRes.data,
+				wxLoginCode: wxLoginRes.code
+			}
+		}
+		uni.setStorageSync('userProfile', userInfo);
+	},
 	async registerUser(params = {}) {
 		let res = await uni.request({
 			url: '/wx/addUser',
@@ -138,6 +161,43 @@ export default {
 			}
 		})
 		return res[1].data;
+	},
+	async qryUserPhone(code) {
+		let res = await uni.request({
+			url: '/wx/auth/phone',
+			method: 'GET',
+			header: {
+				code: code
+			}
+		})
+		return res[1].data;
+	},
+	async updateUserPhone(params = {}) {
+		let res = await uni.request({
+			url: '/customer/update',
+			method: 'POST',
+			data: params
+		})
+		// 更新用户信息的方法顺便更新本地缓存
+		if (res[1].data.code === 0) {
+			let userInfo = this.getCurUserInfo();
+			userInfo.phone = params.phone;
+			userInfo.account = params.account;
+			uni.setStorageSync('userProfile', userInfo);
+		}
+		return res[1].data;
+	},
+	async storagePhoneIntoUserInfo(code) {
+		let phoneRes = await this.qryUserPhone(code)
+		if (phoneRes && phoneRes.data) {
+			let userInfo = this.getCurUserInfo();
+			this.updateUserPhone({
+				customerId: userInfo.customerId,
+				account: phoneRes.data,
+				phone: phoneRes.data
+			})
+			return true;
+		}
 	},
 	wxLogin() {
 		return wx.login();

pages/index/home.vue

@@ -18,8 +18,8 @@
 			</view>
 			<!-- 区域筛选picker -->
 			<view class="action">
-				<picker :mode="'multiSelector'" @change="regionChange"
+				<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
-					@columnchange="regionColChange" :value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
+					:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
 					<text>{{searchInfo.area && searchInfo.area.length ? searchInfo.area[2].areaName : areaList[2][0].areaName}}</text>
 					<text class="cuIcon-location"></text>
 				</picker>
@@ -78,13 +78,27 @@
 		<!-- 强制要求用户授权登录的弹窗 -->
 		<view class="cu-modal" :class="isAuthWxLoginModal?'show':''">
 			<view class="cu-dialog">
-				<view class="padding-xl">
+				<view class="padding-xl text-left">
-					需先授权微信登录才可正常使用功能
+					<view>需先授权微信登录才可正常使用功能，小程序将获取并使用以下信息：</view>
+					<view>1.微信昵称</view>
+					<view>2.微信头像</view>
 				</view>
 				<view class="cu-bar bg-white">
-					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="authWxLogin">确认授权</view>
+					<view class="action margin-0 flex-sub text-main-color" @tap="authWxLogin">确认授权</view>
 				</view>
 			</view>
+		</view>
+		<!-- 手机号授予 -->
+		<view class="cu-modal" :class="isAuthWxPhoneModal?'show':''">
+			<view class="cu-dialog">
+				<view class="padding-xl">
+					<view>授予小程序绑定微信手机号码的权限</view>
+				</view>
+				<view class="cu-bar bg-white">
+					<button class="action margin-0 flex-sub cu-btn bg-white text-main-color" open-type="getPhoneNumber"
+						@getphonenumber="getPhoneNumber">确认授权</button>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -107,7 +121,8 @@
 				hotGoods: {},
 				discountGoods: {},
 				InputBottom: 0,
-				isAuthWxLoginModal: false,
+				isAuthWxLoginModal: false,
+				isAuthWxPhoneModal: false,
 				searchInfo: {},
 				areaList: [],
 				areaMultiIndex: [0, 0, 0],
@@ -123,12 +138,20 @@
 			this.loadData();
 		},
 		methods: {
-			async loadData() {
+			async loadData() {
-				let curUserInfo = this.$request.getCurUserInfo();
+				// 更新缓存中的userInfo
-				this.isAuthWxLoginModal = curUserInfo ? false : true;
+				let res = await this.$request.storageExistUser();
-				if (this.isAuthWxLoginModal) {
+				// 获取缓存中的userInfo
-					return;
+				let curUserInfo = this.$request.getCurUserInfo();
-				}
+				this.isAuthWxLoginModal = curUserInfo && curUserInfo.openId ? false : true;
+				if (this.isAuthWxLoginModal) {
+					return;
+				}
+				this.isAuthWxPhoneModal = !curUserInfo.phone ? true : false;
+				if (this.isAuthWxPhoneModal) {
+					return;
+				}
+				
 				this.loadRegionList();
 				this.swiperList = await this.$api.data('swiperList');
 				this.categories = await this.$api.data('categories');
@@ -231,6 +254,13 @@
 						this.loadData();
 					}
 				})
+			},
+			getPhoneNumber(e) {
+				this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
+					if (res) {
+						this.loadData();
+					}
+				})
 			}
 		}
 	}

style/blue/blue-topic.css

@@ -46,3 +46,8 @@ radio.main-color.checked .uni-radio-input {
 	color: #0081ff;
 	background-color: #cce6ff;
 }
+
+.cu-modal .cu-bar>.cu-btn.text-main-color {
+	color: #0081ff;
+	height: 100rpx;
+}