Skip to content

M
million
Commit d05e3edb authored by 沈良进's avatar 沈良进
Browse files
Options

二级城市页面对接

parent d68d3ce9
Show whitespace changes
Inline Side-by-side
Showing with 128 additions and 61 deletions
src/components/searchdata/kkday.vue
View file @ d05e3edb
......@@ -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
View file @ d05e3edb
......@@ -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
View file @ d05e3edb
<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>
<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
@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>{{ item.AreaName }}</div>
<!-- <div>10Km</div> -->
</div>
</div>
</div>
<div class="flex flex-center">
<q-btn
@click="navToSearch()"
label="所有目的地"
class="all"
unelevated></q-btn>
unelevated
></q-btn>
</div>
</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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment