提交

queenwuli

2021-01-19 a3a48da30bdea132d2bfbb47fa2ccf83f1937c45

 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()
      },
      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>