Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
35df1862 by 杨炀
Options

no message

1 parent b5a3d1b9
Inline Side-by-side
Showing 4 changed files with 157 additions and 32 deletions
src/viewsPc/booking/car.vue
<template>
<div>
<div class="box">
<el-card class="mt30"></el-card>
</div>
<div>
<div class="banner">
<img src="@/assets/booking/jd_text.png">
</div>
<div class="box">
<div class="searchBar">
<el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border">
</el-input>
<el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList">
{{ language==0?'搜索':'Search' }}</el-button>
</div>
</div>
<div class="box" v-loading="loading">
<el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)">
<!-- che列表-->
<el-row class="hotel" align="middle" :gutter="20">
<el-col :span="6">
<img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
</el-col>
<el-col :span="10">
<h3 class="esp">{{h.name}}</h3>
<div class="starBox">
<img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
</div>
<div class="tagbox">
<span v-for="(t,index) in h.label?.split('，')" v-show="index<4">{{t}}</span>
<a v-show="h.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
</div>
<p class="esp addr">
<el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon>
{{h.address}}
</p>
</el-col>
<el-col :span="8" class="text-right">
<div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div>
<el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button>
</el-col>
</el-row>
</el-card>
<el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" />
<div style="height: 50px"></div>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted} from "@vue/runtime-core"
import * as booking from "@/apiPc/booking"
import {useRouter,useRoute} from "vue-router";
import {useStorage} from "@vueuse/core/index";
const router = useRouter()
const route = useRoute()
const language= useStorage('language',0)
const query = ref({
name:''
})
const cptId = ref('')
const list = ref([])
const loading = ref(false)
onMounted(()=>{
query.value.activityId = route.params.cptId
getList()
})
</script>
function getList() {
loading.value = true
booking.getHotelList(query.value).then(res=>{
list.value = res.rows
loading.value = false
}).catch(e=>{
loading.value = false
})
}
function goDetail(item) {
router.push({
name:'hotelDetail',
params:{
hotelId:item.hotelId,
},
query:{
id:item.id
}
<style scoped>
})
}
</script>
<style scoped lang="scss">
.hotel{
h3{margin: 0 0 20px;}
img.w100{object-fit: cover;aspect-ratio: 16/9}
.addr{font-size: 16px;color: #929AA0;font-weight: 400;}
.price{margin: 0 0 25px;
color: #FF8124;font-size: 18px;
span{font-size: 24px;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;}
}
.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;}
}
.starBox{
img{display: inline-block;margin-right: 4px}
}
.tagbox{margin: 15px 0;
a{color: #AFB5B9;font-size: 12px;}
span{border-radius: 13px;font-size: 12px;padding: 4px 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/hotel.vue
......@@ -79,8 +79,11 @@
name:'hotelDetail',
params:{
hotelId:item.hotelId,
},
query:{
id:item.id
}
})
}
</script>
......
src/viewsPc/booking/hotelDetail.vue
......@@ -80,7 +80,7 @@
</el-row>
</el-col>
<el-col :span="3">
<div class="price">{{ language==0?'¥':'€' }}<span>{{r.roomPrice}}</span></div>
<div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div>
</el-col>
<el-col :span="3">
<div class="bg-lineg" v-if="language==0" @click="goOrder(r)">
......@@ -117,7 +117,7 @@ const router = useRouter()
const route = useRoute()
const form = ref({})
const query = ref({
hotelId: route.params.id
hotelId: route.query.id
})
const loading = ref(false)
const roomList = ref([])
......@@ -135,7 +135,7 @@ function getData() {
}).catch(err => {
console.log(err)
})
console.log('params',route.params)
query.value.hotelId = route.query.id
getHotelRooms(query.value).then(res => {
roomList.value = res.rows
})
......
src/viewsPc/booking/hotelOrder.vue
......@@ -5,7 +5,7 @@
<div slot="header">
<div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
</div>
{{room}}
<el-row class="pd20" :gutter="20">
<el-col :span="14" >
<div class="border-info">
......@@ -43,8 +43,8 @@
<el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="`入住人${index+1}`">
<el-input v-model="rzUserArr[index]" placeholder="每间填一位住客姓名"/>
</el-form-item>
<el-form-item label="预计到店">
<el-select v-model="form.ddDate" placeholder="请选择预计到店时间">
<el-form-item :label="language==0?'预计到店':'Expected check-in'">
<el-select v-model="form.ddDate" :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'">
<el-option
v-for="item in ddDateArr"
:key="item.value"
......@@ -53,21 +53,24 @@
/>
</el-select>
</el-form-item>
<el-form-item label="联系电话">
<el-form-item :label="language==0?'联系电话':'Contact phone'">
<el-input v-model="form.phone"/>
</el-form-item>
<div v-if="room.addBedFlag=='1'">
<el-form-item label="是否加床">
<el-radio-group>
<el-radio v-model="form.isAddbed" label="1">是</el-radio>
<el-radio v-model="form.isAddbed" label="0">否</el-radio>
<el-form-item :label="language==0?'是否加床':'Extra bed'">
<el-radio-group v-model="form.isAddbed">
<el-radio label="1">{{ language==0?'是':'Yes' }}</el-radio>
<el-radio label="0">{{ language==0?'否':'No' }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="加床张数">
<el-form-item :label="language==0?'加床张数':'Extra bed num'">
<el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed" />
</el-form-item>
<div class="tip" v-if="form.isAddbed=='1'">* 一个房间最多加一张床</div>
<div class="tip" v-if="form.isAddbed=='1'">*
<span v-if="language == 0">一个房间最多加一张床</span>
<span v-else>A room can only add one bed</span>
</div>
</div>
</el-form>
</div>
......@@ -75,24 +78,28 @@
<el-col :span="10">
<div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
<div class="border-rr mt20 pd20 ccitemBox">
<label> 房费
<span class="fr">¥{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
<label> {{ language==0?'房费':'Room fee' }}
<span class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.roomPrice*form.roomNum*choseRooms.length).toFixed(2)}}</span>
<span class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.roomPriceEn*form.roomNum*choseRooms.length).toFixed(2)}}</span>
</label>
<div class="ccitem" v-for="(c, index) in choseRooms" :key="index">
{{ c }}
<text>{{form.roomNum}}*¥{{room.roomPrice}}</text>
<text v-if="language==0">{{form.roomNum}}*{{ language==0?'¥':'€' }}{{room.roomPrice}}</text>
<text v-else>{{form.roomNum}}*{{ language==0?'¥':'€' }}{{room.roomPriceEn}}</text>
</div>
<label v-if="form.isAddbed=='1'">加床费
<span class="fr">¥{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
<label v-if="form.isAddbed=='1'">{{ language==0?'加床费':'Extra bed fee' }}
<span class="fr" v-if="language==0">{{ language==0?'¥':'€' }}{{(room.bedPrice*form.addNum*choseRooms.length).toFixed(2)}}</span>
<span class="fr" v-else>{{ language==0?'¥':'€' }}{{(room.bedPriceEn*form.addNum*choseRooms.length).toFixed(2)}}</span>
</label>
<div v-if="form.isAddbed=='1'" class="ccitem" v-for="(c, index) in choseRooms" :key="index">
{{ c }}
<text>{{form.addNum}}*¥{{room.bedPrice}}</text>
<text v-if="language==0">{{form.addNum}}*{{ language==0?'¥':'€' }}{{room.bedPrice}}</text>
<text v-else>{{form.addNum}}*{{ language==0?'¥':'€' }}{{room.bedPriceEn}}</text>
</div>
<label>共计<span class="fr bigMoney">¥{{money}}</span></label>
<label class="bigMoney">{{ language==0?'共计':'Total' }}<span class="fr bigMoney">{{ language==0?'¥':'€' }}{{money}}</span></label>
</div>
</el-col>
......@@ -119,6 +126,7 @@ const hotelName = ref('')
const canOrderStart = ref('')
const canOrderNum = ref(0)
const form = ref({
isAddbed: '0',
roomNum: 0,
addNum: 0
})
......@@ -271,8 +279,14 @@ function getDate(datestr) {
return date
}
function countMoney() {
money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
.addNum * usedays)).toFixed(2)
if(language.value == 0){
money.value = ((room.value.roomPrice * form.value.roomNum * usedays) + (room.value.bedPrice * form.value
.addNum * usedays)).toFixed(2)
} else {
money.value = ((room.value.roomPriceEn * form.value.roomNum * usedays) + (room.value.bedPriceEn * form.value
.addNum * usedays)).toFixed(2)
}
// console.log(usedays,money.value)
}
function submit() {
......@@ -352,7 +366,7 @@ function submit() {
label {
margin: 10px 0;
display: block;
min-height: 30px;
span {
color: #FF8124;font-family: DIN Alternate;
font-size: 24px;
......@@ -363,9 +377,9 @@ function submit() {
.ccitem {
display: flex;
justify-content: space-between;
font-size: 14px;
font-size: 15px;
color: #666;
margin: 5px 0;
margin: 5px 0 10px;
label {
font-size: 16px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!