123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <template>
- <view class="warpbox">
- <!-- 搜索 -->
- <view class="searbox">
- <view class="censear">
- <image src="/static/img/search.png" class="searimg" ></image>
- <input type="text" placeholder="请输入关键词搜索" :focus="focus" v-model="name" @input="queryData" class="lself" placeholder-style="color:#999;font-size:24rpx;">
- </view>
- </view>
-
- <view class="topChose">
- <picker @change="changeParent" :value="parentIndex" :range="parentList" :range-key="'name'">
- <view class="left">
- <view>{{parentList[parentIndex] && parentList[parentIndex].name}}</view>
- <image src="/static/img/xia.png" class="xiaimg" ></image>
- </view>
- </picker>
- <picker @change="changeType" :value="typeIndex" :range="typeList" :range-key="'name'">
- <view class="left">
- <view>{{typeList[typeIndex] && typeList[typeIndex].name}}</view>
- <image src="/static/img/xia.png" class="xiaimg" ></image>
- </view>
- </picker>
- </view>
-
- <view class="artic_warp">
- <view class="artic_item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
- <view class="artic_top">
- <view class="artic_name">{{item.title}}</view>
- <view class="artic_info">
- <image :src="item.img" class="artic_img" ></image>
- <view class="artic_con">{{item.desc}}</view>
- </view>
- </view>
- <view class="artic_bot">
- <view class="bot_left">
- <view class="bot_time">{{item.createtime}}</view>
- </view>
- </view>
- </view>
- <view class="noData" v-if="list.length == 0">暂无更多</view>
- </view>
- </view>
- </template>
- <script>
- import { netArticleList,netKnowledgeList } from '@/api/api.js'
-
- export default{
- data() {
- return{
- type_id:'',
- pid:'',
- pname:'',
- name:'',
- list:[],
- page:1,
- totalPage:1,
- focus:false,
- name:'',
- showSelectL:false,//显示筛选选项
- showSelectR:false,
- parentList:[],
- parentIndex:0,
- parentid:'',
- typeList:[],
- typeIndex:0,
- }
- },
- onLoad(options) {
-
-
- },
- onShow() {
- this.getParentList()
- },
- onReachBottom() {
- if(this.page >= this.totalPage){
- return
- }
- this.page ++
- this.getList()
- },
- methods:{
- //搜索
- queryData(e) {
- this.list = []
- this.getList()
- },
- init() {
- this.page = 1
- this.list = []
- this.getList()
- },
- getList() {
- let params = {
- page:this.page,
- type_ids: this.typeList[this.typeIndex] ? this.typeList[this.typeIndex].id : '',
- name:this.name
- }
- netArticleList(params).then(res=>{
- this.list = this.list.concat(res.data.data)
- this.totalPage = res.data.last_page
- })
- },
- getParentList() {
- netKnowledgeList({pid:this.pid}).then(res=>{
- this.parentList = res.data
- this.getChild()
- })
- },
- getChild() {
- if(this.parentList[this.parentIndex]){
- netKnowledgeList({pid:this.parentList[this.parentIndex].id}).then(res=>{
- this.typeList = res.data
- this.init()
- })
- }
- },
- changeParent(e){
- this.parentIndex = e.detail.value
- this.getChild()
- },
- changeType(e) {
- this.typeIndex = e.detail.value
- this.init()
- },
- toDetail(item) {
- uni.navigateTo({
- url:'/pages/knowledge_base/detail?id='+item.id+'&tid='+this.type_id+'&pid='+this.pid
- })
- },
- handleClickLeft(){
- this.showSelectR = false
- this.showSelectL = true
- },
- handleClickRight(){
- this.showSelectL = false
- this.showSelectR = true
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .topChose{
- display: flex;
- justify-content: space-around;
- align-items: center;
- height: 100rpx;
- .left{
- display: flex;
- justify-content: center;
- align-items: center;
- .xiaimg{
- width:26rpx;
- height:16rpx;
- margin-left:10rpx;
- }
- view{
- font-size: 26rpx;
- color: #333333;
- }
- }
- }
- .searbox{
- padding:10rpx 0 20rpx 0;
- display: flex;
- justify-content: center;
- align-items: center;
- .censear{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- padding:0 24rpx;
- border-radius: 34rpx;
- background:#FFFFFF;
- border:1rpx solid #7FC2FF;
- width:487rpx;
- height:60rpx;
- .searimg{
- width:35rpx;
- height:35rpx;
- margin-right: 15rpx;
- }
- .lself{
- font-size:24rpx;
- }
- }
- }
- .artic_title{
- width:690rpx;
- background:#fff;
- border-radius: 10rpx;
- margin:24rpx auto;
- box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
- font-size:34rpx;
- color:#0287FF;
- text-align: center;
- line-height: 70rpx;
- }
- .artic_warp{
- .artic_item{
- width:690rpx;
- margin:0 auto 24rpx;
- box-shadow: 1rpx 1rpx 8rpx 2rpx rgba(0,0,0,0.1);
- padding:24rpx 30rpx;
- border-radius: 20rpx;
- .artic_top{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- .artic_img{
- width:140rpx;
- height:140rpx;
- border-radius: 10rpx;
- margin-right:30rpx;
- flex-shrink: 0;
- }
- .artic_name{
- width:390rpx;
- font-size:28rpx;
- color:#666;
- margin-bottom:24rpx;
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- }
- .artic_info{
- display: flex;
- flex-wrap: nowrap;
- .artic_con{
- font-size:26rpx;
- height:100rpx;
- color:#999;
- line-height: 34rpx;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- overflow: hidden;
- }
- }
- }
- .artic_bot{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top:30rpx;
- .bot_left{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- .headerimg{
- width:50rpx;
- height:50rpx;
- border-radius: 50%;
- }
- .bot_name{
- font-size:26rpx;
- color:#999999;
- margin:0 30rpx;
- }
- .bot_time{
- font-size:26rpx;
- color:#999999;
- }
- }
- .bot_right{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .bot_right_box{
- display: flex;
- justify-content: center;
- align-items: center;
- font-size:26rpx;
- color:#999999;
- margin-right:24rpx;
- .openimg{
- width:30rpx;
- height:30rpx;
- margin-right:10rpx;
- }
- .commimg{
- width:25rpx;
- height:25rpx;
- margin-right:10rpx;
- }
- }
- }
- }
- }
- }
- .icon_creat {
- position: fixed;
- z-index: 1;
- bottom: 130rpx;
- right: 100rpx;
- image {
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- }
- }
- </style>
|