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

罗世杰：未完成Dropdown

Browse Source
This commit is contained in:
LuoShijie
2023-11-24 00:42:46 +08:00
parent bcd878f09a
commit 67dd393a7f
3 changed files with 132 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/DropDown/DropDown.vue
View File

@@ -16,7 +16,7 @@
</view>
<view class="item-border">
<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop" @getQueryInfo="getQueryInfo"
:type="title[activeIndex]" />
:type="title[activeIndex]" :activeChoose = "setActiveTag"/>
</view>
</view>
</template>
@@ -36,17 +36,25 @@
title: ['行业', '区域', '面积', '筛选'],
activeIndex: -1,
postlist: [
['全部', '餐饮美食', '百货超市', '美容美发'],
['区域1', '区域2', '区域3', '区域4'],
['小于50m²', '50-200m²', '200-600m²', '600-800m²', '800-1000m²', '1000m²以上'],
['面积从大到小', '面积从小到大', '租金从大到小', '租金从小到大']
[],
[],
['全部','小于50m²', '50-200m²', '200-600m²', '600-800m²', '800-1000m²', '1000m²以上'],
['全部','面积从大到小', '面积从小到大', '租金从大到小', '租金从小到大']
],
queryInfo: {
region: '',
sortType: '',
areatype: '',
business: ''
}
},
// 当前行业下拉列表
currentClassList: 0,
// 当前区域下拉列表
currentRegionList: 0,
// 当前面积下拉列表
currentAreaList: 0,
// 当前筛选下拉列表
currentFilterList: 0,
};
},
computed: {
@@ -56,8 +64,11 @@
},
created() {
this.postlist[0] = JSON.parse(uni.getStorageSync('classList'))
// this.postlist[0].unshift('全部')
this.postlist[0].unshift('全部')
this.postlist[1] = JSON.parse(uni.getStorageSync('regionList'))
this.postlist[1].unshift('全区域')
// this.postlist[2].unshift('所有面积')
// this.postlist[3].unshift('全部')
},
methods: {
changeActiveIndex(index) {
@@ -70,6 +81,30 @@
this.activeIndex = -1;
},
getQueryInfo(querys) {
console.log(querys, 'getquerysinfo');
// 修改当前选择的各选项卡下标
if (this.activeIndex === 0) {
this.currentClassList = querys.business
}else if (this.activeIndex === 1) {
this.currentRegionList = querys.region
}else if (this.activeIndex === 2) {
this.currentAreaList = querys.areatype
}else if (this.activeIndex === 3) {
this.currentFilterList = querys.sortType
}
// 记忆各下拉框数据
if(querys.business==0){
querys.business = ''
}else{
querys.business = this.postlist[0][this.currentClassList]
}
if(querys.region==0){
querys.region = ''
}else querys.region = this.postlist[1][this.currentRegionList]
this.queryInfo = {
...this.queryInfo,
...querys
@@ -77,8 +112,17 @@
const query = this.$u.queryParams(this.queryInfo)
console.log(query, 'dropquery');
this.$emit('getQueryInfo', this.queryInfo)
return query
},
setActiveTag(){
if(this.activeIndex == 0){
return this.currentClassList
}else if(this.activeIndex == 1){
return this.currentRegionList
}else if(this.activeIndex == 2){
return this.currentAreaList
}else{
return this.currentFilterList
}
}
}
}

96
components/DropDown/DropDownItem.vue
View File

@@ -3,7 +3,7 @@
<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}"
<view class="item" v-for="(item,index) in list" :key="item" :class="{isActive: activeIndex === index}"
@click="handleActive(index)">
<text class="list-text">{{item}}</text>
</view>
@@ -30,7 +30,7 @@
},
data() {
return {
activeIndex: -1,
activeIndex: 0,
queryInfo: {}
}
},
@@ -39,29 +39,89 @@
this.$emit('cancelDrop');
},
sendQueryInfo() {
console.log(this.queryInfo);
if (this.type === '行业') {
this.queryInfo = {
business: this.list[this.activeIndex]
}
} else if (this.type === '区域') {
this.queryInfo = {
region: this.list[this.activeIndex]
}
} else if (this.type === '面积') {
this.queryInfo = {
areatype: this.activeIndex + 1
}
} else if (this.type === '筛选') {
this.queryInfo = {
sortType: this.activeIndex + 1
}
this.queryInfo = {
business: this.activeIndex
}
}
if (this.type === '区域') {
this.queryInfo = {
region: this.activeIndex
}
}
if (this.type === '面积') {
this.queryInfo = {
areatype: this.activeIndex
}
}
if (this.type === '筛选') {
this.queryInfo = {
sortType: this.activeIndex
}
}
// if (this.type === '行业') {
// if(this.list[this.activeIndex] == '全部'){
// this.queryInfo = {
// business: ''
// }
// }else{
// this.queryInfo = {
// business: this.activeIndex
// }
// }
// } else if (this.type === '区域') {
// if(this.list[this.activeIndex] == '全区域'){
// this.queryInfo = {
// region: ''
// }
// }else{
// this.queryInfo = {
// region: this.activeIndex
// }
// }
// } else if (this.type === '面积') {
// if(this.list[this.activeIndex] == '任意面积'){
// this.queryInfo = {
// areatype: ''
// }
// }else {
// this.queryInfo = {
// areatype: this.activeIndex
// }
// }
// } else if (this.type === '筛选') {
// if(this.list[this.activeIndex] == '全部'){
// this.queryInfo = {
// sortType: ''
// }
// }else{
// this.queryInfo = {
// sortType: this.activeIndex
// }
// }
// }
// 发送queryInfo
console.log(this.queryInfo, 'sendqueryInfo');
this.$emit('getQueryInfo', this.queryInfo);
},
async handleActive(index) {
this.activeIndex = index;
this.sendQueryInfo(index);
this.sendQueryInfo();
// 设置一个定时器，等待200毫秒
const delayPromise = this.delay(200);
// 等待定时器完成

2
components/ShowShopList/ShowShopList.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<ShowShopListItem v-for="item in shopInfoList" :key="shopid" :shopInfo="item" :is-adshow="isADshow"
<ShowShopListItem v-for="item in shopInfoList" :key="item" :shopInfo="item" :is-adshow="isADshow"
:adlinkPath="adlinkPath" :show-style="showStyle" :is-edit="isEdit" @delItem="handleDel"
@updateItem="hanldeUpdate"></ShowShopListItem>
</view>