no message
Showing
2 changed files
with
24 additions
and
10 deletions
| ... | @@ -5,13 +5,14 @@ | ... | @@ -5,13 +5,14 @@ |
| 5 | </div> | 5 | </div> |
| 6 | <div class="box"> | 6 | <div class="box"> |
| 7 | <div class="searchBar"> | 7 | <div class="searchBar"> |
| 8 | <el-input placeholder="请输入关键字搜索" v-model="query.name" class="no-border"> | 8 | <el-input :placeholder="language==0?'请输入关键字搜索':'Search'" v-model="query.name" class="no-border"> |
| 9 | </el-input> | 9 | </el-input> |
| 10 | <el-button size="large" type="primary" class="btn-lineG" icon="search">搜索</el-button> | 10 | <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList"> |
| 11 | {{ language==0?'搜索':'Search' }}</el-button> | ||
| 11 | </div> | 12 | </div> |
| 12 | </div> | 13 | </div> |
| 13 | 14 | ||
| 14 | <div class="box"> | 15 | <div class="box" v-loading="loading"> |
| 15 | <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)"> | 16 | <el-card v-for="(h,index) in list" class="mb20" @click="goDetail(h)"> |
| 16 | <!-- 酒店列表--> | 17 | <!-- 酒店列表--> |
| 17 | <el-row class="hotel" align="middle" :gutter="20"> | 18 | <el-row class="hotel" align="middle" :gutter="20"> |
| ... | @@ -25,7 +26,7 @@ | ... | @@ -25,7 +26,7 @@ |
| 25 | </div> | 26 | </div> |
| 26 | <div class="tagbox"> | 27 | <div class="tagbox"> |
| 27 | <span v-for="(t,index) in h.label?.split(',')" v-show="index<4">{{t}}</span> | 28 | <span v-for="(t,index) in h.label?.split(',')" v-show="index<4">{{t}}</span> |
| 28 | <a v-show="h.label?.split(',').length>4">更多 ></a> | 29 | <a v-show="h.label?.split(',').length>4">{{ language==0?'更多':'MORE' }} ></a> |
| 29 | </div> | 30 | </div> |
| 30 | <p class="esp addr"> | 31 | <p class="esp addr"> |
| 31 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> | 32 | <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> |
| ... | @@ -33,11 +34,12 @@ | ... | @@ -33,11 +34,12 @@ |
| 33 | </p> | 34 | </p> |
| 34 | </el-col> | 35 | </el-col> |
| 35 | <el-col :span="8" class="text-right"> | 36 | <el-col :span="8" class="text-right"> |
| 36 | <div class="price">¥<span>{{ h.price }}</span><i>起</i></div> | 37 | <div class="price">¥<span>{{ h.price }}</span><i v-if="language==0">起</i></div> |
| 37 | <el-button class="btn-lineG w200px" round type="primary" size="large">立即预约 ⇀</el-button> | 38 | <el-button class="btn-lineG w200px" round type="primary" size="large">{{ language==0?'立即预约':'Book Now' }} ⇀</el-button> |
| 38 | </el-col> | 39 | </el-col> |
| 39 | </el-row> | 40 | </el-row> |
| 40 | </el-card> | 41 | </el-card> |
| 42 | <el-empty v-show="!loading&&list.length==0" :image="`/img/order_no.png`" :image-size="228" description="" /> | ||
| 41 | </div> | 43 | </div> |
| 42 | 44 | ||
| 43 | </div> | 45 | </div> |
| ... | @@ -46,19 +48,27 @@ | ... | @@ -46,19 +48,27 @@ |
| 46 | <script setup> | 48 | <script setup> |
| 47 | import {onMounted} from "@vue/runtime-core" | 49 | import {onMounted} from "@vue/runtime-core" |
| 48 | import * as booking from "@/apiPc/booking" | 50 | import * as booking from "@/apiPc/booking" |
| 49 | import {useRouter} from "vue-router"; | 51 | import {useRouter,useRoute} from "vue-router"; |
| 52 | import {useStorage} from "@vueuse/core/index"; | ||
| 50 | const router = useRouter() | 53 | const router = useRouter() |
| 54 | const route = useRoute() | ||
| 55 | const language= useStorage('language',0) | ||
| 51 | const query = ref({ | 56 | const query = ref({ |
| 52 | name:'' | 57 | name:'' |
| 53 | }) | 58 | }) |
| 54 | const list = ref(['']) | 59 | const cptId = ref('') |
| 60 | const list = ref([]) | ||
| 61 | const loading = ref(false) | ||
| 55 | onMounted(()=>{ | 62 | onMounted(()=>{ |
| 56 | getList() | 63 | getList() |
| 64 | cptId.value = route.params.cptId | ||
| 57 | }) | 65 | }) |
| 58 | 66 | ||
| 59 | function getList() { | 67 | function getList() { |
| 68 | loading.value = true | ||
| 60 | booking.getHotelList(query.value).then(res=>{ | 69 | booking.getHotelList(query.value).then(res=>{ |
| 61 | list.value = res.rows | 70 | list.value = res.rows |
| 71 | loading.value = false | ||
| 62 | }) | 72 | }) |
| 63 | } | 73 | } |
| 64 | function goDetail(item) { | 74 | function goDetail(item) { | ... | ... |
| ... | @@ -119,12 +119,16 @@ function goBooking(n) { | ... | @@ -119,12 +119,16 @@ function goBooking(n) { |
| 119 | } | 119 | } |
| 120 | } | 120 | } |
| 121 | .item_en{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;cursor: pointer; | 121 | .item_en{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;cursor: pointer; |
| 122 | display: flex;align-items: center;text-align: center; | 122 | display: flex;align-items: center;text-align: center;color: #333; |
| 123 | font-size: 18px; flex-direction: column;padding: 35px 10px 20px; | 123 | font-size: 18px; flex-direction: column;padding: 35px 10px 20px; |
| 124 | background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF; | 124 | background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF; |
| 125 | background-size: cover; | 125 | background-size: cover; |
| 126 | position: relative; | 126 | position: relative; |
| 127 | border-radius: 15px; | 127 | border-radius: 15px; |
| 128 | img{position: absolute;top: -30px} | 128 | img{position: absolute;top: -30px;transition: all 0.2s;} |
| 129 | &:hover{box-shadow: 0 0 10px #333; | ||
| 130 | img{transform: rotateY(180deg);} | ||
| 131 | p{color: #000;} | ||
| 132 | } | ||
| 129 | } | 133 | } |
| 130 | </style> | 134 | </style> | ... | ... |
-
Please register or sign in to post a comment