feat: 处理头像组问题

src/components/avatorGroup.vue

 <template>
   <div class="avator-group">
     <div v-for="(item, index) in avators" :key="index" class="avator-item" :style="widthStyle">
-      <cr-image :class="{ avator: index == 0 }" width="44px" height="44px" :src="item" />
+      <cr-image class="avator-img" :class="{ avator: index == 0 }" width="" height="" :src="item" />
       <div v-if="index == 0" class="is-leader">
-        <cr-image width="22px" src="@/assets/images/leaderIcon.png" />
+        <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
       </div>
       <div v-if="index == 0" class="leader-name">
-        <cr-image width="35px" height="17px" src="@/assets/images/leader-name.png" />
+        <cr-image
+          class="leader-name-icon"
+          height=""
+          width=""
+          src="@/assets/images/leader-name.png"
+        />
       </div>
       <div v-else class="is-new">
         <cr-image width="25px" src="@/assets/images/new-user.png" />
@@ -15,7 +20,40 @@
     <div class="placeholder" :style="widthStyle">
       <div class="content">?</div>
     </div>
-    <div class="more" />
+    <div class="more" :style="widthStyle" @click="showMoreAvator">
+      <div class="content" />
+    </div>
+    <cr-dialog v-model="showDialogSlot" confirm-button-text="知道了" confirm-button-color="#ec1500">
+      <div slot="title">查看参团人员</div>
+      <div
+        style="width: 100%;
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;"
+      >
+        <div v-for="(item, index) in avators" :key="index" class="avator-item" :style="widthStyle">
+          <cr-image
+            :key="index"
+            :class="{ avator: index == 0 }"
+            class="avator-img"
+            width=""
+            height=""
+            :src="item"
+          />
+          <div v-if="index == 0" class="is-leader">
+            <cr-image class="crown" width="" height="" src="@/assets/images/leaderIcon.png" />
+          </div>
+          <div v-if="index == 0" class="leader-name">
+            <cr-image
+              class="leader-name-icon"
+              height=""
+              width=""
+              src="@/assets/images/leader-name.png"
+            />
+          </div>
+        </div>
+      </div>
+    </cr-dialog>
   </div>
 </template>
 <script>
@@ -31,8 +69,8 @@ export default {
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_05.png',
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
         'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png',
-        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_09.png',
-        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_10.png'
+        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_09.png'
+        // 'https://activitystatic.lkbang.net/mall-free-ui/img/avator_10.png'
         // 'https://activitystatic.lkbang.net/mall-free-ui/img/avator_10.png'
       ]
     },
@@ -47,7 +85,8 @@ export default {
   },
   data() {
     return {
-      isLeader: true // 标识是不是团长
+      isLeader: true, // 标识是不是团长
+      showDialogSlot: false // 查看参团人员
     };
   },
   computed: {
@@ -55,10 +94,72 @@ export default {
       // 用于单个头像不能占一排
       return this.avators.length == 6 ? { width: '25%' } : { width: '20%' };
     }
+  },
+  methods: {
+    showMoreAvator() {
+      this.showDialogSlot = true;
+    }
   }
 };
 </script>
 <style lang="less" scoped>
+.avator-item {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+  width: 20%;
+  height: 44px;
+  margin-top: @padding-lg;
+  .avator-img {
+    width: 44px;
+    height: 44px;
+  }
+  .avator {
+    background: url('../assets/images/leaderBorder.png');
+    // border: px solid rgba(255, 212, 0, 0.24);
+    background-size: cover;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /deep/ img {
+      width: 37px;
+      height: 37px;
+    }
+  }
+  .is-new {
+    position: absolute;
+    top: 0;
+    right: -@padding-unit;
+  }
+  .is-leader {
+    position: absolute;
+    right: 4px;
+    top: -9px;
+    .crown {
+      width: 22px;
+      height: 20px;
+    }
+  }
+  .leader-name {
+    width: 35px;
+    height: 17px;
+    position: absolute;
+    left: 50%;
+    bottom: -6px;
+    transform: translateX(-50%);
+    &-icon {
+      width: 100%;
+      height: 100%;
+      img {
+        width: 35px;
+        height: 17px;
+      }
+    }
+  }
+}
 .avator-group {
   position: relative;
   padding: 0 38 - @padding-sd;
@@ -69,48 +170,14 @@ export default {
   flex-wrap: wrap;
   justify-content: center;
   background: @white;
-  .avator-item {
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
-    position: relative;
-    width: 20%;
-    height: 44px;
-    margin-top: @padding-lg;
-    .avator {
-      background: url('../assets/images/leaderBorder.png');
-      // border: px solid rgba(255, 212, 0, 0.24);
-      background-size: cover;
-      border-radius: 50%;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      /deep/ img {
-        width: 37px;
-        height: 37px;
-      }
-    }
-    .is-new {
-      position: absolute;
-      top: 0;
-      right: -@padding-unit;
-    }
-    .is-leader {
-      position: absolute;
-      right: 4px;
-      top: -9px;
-    }
-    .leader-name {
-      width: 35px;
-      height: 17px;
-      position: absolute;
-      left: 50%;
-      bottom: -6px;
-      transform: translateX(-50%);
-    }
+  /deep/ .cr-dialog--header {
+    padding-bottom: 0;
   }
-  .placeholder {
+  /deep/ .cr-dialog--message {
+    padding-top: 0;
+  }
+  .placeholder,
+  .more {
     display: flex;
     justify-content: center;
     flex-shrink: 0;
@@ -119,10 +186,11 @@ export default {
     height: 44px;
     margin-top: @padding-lg;
     color: @red;
-    .text-18();
+    font-size: 18px;
     .content {
       display: flex;
       align-items: center;
+      align-content: center;
       justify-content: center;
       width: 44px;
       height: 44px;
@@ -132,5 +200,15 @@ export default {
       border: 1px dashed #ff9393;
     }
   }
+  .more {
+    .content {
+      border: 0;
+      letter-spacing: -0.43px;
+      &::after {
+        content: '...';
+        transform: translateY(-4px);
+      }
+    }
+  }
 }
 </style>

src/store/module.js

@@ -78,7 +78,8 @@ const mutations = {
   },
   [types.CHANGE_SHOW_MINI_APP_GUIDE](state, { bool, pointer }) {
     state.isPrimordialBrowser = bool;
-    if (!bool) {
+    if (bool) {
+      // 需要取反
       // 如果非app webview并且非小程序webview，直接拦截提示，到小程序操作
       pointer.$dialog({
         message: '请在微信小程序中参与此活动哦~',