From c4246ca910f28014efaace64ebf92f47a673a9cf Mon Sep 17 00:00:00 2001 From: queenwuli <942534046@qq.com> Date: Mon, 25 Jan 2021 11:47:46 +0800 Subject: [PATCH] gx --- hive-app/pages/mine/knowledge.vue | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 151 insertions(+), 28 deletions(-) diff --git a/hive-app/pages/mine/knowledge.vue b/hive-app/pages/mine/knowledge.vue index d4bc24a..7893fc7 100644 --- a/hive-app/pages/mine/knowledge.vue +++ b/hive-app/pages/mine/knowledge.vue @@ -1,48 +1,171 @@ <template> - <!-- 知识库 --> - <view> - <scroll-view class="list-left" scroll-y> - <view v-for="(item,index) in list" @click="show(item)"> - {{item.primaryTitle}} - <view v-for="sub in item.subTitle" v-show="item.isShow"> - {{sub}} + <!-- 当前客户 --> + <view class="container"> + <view class="list"> + <scroll-view class="list-left" scroll-y="true"> + <view class="list-left-row" + v-for="item in typeList" + :class="item.id==typeId?'active':''" + @click="changeType(item.id)"> + <text>{{item.articleTypeName}}</text> </view> - </view> - </scroll-view> - <scroll-view class="list-right"></scroll-view> + </scroll-view> + <scroll-view class="list-right" scroll-y="true" @scrolltolower="scrolltolower()"> + <navigator :url="'./knowledgeDetail?id='+item.id" hover-class="none" v-for="item in list"> + <view class="list-right-row"> + <image class="product-img" :src="item.image?item.image:'../../static/images/no-img.png'"></image> + <view class="flex-1"> + <text class="font-13">{{item.title}}</text> + <view class="desc"> + <text>{{item.articleTypeName}}</text> + </view> + </view> + </view> + </navigator> + <no-record :isShow="!list.length"></no-record> + <view v-if="list.length"> + <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more> + </view> + </scroll-view> + </view> </view> </template> <script> - export default{ + import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; + export default { + components: { + uniLoadMore + }, data(){ return{ - primaryTitle:['院装产品','美容套餐','美容客装','美容试装'], - subTitle:['院装产品','院装产品','院装产品','院装产品'], - list:[ - { - primaryTitle:'院装产品', - subTitle:['院装产品','院装产品','院装产品','院装产品'], - isShow:false - }, - { - primaryTitle:'美容套餐', - subTitle:['美容套餐','美容套餐','美容套餐','美容套餐'], - isShow:false - } - ], + typeList: [], + list: [], + typeId: '', + loadStatus: 'more', + pageNum: 1 } }, + onLoad(options) { + this.loadTypeList() + }, + onPullDownRefresh(){ + this.reloadData(); + let timer = setTimeout(function () { + uni.stopPullDownRefresh(); + clearTimeout(timer); + timer = null; + }, 800); + }, methods:{ - show(item){ - item.isShow=!item.isShow + reloadData(){ + this.list = []; + this.pageNum = 1; + this.loadStatus = 'more'; + this.loadList(); + }, + scrolltolower(){ + this.loadList() + }, + loadTypeList(){ + this.$httpUtils.request('/api/know/findKnowledgeType').then((res) => { + if(res.status == 200){ + let result = res.rows; + this.typeList = result; + if(result.length){ + this.typeId = result[0].id; + this.loadList() + } + } + }) + }, + loadList(){ + if(this.loadStatus!=='more'){ + return; + } + this.$httpUtils.request('/api/know/findArticleList', { + pageNum: this.pageNum, + pageSize: 10, + typeId: this.typeId + }, 'POST').then((res) => { + if(res.status == 200){ + let result = res.rows; + if(result.length < 10){ + this.loadStatus = 'noMore'; + } else { + this.pageNum ++ ; + this.loadStatus = 'more'; + } + this.list = this.list.concat(result); + } + }) + }, + changeType(id){ + this.typeId = id; + this.reloadData() } } } </script> <style> + page{ + height: 100%; + } + .container{ + display: flex; + flex-direction: column; + height: 100%; + padding: 10px 0 0; + box-sizing: border-box; + } + .list{ + flex: 1; + display: flex; + overflow: hidden; + } .list-left{ - width: 100px; + width: 170rpx; + flex: 0 0 170rpx; + background: #F6F6F8; + border-radius: 4px; + } + .list-right{ + flex: 1; + } + .list-left-row{ + padding: 10px; + color: #8c9fad; + font-size: 13px; + } + .list-left-row.active{ + background: #FFFFFF; + color: #000000; + } + .list-right-row{ + display: flex; + padding: 10px; + margin: 0 10px 10px; + border: 1px solid #EDEAF4; + box-shadow:0 6px 6px rgba(237,234,244,0.5); + border-radius: 4px; + font-size: 12px; + } + .list-right-row .product-img{ + width: 62px; + height: 62px; + margin-right: 10px; + } + .desc{ + margin-top: 8px; + color: #a5abaf; + word-break: break-all; + text-overflow: -o-ellipsis-lastline; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; } </style> -- Gitblit v1.9.1