Merge pull request '邓洁 : 区域下拉框数据获取及完善定位功能' (#43) from dj into master

Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/43

components/DropDown/DropDown.vue

@@ -1,26 +1,21 @@
 <template>
 	<view class="container">
-		<view class="tabs-bg"/>
+		<view class="tabs-bg" />
 		<view class="tabs">
-			<view
+			<view class="title-view" v-for="(item, index) in title" :key="item" @click="changeActiveIndex(index)"
-				class="title-view"
+				:class="{isActive: activeIndex === index}">
-				v-for="(item, index) in title"
-				:key="item"
-				@click="changeActiveIndex(index)"
-				:class="{isActive: activeIndex === index}"
-			>
 				<text>{{item}}</text>
 				<view class="arrow" v-if="activeIndex !== index">
-					<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
+					<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx" />
 				</view>
 				<view class="arrow" v-if="activeIndex === index">
-					<u-image src="/static/dropdown/dp_icon_hlxia.png" width="14rpx" height="11rpx"/>
+					<u-image src="/static/dropdown/dp_icon_hlxia.png" width="14rpx" height="11rpx" />
 				</view>
 
 			</view>
 		</view>
 		<view class="item-border">
-			<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop"/>
+			<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop" :type="'region'" />
 		</view>
 	</view>
 </template>
@@ -31,21 +26,26 @@
 	 */
 	import DropDownItem from "./DropDownItem.vue"
 	export default {
-		name:"DropDown",
+		name: "DropDown",
 		components: {
 			DropDownItem
 		},
 		props: {
 			postlist: {
-				type:Array,
+				type: Array,
-				default(){
+				default () {
-					return	[['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
+					return [
+						['全部', '餐饮美食', '百货超市', '美容美发'],
+						['区域1', '区域2', '区域3', '区域4'],
+						['100m2', '200m2', '300m2'],
+						['附近的', '最新发布的', '其他']
+					]
 				}
 			}
 		},
 		data() {
 			return {
-				title: ['行业','区域','面积','筛选'],
+				title: ['行业', '区域', '面积', '筛选'],
 				activeIndex: -1,
 				// postlist: [['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
 			};
@@ -55,29 +55,33 @@
 				return this.postlist[this.activeIndex]
 			}
 		},
+		created() {
+			this.postlist[1]=JSON.parse(uni.getStorageSync('regionList'))
+		},
 		methods: {
-			changeActiveIndex(index){
+			changeActiveIndex(index) {
-				if(this.activeIndex === index){
+				if (this.activeIndex === index) {
 					this.activeIndex = -1;
-				}else 
+				} else
 					this.activeIndex = index
 			},
 			cancelDrop() {
 				console.log("取消遮罩");
 				this.activeIndex = -1;
 			}
-		},
+		}
-		
 	}
 </script>
 
 <style lang="scss" scoped>
-	.isActive{
+	.isActive {
 		color: #CC3333;
 	}
-	.container{
+
+	.container {
 		margin-top: 10px;
 		position: relative;
+
 		.tabs-bg {
 			position: absolute;
 			background-color: $uni-bg-color-grey;
@@ -86,7 +90,8 @@
 			transform: translateY(-20rpx);
 			z-index: 2;
 		}
-		.tabs{
+
+		.tabs {
 			background-color: #fff;
 			height: 100rpx;
 			display: flex;
@@ -94,8 +99,10 @@
 			position: relative;
 			z-index: 3;
 		}
+
 		.title-view {
 			display: flex;
+
 			>text {
 				font-size: 14px;
 				display: flex;
@@ -103,6 +110,7 @@
 				justify-content: center;
 			}
 		}
+
 		.arrow {
 			margin-left: 8rpx;
 			display: flex;
@@ -110,7 +118,8 @@
 			justify-content: center;
 		}
 	}
-	.item-border{
+
+	.item-border {
 		position: absolute;
 		width: 100%;
 		height: 100%;

components/DropDown/DropDownItem.vue

@@ -1,14 +1,12 @@
 <template>
-	<view class="root">
+	<view>
-		<view class="mask" @click="handleMask"/>
+		<view class="root">
-		<view class="list-container">
+			<view class="mask" @click="handleMask"></view>
-			<view 
+			<view class="list-container">
-				class="item"
+				<view class="item" v-for="(item,index) in list" :class="{isActive: activeIndex === index}"
-				v-for="(item,index) in list"
+					@click="handleActive(index)">
-				:class="{isActive: activeIndex === index}"
+					<text class="list-text">{{item}}</text>
-				@click="handleActive(index)"
+				</view>
-			>
-				<text class="list-text">{{item}}</text>
 			</view>
 		</view>
 	</view>
@@ -19,58 +17,66 @@
 		props: {
 			list: {
 				type: Array,
-				default(){
+				default () {
-					return	[]
+					return []
+				}
+			},
+			type: {
+				type: String,
+				default () {
+					return ''
 				}
 			}
 		},
-		data(){
+		data() {
-			return{
+			return {
-				activeIndex:-1
+				activeIndex: -1
 			}
 		},
 		methods: {
-		  handleMask() {
+			handleMask() {
-		    this.$emit('cancelDrop');
+				this.$emit('cancelDrop');
-		  },
+			},
-		  async handleActive(index) {
+			async handleActive(index) {
-		    this.activeIndex = index;
+				this.activeIndex = index;
-		    // 设置一个定时器，等待200毫秒
+				// 设置一个定时器，等待200毫秒
-		    const delayPromise = this.delay(200);
+				const delayPromise = this.delay(200);
-		    // 等待定时器完成
+				// 等待定时器完成
-		    await delayPromise;
+				await delayPromise;
-		    this.handleMask();
+				this.handleMask();
-		  },
+			},
-		  delay(ms) {
+			delay(ms) {
-		    return new Promise((resolve) => {
+				return new Promise((resolve) => {
-		      // 设置一个定时器，并将定时器的ID存储在this.timerId中
+					// 设置一个定时器，并将定时器的ID存储在this.timerId中
-		      this.timerId = setTimeout(() => {
+					this.timerId = setTimeout(() => {
-		        resolve();
+						resolve();
-		        // 清除定时器
+						// 清除定时器
-		        clearTimeout(this.timerId);
+						clearTimeout(this.timerId);
-		      }, ms);
+					}, ms);
-		    });
+				});
-		  },
+			},
 		},
 
 	}
 </script>
 
 <style lang="scss" scoped>
-	.isActive{
+	.isActive {
 		color: #CC3333;
 	}
-	.mask{
+
-	    position: fixed;
+	.mask {
-	    top: 0;
+		position: fixed;
-	    left: 0;
+		top: 0;
-	    width: 100%;
+		left: 0;
-	    height: 100%;
+		width: 100%;
-	    background-color: #000;
+		height: 100%;
-		-webkit-backdrop-filter:saturate(150%) blur(8px);
+		background-color: #000;
-		background-color:rgba(0,0,0,.3);
+		-webkit-backdrop-filter: saturate(150%) blur(8px);
+		background-color: rgba(0, 0, 0, .3);
 		z-index: 20;
 	}
+
 	.root {
 		position: absolute;
 		top: 0;
@@ -80,13 +86,15 @@
 		background-color: #fff;
 		position: absolute;
 		z-index: 1;
+
 		.list-container {
 			position: relative;
 			background-color: #fff;
 			width: 100%;
 			z-index: 21;
-			
 			border-radius: 0px 0px 20px 20px;
+			height: 320rpx;
+			overflow-y: auto;
 			.item {
 				border-top: 1px solid #EEEEEE;
 				font-weight: 500;

components/InputAndSwiper/InputAndSwiper.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script>
-	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
 	export default {
 		name: "inputAndSwiper",
 		props: {
@@ -39,7 +38,7 @@
 		},
 		data() {
 			return {
-				position: ''
+				position: uni.getStorageSync('city')+uni.getStorageSync('district').slice(0, 2)
 			};
 		},
 		options: {
@@ -47,92 +46,11 @@
 		},
 		created() {
 			if (this.type !== '0') {
-				this.open()
+				// this.open()
 			}
 		},
 		methods: {
-			getUserLocation() {
+		
-				var that = this
-				let qqmapsdk = new QQMapWX({
-					key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
-				});
-				uni.getFuzzyLocation({
-					type: 'wgs84',
-					success(res) {
-						console.log('res.latitude', res.latitude);
-						console.log('res.longitude', res.longitude);
-						qqmapsdk.reverseGeocoder({
-							location: {
-								latitude: res.latitude,
-								longitude: res.longitude
-							},
-							success: (re) => {
-								console.log("解析地址成功", re);
-								console.log(re.result.ad_info.city);
-								console.log(re.result.ad_info.district);
-								let city = re.result.ad_info.city
-								let district = re.result.ad_info.district
-								that.position = city.slice(0, 2) + district.slice(0, 2)
-							},
-							fail: (re) => {
-								console.log(re, '失败信息');
-							}
-						})
-					},
-					fail(err) {
-						console.log("获取经纬度失败", err);
-					},
-				});
-			},
-			//提示用户开启定位服务
-			open() {
-				var that = this
-				uni.authorize({
-					scope: 'scope.userFuzzyLocation',
-					success: function() {
-						console.log('授权成功');
-						that.getUserLocation()
-					},
-					fail: function() {
-						console.log('授权失败');
-						uni.showModal({
-							content: '检测到您没打开获取信息功能权限，是否去设置打开？',
-							confirmText: "确认",
-							cancelText: '取消',
-							success: (res) => {
-								if (res.confirm) {
-									uni.openSetting({
-										success: (res) => {
-											console.log(res);
-											that.getUserLocation();
-										}
-									})
-								} else {
-									console.log('取消');
-									return false;
-								}
-							}
-						})
-						return false;
-					}
-				})
-				// wx.getSetting({
-				// 	success: (res) => {
-				// 		if (res.authSetting['scope.userLocation'] === false) {
-				// 			wx.showModal({
-				// 				title: '提示',
-				// 				content: '请打开定位服务后重新进入该页面',
-				// 				confirmText: '去设置',
-				// 				success: (res) => {
-				// 					if (res.confirm) {
-				// 						wx.openSetting()
-				// 					}
-				// 				}
-				// 			})
-				// 		}
-				// 	}
-				// })
-			}
 		}
 	}
 </script>

pages/index/index.vue

@@ -27,6 +27,8 @@
 	import HomeNoticeBar from "./HomeMainContent/HomeNoticeBar.vue"
 	import HomeNavCard from "./HomeMainContent/HomeNavCard.vue"
 	import Statistics from "./HomeMainContent/Statistics.vue"
+	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
+	import aesEncrypt1 from "@/utils/aesEncrypt.js"
 	export default {
 		components: {
 			HomeNavCard,
@@ -45,10 +47,13 @@
 			this.getBanner()
 			this.getNotice()
 			this.getStat()
+			this.open()
+			this.getRegionList()
 		},
 		methods: {
 			getBanner(){
 				this.$api.getBanner().then(res=>{  
+					console.log('lunbo',res.data.data);
 					this.swiperList = res.data.data.map(item=>item.img)
 				})
 			},
@@ -61,10 +66,101 @@
 				this.$api.getStat().then(res=>{
 					this.statisticsNum = res.data.data
 				})
+			},
+			getRegionList() {
+				var that = this
+				uni.request({
+					url: 'https://apis.map.qq.com/ws/district/v1/getchildren?id=' + uni.getStorageSync('city_code') + '&key=' +
+						that.$api.key,
+					success(res) {
+						uni.setStorageSync('regionList', JSON.stringify(res.data.result[0].map(item => item.fullname)));
+					},
+					fail(err) {
+						console.log('请求区域失败：', err);
+					}
+				})
+			},
+			getUserLocation() {
+				var that = this
+				let qqmapsdk = new QQMapWX({
+					key: that.$api.key
+				});
+				uni.getFuzzyLocation({
+					type: 'wgs84',
+					success(res) {
+						console.log('res.latitude', res.latitude);
+						console.log('res.longitude', res.longitude);
+						uni.setStorageSync('latitude', res.latitude);
+						uni.setStorageSync('longitude', res.longitude);
+						qqmapsdk.reverseGeocoder({
+							location: {
+								latitude: res.latitude,
+								longitude: res.longitude
+							},
+							success: (re) => {
+								console.log("解析地址成功", re);
+								console.log(re.result.ad_info.city);
+								console.log(re.result.ad_info.district);
+								let city = re.result.ad_info.city
+								let district = re.result.ad_info.district
+								console.log('city-code',re.result.ad_info.city_code.substring(3));
+								uni.setStorageSync('city_code', re.result.ad_info.city_code.substring(3));
+								uni.setStorageSync('city', city.slice(0, 2));
+								uni.setStorageSync('district', district);
+								// that.position = city.slice(0, 2) + district.slice(0, 2)
+							},
+							fail: (re) => {
+								console.log(re, '失败信息');
+							}
+						})
+					},
+					fail(err) {
+						console.log("获取经纬度失败", err);
+					},
+				});
+			},
+			//提示用户开启定位服务
+			open() {
+				var that = this
+				uni.getSetting({
+				  success: function (res) {
+				    if (res.authSetting['scope.userFuzzyLocation']) {
+				      console.log('用户已经授权定位权限');
+				    } else {
+				      console.log('用户未授权定位权限');
+							uni.authorize({
+								scope: 'scope.userFuzzyLocation',
+								success: function() {
+									console.log('授权成功');
+									that.getUserLocation()
+								},
+								fail: function() {
+									console.log('授权失败');
+									uni.showModal({
+										content: '检测到您没打开获取信息功能权限，是否去设置打开？',
+										confirmText: "确认",
+										cancelText: '取消',
+										success: (res) => {
+											if (res.confirm) {
+												uni.openSetting({
+													success: (res) => {
+														console.log(res);
+														that.getUserLocation();
+													}
+												})
+											} else {
+												console.log('取消');
+												return false;
+											}
+										}
+									})
+									return false;
+								}
+							})
+				    }
+				  }
+				});
 			}
-		},
-		computed: {
-
 		}
 	}
 </script>

pages/publish/publishAddress/publishAddress.vue

@@ -9,7 +9,7 @@
 					<view class="arrow-icon">
 						<u-icon name="arrow-right" size="30px"></u-icon>
 					</view>
-					<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
+					<u-picker :columns="regionColumns" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
 				</u-form-item>
 				<u-form-item label="业态" label-position="top" border-bottom="true" label-width="100%">
 					<text @click="show3 = true" class="checktext">请选择行业业态</text>
@@ -48,6 +48,7 @@
 	export default {
 		data() {
 			return {
+				regionColumns:[JSON.parse(uni.getStorageSync('regionList'))]||[],
 				ShopInfomation:{
 				city:'',
 				area:'',

pages/publish/publishInvestment/publishInvestment.vue

@@ -14,7 +14,7 @@
 					<view class="arrow-icon">
 						<u-icon name="arrow-right" size="30px"></u-icon>
 					</view>
-					<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
+					<u-picker :columns="regionColumns" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
 				</u-form-item>
 				<u-form-item label="项目地址" label-position="top" border-bottom="true" label-width="100%">
 					<u-input v-model="form.name" placeholder="请输入店铺地址" placeholder-class="input-class" border="none"></u-input>
@@ -54,6 +54,7 @@
 	export default {
 		data() {
 			return {
+				regionColumns:[JSON.parse(uni.getStorageSync('regionList'))]||[],
 				ShopInfomation:{
 				city:'',
 				area:'',

pages/publish/publishRent/publishRent.vue

@@ -14,7 +14,7 @@
 					<view class="arrow-icon">
 						<u-icon name="arrow-right" size="30px"></u-icon>
 					</view>
-					<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
+					<u-picker :columns="regionColumns" :show="show1" :closeOnClickOverlay="true" @close="show1 = false"></u-picker>
 				</u-form-item>
 				<u-form-item label="地址" label-position="top" border-bottom="true" >
 					<u-input v-model="form.name" placeholder="请输入店铺地址" placeholder-class="input-class" border="none"></u-input>
@@ -52,6 +52,7 @@
 	export default {
 		data() {
 			return {
+				regionColumns:[JSON.parse(uni.getStorageSync('regionList'))]||[],
 				ShopInfomation:{
 				city:'',
 				area:'',

pages/publish/publishTransfer/publishTransfer.vue

@@ -14,7 +14,7 @@
 					<view class="arrow-icon">
 						<u-icon name="arrow-right" size="30px"></u-icon>
 					</view>
-					<u-picker mode="region" :show="show1" :closeOnClickOverlay="true" @close="show1 = false" v-model="form.region"></u-picker>
+					<u-picker :columns="regionColumns" :show="show1" :closeOnClickOverlay="true" @close="show1 = false" v-model="form.region"></u-picker>
 				</u-form-item>
 				<u-form-item label="地址" label-position="top" border-bottom="true" prop="place">
 					<u-input v-model="form.place" placeholder="请输入店铺地址" placeholder-class="input-class" border="none" ></u-input>
@@ -62,6 +62,7 @@
 	export default {
 		data() {
 			return {
+				regionColumns:[JSON.parse(uni.getStorageSync('regionList'))]||[],
 				ShopInfomation:{
 				city:'',
 				area:'',

service/request.js

@@ -128,6 +128,7 @@ const toast = {
 }
 const apiService = {
 	serverHost,
+	key:'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB',
 	uploadImgUrl: serverHost + `/upload/image/`,
 	//登录接口
 	login(data) {
@@ -150,13 +151,6 @@ const apiService = {
 			resolve(service.get(url))
 		})
 	},
-	// 展示用户信息
-	getUserInfo() {
-		const url = '/user'
-		return new Promise((resolve, reject) => {
-			resolve(service.get(url))
-		})
-	},
 	// 获取详情
 	getProductDetail(id) {
 		const url = `/home/pdetail/?productId=${id}`