Merge branch 'master' of http://face3d.4dage.com:7005/shaogen1995/YFYC-H5 into master

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/components/SearchTransparent.vue

@@ -33,6 +33,13 @@ export default {
     onClickSearch() {
       this.$emit('search', this.keyword)
     },
+  },
+  watch: {
+    keyword: {
+      handler(vNew) {
+        this.$emit('change', vNew)
+      }
+    }
   }
 }
 </script>

yfyc/src/router/index.js

@@ -250,6 +250,14 @@ const routes = [{
         },
         component: () => import('../views/My/MyBookings.vue')
       },
+      /**
+       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+       */
+       {
+        path: '/map-nav',
+        name: 'MapNav',
+        component: () => import('../views/MapNav.vue')
+      },
     ]
   },
 ]

yfyc/src/views/MapNav.vue

@@ -0,0 +1,103 @@
+<!--  -->
+<template>
+  <div class="GoodsMap">
+    <div class="box">
+      <div id="myMap" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GoodsMap",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      keywords: "",
+      arr: [],
+      map: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    initMap() {
+      window.onLoad = () => {
+        this.map = new AMap.Map("myMap", {
+          zoom: 18,
+          center: [this.$route.params.x, this.$route.params.y],
+          // viewMode: '3D'
+        });
+        const marker = new AMap.Marker({
+          position: [this.$route.params.x, this.$route.params.y], // 位置
+          label: {
+            offset: new AMap.Pixel(20, 20),
+            content: "点击打开高德地图",
+          },
+        });
+        marker.on("click", function (e) {
+          marker.markOnAMAP({
+            name: this.$route.params.name,
+            position: marker.getPosition(),
+          });
+        });
+
+        this.map.add(marker); // 添加到地图
+        AMap.plugin("AMap.ToolBar", () => {
+          // 异步加载插件
+          const toolbar = new AMap.ToolBar();
+          this.map.addControl(toolbar);
+        });
+      };
+
+      const url =
+        "https://webapi.amap.com/maps?v=1.4.15&key=93f7bfff72aa16305db5aee4f3fd6232&callback=onLoad";
+
+      const jsapi = document.createElement("script");
+
+      jsapi.src = url;
+
+      document.head.appendChild(jsapi);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() { 
+    window.document.title='景点导航'
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initMap();
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.GoodsMap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .box {
+    width: 100%;
+    height: 100%;
+  }
+
+  #myMap {
+    width: 100%;
+    height: 100%;
+  }
+  /deep/.amap-marker-label{
+    // color: red;
+  }
+}
+</style>

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>
@@ -44,28 +44,19 @@
     <div class="content-card">
       <div class="top-line">
         <div class="title">推荐菜</div>
-        <button>
+        <!-- <button>
           更多  》
-        </button>
+        </button> -->
       </div>
       <div class="swiper-container-food">
         <div class="swiper-wrapper">
-          <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>
-            </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>
@@ -75,28 +66,16 @@
     <div class="content-card">
       <div class="top-line">
         <div class="title">周边景点</div>
-        <button>
+        <!-- <button>
           更多  》
-        </button>
+        </button> -->
       </div>
       <div class="swiper-container-attractions">
         <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="title-wrap">
-              <h4>景点名称</h4>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <img src="@/assets/img/service/【西洋建筑】.png" alt="">
+            <img src="@/assets/img/service/老芜湖海关.png" alt="">
             <div class="title-wrap">
-              <h4>景点名称</h4>
+              <h4>{{attractionList[info.attractionIdx]}}</h4>
             </div>
           </div>
         </div>
