You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
7.9 KiB
367 lines
7.9 KiB
<template>
|
|
<view>
|
|
<view class="home-nav">
|
|
<view class="search-box">
|
|
<input class="home-ipt" v-model="name" placeholder="请输入您要搜索的政策" />
|
|
<icon class="iconfont icon-sousuo search" type=""></icon>
|
|
</view>
|
|
<view class="home-text" @click="searchPolicy">
|
|
搜 索
|
|
</view>
|
|
</view>
|
|
<view class="pt-88 screen-box">
|
|
<view class="content">
|
|
<view @click="showDom">{{defaultCity.areaName}}</view>
|
|
<view class="screen-content" :class="showUni===true ? 'show' : ''" v-for="(item,index) in areaList" :key="index" @click="changeCityValue(item)">{{item.areaName}}</view>
|
|
</view>
|
|
|
|
<!-- 项目类别，写成一个单独界面，可以多选 -->
|
|
<view class="type-choose" @click="jumpType">
|
|
项目类型选择
|
|
</view>
|
|
|
|
<!-- 项目类别，写成一个单独界面，可以多选 最多5个-->
|
|
<view class="type-choose" @click="jumpType1">
|
|
产业类别选择
|
|
</view>
|
|
|
|
<!-- 项目类别选择 -->
|
|
<view class="eject-box" :class="isShow==0 ? 'show' : ''">
|
|
<view class="eject">
|
|
<view class="eject-content" v-for="(item,index) in projectList" :key="index">
|
|
<label>
|
|
<checkbox @click="choice(item)" /><view class="size">{{item}}</view>
|
|
</label>
|
|
</view>
|
|
<button type="default" @click="changeShow">确定</button>
|
|
</view>
|
|
</view>
|
|
<!-- 产业类别选择 -->
|
|
<view class="eject-box" :class="isShow==1 ? 'show' : ''">
|
|
<view class="eject">
|
|
<view class="eject-content" v-for="(item,index) in industryList" :key="index">
|
|
<label>
|
|
<checkbox @click="choice1(item,index)" /><view class="size">{{item}}</view>
|
|
</label>
|
|
</view>
|
|
<button type="default" @click="changeShow">确定</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view class="pt-200">
|
|
<Policy :showModal="showModal"></Policy>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { areaquery } from 'api/area'
|
|
import { typeSelection } from 'api/type'
|
|
|
|
export default {
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
console.log(res.target)
|
|
}
|
|
return {
|
|
title: '',
|
|
path: '/pages/HomePages/SearchPage'
|
|
}
|
|
},
|
|
async onLoad(){
|
|
const that = this
|
|
const params = {
|
|
param:{
|
|
type:0
|
|
}
|
|
}
|
|
const data = await typeSelection(params)
|
|
that.projectList = data
|
|
console.log(that.projectList)
|
|
const params1 = {
|
|
param:{
|
|
type:1
|
|
}
|
|
}
|
|
const data1 = await typeSelection(params1)
|
|
that.industryList = data1
|
|
console.log(that.industryList)
|
|
},
|
|
data() {
|
|
return {
|
|
value2: [],
|
|
label2: ['山西','太原','高薪'],
|
|
areaList: this.$store.state.user.cityList,
|
|
defaultCity:{
|
|
id: 140100,
|
|
areaName:'地区选择'
|
|
},
|
|
showModal:{
|
|
"areaId": this.$store.state.user.cityId,
|
|
"industrialCategories": [], //产业类别
|
|
"name": '', //项目名称
|
|
"projectCategories": [] //项目类别
|
|
},
|
|
defaultProject:'项目类别选择',
|
|
projectCategories:[], //项目类别
|
|
projectList:[], //项目类别组
|
|
defaultIndustry:'产业类别选择',
|
|
industrialCategories:[], //产业类别
|
|
industryList:[], //产业类别组
|
|
name:'', //项目名称
|
|
isShow:2,
|
|
showUni:false
|
|
}
|
|
},
|
|
onReachBottom: function () {
|
|
this.$store.state.policy.pagenum ++
|
|
},
|
|
methods: {
|
|
changeCityValue(value){
|
|
this.defaultCity = value
|
|
this.showUni = false
|
|
},
|
|
showDom(){
|
|
this.showUni = !this.showUni
|
|
},
|
|
jumpType(){
|
|
this.isShow = 0
|
|
},
|
|
jumpType1(){
|
|
this.isShow = 1
|
|
},
|
|
changeShow(){
|
|
const that = this
|
|
if(that.isShow == 1){
|
|
let arr = []
|
|
for(let i=0;i<5;i++){
|
|
arr.push(that.industrialCategories[i])
|
|
}
|
|
for(let j=0;j<arr.length;j++){
|
|
if(arr[j] === undefined){
|
|
arr.splice(j,1)
|
|
j -= 1
|
|
}
|
|
}
|
|
console.log(that.industrialCategories)
|
|
}
|
|
that.isShow = 2
|
|
},
|
|
searchPolicy(){
|
|
const that = this
|
|
that.$store.state.policy.pagenum = 1
|
|
that.showModal.areaId = that.defaultCity.id
|
|
that.showModal.industrialCategories = that.industrialCategories
|
|
that.showModal.name = that.name
|
|
that.showModal.projectCategories = that.projectCategories
|
|
},
|
|
handleConfirm (item) {
|
|
// console.log('confirm::', item)
|
|
this.label2 = [item.item[0].label,item.item[1].label,item.item[2].label]
|
|
},
|
|
choice(item){
|
|
const that = this
|
|
console.log(item)
|
|
if(that.projectCategories.length == 0){
|
|
that.projectCategories.push(item)
|
|
}else{
|
|
for(let i=0;i<that.projectCategories.length;i++){
|
|
if(that.projectCategories[i] == item){
|
|
that.projectCategories.splice(i,1)
|
|
break
|
|
}else if(i == that.projectCategories.length - 1){
|
|
that.projectCategories.push(item)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
console.log(that.projectCategories)
|
|
},
|
|
choice1(item,index){
|
|
const that = this
|
|
if(that.industrialCategories.length == 0){
|
|
that.industrialCategories.push(item)
|
|
}else{
|
|
for(let i=0;i<that.industrialCategories.length;i++){
|
|
if(that.industrialCategories[i] == item){
|
|
that.industrialCategories.splice(i,1)
|
|
break
|
|
}else if(i == that.industrialCategories.length-1){
|
|
that.industrialCategories.push(item)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
if(that.industrialCategories.length > 5){
|
|
uni.showModal({
|
|
title:'最多只能选择5项，多出无效'
|
|
})
|
|
}
|
|
console.log(that.industrialCategories)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-nav{
|
|
position: relative;
|
|
height: 88upx;
|
|
background-color: $red;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.home-ipt{
|
|
flex: 1;
|
|
background-color: white;
|
|
border-radius: 25upx;
|
|
height: 48upx;
|
|
padding-left: 70upx;
|
|
font-size: 24upx;
|
|
}
|
|
.home-text{
|
|
padding-right: 30upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
color: $white;
|
|
font-size: 24upx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.search-box{
|
|
position: relative;
|
|
height: 48upx;
|
|
margin-left: 40upx;
|
|
margin-right: 40upx;
|
|
flex: 1;
|
|
|
|
.search{
|
|
position: absolute;
|
|
left: 15upx;
|
|
top:50%;
|
|
transform: translate3d(0,-50%,0);
|
|
line-height: 50upx !important;
|
|
font-size: 40upx;
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
|
|
}
|
|
}
|
|
.triangle{
|
|
margin-left: 6upx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.pt-88{
|
|
padding-top: 88upx;
|
|
}
|
|
.pt-200{
|
|
padding-top: 188upx;
|
|
}
|
|
.screen-box{
|
|
display: flex;
|
|
position: fixed;
|
|
width: 750upx;
|
|
z-index: 10;
|
|
|
|
.content{
|
|
flex: 1;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.triangle{
|
|
margin-left: 6upx;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 24upx;
|
|
}
|
|
.content-box{
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
.content{
|
|
background-color: $white;
|
|
}
|
|
.warp{
|
|
flex: 1;
|
|
z-index: 100;
|
|
}
|
|
.screen-content{
|
|
display: none;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background-color: #fafafa;
|
|
border-top: 1px solid #f5f5f5;
|
|
}
|
|
.type-choose{
|
|
flex: 1;
|
|
display: flex;
|
|
height: 48px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: $white;
|
|
border-left: 1px solid #eee;
|
|
border-right: 1px solid #eee;
|
|
}
|
|
.eject-box{
|
|
display: none;
|
|
width: 750upx;
|
|
height: 100vh;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
padding:100upx 25upx 3vh 25upx;
|
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
|
}
|
|
.eject{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-radius: 10px;
|
|
height: 90vh;
|
|
width: 700upx;
|
|
padding: 20upx;
|
|
background-color: $white;
|
|
overflow-y:auto;
|
|
|
|
button{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.eject-content{
|
|
width: 45%;
|
|
margin: 10upx;
|
|
padding: 0 5upx;
|
|
height: 40px;
|
|
font-size: 10px;
|
|
position: relative;
|
|
}
|
|
.size{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 30px;
|
|
}
|
|
.show{
|
|
display: block !important;
|
|
}
|
|
.type-box{
|
|
flex: 1;
|
|
padding-right: 20upx;
|
|
border-radius: 5px;
|
|
margin-bottom: 10upx;
|
|
padding-left: 10px;
|
|
font-size: 14px;
|
|
height: auto;
|
|
min-height: 30px;
|
|
line-height: 30px;
|
|
border: 1px solid #eee;
|
|
}
|
|
</style>
|
|
|