feat

package.json

@@ -15,6 +15,7 @@
     "crypto-js": "^4.2.0",
     "jsonp": "^0.2.1",
     "lib-flexible": "^0.3.2",
+    "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
     "openai": "^4.96.0",
     "pinia": "^3.0.1",

public/static/data/food.json

@@ -72,14 +72,6 @@
     "url": ""
   },
   {
-    "id": 10,
-    "name": "铁山刁子鱼",
-    "desc": "",
-    "thumb": "铁山刁子鱼.png",
-    "video": "铁山刁子鱼.mp4",
-    "url": ""
-  },
-  {
     "id": 11,
     "name": "岳阳豆皮",
     "desc": "洞庭湖畔的岳阳豆皮，是本土早餐的灵魂。外皮以洞庭绿豆与早稻米（2:1）浸泡9小时磨浆，经发酵、摊凉、炸制等工序，成就金黄酥脆、内里柔韧的独特层次。\n2019年起，其制作技艺先后入选岳阳楼区、市级非遗。凭借咸香地道的口感、饱腹便携的特性，既是市井烟火味的承载，也是岳阳人舌尖的乡愁。",

public/static/data/quests.json

@@ -0,0 +1,11 @@
+[
+  "给我安排岳阳一日游行程?",
+  "岳阳好吃的地方在哪?",
+  "岳阳哪里最好玩?",
+  "岳阳适合周末带小朋友亲子休闲推荐?",
+  "预算1500，帮我制定去岳阳一家三口亲子游2天的旅游计划",
+  "岳阳最好吃的烧烤在哪?",
+  "岳阳网红打卡点",
+  "岳阳最美日落观赏点在哪?",
+  "岳阳观候鸟最佳的地方在哪？"
+]

public/static/data/weight.json

@@ -44,5 +44,20 @@
       121,
       123,
       116
+    ],
+    "6": [
+      102
+    ],
+    "3d": [
+      1,
+      157,
+      159,
+      14,
+      13,
+      15,
+      153,
+      2,
+      11,
+      158
     ]
   }

src/views/data/index.vue

@@ -113,6 +113,12 @@ const procressData = (list) => {
           }
 
           break;
+        case "三维模型":
+          if (item[key]) {
+            obj["modelLink"] = item[key];
+          }
+
+          break;
         case "普通图片":
           obj["images"] = item[key].replaceAll("，", ",").split(",");
 

src/views/food/index.vue

@@ -4,7 +4,7 @@
     <Header v-if="!isLandscape" title="数字美食" path="map" />
     <div class="top">
       <div class="food-title">{{ foodList[swipeIndex].name }}</div>
-      <div class="food-container" >
+      <div class="food-container">
         <div class="swiper-wrapper">
           <div class="swiper-slide" @click="goToView(i)" v-for="i in foodList">
             <div class="slide-bg"></div>
@@ -122,9 +122,7 @@ const initTab = () => {
       slideChange: (e) => {
         swipeIndex.value = swiper.activeIndex;
       },
-      init: () => {
-   
-      },
+      init: () => {},
     },
   });
 };
