Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
427bbc09 by zhangmeng
Options

票务

1 parent b40d8e59
Inline Side-by-side
Showing 1 changed file with 189 additions and 96 deletions
src/viewsPc/center/myReservation.vue
...@@ -2,74 +2,85 @@ ...@@ -2,74 +2,85 @@
2 <div> 2 <div>
3 <el-card :body-style="{'padding':'0'}"> 3 <el-card :body-style="{'padding':'0'}">
4 <div class="indexTitle"> 4 <div class="indexTitle">
5 <h3 class="leftboderTT">{{ language==0?'我的预订':'My reservation' }} 5 <h3 class="leftboderTT">{{ language == 0 ? '我的预订' : 'My reservation' }}
6 </h3> 6 </h3>
7 7
8 <!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>--> 8 <!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'发票开具':'Invoice' }}</el-button>-->
9 <!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>--> 9 <!-- <el-button class="fr" type="primary" plain @click="toInvoice">{{ language==0?'我的发票':'My Invoice' }}</el-button>-->
10 </div> 10 </div>
11 <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0"/> 11 <el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228"/>
12 12
13 <div class="pd20"> 13 <div class="pd20">
14 <div v-for="b in list" class="item"> 14 <div v-for="b in list" class="item">
15 <div class="title"> 15 <div class="title">
16 <label class="blueTag" v-if="b.orderType == 0"> {{ language==0?'酒店':'HOTEL' }} </label> 16 <label v-if="b.orderType == 0" class="blueTag"> {{ language == 0 ? '酒店' : 'HOTEL' }} </label>
17 <label class="purpleTag" v-if="b.orderType == 1"> {{ language==0?'车辆':'TRANSPORTATION' }} </label> 17 <label v-if="b.orderType == 1" class="purpleTag"> {{ language == 0 ? '车辆' : 'TRANSPORTATION' }} </label>
18 <label class="orangeTag" v-if="b.orderType == 2"> {{ language==0?'餐饮':'DINING' }} </label> 18 <label v-if="b.orderType == 2" class="orangeTag"> {{ language == 0 ? '餐饮' : 'DINING' }} </label>
19 <label class="orangeTag" v-if="b.orderType == 3"> {{ language==0?'化妆':'MakeUp' }} </label> 19 <label v-if="b.orderType == 3" class="orangeTag"> {{ language == 0 ? '化妆' : 'MakeUp' }} </label>
20 <label class="orangeTag" v-if="b.orderType == 4"> {{ language==0?'拍摄':'Shooting ' }} </label> 20 <label v-if="b.orderType == 4" class="orangeTag"> {{ language == 0 ? '拍摄' : 'Shooting ' }} </label>
21 <span>{{ language==0?'订单编号：':'No.' }} {{ b.id }}</span> 21 <span>{{ language == 0 ? '订单编号：' : 'No.' }} {{ b.id }}</span>
22 </div> 22 </div>
23 23
24 <div class="status-po"> 24 <div class="status-po">
25 <span class="bg-warning" v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'"> 25 <span v-if="b.status == '0'&&b.surplus!='0,0'&&b.surplus!='0'" class="bg-warning">
26 {{ language == 0 ?'待支付':'Unpaid' }} 26 {{ language == 0 ? '待支付' : 'Unpaid' }}
27 </span> 27 </span>
28 <span class="bg-warning" v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')">{{ language == 0 ? '已取消' : 'Canceled' }}</span> 28 <span v-if="b.status == '0'&&(b.surplus=='0,0'||b.surplus=='0')" class="bg-warning">{{
29 <span class="bg-blue" v-if="b.status == '1'">{{ language == 0 ?'支付成功':'successful' }}</span> 29 language == 0 ? '已取消' : 'Canceled'
30 <span class="bg-warning" v-if="b.status == '2'">{{ language == 0 ? '已取消' : 'Canceled' }}</span> 30 }}</span>
31 <span class="bg-danger" v-if="b.status == '3'||b.status == '4'">{{ language == 0 ? '已退订' : 'Refunded' }}</span> 31 <span v-if="b.status == '1'" class="bg-blue">{{ language == 0 ? '支付成功' : 'successful' }}</span>
32 <span class="bg-danger" v-if="b.status == '7'">{{ language == 0 ? '退款审核中' : 'Refund in review' }}</span> 32 <span v-if="b.status == '2'" class="bg-warning">{{ language == 0 ? '已取消' : 'Canceled' }}</span>
33 <span v-if="b.status == '3'||b.status == '4'" class="bg-danger">{{
34 language == 0 ? '已退订' : 'Refunded'
35 }}</span>
36 <span v-if="b.status == '7'" class="bg-danger">{{
37 language == 0 ? '退款审核中' : 'Refund in review'
38 }}</span>
33 </div> 39 </div>
34 40
35 <el-row class="pd20 mt10" justify="space-between" align="middle"> 41 <el-row align="middle" class="pd20 mt10" justify="space-between">
36 <el-col :lg="9" :md="12" :sm="12" :xs="24"> 42 <el-col :lg="9" :md="12" :sm="12" :xs="24">
37 <div v-if="b.orderType == 0"> 43 <div v-if="b.orderType == 0">
38 <h3 class="name">{{b.name}}</h3> 44 <h3 class="name">{{ b.name }}</h3>
39 <p v-if="language==0">{{b.messageObj?.roomStayDate}}</p> 45 <p v-if="language==0">{{ b.messageObj?.roomStayDate }}</p>
40 <p v-else>{{b.messageObj?.roomStayDate.replace('共',' total ').replace('晚',' days')}}</p> 46 <p v-else>{{ b.messageObj?.roomStayDate.replace('共', ' total ').replace('晚', ' days') }}</p>
41 <p>{{b.messageObj?.roomInfo}}</p> 47 <p>{{ b.messageObj?.roomInfo }}</p>
42 48
43 </div> 49 </div>
44 <div v-if="b.orderType == 1"> 50 <div v-if="b.orderType == 1">
45 <h3 class="name">{{b.name}}</h3> 51 <h3 class="name">{{ b.name }}</h3>
46 <div v-for="(car,index) in b.messageObj.carsList" :key="index"> 52 <div v-for="(car,index) in b.messageObj.carsList" :key="index">
47 <p v-if="car.num>0">{{car.typeName}}：{{car.name}}：{{car.num}} {{ language==0?'辆':'Cars' }}</p> 53 <p v-if="car.num>0">{{ car.typeName }}：{{ car.name }}：{{ car.num }} {{
54 language == 0 ? '辆' : 'Cars'
55 }}</p>
48 </div> 56 </div>
49 <!-- <p>{{b.messageObj}}</p>--> 57 <!-- <p>{{b.messageObj}}</p>-->
50 <!-- <p>{{b.extJsonObj}}</p>--> 58 <!-- <p>{{b.extJsonObj}}</p>-->
51 </div> 59 </div>
52 <div v-if="b.orderType == 2"> 60 <div v-if="b.orderType == 2">
53 <h3 class="name">{{b.name}}</h3> 61 <h3 class="name">{{ b.name }}</h3>
54 <div v-for="(n,index) in b.messageObj.foodsList" :key="index"> 62 <div v-for="(n,index) in b.messageObj.foodsList" :key="index">
55 <p v-if="n.num > 0"> 63 <p v-if="n.num > 0">
56 {{n.name}}({{n.categoryName}}) * <span>{{n.num}} {{language==0?'份':'pcs'}}</span> 64 {{ n.name }}({{ n.categoryName }}) * <span>{{ n.num }} {{ language == 0 ? '份' : 'pcs' }}</span>
57 </p> 65 </p>
58 </div> 66 </div>
59 <p>{{language==0?'配送日期':'Delivery Date'}}：{{b.extJsonObj.dcEnd }} ~ {{b.extJsonObj.dcEnd}}</p> 67 <p>{{ language == 0 ? '配送日期' : 'Delivery Date' }}：{{ b.extJsonObj.dcEnd }} ~
68 {{ b.extJsonObj.dcEnd }}</p>
60 69
61 </div> 70 </div>
62 <div v-if="b.orderType==3 ||b.orderType == 4"> 71 <div v-if="b.orderType==3 ||b.orderType == 4">
63 <h3 class="name">{{b.name}}</h3> 72 <h3 class="name">{{ b.name }}</h3>
64 <p > 73 <p>
65 {{dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[0]+'-'+dayjs(b.deliveryTime).format('YYYY-MM-DD')+' '+b.extJsonObj.timePeriod?.split('-')[1] }} 74 {{
75 dayjs(b.deliveryTime).format('YYYY-MM-DD') + ' ' + b.extJsonObj.timePeriod?.split('-')[0] + '-' + dayjs(b.deliveryTime).format('YYYY-MM-DD') + ' ' + b.extJsonObj.timePeriod?.split('-')[1]
76 }}
66 </p> 77 </p>
67 </div> 78 </div>
68 </el-col> 79 </el-col>
69 <el-col :lg="6" :md="12" :sm="12" :xs="24"> 80 <el-col :lg="6" :md="12" :sm="12" :xs="24">
70 <div v-if="b.orderType == 0"> 81 <div v-if="b.orderType == 0">
71 <p>{{b.messageObj?.roomName}}</p> 82 <p>{{ b.messageObj?.roomName }}</p>
72 <p>{{b.messageObj?.roomInfo}}</p> 83 <p>{{ b.messageObj?.roomInfo }}</p>
73 </div> 84 </div>
74 <div v-if="b.orderType == 1"> 85 <div v-if="b.orderType == 1">
75 </div> 86 </div>
...@@ -80,27 +91,36 @@ ...@@ -80,27 +91,36 @@
80 </div> 91 </div>
81 </el-col> 92 </el-col>
82 <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center"> 93 <el-col :lg="3" :md="6" :sm="6" :xs="6" class="text-center">
83 <span class="text-warning"> {{ language==0?'¥':'€' }} 94 <span class="text-warning"> {{ language == 0 ? '¥' : '€' }}
84 <span class="bigMoney">{{language==0?b.total:b.totalEn}}</span> 95 <span class="bigMoney">{{ language == 0 ? b.total : b.totalEn }}</span>
85 </span> 96 </span>
86 </el-col> 97 </el-col>
87 <el-col :lg="6" :md="16" :sm="16" :xs="16"> 98 <el-col :lg="6" :md="16" :sm="16" :xs="16">
88 <div class="text-right mb20 text-danger"> 99 <div class="text-right mb20 text-danger">
89 <el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" :value="b.countdown" @finish="finish(b)"/> 100 <el-countdown v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')"
101 :value="b.countdown" format="mm:ss"
102 value-style="color:#E60012;font-size:16px;" @finish="finish(b)"/>
90 </div> 103 </div>
91 104
92 <div class="text-right"> 105 <div class="text-right">
93 <el-button v-if="b.orderType == 0&&b.viewStatus!=0" class="mb10" plain round type="success" size="small" @click="Rebook(b)"> 106 <el-button v-if="b.orderType == 0&&b.viewStatus!=0" class="mb10" plain round size="small" type="success"
94 {{ language==0?'再次预订':'Rebook' }}</el-button> 107 @click="Rebook(b)">
95 <el-button class="mb10" plain round type="primary" size="small" @click="goDetail(b)"> 108 {{ language == 0 ? '再次预订' : 'Rebook' }}
96 {{ language==0?'详情':'Detail' }}</el-button> 109 </el-button>
97 <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)" 110 <el-button class="mb10" plain round size="small" type="primary" @click="goDetail(b)">
98 class="mb10" plain round type="primary" size="small" > 111 {{ language == 0 ? '详情' : 'Detail' }}
99 {{ language==0?'支付':'Pay' }}</el-button> 112 </el-button>
100 <el-button v-if="b.viewStatus==0" @click="cancel(b)" class="mb10" plain round type="warning" size="small" > 113 <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" class="mb10"
101 {{ language==0?'取消订单':'Cancel Order' }}</el-button> 114 plain round size="small" type="primary" @click="goDetail(b)">
102 <el-button v-if="b.viewStatus==5" @click="unsubscribe(b)" class="mb10" plain round type="" size="small" > 115 {{ language == 0 ? '支付' : 'Pay' }}
103 {{ language==0?'退订':'Unsubscribe' }}</el-button> 116 </el-button>
117 <el-button v-if="b.viewStatus==0" class="mb10" plain round size="small" type="warning"
118 @click="cancel(b)">
119 {{ language == 0 ? '取消订单' : 'Cancel Order' }}
120 </el-button>
121 <el-button v-if="b.viewStatus==5" class="mb10" plain round size="small" type="" @click="unsubscribe(b)">
122 {{ language == 0 ? '退订' : 'Unsubscribe' }}
123 </el-button>
104 </div> 124 </div>
105 </el-col> 125 </el-col>
106 </el-row> 126 </el-row>
...@@ -113,40 +133,43 @@ ...@@ -113,40 +133,43 @@
113 </template> 133 </template>
114 134
115 <script setup> 135 <script setup>
116 import {onMounted,getCurrentInstance} from "@vue/runtime-core"; 136 import {onMounted, getCurrentInstance} from "@vue/runtime-core";
117 import {useStorage} from "@vueuse/core/index"; 137 import {useStorage} from "@vueuse/core/index";
118 import {newbilllist} from "@/apiPc/common"; 138 import {newbilllist} from "@/apiPc/common";
119 import useUserStore from "@/store/modules/user"; 139 import useUserStore from "@/store/modules/user";
120 import dayjs from 'dayjs' 140 import dayjs from 'dayjs'
121 import {cancelOrder2,cancelOrder} from "/@/apiPc/booking"; 141 import {cancelOrder2, cancelOrder} from "/@/apiPc/booking";
122 142
123 import {ElMessage} from "element-plus"; 143 import {ElMessage} from "element-plus";
124 144
125 const router = useRouter() 145 const router = useRouter()
126 const language= useStorage('language',0) 146 const language = useStorage('language', 0)
127 const list = ref([]) 147 const list = ref([])
128 const user = useUserStore().user 148 const user = useUserStore().user
129 const {proxy} = getCurrentInstance() 149 const {proxy} = getCurrentInstance()
130 150
131 onMounted(()=>{ 151 onMounted(() => {
132 getList() 152 getList()
133 }) 153 })
134 function finish(bill){ 154
155 function finish(bill) {
135 bill.status = '2' 156 bill.status = '2'
136 // getList() 157 // getList()
137 } 158 }
159
138 function getList() { 160 function getList() {
139 newbilllist({createById:user.userId}).then(res=>{ 161 newbilllist({createById: user.userId}).then(res => {
140 list.value = res.rows 162 list.value = res.rows || []
141 for (var b of list.value) { 163 for (var b of list.value) {
142 b.messageObj = JSON.parse(b.message) || {} 164 b.messageObj = JSON.parse(b.message) || {}
143 b.extJsonObj = JSON.parse(b.extJson) || {} 165 b.extJsonObj = JSON.parse(b.extJson) || {}
144 if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){ 166 if (b.surplus && b.status == '0' && (b.surplus != '0,0' && b.surplus != '0')) {
145 b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10) 167 b.countdown = Date.now() + Number((b.surplus.split(',')[0] * 60 + b.surplus.split(',')[1]) * 10)
146 } 168 }
147 } 169 }
148 }) 170 })
149 } 171 }
172
150 function goDetail(b) { 173 function goDetail(b) {
151 router.push({ 174 router.push({
152 name: 'bookingPay', 175 name: 'bookingPay',
...@@ -157,27 +180,27 @@ function goDetail(b) { ...@@ -157,27 +180,27 @@ function goDetail(b) {
157 }) 180 })
158 } 181 }
159 182
160 function Rebook(row){ 183 function Rebook(row) {
161 console.log(row) 184 console.log(row)
162 router.push({ 185 router.push({
163 name:'hotelDetail', 186 name: 'hotelDetail',
164 params:{ 187 params: {
165 cptId:row.activeId, 188 cptId: row.activeId,
166 hotelId:row.hotelId 189 hotelId: row.hotelId
167 }, 190 },
168 query:{ 191 query: {
169 id:row.extId 192 id: row.extId
170 } 193 }
171 }) 194 })
172 } 195 }
173 196
174 const cancel = (row) => { 197 const cancel = (row) => {
175 //取消订单 198 //取消订单
176 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => { 199 proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' : `Are you sure to cancel the order?`).then(() => {
177 return cancelOrder2(row.id).then(res=>{ 200 return cancelOrder2(row.id).then(res => {
178 getList() 201 getList()
179 ElMessage({ 202 ElMessage({
180 message: language.value == 0?'操作成功':'Successful operation!', 203 message: language.value == 0 ? '操作成功' : 'Successful operation!',
181 type: 'success' 204 type: 'success'
182 }) 205 })
183 }) 206 })
...@@ -185,11 +208,11 @@ const cancel = (row) => { ...@@ -185,11 +208,11 @@ const cancel = (row) => {
185 } 208 }
186 209
187 const unsubscribe = (row) => { 210 const unsubscribe = (row) => {
188 proxy.$modal.confirm(language.value == 0 ?`确定退款吗 ?`:'Are you sure to refund?').then(() => { 211 proxy.$modal.confirm(language.value == 0 ? `确定退款吗 ?` : 'Are you sure to refund?').then(() => {
189 return cancelOrder(row.id).then(res=>{ 212 return cancelOrder(row.id).then(res => {
190 getList() 213 getList()
191 ElMessage({ 214 ElMessage({
192 message: language.value == 0?'已提交退款，请等待审核!':'Refund has been submitted, please wait for review!', 215 message: language.value == 0 ? '已提交退款，请等待审核!' : 'Refund has been submitted, please wait for review!',
193 type: 'success' 216 type: 'success'
194 }) 217 })
195 }) 218 })
...@@ -197,58 +220,127 @@ const unsubscribe = (row) => { ...@@ -197,58 +220,127 @@ const unsubscribe = (row) => {
197 } 220 }
198 221
199 222
200 function toInvoice(){ 223 function toInvoice() {
201 router.push({ 224 router.push({
202 name: 'invoice' 225 name: 'invoice'
203 }) 226 })
204 } 227 }
205 </script> 228 </script>
206 229
207 <style scoped lang="scss"> 230 <style lang="scss" scoped>
208 .bigMoney{font-size: 24px;font-family: "DIN Alternate";} 231 .bigMoney {
209 .name{font-size: 18px;margin: 0;} 232 font-size: 24px;
210 .status-po{position: absolute;right: 0;top: 0;font-size: 12px; 233 font-family: "DIN Alternate";
234 }
235
236 .name {
237 font-size: 18px;
238 margin: 0;
239 }
240
241 .status-po {
242 position: absolute;
243 right: 0;
244 top: 0;
245 font-size: 12px;
211 color: #FFFFFF; 246 color: #FFFFFF;
212 span{border-radius: 0px 10px 0px 10px;padding: 4px 10px;} 247
213 .bg-danger{background: #E60012;} 248 span {
214 .bg-warning{background: #e89f39;} 249 border-radius: 0px 10px 0px 10px;
215 .bg-pink{background: #F740A6;} 250 padding: 4px 10px;
216 .bg-primary{background: var(--el-color-primary)} 251 }
217 .bg-blue{background: #00a0e9} 252
253 .bg-danger {
254 background: #E60012;
255 }
256
257 .bg-warning {
258 background: #e89f39;
259 }
260
261 .bg-pink {
262 background: #F740A6;
263 }
264
265 .bg-primary {
266 background: var(--el-color-primary)
267 }
268
269 .bg-blue {
270 background: #00a0e9
271 }
218 } 272 }
273
219 .indexTitle { 274 .indexTitle {
220 margin: 20px 0 12px; overflow: visible; 275 margin: 20px 0 12px;
276 overflow: visible;
221 padding: 0 20px 15px; 277 padding: 0 20px 15px;
222 border-bottom: 1px solid #e5e5e5; 278 border-bottom: 1px solid #e5e5e5;
223 .fr{margin: -8px 0 0} 279
224 h3 {display: inline-block; 280 .fr {
281 margin: -8px 0 0
282 }
283
284 h3 {
285 display: inline-block;
225 font-size: 16px; 286 font-size: 16px;
226 color: var(--el-color-primary); 287 color: var(--el-color-primary);
227 } 288 }
228 } 289 }
229 .item{
230 .name{font-size: 18px;
231 color: #000000;margin: 0 0 10px;}
232 p{margin: 8px 0 0;color: #707070;font-size: 14px;}
233 290
234 margin: 0 0 20px;border: 1px solid #E5E5E5; 291 .item {
292 .name {
293 font-size: 18px;
294 color: #000000;
295 margin: 0 0 10px;
296 }
297
298 p {
299 margin: 8px 0 0;
300 color: #707070;
301 font-size: 14px;
302 }
303
304 margin: 0 0 20px;
305 border: 1px solid #E5E5E5;
235 border-radius: 10px; 306 border-radius: 10px;
236 position: relative; 307 position: relative;
237 .bbody{padding: 0 15px 20px;} 308
238 .title{background: #F7F7F7;border-bottom: 1px solid #E5E5E5; 309 .bbody {
239 span{font-size: 14px; 310 padding: 0 15px 20px;
240 color: #4C5359;}
241 } 311 }
242 .title label{border-radius: 5px 0 5px 0; font-size: 12px; color: #fff; padding:4px 10px;margin-right: 10px;} 312
243 .blueTag{ 313 .title {
244 background-color: #1EC886;} 314 background: #F7F7F7;
315 border-bottom: 1px solid #E5E5E5;
316
317 span {
318 font-size: 14px;
319 color: #4C5359;
320 }
321 }
322
323 .title label {
324 border-radius: 5px 0 5px 0;
325 font-size: 12px;
326 color: #fff;
327 padding: 4px 10px;
328 margin-right: 10px;
329 }
330
331 .blueTag {
332 background-color: #1EC886;
333 }
334
245 .purpleTag { 335 .purpleTag {
246 background-color: #717bef; 336 background-color: #717bef;
247 } 337 }
338
248 .orangeTag { 339 .orangeTag {
249 background-color: #ff8124; 340 background-color: #ff8124;
250 } 341 }
251 } 342 }
343
252 .billFoot { 344 .billFoot {
253 .price { 345 .price {
254 width: 100%; 346 width: 100%;
...@@ -262,6 +354,7 @@ function toInvoice(){ ...@@ -262,6 +354,7 @@ function toInvoice(){
262 font-weight: 500; 354 font-weight: 500;
263 margin: 0 20px; 355 margin: 0 20px;
264 } 356 }
357
265 .status { 358 .status {
266 position: absolute; 359 position: absolute;
267 right: 10px; 360 right: 10px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!