美食详情页 功能

yfyc/public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="format-detection" content="telephone=yes"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="./jquery-2.1.1.min.js"></script>
     <script src="./masonry.pkgd.min.js"></script>

yfyc/src/views/My/index.vue

@@ -58,14 +58,17 @@ data() {
       {
         icon: require('@/assets/img/service/like.png'),
         name: '我的点赞',
+        fn: this.pleaseWait,
       },
       {
         icon: require('@/assets/img/service/share.png'),
         name: '我的分享',
+        fn: this.pleaseWait,
       },
       {
         icon: require('@/assets/img/service/favorites.png'),
         name: '我的收藏',
+        fn: this.pleaseWait,
       },
       {
         icon: require('@/assets/img/service/mail.png'),
@@ -88,6 +91,9 @@ methods: {
   },
   onClickMyBookings() {
     this.$router.push({name: 'MyBookings'})
+  },
+  pleaseWait() {
+    globalToast("敬请期待!")
   }
 },
 created() {

yfyc/src/views/Serve/FoodDetail.vue

@@ -2,41 +2,41 @@
   <div class="food-detail">
     <img src="@/assets/img/my/food-detail-banner-bg.png" alt="" class="banner-bg">
     <div class="banner-card">
-      <h2>美食店铺名称（仁和新街点）</h2>
+      <h2>{{info.name}}</h2>
       <div class="star">
         <img
-          v-for="n in 5"
+          v-for="n in info.star"
           :key="n"
           src="@/assets/img/service/star.png" alt="" class="star"
         >
-        5
+        {{info.star}}
       </div>
       <div class="tag-list">
         <div class="tag">
-          菜系标签
+          {{typeList[this.info.typeIdx]}}
         </div>
-        <div class="tag">
+        <!-- <div class="tag">
           评价标签
         </div>
         <div class="tag">
           其他标签
-        </div>
+        </div> -->
       </div>
-      <img src="@/assets/img/service/food-detail-banner.png" alt="" class="shop-banner">
+      <img :src="require(`@/assets/img/service/food/${info.coverName}`)" alt="" class="shop-banner">
       <div class="bottom-bar">
         <div class="left">
           <img src="@/assets/img/service/address-gray.png" alt="" class="icon">
-          <div class="address">鸠江区仁和路和兴街S12栋S110号</div>
+          <div class="address">{{info.address}}</div>
         </div>
         <div class="right">
-          <button class="nav">
+          <button class="nav" @click="onClickNav">
             <img class="" src="@/assets/img/service/navigation-gray.png" alt="" draggable="false">
             导航
           </button>
-          <button class="phone">
+          <a v-if="info.phone" class="phone" :href="`tel:${info.phone}`">
             <img class="" src="@/assets/img/service/phone-gray-2.png" alt="" draggable="false">
             电话
-          </button>
+          </a>
         </div>
       </div>
     </div>
@@ -50,22 +50,13 @@
       </div>
       <div class="swiper-container-food">
         <div class="swiper-wrapper">
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【古建筑】.png" alt="">
-            <div class="title-wrap">
-              <h4>美食名称</h4>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【快速浏览】.png" alt="">
+          <div class="swiper-slide"
+            v-for="(item, index) in menu"
+            :key="index"
+          >
+            <img :src="item.img" alt="">
             <div class="title-wrap">
-              <h4>美食名称</h4>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【西洋建筑】.png" alt="">
-            <div class="title-wrap">
-              <h4>美食名称</h4>
+              <h4>{{item.name}}</h4>
             </div>
           </div>
         </div>
@@ -82,21 +73,9 @@
       <div class="swiper-container-attractions">
         <div class="swiper-wrapper">
           <div class="swiper-slide">
-            <img src="@/assets/img/service/【古建筑】.png" alt="">
+            <img src="@/assets/img/service/老芜湖海关.png" alt="">
             <div class="title-wrap">
-              <h4>景点名称</h4>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【快速浏览】.png" alt="">
-            <div class="title-wrap">
-              <h4>景点名称</h4>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【西洋建筑】.png" alt="">
-            <div class="title-wrap">
-              <h4>景点名称</h4>
+              <h4>{{attractionList[info.attractionIdx]}}</h4>
             </div>
           </div>
         </div>
@@ -107,11 +86,49 @@
 
 <script>
 import Swiper from "../../assets/libs/swiper.js";
+import serveData from "@/assets/data/serve/data.js";
 
 export default {
   computed: {
+    attractionList() {
+      return serveData.attractionList
+    },
+    typeList() {
+      return serveData.typeList
+    },
+    info() {
+      return serveData.restaurantList.find((item) => {
+        return item.id === this.$route.query.id
+      })
+    },
+    menu() {
+      const targetKeys = Object.keys(serveData.foodImgToName).filter((item) => {
+        return item.split(' ')[0] === this.info.id.toString()
+      })
+      let ret = []
+      for (const key of targetKeys) {
+        ret.push({
+          img: require(`@/assets/img/service/food/${key}`),
+          name: serveData.foodImgToName[key],
+        })
+      }
+      return ret
+    }
+  },
+  methods: {
+    onClickNav() {
+      this.$router.push({
+        name: 'MapNav',
+        params: {
+          x: this.info.x,
+          y: this.info.y,
+          name: this.info.name,
+        },
+      })
+    }
   },
   mounted() {
+    console.log(this.info);
     this.$nextTick(() => {
       new Swiper(".swiper-container-food", {
         slidesPerView: 1.4,
@@ -215,7 +232,7 @@ export default {
         }
       }
       > .right {
-        > button {
+        > button, a {
           font-size: 2.9vw;
           font-weight: bold;
           color: #787878;

yfyc/src/views/Serve/FoodList.vue

@@ -32,7 +32,7 @@
       <article
         v-for="(item, index) in foodList"
         :key="index"
-        @click="onClickFoodList(index)"
+        @click="onClickFoodItem(item)"
       >
         <div class="img-wrap">
           <img class="photo" :src="require(`@/assets/img/service/food/${item.coverName}`)" alt="" draggable="false">
@@ -112,8 +112,10 @@ export default {
     onInputChange(v) {
       this.keyword = v
     },
-    onClickFoodList(index) {
-      this.$router.push({name: 'FoodDetail'})
+    onClickFoodItem(item) {
+      this.$router.push({name: 'FoodDetail', query: {
+        id: item.id
+      }})
     },
   },
   mounted() {

yfyc/src/views/Serve/index.vue

@@ -24,7 +24,7 @@
           params: {
             x: 118.35714,
             y: 31.336011,
-            name: 'sadf',
+            name: '老芜湖海关',
           },
         }"
       >