@@ -234,16 +232,17 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        margin: 0 0.5rem;
+        margin: 0 0.2667rem;
         > div {
-          width: 1rem;
-          height: 1rem;
+          width: 1.3333rem;
+          height: 1.3333rem;
           background: url("@/assets/images/food-model-btn.png") no-repeat;
           background-size: 100% 100%;
         }
         span {
           font-size: 0.28rem;
           color: #785b47;
+          margin-top: -0.1333rem;
         }
       }
       .video-btn {
@@ -251,16 +250,17 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        margin: 0 0.5rem;
+        margin: 0 0.2667rem;
         > div {
-          width: 1rem;
-          height: 1rem;
+          width: 1.3333rem;
+          height: 1.3333rem;
           background: url("@/assets/images/food-video-btn.png") no-repeat;
           background-size: 100% 100%;
         }
         span {
           font-size: 0.28rem;
           color: #785b47;
+          margin-top: -0.1333rem;
         }
         // position: absolute;
         // top: 23%;
@@ -277,7 +277,7 @@ onMounted(() => {
       overflow-y: auto;
       position: absolute;
 
-      top: 35%;
+      top: 40%;
       left: 50%;
       transform: translateX(-50%);
       font-weight: 400;
@@ -311,11 +311,11 @@ onMounted(() => {
   .food-container {
     // margin-top: 28vh;
     // height: 38%;
-    height: 76%;
+    height: 80%;
     width: 100%;
     position: absolute;
     // top: 22%;
-    top: 35%;
+    top: 40%;
     left: 0;
     // visibility: hidden;
     &.show {

src/views/line/index.vue

@@ -104,9 +104,9 @@ const lineTitle = ref("");
 const getHtml = (data) => {
   activeTagData.value = data;
   let html = `<div class="map-window">
-      <div class="img-box">
+      <div class="img-box"  id="vrBtn">
         <img src="./static/image/全部/${data.images[0]}">
-        <div style="${data.vrLink ? "" : "display:none"}" class="vr-btn" id="vrBtn"></div>
+        <div style="${data.vrLink ? "" : "display:none"}" class="vr-btn"></div>
         <div class="close-btn" id="closeBtn"></div>
         </div>
       <div class="map-window-controls">
@@ -126,9 +126,15 @@ const openVrLink = () => {
   if (activeTagData.value.vrLink) {
     // vrLink.value = activeTagData.value.vrLink;
     vrLink.value = activeTagData.value.vrLink;
+  } else {
+    openDetails();
   }
 };
 const closeTag = (e) => {
+  if (e) {
+    e.stopPropagation();
+  }
+
   activeTagData.value = null;
   infoWindow.close();
   infoWindow = null;
@@ -148,12 +154,23 @@ const hanlderMakerEvent = (e) => {
     const vrBtn = document.getElementById("vrBtn");
     const closeBtn = document.getElementById("closeBtn");
 
-    button.addEventListener("click", openDetails);
-    vrBtn.addEventListener("click", openVrLink);
-    closeBtn.addEventListener("click", closeTag);
+    if ("touchend" in window) {
+      button.addEventListener("touchend", openDetails);
+      vrBtn.addEventListener("touchend", openVrLink);
+      closeBtn.addEventListener("touchend", closeTag);
+    } else {
+      button.addEventListener("click", openDetails);
+      vrBtn.addEventListener("click", openVrLink);
+      closeBtn.addEventListener("click", closeTag);
+    }
     // button.addEventListener("touchstart", openDetails);
     // vrBtn.addEventListener("touchstart", openVrLink);
     // closeBtn.addEventListener("touchstart", closeTag);
+
+    // map.setZoomAndCenter(map.getZoom() + 2);
+    let center = data.location.split(",");
+    console.error(center);
+    map.setZoomAndCenter(map.getZoom(), center, false, 300);
   }, 100);
 };
 let markers = [];
@@ -177,10 +194,15 @@ const gotoItem = (data) => {
       const button = document.getElementById("detailsBtn");
       const vrBtn = document.getElementById("vrBtn");
       const closeBtn = document.getElementById("closeBtn");
-
-      button.addEventListener("click", openDetails);
-      vrBtn.addEventListener("click", openVrLink);
-      closeBtn.addEventListener("click", closeTag);
+      if ("touchend" in window) {
+        button.addEventListener("touchend", openDetails);
+        vrBtn.addEventListener("touchend", openVrLink);
+        closeBtn.addEventListener("touchend", closeTag);
+      } else {
+        button.addEventListener("click", openDetails);
+        vrBtn.addEventListener("click", openVrLink);
+        closeBtn.addEventListener("click", closeTag);
+      }
 
       // button.addEventListener("touchstart", openDetails);
       // vrBtn.addEventListener("touchstart", openVrLink);
@@ -304,7 +326,7 @@ const createdLine = () => {
       outlineColor: "#fff",
       borderWeight: 1,
       strokeWeight: 4,
-      strokeColor: "#FFB200",
+      strokeColor: "#F24546",
       strokeOpacity: 1,
       showDir: true,
       lineJoin: "round",

src/views/map/dialog.vue

@@ -58,7 +58,7 @@
     <iframe :src="vrLink" frameborder="0"></iframe>
   </div>
   <div class="vr-content" v-if="modelLink">
-    <div class="vr-back" @click="modelLink = ''"><img src="@/assets/images/vr-back.png" alt="" /></div>
+    <div class="vr-back" :class="{ pd: tabType == '3d' }" @click="closeModel"><img src="@/assets/images/vr-back.png" alt="" /></div>
     <iframe :src="modelLink" frameborder="0"></iframe>
   </div>
 </template>
@@ -75,6 +75,7 @@ const props = defineProps({
     default: null,
   },
 });
+const tabType = ref(null);
 const close = () => {
   emits("close");
 };
@@ -104,6 +105,10 @@ const plauMusic = () => {
     audioRef.value.pause();
   }
 };
+const closeModel = () => {
+  modelLink.value = "";
+  tabType.value = null;
+};
 const onPause = () => {
   isPlay.value = false;
 };
@@ -114,6 +119,7 @@ const goVr = () => {
   vrLink.value = props.dialogData.vrLink;
 };
 const goModel = () => {
+  tabType.value = "3d";
   modelLink.value = props.dialogData.modelLink;
 };
 onMounted(() => {
@@ -166,6 +172,9 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: center;
     justify-content: center;
+    &.pd {
+      top: 80px;
+    }
     img {
       width: 0.5333rem;
       height: 0.5333rem;
@@ -403,9 +412,10 @@ onBeforeUnmount(() => {
           justify-content: center;
           color: #fff;
           font-size: 0.3333rem;
-          &.model-btn {
-            margin-left: 0.4rem;
-          }
+              margin: 0 0.2rem;
+          // &.model-btn {
+          //   margin-left: 0.4rem;
+          // }
           // margin: 1.3333rem 0.22rem 0;
         }
       }

src/views/map/index.vue

@@ -45,7 +45,7 @@
     <div class="slide-tab">
       <div class="btn" @click="slideToView('/food')"></div>
       <div class="btn" @click="slideToView('/video')"></div>
-      <div class="td-btn"></div>
+      <div class="td-btn" :class="{ active: tabType == '3d' }" @click="goTd"></div>
     </div>
     <div class="chat-box" :class="{ show: showChat }">
       <!-- <div class="icon" @click="switchChat()"></div> -->
@@ -101,7 +101,12 @@
     </div>
   </div>
 
-  <Dialog v-if="dialogData" :dialogData="dialogData" @close="dialogData = null" />
+  <Dialog v-if="dialogData" :tabType="tabType" :dialogData="dialogData" @close="dialogData = null" />
+
+  <div class="vr-content" v-if="vrLink">
+    <div class="vr-back" :class="{ pd: tabType == '3d' }" @click="vrLink = ''"><img src="@/assets/images/vr-back.png" alt="" /></div>
+    <iframe :src="vrLink" frameborder="0"></iframe>
+  </div>
 </template>
 
 <script setup>
@@ -129,7 +134,7 @@ import axios from "axios";
 // import jsonp from "jsonp";
 
 import { useLineStore } from "@/stores/line";
-
+// import { throttle } from "lodash";
 const lineStore = useLineStore();
 const mapData = ref(null);
 const typeData = ref(null);
@@ -143,6 +148,25 @@ const getData = async () => {
     .catch((error) => {
       console.log(error);
     });
+  axios
+    .get("./static/data/quests.json")
+    .then((res) => {
+      questList.value = res.data;
+      nextTick(() => {
+        setTimeout(() => {
+          let questItems = document.querySelectorAll(".quest-item");
+          let w = 0;
+          questItems.forEach((item, index) => {
+            // console.error(item.getBoundingClientRect().width);
+            w += item.getBoundingClientRect().width + 10;
+          });
+          questW.value = w;
+        }, 0);
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
   await axios
     .get("./static/data/weight.json")
     .then((res) => {
@@ -227,13 +251,22 @@ const initTrvel = () => {
     });
   });
 };
+const goTd = () => {
+  // let data =
+  // tabType.value = "3d";
+  chooseItem({ type: "3d" });
+};
 
 const getHtml = (data) => {
   activeTagData.value = data;
+  let calssName = "vr-btn";
+  if (tabType.value == "3d" && data.modelLink) {
+    calssName = "vr-btn model-btn";
+  }
   let html = `<div class="map-window" id="mapWindow">
-      <div class="img-box">
+      <div class="img-box" id="vrBtn">
         <img src="./static/image/全部/${data.images[0]}">
-        <div style="${data.vrLink ? "" : "display:none"}" class="vr-btn" id="vrBtn"></div>
+        <div style="${data.vrLink || (tabType.value == "3d" && data.modelLink) ? "" : "display:none"}"  class="${calssName}" ></div>
         <div class="close-btn" id="closeBtn"></div>
         </div>
       <div class="map-window-controls">
@@ -251,20 +284,39 @@ const openDetails = (data) => {
 };
 const openVrLink = () => {
   // vrLink.value = activeTagData.value.vrLink;
-  vrLink.value = activeTagData.value.vrLink;
-  if (activeTagData.value.vrLink) {
-    // vrLink.value = activeTagData.value.vrLink;
+
+  if (tabType.value == "3d") {
+    vrLink.value = activeTagData.value.modelLink;
+    if (activeTagData.value.modelLink) {
+      // vrLink.value = activeTagData.value.vrLink;
+      vrLink.value = activeTagData.value.modelLink;
+    } else {
+      openDetails();
+    }
+  } else {
     vrLink.value = activeTagData.value.vrLink;
+    if (activeTagData.value.vrLink) {
+      // vrLink.value = activeTagData.value.vrLink;
+      vrLink.value = activeTagData.value.vrLink;
+    } else {
+      openDetails();
+    }
   }
 };
-const isClose = ref(false);
 const closeTag = (e) => {
+  if (e) {
+    e.stopPropagation();
+  }
+
+  if (!infoWindow) {
+    return;
+  }
   activeTagData.value = null;
   infoWindow.close();
   infoWindow = null;
 };
 const getDeg = () => {
-  let deg = 0;
+  let deg = 180;
   switch (tabType.value) {
     case 1:
       deg = -90;
@@ -324,17 +376,7 @@ let imageLayer = null;
 
 const tabType = ref(6);
 let openaiA = new OpenAI(deepseekConfig);
-const questList = ref([
-  "我安排岳阳一日游行程?",
-  "岳阳好吃的地方在哪?",
-  "岳阳哪里最好玩?",
-  "岳阳适合周末带小朋友亲子休闲推荐?",
-  "预算1500，帮我制定去岳阳一家三口亲子游2天的旅游计划",
-  "岳阳最好吃的烧烤在哪?",
-  "岳阳网红打卡点",
-  "岳阳最美日落观赏点在哪?",
-  "岳阳观候鸟最佳的地方在哪？",
-]);
+const questList = ref([]);
 
 let dataAll = {
   model: "deepseek-chat",
@@ -418,6 +460,7 @@ const chooseItem = (i, index) => {
   // marker.clearEvents("mousedown");
   // marker.off("mousedown", hanlderMakerEvent);
   tabType.value = i.type;
+  closeTag();
   switchView(false);
   if (markers.length) {
     markers.forEach((item) => {
@@ -560,25 +603,42 @@ const setMarker = () => {
 const setMarkerCluster = () => {
   let pointers = [];
   let weights = weightData.value[tabType.value];
-
-  let data = mapData.value.filter((item) => {
-
+  mapData.value.forEach((item, j_index) => {
     let weight = 1;
-    if (item.type == tabType.value) {
-      let pos = item.location.split(",");
-      if (weights) {
-        let index = weights.findIndex((w) => w == item.id);
-        if (index >= 0) {
-          // console.error(item.name, index, weights.length);
-          weight = weights.length - index + 1;
+    if (tabType.value == "3d") {
+      if (item.modelLink) {
+        let pos = item.location.split(",");
+        if (weights) {
+          let index = weights.findIndex((w) => w == item.id);
+          if (index >= 0) {
+            // console.error(item.name, index, weights.length);
+            weight = weights.length - index + 1;
+          }
         }
+        pointers.push({ weight, lnglat: [pos[0], pos[1]], info: item });
+
+        // return true;
       }
-      pointers.push({ weight, lnglat: [pos[0], pos[1]], info: item });
+    } else {
+      if (item.type == tabType.value) {
+        let pos = item.location.split(",");
+        if (weights) {
+          let index = weights.findIndex((w) => w == item.id);
+          if (index >= 0) {
+            // console.error(item.name, index, weights.length);
+            weight = weights.length - index + 1 + mapData.value.length;
+          } else {
+            weight = j_index;
+          }
+        } else {
+          weight = j_index;
+        }
+        pointers.push({ weight, lnglat: [pos[0], pos[1]], info: item });
 
-      // return true;
+        // return true;
+      }
     }
   });
-  console.error(mapData.value.filter(item=>item.type==6));
   clusters = new AMap.MarkerCluster(
     map, // 地图实例
     pointers, // 海量点数据，数据中需包含经纬度信息字段 lnglat
@@ -590,14 +650,14 @@ const setMarkerCluster = () => {
       //   url: `//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png`,
       //   size: new AMap.Size(50, 50),
       // },
-      renderClusterMarker: function (cluster) {
+      renderClusterMarker: (cluster) => {
         let iconW = 115 * 0.5,
           iconH = 115 * 0.5;
         // let offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
         let offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
         const { marker } = cluster;
         let extData = cluster.clusterData[0].info;
-        console.error(extData);
+        // console.error(extData);
         // marker.setContent(`<div class="custom-marker"><p>${extData.name}</p><img  src="${iconList[`tagIcon${extData.type}`]}" /></div>`);
         // marker.setContent(`<div class="custom-marker">${extData.length}</div>`);
         marker.setContent(
@@ -605,7 +665,7 @@ const setMarkerCluster = () => {
         );
         marker.setOffset(offset);
       },
-      renderMarker: function (cluster) {
+      renderMarker: (cluster) => {
         let extData = cluster.data[0].info;
         const { marker } = cluster;
         // if (data.iconSize) {
@@ -644,8 +704,12 @@ const setMarkerCluster = () => {
         //   content: extData.name, // 标签内容
         //   offset: new AMap.Pixel(0, -5), // 标签偏移量，可根据需要调整
         // });
+        let tagType = extData.type;
 
-        marker.setContent(`<div class="custom-marker"><p>${extData.name}</p><img style="width:${iconW}px;height:${iconH}px;" src="${iconList[`tagIcon${extData.type}`]}" /></div>`);
+        if (tabType.value == "3d") {
+          tagType = "3d";
+        }
+        marker.setContent(`<div class="custom-marker"><p>${extData.name}</p><img style="width:${iconW}px;height:${iconH}px;" src="${iconList[`tagIcon${tagType}`]}" /></div>`);
         marker.setOffset(offset);
       },
       style: {
@@ -681,12 +745,18 @@ const hanlderClusterEvent = (e) => {
       // mapWindow.addEventListener("click", (e) => {
       //   e.stopPropagation();
       // });
-      button.addEventListener("click", openDetails);
-      vrBtn.addEventListener("click", openVrLink);
-      closeBtn.addEventListener("click", closeTag);
-      // button.addEventListener("touchstart", openDetails);
-      // vrBtn.addEventListener("touchstart", openVrLink);
-      // closeBtn.addEventListener("touchstart", closeTag);
+
+      if ("touchend" in window) {
+        console.log("支持 touchend");
+        button.addEventListener("touchend", openDetails);
+        vrBtn.addEventListener("touchend", openVrLink);
+        closeBtn.addEventListener("touchend", closeTag);
+      } else {
+              console.log("不支持 touchend")
+        button.addEventListener("click", openDetails);
+        vrBtn.addEventListener("click", openVrLink);
+        closeBtn.addEventListener("click", closeTag);
+      }
     }, 100);
   } else {
     // console.error(map.getZoom());
@@ -821,8 +891,13 @@ const switchView = (effect = true) => {
         // scale = 10;
         break;
       case 4:
-      // scale = 12.4;
-      // center = [113.129162, 29.369332];
+        scale = 12.4;
+        center = [113.129162, 29.369332];
+        break;
+      case 5:
+        scale = 10.6;
+        center = [113.207352, 29.366234];
+        break;
       case 3:
         // scale = 12;
         break;
@@ -940,15 +1015,6 @@ onMounted(() => {
     // initHammer();
     // initTab();
     initKeyFrames();
-    setTimeout(() => {
-      let questItems = document.querySelectorAll(".quest-item");
-      let w = 0;
-      questItems.forEach((item, index) => {
-        // console.error(item.getBoundingClientRect().width);
-        w += item.getBoundingClientRect().width + 10;
-      });
-      questW.value = w;
-    }, 0);
   });
 });
 </script>
@@ -990,14 +1056,14 @@ onMounted(() => {
       background-size: 100% 100%;
       position: absolute;
       left: 50%;
-      top: 50%;
+      top: 48%;
       transform: translate(-50%, -50%);
       pointer-events: auto;
     }
     .circle-box {
       display: flex;
       position: absolute;
-      bottom: 0;
+      bottom: -10px;
       left: 50%;
       width: 100%;
       height: 100%;
@@ -1176,14 +1242,18 @@ onMounted(() => {
       }
     }
     .td-btn {
-      width: 0.76rem;
-      height: 0.76rem;
-      background: url("@/assets/images/map-3d.png") no-repeat;
+      width: 1.0267rem;
+      height: 1.0267rem;
+      background: url("@/assets/images/map-3d-normal.png") no-repeat;
       background-size: 100% 100%;
       position: absolute;
       bottom: -1.0667rem;
       left: 50%;
       transform: translateX(-50%);
+      &.active {
+        background: url("@/assets/images/map-3d.png") no-repeat;
+        background-size: 100% 100%;
+      }
     }
   }
   .tab-bar {
@@ -1626,6 +1696,7 @@ onMounted(() => {
   .img-box {
     width: 100%;
     height: 3.7333rem;
+    position: relative;
     .vr-btn {
       width: 1.4rem;
       height: 1.4rem;
@@ -1636,9 +1707,19 @@ onMounted(() => {
       left: 50%;
       transform: translate(-50%, -50%);
     }
+    .model-btn {
+      width: 1.4rem;
+      height: 1.4rem;
+      background: url("@/assets/images/model720.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
     .close-btn {
-      width: 0.4rem;
-      height: 0.4rem;
+      width: 0.5333rem;
+      height: 0.5333rem;
       background: url("@/assets/images/lineClose.png") no-repeat;
       background-size: 100% 100%;
       position: absolute;
@@ -1677,4 +1758,39 @@ onMounted(() => {
     }
   }
 }
+.vr-content {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  background-color: #232323;
+  .vr-back {
+    width: 0.8rem;
+    height: 0.8rem;
+    // background: url("@/assets/images/vr-back.png") no-repeat;
+    // background-size: 100% 100%;
+    position: absolute;
+    left: 15px;
+    top: 16px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.pd {
+      top: 80px;
+    }
+    img {
+      width: 0.5333rem;
+      height: 0.5333rem;
+    }
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

src/views/video/index.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="vr-content">
+  <div class="vr-content-video">
     <div class="vr-back" @click="router.replace('/map')"><img src="@/assets/images/vr-back.png" alt="" /></div>
     <video ref="videoDom" preload @click="play" :controls="false" :autoplay="true" :src="`./static/image/大美岳阳/1.m4v`" x5-playsinline playsinline webkit-playsinline="true"></video>
   </div>
@@ -15,7 +15,7 @@ const play = () => {
 };
 </script>
 <style lang="scss" scoped>
-.vr-content {
+.vr-content-video {
   position: absolute;
   width: 100%;
   height: 100%;

src/views/webview/index.vue

@@ -5,7 +5,7 @@
 
     <iframe :src="food.url" frameborder="0"></iframe>
 
-    <div class="miniprogram-btn" v-if="food.channel" @click="odorPlay">播放气味</div>
+    <div class="miniprogram-btn"  @click="odorPlay">播放气味</div>
   </div>
 </template>
 

yarn.lock

@@ -1420,6 +1420,11 @@ linkify-it@^5.0.0:
   dependencies:
     uc.micro "^2.0.0"
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"