From 84d3dd247d240cee9aec8fdf4b9c62015ed331af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B?= <994041296@163.com>
Date: Wed, 28 Dec 2022 14:54:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im/src/components/chat/panel/OtherLink.vue    | 218 +++++++++---------
 .../chat/panel/template/footPrint.vue         | 151 +++++++-----
 .../chat/panel/template/goodsLink.vue         |  10 +-
 .../chat/panel/template/storeDetail.vue       | 118 +++++-----
 4 files changed, 275 insertions(+), 222 deletions(-)

diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
index 15ed81ab..e9a2070c 100644
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -1,20 +1,20 @@
 <template>
-    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
-        <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"/>
-            </div>
-            <div v-else>
-                
-            </div>
-        </el-tab-pane>
-        <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
-            <div v-if="toUser.storeFlag">
-                <StoreDetail :storeInfo="storeInfo"/>
-            </div>
-        </el-tab-pane>
-    </el-tabs>
+  <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+    <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" @loadMore="loadMoreFootPrint()" />
+      </div>
+      <div v-else>
+
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="店铺信息" name="UserInfo" v-if="toUser.storeFlag">
+      <div v-if="toUser.storeFlag">
+        <StoreDetail :storeInfo="storeInfo" />
+      </div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
@@ -25,106 +25,114 @@ import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
 import GoodsLink from "@/components/chat/panel/template/goodsLink.vue";
 export default {
-    components: {
-        "el-tabs": Tabs,
-        "el-tab-pane": TabPane,
-        StoreDetail,
-        FootPrint,
-        GoodsLink
+  components: {
+    "el-tabs": Tabs,
+    "el-tab-pane": TabPane,
+    StoreDetail,
+    FootPrint,
+    GoodsLink
+  },
+  props: {
+    toUser: {
+      type: Object,
+      default: null,
     },
-    props: {
-        toUser: {
-            type: Object,
-            default: null,
-        },
-        id: {
-            type: String,
-            default: '',
-        },
-        goodsParams: {
-            type: Object,
-            default: null,
-        },
+    id: {
+      type: String,
+      default: '',
     },
-    data() {
-        return {
-            activeName: 'history',
-            storeInfo: {}, //店铺信息
-            memberInfo: {}, //会员信息
-            footPrintParams: {
-                memberId: '',
-                storeId: '',
-            },
-            goodsDetail: {},
-            footPrintList: [],
-        }
+    goodsParams: {
+      type: Object,
+      default: null,
     },
-    mounted() {
-        console.log(this.id)
-        console.log(this.toUser)
-        if(this.toUser.storeFlag){
-            this.getStoreDetail()
-        }else{
-            this.getMemberDetail()
-        }
-        this.getFootPrint()
-        if(this.goodsParams){
-            this.getGoodsDetail()
-        }
-    },
-    methods: {
-        getStoreDetail() {
-            ServeGetStoreDetail(this.toUser.userId).then(res => {
-                if (res.success) {
-                    this.storeInfo = res.result
-                }
-            })
-        },
-        handleClick(){},
-        getMemberDetail() {
-            ServeGetUserDetail(this.toUser.userId).then(res => {
-                if (res.success) {
-                    this.memberInfo = res.result
-                }
-            })
-        },
-        getGoodsDetail(){
-            ServeGetGoodsDetail(this.goodsParams).then(res => {
-                if(res.success){
-                    this.goodsDetail = res.result.data
-                }
-            })
-        },
-        getFootPrint(){
-            if(this.toUser.storeFlag){
-                this.footPrintParams.memberId = this.id
-                this.footPrintParams.storeId = this.toUser.userId
-            }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) => {
-                   if(item.goodsId === this.goodsParams.goodsId){
-                    res.result.records.splice(index,1)
-                   }
-                });
-                this.footPrintList = res.result.records
-            })
-            //删除掉刚加入的商品
-        },
+  },
+  data () {
+    return {
+      activeName: 'history',
+      storeInfo: {}, //店铺信息
+      memberInfo: {}, //会员信息
+      footPrintParams: {
+        pageSize: 10,
+        pageNumber: 1,
+        memberId: '',
+        storeId: '',
+      },
+      goodsDetail: {},
+      footPrintList: [],
     }
+  },
+  mounted () {
+    console.log(this.id)
+    console.log(this.toUser)
+    if (this.toUser.storeFlag) {
+      this.getStoreDetail()
+    } else {
+      this.getMemberDetail()
+    }
+    this.getFootPrint()
+    if (this.goodsParams) {
+      this.getGoodsDetail()
+    }
+  },
+  methods: {
+    getStoreDetail () {
+      ServeGetStoreDetail(this.toUser.userId).then(res => {
+        if (res.success) {
+          this.storeInfo = res.result
+        }
+      })
+    },
+    loadMoreFootPrint (e) {
+      //触底再次调接口
+      this.footPrintParams.pageNumber++
+      this.getFootPrint()
+    },
+    handleClick () { },
+    getMemberDetail () {
+      ServeGetUserDetail(this.toUser.userId).then(res => {
+        if (res.success) {
+          this.memberInfo = res.result
+        }
+      })
+    },
+    getGoodsDetail () {
+      ServeGetGoodsDetail(this.goodsParams).then(res => {
+        if (res.success) {
+          this.goodsDetail = res.result.data
+        }
+      })
+    },
+    getFootPrint () {
+      if (this.toUser.storeFlag) {
+        this.footPrintParams.memberId = this.id
+        this.footPrintParams.storeId = this.toUser.userId
+      } else {
+        this.footPrintParams.memberId = this.toUser.userId
+        this.footPrintParams.storeId = this.id
+      }
+      ServeGetFootPrint(this.footPrintParams).then(res => {
+        res.result.records.forEach((item, index) => {
+          if (item.goodsId === this.goodsParams.goodsId) {
+            res.result.records.splice(index, 1)
+          }
+        });
+        console.log(this.footPrintParams, 'this.footPrintParamsthis.footPrintParamsthis.footPrintParams');
+        this.footPrintList.push(...res.result.records)
+      })
+      //删除掉刚加入的商品
+    },
+  }
 }
 
 </script>
 
 <style scoped lang="less">
 /deep/ .el-tabs__nav {
-    height: 60px;
-    line-height: 60px;
+  height: 60px;
+  line-height: 60px;
 }
