页面开发，获取手机号码

2022-05-24 18:03:36 +08:00 · 2022-05-24 18:03:36 +08:00 · 8afda7d17c
parent 139b0d59fd
commit 8afda7d17c
9 changed files with 287 additions and 111 deletions
--- a/common/js/data.js
+++ b/common/js/data.js
@ -9,8 +9,8 @@ const moduleBarInfos = [{
 }, {
 	id: 2,
 	cuIcon: 'shop',
-	pageCode: 'shopingMallPage',
-	name: '商城'
+	pageCode: 'supplyChainPage',
+	name: '供应链'
 }, {
 	id: 3,
 	cuIcon: 'message',
--- a/common/js/request.js
+++ b/common/js/request.js
@ -9,6 +9,7 @@ export default {
 				// request 触发前拼接 url 
 				args.url = 'https://www.opsoul.com' + args.url;
 				// args.url = 'http://127.0.0.1:80' + args.url;
+				// args.url = 'http://10.45.137.214:80' + args.url;
 				if (args.data) {
 					args.data.deptId = globalData.deptId;
 					args.data.from = globalData.from;
@ -121,6 +122,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/addWorker',
@ -139,6 +163,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: '/worker/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({
+				workerId: userInfo.workerId,
+				account: phoneRes.data,
+				phone: phoneRes.data
+			})
+			return true;
+		}
+	},
 	getCurUserInfo() {
 		let userProfile = uni.getStorageSync('userProfile');
 		return userProfile;
--- a/pages.json
+++ b/pages.json
@ -33,8 +33,6 @@
 		"root": "pages/my/",
 		"pages": [{
 			"path": "new-serv"
-		}, {
-			"path": "goods-manage"
 		}, {
 			"path": "master-occupancy"
 		}, {
--- a/pages/index/goods-manage.vue
+++ b/pages/index/goods-manage.vue
@ -1,10 +1,10 @@
 <template>
 	<view>
 		<!-- 顶部操作条 -->
-		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
-			<block slot="backText">返回</block>
+		<cu-custom :bgColor="'bg-main-color'">
 			<block slot="content">商品管理</block>
 		</cu-custom>
+		<view class="margin-bottom-with-2bar">
 			<!-- 展示商品/服务tab -->
 			<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
 				<!-- tab header -->
@ -24,7 +24,7 @@
 				</view>
 			</view>
 			<!-- tab content -->
-		<view class="margin-bottom-with-bar">
+			<view>
 				<view class="padding bg-white margin-top-sm margin-lr-sm name-card" v-for="(good, index) in goodsList">
 					<view class="flex justify-start">
 						<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
@ -53,12 +53,13 @@
 				</view>
 			</view>
 			<!-- 底部操作栏 -->
-		<view class="cu-bar tabbar border shop fixed-bottom-bar bg-white">
+			<view class="padding-tb-sm flex justify-around padding-tb-sm fixed-bottom-bar-with-bar bg-back">
 				<button class="cu-btn bg-main-color lg shadow-blur margin-left-xs" @click="addEditGood(null)">新增服务</button>
 				<button class="cu-btn bg-main-color lg shadow-blur">优惠券</button>
 				<button class="cu-btn bg-main-color lg shadow-blur">暂停售卖</button>
 				<button class="cu-btn bg-main-color lg shadow-blur margin-right-xs" data-modal="communityModal" @tap="showModal">社区</button>
 			</view>
+		</view>
 		<!-- 模态框 -->
 		<view class="cu-modal" :class="communityModal?'show':''">
 			<view class="cu-dialog">
@ -98,6 +99,7 @@
 	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
 	
 	export default {
+		name: 'goods-manage',
 		components: {
 			myUniCombox
 		},
@ -128,12 +130,14 @@
 				}
 			}
 		},
-		onLoad() {
+		onReady() {
 			this.loadData();
 		},
 		methods: {
 			async loadData() {
 				this.goodsList = await this.$api.data('goodsList');
+			},
+			async loadAreaObj() {
 				this.areaObj = await this.$api.data('areaObj');
 				this.provinceList = this.areaObj.provinceList;
 				this.cityList = this.areaObj.cityList;
@ -146,7 +150,12 @@
 				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
 			},
 			showModal(e) {
-				this[e.currentTarget.dataset.modal] = true;
+				let modalName = e.currentTarget.dataset.modal;
+				this[modalName] = true;
+				if (modalName === 'communityModal') {
+					this.loadAreaObj();
+				}
+				this[modalName] = true;
 			},
 			hideModal(e) {
 				this[e.currentTarget.dataset.modal] = false;
@ -220,4 +229,17 @@
 		display: inline-block;
 		width: calc((100vw - 158rpx)/4);
 	}
+	
+	.fixed-bottom-bar-with-bar {
+		position: fixed;
+		bottom: calc(100rpx + constant(safe-area-inset-bottom) / 2);
+		bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
+		z-index: 98;
+		width: 100%;
+	}
+	
+	.margin-bottom-with-2bar {
+		margin-bottom: calc((100rpx + constant(safe-area-inset-bottom) / 2) * 2);
+		margin-bottom: calc((100rpx + env(safe-area-inset-bottom) / 2) * 2);
+	}
 </style>
--- a/pages/index/index-home.vue
+++ b/pages/index/index-home.vue
@ -1,11 +1,13 @@
 <template>
 	<view>
-		<view class="padding bg-gradual-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
+		<view class="padding bg-gradual-color"
+			:style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'">
 			<!-- 个人信息栏 -->
 			<view class="flex justify-between padding-bottom align-center solid-bottom">
 				<view class="flex justify-start align-center">
 					<view class="cu-avatar round"
-						:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.workerLogoUrl + ');'"></view>
+						:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.workerLogoUrl + ');'">
+					</view>
 					<view class="margin-lr-sm">
 						<view class="text-xl margin-bottom-xs">{{curUserInfo.name}}</view>
 						<!-- <view class="padding-xs text-sm">
@ -71,14 +73,14 @@
 				</view>
 			</view>
 			<!-- 功能模块 -->
-			<view class="margin-lr-sm margin-top margin-bottom-with-bar">
+			<view class="margin-lr-sm margin-top">
 				<view class="text-lg">服务中心</view>
-				<view class="nav-list">
-					<navigator hover-class="none" :url="item.pageUrl" class="nav-li margin-top"
-						navigateTo :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
+				<view class="nav-list-panel float-clear clearfix">
+					<navigator hover-class="none" :url="item.pageUrl" class="nav-li" navigateTo
+						:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
 						v-for="(item,index) in servModules " :key="index">
-						<view class="nav-title">{{item.title}}</view>
-						<view class="nav-name">{{item.name}}</view>
+						<view :class="index === 0 ? 'text-xxl' : 'text-xl'">{{item.title}}</view>
+						<!-- <view class="nav-name">{{item.name}}</view> -->
 						<text :class="'cuIcon-' + item.cuIcon"></text>
 					</navigator>
 				</view>
@ -103,14 +105,28 @@
 		<!-- 强制要求用户授权登录的弹窗 -->
 		<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>
 			</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>

@ -159,7 +175,8 @@
 				curUserInfo: {},
 				myInfo: {},
 				isShowSteer: false,
-				isAuthWxLoginModal: false
+				isAuthWxLoginModal: false,
+				isAuthWxPhoneModal: false
 			}
 		},
 		onReady() {
@ -167,10 +184,20 @@
 		},
 		methods: {
 			async loadData() {
-				this.curUserInfo = this.$request.getCurUserInfo();
-				console.log(this.curUserInfo)
-				this.isAuthWxLoginModal = this.curUserInfo ? false : true;
-				if (!this.isAuthWxLoginModal) {
+				// 更新缓存中的userInfo
+				let res = await this.$request.storageExistUser();
+				// 获取缓存中的userInfo
+				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.curUserInfo = curUserInfo;
+
 				this.myInfo = await this.$api.data('myInfo');
 				this.isShowSteer = !this.myInfo.entryType;
 				let newServModules = this.servModules.concat();
@ -181,10 +208,10 @@
 						hasCheckedRule: this.myInfo.hasCheckedRule,
 						navigate: true
 					}
-						newServModules[0].pageUrl = '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON.stringify(paramObj));
+					newServModules[0].pageUrl = '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON
+						.stringify(paramObj));
 				}
 				this.servModules = newServModules;
-				}
 			},
 			chooseEntryType(typeCode) {

@ -207,6 +234,13 @@
 						this.loadData();
 					}
 				})
