XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加鼠标移动到可点模块 鼠标样式改变 全局新增加载动画

Browse Source
This commit is contained in:
luJianJun
2023-07-20 16:26:46 +08:00
parent 416b5232ae
commit 60f0f45def
15 changed files with 281 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/seachModule/seachModule.vue
View File

@@ -25,7 +25,8 @@
历史搜索
</div>
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"
@click="setSeachVal(item)">
{{ item }}
</div>
</div>
@@ -35,7 +36,8 @@
热门推荐
</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
@click="setHotSeach(item)">
{{ item }}
</div>
</div>
@@ -64,13 +66,15 @@
</div>
</div>
<div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
:checkBtn="checkBtn">
</seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" :checkBtn="checkBtn"
v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" :checkBtn="checkBtn"
v-if="allHireType.data.length"></seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
:checkBtn="checkBtn"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
:checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
:checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<div
@@ -87,7 +91,7 @@
import { ref, watchEffect, reactive, defineProps } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import store from '../../store/index';
import api from "../../utils/api";
@@ -102,10 +106,10 @@ let getDataList = props.getDataList
//搜索框
let historyShow = ref(false);
let setHistoryShow = () => {
if(historyShow.value){
if (historyShow.value) {
setTimeout(() => {
historyShow.value = !historyShow.value
},500);
}, 500);
return
}
historyShow.value = !historyShow.value
@@ -136,9 +140,10 @@ let getLocationData = (data) => {
}
//监听路由
const route = useRoute()
const route = useRouter()
let routePath = ref('')
routePath.value = route.path
routePath.value = route.currentRoute.value.path
console.log(route)
watchEffect(() => {
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
@@ -154,11 +159,17 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据
let seachList = (item) => {
if(historyArr.data.indexOf(seachAllType.keyword)===-1){
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
historyArr.data.push(seachAllType.keyword)
}
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
getDataList(seachAllType)
route.push({
path: '/seachPage',
query: {
keyword:seachAllType.keyword
}
})
// getDataList(seachAllType)
}
//设置搜索数据
@@ -166,41 +177,42 @@ let setSeachConditions = (type, data) => {
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max
} else if(type!==''){
} else if (type !== '') {
seachAllType[type] = data
}else if(type===''){
data.indexOf('isverified')!==-1?seachAllType['isverified']=1:seachAllType['isverified']=0
data.indexOf('iselevator')!==-1?seachAllType['iselevator']=1:seachAllType['iselevator']=0
data.indexOf('issunshinearea')!==-1?seachAllType['issunshinearea']=1:seachAllType['issunshinearea']=0
} else if (type === '') {
data.indexOf('isverified') !== -1 ? seachAllType['isverified'] = 1 : seachAllType['isverified'] = 0
data.indexOf('iselevator') !== -1 ? seachAllType['iselevator'] = 1 : seachAllType['iselevator'] = 0
data.indexOf('issunshinearea') !== -1 ? seachAllType['issunshinearea'] = 1 : seachAllType['issunshinearea'] = 0
}
if(type==='school'){
seachAllType.location=[]
if (type === 'school') {
seachAllType.location = []
}
if(type==='location'){
seachAllType.school=''
if (type === 'location') {
seachAllType.school = ''
}
console.log('seachAllType',seachAllType)
console.log('seachAllType', seachAllType)
getDataList(seachAllType)
}
//点击历史搜索记录
let setSeachVal = (item) => {
seachAllType.keyword = item
getDataList(seachAllType)
seachList()
// getDataList(seachAllType)
}
//点击热门地区
let setHotSeach=(item)=>{
let setHotSeach = (item) => {
seachAllType.keyword = item
if(historyArr.data.indexOf(item)===-1)historyArr.data.push(item)
if (historyArr.data.indexOf(item) === -1) historyArr.data.push(item)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
getDataList(seachAllType)
}
//点击选项
let checkBtn=(data,type,areaItem)=>{
console.log(data,type,areaItem)
getDataList(type,data,areaItem)
let checkBtn = (data, type, areaItem) => {
console.log(data, type, areaItem)
getDataList(type, data, areaItem)
}
@@ -438,6 +450,5 @@ defineExpose({
flex-wrap: wrap;
}
}
}
</style>
}</style>