Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

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" :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="48px" src="@/assets/images/leader.png" />
+        <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 v-else class="is-new">
         <cr-image width="25px" src="@/assets/images/new-user.png" />
       </div>
     </div>
+    <div class="placeholder" :style="widthStyle">
+      <div class="content">?</div>
+    </div>
+    <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>
@@ -24,9 +69,9 @@ 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_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'
       ]
     },
     desc: {
@@ -40,7 +85,8 @@ export default {
   },
   data() {
     return {
-      isLeader: true // 标识是不是团长
+      isLeader: true, // 标识是不是团长
+      showDialogSlot: false // 查看参团人员
     };
   },
   computed: {
@@ -48,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;
@@ -62,27 +170,44 @@ export default {
   flex-wrap: wrap;
   justify-content: center;
   background: @white;
-  .avator-item {
+  /deep/ .cr-dialog--header {
+    padding-bottom: 0;
+  }
+  /deep/ .cr-dialog--message {
+    padding-top: 0;
+  }
+  .placeholder,
+  .more {
+    display: flex;
+    justify-content: center;
     flex-shrink: 0;
     position: relative;
     width: 20%;
     height: 44px;
     margin-top: @padding-lg;
-    .avator {
-      border: 2px solid #ffd93d;
-      // border: px solid rgba(255, 212, 0, 0.24);
+    color: @red;
+    font-size: 18px;
+    .content {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
       border-radius: 50%;
+      background: #ffe1e1;
       box-sizing: border-box;
+      border: 1px dashed #ff9393;
     }
-    .is-new {
-      position: absolute;
-      top: 0;
-      right: @padding-unit * 2;
-    }
-    .is-leader {
-      position: absolute;
-      left: 2px;
-      top: -11px;
+  }
+  .more {
+    .content {
+      border: 0;
+      letter-spacing: -0.43px;
+      &::after {
+        content: '...';
+        transform: translateY(-4px);
+      }
     }
   }
 }

src/store/module.js

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

src/views/goodsDetail/components/bottomNav.vue

@@ -68,9 +68,25 @@ export default {
     };
   },
   methods: {
+    getToken() {
+      const that = this;
+      window.xyqbNativeEvent = function(res) {
+        const json = typeof res === 'string' ? JSON.parse(res) : res;
+        if (json.event === 'getTokenSuccess') {
+          const appData = json.data || {};
+          if (appData && appData.token) {
+            localStorage.get('vccToken', appData.token);
+            that.$nextTick(() => {
+              window.location.reload();
+            });
+          }
+        }
+      };
+      this.nativeBridge.getToken();
+    },
     checkLogin() {
       const vccToken = localStorage.get('vccToken');
-      const needLogin = vccToken ? true : false;
+      const needLogin = vccToken ? false : true;
       if (needLogin) {
         if (isApp) this.nativeBridge = new Bridge();
         else if (isWxMp) this.nativeBridge = new MpBridge();
@@ -85,10 +101,8 @@ export default {
                 newUrl: `/pages/user/login`
               });
             } else if (isApp) {
-              // todo 向app要一个scheme
-              this.nativeBridge.openNewUrl({
-                newUrl: ``
-              });
+              // native调用getToken
+              this.getToken();
             } else {
               this.$dialog({
                 message: '请在App或小程序中参与活动~',
@@ -100,10 +114,11 @@ export default {
           }
         });
       }
+      return needLogin;
     },
     joinGroup() {
       // 参团
-      if (!this.checkLogin()) {
+      if (this.checkLogin()) {
         // todo
         return;
       }
@@ -111,7 +126,7 @@ export default {
     },
     createGroup() {
       // 开团
-      if (!this.checkLogin()) {
+      if (this.checkLogin()) {
         // todo
         return;
       }