feature

1. 橱窗修复bug

components/modules-vertical/footerBox/index.vue

@@ -3,7 +3,7 @@
     <div class="send-box" v-show="!isInput">
       <send-box></send-box>
     </div>
-    <div class="shop-box" v-show="!isInput">
+    <div class="shop-box" v-show="!isInput" v-if="caseInfo && caseInfo.status">
       <shop-box></shop-box>
     </div>
     <div class="more-box" v-show="!isInput">
@@ -35,6 +35,7 @@ export default {
   },
   computed: {
     ...mapGetters({
+      caseInfo: 'caseInfo',
       channelInfo: 'channelInfo',
       channelConfig: 'channelConfig'
     }),

components/modules-vertical/shopBox/index.vue

 <template>
   <div class="shop">
     <div class="btn">
-       <showcase />
-      <div class="icon" @click="isShow = true"></div>
+       <showcase @enterMarket="_enterMarket"/>
+       <div class="icon" @click.stop="isShow = !isShow"></div>
     </div>
-    <transition name="move-bottom">
+    <market-frame v-model="isShow" :marketSrc="marketSrc"/>
+    <!-- <transition name="move-bottom">
       <div class="shop-mask" v-transfer-dom v-show="isShow">
         <div class="mask" @click="isShow = false"></div>
         <div class="box">
           <shop-list v-model="isShow"></shop-list>
         </div>
       </div>
-    </transition>
-    <div class="shop-hot-box">
+    </transition> -->
+    <!-- <div class="shop-hot-box">
       <shop-hot></shop-hot>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import shopList from './shopList/index';
-import shopHot from './shopHot/index';
 import showcase from '@/components/showcase/index.vue';
+import marketFrame from '@/components/showcase/marketFrame.vue';
 export default {
   name: 'vertical-shop-box',
   components: {
-    shopList,
-    shopHot,
-    showcase
+    showcase,
+    marketFrame
   },
   data() {
     return {
-      isShow: false
+      isShow: false,
+      marketSrc: ''
     };
   },
   computed: {
     ...mapGetters({
       userInfo: 'userInfo'
-    })
+    }),
   },
-  methods: {}
+  methods: {
+    _enterMarket(url) {
+      this.marketSrc = url
+      this.show = !this.show
+    },
+  }
 };
 </script>
 <style lang="less" scoped>

components/modules/menuBox/menuClass/playLists/index.vue

