Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
7a02ddee by zhangmeng
Options

旅游

1 parent 30d0e665
Inline Side-by-side
Showing 3 changed files with 208 additions and 74 deletions
src/viewsPc/booking/travel.vue
<template>
<div>
<div class="banner">
<h2>{{ language==0?'旅游服务':'Travel Service' }}</h2>
<h2>{{ language == 0 ? '旅游服务' : 'Travel Service' }}</h2>
</div>
<div class="box">
<div class="searchBar">
<el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" />
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
<el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
{{ language == 0 ? '搜索' : 'Search' }}
</el-button>
</div>
</div>
<div v-loading="loading" class="box">
<el-row :gutter="20">
<el-col
v-for="(h,index) in list" :lg="24" :md="24" :sm="24" :xs="24"
:xl="24" class="mb20"
v-for="(h,index) in list" :key="h.id" :lg="24" :md="24" :sm="24"
:xl="24"
:xs="24" class="mb20"
>
<el-card>
<!-- 酒店列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-row :gutter="20" align="middle" class="hotel">
<el-col :span="6">
<div class="imgbox">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])">
<img :src="fillImgUrl(h.photos?.split(',')[0])" class="w100">
</div>
</el-col>
<el-col :span="12">
......@@ -30,23 +32,29 @@
<div class="starBox">
<img v-for="i in Number(h.rank||0)" src="@/assets/booking/star.png">
</div>
<p class="esp addr mt20">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0">
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<Clock />
</el-icon>
<span class="ml5">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ h.startTime }} ～ {{ h.workTime }}</span>
<span class="ml5">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ h.startTime }} ～ {{
h.workTime
}}</span>
</p>
<p class="esp addr mt20">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
<el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
<LocationFilled />
</el-icon>
{{ h.address }}
</p>
</el-col>
<el-col :span="4" class="text-right">
<div class="price">{{ language==0?'¥':'€' }}<span>{{ h.price }}</span>
<div class="price">{{ language == 0 ? '¥' : '€' }}<span>{{ h.price }}</span>
<i v-if="language==0">起</i>
</div>
<el-button class="btn-lineG w200px" round type="primary" @click="goDetail(h)">{{ language==0?'立即预订':'Select' }} ⇀</el-button>
<el-button class="btn-lineG w200px" round type="primary" @click="goDetail(h)">
{{ language == 0 ? '立即预订' : 'Select' }} ⇀
</el-button>
</el-col>
</el-row>
</el-card>
......@@ -64,6 +72,9 @@ import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core/index'
import useUserStore from '@/store/modules/user'
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
......@@ -90,62 +101,182 @@ function getList() {
loading.value = false
})
}
function goDetail(item) {
async function goDetail(item) {
if (!user) {
useStore().setVisitor()
return
}
router.push({
name: 'travelDetail',
params: {
scenicId: item.scenicId
},
query: {
lasId: item.id
}
})
const res = await booking.checkOrderPay(6)
if (res.data) {
await router.push({
name: 'travelDetail',
params: {
scenicId: item.scenicId
},
query: {
lasId: item.id
}
})
} else {
await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.')
await router.push({
name: 'myReservation'
})
}
}
</script>
<style scoped lang="scss">
.hotel{
h3{margin: 0 0 10px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 14px;color: #929AA0;font-weight: 400;margin: 0 0 10px;}
.price{margin: 0 0 8px;
color: #FF8124;font-size: 18px;
span{font-size: 36px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
i{font-style: normal;color: #929AA0;}
<style lang="scss" scoped>
.hotel {
h3 {
margin: 0 0 10px;
}
img.w100 {
object-fit: cover;
aspect-ratio: 16/9
}
.addr {
font-size: 14px;
color: #929AA0;
font-weight: 400;
margin: 0 0 10px;
}
.price {
margin: 0 0 8px;
color: #FF8124;
font-size: 18px;
span {
font-size: 36px;
margin: 0 8px;
font-family: 'DINAlternate-Bold';
font-weight: 600;
}
i {
font-style: normal;
color: #929AA0;
}
}
.banner{height: 140px;background-size: cover;text-align: center;
background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
justify-content: center;
img{display: block;margin:-30px auto 0;width: auto;}
color: #fff;font-style: italic;font-size: 24px;text-transform: uppercase;
h2{margin:-30px auto 0;font-weight: bold;letter-spacing: 4px;}
}
.searchBar{position: relative;top: -30px;
background: #FFFFFF;display: flex;padding: 20px;
border-radius: 10px;}
.no-border{border: none;background: #F5F7F9;
:deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;}
}
.imgbox {width: 100%;height: 100%;position: relative;
img{width: 100%;height: 100%;}
.starBox{position: absolute;bottom: 0;right: 0;background: rgba(0,0,0,0.4);padding: 10px 15px 3px;}
}
.po-r-b{}
.starBox{
border-radius: 14px 0 0 0;
img{display: inline-block;margin-right: 4px;width: 24px;}
}
.tagbox{margin: 10px 0;
a{color: #AFB5B9;font-size: 12px;}
span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;}
span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);}
span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);}
span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
}
.banner {
height: 140px;
background-size: cover;
text-align: center;
background: url("@/assets/booking/jd_bg.png") center;
display: flex;
align-items: center;
justify-content: center;
img {
display: block;
margin: -30px auto 0;
width: auto;
}
color: #fff;
font-style: italic;
font-size: 24px;
text-transform: uppercase;
h2 {
margin: -30px auto 0;
font-weight: bold;
letter-spacing: 4px;
}
}
.searchBar {
position: relative;
top: -30px;
background: #FFFFFF;
display: flex;
padding: 20px;
border-radius: 10px;
}
.no-border {
border: none;
background: #F5F7F9;
:deep(.el-input__wrapper) {
border: none;
box-shadow: none;
background: #F5F7F9;
}
}
.imgbox {
width: 100%;
height: 100%;
position: relative;
img {
width: 100%;
height: 100%;
}
.starBox {
position: absolute;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.4);
padding: 10px 15px 3px;
}
}
.po-r-b {
}
.starBox {
border-radius: 14px 0 0 0;
img {
display: inline-block;
margin-right: 4px;
width: 24px;
}
}
.tagbox {
margin: 10px 0;
a {
color: #AFB5B9;
font-size: 12px;
}
span {
border-radius: 13px;
font-size: 12px;
padding: 3px 10px;
margin-right: 10px;
font-weight: 400;
}
span:nth-child(4n) {
background: rgba(50, 177, 108, 0.2);
color: rgba(50, 177, 108, 1);
}
span:nth-child(4n+1) {
background: rgba(243, 152, 0, 0.2);
color: rgba(243, 152, 0, 1);
}
span:nth-child(4n+2) {
background: rgba(0, 160, 233, 0.2);
color: rgba(0, 160, 233, 1);
}
span:nth-child(4n+3) {
background: rgba(247, 64, 166, 0.2);
color: rgba(247, 64, 166, 1);
}
}
</style>
......
src/viewsPc/booking/travelDetail.vue
......@@ -237,14 +237,14 @@ async function toSelectSeat() {
}
async function checkOrderPay() {
const res = await booking.checkOrderPay(8)
if (res.data == -100) {
const res = await booking.checkOrderPay(6)
if (res.data) {
goNext()
} else {
await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.')
await router.push({
name: 'myReservation'
})
} else {
goNext()
}
}
......
src/viewsPc/booking/travelOrder.vue
......@@ -19,25 +19,28 @@
</h3>
<div class="info">
<el-icon>
<Clock />
<Phone />
</el-icon>
<span class="mr10">{{ language == 0 ? '出发时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{
scenicItem?.workTime
<span class="mr10">{{ language == 0 ? '联系电话' : 'Contact Number' }}：{{
scenicItem?.contact
}}</span>
</div>
<div class="info">
<el-icon>
<Phone />
<Clock />
</el-icon>
<span class="mr10">{{ language == 0 ? '联系方式' : 'Contact Number' }}：{{
scenicItem?.contact
}}</span>
<span class="mr10">{{ language == 0 ? '出发时间' : 'Opening Time' }}：{{ scenicItem?.startTime }}
<!-- ～ {{scenicItem?.workTime }}-->
</span>
</div>
<div class="info esp">
<el-icon>
<MapLocation />
</el-icon>
<span>{{ scenicItem?.address }}</span>
<span class="mr10">{{ language == 0 ? '集合地点' : 'Assembling Place' }}：{{
scenicItem?.address
}}</span>
</div>
</el-col>
</el-row>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!