邓洁 : 区域下拉框数据获取及完善定位功能

components/DropDown/DropDown.vue

@@ -1,26 +1,21 @@
 <template>
 	<view class="container">
-		<view class="tabs-bg"/>
+		<view class="tabs-bg" />
 		<view class="tabs">
-			<view
-				class="title-view"
-				v-for="(item, index) in title"
-				:key="item"
-				@click="changeActiveIndex(index)"
-				:class="{isActive: activeIndex === index}"
-			>
+			<view class="title-view" 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,
-				default(){
-					return	[['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
+				type: Array,
+				default () {
+					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){
-				if(this.activeIndex === index){
+			changeActiveIndex(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 class="mask" @click="handleMask"/>
-		<view class="list-container">
-			<view 
-				class="item"
-				v-for="(item,index) in list"
-				:class="{isActive: activeIndex === index}"
-				@click="handleActive(index)"
-			>
-				<text class="list-text">{{item}}</text>
+	<view>
+		<view class="root">
+			<view class="mask" @click="handleMask"></view>
+			<view class="list-container">
+				<view class="item" v-for="(item,index) in list" :class="{isActive: activeIndex === index}"
+					@click="handleActive(index)">
+					<text class="list-text">{{item}}</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -19,80 +17,90 @@
 		props: {
 			list: {
 				type: Array,
-				default(){
-					return	[]
+				default () {
+					return []
+				}
+			},
+			type: {
+				type: String,
+				default () {
+					return ''
 				}
 			}
 		},
-		data(){
-			return{
-				activeIndex:-1
+		data() {
+			return {
+				activeIndex: -1
 			}
 		},
 		methods: {
-		  handleMask() {
-		    this.$emit('cancelDrop');
-		  },
-		  async handleActive(index) {
-		    this.activeIndex = index;
-		    // 设置一个定时器，等待200毫秒
-		    const delayPromise = this.delay(200);
-		    // 等待定时器完成
-		    await delayPromise;
-		    this.handleMask();
-		  },
-		  delay(ms) {
-		    return new Promise((resolve) => {
-		      // 设置一个定时器，并将定时器的ID存储在this.timerId中
-		      this.timerId = setTimeout(() => {
-		        resolve();
-		        // 清除定时器
-		        clearTimeout(this.timerId);
-		      }, ms);
-		    });
-		  },
+			handleMask() {
+				this.$emit('cancelDrop');
+			},
+			async handleActive(index) {
+				this.activeIndex = index;
+				// 设置一个定时器，等待200毫秒
+				const delayPromise = this.delay(200);
+				// 等待定时器完成
+				await delayPromise;
+				this.handleMask();
+			},
+			delay(ms) {
+				return new Promise((resolve) => {
+					// 设置一个定时器，并将定时器的ID存储在this.timerId中
+					this.timerId = setTimeout(() => {
+						resolve();
+						// 清除定时器
+						clearTimeout(this.timerId);
+					}, ms);
+				});
+			},
 		},
 
 	}
 </script>
 
 <style lang="scss" scoped>
-	.isActive{
+	.isActive {
 		color: #CC3333;
 	}
-	.mask{
-	    position: fixed;
-	    top: 0;
-	    left: 0;
-	    width: 100%;
-	    height: 100%;
-	    background-color: #000;
-		-webkit-backdrop-filter:saturate(150%) blur(8px);
-		background-color:rgba(0,0,0,.3);
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #000;
+		-webkit-backdrop-filter: saturate(150%) blur(8px);
+		background-color: rgba(0, 0, 0, .3);
 		z-index: 20;
 	}
+
 	.root {
 		position: absolute;
 		top: 0;
 		width: 100%;
-		
+
 		font-size: 28rpx;
 		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;
 				padding-left: 61rpx;
 				height: 80rpx;
-				
+
 				display: flex;
 				flex-direction: column;
 				justify-content: center;

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>