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.
327 lines
6.8 KiB
327 lines
6.8 KiB
<template>
|
|
<view class="searchBox">
|
|
<view class="status_bar"></view>
|
|
<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
|
|
<view
|
|
class="u-nav-slot"
|
|
slot="left"
|
|
>
|
|
<u-icon
|
|
name="arrow-left"
|
|
size="19"
|
|
></u-icon>
|
|
<view class="title">
|
|
列表
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="searchContent">
|
|
<u-search :showAction="true"
|
|
actionText="搜索"
|
|
placeholder="请输入"
|
|
style="padding:16upx 25upx;"
|
|
bgColor="#F3F5F7"
|
|
v-if="noSearch"
|
|
v-model="catagoryName"
|
|
@custom="searchHandle"
|
|
:animation="false"></u-search>
|
|
|
|
<view v-if="!noSearch">
|
|
<wyb-drop-down
|
|
ref="dropDown"
|
|
active-color="#0076F6"
|
|
drop-icon="line"
|
|
:options="options"
|
|
defaultColor="#0076F6"
|
|
@getContent="getContent"
|
|
>
|
|
<view class="tagList">
|
|
<view :class="active==index?'tagItem active':'tagItem'"
|
|
v-for="(item,index) in tagList"
|
|
@click="clickSearchItem(item,index)"
|
|
:key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</wyb-drop-down>
|
|
<!-- <u-search placeholder="输入搜索内容"
|
|
:focus="false"
|
|
@focus="clickHandle"
|
|
@blur="blurHandle"
|
|
:showAction="false"
|
|
:class="disabled?'withSearch':'withSearch withSearchDisabled'"
|
|
bgColor="#F3F5F7"
|
|
@search="searchHandle"
|
|
v-model="catagoryName"></u-search> -->
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view v-if="contentList.length>0" :class="noSearch?'nosearchListContent marginTop':'nosearchListContent'">
|
|
<view class="firstItem" v-for="item in contentList"
|
|
:key="item.id" @click="goNextSection(item)">
|
|
<text>{{item.name}}</text>
|
|
<text>{{item.subName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="nodata" v-if="contentList.length==0">
|
|
<image src="../../static/nodata.png" mode="widthFix"></image>
|
|
<view class="empty">
|
|
暂无数据
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';
|
|
import { listData } from '@/common/api.js';
|
|
export default{
|
|
|
|
data(){
|
|
return{
|
|
catagoryName:"",
|
|
catagoryId:null,
|
|
options: [{
|
|
header: '国家地区选择',
|
|
custom: true // 该栏目开启自定义模式
|
|
}],
|
|
tagList:[],
|
|
active:-1,
|
|
disabled:true,
|
|
noSearch:true,
|
|
contentList:[],
|
|
typedata:null,
|
|
originListRow:[],
|
|
page:1,
|
|
limit:20,
|
|
total:0,
|
|
wx_category_id:null
|
|
}
|
|
},
|
|
components: {
|
|
wybDropDown
|
|
},
|
|
onLoad(option) {
|
|
this.catagoryId = option.id
|
|
this.typedata = option.typedata
|
|
this.getListData(option.id)
|
|
},
|
|
methods:{
|
|
getContent(val){
|
|
this.catagoryName = val;
|
|
this.page=1
|
|
this.getListData(this.catagoryId)
|
|
},
|
|
searchHandle(){
|
|
this.page=1
|
|
this.getListData(this.catagoryId)
|
|
},
|
|
getListData(id){
|
|
let params={
|
|
wx_menu_id:id,
|
|
typedata:this.typedata,
|
|
name:this.catagoryName,
|
|
page:this.page,
|
|
limit:this.limit,
|
|
wx_category_id:this.wx_category_id,
|
|
sort:'weigh',
|
|
order:'asc'
|
|
}
|
|
listData(params,{
|
|
// custom: { auth: true },
|
|
header: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
}).then(res=>{
|
|
if(res.searchList.length==0){
|
|
this.noSearch = true;
|
|
this.contentList = res.rows
|
|
}else{
|
|
this.tagList = res.searchList
|
|
this.noSearch = false;
|
|
this.contentList = res.rows;
|
|
this.originListRow = res.rows;
|
|
this.total = res.total;
|
|
this.contentList.forEach(item=>{
|
|
let subobj = res.searchList.filter(i=>{
|
|
return item.wx_category_id==i.id
|
|
})
|
|
this.$set(item,'subName',subobj[0].name)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getListData1(id){
|
|
let params={
|
|
wx_menu_id:id,
|
|
typedata:this.typedata,
|
|
name:this.catagoryName,
|
|
page:this.page,
|
|
limit:this.limit,
|
|
wx_category_id:this.wx_category_id
|
|
}
|
|
listData(params).then(res=>{
|
|
if(res.searchList.length==0){
|
|
this.noSearch = true;
|
|
this.contentList = res.rows
|
|
}else{
|
|
this.tagList = res.searchList
|
|
this.noSearch = false;
|
|
this.contentList.push(...res.rows);
|
|
this.originListRow = res.rows;
|
|
this.contentList.forEach(item=>{
|
|
let subobj = res.searchList.filter(i=>{
|
|
return item.wx_category_id==i.id
|
|
})
|
|
this.$set(item,'subName',subobj[0].name)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
clickSearchItem(item,index){
|
|
console.log(item,index,"--==")
|
|
this.page = 1
|
|
if(this.active==index){
|
|
this.options[0].header = '国家地区选择'
|
|
this.active=-1;
|
|
this.wx_category_id = null,
|
|
// this.contentList = this.originListRow
|
|
this.getListData(this.catagoryId)
|
|
}else{
|
|
this.options[0].header = item.name;
|
|
this.active=index;
|
|
// let afterList = this.originListRow.filter(i=>{
|
|
// return i.wx_category_id == item.id
|
|
// })
|
|
// this.contentList = afterList
|
|
this.wx_category_id = item.id
|
|
this.getListData(this.catagoryId)
|
|
}
|
|
this.$refs.dropDown.close()
|
|
},
|
|
clickHandle(){
|
|
this.disabled = false;
|
|
},
|
|
leftClick(){
|
|
uni.switchTab({
|
|
url:'/pages/index/index'
|
|
})
|
|
},
|
|
blurHandle(){
|
|
this.disabled = true;
|
|
},
|
|
|
|
goNextSection(item){
|
|
uni.navigateTo({
|
|
url:'/pages/detail/detail?id='+item.id
|
|
// url:'/pages/detail/detail?id='+item.wx_category_id
|
|
})
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
console.log('已触底');
|
|
if(this.contentList.length<this.total){
|
|
this.page++;
|
|
this.getListData1(this.catagoryId)
|
|
}else{
|
|
return;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.u-navbar--fixed{
|
|
z-index: 99999;
|
|
}
|
|
/deep/.u-nav-slot{
|
|
display: flex;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 36upx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.searchContent{
|
|
border-top:1px solid transparent;
|
|
margin-top:50px;
|
|
background-color: #ffffff;
|
|
// padding:16upx 25upx;
|
|
}
|
|
.searchBox{
|
|
position:relative;
|
|
}
|
|
.withSearch{
|
|
position:absolute;
|
|
z-index:999;
|
|
top:110upx;
|
|
right:24upx;
|
|
width:180upx;
|
|
height:70upx;
|
|
}
|
|
.withSearchDisabled{
|
|
width:auto !important;
|
|
max-width: 50%;
|
|
}
|
|
.marginTop{
|
|
margin-top:0upx !important;
|
|
}
|
|
.nosearchListContent{
|
|
border-top:1upx solid transparent;
|
|
margin-top:100upx;
|
|
.firstItem{
|
|
margin-top:20upx;
|
|
padding:29upx 23upx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&>text{
|
|
font-size: 30upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.tagList{
|
|
// margin-top:20upx;
|
|
display: flex;
|
|
padding:39upx 24upx;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
&:after {
|
|
content: "";
|
|
flex: 1;
|
|
}
|
|
.tagItem{
|
|
width: 150upx;
|
|
height: 56upx;
|
|
background: #F6F6F6;
|
|
border-radius: 10upx;
|
|
font-size: 28upx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 56upx;
|
|
text-align: center;
|
|
margin:10upx;
|
|
}
|
|
.active{
|
|
background: #EDF6FF !important;
|
|
color: #0076F6 !important;
|
|
}
|
|
}
|
|
.nodata{
|
|
margin-top:200rpx;
|
|
text-align: center;
|
|
image{
|
|
width:30%;
|
|
height:auto;
|
|
}
|
|
}
|
|
</style> |