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