@@ -139,7 +139,7 @@ export default {
         line-height: 0.2rem;
         overflow: hidden;
         font-size: 0.13rem;
-        color: #333333;
+        color: var(--main-color);
         text-align: justify;
         word-break: break-all;
         font-weight: 800;

components/modules/menuBox/menuClass/shop/hot.vue

@@ -62,15 +62,15 @@ export default {
         if (Object.keys(res.data).length !== 0) {
           this.info = res.data;
         }
-        console.log(res.data)
       } else {
         this.$layer.msg(res.errorMessage);
       }
       const topRes = await getTopGoodsInfo({
-        includeId: this.menuId,
+        includeId: this.channelInfo.id,
         uin: this.channelInfo.uin,
-        type: 1
+        type: 'live'
       });
+      console.log('topRes',topRes)
       if (topRes.code === 200 && topRes.errorCode === 0) {
         if (Object.keys(topRes.data).length !== 0) {
           this.info = topRes.data;
@@ -105,16 +105,10 @@ export default {
       }
     },
     setCaseTopGoods(data) {
-      const { caseId, uin, include, goodInfo } = data;
-      if (include.live.includes(this.channelInfo.id) && uin === this.channelInfo.uin && caseId){
-        this.info = goodInfo;
-      }
+        this.info = data;
     },
     unSetCaseTopGoods(data) {
-      const { caseId, include, uin } = data;
-      if (include.live.includes(this.channelInfo.id) && uin === this.channelInfo.uin && caseId){
         this.info = {};
-      }
     },
     setTopShop(data) {
       const { type, includeId, goodInfo } = data;

components/modules/menuBox/menuClass/shop/index.vue

@@ -211,11 +211,10 @@ export default {
   position: relative;
   padding: 0 0.1rem;
   height: 100%;
-  background-color: #f6f6f6;
   overflow: auto;
   .count {
     padding: 0.1rem 0;
-    color: #26242d;
+    color: var(--main-color);
     font-size: 0.12rem;
   }
   .list {

components/modules/sendBox/index.vue

@@ -42,7 +42,7 @@
           <more-box v-if="showMore" :key="2"></more-box>
         </transition-group>
       </keep-alive>
-      <market-frame :showMarket="showMarket" :marketSrc="marketSrc"/>
+      <market-frame v-model="showMarket" :marketSrc="marketSrc"/>
     </div>
   </div>
 </template>

components/shop/source/command.vue

@@ -60,7 +60,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: rgba(101, 101, 101, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   .box {
     position: absolute;
     top: 50%;

components/shop/source/link.vue

@@ -53,7 +53,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: rgba(101, 101, 101, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   .box {
     position: absolute;
     top: 50%;

components/showcase/index.vue

 <template>
+<div>
   <div class="case-box" v-if="caseInfo.goodsInfo.id">
       <div class="goods" :style="{transform: open ?  'unset' : 'translate3d(0, 120%, 0)'}" @click="_enterMarket">
         <div class="image-box">
@@ -28,14 +29,32 @@
         </div>
       </div>
    </div>
+    <transition name="fade">
+      <div class="shop-link-box" v-transfer-dom v-if="isShow && caseInfo.goodsInfo.source == 1">
+        <source-link v-model="isShow" :content="caseInfo.goodsInfo.sourceContent"></source-link>
+      </div>
+    </transition>
+    <transition name="fade">
+      <div class="shop-command-box" v-transfer-dom v-if="isShow && caseInfo.goodsInfo.source == 2">
+        <source-command v-model="isShow" :content="caseInfo.goodsInfo.sourceContent"></source-command>
+      </div>
+    </transition>
+</div>
 </template>
 
 <script>
+const sourceLink = r => require(['@/components/shop/source/link'], r);
+const sourceCommand = r => require(['@/components/shop/source/command'], r);
 import { mapGetters } from 'vuex';
 export default {
+  components: {
+    sourceLink,
+    sourceCommand
+  },
   data() {
     return {
-      open: true
+      open: true,
+      isShow: false
     }
   },
   computed: {
@@ -49,13 +68,26 @@ export default {
   },
   methods: {
     _enterMarket() {
-      this.$emit('enterMarket', `/showcase?uin=${this.channelInfo.uin}&caseId=${this.caseInfo.caseId}`)
+      if (this.caseInfo.goodsInfo.type === 2){
+        this.isShow = !this.isShow
+      } else {
+        this.$emit('enterMarket', `/showcase?uin=${this.channelInfo.uin}&caseId=${this.caseInfo.caseId}&goodsId=${550}`)
+      }
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.shop-link-box,
+.shop-command-box {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+}
 .case-box {
    position: absolute;
    bottom: 0.4rem;

components/showcase/marketFrame.vue

 <template>
   <transition name="move-bottom">
-     <div class="shop-mask" v-transfer-dom v-if="show">
-       <div class="mask" @click="show = false"></div>
-       <div class="box">
+     <div class="shop-mask" v-transfer-dom v-if="isShow">
+       <div class="mask" @click="_close"></div>
+       <div class="box" @click.stop>
          <iframe
-           :src="marketSrc ? `${DEF_SITE}/shop${marketSrc}` : `${DEF_SITE}/shop/home?uin=${channelInfo.uin}`"
+           :src="marketSrc ? `${DEF_SITE}/shop${marketSrc}` : `${DEF_SITE}/shop/showcase?uin=${channelInfo.uin}/&caseId=${caseInfo.caseId}`"
            width="100%"
            height="100%"
          />
@@ -17,10 +17,7 @@
 import { mapGetters } from 'vuex';
 export default {
   props: {
-    showMarket: {
-      type: Boolean,
-      default: false
-    },
+    value: {},
     marketSrc: {
       type: String,
       default: ''
@@ -32,19 +29,27 @@ export default {
     };
   },
   computed: {
-     ...mapGetters({
+    isShow: {
+      get() {
+        return this.value;
+      },
+      set(nVal) {
+        this.$emit('input', nVal);
+      }
+    },
+    ...mapGetters({
+      caseInfo: 'caseInfo',
       channelInfo: 'channelInfo',
     }),
-     DEF_SITE() {
+    DEF_SITE() {
       return process.env.DEF_SITE
+    }
+  },
+  methods: {
+    _close() {
+      this.isShow = false;
     },
   },
-  methods: {},
-  watch: {
-    showMarket(newVal) {
-      this.show = newVal
-    }
-  }
 };
 </script>
 
@@ -69,7 +74,7 @@ export default {
      right: 0;
      bottom: 0;
      z-index: 100;
-     height: 80%;
+     height: 70%;
      min-height: 3rem;
      border-radius: 0.1rem 0.1rem 0px 0px;
      overflow: hidden;

plugins/Mixin/dms.js

 import { mapGetters, mapMutations } from 'vuex';
-
+import {
+  getExplainingGoodsInfo
+} from '@/plugins/API/apiShop';
 const mixin = {
   data() {
     return {
@@ -263,7 +265,7 @@ const mixin = {
       }
     },
     // eslint-disable-next-line complexity
-    _dmsActivity(data) {
+    async _dmsActivity(data) {
       console.log(data)
       if (data.cmd === 'vote_set_include') {
         this.$Bus.$emit('bus-voteList', data);
@@ -333,17 +335,24 @@ const mixin = {
       // new !
       if (data.cmd === 'setCaseTopGoods') {
         // 推荐商品
-        this.$Bus.$emit('bus-setCaseTopGoods', data);
+        const { caseId, uin, include, goodsInfo } = data;
+        if (include.live.includes(this.channelInfo.id) && uin === this.channelInfo.uin && caseId){
+          this.$Bus.$emit('bus-setCaseTopGoods', goodsInfo);
+        }
         return false;
       }
       if (data.cmd === 'unSetCaseTopGoods') {
         // 取消推荐商品
-        this.$Bus.$emit('bus-unSetCaseTopGoods', data);
+        const { caseId, uin, include, goodsInfo } = data;
+        if (include.live.includes(this.channelInfo.id) && uin === this.channelInfo.uin && caseId){
+           this.$Bus.$emit('bus-unSetCaseTopGoods', goodsInfo);
+        }
         return false;
       }
       if (data.cmd === 'unSetCaseExplainGoods') {
         this.set_caseInfo({
-          status: 0,
+          status: this.caseInfo.status,
+          caseId: data.caseId,
           goodsInfo: {}
         })
       }
@@ -352,15 +361,24 @@ const mixin = {
         if (data.include.live.includes(channelId)) {
           this.set_caseInfo({
             status: 1,
+            caseId: data.caseId,
             goodsInfo: data.goodsInfo
           })
         }
       }
       if (data.cmd === 'setCase') {
+        let goodsInfo = null
+        if (data.config && data.config.status === 1){
+          const { id, uin } = this.channelInfo;
+          const res = await getExplainingGoodsInfo({ includeId: id, type: 'live', uin });
+          if (res.code === 200 && res.errorCode === 0) {
+            goodsInfo = res.data
+          }
+        }
         this.set_caseInfo({
           status: data.config.status,
-          caseId: data.caseId,
-          goodsInfo: this.caseInfo.goodsInfo
+          caseId: data.config.caseId,
+          goodsInfo: goodsInfo || this.caseInfo.goodsInfo
         })
       }
     },