+
 /deep/ .el-tab-pane {
-    margin-left: 12px;
+  margin-left: 12px;
 }
 </style>
\ No newline at end of file
diff --git a/im/src/components/chat/panel/template/footPrint.vue b/im/src/components/chat/panel/template/footPrint.vue
index 3cb35cc6..800b48d1 100644
--- a/im/src/components/chat/panel/template/footPrint.vue
+++ b/im/src/components/chat/panel/template/footPrint.vue
@@ -1,78 +1,125 @@
 <template>
-    <div>
-        最近浏览
-        <dl>
-            <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" />
-                    </div>
-                    <div style="margin-left: 13px">
-                        <a>{{ item.goodsName }}</a>
-                        <div>
-                            <span style="color: red;">￥{{ item.price }}</span>
-                        </div>
-                    </div>
-                </div>
-            </dd>
-        </dl>
+  <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">
+        <div class="base" @click="linkToGoods(item.goodsId, item.id)">
+          <div>
+            <img :src="item.thumbnail" class="image" />
+          </div>
+          <div style="margin-left: 13px">
+            <a>{{ item.goodsName }}</a>
+            <div>
+              <span style="color: red;">￥{{ item.price }}</span>
+            </div>
+          </div>
+        </div>
+      </dd>
+    </dl>
+  </div>
 </template>
 
 <script>
