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
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="banner"> 3 <div class="banner">
4 <h2>{{ language==0?'旅游服务':'Travel Service' }}</h2> 4 <h2>{{ language == 0 ? '旅游服务' : 'Travel Service' }}</h2>
5 </div> 5 </div>
6 <div class="box"> 6 <div class="box">
7 <div class="searchBar"> 7 <div class="searchBar">
8 <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" /> 8 <el-input v-model="query.name" :placeholder="language==0?'请输入关键字搜索':'Search'" class="no-border" />
9 <el-button size="large" type="primary" class="btn-lineG" icon="search" @click="getList"> 9 <el-button class="btn-lineG" icon="search" size="large" type="primary" @click="getList">
10 {{ language==0?'搜索':'Search' }}</el-button> 10 {{ language == 0 ? '搜索' : 'Search' }}
11 </el-button>
11 </div> 12 </div>
12 </div> 13 </div>
13 14
14 <div v-loading="loading" class="box"> 15 <div v-loading="loading" class="box">
15 <el-row :gutter="20"> 16 <el-row :gutter="20">
16 <el-col 17 <el-col
17 v-for="(h,index) in list" :lg="24" :md="24" :sm="24" :xs="24" 18 v-for="(h,index) in list" :key="h.id" :lg="24" :md="24" :sm="24"
18 :xl="24" class="mb20" 19 :xl="24"
20 :xs="24" class="mb20"
19 > 21 >
20 <el-card> 22 <el-card>
21 <!-- 酒店列表--> 23 <!-- 酒店列表-->
22 <el-row class="hotel" align="middle" :gutter="20"> 24 <el-row :gutter="20" align="middle" class="hotel">
23 <el-col :span="6"> 25 <el-col :span="6">
24 <div class="imgbox"> 26 <div class="imgbox">
25 <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"> 27 <img :src="fillImgUrl(h.photos?.split(',')[0])" class="w100">
26 </div> 28 </div>
27 </el-col> 29 </el-col>
28 <el-col :span="12"> 30 <el-col :span="12">
...@@ -30,23 +32,29 @@ ...@@ -30,23 +32,29 @@
30 <div class="starBox"> 32 <div class="starBox">
31 <img v-for="i in Number(h.rank||0)" src="@/assets/booking/star.png"> 33 <img v-for="i in Number(h.rank||0)" src="@/assets/booking/star.png">
32 </div> 34 </div>
33 35
34 <p class="esp addr mt20"> 36 <p class="esp addr mt20">
35 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"> 37 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
36 <Clock /> 38 <Clock />
37 </el-icon> 39 </el-icon>
38 <span class="ml5">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ h.startTime }} ～ {{ h.workTime }}</span> 40 <span class="ml5">{{ language == 0 ? '开园时间' : 'Opening Time' }}：{{ h.startTime }} ～ {{
41 h.workTime
42 }}</span>
39 </p> 43 </p>
40 <p class="esp addr mt20"> 44 <p class="esp addr mt20">
41 <el-icon size="16" style="position: relative;top: 2px" color="#929AA0"><LocationFilled /></el-icon> 45 <el-icon color="#929AA0" size="16" style="position: relative;top: 2px">
46 <LocationFilled />
47 </el-icon>
42 {{ h.address }} 48 {{ h.address }}
43 </p> 49 </p>
44 </el-col> 50 </el-col>
45 <el-col :span="4" class="text-right"> 51 <el-col :span="4" class="text-right">
46 <div class="price">{{ language==0?'¥':'€' }}<span>{{ h.price }}</span> 52 <div class="price">{{ language == 0 ? '¥' : '€' }}<span>{{ h.price }}</span>
47 <i v-if="language==0">起</i> 53 <i v-if="language==0">起</i>
48 </div> 54 </div>
49 <el-button class="btn-lineG w200px" round type="primary" @click="goDetail(h)">{{ language==0?'立即预订':'Select' }} ⇀</el-button> 55 <el-button class="btn-lineG w200px" round type="primary" @click="goDetail(h)">
56 {{ language == 0 ? '立即预订' : 'Select' }} ⇀
57 </el-button>
50 </el-col> 58 </el-col>
51 </el-row> 59 </el-row>
52 </el-card> 60 </el-card>
...@@ -64,6 +72,9 @@ import { useRouter, useRoute } from 'vue-router' ...@@ -64,6 +72,9 @@ import { useRouter, useRoute } from 'vue-router'
64 import { useStorage } from '@vueuse/core/index' 72 import { useStorage } from '@vueuse/core/index'
65 import useUserStore from '@/store/modules/user' 73 import useUserStore from '@/store/modules/user'
66 import { ref, onMounted } from 'vue' 74 import { ref, onMounted } from 'vue'
75 import { getCurrentInstance } from '@vue/runtime-core'
76
77 const { proxy } = getCurrentInstance()
67 78
68 const router = useRouter() 79 const router = useRouter()
69 const route = useRoute() 80 const route = useRoute()
...@@ -90,62 +101,182 @@ function getList() { ...@@ -90,62 +101,182 @@ function getList() {
90 loading.value = false 101 loading.value = false
91 }) 102 })
92 } 103 }
93 function goDetail(item) { 104
105 async function goDetail(item) {
94 if (!user) { 106 if (!user) {
95 useStore().setVisitor() 107 useStore().setVisitor()
96 return 108 return
97 } 109 }
98 router.push({ 110 const res = await booking.checkOrderPay(6)
99 name: 'travelDetail', 111 if (res.data) {
100 params: { 112 await router.push({
101 scenicId: item.scenicId 113 name: 'travelDetail',
102 }, 114 params: {
103 query: { 115 scenicId: item.scenicId
104 lasId: item.id 116 },
105 } 117 query: {
106 }) 118 lasId: item.id
119 }
120 })
121 } else {
122 await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.')
123 await router.push({
124 name: 'myReservation'
125 })
126 }
107 } 127 }
108 </script> 128 </script>
109 129
110 <style scoped lang="scss"> 130 <style lang="scss" scoped>
111 .hotel{ 131 .hotel {
112 h3{margin: 0 0 10px;} 132 h3 {
113 img.w100{object-fit: cover;aspect-ratio: 16/9} 133 margin: 0 0 10px;
114 .addr{font-size: 14px;color: #929AA0;font-weight: 400;margin: 0 0 10px;} 134 }
115 .price{margin: 0 0 8px; 135
116 color: #FF8124;font-size: 18px; 136 img.w100 {
117 span{font-size: 36px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;} 137 object-fit: cover;
118 i{font-style: normal;color: #929AA0;} 138 aspect-ratio: 16/9
139 }
140
141 .addr {
142 font-size: 14px;
143 color: #929AA0;
144 font-weight: 400;
145 margin: 0 0 10px;
146 }
147
148 .price {
149 margin: 0 0 8px;
150 color: #FF8124;
151 font-size: 18px;
152
153 span {
154 font-size: 36px;
155 margin: 0 8px;
156 font-family: 'DINAlternate-Bold';
157 font-weight: 600;
158 }
159
160 i {
161 font-style: normal;
162 color: #929AA0;
119 } 163 }
120 } 164 }
121 .banner{height: 140px;background-size: cover;text-align: center; 165 }
122 background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center; 166
123 justify-content: center; 167 .banner {
124 img{display: block;margin:-30px auto 0;width: auto;} 168 height: 140px;
125 color: #fff;font-style: italic;font-size: 24px;text-transform: uppercase; 169 background-size: cover;
126 h2{margin:-30px auto 0;font-weight: bold;letter-spacing: 4px;} 170 text-align: center;
127 } 171 background: url("@/assets/booking/jd_bg.png") center;
128 .searchBar{position: relative;top: -30px; 172 display: flex;
129 background: #FFFFFF;display: flex;padding: 20px; 173 align-items: center;
130 border-radius: 10px;} 174 justify-content: center;
131 .no-border{border: none;background: #F5F7F9; 175
132 :deep(.el-input__wrapper){border: none;box-shadow: none;background: #F5F7F9;} 176 img {
133 } 177 display: block;
134 .imgbox {width: 100%;height: 100%;position: relative; 178 margin: -30px auto 0;
135 img{width: 100%;height: 100%;} 179 width: auto;
136 .starBox{position: absolute;bottom: 0;right: 0;background: rgba(0,0,0,0.4);padding: 10px 15px 3px;} 180 }
137 } 181
138 .po-r-b{} 182 color: #fff;
139 .starBox{ 183 font-style: italic;
140 border-radius: 14px 0 0 0; 184 font-size: 24px;
141 img{display: inline-block;margin-right: 4px;width: 24px;} 185 text-transform: uppercase;
142 } 186
143 .tagbox{margin: 10px 0; 187 h2 {
144 a{color: #AFB5B9;font-size: 12px;} 188 margin: -30px auto 0;
145 span{border-radius: 13px;font-size: 12px;padding: 3px 10px;margin-right:10px;font-weight: 400;} 189 font-weight: bold;
146 span:nth-child(4n){background: rgba(50, 177, 108, 0.2);color: rgba(50, 177, 108, 1);} 190 letter-spacing: 4px;
147 span:nth-child(4n+1){background:rgba(243, 152, 0, 0.2);color: rgba(243, 152, 0, 1);} 191 }
148 span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);} 192 }
149 span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);} 193
194 .searchBar {
195 position: relative;
196 top: -30px;
197 background: #FFFFFF;
198 display: flex;
199 padding: 20px;
200 border-radius: 10px;
201 }
202
203 .no-border {
204 border: none;
205 background: #F5F7F9;
206
207 :deep(.el-input__wrapper) {
208 border: none;
209 box-shadow: none;
210 background: #F5F7F9;
211 }
212 }
213
214 .imgbox {
215 width: 100%;
216 height: 100%;
217 position: relative;
218
219 img {
220 width: 100%;
221 height: 100%;
222 }
223
224 .starBox {
225 position: absolute;
226 bottom: 0;
227 right: 0;
228 background: rgba(0, 0, 0, 0.4);
229 padding: 10px 15px 3px;
230 }
231 }
232
233 .po-r-b {
234 }
235
236 .starBox {
237 border-radius: 14px 0 0 0;
238
239 img {
240 display: inline-block;
241 margin-right: 4px;
242 width: 24px;
150 } 243 }
244 }
245
246 .tagbox {
247 margin: 10px 0;
248
249 a {
250 color: #AFB5B9;
251 font-size: 12px;
252 }
253
254 span {
255 border-radius: 13px;
256 font-size: 12px;
257 padding: 3px 10px;
258 margin-right: 10px;
259 font-weight: 400;
260 }
261
262 span:nth-child(4n) {
263 background: rgba(50, 177, 108, 0.2);
264 color: rgba(50, 177, 108, 1);
265 }
266
267 span:nth-child(4n+1) {
268 background: rgba(243, 152, 0, 0.2);
269 color: rgba(243, 152, 0, 1);
270 }
271
272 span:nth-child(4n+2) {
273 background: rgba(0, 160, 233, 0.2);
274 color: rgba(0, 160, 233, 1);
275 }
276
277 span:nth-child(4n+3) {
278 background: rgba(247, 64, 166, 0.2);
279 color: rgba(247, 64, 166, 1);
280 }
281 }
151 </style> 282 </style>
......
src/viewsPc/booking/travelDetail.vue
...@@ -237,14 +237,14 @@ async function toSelectSeat() { ...@@ -237,14 +237,14 @@ async function toSelectSeat() {
237 } 237 }
238 238
239 async function checkOrderPay() { 239 async function checkOrderPay() {
240 const res = await booking.checkOrderPay(8) 240 const res = await booking.checkOrderPay(6)
241 if (res.data == -100) { 241 if (res.data) {
242 goNext()
243 } else {
242 await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.') 244 await proxy.$modal.confirm(language.value == 0 ? '您有未支付的订单，请前往支付。' : 'You have unpaid orders, please proceed to payment.')
243 await router.push({ 245 await router.push({
244 name: 'myReservation' 246 name: 'myReservation'
245 }) 247 })
246 } else {
247 goNext()
248 } 248 }
249 } 249 }
250 250
......
src/viewsPc/booking/travelOrder.vue
...@@ -19,25 +19,28 @@ ...@@ -19,25 +19,28 @@
19 </h3> 19 </h3>
20 <div class="info"> 20 <div class="info">
21 <el-icon> 21 <el-icon>
22 <Clock /> 22 <Phone />
23 </el-icon> 23 </el-icon>
24 <span class="mr10">{{ language == 0 ? '出发时间' : 'Opening Time' }}：{{ scenicItem?.startTime }} ～ {{ 24 <span class="mr10">{{ language == 0 ? '联系电话' : 'Contact Number' }}：{{
25 scenicItem?.workTime 25 scenicItem?.contact
26 }}</span> 26 }}</span>
27 </div> 27 </div>
28 <div class="info"> 28 <div class="info">
29 <el-icon> 29 <el-icon>
30 <Phone /> 30 <Clock />
31 </el-icon> 31 </el-icon>
32 <span class="mr10">{{ language == 0 ? '联系方式' : 'Contact Number' }}：{{ 32 <span class="mr10">{{ language == 0 ? '出发时间' : 'Opening Time' }}：{{ scenicItem?.startTime }}
33 scenicItem?.contact 33 <!-- ～ {{scenicItem?.workTime }}-->
34 }}</span> 34 </span>
35 </div> 35 </div>
36
36 <div class="info esp"> 37 <div class="info esp">
37 <el-icon> 38 <el-icon>
38 <MapLocation /> 39 <MapLocation />
39 </el-icon> 40 </el-icon>
40 <span>{{ scenicItem?.address }}</span> 41 <span class="mr10">{{ language == 0 ? '集合地点' : 'Assembling Place' }}：{{
42 scenicItem?.address
43 }}</span>
41 </div> 44 </div>
42 </el-col> 45 </el-col>
43 </el-row> 46 </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!