滚动请求

im/src/components/chat/panel/OtherLink.vue

@@ -1,9 +1,9 @@
 <template>
   <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
-        <el-tab-pane :label="toUser.storeFlag ? '想要咨询' : '他的足迹'" name="history">
+    <el-tab-pane :label="toUser.storeFlag ? '正在咨询' : '他的足迹'" name="history">
       <div style="margin-left: 12px;" v-if="toUser.storeFlag">
         <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId" />
-                <FootPrint :list="footPrintList"/>
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" />
       </div>
       <div v-else>
 
@@ -52,6 +52,8 @@ export default {
       storeInfo: {}, //店铺信息
       memberInfo: {}, //会员信息
       footPrintParams: {
+        pageSize: 10,
+        pageNumber: 1,
         memberId: '',
         storeId: '',
       },
@@ -80,6 +82,11 @@ export default {
         }
       })
     },
+    loadMoreFootPrint (e) {
+      //触底再次调接口
+      this.footPrintParams.pageNumber++
+      this.getFootPrint()
+    },
     handleClick () { },
     getMemberDetail () {
       ServeGetUserDetail(this.toUser.userId).then(res => {
@@ -103,14 +110,14 @@ export default {
         this.footPrintParams.memberId = this.toUser.userId
         this.footPrintParams.storeId = this.id
       }
-            console.log(this.footPrintParams)
       ServeGetFootPrint(this.footPrintParams).then(res => {
         res.result.records.forEach((item, index) => {
           if (item.goodsId === this.goodsParams.goodsId) {
             res.result.records.splice(index, 1)
           }
         });
-                this.footPrintList = res.result.records
+        console.log(this.footPrintParams, 'this.footPrintParamsthis.footPrintParamsthis.footPrintParams');
+        this.footPrintList.push(...res.result.records)
       })
       //删除掉刚加入的商品
     },
@@ -124,6 +131,7 @@ export default {
   height: 60px;
   line-height: 60px;
 }
+
 /deep/ .el-tab-pane {
   margin-left: 12px;
 }

im/src/components/chat/panel/template/footPrint.vue

@@ -1,8 +1,12 @@
 <template>
-    <div>
-        最近浏览
+  <div class="box" @scroll="scrollBottom">
+    <div class="tab">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="最近浏览" name="first"></el-tab-pane>
+      </el-tabs>
+    </div>
     <dl>
-            <dd v-for="item in list" v-infinite-scroll="loadMore()">
+      <dd v-for="item in list" v-infinite-scroll="loadMore">
         <div class="base" @click="linkToGoods(item.goodsId, item.id)">
           <div>
             <img :src="item.thumbnail" class="image" />
@@ -20,20 +24,36 @@
 </template>
 
 <script>
-import { Tag, button } from 'element-ui'
+import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
 export default {
+  directives: {
+    "infinite-scroll": InfiniteScroll,
+  },
   data () {
     return {
+      activeName: 'first'
     }
   },
   components: {
     "el-tag": Tag,
     "el-button": button,
+    "el-tabs": Tabs,
+    "el-tab-pane": TabPane,
   },
   methods: {
-        loadMore(){
+    scrollBottom (e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.srcElement
+      if (scrollTop + clientHeight >= scrollHeight) {
+        if (this.noMore) return
         this.$emit('loadMore')
+      }
     },
+    loadMore () {
+
+    },
+    handleClick (tab, event) {
+      console.log(tab, event);
+    }
   },
   props: {
     list: {
@@ -41,11 +61,38 @@ export default {
       default: [],
     },
   },
+  mounted () {
+    console.log(this.list, 'list');
+  }
 }
 
 </script>
 
 <style scoped lang="less">
+/deep/ .el-tabs__item.is-top:last-child {
+  color: black;
+}
+
+/deep/.el-tabs__active-bar {
+  background-color: #f23030;
+}
+
+/deep/ .el-tabs__nav.is-top {
+  height: 50px;
+}
+
+.tab {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+  height: 500px;
+  overflow: auto;
+  width: 350px;
+}
+
 .store-button {
   background-color: white;
   border-color: #F56C6C;

im/src/components/chat/panel/template/goodsLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width: 350px;">
     当前浏览
     <div class="base">
       <div>
@@ -158,11 +158,7 @@ export default {
   height: 120px;
   display: flex;
 
-  <<<<<<< HEAD div {
-    margin-top: 8px;
-  }
-
-  =======div {
+  div {
     overflow: hidden;
     text-overflow: ellipsis;
     margin-top: 8px;
@@ -170,7 +166,7 @@ export default {
     margin-top: 8px;
   }
 
-  >>>>>>>aa4dbc1bbd212aedbdfbecefb3f5f977aec0cc14 .image {
+  .image {
     height: 100px;
     margin-top: 3px;
     width: 100px

im/src/components/chat/panel/template/storeDetail.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+  <div style="width: 362px;">
     <div class="base">
       <div>
         <img :src="storeInfo.storeLogo" class="image" />
@@ -13,7 +13,8 @@
           联系方式: {{ storeInfo.memberName }}
         </div>
         <div>
-                    <el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini" plain >进入店铺</el-button>
+          <el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini"
+            plain>进入店铺</el-button>
         </div>
       </div>
     </div>
@@ -69,6 +70,7 @@ export default {
   }
 
 }
+
 .separate {
   margin-top: 8px;
 }