From 9203a43facf5fd967aaafcfc41541a9f4565869a Mon Sep 17 00:00:00 2001 From: li-guang <153605324@qq.com> Date: Thu, 07 Jan 2021 11:29:28 +0800 Subject: [PATCH] Merge branch 'master' of https://gitee.com/jyyforjava/hive-app --- hive-app/pages/mine/knowledge.vue | 178 ++++++++++++++++++++++++++++++++++------------------------- 1 files changed, 103 insertions(+), 75 deletions(-) diff --git a/hive-app/pages/mine/knowledge.vue b/hive-app/pages/mine/knowledge.vue index 488ed59..f06e7a0 100644 --- a/hive-app/pages/mine/knowledge.vue +++ b/hive-app/pages/mine/knowledge.vue @@ -1,107 +1,135 @@ <template> - <!-- 知识库 --> - <view class="container flex"> - <scroll-view class="list-left" scroll-y> - <view v-for="(item,index) in list" class="list-left-row"> - <text @click="show(item)">{{item.primaryTitle}}</text> - <view v-for="(sub,index) in item.subTitle" v-show="item.isShow" class="list-left-row-item" @click="selectItem(index)" :class="index==select?'select-item':''"> - {{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-y> - <view class="flex align-center list-right-row"> - <image class="list-right-img ml-10" mode="aspectFit" src="../../static/images/head-img.jpg"></image> - <view class="flex flex-v ml-10"> - <text class="overflow-nowrap">我是文章的标题</text> - <text class="overflow-omit">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text> - </view> - </view> - </scroll-view> + </scroll-view> + <scroll-view class="list-right" scroll-y="true"> + <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> + </scroll-view> + </view> </view> </template> <script> - export default{ + export default { data(){ return{ - list:[ - { - primaryTitle:'院装产品', - subTitle:['水果','蔬菜'], - isShow:false, - }, - { - primaryTitle:'美容套餐', - subTitle:['水果','蔬菜'], - isShow:false - } - ], - select:'0' + typeList: [], + list: [], + typeId: '' } }, + onLoad(options) { + this.loadTypeList() + }, methods:{ - show(item){ - item.isShow=!item.isShow - this.select=0 + 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() + } + } + }) }, - selectItem(index){ - this.select=index + loadList(){ + this.$httpUtils.request('/api/know/findArticleList', { + pageNum: 1, + pageSize: 100, + typeId: this.typeId + }, 'POST').then((res) => { + if(res.status == 200){ + this.list = res.rows; + } + }) + }, + changeType(id){ + this.typeId = id; + this.loadList() } } } </script> <style> + page{ + height: 100%; + } .container{ - padding: 0 10px; - } - .list-left{ - /* width: 100px; */ - width: 25%; - text-align: center; - } - .list-left-row{ - padding: 0 10px; - margin-top: 10px; - font-size: 16px; display: flex; flex-direction: column; - align-items: center; + height: 100%; + padding: 10px 0 0; + box-sizing: border-box; } - .list-left-row-item{ - width: 80px; - margin-top: 8px; - font-size: 14px; + .list{ + flex: 1; + display: flex; + overflow: hidden; } - .select-item{ - background: red; - border-radius: 20px; - color: #FFFFFF; + .list-left{ + width: 170rpx; + flex: 0 0 170rpx; + background: #F6F6F8; + border-radius: 4px; } .list-right{ - width: 75%; + flex: 1; + } + .list-left-row{ + padding: 10px; + color: #8c9fad; + font-size: 13px; + } + .list-left-row.active{ + background: #FFFFFF; + color: #000000; } .list-right-row{ - border-left: 1px solid #ABB1CC; - border-bottom: 1px solid #ABB1CC; + 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-img{ - width: 200px; - height: 100px; + .list-right-row .product-img{ + width: 62px; + height: 62px; + margin-right: 10px; } - - /* 超过两行显示省略号 */ - .overflow-omit{ + .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; - -webkit-box-orient: vertical; - } - /* 只能一行,超出显示省略号 */ - .overflow-nowrap{ - white-space:nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; } </style> -- Gitblit v1.9.1