文物展示地址栏加参数隐藏右上角按钮和关闭音乐

vue/src/views/Goods/index.vue

@@ -5,11 +5,19 @@
     <!-- 左侧搜索 -->
     <div class="leftTop">
       <div class="model">
-        <div class="row1" @click="model = '3D'" :class="{ active: model === '3D' }">
+        <div
+          class="row1"
+          @click="model = '3D'"
+          :class="{ active: model === '3D' }"
+        >
           <div class="rowll"></div>
           <div class="rowrr">三维馆藏</div>
         </div>
-        <div class="row1" @click="model = '2D'" :class="{ active: model === '2D' }">
+        <div
+          class="row1"
+          @click="model = '2D'"
+          :class="{ active: model === '2D' }"
+        >
           <div class="rowll"></div>
           <div class="rowrr">二维馆藏</div>
         </div>
@@ -17,20 +25,42 @@
       <div class="type">
         <div class="typell">类型：</div>
         <div class="typerr">
-          <div class="row" v-show="model === '2D' || item.type !== 'straw'" @click="genre = item.type"
-            :class="{ active: item.type === genre }" v-for="(item) in genreList" :key="item.bs">
+          <div
+            class="row"
+            v-show="model === '2D' || item.type !== 'straw'"
+            @click="genre = item.type"
+            :class="{ active: item.type === genre }"
+            v-for="item in genreList"
+            :key="item.bs"
+          >
             {{ item.name }}
           </div>
-          <div class="row" @click="genre = 'picture'" :class="{ active: 'picture' === genre }" v-if="model === '2D'">
+          <div
+            class="row"
+            @click="genre = 'picture'"
+            :class="{ active: 'picture' === genre }"
+            v-if="model === '2D'"
+          >
             照片
           </div>
-          <div class="row" @click="genre = 'Italy'" :class="{ active: 'Italy' === genre }" v-if="model === '2D'">
+          <div
+            class="row"
+            @click="genre = 'Italy'"
+            :class="{ active: 'Italy' === genre }"
+            v-if="model === '2D'"
+          >
             字画
           </div>
         </div>
       </div>
       <div class="inputSearch" @keyup.enter="mySearch">
-        <input class="searll" autofocus type="text" v-model="txt" placeholder="请输入文物名称" />
+        <input
+          class="searll"
+          autofocus
+          type="text"
+          v-model="txt"
+          placeholder="请输入文物名称"
+        />
         <div class="searrr" @click="mySearch">
           <img src="../../assets/img/Goods/search.svg" alt="" />
         </div>
@@ -38,17 +68,39 @@
     </div>
 
     <!-- 右侧图标 -->
-    <div class="rightTop">
-      <div class="row" @click="rightClisk(item.type)" v-for="item in rightList" :key="item.type" :class="{
-        active2:
-          (music && item.type === 2) ||
-          (like && item.type === 3) ||
-          (share && item.type === 4),
-      }">
-        <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-if="music && item.type === 2" />
-        <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="like && item.type === 3" />
-        <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="share && item.type === 4" />
-        <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" v-else />
+    <div class="rightTop" v-show="pageUrlShow">
+      <div
+        class="row"
+        @click="rightClisk(item.type)"
+        v-for="item in rightList"
+        :key="item.type"
+        :class="{
+          active2:
+            (music && item.type === 2) ||
+            (like && item.type === 3) ||
+            (share && item.type === 4),
+        }"
+      >
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-if="music && item.type === 2"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-else-if="like && item.type === 3"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
+          alt=""
+          v-else-if="share && item.type === 4"
+        />
+        <img
+          :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
+          alt=""
+          v-else
+        />
         <transition name="likeAddAnimate">
           <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
         </transition>
@@ -89,23 +141,21 @@
 </template>
 
 <script>
-import Guide from './components/Guide.vue'
+import Guide from "./components/Guide.vue";
 import { addNumAPI } from "@/utils/api";
 
 import { goodsData } from "./data";
 import Three from "./components/Three.vue";
 import Tow from "./components/Tow.vue";
 
-
-goodsData['2D'] = goodsData['2D'].map(v => ({
+goodsData["2D"] = goodsData["2D"].map((v) => ({
   ...v,
-  imgNum: v.imgNum && v.imgNum > 3 ? 3 : v.imgNum
-
-}))
+  imgNum: v.imgNum && v.imgNum > 3 ? 3 : v.imgNum,
+}));
 export default {
   name: "Goods",
   //import引入的组件需要注入到对象中才能使用
-  components: { Three, Tow,Guide },
+  components: { Three, Tow, Guide },
   data() {
     //这里存放数据
     return {
@@ -129,7 +179,8 @@ export default {
       like: false,
       share: false,
       data: [],
-
+      // 后面追加的地址栏参数隐藏右上角按钮和关闭背景音乐
+      pageUrlShow: true,
     };
   },
   //监听属性 类似于data概念
@@ -137,7 +188,7 @@ export default {
   //监控data中的数据变化
   watch: {
     genre(val) {
-      let temp = goodsData[this.model]
+      let temp = goodsData[this.model];
       if (val === "all") {
         this.data = temp.filter((v) => v.name.includes(this.txt));
       } else {
@@ -150,8 +201,10 @@ export default {
     },
     music(val) {
       let dom = document.querySelector("#bacMusic");
-      if (val) dom.play();
-      else dom.pause();
+      if (val) {
+        const urlK = this.$route.query.k;
+        if (!urlK) dom.play();
+      } else dom.pause();
     },
     model(val) {
       this.data = goodsData[val];
@@ -207,18 +260,26 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() { },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.data = goodsData[this.model];
+    // 看来地址栏参数，选择隐藏右上角的按钮和关闭音乐
+    const urlK = this.$route.query.k;
+    if (urlK) {
+      this.pageUrlShow = false;
+      setTimeout(() => {
+        this.music = false;
+      }, 100);
+    }
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -400,7 +461,7 @@ export default {
       text-align: center;
       margin-left: 24px;
 
-      &>img {
+      & > img {
         width: 50px;
       }
 
@@ -425,14 +486,14 @@ export default {
     justify-content: center;
     align-items: center;
 
-    &>div {
+    & > div {
       width: 240px;
 
-      &>img {
+      & > img {
         width: 100%;
       }
 
-      &>p {
+      & > p {
         text-align: center;
         color: #666666;
         font-size: 24px;