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 | 115 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 89 insertions(+), 26 deletions(-) diff --git a/hive-app/pages/mine/knowledge.vue b/hive-app/pages/mine/knowledge.vue index 899546b..7893fc7 100644 --- a/hive-app/pages/mine/knowledge.vue +++ b/hive-app/pages/mine/knowledge.vue @@ -4,54 +4,105 @@ <view class="list"> <scroll-view class="list-left" scroll-y="true"> <view class="list-left-row" - v-for="(item,index) in typeList" - :class="index==selectIndex?'active':''" - @click="changeType(item.id, index)"> - <text>{{item.name}}</text> + v-for="item in typeList" + :class="item.id==typeId?'active':''" + @click="changeType(item.id)"> + <text>{{item.articleTypeName}}</text> </view> </scroll-view> - <scroll-view class="list-right" scroll-y="true"> - <navigator :url="'../productDetail/index?id='+item.id" hover-class="none" v-for="item in list"> + <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.img?item.img:'../../../static/images/no-img.png'"></image> + <image class="product-img" :src="item.image?item.image:'../../static/images/no-img.png'"></image> <view class="flex-1"> - <text>{{item.name}}</text> - <view class="flex justify-between mt-15"> - <text class="price">¥{{item.price}}</text> + <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> + import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; export default { + components: { + uniLoadMore + }, data(){ return{ - typeList: [{ - name: '312', - id: 2 - }], - list: [{ - name: '312', - id: 2 - }], - selectIndex: 0 + typeList: [], + list: [], + typeId: '', + loadStatus: 'more', + pageNum: 1 } }, onLoad(options) { - // this.loadTypeList() + this.loadTypeList() + }, + onPullDownRefresh(){ + this.reloadData(); + let timer = setTimeout(function () { + uni.stopPullDownRefresh(); + clearTimeout(timer); + timer = null; + }, 800); }, methods:{ + 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){ - this.typeList = res.rows; + 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() } } } @@ -75,6 +126,7 @@ } .list-left{ width: 170rpx; + flex: 0 0 170rpx; background: #F6F6F8; border-radius: 4px; } @@ -92,17 +144,28 @@ } .list-right-row{ display: flex; - align-items: center; 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: 13px; + font-size: 12px; } .list-right-row .product-img{ - width: 66px; - height: 66px; - margin-right: 5px; + 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