滚动请求

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"/>
+        <GoodsLink :goodsDetail="goodsDetail" v-if="toUser.userId === goodsDetail.storeId" />
-                <FootPrint :list="footPrintList"/>
+        <FootPrint :list="footPrintList" @loadMore="loadMoreFootPrint()" />
       </div>
       <div v-else>
 
@@ -11,7 +11,7 @@
     </el-tab-pane>
     <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
       <div v-if="toUser.storeFlag">
-                <StoreDetail :storeInfo="storeInfo"/>
+        <StoreDetail :storeInfo="storeInfo" />
       </div>
     </el-tab-pane>
   </el-tabs>
@@ -46,12 +46,14 @@ export default {
       default: null,
     },
   },
-    data() {
+  data () {
     return {
       activeName: 'history',
       storeInfo: {}, //店铺信息
       memberInfo: {}, //会员信息
       footPrintParams: {
+        pageSize: 10,
+        pageNumber: 1,
         memberId: '',
         storeId: '',
       },
@@ -59,58 +61,63 @@ export default {
       footPrintList: [],
     }
   },
-    mounted() {
+  mounted () {
     console.log(this.id)
     console.log(this.toUser)
-        if(this.toUser.storeFlag){
+    if (this.toUser.storeFlag) {
       this.getStoreDetail()
-        }else{
+    } else {
       this.getMemberDetail()
     }
     this.getFootPrint()
-        if(this.goodsParams){
+    if (this.goodsParams) {
       this.getGoodsDetail()
     }
   },
   methods: {
-        getStoreDetail() {
+    getStoreDetail () {
       ServeGetStoreDetail(this.toUser.userId).then(res => {
         if (res.success) {
           this.storeInfo = res.result
         }
       })
     },
-        handleClick(){},
+    loadMoreFootPrint (e) {
-        getMemberDetail() {
+      //触底再次调接口
+      this.footPrintParams.pageNumber++
+      this.getFootPrint()
+    },
+    handleClick () { },
+    getMemberDetail () {
       ServeGetUserDetail(this.toUser.userId).then(res => {
         if (res.success) {
           this.memberInfo = res.result
         }
       })
     },
-        getGoodsDetail(){
+    getGoodsDetail () {
       ServeGetGoodsDetail(this.goodsParams).then(res => {
-                if(res.success){
+        if (res.success) {
           this.goodsDetail = res.result.data
         }
       })
     },
-        getFootPrint(){
+    getFootPrint () {
-            if(this.toUser.storeFlag){
+      if (this.toUser.storeFlag) {
         this.footPrintParams.memberId = this.id
         this.footPrintParams.storeId = this.toUser.userId
-            }else{
+      } else {
         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) => {
+        res.result.records.forEach((item, index) => {
-                   if(item.goodsId === this.goodsParams.goodsId){
+          if (item.goodsId === this.goodsParams.goodsId) {
-                    res.result.records.splice(index,1)
+            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,9 +1,13 @@
 <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 class="base" @click="linkToGoods(item.goodsId, item.id)">
           <div>
             <img :src="item.thumbnail" class="image" />
           </div>
@@ -20,20 +24,36 @@
 </template>
 
 <script>
-import { Tag, button } from 'element-ui'
+import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
 export default {
-    data() {
+  directives: {
+    "infinite-scroll": InfiniteScroll,
+  },
+  data () {
     return {
+      activeName: 'first'
     }
   },
   components: {
     "el-tag": Tag,
     "el-button": button,
+    "el-tabs": Tabs,
+    "el-tab-pane": TabPane,
   },
-    methods:{
+  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;
@@ -58,7 +105,7 @@ export default {
 
   div {
     overflow: hidden;
-        text-overflow:ellipsis;
+    text-overflow: ellipsis;
     margin-top: 8px;
     white-space: nowrap;
     margin-top: 4px;

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 {
+  div {
-    margin-top: 8px;
-  }
-
-  =======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,23 +1,24 @@
 <template>
+  <div style="width: 362px;">
+    <div class="base">
       <div>
-        <div class="base" >
+        <img :src="storeInfo.storeLogo" class="image" />
-            <div> 
-                <img :src="storeInfo.storeLogo" class="image"/>
       </div>
       <div style="margin-left: 13px">
         <div class="div-zoom">
           {{ storeInfo.storeName }}
-                    <el-tag type="danger" v-if=" storeInfo.selfOperated " size="mini">自营</el-tag>
+          <el-tag type="danger" v-if="storeInfo.selfOperated" size="mini">自营</el-tag>
         </div>
         <div>
           联系方式: {{ 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>
-        <hr class="separate"/>
+    <hr class="separate" />
     <div class="separate">店铺评分: <span>{{ storeInfo.serviceScore }}</span></div>
     <div class="separate">服务评分: <span>{{ storeInfo.descriptionScore }}</span></div>
     <div class="separate">物流评分: <span>{{ storeInfo.deliveryScore }}</span></div>
@@ -25,9 +26,9 @@
 </template>
 
 <script>
-import { Tag,button } from 'element-ui'
+import { Tag, button } from 'element-ui'
 export default {
-    data() {
+  data () {
     return {
     }
   },
@@ -35,7 +36,7 @@ export default {
     "el-tag": Tag,
     "el-button": button,
   },
-    methods:{
+  methods: {
   },
   props: {
     storeInfo: {
@@ -48,12 +49,12 @@ export default {
 </script>
 
 <style scoped lang="less">
-    .store-button{
+.store-button {
   background-color: white;
   border-color: #F56C6C;
-    }
+}
 
-    .base{
+.base {
   margin-top: 5px;
   height: 120px;
   display: flex;
@@ -62,14 +63,15 @@ export default {
     margin-top: 8px;
   }
 
-        .image{
+  .image {
     height: 100px;
     margin-top: 3px;
     width: 100px
   }
 
-    }
+}
-    .separate{
+
+.separate {
   margin-top: 8px;
-    }
+}
 </style>