编辑的选择身份弹窗关闭按钮

This commit is contained in:
A1300399510
2023-07-18 10:52:33 +08:00
parent a198607e0a
commit 8679b418ff
3 changed files with 34 additions and 26 deletions

View File

@@ -69,10 +69,10 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">学校附近</div> <div class="option-title">学校附近</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == nearSchoolListValue }" <div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['school'] }"
@click="selectOption('nearSchool', 0)">不限</div> @click="selectOption('nearSchool', 0)">不限</div>
<div class="item flexcenter" v-for="item in nearSchoolList" <div class="item flexcenter" v-for="item in nearSchoolList"
:class="{ 'pitch': item['id'] == nearSchoolListValue }" :class="{ 'pitch': item['id'] == pitchValue['school'] }"
@click="selectOption('nearSchool', item.id)">{{ item['name'] @click="selectOption('nearSchool', item.id)">{{ item['name']
}}</div> }}</div>
</div> </div>
@@ -80,17 +80,17 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">租金</div> <div class="option-title">租金</div>
<div class="option-box flexacenter flex1 option-input-box"> <div class="option-box flexacenter flex1 option-input-box">
<input class="option-input" type="number" v-model="rent_min" /> ~ <input <input class="option-input" type="number" v-model="pitchValue['rent_min']" /> ~ <input
class="option-input" type="number" v-model="rent_max" /> HK$/ class="option-input" type="number" v-model="pitchValue['rent_max']" /> HK$/
</div> </div>
</div> </div>
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">房型</div> <div class="option-title">房型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == roomTypeValue }" <div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomtype'] }"
@click="selectOption('roomType', 0)">不限</div> @click="selectOption('roomType', 0)">不限</div>
<div class="item flexcenter" :class="{ 'pitch': item['id'] == roomTypeValue }" <div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['roomtype'] }"
v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{
item['name'] }}</div> item['name'] }}</div>
</div> </div>
@@ -102,9 +102,9 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">品牌</div> <div class="option-title">品牌</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == brandValue }" <div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['companyid'] }"
@click="selectOption('brand', 0)">不限</div> @click="selectOption('brand', 0)">不限</div>
<div class="item flexcenter" :class="{ 'pitch': item['id'] == brandValue }" <div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['companyid'] }"
v-for="item in brandList" @click="selectOption('brand', item.id)"> v-for="item in brandList" @click="selectOption('brand', item.id)">
{{ item['name'] }}</div> {{ item['name'] }}</div>
</div> </div>
@@ -112,9 +112,10 @@
<div class="option-item flexflex"> <div class="option-item flexflex">
<div class="option-title">楼型</div> <div class="option-title">楼型</div>
<div class="option-box flexflex flex1"> <div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == roomlistingsValue }" <div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomlistings'] }"
@click="selectOption('roomlistings', 0)">不限</div> @click="selectOption('roomlistings', 0)">不限</div>
<div class="item flexcenter" :class="{ 'pitch': item['id'] == roomlistingsValue }" <div class="item flexcenter"
:class="{ 'pitch': item['id'] == pitchValue['roomlistings'] }"
v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">{{ v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">{{
item['name'] }}</div> item['name'] }}</div>
</div> </div>
@@ -151,13 +152,10 @@ const props = defineProps({
} }
}) })
const emit = defineEmits(['close']) const emit = defineEmits(['handleTransfer'])
let state = ref('pack') // 筛选状态 unfold 展开 pack 收起 let state = ref('pack') // 筛选状态 unfold 展开 pack 收起
let rent_min = ref(null) // 租金
let rent_max = ref(null) // 租金
//搜索框 //搜索框
let seachValue = ref('') let seachValue = ref('')
let historyShow = ref(false); let historyShow = ref(false);
@@ -177,6 +175,17 @@ let brandList = reactive([]);
let brandValue = ref(0); //学校附近选中值 let brandValue = ref(0); //学校附近选中值
let pitchValue = ref({
companyid: 0,
roomtype: 0,
rent_min: null, // 租金
rent_max: null, // 租金
school: 0,
roomlistings: 0,
})
let historyArr = reactive({ data: [] })//历史查找记录 let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] }) let hotArr = reactive({ data: [] })
@@ -197,27 +206,27 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据 //搜索数据
let seachList = () => localStorage.setItem('historyArr', JSON.stringify(historyArr.data)); let seachList = () => localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
// 选择选项 // 选择选项
const selectOption = (type, value) => { const selectOption = (type, value) => {
switch (type) { switch (type) {
case 'nearSchool': case 'nearSchool':
nearSchoolListValue.value = value pitchValue.value['school'] = value
break; break;
case 'roomType': case 'roomType':
roomTypeValue.value = value pitchValue.value['roomtype'] = value
break; break;
case 'brand': case 'brand':
console.log("djkdkdk"); pitchValue.value['companyid'] = value
brandValue.value = value
break; break;
case 'roomlistings': case 'roomlistings':
roomlistingsValue.value = value pitchValue.value['roomlistings'] = value
break; break;
default: default:
break; break;
} }
console.log(pitchValue.value);
emit('handleTransfer', pitchValue)
} }

View File

@@ -2,6 +2,7 @@
<div class="pop-mask flexcenter"> <div class="pop-mask flexcenter">
<div class="pop-box" :style="{ width: popType == 'choice' ? '520px' : '' }"> <div class="pop-box" :style="{ width: popType == 'choice' ? '520px' : '' }">
<div v-if="popType == 'choice'"> <div v-if="popType == 'choice'">
<img class="close-icon" @click="emit('close')" src="@/assets/img/edit/close-icon.svg" />
<div class="pop-header flexcenter">发布房源</div> <div class="pop-header flexcenter">发布房源</div>
<div class="please-choose">请选择</div> <div class="please-choose">请选择</div>
<div class="choice-box flexflex flex1"> <div class="choice-box flexflex flex1">

View File

@@ -3,7 +3,7 @@
<pageTopBar></pageTopBar> <pageTopBar></pageTopBar>
<!-- 筛选 --> <!-- 筛选 -->
<div class="screen-box wid1200"> <div class="screen-box wid1200">
<seach-module></seach-module> <seach-module @handleTransfer="handleTransfer"></seach-module>
</div> </div>
<div class="list wid1200 flexflex" ref="gridContainer"> <div class="list wid1200 flexflex" ref="gridContainer">
@@ -59,7 +59,7 @@ let loading = ref(null) // 加载
let page = 1 let page = 1
const getData = () => { const getData = () => {
if (page == 0) return if (page == 0 || loading['visible']) return
loading = ElLoading.service({ loading = ElLoading.service({
@@ -75,8 +75,6 @@ const getData = () => {
let data = res.data let data = res.data
list.value = list.value.concat(data.data) list.value = list.value.concat(data.data)
page = data.page * data.limit >= data.count ? 0 : page + 1, page = data.page * data.limit >= data.count ? 0 : page + 1,
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems(); masonryInstance.reloadItems();
masonryInstance.layout(); masonryInstance.layout();
@@ -103,8 +101,8 @@ const handleScroll = () => {
}; };
// 筛选组件的参数的中转 // 筛选组件的参数的中转
const handleTransfer = () => { const handleTransfer = (data) => {
console.log("data", data);
} }
</script> </script>