+			},
+			getPhoneNumber(e) {
+				this.$request.storagePhoneIntoUserInfo(e.detail.code).then(res => {
+					if (res) {
+						this.loadData();
+					}
+				})
 			}
 		},
 	}
@ -240,8 +274,28 @@
 		font-size: 30rpx !important;
 	}

-	.nav-list>navigator:nth-child(even) {
-		margin-left: 30rpx;
+	.nav-list-panel {
+		font-weight: 300;
+	}
+	
+	.nav-list-panel>navigator:first-child {
+		width: 46%;
+		height: 249rpx;
+		line-height: 195rpx;
+	}
+
+	.nav-li {
+		padding: 30rpx;
+		border-radius: 12rpx;
+		width: 46%;
+		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
+		background-size: cover;
+		background-position: center;
+		position: relative;
+		z-index: 1;
+		height: 116rpx;
+		margin: 10rpx;
+		float: left;
 	}

 	.right-tag {
@ -250,4 +304,13 @@
 		right: -30rpx;
 		border-radius: 40rpx 0 0 40rpx;
 	}
+	
+	.clearfix:after {
+	  visibility: hidden;
+	  display: block;
+	  font-size: 0;
+	  content: " ";
+	  clear: both;
+	  height: 0;
+	}
 </style>
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -1,6 +1,7 @@
 <template>
 	<view>
 		<index v-if="curPageCode === 'indexPage'"></index>
+		<goods-manage v-else-if="curPageCode === 'supplyChainPage'"></goods-manage>
 		<my-home v-else-if="curPageCode === 'myPage'"></my-home>
 		<msg-home v-else-if="curPageCode === 'msgPage'"></msg-home>
 		<module-bar :moduleBarInfos="moduleBarInfos"></module-bar>
@ -12,13 +13,15 @@
 	import index from '@/pages/index/index-home.vue';
 	import myHome from '@/pages/index/my-home.vue';
 	import msgHome from '@/pages/index/msg-home.vue';
+	import goodsManage from '@/pages/index/goods-manage.vue';

 	export default {
 		components: {
 			moduleBar,
 			index,
 			myHome,
-			msgHome
+			msgHome,
+			goodsManage
 		},
 		data() {
 			return {
@ -35,6 +38,14 @@
 		},
 		methods: {
 			async loadData() {
+				// uni.getSystemInfo({
+				// 	success: function(res) {
+				// 		console.log('DPR：' + res.pixelRatio)
+				// 		console.log('宽度：' + res.screenWidth)
+				// 		console.log('高度：' + res.screenHeight)
+				// 	}
+				// })
+
 				this.moduleBarInfos = await this.$api.data('moduleBarInfos');
 			},
 			bindEvent() {
--- a/pages/index/my-home.vue
+++ b/pages/index/my-home.vue
@ -78,10 +78,6 @@
 					name: '师傅入驻',
 					icon: 'profile',
 					pageUrl: '/pages/my/master-occupancy'
-				}, {
-					name: '商品管理',
-					icon: 'goods',
-					pageUrl: '/pages/my/goods-manage'
 				}, {
 					name: '个人信息',
 					icon: 'lock',
--- a/pages/my/new-serv.vue
+++ b/pages/my/new-serv.vue
@ -19,7 +19,7 @@
 				<view class="cu-form-group">
 					<view class="title">选择类目</view>
 					<picker :mode="'multiSelector'" @change="categoryChange" @columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'" :range="categoryList">
-						<input class="line-input radius-input" :value="formData.category && formData.category.length ? formData.category[0].goodsCategoryName + '-' + formData.category[1].goodsCategoryName + '-' + formData.category[2].goodsCategoryName : ''"
+						<input disabled class="line-input radius-input" :value="formData.category && formData.category.length ? formData.category[0].goodsCategoryName + '-' + formData.category[1].goodsCategoryName + '-' + formData.category[2].goodsCategoryName : ''"
 							placeholder="请选择类目"></input>
 					</picker>
 				</view>
@ -84,7 +84,7 @@
 				<view class="cu-form-group">
 					<view class="title">上架区域</view>
 					<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="regionMultiIndex" :range-key="'areaName'" :range="regionList">
-						<input class="line-input radius-input" :value="formData.region && formData.region.length ? formData.region[0].areaName + '-' + formData.region[1].areaName : ''"
+						<input disabled class="line-input radius-input" :value="formData.region && formData.region.length ? formData.region[0].areaName + '-' + formData.region[1].areaName : ''"
 							placeholder="请选择区域"></input>
 					</picker>
 				</view>
@ -103,7 +103,26 @@
 			</view>
 			<view class="cu-form-group">
 				<view class="title">上门费</view>
-				<input name="doorPrice" :value="formData.doorPrice" :v-model="formData.doorPrice" placeholder="单位:元/次"></input>
+				<input type="digit" name="doorPrice" :value="formData.doorPrice" :v-model="formData.doorPrice" placeholder="单位:元/次"></input>
+			</view>
+			<view class="cu-bar bg-white solid-top">
+				<view class="action text-black">
+					详情图上传
+				</view>
+			</view>
+			<view class="cu-form-group">
+				<view class="grid col-4 grid-square flex-sub">
+					<view class="bg-img" v-for="(item,index) in formData.descImgList" :key="index" @tap="viewImage($event, formData.descImgList)"
+						:data-url="item">
+						<image :src="item" mode="aspectFill"></image>
+						<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.descImgList)" :data-index="index">
+							<text class='cuIcon-close'></text>
+						</view>
+					</view>
+					<view class="solids" @tap="chooseImgList($event, 'descImgList')" v-if="formData.descImgList.length<9">
+						<text class='cuIcon-cameraadd'></text>
+					</view>
+				</view>
 			</view>
 			<view class="cu-bar bg-white solid-top">
 				<view class="action text-black">
@ -119,7 +138,7 @@
 							<text class='cuIcon-close'></text>
 						</view>
 					</view>
-					<view class="solids" @tap="chooseImgList" v-if="formData.imgList.length<9">
+					<view class="solids" @tap="chooseImgList($event, 'imgList')" v-if="formData.imgList.length<9">
 						<text class='cuIcon-cameraadd'></text>
 					</view>
 				</view>
@ -167,6 +186,7 @@
 					doorPrice: '',
 					imgList: [],
 					detailDesc: '',
+					descImgList: [],
 					video: {}
 				},
 				categoryList: [],
@ -322,16 +342,16 @@
 					}
 				}
 			},
-			chooseImgList(e) {
+			chooseImgList(e, imgListField) {
 				uni.chooseImage({
 					count: 9, //默认9
 					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 					sourceType: ['album'], //从相册选择
 					success: (res) => {
-						if (this.formData.imgList.length != 0) {
-							this.formData.imgList = this.formData.imgList.concat(res.tempFilePaths)
+						if (this.formData[imgListField].length != 0) {
+							this.formData[imgListField] = this.formData[imgListField].concat(res.tempFilePaths)
 						} else {
-							this.formData.imgList = res.tempFilePaths
+							this.formData[imgListField] = res.tempFilePaths
 						}
 					}
 				});
--- a/style/blue/blue-topic.css
+++ b/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;
+}