329 lines
9.7 KiB
Vue
329 lines
9.7 KiB
Vue
<template>
|
|
<div class="land-index-warp">
|
|
<common current-name="land">
|
|
<template #main>
|
|
<banner :imglist="bannerList"></banner>
|
|
<div class="land-filter-top">
|
|
<div v-if="!isHide">
|
|
<typetop ref="arearef" :list="LevelOne" :name="'area'" title="选择地区" @select="doSelect"></typetop>
|
|
<typetop ref="uesdref" :list="landUse" :name="'uesd'" title="选择土地" @select="doSelect"></typetop>
|
|
<typetop ref="typeref" :list="landType" :name="'type'" title="土地用途" @select="doSelect"></typetop>
|
|
<typetop ref="productref" :list="landProduct" :name="'product'" title="种养殖产物" @select="doSelect"></typetop>
|
|
<typetop ref="circulationref" :list="landCirculation" :name="'circulation'" title="土地流转" @select="doSelect"></typetop>
|
|
<div class="more-filter">
|
|
<div class="more-title">更多</div>
|
|
<div class="filter-r">
|
|
<el-row :gutter="16">
|
|
<el-col :span="8">
|
|
<el-select v-model="fliter.area" placeholder="请选择面积范围" style="width: 200px">
|
|
<el-option v-for="item in areaRange" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-select v-model="fliter.year" placeholder="请选择流转年限" style="width: 200px">
|
|
<el-option v-for="m in yearList" :key="m.value" :label="m.label" :value="m.value" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-select v-model="fliter.lookType" placeholder="请选择预约带看" style="width: 200px">
|
|
<el-option v-for="n in lookType" :key="n.value" :label="n.label" :value="n.value" />
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="24" style="margin: 16px 0">
|
|
<el-radio-group v-model="fliter.other">
|
|
<el-radio v-for="(k, index) in radioList" :key="index" :value="k.value">{{ k.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="select-result">
|
|
<div class="title">所选分类</div>
|
|
<div class="result-list">
|
|
<template v-for="(r, indexr) in selectkeylist" :key="indexr">
|
|
<div class="result-item">
|
|
<el-tag closable :type="'info'" @close="handleClose(r)">
|
|
{{ selectAll[r] && selectAll[r].title ? selectAll[r].title : '' }}
|
|
</el-tag>
|
|
</div>
|
|
</template>
|
|
<div class="show-hide" @click="doShowHide">
|
|
<el-icon v-if="!isHide"><ArrowUpBold /></el-icon>
|
|
<el-icon v-else><ArrowDownBold /></el-icon>
|
|
<span>{{ isHide ? '展开' : '收起' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-bottom">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12" align="left">
|
|
<div class="result-count">
|
|
共匹配到
|
|
<span class="count">{{ '0' }}</span>
|
|
个结果
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" align="right">
|
|
<div class="do-set">
|
|
<el-icon><Refresh /></el-icon>
|
|
<span>重置</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="land-reuslt-list">
|
|
<el-row class="land-item-warp" :gutter="24">
|
|
<template v-for="(land, indexl) in 11" :key="indexl">
|
|
<el-col :span="12">
|
|
<landItem></landItem>
|
|
</el-col>
|
|
</template>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
</common>
|
|
</div>
|
|
</template>
|
|
<script setup name="ecommerce">
|
|
import common from './components/common.vue';
|
|
import banner from './components/banner.vue';
|
|
import typetop from './components/typetop.vue';
|
|
import landItem from './components/landItem.vue';
|
|
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|
|
|
let LevelOne = reactive([
|
|
{ id: '01', title: '耿马镇' },
|
|
{ id: '02', title: '孟定镇' },
|
|
{ id: '03', title: '孟永镇' },
|
|
{ id: '04', title: '孟撒镇' },
|
|
{ id: '05', title: '勐简乡' },
|
|
{ id: '06', title: '大兴乡' },
|
|
{ id: '07', title: '四排山乡' },
|
|
{ id: '08', title: '贺派乡' },
|
|
]);
|
|
|
|
let landUse = reactive([
|
|
{ id: '01', title: '耕地' },
|
|
{ id: '02', title: '林地' },
|
|
{ id: '03', title: '园地' },
|
|
{ id: '04', title: '草地' },
|
|
{ id: '05', title: '交通运输用地' },
|
|
{ id: '06', title: '水域水利设施用地' },
|
|
{ id: '07', title: '其他用地' },
|
|
]);
|
|
|
|
let landType = reactive([
|
|
{ id: '01', title: '水田' },
|
|
{ id: '02', title: '水浇地' },
|
|
{ id: '03', title: '旱地' },
|
|
]);
|
|
|
|
let landProduct = reactive([
|
|
{ id: '01', title: '水果坚果类' },
|
|
{ id: '02', title: '蔬菜瓜果类' },
|
|
{ id: '03', title: '粮食油料类' },
|
|
{ id: '04', title: '养殖类' },
|
|
{ id: '05', title: '其他' },
|
|
]);
|
|
|
|
let landCirculation = reactive([
|
|
{ id: '01', title: '经营权出租' },
|
|
{ id: '02', title: '经营权合作' },
|
|
{ id: '03', title: '经营权入股' },
|
|
{ id: '04', title: '经营权转让' },
|
|
{ id: '05', title: '经营权互换' },
|
|
{ id: '06', title: '经营权转包' },
|
|
{ id: '07', title: '使用权出租' },
|
|
{ id: '08', title: '使用权转让' },
|
|
{ id: '09', title: '使用权入股' },
|
|
{ id: '10', title: '使用权合作' },
|
|
]);
|
|
let radioList = reactive([
|
|
{ value: '01', label: '电话核实' },
|
|
{ value: '02', label: '现场核实' },
|
|
{ value: '03', label: '现场视频' },
|
|
{ value: '04', label: '官方发布' },
|
|
{ value: '05', label: '金牌地源' },
|
|
{ value: '06', label: '优质地源' },
|
|
{ value: '07', label: '地区商家' },
|
|
]);
|
|
|
|
let areaRange = reactive([
|
|
{ value: '0', label: '10亩以下' },
|
|
{ value: '10', label: '10 ~ 100亩' },
|
|
{ value: '100', label: '101 ~ 1000亩' },
|
|
{ value: '1000', label: '1001 ~ 5000亩' },
|
|
{ value: '5000', label: '5000亩以上' },
|
|
]);
|
|
|
|
let yearList = reactive([
|
|
{ value: '0', label: '5年以下' },
|
|
{ value: '5', label: '6 ~ 10年' },
|
|
{ value: '10', label: '11 ~ 15年' },
|
|
{ value: '15', label: '16 ~ 20年' },
|
|
{ value: '20', label: '21 ~ 30年' },
|
|
{ value: '30', label: '30年以上' },
|
|
]);
|
|
|
|
let lookType = reactive([
|
|
{ value: 'reservation', babel: '可预约带看' },
|
|
{ value: 'pay', babel: '单词付费带看' },
|
|
{ value: 'bond', babel: '保证金带看' },
|
|
]);
|
|
|
|
let bannerList = reactive(['images/ecommerce/' + 'banner3.png', 'images/ecommerce/' + 'banner3.png']);
|
|
let isHide = ref(false);
|
|
let fliter = reactive({
|
|
area: null,
|
|
year: null,
|
|
lookType: null,
|
|
other: null,
|
|
});
|
|
|
|
let selectAll = reactive({});
|
|
const doSelect = (data) => {
|
|
let { select, nameVal } = data;
|
|
selectAll[nameVal] = select;
|
|
console.info('doSelect', data);
|
|
};
|
|
|
|
let selectkeylist = computed(() => {
|
|
let list = Object.keys(selectAll);
|
|
return list;
|
|
});
|
|
|
|
let arearef = ref(null);
|
|
let uesdref = ref(null);
|
|
let typeref = ref(null);
|
|
let productref = ref(null);
|
|
let circulationref = ref(null);
|
|
|
|
const refs = {
|
|
arearef,
|
|
uesdref,
|
|
typeref,
|
|
productref,
|
|
circulationref,
|
|
};
|
|
|
|
const handleClose = (name) => {
|
|
if (name) {
|
|
let refName = name + 'ref';
|
|
const componentRef = refs[refName];
|
|
console.info(' componentRef.value', componentRef.value);
|
|
componentRef.value && componentRef.value.clearSelect();
|
|
delete selectAll[name];
|
|
}
|
|
};
|
|
|
|
const doShowHide = () => {
|
|
isHide.value = !isHide.value;
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.land-index-warp {
|
|
width: 100%;
|
|
.land-filter-top {
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
background: $color-fff;
|
|
padding: 16px;
|
|
|
|
.more-filter {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
.filter-r,
|
|
.more-title {
|
|
display: -webkit-inline-box;
|
|
vertical-align: top;
|
|
}
|
|
.more-title {
|
|
color: $color-999;
|
|
font-size: 20px;
|
|
width: 120px;
|
|
vertical-align: top;
|
|
font-weight: 500;
|
|
line-height: 40px;
|
|
}
|
|
.filter-r {
|
|
}
|
|
}
|
|
|
|
.select-result {
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
text-align: left;
|
|
.title,
|
|
.result-list {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.title {
|
|
display: -webkit-inline-box;
|
|
color: $color-999;
|
|
font-size: 20px;
|
|
width: 120px;
|
|
vertical-align: top;
|
|
font-weight: 500;
|
|
line-height: 40px;
|
|
}
|
|
.result-list {
|
|
width: calc(100% - 120px);
|
|
padding-right: 30px;
|
|
position: relative;
|
|
.result-item {
|
|
display: inline-block;
|
|
margin: 8px;
|
|
}
|
|
.show-hide {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
.el-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.filter-bottom {
|
|
width: 100%;
|
|
text-align: center;
|
|
.result-count {
|
|
font-size: 18px;
|
|
color: $color-666;
|
|
.count {
|
|
color: $color-main;
|
|
padding: 0 2px;
|
|
}
|
|
}
|
|
.do-set {
|
|
font-size: 16px;
|
|
color: $color-666;
|
|
.el-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.land-reuslt-list {
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
.land-item-warp {
|
|
}
|
|
}
|
|
}
|
|
</style>
|