-import { Tag, button } from 'element-ui'
+import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
 export default {
-    data() {
-        return {
-        }
+  directives: {
+    "infinite-scroll": InfiniteScroll,
+  },
+  data () {
+    return {
+      activeName: 'first'
+    }
+  },
+  components: {
+    "el-tag": Tag,
+    "el-button": button,
+    "el-tabs": Tabs,
+    "el-tab-pane": TabPane,
+  },
+  methods: {
+    scrollBottom (e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.srcElement
+      if (scrollTop + clientHeight >= scrollHeight) {
+        if (this.noMore) return
+        this.$emit('loadMore')
+      }
     },
-    components: {
-        "el-tag": Tag,
-        "el-button": button,
+    loadMore () {
+
     },
-    methods:{
-        loadMore(){
-            this.$emit('loadMore')
-        },
-    },
-    props: {
-        list: {
-            type: Array,
-            default: [],
-        },
+    handleClick (tab, event) {
+      console.log(tab, event);
+    }
+  },
+  props: {
+    list: {
+      type: Array,
+      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;
+  background-color: white;
+  border-color: #F56C6C;
 }
 
 .base {
-    margin-top: 5px;
-    height: 120px;
-    display: flex;
+  margin-top: 5px;
+  height: 120px;
+  display: flex;
 
-    div {
-        overflow: hidden;
-        text-overflow:ellipsis;
-        margin-top: 8px;
-        white-space: nowrap;
-        margin-top: 4px;
-    }
+  div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+    white-space: nowrap;
+    margin-top: 4px;
+  }
 
-    .image {
-        height: 100px;
-        margin-top: 3px;
-        width: 100px
-    }
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px
+  }
 
 }
 
 .separate {
-    margin-top: 8px;
+  margin-top: 8px;
 }
 </style>
\ No newline at end of file
diff --git a/im/src/components/chat/panel/template/goodsLink.vue b/im/src/components/chat/panel/template/goodsLink.vue
index 2d95d9b5..570f0c3f 100644
--- a/im/src/components/chat/panel/template/goodsLink.vue
+++ b/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
diff --git a/im/src/components/chat/panel/template/storeDetail.vue b/im/src/components/chat/panel/template/storeDetail.vue
index 470f09dc..d1034fd7 100644
--- a/im/src/components/chat/panel/template/storeDetail.vue
+++ b/im/src/components/chat/panel/template/storeDetail.vue
@@ -1,75 +1,77 @@
 <template>
-    <div>
-        <div class="base" >
-            <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>
-                </div>
-                <div>
-                    联系方式: {{ storeInfo.memberName }}
-                </div>
-                <div>
-                    <el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini" plain >进入店铺</el-button>
-                </div>
-            </div>
+  <div style="width: 362px;">
+    <div class="base">
+      <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>
         </div>
-        <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>
+        <div>
+          联系方式: {{ storeInfo.memberName }}
+        </div>
+        <div>
+          <el-button class="store-button" type="danger" @click="linkToStore(storeInfo.id)" size="mini"
+            plain>进入店铺</el-button>
+        </div>
+      </div>
     </div>
+    <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>
+  </div>
 </template>
 
 <script>
-import { Tag,button } from 'element-ui'
+import { Tag, button } from 'element-ui'
 export default {
-    data() {
-        return {
-        }
-    },
-    components: {
-        "el-tag": Tag,
-        "el-button": button,
-    },
-    methods:{
-    },
-    props: {
-        storeInfo: {
-            type: Object,
-            default: null,
-        },
+  data () {
+    return {
+    }
+  },
+  components: {
+    "el-tag": Tag,
+    "el-button": button,
+  },
+  methods: {
+  },
+  props: {
+    storeInfo: {
+      type: Object,
+      default: null,
     },
+  },
 }
 
 </script>
 
 <style scoped lang="less">
-    .store-button{
-        background-color: white;
-        border-color: #F56C6C;
-    }
+.store-button {
+  background-color: white;
+  border-color: #F56C6C;
+}
 
-    .base{
-        margin-top: 5px;
-        height: 120px;
-        display: flex;
+.base {
+  margin-top: 5px;
+  height: 120px;
+  display: flex;
 
-        div {
-            margin-top: 8px;
-        }
+  div {
+    margin-top: 8px;
+  }
 
-        .image{
-            height: 100px; 
-            margin-top: 3px; 
-            width: 100px
-        }
-        
-    }
-    .separate{
-        margin-top: 8px;
-    }
+  .image {
+    height: 100px;
+    margin-top: 3px;
+    width: 100px
+  }
+
+}
+
+.separate {
+  margin-top: 8px;
+}
 </style>
\ No newline at end of file