Skip to content

M
million
Commit ba5b6011 authored by 罗超's avatar 罗超
Browse files
Options

优化城市主页

parent 4844a58a
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 73 deletions
src/App.vue
View file @ ba5b6011
......@@ -10,7 +10,7 @@ export default {
};
</script>
<style>
@import url("//at.alicdn.com/t/c/font_1890699_yrr2mh5n7ln.css");
@import url("//at.alicdn.com/t/c/font_1890699_gbysegbhucu.css");
@font-face {
font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......@@ -19,7 +19,9 @@ export default {
font-family: 'FZDBSJW';
src: local('FZDaBiaoSong-B06S')
}
.text-shadow{
text-shadow: rgb(0 0 0 / 50%) 2px 2px 5px;
}
.text-subtitle1 {
font-size: 1.25rem !important;
}
......
src/components/goods/style1.vue 0 → 100644
View file @ ba5b6011
<template>
<div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
<q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover">
<div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
{{ formatEnum(product.ProductType) }}
</div>
</q-img>
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height: 74px;">{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
</div>
</div>
</template>
<script>
import ListProductTypeEnum from 'src/utils/listProductType';
import EnumHelper from '../../utils/enumhelper'
export default {
props:{
product:{
type:Object,
required:true
},
width:{
type:String,
default:"250px"
},
bgColor:{
type:String,
default:'#fff'
}
},
data() {
return {
}
},
methods: {
formatEnum(t){
let temp = EnumHelper.ParseToEnum(ListProductTypeEnum,t,'value')
return temp.desc
}
},
}
</script>
<style>
</style>
\ No newline at end of file
src/components/goods/style2.vue 0 → 100644
View file @ ba5b6011
<template>
<!-- <div class="rounded-borders overflow-hidden q-pb-md" :style="{'width':width,'background-color':bgColor}" v-if="product">
<q-img :src="product.ImgCover" spinner-color="white" :ratio="16/9" fit="cover" />
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer">{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
</div>
</div> -->
<div class="rounded-borders overflow-hidden" v-if="product">
<div class="row" :style="{'background-color':bgColor}" >
<q-img :src="product.ImgCover" spinner-color="dark" :ratio="4/3" fit="cover" class=" col-5" >
<div class="absolute-top text-shadow" style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));">
{{ formatEnum(product.ProductType) }}
</div>
</q-img>
<div class="q-px-md col">
<div class="ellipsis-2-lines text-body1 q-ma-md cursor-pointer" style="height:50px;">{{ product.Title }}</div>
<div class="text-subtitle2 text-weight-bolder text-dark q-mx-md">
<span>CNY {{moneyFormat(product.B2CPrice,2)}}</span>
<span class="f12 q-ml-sm">起</span>
</div>
</div>
</div>
</div>
</template>
<script>
import ListProductTypeEnum from 'src/utils/listProductType';
import EnumHelper from '../../utils/enumhelper'
export default {
props:{
product:{
type:Object,
required:true
},
width:{
type:String,
default:"250px"
},
bgColor:{
type:String,
default:'#fff'
}
},
methods: {
formatEnum(t){
let temp = EnumHelper.ParseToEnum(ListProductTypeEnum,t,'value')
return temp.desc
}
},
}
</script>
<style>
</style>
\ No newline at end of file
src/pages/city/cityDetail.vue
View file @ ba5b6011
......@@ -76,13 +76,40 @@
top: 20px;
left: 20px;
font-weight: bold;
font-size: 30px;
font-size: 44px;
color: #fff;
text-shadow: rgb(0 0 0 / 50%) 2px 2px 5px;
}
@keyframes icon-bounce {
0% {
transform: translateY(0) scale(1.15,.5);
}
20% {
transform: translateY(-20px) scaleY(1.1);
}
50% {
transform: translateY(-5px) scale(1);
}
80% {
transform: translateY(-10px) scale(1);
}
100% {
transform: translateY(0) scale(1.15,.8);
}
}
.desktop-navs{
width:100px;
}
.desktop-navs:hover img {
animation-name: icon-bounce;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
</style>
<template>
<div class="back">
<div v-if="detail" class="wapper">
<div class="content-page" >
<div v-if="detail" :class="{'q-mx-md':$q.platform.is.mobile}">
<div class="row items-center q-pt-md q-mb-lg">
<q-breadcrumbs
class="col f12 no-wrap q-mr-md"
......@@ -99,42 +126,102 @@
<!-- <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> -->
</div>
<div class="flex relative">
<div class="absolute name">{{detail.AreaName}}</div>
<img
class="main"
:src="detail.ImageList[0]"
/>
<div class="card-img-box">
<div class="relative row" :style="{'height':$q.platform.is.mobile?'200px':'370px'}">
<div class="absolute name" style="z-index: 1;">{{detail.AreaName}}</div>
<q-img :src="detail.ImageList[0]" spinner-color="dark" class="col rounded-borders full-height" />
<q-img :src="detail.ImageList[1]" v-if="detail.ImageList.length>1" spinner-color="dark" style="width:260px" class="full-height desktop-only rounded-borders q-ml-md" />
<div class="absolute q-py-sm q-px-md row items-center bg-dark text-white rounded-borders cursor-pointer" style="bottom:20px;left: 20px;">
<q-icon name="iconfont iconzhinanzhen" size="16px"></q-icon>
<span class="q-ml-sm">訪前須知</span>
</div>
<div class="absolute q-py-sm q-px-md row items-center bg-dark text-white rounded-borders cursor-pointer" style="bottom:20px;right: 20px;" @click="showPreview(detail.ImageList,0)">
<q-icon name="iconfont iconimage" size="16px"></q-icon>
<span class="q-ml-sm">查看照片</span>
</div>
<!-- <div class="card-img-box">
<img
class="card-img q-mb-xs"
:src="detail.ImageList[1] || detail.ImageList[0]"
/>
<div class="card-img" id="map"></div>
</div>
</div> -->
</div>
<div class="flex justify-between q-mt-sm">
<div v-for="item in navList" :key="item.img" class="nav-item" @click="navClick(item)">
<div class="q-mt-md row justify-center">
<div class="bg-white row rounded-borders light-shadow" :class="{'q-pa-lg':$q.platform.is.desktop,'col-12 q-px-md q-pa-md':$q.platform.is.mobile}" style="max-width:100%">
<div class="text-center cursor-pointer" :class="{'desktop-navs ':$q.platform.is.desktop,'col-3 q-mb-md':$q.platform.is.mobile}" v-for="item in navList" :key="item.img" @click="navClick(item)">
<img width="30" height="30" :src="require(`../../assets/img/${item.img}.png`)" />
<div class="f12" :class="{'q-mt-md ':$q.platform.is.desktop,'q-mt-sm':$q.platform.is.mobile}">{{ item.title }}</div>
</div>
</div>
<!-- <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`)"
/>
<div class="f16 bold text-center">{{ item.title }}</div>
</div>
</div> -->
</div>
<div class="top-title">TOP榜单</div>
<div>本地销量最好的商品</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 v-if="detail.TopList.length>0">
<div class="top-title">TOP榜单</div>
<div>本地销量最好的商品</div>
<q-carousel
v-model="hotSilder"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
animated
control-color="dark"
control-type="regular"
padding
arrows
height="300px"
flat
class="bg-transparent rounded-borders q-mt-md"
>
<q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(detail.TopList.length/topPageCount)" :key="index" class="column no-wrap">
<div class="row fit justify-start items-center q-gutter-md q-col-gutter no-wrap">
<template v-for="(x,i) in topPageCount">
<goods-style1 v-if="(i+(index*topPageCount))<detail.TopList.length" :product="detail.TopList[i+(index*topPageCount)]" :key="detail.TopList[i+(index*topPageCount)].ConfigId" :class="{'col-3':topPageCount==4,'col-12':topPageCount==1}" ></goods-style1>
</template>
</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="top-title">最新推荐</div>
<div>已售出商品的最新榜單</div>
<div class="flex justify-between flex-wrap mt">
<!-- <div class="flex justify-between flex-wrap mt">
<likeCard @click.native="navToDetail(item)" v-for="item in detail.NewList" :data="item" :key="item.ID" />
</div> -->
<q-carousel
v-model="newSilder"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
animated
control-color="dark"
control-type="regular"
padding
arrows
height="400px"
flat
class="bg-transparent rounded-borders q-mt-md desktop-only"
>
<q-carousel-slide :name="index" v-for="(item, index) in Math.ceil(detail.NewList.length/4)" :key="index" class="column no-wrap">
<div class="row">
<template v-for="(x,i) in 4">
<goods-style2 v-if="(i+(index*4))<detail.NewList.length" :product="detail.NewList[i+(index*4)]" :key="detail.NewList[i+(index*4)].ConfigId" class="q-pr-md col-6 q-mb-md"></goods-style2>
</template>
</div>
</q-carousel-slide>
</q-carousel>
<div class="mobile-only q-mt-md">
<goods-style2 :product="x" :key="i" class="q-pr-md col-6 q-mb-md" v-for="(x,i) in detail.NewList"></goods-style2>
</div>
<div class="top-title">關於{{detail.AreaName}}</div>
<city-info :city="detail"></city-info>
<!-- <div class="top-title">關於{{detail.AreaName}}</div>
<div class="flex justify-between">
<div style="width: 720px">
{{detail.Introduction}}
......@@ -143,14 +230,7 @@
<div id="baidu-map"></div>
</div>
</div>
<!-- <div class="top-title">當地天氣</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>
<div class="f26 bold">-12° -17°</div>
</div>
</div> -->
<div class="flex mt">
<div class="flex items-center time-item">
<img
......@@ -159,7 +239,6 @@
/>
<div>
<div class="f16 bold">時區 {{detail.TimeZones}}</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex items-center time-item">
......@@ -169,7 +248,6 @@
/>
<div>
<div class="f16 bold">貨幣 {{detail.CurrencyName}}</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex items-center time-item">
......@@ -179,7 +257,6 @@
/>
<div>
<div class="f16 bold">電壓 {{detail.Voltage}}</div>
<!-- <div>-12° -17°</div> -->
</div>
</div>
<div class="flex time-item">
......@@ -195,7 +272,7 @@
</div>
</div>
</div>
</div>
</div> -->
<nearCity :name="detail.AreaName" :cityList="detail.AdjacentCityList" />
<q-dialog v-model="show">
<div style="width: 900px;">
......@@ -209,12 +286,19 @@
import topCard from "./components/top-card.vue";
import likeCard from "./components/like-card.vue";
import nearCity from "./components/near-city.vue";
import goodsStyle1 from '../../components/goods/style1.vue';
import goodsStyle2 from '../../components/goods/style2.vue';
import cityInfo from "./components/city-info.vue";
export default {
components: { topCard, likeCard, nearCity },
components: { topCard, likeCard, nearCity,goodsStyle1,goodsStyle2,cityInfo },
data() {
return {
show: false,
detail: null,
hotSilder:0,
newSilder:0,
topPageCount:4,
newPageCount:2,
navList: [
{
title: "观光行程",
......@@ -236,6 +320,10 @@ export default {
};
},
mounted() {
if(this.$q.platform.is.mobile){
this.topPageCount=1
this.newPageCount=2
}
this.getData();
var newStartDate = new Date();
var newStartDateStr = this.formatDate(
......@@ -283,12 +371,12 @@ export default {
);
},
createMap() {
let map = new BMapGL.Map("baidu-map"); // 创建地图实例
this.map = map;
let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
this.addMarker();
this.addLabel()
// let map = new BMapGL.Map("baidu-map"); // 创建地图实例
// this.map = map;
// let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
// map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
// this.addMarker();
// this.addLabel()
},
addMarker() {
let icon = require(`../../assets/img/marker.png`);
......@@ -330,12 +418,12 @@ export default {
});
},
createTopMap() {
let map = new BMapGL.Map("map"); // 创建地图实例
this.topMap = map;
let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
this.addTopMarker()
this.addTopLabel()
// let map = new BMapGL.Map("map"); // 创建地图实例
// this.topMap = map;
// let pointA = new BMapGL.Point(this.detail.Lng, this.detail.Lat); // 创建点坐标
// map.centerAndZoom(pointA, 8); // 初始化地图，设置中心点坐标和地图级别
// this.addTopMarker()
// this.addTopLabel()
},
addTopMarker() {
let icon = require(`../../assets/img/marker.png`);
......@@ -385,7 +473,15 @@ export default {
map.centerAndZoom(pointA, 11); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom()
})
}
},
showPreview(images, index = 0) {
this.$viewerApi({
options: {
initialViewIndex: index,
},
images,
});
},
},
};
</script>
\ No newline at end of file
src/pages/city/components/city-info.vue 0 → 100644
View file @ ba5b6011
<template>
<div class="q-mt-lg">
<div class="top-title">{{ cityInfo.AreaName }}旅遊指南</div>
<div class="q-mt-md rounded-borders q-pa-lg bg-white light-shadow">
<div class="text-h6 text-weight-bold">關於{{ cityInfo.AreaName }}</div>
<div class="q-my-md f12 text-grey-9" v-html="cityInfo.Introduction"></div>
<q-separator class="q-my-xl" color="grey-2" />
<div class="text-h6 q-my-md text-weight-bold">實用訊息</div>
<div class="q-mt-md" :class="{'row justify-between q-mr-lg':$q.platform.is.desktop,'column q-gutter-md':$q.platform.is.mobile}">
<div>
<div class="f12 text-grey-9">時區：</div>
<div class="q-my-md text-subtitle1">{{ cityInfo.TimeZones }}</div>
<div class="text-body2 text-grey-6">出行注意時差，安排好休息時間哦</div>
</div>
<div>
<div class="f12 text-grey-9">貨幣：</div>
<div class="q-my-md text-subtitle1">{{ cityInfo.CurrencyName }}</div>
<div class="text-body2 text-grey-6">建議您出行錢準備充足的當地貨幣</div>
</div>
<div>
<div class="f12 text-grey-9">电压：</div>
<div class="q-my-md text-subtitle1">{{ cityInfo.Voltage }}</div>
</div>
<div>
<div class="f12 text-grey-9">最佳出行月份</div>
<div class="q-mt-md" v-for="(x,i) in cityInfo.BestTravelTimeList" :key="i">
<div class="q-mb-sm text-subtitle1">{{ x.Month }}</div>
<div class="text-body2 text-grey-6">{{ x.Description }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['city'],
data() {
return {
cityInfo:{}
}
},
created() {
this.cityInfo = this.city
this.cityInfo.Introduction=this.cityInfo.Introduction.replace(/\n/g,"<br>")
},
}
</script>
<style>
.top-title {
font-size: 26px;
font-weight: bold;
color: #000000;
line-height: 44px;
}
</style>
\ No newline at end of file
src/pages/city/components/near-city.vue
View file @ ba5b6011
......@@ -37,20 +37,26 @@
<template>
<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> -->
<q-scroll-area
:thumb-style="thumbStyle"
style="height: 290px;width100%;"
>
<div class="row no-wrap">
<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 class="text-subtitle1 text-weight-bold text-shadow">{{ item.AreaName }}</div>
<!-- <div>10Km</div> -->
</div>
</div>
</div>
</div>
</div>
</q-scroll-area>
<div class="flex flex-center">
<q-btn
@click="navToSearch()"
......@@ -72,7 +78,15 @@ export default {
},
},
data() {
return {};
return {
thumbStyle: {
right: '2px',
borderRadius: '2px',
backgroundColor: '#027be3',
width: '2px',
opacity: '0'
}
};
},
methods: {
navToSearch(item) {
......
src/pages/city/components/top-card.vue
View file @ ba5b6011
......@@ -19,8 +19,8 @@
}
.card-img {
width: 272px;
height: 162px;
border-radius: 10px;
height: 162px;
border-radius: 10px;
}
.title {
margin-top: 17px;
......@@ -40,7 +40,7 @@ color: #36A1FA;
</style>
<template>
<div class="card">
<div class="relative">
<!-- <div class="relative">
<div class="address">
<i
class="iconfont icondingweixiao q-icon notranslate"
......@@ -58,7 +58,8 @@ color: #36A1FA;
class="card-img"
:src="data.ImgCover"
/>
</div>
</div> -->
<div class="title ellipsis-2">{{data.Title}}</div>
<!-- <div>
<i
......
src/pages/pay/pay.vue
View file @ ba5b6011
......@@ -155,9 +155,9 @@ export default {
},
goHomeHandler(){
this.loading=false
// setTimeout(() => {
// location.href = location.origin;
// }, 3000);
setTimeout(() => {
location.href = location.origin;
}, 3000);
},
cancelPayHandler(){
this.showPay=''
......
src/pages/pay/paysuccess.vue
View file @ ba5b6011
......@@ -131,9 +131,9 @@ export default {
},
goHomeHandler() {
this.loading = false
// setTimeout(() => {
// location.href = location.origin;
// }, 3000);
setTimeout(() => {
location.href = location.origin;
}, 3000);
}
},
}
......
src/pages/usercenter/setUserInfo.vue
View file @ ba5b6011
......@@ -84,7 +84,7 @@
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.EnSurname"
outlined
standout
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input>
</div>
......
src/utils/listProductType.js 0 → 100644
View file @ ba5b6011
const ListProductTypeEnum = Object.freeze({
TRIP: {
value: 1,
desc: '線路旅遊'
},
SCENIC: {
value: 2,
desc: '景點門票'
},
HOTEL: {
value: 3,
desc: '酒店住宿'
},
CAR: {
value: 4,
desc: '目的地用車'
},
JALAN: {
value: 5,
desc: '酒店住宿'
},
})
export default ListProductTypeEnum
\ 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