swkk: 底部导览栏 初步

src/App.vue

@@ -31,8 +31,19 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
 #app {
   height: 100%;
 }
+
+body {
+	::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+	::-webkit-scrollbar-thumb { background: #930909; border-radius: 2.08rem; }
+	::-webkit-scrollbar-button { background-color: transparent; height: 0; width: 0;}
+	::-webkit-scrollbar-track { background: #fff; border-radius: 2.08rem; }
+  // 横竖滚动条轨道交汇处
+  ::-webkit-scrollbar-corner { background: transparent; }
+  // 有必要给resizer设置border_radius吗？
+	::-webkit-scrollbar-resizer { background: transparent; border-radius: 6px; }
+}
 </style>

src/components/BottomBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="$route.meta.isShowBottomBar"
+    v-if="$route.meta.isShowBottomBar && !ifMustHide"
     class="bottom-bar"
     :class="{collapsed: isCollapsed}"
     :style="{
@@ -96,6 +96,7 @@ export default {
   },
   data() {
     return {
+      ifMustHide: false,
       isCollapsed: false,
       isShowPlusOne: false,
       isShowShareModal: false,
@@ -107,6 +108,14 @@ export default {
       'isFullScreen',
     ])
   },
+  mounted() {
+    this.$msgCenter.subscribe('swkk-guide-bar-show', () => {
+      this.ifMustHide = true
+    })
+    this.$msgCenter.subscribe('swkk-guide-bar-hide', () => {
+      this.ifMustHide = false
+    })
+  },
   methods: {
     ...globalMapMutations([
       'toggleMute',
@@ -126,7 +135,7 @@ export default {
     onClickShare() {
       this.isShowShareModal = true
     },
-  }
+  },
 }
 </script>
 

src/config.js

@@ -4,6 +4,10 @@ export default {
       self: '3',
       children: {},
     },
+    swkkGuideBar: {
+      self: '6',
+      children: {},
+    },
     relicInfo: {
       self: '2',
       children: {},

src/main.js

@@ -8,6 +8,7 @@ import "@/assets/style/my-reset.css"
 import clickOutside from "@/directives/v-click-outside.js"
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
+import { MessageCenter } from "@/utils.js"
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 
@@ -29,6 +30,7 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 
 Vue.prototype.$globalConfig = globalConfig
 Vue.prototype.$cdnPath = process.env.VUE_APP_CDN_PATH
+Vue.prototype.$msgCenter = new MessageCenter()
 
 const idealWindowInnerWidth = 2436 // 设计稿的宽度
 const idealRootFontSize = 24 // 设计稿里选择的根元素尺寸

src/utils.js

@@ -44,5 +44,59 @@ export default {
     setTimeout(() => {
       document.body.removeChild(toastNode)
     }, 1700)
+  },
+
+  /**
+ * 突然想到，无论是web端、小程序还是node中，似乎都不需要这货，或者其他第三方库……因为node中有类似的API，而web端和小程序中可以通过在document上手动触发CustomEvent、注册监听器来实现，不过确实麻烦一些。Vue中还可以直接通过一个通信总线组件来实现。
+ */
+
+}
+
+/**
+ * 如果想让注册的回调只调用一次就自动注销，在注册的回调中执行注销即可。
+ */
+export class MessageCenter {
+  constructor() {
+    this._recorder = {}
+  }
+
+  logInvalidParam() {
+    console.error('MessageCenter: invalid parameter.')
+  }
+
+  subscribe(message, callback) {
+    if (typeof (message) !== 'string' || typeof (callback) !== 'function') {
+      this.logInvalidParam()
+      return
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(this._recorder, message)) {
+      this._recorder[message] = []
+    }
+    this._recorder[message].push(callback)
+  }
+
+  unsubscribe(message, callback) {
+    if (typeof (message) !== 'string' || typeof (callback) !== 'function') {
+      this.logInvalidParam()
+      return
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(this._recorder, message)) {
+      const idx = this._recorder[message].indexOf(callback)
+      if (idx !== -1) {
+        this._recorder[message].splice(idx, 1)
+      }
+    }
+  }
+
+  publish(message, param) {
+    console.log(this._recorder)
+
+    if (Object.prototype.hasOwnProperty.call(this._recorder, message)) {
+      this._recorder[message].forEach((callback) => {
+        callback(param)
+      })
+    }
   }
 }

src/views/SwkkView.vue

@@ -104,6 +104,30 @@
         </div>
       </div>
     </div>
+
+    <!-- 导览栏 -->
+    <div
+      class="tour-guide-wrap"
+      :style="{
+        zIndex: $globalConfig.zIndex.swkkGuideBar.self
+      }"
+    >
+      <ul
+        v-if="tourList.length"
+        class="tour-guide"
+      >
+        <li
+          v-for="(item) in tourList"
+          :key="item.sid"
+        >
+          <img
+            :src="item.enter.cover"
+            alt=""
+            draggable="false"
+          >
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -116,7 +140,7 @@ export default {
       floor: 0,
       isLoading: true,
       mode: 2,
-
+      tourList: [],
       // ------- ?
       title: true,
       partId: 0,
@@ -127,6 +151,9 @@ export default {
       sonInfo: null,
     }
   },
+  beforeMount() {
+    this.$msgCenter.publish('swkk-guide-bar-show')
+  },
   mounted() {
     let floor = this.$route.query.floor
     this.floor = floor
@@ -205,10 +232,11 @@ export default {
       //   // 恢复背景音乐
       // })
 
-      // // 导览数据
-      // kankan.TourManager.on("loaded", (tours) => {
-      //   this.$refs.RbottomRef.baseSw(tours)
-      // })
+      // 导览数据
+      kankan.TourManager.on("loaded", (tours) => {
+        console.log('toures: ', tours)
+        this.tourList = tours[0].list
+      })
 
       // // 全部热点数据
       // kankan.store.on("tags", (tags) => {
@@ -304,10 +332,12 @@ export default {
     }, 1000)
 
   },
+  unMounted() {
+    this.$msgCenter.publish('swkk-guide-bar-hide')
+  },
   methods: {
     // 切换楼层
     changeFloor(val) {
-      // window.location.replace(`#/Swkk${val}`)
       this.$router.replace({
         name: 'SwkkView',
         query: { floor: val }
@@ -427,5 +457,34 @@ export default {
       }
     }
   }
+
+  .tour-guide-wrap {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 13.75rem;
+    background: rgba(216,178,117,0.6);
+    padding: 1.17rem 1.17rem 1.92rem 1.17rem;
+    .tour-guide {
+      display: flex;
+      align-items: center;
+      gap: 0.83rem;
+      overflow: auto;
+      width: 100%;
+      height: 100%;
+      > li {
+        flex: 0 0 auto;
+        width: 12.5rem;
+        height: 7.5rem;
+        > img {
+          background: #D26868;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
 }
 </style>