Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
bdc6d61b by 华明祺
Options

no message

1 parent 1ce9c5b6
Inline Side-by-side
Showing 3 changed files with 101 additions and 46 deletions
src/viewsPc/booking/hotelDetail.vue
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
113 }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div> 113 }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
114 </el-col> 114 </el-col>
115 <el-col :span="3"> 115 <el-col :span="3">
116 <el-button v-if="language==0" :disabled="r.useCount<=0" :class="{'forbid':r.useCount<=0}" 116 <el-button v-if="language==0" :disabled="!r.useCount && !hotTime" :class="{'forbid':(!r.useCount && !hotTime)}"
117 @click="goOrder(r)" class="bg-lineg button"> 117 @click="goOrder(r)" class="bg-lineg button">
118 订 118 订
119 <div>{{ language == 0 ? '在线付' : 'Online' }}</div> 119 <div>{{ language == 0 ? '在线付' : 'Online' }}</div>
......
src/viewsPc/components/homeQuick.vue
...@@ -26,11 +26,13 @@ ...@@ -26,11 +26,13 @@
26 <el-col :sm="12" :lg="8"> 26 <el-col :sm="12" :lg="8">
27 <div class="item_en" @click="popRemark(1)"><img src="@/assets/dance/btn01.png"> 27 <div class="item_en" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">
28 <p>HOTEL RESERVATION</p> 28 <p>HOTEL RESERVATION</p>
29 </div></el-col> 29 </div>
30 </el-col>
30 <el-col :sm="12" :lg="8"> 31 <el-col :sm="12" :lg="8">
31 <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png"> 32 <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">
32 <p>TRANSPORTATION RESERVATION</p> 33 <p>TRANSPORTATION RESERVATION</p>
33 </div></el-col> 34 </div>
35 </el-col>
34 <el-col :sm="12" :lg="8"> 36 <el-col :sm="12" :lg="8">
35 <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png"> 37 <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">
36 <p>DINING RESERVATION</p> 38 <p>DINING RESERVATION</p>
...@@ -45,11 +47,13 @@ ...@@ -45,11 +47,13 @@
45 <el-col :sm="12" :lg="8"> 47 <el-col :sm="12" :lg="8">
46 <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png"> 48 <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">
47 <p>MAKEUP APPOINTMENT</p> 49 <p>MAKEUP APPOINTMENT</p>
48 </div></el-col> 50 </div>
51 </el-col>
49 <el-col :sm="12" :lg="8"> 52 <el-col :sm="12" :lg="8">
50 <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png"> 53 <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">
51 <p>PHOTOGRAPHY APPOINTMENT</p> 54 <p>PHOTOGRAPHY APPOINTMENT</p>
52 </div></el-col> 55 </div>
56 </el-col>
53 </el-row> 57 </el-row>
54 </div> 58 </div>
55 <order-remark ref="orderRemarkRef" @submit="goBooking"/> 59 <order-remark ref="orderRemarkRef" @submit="goBooking"/>
...@@ -61,12 +65,14 @@ import {useRouter} from "vue-router"; ...@@ -61,12 +65,14 @@ import {useRouter} from "vue-router";
61 65
62 const router = useRouter() 66 const router = useRouter()
63 import OrderRemark from '@/viewsPc/components/orderRemark' 67 import OrderRemark from '@/viewsPc/components/orderRemark'
68
64 const {proxy} = getCurrentInstance() 69 const {proxy} = getCurrentInstance()
65 import {useStorage} from "@vueuse/core/index"; 70 import {useStorage} from "@vueuse/core/index";
66 import {ElMessage} from "element-plus"; 71 import {ElMessage} from "element-plus";
67 import {getCurrentInstance} from "@vue/runtime-core"; 72 import {getCurrentInstance} from "@vue/runtime-core";
68 import {computed, onMounted, watch} from "vue"; 73 import {computed, onMounted, watch} from "vue";
69 import {getBaseInfoByActiveId} from "@/apiPc/booking"; 74 import {getBaseInfoByActiveId} from "@/apiPc/booking";
75
70 const props = defineProps({ 76 const props = defineProps({
71 matchId: { 77 matchId: {
72 type: String, 78 type: String,
...@@ -74,45 +80,53 @@ const props = defineProps({ ...@@ -74,45 +80,53 @@ const props = defineProps({
74 default: '0' 80 default: '0'
75 } 81 }
76 }) 82 })
77 const language= useStorage('language',0) 83 const language = useStorage('language', 0)
78 const form = ref({}) 84 const form = ref({})
79 const matchId = computed(()=>props.matchId); 85 const matchId = computed(() => props.matchId);
80 86
81 watch(matchId,(val)=>{ 87 watch(matchId, (val) => {
82 if(val && val!='0'){ 88 if (val && val != '0') {
83 getBaseInfoByActiveId(props.matchId).then(res=>{ 89 getBaseInfoByActiveId(props.matchId).then(res => {
84 form.value = res.data || null 90 form.value = res.data || null
85 }).catch(err=>{ 91 }).catch(err => {
86 console.log(err) 92 console.log(err)
87 form.value = null 93 form.value = null
88 }) 94 })
89 } 95 }
90 }) 96 })
91 97
92 onMounted(()=>{ 98 onMounted(() => {
93 99
94 }) 100 })
101
95 function building() { 102 function building() {
96 ElMessage.warning(language.value==0?'感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。':'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 103 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
97 return 104 return
98 } 105 }
99 function popRemark(type){ 106
100 // debugger 107 function popRemark(type) {
101 if(!form.value){ 108 if (!form.value) {
102 building() 109 building()
103 return 110 return
104 } 111 }
105 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3') || (form.value.isMealView == 0&&type=='4') || (type=='5'&&form.value.isPhotoView == 0)){ 112 if ((form.value.isJdView == 0 && type == '1')
113 || (form.value.isCarView == 0 && type == '2')
114 || (form.value.isFoodView == 0 && type == '3')
115 || (form.value.isMealView == 0 && type == '4')
116 || (form.value.isPhotoView == 0 && type == '5')
117 || (type == '0')
118 ) {
106 building() 119 building()
107 return 120 return
108 } 121 }
109 const params = { 122 const params = {
110 matchId: props.matchId, 123 matchId: props.matchId,
111 title: language.value == 0 ?'预订说明':'Booking Instructions', 124 title: language.value == 0 ? '预订说明' : 'Booking Instructions',
112 type: type 125 type: type
113 } 126 }
114 proxy.$refs['orderRemarkRef'].open(params) 127 proxy.$refs['orderRemarkRef'].open(params)
115 } 128 }
129
116 function goBooking(n) { 130 function goBooking(n) {
117 switch (n) { 131 switch (n) {
118 case 0: 132 case 0:
...@@ -151,10 +165,19 @@ function goBooking(n) { ...@@ -151,10 +165,19 @@ function goBooking(n) {
151 .itemBox { 165 .itemBox {
152 padding: 20px 40px; 166 padding: 20px 40px;
153 } 167 }
154 .itemBox_en{ 168
169 .itemBox_en {
155 padding: 20px 40px; 170 padding: 20px 40px;
156 p{margin: 0;height: 40px;line-height: 20px;display: flex;align-items: center;} 171
172 p {
173 margin: 0;
174 height: 40px;
175 line-height: 20px;
176 display: flex;
177 align-items: center;
178 }
157 } 179 }
180
158 .item { 181 .item {
159 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14); 182 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
160 margin: 10px 0; 183 margin: 10px 0;
...@@ -169,17 +192,39 @@ function goBooking(n) { ...@@ -169,17 +192,39 @@ function goBooking(n) {
169 margin: 0 5%; 192 margin: 0 5%;
170 } 193 }
171 } 194 }
172 .item_en{box-shadow: 0px 0px 21px 0px rgba(41,23,101,0.14);margin: 40px 0 0;cursor: pointer; 195
173 display: flex;align-items: center;text-align: center;color: #333; 196 .item_en {
174 font-size: 18px; flex-direction: column;padding: 35px 10px 20px; 197 box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
175 background:url("@/assets/dance/znbb.png") no-repeat left #FFFFFF; 198 margin: 40px 0 0;
199 cursor: pointer;
200 display: flex;
201 align-items: center;
202 text-align: center;
203 color: #333;
204 font-size: 18px;
205 flex-direction: column;
206 padding: 35px 10px 20px;
207 background: url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
176 background-size: cover; 208 background-size: cover;
177 position: relative; 209 position: relative;
178 border-radius: 15px; 210 border-radius: 15px;
179 img{position: absolute;top: -30px;transition: all 0.2s;} 211
180 &:hover{box-shadow: 0 0 10px #333; 212 img {
181 img{transform: rotateY(180deg);} 213 position: absolute;
182 p{color: #000;} 214 top: -30px;
215 transition: all 0.2s;
216 }
217
218 &:hover {
219 box-shadow: 0 0 10px #333;
220
221 img {
222 transform: rotateY(180deg);
223 }
224
225 p {
226 color: #000;
227 }
183 } 228 }
184 } 229 }
185 </style> 230 </style>
......
src/viewsPc/match/components/quick-row.vue
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
40 </el-row> 40 </el-row>
41 <el-row :gutter="14" v-else> 41 <el-row :gutter="14" v-else>
42 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 42 <el-col :lg="4" :md="8" :sm="12" :xs="12">
43 <div class="funcBtn" @click="popRemark(0)"> 43 <div class="funcBtn" @click="popRemark(0)">
44 <img src="@/assets/dance/btn04.png"/> 44 <img src="@/assets/dance/btn04.png"/>
45 <h4>TICKET BOOKING</h4> 45 <h4>TICKET BOOKING</h4>
46 </div> 46 </div>
...@@ -52,13 +52,13 @@ ...@@ -52,13 +52,13 @@
52 </div> 52 </div>
53 </el-col> 53 </el-col>
54 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 54 <el-col :lg="4" :md="8" :sm="12" :xs="12">
55 <div class="funcBtn" @click="popRemark(2)"> 55 <div class="funcBtn" @click="popRemark(2)">
56 <img src="@/assets/dance/btn02.png"/> 56 <img src="@/assets/dance/btn02.png"/>
57 <h4>TRANSPORTATION RESERVATION</h4> 57 <h4>TRANSPORTATION RESERVATION</h4>
58 </div> 58 </div>
59 </el-col> 59 </el-col>
60 <el-col :lg="4" :md="8" :sm="12" :xs="12"> 60 <el-col :lg="4" :md="8" :sm="12" :xs="12">
61 <div class="funcBtn" @click="popRemark(3)"> 61 <div class="funcBtn" @click="popRemark(3)">
62 <img src="@/assets/dance/btn03.png"/> 62 <img src="@/assets/dance/btn03.png"/>
63 <h4>DINING RESERVATION</h4> 63 <h4>DINING RESERVATION</h4>
64 </div> 64 </div>
...@@ -88,10 +88,11 @@ import OrderRemark from '@/viewsPc/components/orderRemark' ...@@ -88,10 +88,11 @@ import OrderRemark from '@/viewsPc/components/orderRemark'
88 import {getBaseInfoByActiveId} from "@/apiPc/booking"; 88 import {getBaseInfoByActiveId} from "@/apiPc/booking";
89 import {getCurrentInstance} from "@vue/runtime-core"; 89 import {getCurrentInstance} from "@vue/runtime-core";
90 import {onMounted} from "vue"; 90 import {onMounted} from "vue";
91
91 const {proxy} = getCurrentInstance() 92 const {proxy} = getCurrentInstance()
92 93
93 const router = useRouter() 94 const router = useRouter()
94 const language= useStorage('language',0) 95 const language = useStorage('language', 0)
95 const props = defineProps({ 96 const props = defineProps({
96 matchId: { 97 matchId: {
97 type: String, 98 type: String,
...@@ -100,38 +101,45 @@ const props = defineProps({ ...@@ -100,38 +101,45 @@ const props = defineProps({
100 } 101 }
101 }) 102 })
102 const form = ref({}) 103 const form = ref({})
103 onMounted(()=>{ 104 onMounted(() => {
104 getBaseInfoByActiveId(props.matchId).then(res=>{ 105 getBaseInfoByActiveId(props.matchId).then(res => {
105 form.value = res.data || null 106 form.value = res.data || null
106 }).catch(err=>{ 107 }).catch(err => {
107 form.value = null 108 form.value = null
108 console.log(err) 109 console.log(err)
109 }) 110 })
110 }) 111 })
111 112
112 function building() { 113 function building() {
113 ElMessage.warning(language.value==0?'感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。':'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.') 114 ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
114 return 115 return
115 } 116 }
116 function popRemark(type){ 117
117 if(!form.value){ 118 function popRemark(type) {
119 if (!form.value) {
118 building() 120 building()
119 return 121 return
120 } 122 }
121 123
122 if((form.value.isJdView == 0&&type=='1') || (form.value.isCarView == 0&&type=='2') || (form.value.isFoodView == 0&&type=='3')|| (form.value.isMealView == 0&&type=='4') || (type=='5'&&form.value.isPhotoView == 0)|| type=='0' ){ 124 if ((form.value.isJdView == 0 && type == '1')
125 || (form.value.isCarView == 0 && type == '2')
126 || (form.value.isFoodView == 0 && type == '3')
127 || (form.value.isMealView == 0 && type == '4')
128 || (type == '5' && form.value.isPhotoView == 0)
129 || (type == '0')) {
123 building() 130 building()
124 return 131 return
125 } 132 }
126 133
127 const params = { 134 const params = {
128 matchId: props.matchId, 135 matchId: props.matchId,
129 title: language.value == 0 ?'预订说明':'Booking Instructions', 136 title: language.value == 0 ? '预订说明' : 'Booking Instructions',
130 type: type 137 type: type
131 } 138 }
132 proxy.$refs['orderRemarkRef'].open(params) 139 proxy.$refs['orderRemarkRef'].open(params)
133 140
134 } 141 }
142
135 function goBooking(n) { 143 function goBooking(n) {
136 switch (n) { 144 switch (n) {
137 case 0: 145 case 0:
...@@ -164,5 +172,7 @@ function goBooking(n) { ...@@ -164,5 +172,7 @@ function goBooking(n) {
164 </script> 172 </script>
165 173
166 <style scoped lang="scss"> 174 <style scoped lang="scss">
167 h4{padding: 0 10px;} 175 h4 {
176 padding: 0 10px;
177 }
168 </style> 178 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!