odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dengj
2023-11-15 15:49:30 +08:00
parent dd05376541
commit d9d7cb36de
9 changed files with 203 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/DropDown/DropDown.vue
View File

@@ -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%;

106
components/DropDown/DropDownItem.vue
View File

@@ -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;

88
components/InputAndSwiper/InputAndSwiper.vue
View File

@@ -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>

102
pages/index/index.vue
View File

@@ -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>

3
pages/publish/publishAddress/publishAddress.vue
View File

@@ -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:'',

3
pages/publish/publishInvestment/publishInvestment.vue
View File

@@ -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:'',

3
pages/publish/publishRent/publishRent.vue
View File

@@ -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:'',

3
pages/publish/publishTransfer/publishTransfer.vue
View File

@@ -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:'',

8
service/request.js
View File

@@ -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}`