二级城市页面对接

src/components/searchdata/kkday.vue

@@ -390,6 +390,13 @@ export default {
     this.dateRange = { from: this.msg.startDate, to: this.msg.endDate };
     this.goSearchHandler();
   },
+  mounted() {
+    var CategoryName = this.getUrlKey("CategoryName", window.location.href);
+     if(CategoryName) {
+      this.goodsType.find(item => item.Name === CategoryName)
+     }
+     console
+  },
   methods: {
     handleSelected(target) {
       console.log("handleSelected", target);

src/pages/city/cityDetail.vue

@@ -94,15 +94,12 @@
             class="card-img q-mb-xs"
             :src="detail.ImageList[1] || detail.ImageList[0]"
           />
-          <img
-            class="card-img"
-            src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
-          />
+          <div class="card-img" id="map"></div>
         </div>
       </div>
 
       <div class="flex justify-between q-mt-sm">
-        <div v-for="item in navList" :key="item.img" class="nav-item">
+        <div v-for="item in navList" :key="item.img" class="nav-item" @click="navClick(item)">
           <img
             class="nav-img"
             :src="require(`../../assets/img/${item.img}.png`)"
@@ -112,14 +109,14 @@
       </div>
       <div class="top-title">TOP榜单</div>
       <div>本地销量最好的商品</div>
-      <div class="mt" style="height: 500px; width: 1200px; overflow-x: auto;">
-        <div style="width: auto">
-        <topCard v-for="item in detail.TopList" :data="item" :key="item.ID" /></div>
+      <div class="mt" style="width: 1200px; overflow-x: auto;">
+        <div style="width: 2920px">
+        <topCard @click.native="navToDetail(item)" v-for="item in detail.TopList" :data="item" :key="item.ID" /></div>
       </div>
       <div class="top-title">最新推荐</div>
       <div>已售出商品的最新榜單</div>
       <div class="flex justify-between flex-wrap mt">
-        <likeCard v-for="item in detail.NewList" :data="item" :key="item.ID" />
+        <likeCard @click.native="navToDetail(item)" v-for="item in detail.NewList" :data="item" :key="item.ID" />
       </div>
       <div class="top-title">關於{{detail.AreaName}}</div>
       <div class="flex justify-between">
@@ -131,7 +128,7 @@
         </div>
       </div>
       <!-- <div class="top-title">當地天氣</div> -->
-      <div>
+      <div class="mt pt">
         <!-- <div class="flex">
           <div class="time-item" v-for="item in 4" :key="item">
             <div class="f16">12月-2月</div>
@@ -145,7 +142,7 @@
               :src="require(`../../assets/img/info-time.png`)"
             />
             <div>
-              <div class="f16 bold">時區</div>
+              <div class="f16 bold">時區 {{detail.TimeZones}}</div>
               <!-- <div>-12° -17°</div> -->
             </div>
           </div>
@@ -155,7 +152,7 @@
               :src="require('../../assets/img/info-currency.png')"
             />
             <div>
-              <div class="f16 bold">貨幣</div>
+              <div class="f16 bold">貨幣 {{detail.CurrencyName}}</div>
               <!-- <div>-12° -17°</div> -->
             </div>
           </div>
@@ -165,7 +162,7 @@
               :src="require(`../../assets/img/info-ele.png`)"
             />
             <div>
-              <div class="f16 bold">電壓</div>
+              <div class="f16 bold">電壓 {{detail.Voltage}}</div>
               <!-- <div>-12° -17°</div> -->
             </div>
           </div>
@@ -176,12 +173,14 @@
             />
             <div>
               <div class="f16 bold q-mt-xs">旅遊時間</div>
-              <!-- <div>-12° -17°</div> -->
+              <div v-for="(item, index) in detail.BestTravelTimeList" :key="index">
+                <span class="bold">{{item.Month}}</span><span class="q-ml-sm ">{{item.Description}}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <nearCity :cityList="detail.AdjacentCityList" />
+      <nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" />
     </div>
   </div>
 </template>
@@ -196,11 +195,11 @@ export default {
       detail: null,
       navList: [
         {
-          title: "觀光行程",
+          title: "观光行程",
           img: "nav-map",
         },
         {
-          title: "景點門票",
+          title: "景点门票",
           img: "nav-ticket",
         },
         {
@@ -216,11 +215,35 @@ export default {
   },
   mounted() {
     this.getData();
-    this.createMap();
-    this.addMarker();
-    this.addLabel()
+    var newStartDate = new Date();
+    var newStartDateStr = this.formatDate(
+      newStartDate.getFullYear(),
+      newStartDate.getMonth() + 1,
+      newStartDate.getDate()
+    );
+    var newEndDate = this.AddMonth(newStartDateStr, 2);
+    var newEndDateStr = this.formatDate(
+      newEndDate.getFullYear(),
+      newEndDate.getMonth() + 1,
+      newEndDate.getDate()
+    );
+    this.searchDate = newStartDateStr;
+    this.searchEndDate = newEndDateStr;
   },
   methods: {
+    navClick(item) {
+      this.CommonJump(
+        "/search",
+        {
+        qsearchKey: this.detail.AreaName,
+        qsearchDate: this.searchDate,
+        qsearchEndDate: this.searchEndDate,
+        CategoryName: item.title}
+      );
+    },
+    navToDetail(item) {
+      console.log('navToDetail', item)
+    },
     getData() {
       this.$q.loading.show();
       this.apipost(
@@ -229,6 +252,11 @@ export default {
         (r) => {
           this.detail = r.data.data
           this.$q.loading.hide();
+          this.$nextTick(() => {
+            this.createMap();
+    this.addMarker();
+    this.addLabel()
+          })
         },
         null
       );
@@ -238,9 +266,21 @@ export default {
         return;
       }
       let map = new BMapGL.Map("baidu-map"); // 创建地图实例
-      let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
-      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
       this.map = map;
+      var myGeo = new BMapGL.Geocoder();
+      const that = this
+      let address = '日本东京'
+      console.log('address', address)
+      myGeo.getPoint(address, function(point){
+    if(point){
+      console.log('get point', point)
+      that.point = point
+      let pointA = new BMapGL.Point(point.lng, point.lat); // 创建点坐标
+      map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
+    }else{
+        alert('您选择的地址没有解析到结果！');
+    }
+},'东京')
     },
     addMarker() {
       let icon = require(`../../assets/img/info-time.png`);
@@ -255,13 +295,13 @@ export default {
         // 需要指定大图的偏移位置，此做法与css sprites技术类似。
         // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
       });
-      let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
+      let point = new BMapGL.Point(this.point.lng, this.point.lat); // 创建点坐标
       // 创建标注对象并添加到地图
       var marker = new BMapGL.Marker(point, { icon: myIcon });
       this.map.addOverlay(marker);
     },
     addLabel() {
-      var point = new BMapGL.Point(116.404, 39.915);
+      var point = new BMapGL.Point(this.point.lng, this.point.lat);
       var content = "label";
       var label = new BMapGL.Label(content, {
         // 创建文本标注

src/pages/city/components/near-city.vue

 <style scoped>
 .title {
-font-size: 26px;
-font-family: Microsoft JhengHei;
-font-weight: bold;
-color: #000000;
-line-height: 44px;
-margin-top: 30px;
-margin-bottom: 10px;
+  font-size: 26px;
+  font-family: Microsoft JhengHei;
+  font-weight: bold;
+  color: #000000;
+  line-height: 44px;
+  margin-top: 30px;
+  margin-bottom: 10px;
 }
 .card {
   width: 210px;
-height: 290px;
-border-radius: 10px;
-margin-right: 20px;
+  height: 290px;
+  border-radius: 10px;
+  margin-right: 20px;
 }
 .card-img {
   width: 210px;
-height: 290px;
-border-radius: 10px;
-object-fit: cover;
+  height: 290px;
+  border-radius: 10px;
+  object-fit: cover;
 }
 .info {
   position: absolute;
@@ -29,43 +29,63 @@ object-fit: cover;
 .all {
   margin: 20px auto;
   width: 320px;
-height: 42px;
-border: 1px solid #474747;
-border-radius: 8px;
+  height: 42px;
+  border: 1px solid #474747;
+  border-radius: 8px;
 }
 </style>
 <template>
-<div>
-  <div class="title">附近的城市</div>
-  <div class="flex">
-    <div class="relative card" v-for="item in cityList" :key="item.Id">
-      <img
-        class="card-img"
-        :src="item.ImageList[0]"
-      />
-      <div class="info">
-        <div>{{item.AreaName}}</div>
-        <!-- <div>10Km</div> -->
+  <div>
+    <div class="title">附近的城市</div>
+    <div class="flex">
+      <div
+        @click="navToSearch(item)"
+        class="relative card"
+        v-for="item in cityList"
+        :key="item.Id"
+      >
+        <img class="card-img" :src="item.ImageList[0]" />
+        <div class="info">
+          <div>{{ item.AreaName }}</div>
+          <!-- <div>10Km</div> -->
+        </div>
       </div>
     </div>
+    <div class="flex flex-center">
+      <q-btn
+        @click="navToSearch()"
+        label="所有目的地"
+        class="all"
+        unelevated
+      ></q-btn>
+    </div>
   </div>
-  <div class="flex flex-center">
-  <q-btn
-            label="所有目的地"
-            class="all"
-            unelevated></q-btn>
-  </div>
-</div>
 </template>
 <script>
 export default {
   props: {
     cityList: {
-      default: () => []
-    }
+      default: () => [],
+    },
+    name: {
+      default: () => ({}),
+    },
   },
   data() {
     return {};
-  }
+  },
+  methods: {
+    navToSearch(item) {
+      console.log("navToDetail", item);
+      let params = {
+        qsearchDate: this.searchDate,
+        qsearchEndDate: this.searchEndDate,
+      };
+      if (item) {
+        params.qsearchKey = item.AreaName
+      }
+      this.CommonJump("/search", params);
+    },
+  },
 };
 </script>
\ No newline at end of file