@@ -107,9 +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,
@@ -213,7 +232,7 @@ export default {
         }
       }
       > .right {
-        > button {
+        > button, a {
           font-size: 2.9vw;
           font-weight: bold;
           color: #787878;
@@ -266,6 +285,7 @@ export default {
           width: 82.8vw;
           height: 53.2vw;
           background: #F7F8FA;
+          border-radius: 1.1vw;
           > img {
             width: 100%;
             height: 40.7vw;
@@ -291,6 +311,7 @@ export default {
           width: 43.6vw;
           height: 55vw;
           background: #F7F8FA;
+          border-radius: 1.1vw;
           > img {
             width: 100%;
             height: 44.5vw;

yfyc/src/views/Serve/FoodList.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="food-list-page">
     <div class="banner-wrap">
-      <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+      <SearchBar class="search-bar"
+        @change="onInputChange"
+        placeholder="请输入美食"
+      ></SearchBar>
     </div>
     <div class="select-wrap">
-      <Select
+      <!-- <Select
         class="select"
         :valueList="orderList"
         v-model="orderIdx"
         :placeholder="'排序'"
-      ></Select>
+      ></Select> -->
       <Select
         class="select"
         v-model="typeIdx"
@@ -27,33 +30,18 @@
     <div class="card-list">
       <!-- <div class="grid-sizer"></div> -->
       <article
-        @click="onClickFoodList(index)"
-      >
-        <div class="img-wrap">
-          <img class="photo" :src="foodList[0].img" alt="" draggable="false">
-          <div class="address">
-            <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
-            fdaslkfdj
-          </div>
-        </div>
-        <h2>sadfslf</h2>
-        <h2>sadfslf</h2>
-        <h2>sadfslf</h2>
-        <h2>sadfslf</h2>
-      </article>
-      <article
         v-for="(item, index) in foodList"
         :key="index"
-        @click="onClickFoodList(index)"
+        @click="onClickFoodItem(item)"
       >
         <div class="img-wrap">
-          <img class="photo" :src="item.img" alt="" draggable="false">
+          <img class="photo" :src="require(`@/assets/img/service/food/${item.coverName}`)" alt="" draggable="false">
           <div class="address">
             <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
             {{item.address}}
           </div>
         </div>
-        <h2>{{item.title}}</h2>
+        <h2>{{item.name}}</h2>
       </article>
     </div>
 
@@ -63,6 +51,7 @@
 <script>
 import SearchBar from "@/components/SearchTransparent.vue";
 import Select from "@/components/Select.vue";
+import serveData from "@/assets/data/serve/data.js";
 
 export default {
   components: {
@@ -71,26 +60,27 @@ export default {
   },
   data() {
     return {
+      keyword: '',
       orderIdx: 0,
       typeIdx: 0,
       attractionIdx: 0,
-      foodList: [
-        {
-          img: require('@/assets/img/service/food1.png'),
-          address: '芜湖市凤凰美食街中心广场',
-          title: '虾籽面',
-        },
-        {
-          img: require('@/assets/img/service/food1.png'),
-          address: '芜湖市凤凰美食街中心广场',
-          title: '虾籽面',
-        },
-        {
-          img: require('@/assets/img/service/food1.png'),
-          address: '芜湖市凤凰美食街中心广场',
-          title: '虾籽面',
-        },
-      ]
+      // foodList: [
+      //   {
+      //     img: require('@/assets/img/service/food1.png'),
+      //     address: '芜湖市凤凰美食街中心广场',
+      //     title: '虾籽面',
+      //   },
+      //   {
+      //     img: require('@/assets/img/service/food1.png'),
+      //     address: '芜湖市凤凰美食街中心广场',
+      //     title: '虾籽面',
+      //   },
+      //   {
+      //     img: require('@/assets/img/service/food1.png'),
+      //     address: '芜湖市凤凰美食街中心广场',
+      //     title: '虾籽面',
+      //   },
+      // ]
     }
   },
   computed: {
@@ -103,27 +93,29 @@ export default {
       ]
     },
     typeList() {
-      return [
-        '全部',
-        '中餐',
-        '西餐',
-      ]
+      return serveData.typeList
     },
     attractionList() {
-      return [
-        '全部',
-        '景点1',
-        '景点2',
-        '景点3',
-      ]
+      return serveData.attractionList
+    },
+    foodList() {
+      return serveData.restaurantList.filter((item) => {
+        return item.typeIdx === this.typeIdx || this.typeIdx === 0
+      }).filter((item) => {
+        return item.attractionIdx === this.attractionIdx || this.attractionIdx === 0
+      }).filter((item) => {
+        return item.name.includes(this.keyword) || item.address.includes(this.keyword) || this.keyword === ''
+      })
     }
   },
   methods: {
-    onSearch() {
-
+    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

@@ -1,7 +1,7 @@
 <template>
   <div class="service" id="service-first-page">
     <div class="banner" @click="onClickBanner">
-      <SearchBar class="search-bar" @search="onSearch" @click.stop></SearchBar>
+      <!-- <SearchBar class="search-bar" @search="onSearch" @click.stop></SearchBar> -->
     </div>
     
     <menu>
@@ -17,7 +17,17 @@
         <img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
         <div>酒店住宿</div>
       </router-link>
-      <router-link class="entry" :to="{name: ''}">
+      <router-link
+        class="entry"
+        :to="{
+          name: 'MapNav',
+          params: {
+            x: 118.35714,
+            y: 31.336011,
+            name: '老芜湖海关',
+          },
+        }"
+      >
         <img src="@/assets/img/service/路线.png" alt="" draggable="false">
         <div>导航</div>
       </router-link>