no message
Showing
15 changed files
with
268 additions
and
62 deletions
| ... | @@ -34,3 +34,17 @@ export function newsSubmitOrderHotel(data) { | ... | @@ -34,3 +34,17 @@ export function newsSubmitOrderHotel(data) { |
| 34 | data: data | 34 | data: data |
| 35 | }) | 35 | }) |
| 36 | } | 36 | } |
| 37 | export function getRoomBilldetailbyId(params) { | ||
| 38 | return request({ | ||
| 39 | url: `/ota/orderRoom/getRoomOrderInfoByOrderId`, | ||
| 40 | method: 'get', | ||
| 41 | params: params | ||
| 42 | }) | ||
| 43 | } | ||
| 44 | export function getActivityCarList(params) { | ||
| 45 | return request({ | ||
| 46 | url: `/ota/activityVehicle/wxList`, | ||
| 47 | method: 'get', | ||
| 48 | params: params | ||
| 49 | }) | ||
| 50 | } | ... | ... |
src/assets/booking/arrow.png
0 → 100644
868 Bytes
src/assets/booking/cl_bg.png
0 → 100644
87.7 KB
src/assets/booking/cl_text.png
0 → 100644
13.1 KB
src/assets/booking/wf.png
0 → 100644
3.6 KB
| ... | @@ -362,6 +362,12 @@ export const constantRoutes = [ | ... | @@ -362,6 +362,12 @@ export const constantRoutes = [ |
| 362 | meta: { title: 'Hotel Reservation' } | 362 | meta: { title: 'Hotel Reservation' } |
| 363 | }, | 363 | }, |
| 364 | { | 364 | { |
| 365 | path: 'car/:cptId/:id', | ||
| 366 | component: () => import('@/viewsPc/booking/carOrder'), | ||
| 367 | name: 'carOrder', | ||
| 368 | meta: { title: 'Car Reservation' } | ||
| 369 | }, | ||
| 370 | { | ||
| 365 | path: 'hotel/:cptId/:hotelId/:roomId', | 371 | path: 'hotel/:cptId/:hotelId/:roomId', |
| 366 | component: () => import('@/viewsPc/booking/hotelOrder'), | 372 | component: () => import('@/viewsPc/booking/hotelOrder'), |
| 367 | name: 'hotelOrder', | 373 | name: 'hotelOrder', | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <div class="banner"> | 3 | <div class="banner"> |
| 4 | <img src="@/assets/booking/jd_text.png"> | 4 | <img src="@/assets/booking/cl_text.png"> |
| 5 | </div> | 5 | </div> |
| 6 | <div class="box"> | 6 | <div class="box"> |
| 7 | <div class="searchBar"> | 7 | <div class="searchBar"> |
| ... | @@ -13,32 +13,64 @@ | ... | @@ -13,32 +13,64 @@ |
| 13 | </div> | 13 | </div> |
| 14 | 14 | ||
| 15 | <div class="box" v-loading="loading"> | 15 | <div class="box" v-loading="loading"> |
| 16 | <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)"> | 16 | <el-collapse v-model="activeName" accordion style="--el-collapse-header-height:'auto'"> |
| 17 | <!-- che列表--> | 17 | <el-collapse-item :name="index" v-for="(h,index) in list" class="hotel"> |
| 18 | <el-row class="hotel" align="middle" :gutter="20"> | 18 | <template #title> |
| 19 | <el-col :span="6"> | 19 | <el-row align="middle" :gutter="20" class="w100"> |
| 20 | <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/> | 20 | <el-col :span="4"> |
| 21 | </el-col> | 21 | <div class="index">路线{{index+1}} |
| 22 | <el-col :span="10"> | 22 | <img src="@/assets/booking/arrow.png"/> |
| 23 | <h3 class="esp">{{h.name}}</h3> | 23 | </div> |
| 24 | <div class="starBox"> | 24 | </el-col> |
| 25 | <img v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png"> | 25 | <el-col :span="7"> |
| 26 | </div> | 26 | <p class="esp">{{h.checkIn}}</p> |
| 27 | <div class="tagbox"> | 27 | </el-col> |
| 28 | <span v-for="(t,index) in h.label?.split(',')" v-show="index<4">{{t}}</span> | 28 | <el-col :span="4" class="text-center"> |
| 29 | <a v-show="h.label?.split(',').length>4">{{ language==0?'更多':'MORE' }} ></a> | 29 | <img class="mauto w40px" src="@/assets/booking/wf.png"/> |
| 30 | </el-col> | ||
| 31 | <el-col :span="7"> | ||
| 32 | <p class="esp ">{{h.checkOut}}</p> | ||
| 33 | </el-col> | ||
| 34 | </el-row> | ||
| 35 | </template> | ||
| 36 | |||
| 37 | <div class="plr20"> | ||
| 38 | <div v-for="(r,index) in h.carVoList" :key="index" class="room"> | ||
| 39 | <el-row :gutter="30" align="middle"> | ||
| 40 | <el-col :span="4"> | ||
| 41 | <div class="roomImg"> | ||
| 42 | <img :src="fillImgUrl(r.photos?.split(',')[0])"> | ||
| 43 | </div> | ||
| 44 | </el-col> | ||
| 45 | <el-col :span="14"> | ||
| 46 | <h3 class="name">{{ r.carType }} | ||
| 47 | <div class="tagbox"> | ||
| 48 | <span class="tag">{{r.carColor}}</span> | ||
| 49 | <span class="tag" v-show="r.checkOut==1">可送车</span> | ||
| 50 | <span class="tag" v-show="r.checkIn==1">可接车</span> | ||
| 51 | </div> | ||
| 52 | </h3> | ||
| 53 | <el-row :gutter="10"> | ||
| 54 | <el-col :span="8">{{ language==0?'座位数':'Seats' }}: {{r.carSeat}}</el-col> | ||
| 55 | <el-col :span="8">{{ language==0?'运营时间':'Servers Time' }}: {{r.operStart}} ~ {{r.operEnd}}</el-col> | ||
| 56 | </el-row> | ||
| 57 | </el-col> | ||
| 58 | <el-col :span="3"> | ||
| 59 | <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.inPrice:r.inPriceEn}}</span>起</div> | ||
| 60 | </el-col> | ||
| 61 | <el-col :span="3"> | ||
| 62 | <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h,r)">{{ language==0?'我要预定':'Select' }}</el-button> | ||
| 63 | </el-col> | ||
| 64 | </el-row> | ||
| 30 | </div> | 65 | </div> |
| 31 | <p class="esp addr"> | 66 | |
| 32 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> | 67 | <el-empty v-if="list.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/> |
| 33 | {{h.address}} | 68 | </div> |
| 34 | </p> | 69 | |
| 35 | </el-col> | 70 | </el-collapse-item> |
| 36 | <el-col :span="8" class="text-right"> | 71 | </el-collapse> |
| 37 | <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div> | 72 | |
| 38 | <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Select' }} ⇀</el-button> | 73 | |
| 39 | </el-col> | ||
| 40 | </el-row> | ||
| 41 | </el-card> | ||
| 42 | <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" /> | 74 | <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" /> |
| 43 | <div style="height: 50px"></div> | 75 | <div style="height: 50px"></div> |
| 44 | </div> | 76 | </div> |
| ... | @@ -51,12 +83,14 @@ import {onMounted} from "@vue/runtime-core" | ... | @@ -51,12 +83,14 @@ import {onMounted} from "@vue/runtime-core" |
| 51 | import * as booking from "@/apiPc/booking" | 83 | import * as booking from "@/apiPc/booking" |
| 52 | import {useRouter,useRoute} from "vue-router"; | 84 | import {useRouter,useRoute} from "vue-router"; |
| 53 | import {useStorage} from "@vueuse/core/index"; | 85 | import {useStorage} from "@vueuse/core/index"; |
| 86 | import {getActivityCarList} from "@/apiPc/booking"; | ||
| 54 | const router = useRouter() | 87 | const router = useRouter() |
| 55 | const route = useRoute() | 88 | const route = useRoute() |
| 56 | const language= useStorage('language',0) | 89 | const language= useStorage('language',0) |
| 57 | const query = ref({ | 90 | const query = ref({ |
| 58 | name:'' | 91 | name:'' |
| 59 | }) | 92 | }) |
| 93 | const activeName = ref(0) | ||
| 60 | const cptId = ref('') | 94 | const cptId = ref('') |
| 61 | const list = ref([]) | 95 | const list = ref([]) |
| 62 | const loading = ref(false) | 96 | const loading = ref(false) |
| ... | @@ -67,40 +101,50 @@ onMounted(()=>{ | ... | @@ -67,40 +101,50 @@ onMounted(()=>{ |
| 67 | 101 | ||
| 68 | function getList() { | 102 | function getList() { |
| 69 | loading.value = true | 103 | loading.value = true |
| 70 | booking.getHotelList(query.value).then(res=>{ | 104 | booking.getActivityCarList(query.value).then(res=>{ |
| 71 | list.value = res.rows | 105 | list.value = res.rows |
| 72 | loading.value = false | 106 | loading.value = false |
| 73 | }).catch(e=>{ | 107 | }).catch(e=>{ |
| 74 | loading.value = false | 108 | loading.value = false |
| 75 | }) | 109 | }) |
| 76 | } | 110 | } |
| 77 | function goDetail(item) { | 111 | function goOrder(item,car) { |
| 78 | router.push({ | 112 | router.push({ |
| 79 | name:'hotelDetail', | 113 | name:'carOrder', |
| 80 | params:{ | 114 | params:{ |
| 81 | hotelId:item.hotelId, | 115 | id:item.id, |
| 82 | }, | 116 | }, |
| 83 | query:{ | 117 | query:{ |
| 84 | id:item.id | 118 | item:encodeURIComponent(JSON.stringify(item)), |
| 119 | car:encodeURIComponent(JSON.stringify(car)), | ||
| 85 | } | 120 | } |
| 86 | |||
| 87 | }) | 121 | }) |
| 88 | } | 122 | } |
| 89 | </script> | 123 | </script> |
| 90 | 124 | ||
| 91 | <style scoped lang="scss"> | 125 | <style scoped lang="scss"> |
| 92 | .hotel{ | 126 | .w40px{width: 40px} |
| 93 | h3{margin: 0 0 20px;} | 127 | .plr20{padding: 0 20px} |
| 94 | img.w100{object-fit: cover;aspect-ratio: 16/9} | 128 | .hotel{margin-bottom: 20px;cursor: pointer; |
| 95 | .addr{font-size: 16px;color: #929AA0;font-weight: 400;} | 129 | .index{display: flex;font-weight: 500;padding-left: 20px; |
| 96 | .price{margin: 0 0 25px; | 130 | font-size: 18px;align-items: center; |
| 97 | color: #FF8124;font-size: 18px; | 131 | img{margin-left: 15px;} |
| 98 | span{font-size: 24px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;} | ||
| 99 | i{font-style: normal;color: #929AA0;} | ||
| 100 | } | 132 | } |
| 133 | p{font-weight: 500; | ||
| 134 | font-size: 24px; | ||
| 135 | color: #000000;} | ||
| 136 | &:hover .el-card{box-shadow: 0 0 10px #aaa;} | ||
| 101 | } | 137 | } |
| 138 | .hotel:nth-child(7n) .index{color: #009E96;} | ||
| 139 | .hotel:nth-child(7n+1) .index{color: #FF8124;} | ||
| 140 | .hotel:nth-child(7n+2) .index{color: #E4007F;} | ||
| 141 | .hotel:nth-child(7n+3) .index{color: #0068B7;} | ||
| 142 | .hotel:nth-child(7n+4) .index{color: #32B16C;} | ||
| 143 | .hotel:nth-child(7n+5) .index{color: #920783;} | ||
| 144 | .hotel:nth-child(7n+6) .index{color: #00B7EE;} | ||
| 145 | |||
| 102 | .banner{height: 140px;background-size: cover;text-align: center; | 146 | .banner{height: 140px;background-size: cover;text-align: center; |
| 103 | background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center; | 147 | background: url("@/assets/booking/cl_bg.png") center;display: flex;align-items: center; |
| 104 | justify-content: center; | 148 | justify-content: center; |
| 105 | img{display: block;margin:-30px auto 0;width: auto;} | 149 | img{display: block;margin:-30px auto 0;width: auto;} |
| 106 | } | 150 | } |
| ... | @@ -121,4 +165,21 @@ function goDetail(item) { | ... | @@ -121,4 +165,21 @@ function goDetail(item) { |
| 121 | span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);} | 165 | span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);} |
| 122 | span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);} | 166 | span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);} |
| 123 | } | 167 | } |
| 168 | .room { | ||
| 169 | background: #FAFBFD;margin: 20px 0 0;padding: 20px; | ||
| 170 | border: 1px solid #E5E5E5; | ||
| 171 | .name{font-size: 20px;margin: 0 0 10px;} | ||
| 172 | .roomImg{aspect-ratio: 16/9;border-radius: 10px;overflow: hidden; | ||
| 173 | img{width: 100%;object-fit: cover;object-position: center;height: 100%;} | ||
| 174 | } | ||
| 175 | .price{color: #FF8124;font-size: 24px; | ||
| 176 | span{font-size: 36px;font-family: "DIN Alternate"} | ||
| 177 | } | ||
| 178 | .bg-lineg{margin: auto;border-radius: 10px;text-align: center;padding: 7px 2px 2px; | ||
| 179 | font-size: 24px;width:66px;cursor: pointer; | ||
| 180 | div{background: #fff;font-size: 13px;border-radius: 20px;padding: 0 10px; | ||
| 181 | color: #453DEA;font-weight: 500;} | ||
| 182 | } | ||
| 183 | } | ||
| 184 | |||
| 124 | </style> | 185 | </style> | ... | ... |
src/viewsPc/booking/carOrder.vue
0 → 100644
| 1 | <template> | ||
| 2 | <div> | ||
| 3 | <div class="box"> | ||
| 4 | <el-card class="mt30"> | ||
| 5 | <div class="flex"> | ||
| 6 | <p class="esp">{{car.checkIn}}</p> | ||
| 7 | <img src="@/assets/booking/wf.png"/> | ||
| 8 | <p class="esp text-right">{{car.checkOut}}</p> | ||
| 9 | </div> | ||
| 10 | </el-card> | ||
| 11 | <el-card class="mt30 mb60"> | ||
| 12 | <div class="lineHead"> | ||
| 13 | <ul> | ||
| 14 | <li>{{ language == 0 ? '车型选择' : 'Available Cars' }}</li> | ||
| 15 | </ul> | ||
| 16 | </div> | ||
| 17 | |||
| 18 | <div> | ||
| 19 | <div v-for="(r,index) in list" :key="index" class="room"> | ||
| 20 | <el-row :gutter="30" align="middle"> | ||
| 21 | <el-col :span="4"> | ||
| 22 | <div class="roomImg"> | ||
| 23 | <img :src="fillImgUrl(r.photo?.split(',')[0])"> | ||
| 24 | </div> | ||
| 25 | </el-col> | ||
| 26 | <el-col :span="14"> | ||
| 27 | <h3 class="name">{{ r.roomType }}</h3> | ||
| 28 | <el-row :gutter="10"> | ||
| 29 | <el-col :span="8">{{ r.area }}m²</el-col> | ||
| 30 | <el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col> | ||
| 31 | <el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col> | ||
| 32 | <el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col> | ||
| 33 | <!-- <text v-show="r.bathroomFlag==0"> </text> --> | ||
| 34 | <el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col> | ||
| 35 | <el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'"> | ||
| 36 | {{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }} | ||
| 37 | </el-col> | ||
| 38 | <el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col> | ||
| 39 | </el-row> | ||
| 40 | </el-col> | ||
| 41 | <el-col :span="3"> | ||
| 42 | <div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div> | ||
| 43 | </el-col> | ||
| 44 | <el-col :span="3"> | ||
| 45 | <div class="bg-lineg" v-if="language==0" @click="goOrder(r)"> | ||
| 46 | 订 | ||
| 47 | <div>{{ language==0?'在线付':'Online' }}</div> | ||
| 48 | </div> | ||
| 49 | <el-button v-else class="btn-lineG w100" round type="primary" @click="goOrder(r)">Select</el-button> | ||
| 50 | <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0"> | ||
| 51 | 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间 | ||
| 52 | </div> | ||
| 53 | <div class="text-center text-primary mt10 fontsize14" v-else> | ||
| 54 | {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms | ||
| 55 | </div> | ||
| 56 | </el-col> | ||
| 57 | </el-row> | ||
| 58 | </div> | ||
| 59 | |||
| 60 | <el-empty v-if="list.length == 0" :image="`/img/order_no.png`" :image-size="228" description=""/> | ||
| 61 | </div> | ||
| 62 | </el-card> | ||
| 63 | </div> | ||
| 64 | </div> | ||
| 65 | </template> | ||
| 66 | |||
| 67 | <script setup> | ||
| 68 | import {useRouter} from "vue-router"; | ||
| 69 | import {ref, reactive, onMounted} from "vue"; | ||
| 70 | import {useRoute} from "vue-router"; | ||
| 71 | |||
| 72 | import {useStorage} from "@vueuse/core/index"; | ||
| 73 | import useUserStore from "@/store/modules/user"; | ||
| 74 | const user = useUserStore().user | ||
| 75 | const language = useStorage('language', 0) | ||
| 76 | const router = useRouter() | ||
| 77 | const route = useRoute() | ||
| 78 | const form = ref({}) | ||
| 79 | const car = ref({}) | ||
| 80 | const query = ref({ | ||
| 81 | id: route.query.id | ||
| 82 | }) | ||
| 83 | const loading = ref(false) | ||
| 84 | const list = ref([]) | ||
| 85 | onMounted(()=>{ | ||
| 86 | car.value = JSON.parse(decodeURIComponent(route.query.detail)) | ||
| 87 | list.value = car.value.carVoList | ||
| 88 | }) | ||
| 89 | |||
| 90 | |||
| 91 | </script> | ||
| 92 | |||
| 93 | <style scoped> | ||
| 94 | |||
| 95 | </style> |
| ... | @@ -112,7 +112,8 @@ import {useRoute} from "vue-router"; | ... | @@ -112,7 +112,8 @@ import {useRoute} from "vue-router"; |
| 112 | import {getHotelById, getHotelRooms} from "@/apiPc/booking" | 112 | import {getHotelById, getHotelRooms} from "@/apiPc/booking" |
| 113 | 113 | ||
| 114 | import {useStorage} from "@vueuse/core/index"; | 114 | import {useStorage} from "@vueuse/core/index"; |
| 115 | 115 | import useUserStore from "@/store/modules/user"; | |
| 116 | const user = useUserStore().user | ||
| 116 | const language = useStorage('language', 0) | 117 | const language = useStorage('language', 0) |
| 117 | const router = useRouter() | 118 | const router = useRouter() |
| 118 | const route = useRoute() | 119 | const route = useRoute() |
| ... | @@ -185,6 +186,10 @@ function initMap() { | ... | @@ -185,6 +186,10 @@ function initMap() { |
| 185 | } | 186 | } |
| 186 | 187 | ||
| 187 | function goOrder(room) { | 188 | function goOrder(room) { |
| 189 | if(!user){ | ||
| 190 | useUserStore().setReLogin() | ||
| 191 | return | ||
| 192 | } | ||
| 188 | router.push({ | 193 | router.push({ |
| 189 | name:'hotelOrder', | 194 | name:'hotelOrder', |
| 190 | params:{ | 195 | params:{ | ... | ... |
| ... | @@ -27,8 +27,8 @@ | ... | @@ -27,8 +27,8 @@ |
| 27 | 27 | ||
| 28 | <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> | 28 | <div class="leftboderTT">{{ language == 0 ? '预约信息' : 'Reservation information' }}</div> |
| 29 | <div class="border-rr mt20 pd20"> | 29 | <div class="border-rr mt20 pd20"> |
| 30 | <el-form :model="form" :label-width="language == 0 ?'100':'150'"> | 30 | <el-form :model="form" :label-width="language == 0 ?'100':'150'" :rules="rules" ref="formRef"> |
| 31 | <el-form-item :label="language==0?'入住日期':'Check-in date'"> | 31 | <el-form-item :label="language==0?'入住日期':'Check-in date'" required> |
| 32 | <el-date-picker @change="getDaysBetween" | 32 | <el-date-picker @change="getDaysBetween" |
| 33 | v-model="rzRange" | 33 | v-model="rzRange" |
| 34 | type="daterange" | 34 | type="daterange" |
| ... | @@ -36,17 +36,17 @@ | ... | @@ -36,17 +36,17 @@ |
| 36 | value-format="YYYY-MM-DD"/> | 36 | value-format="YYYY-MM-DD"/> |
| 37 | <!-- :picker-options="pickerOptions"--> | 37 | <!-- :picker-options="pickerOptions"--> |
| 38 | </el-form-item> | 38 | </el-form-item> |
| 39 | <el-form-item :label="language==0?'房间数':'Rooms'"> | 39 | <el-form-item :label="language==0?'房间数':'Rooms'" required prop="roomNum"> |
| 40 | <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/> | 40 | <el-input-number v-model="form.roomNum" :min="0" :max="canOrderNum" @change="changeRoomNum"/> |
| 41 | <div class="red ml20" v-if="rzRange[1]"> | 41 | <div class="red ml20" v-if="rzRange[1]"> |
| 42 | <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span> | 42 | <span v-if="language == 0">剩余房间数:{{ canOrderNum }}</span> |
| 43 | <span v-else>{{ canOrderNum }} Remaining rooms</span> | 43 | <span v-else>{{ canOrderNum }} Remaining rooms</span> |
| 44 | </div> | 44 | </div> |
| 45 | </el-form-item> | 45 | </el-form-item> |
| 46 | <el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="`入住人${index+1}`"> | 46 | <el-form-item v-for="(n,index) in form.roomNum" :key="index" :label="`入住人${index+1}`" required> |
| 47 | <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/> | 47 | <el-input v-model="rzUserArr[index]" :placeholder="language==0?'每间填一位住客姓名':'Each room fill in one name of the guest'"/> |
| 48 | </el-form-item> | 48 | </el-form-item> |
| 49 | <el-form-item :label="language==0?'预计到店':'Expected check-in'"> | 49 | <el-form-item :label="language==0?'预计到店':'Expected check-in'" required> |
| 50 | <el-select v-model="form.ddDate" | 50 | <el-select v-model="form.ddDate" |
| 51 | :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'"> | 51 | :placeholder="language==0?'请选择预计到店时间':'Please select the expected check-in time'"> |
| 52 | <el-option | 52 | <el-option |
| ... | @@ -57,24 +57,25 @@ | ... | @@ -57,24 +57,25 @@ |
| 57 | /> | 57 | /> |
| 58 | </el-select> | 58 | </el-select> |
| 59 | </el-form-item> | 59 | </el-form-item> |
| 60 | <el-form-item :label="language==0?'联系电话':'Contact phone'"> | 60 | <el-form-item :label="language==0?'联系电话':'Contact phone'" required prop="phone"> |
| 61 | <el-input v-model="form.phone"/> | 61 | <el-input v-model="form.phone"/> |
| 62 | </el-form-item> | 62 | </el-form-item> |
| 63 | 63 | ||
| 64 | <div v-if="room.addBedFlag=='1'"> | 64 | <div v-if="room.addBedFlag=='1'"> |
| 65 | <el-form-item :label="language==0?'是否加床':'Extra bed'"> | 65 | <el-form-item :label="language==0?'是否加床':'Extra bed'" required> |
| 66 | <el-radio-group v-model="form.isAddbed"> | 66 | <el-radio-group v-model="form.isAddbed"> |
| 67 | <el-radio label="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio> | 67 | <el-radio label="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio> |
| 68 | <el-radio label="0">{{ language == 0 ? '否' : 'No' }}</el-radio> | 68 | <el-radio label="0">{{ language == 0 ? '否' : 'No' }}</el-radio> |
| 69 | </el-radio-group> | 69 | </el-radio-group> |
| 70 | </el-form-item> | 70 | </el-form-item> |
| 71 | <el-form-item :label="language==0?'加床张数':'Extra bed num'"> | 71 | <el-form-item :label="language==0?'加床张数':'Extra bed num'" required> |
| 72 | <el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed"/> | 72 | <el-input-number v-model="form.addNum" :min="0" :max="1" @change="changeBed"/> |
| 73 | </el-form-item> | 73 | |
| 74 | <div class="tip" v-if="form.isAddbed=='1'">* | 74 | <div class="tip" v-if="form.isAddbed=='1'">* |
| 75 | <span v-if="language == 0">一个房间最多加一张床</span> | 75 | <span v-if="language == 0">一个房间最多加一张床</span> |
| 76 | <span v-else>A room can only add one bed</span> | 76 | <span v-else>A room can only add one bed</span> |
| 77 | </div> | 77 | </div> |
| 78 | </el-form-item> | ||
| 78 | </div> | 79 | </div> |
| 79 | </el-form> | 80 | </el-form> |
| 80 | </div> | 81 | </div> |
| ... | @@ -156,7 +157,9 @@ const canOrderNum = ref(0) | ... | @@ -156,7 +157,9 @@ const canOrderNum = ref(0) |
| 156 | const form = ref({ | 157 | const form = ref({ |
| 157 | isAddbed: '0', | 158 | isAddbed: '0', |
| 158 | roomNum: 0, | 159 | roomNum: 0, |
| 159 | addNum: 0 | 160 | addNum: 1, |
| 161 | ddDate:'14:00', | ||
| 162 | phone: user.phonenumber||'', | ||
| 160 | }) | 163 | }) |
| 161 | const rzRange = ref([]) | 164 | const rzRange = ref([]) |
| 162 | const rzUserArr = ref([]) | 165 | const rzUserArr = ref([]) |
| ... | @@ -232,6 +235,8 @@ const ddDateArr = ref([ | ... | @@ -232,6 +235,8 @@ const ddDateArr = ref([ |
| 232 | label: '00:00' | 235 | label: '00:00' |
| 233 | } | 236 | } |
| 234 | ]) | 237 | ]) |
| 238 | const rules = ref({}) | ||
| 239 | |||
| 235 | let usedays = 0 | 240 | let usedays = 0 |
| 236 | onMounted(() => { | 241 | onMounted(() => { |
| 237 | console.log(route.query) | 242 | console.log(route.query) |
| ... | @@ -327,6 +332,7 @@ function countMoney() { | ... | @@ -327,6 +332,7 @@ function countMoney() { |
| 327 | function submit() { | 332 | function submit() { |
| 328 | if(!user){ | 333 | if(!user){ |
| 329 | useUserStore().setReLogin() | 334 | useUserStore().setReLogin() |
| 335 | return | ||
| 330 | } | 336 | } |
| 331 | 337 | ||
| 332 | if (usedays == 0) { | 338 | if (usedays == 0) { |
| ... | @@ -466,4 +472,5 @@ function submit() { | ... | @@ -466,4 +472,5 @@ function submit() { |
| 466 | .red { | 472 | .red { |
| 467 | color: #FF8124; | 473 | color: #FF8124; |
| 468 | } | 474 | } |
| 475 | .tip{font-size: 14px;color: #666;padding: 0 10px;} | ||
| 469 | </style> | 476 | </style> | ... | ... |
This diff is collapsed.
Click to expand it.
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | <el-card :body-style="{'padding':'0'}"> | 3 | <el-card :body-style="{'padding':'0'}"> |
| 4 | <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }}</h3></div> | 4 | <div class="indexTitle"> |
| 5 | <h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }} | ||
| 6 | </h3> | ||
| 7 | |||
| 8 | <el-button class="fr" type="primary" plain @click="toInvoice">发票开具</el-button> | ||
| 9 | </div> | ||
| 5 | <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/> | 10 | <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/> |
| 6 | <div class="pd20"> | 11 | <div class="pd20"> |
| 7 | <div v-for="b in list" class="item"> | 12 | <div v-for="b in list" class="item"> |
| ... | @@ -33,9 +38,9 @@ | ... | @@ -33,9 +38,9 @@ |
| 33 | 38 | ||
| 34 | <el-col :lg="8"> | 39 | <el-col :lg="8"> |
| 35 | <div class="text-right"> | 40 | <div class="text-right"> |
| 36 | <el-button class="mb10" plain round type="primary" @click="goDetail(n)"> | 41 | <el-button class="mb10" plain round type="primary" @click="goDetail(b)"> |
| 37 | {{ language==0?'详情':'Detail' }}</el-button> | 42 | {{ language==0?'详情':'Detail' }}</el-button> |
| 38 | <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goPay(b)" | 43 | <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)" |
| 39 | class="mb10" plain round type="primary" > | 44 | class="mb10" plain round type="primary" > |
| 40 | {{ language==0?'支付':'Pay' }}</el-button> | 45 | {{ language==0?'支付':'Pay' }}</el-button> |
| 41 | </div> | 46 | </div> |
| ... | @@ -55,6 +60,7 @@ | ... | @@ -55,6 +60,7 @@ |
| 55 | import {onMounted} from "@vue/runtime-core"; | 60 | import {onMounted} from "@vue/runtime-core"; |
| 56 | import {useStorage} from "@vueuse/core/index"; | 61 | import {useStorage} from "@vueuse/core/index"; |
| 57 | import {newbilllist} from "@/apiPc/common"; | 62 | import {newbilllist} from "@/apiPc/common"; |
| 63 | const router = useRouter() | ||
| 58 | const language= useStorage('language',0) | 64 | const language= useStorage('language',0) |
| 59 | const list = ref([]) | 65 | const list = ref([]) |
| 60 | 66 | ||
| ... | @@ -69,6 +75,18 @@ function getList() { | ... | @@ -69,6 +75,18 @@ function getList() { |
| 69 | } | 75 | } |
| 70 | }) | 76 | }) |
| 71 | } | 77 | } |
| 78 | function goDetail(b) { | ||
| 79 | router.push({ | ||
| 80 | name: 'bookingPay', | ||
| 81 | query: { | ||
| 82 | orderId: b.id | ||
| 83 | } | ||
| 84 | }) | ||
| 85 | } | ||
| 86 | function toInvoice(){ | ||
| 87 | |||
| 88 | } | ||
| 89 | |||
| 72 | </script> | 90 | </script> |
| 73 | 91 | ||
| 74 | <style scoped lang="scss"> | 92 | <style scoped lang="scss"> |
| ... | @@ -84,11 +102,11 @@ function getList() { | ... | @@ -84,11 +102,11 @@ function getList() { |
| 84 | .bg-blue{background: #00a0e9} | 102 | .bg-blue{background: #00a0e9} |
| 85 | } | 103 | } |
| 86 | .indexTitle { | 104 | .indexTitle { |
| 87 | margin: 20px 0 12px; | 105 | margin: 20px 0 12px; overflow: visible; |
| 88 | padding: 0 20px 15px; | 106 | padding: 0 20px 15px; |
| 89 | border-bottom: 1px solid #e5e5e5; | 107 | border-bottom: 1px solid #e5e5e5; |
| 90 | 108 | .fr{margin: -8px 0 0} | |
| 91 | h3 { | 109 | h3 {display: inline-block; |
| 92 | font-size: 16px; | 110 | font-size: 16px; |
| 93 | color: var(--el-color-primary); | 111 | color: var(--el-color-primary); |
| 94 | } | 112 | } | ... | ... |
| ... | @@ -225,7 +225,7 @@ | ... | @@ -225,7 +225,7 @@ |
| 225 | </div> | 225 | </div> |
| 226 | </div> | 226 | </div> |
| 227 | 227 | ||
| 228 | <div> | 228 | <div hidden> |
| 229 | <div class="box"> | 229 | <div class="box"> |
| 230 | <div class="indexTitle"> | 230 | <div class="indexTitle"> |
| 231 | <h3 class="leftboderTT">评委介绍</h3> | 231 | <h3 class="leftboderTT">评委介绍</h3> | ... | ... |
| ... | @@ -220,7 +220,7 @@ | ... | @@ -220,7 +220,7 @@ |
| 220 | </div> | 220 | </div> |
| 221 | </div> | 221 | </div> |
| 222 | 222 | ||
| 223 | <div> | 223 | <div hidden> |
| 224 | <div class="box"> | 224 | <div class="box"> |
| 225 | <div class="indexTitle"> | 225 | <div class="indexTitle"> |
| 226 | <h3 class="leftboderTT">INTRODUCTION OF ADJUDICATORS</h3> | 226 | <h3 class="leftboderTT">INTRODUCTION OF ADJUDICATORS</h3> |
| ... | @@ -710,7 +710,7 @@ const goGuide = () => { | ... | @@ -710,7 +710,7 @@ const goGuide = () => { |
| 710 | p{margin: 13px 0 0;} | 710 | p{margin: 13px 0 0;} |
| 711 | } | 711 | } |
| 712 | .logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px; | 712 | .logobox{background: #fff;height: 180px;border-radius: 10px;margin: 0 0 30px; |
| 713 | img{width: 100%} | 713 | img{width: 100%;height: 100%;object-fit: contain;} |
| 714 | } | 714 | } |
| 715 | .swiperPic{background: #F3F1FE;position: relative; height: 100%; | 715 | .swiperPic{background: #F3F1FE;position: relative; height: 100%; |
| 716 | padding: 20px 45px; | 716 | padding: 20px 45px; | ... | ... |
| ... | @@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => { | ... | @@ -82,7 +82,7 @@ export default defineConfig(({ mode, command }) => { |
| 82 | rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') | 82 | rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') |
| 83 | }, | 83 | }, |
| 84 | '/dev-api': { | 84 | '/dev-api': { |
| 85 | target: 'http://192.168.1.27:8081/', | 85 | target: 'http://192.168.1.118:8081/', |
| 86 | // target: 'https://dance.itechtop.cn/stage-api', | 86 | // target: 'https://dance.itechtop.cn/stage-api', |
| 87 | // target: 'https://wdsfwuxicenter.com/stage-api', | 87 | // target: 'https://wdsfwuxicenter.com/stage-api', |
| 88 | changeOrigin: true, | 88 | changeOrigin: true, | ... | ... |
-
Please register or sign in to post a comment