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,21 +94,16 @@ export default {
       // 用于单个头像不能占一排
       return this.avators.length == 6 ? { width: '25%' } : { width: '20%' };
     }
+  },
+  methods: {
+    showMoreAvator() {
+      this.showDialogSlot = true;
+    }
   }
 };
 </script>
 <style lang="less" scoped>
-.avator-group {
-  position: relative;
-  padding: 0 38 - @padding-sd;
-  box-sizing: border-box;
-  margin-bottom: @padding-md;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  background: @white;
-  .avator-item {
+.avator-item {
   display: flex;
   justify-content: center;
   flex-shrink: 0;
@@ -77,6 +111,10 @@ export default {
   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);
@@ -100,6 +138,10 @@ export default {
     position: absolute;
     right: 4px;
     top: -9px;
+    .crown {
+      width: 22px;
+      height: 20px;
+    }
   }
   .leader-name {
     width: 35px;
@@ -108,9 +150,34 @@ export default {
     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;
+  box-sizing: border-box;
+  margin-bottom: @padding-md;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  background: @white;
+  /deep/ .cr-dialog--header {
+    padding-bottom: 0;
   }
+  /deep/ .cr-dialog--message {
+    padding-top: 0;
   }
-  .placeholder {
+  .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: '请在微信小程序中参与此活动哦~',