咨询服务 - 头像显示4个的加点

assets/css/consult/list.scss

@@ -512,10 +512,23 @@
                             height: 22px;
                             border-radius: 50%;
                             overflow: hidden;
+                            border: 2px solid #fff;
                             &:nth-of-type(n+1) {
                                 margin-left: -4px;
                             }
                         }
+                        .more-img {
+                            width: 22px;
+                            height: 22px;
+                            border: 2px solid #fff;
+                            display: inline-block;
+                            text-align: center;
+                            color: #999;
+                            font-size: 12px;
+                            background: #f4f4f4;
+                            border-radius: 50%;
+                            margin-left: -4px;
+                        }
                     }
                 }
             }

components/consult/dealSeoList.js

@@ -170,8 +170,8 @@ export default class DealSeoData {
                 }
                 // 最多展示3个头像
                 let zxViewInfo = item.zx_view_info || []
-                if (zxViewInfo.length > 3) {
-                    zxViewInfo = zxViewInfo.slice(0, 3)
+                if (zxViewInfo.length > 4) {
+                    zxViewInfo = zxViewInfo.slice(0, 4)
                 }
                 let zxLastOrder = item.zx_last_order || {}
                 if (zxLastOrder.buy_uid) {

pages/frontend/consult/list.vue

@@ -94,6 +94,7 @@
                         <div class="owner-info">
                             <a class="owner-content" :href="`/wo/${item.uid}`">
                                 <img :src="item.avatar" class="user-avatar" alt="userAvatar">
+                                <!-- <img class="img" :src="defaultImg" v-real-img="item.avatar" alt="userAvatar"> -->
                                 <span class="nickname">{{ item.nickname }}</span>
                                 <img class="cert-img" v-if="item.freework_level == 3" src="@/assets/img/common/cert-f3@2x.png">
                                 <img class="cert-img" v-if="item.freework_level == 2" src="@/assets/img/common/cert-f2@2x.png">
@@ -108,14 +109,24 @@
                         <div class="price-info">
                             <div class="price-content">
                                 <div class="price">￥{{ item.zxPriceMin }}<span>起</span></div>
-                                <div class="num">{{ item.zxViewNum }}人咨询过</div>
+                                <div class="num">{{ item.zxViewNum }}人浏览过</div>
                             </div>
                             <div class="buyer-content">
-                                <img
+                                <div v-if="item.zxViewInfo && item.zxViewInfo.length==4" style="display:flex;">
+                                    <img
+                                    class="buyer-item"
+                                    v-for="(buyerInfo, index) in item.zxViewInfo"
+                                    :key="`${buyerInfo.avatar}-${index}`"
+                                    :src="buyerInfo.avatar"/>
+                                    <span class="more-img">...</span>
+                                </div>
+                                <div v-else>
+                                    <img
                                     class="buyer-item"
                                     v-for="(buyerInfo, index) in item.zxViewInfo"
                                     :key="`${buyerInfo.avatar}-${index}`"
                                     :src="buyerInfo.avatar">
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -333,7 +344,8 @@ export default {
             categoryExpanded: true, // 更多按钮不要，默认为展开状态
             showCategoryDrawer: false,
             currentDrawerCategoryId: 0,
-            currentDrawerCategoryIndex: 0
+            currentDrawerCategoryIndex: 0,
+            // defaultImg: require('@/assets/img/common/empty@2x.png')
         }
     },
     head() {