Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
million
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
viitto
million
Commits
aaf94d58
Commit
aaf94d58
authored
Mar 02, 2023
by
youjie
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://gitlab.oytour.com/viitto/million
parents
52a6c477
6576f968
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
600 additions
and
123 deletions
+600
-123
utils.js
src/boot/utils.js
+1
-2
coupon.vue
src/components/common/coupon.vue
+156
-0
orderPreview.vue
src/components/trip/orderPreview.vue
+14
-12
orderPreview.vue
src/pages/line/orderPreview.vue
+429
-109
No files found.
src/boot/utils.js
View file @
aaf94d58
...
...
@@ -20,8 +20,7 @@ Vue.prototype.domainManager = function() {
domainUrl
=
"http://testapi.oytour.com"
;
}
else
if
(
domainNameUrl
.
indexOf
(
'oytour'
)
!==
-
1
)
{
domainUrl
=
"http://reborn.oytour.com"
;
// domainUrl = 'http://192.168.10.11:8083'
domainUrl
=
'http://192.168.10.206:8015'
// 吴春
domainUrl
=
'http://192.168.10.206:8015'
}
var
obj
=
{
//主地址
...
...
src/components/common/coupon.vue
0 → 100644
View file @
aaf94d58
<
template
>
<q-card
flat
class=
"q-pa-md q-mt-lg"
>
<div
class=
"row items-center"
>
<div
class=
"text-subtitle1 text-weight-bolder q-mb-md col"
>
<span>
優惠券
</span>
<span
class=
"text-weight-regular q-ml-sm text-body2"
>
(可用優惠券 0 張)
</span>
</div>
<q-toggle
v-model=
"showDisable"
label=
"顯示不可用優惠券"
style=
"zoom:0.8;margin-top: -24px;"
v-if=
"isExplends"
/>
<q-icon
:name=
"isExplends?'keyboard_arrow_up':'keyboard_arrow_down'"
@
click=
"$event=>isExplends=!isExplends"
size=
"32px"
color=
"grey-9"
class=
"q-ml-md cursor-pointer"
style=
"margin-top:-10px;"
/>
</div>
<div
v-if=
"isExplends"
>
<div
class=
"row q-col-gutter-md"
>
<div
:class=
"filedWidth"
>
<div
class=
"cursor-pointer"
>
<div
class=
"coupon-head"
>
<div
class=
"check-tools"
>
<q-checkbox
v-model=
"chosenCouponId"
:value=
"1"
dense
color=
"teal"
/>
</div>
<div
class=
"q-pa-lg q-mt-lg"
>
<div
class=
"row items-center"
>
<div
class=
"text-h4 text-weight-bold text-white col"
>
{{
moneyFormat
(
500
,
2
)
}}
</div>
<div
class=
" f12 text-white"
>
滿 2000 可用
</div>
</div>
<div
class=
"q-mt-sm f12"
style=
"color:#195954"
>
有效期至:2023.02.30
</div>
</div>
</div>
<div
class=
"q-px-lg q-py-md coupon-content"
>
<div
class=
"row"
>
<div
class=
"col-5"
>
適用平台:
</div>
<div
class=
""
>
全平台通用
</div>
</div>
<div
class=
"row q-mt-sm"
>
<div
class=
"col-5"
>
使用品類:
</div>
<div
class=
""
>
多日遊行程適用
</div>
</div>
</div>
</div>
</div>
<div
:class=
"filedWidth"
>
<div
class=
"unUsed"
>
<div
class=
"coupon-head"
>
<div
class=
"q-pa-lg q-mt-lg"
>
<div
class=
"row items-center"
>
<div
class=
"text-h4 text-weight-bold text-white col"
>
{{
moneyFormat
(
500
,
2
)
}}
</div>
<div
class=
" f12 text-white"
>
滿 2000 可用
</div>
</div>
<div
class=
"q-mt-sm f12"
style=
"color:#195954"
>
有效期至:2023.02.30
</div>
</div>
</div>
<div
class=
"q-px-lg q-py-md coupon-content"
>
<div
class=
"row"
>
<div
class=
"col-5"
>
適用平台:
</div>
<div
class=
""
>
全平台通用
</div>
</div>
<div
class=
"row q-mt-sm"
>
<div
class=
"col-5"
>
使用品類:
</div>
<div
class=
""
>
多日遊行程適用
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"text-center q-mt-lg"
v-if=
"1==2"
>
<p>
<img
src=
"~assets/sad.svg"
style=
"width: 50px"
/>
</p>
<p
class=
"f12 text-grey-6"
>
沒有找到可用優惠券
</p>
</div>
</div>
</q-card>
</
template
>
<
script
>
export
default
{
props
:[
"goodsInfo"
],
computed
:
{
filedWidth
()
{
return
{
"col-12"
:
this
.
$q
.
screen
.
width
<
1200
,
"col-4"
:
this
.
$q
.
screen
.
width
>=
1200
,
};
}
},
data
()
{
return
{
showDisable
:
false
,
isExplends
:
false
,
chosenCouponId
:
false
};
},
methods
:
{
changeDiscountHandler
(){
}
},
}
</
script
>
<
style
>
.coupon-item
{
box-shadow
:
0px
10px
20px
0px
rgb
(
76
87
125
/
20%
)
!important
;
}
.unUsed
.coupon-head
{
background
:
#DDD
!important
;
}
.unUsed
.coupon-head
*
{
color
:
#AAA
!important
;
}
.coupon-head
{
height
:
138px
;
background
:
#67CAC2
;
position
:
relative
;
overflow
:
hidden
;
border-top-left-radius
:
10px
;
border-top-right-radius
:
10px
;
}
.coupon-head
.check-tools
{
position
:
absolute
;
top
:
10px
;
right
:
10px
;
}
.coupon-content
{
border-bottom-left-radius
:
10px
;
border-bottom-right-radius
:
10px
;
background
:
#f9f9f9
;
}
.coupon-head
::before
{
content
:
' '
;
display
:
inline-block
;
width
:
30px
;
height
:
30px
;
border-radius
:
30px
;
background
:
#FFF
;
position
:
absolute
;
top
:
-15px
;
left
:
50%
;
margin-left
:
-15px
;
}
.coupon-head
::after
{
content
:
' '
;
display
:
block
;
position
:
absolute
;
bottom
:
0px
;
left
:
0
;
right
:
0
;
height
:
8px
;
background-image
:
radial-gradient
(
circle
,
#f9f9f9
,
#f9f9f9
9px
,
#f9f9f9
9px
,
#f9f9f9
10px
,
transparent
10px
,
transparent
);
background-size
:
16px
20px
;
}
</
style
>
\ No newline at end of file
src/components/trip/orderPreview.vue
View file @
aaf94d58
...
...
@@ -86,7 +86,7 @@
<q-input
style=
"width: 150px"
@
input=
"changePeople"
v-model=
"chosenObj.etCount"
v-model=
"chosenObj.et
bzc
Count"
class=
"col"
:class=
"{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
...
...
@@ -105,7 +105,7 @@
class=
"q-px-none"
flat
icon=
"remove"
@
click=
"addPeople('etCount', -1)"
@
click=
"addPeople('et
bzc
Count', -1)"
/>
</
template
>
<
template
v-slot:append
>
...
...
@@ -115,7 +115,7 @@
class=
"q-px-none"
flat
icon=
"add"
@
click=
"addPeople('etCount', 1)"
@
click=
"addPeople('et
bzc
Count', 1)"
/>
</
template
>
</q-input>
...
...
@@ -131,19 +131,19 @@
<div
v-if=
"$q.platform.is.mobile"
>
<span
class=
"text-grey-7 product-price"
style=
"font-size: 13px"
>
CNY
{{ moneyFormat(p.childNeedPrice, 0) }} /每人
{{ moneyFormat(p.childNeedPrice
+p.originalB2CPrice
, 0) }} /每人
</span>
</div>
</div>
<div
class=
"row items-end"
>
<span
v-if=
"$q.platform.is.desktop"
class=
"text-grey-7 product-price"
style=
"font-size: 13px"
>
CNY
{{ moneyFormat( p.childNeedPrice, 0) }} /每人
{{ moneyFormat( p.childNeedPrice
+p.originalB2CPrice
, 0) }} /每人
</span>
<q-input
style=
"width: 150px"
@
input=
"changePeople"
v-model=
"chosenObj.etCount"
v-model=
"chosenObj.et
zc
Count"
class=
"col"
:class=
"{
'q-ml-sm q-px-none q-pl-none': $q.platform.is.desktop,
...
...
@@ -162,7 +162,7 @@
class=
"q-px-none"
flat
icon=
"remove"
@
click=
"addPeople('etCount', -1)"
@
click=
"addPeople('et
zc
Count', -1)"
/>
</
template
>
<
template
v-slot:append
>
...
...
@@ -172,7 +172,7 @@
class=
"q-px-none"
flat
icon=
"add"
@
click=
"addPeople('etCount', 1)"
@
click=
"addPeople('et
zc
Count', 1)"
/>
</
template
>
</q-input>
...
...
@@ -357,7 +357,7 @@ export default {
yeCount
:
0
,
lrCount
:
0
,
etbzcCount
:
0
,
etzc
:
0
,
etzc
Count
:
0
,
df
:
0
,
dcf
:
0
,
srf
:
0
,
...
...
@@ -392,14 +392,14 @@ export default {
}
if
(
!
isDf
)
{
if
(
this
.
chosenObj
.
crCount
+
this
.
chosenObj
.
etCount
>
this
.
chosenObj
.
crCount
+
this
.
chosenObj
.
et
zc
Count
>
this
.
p
.
remainNum
)
{
this
.
chosenObj
[
m
]
=
this
.
chosenObj
[
m
]
-
1
;
}
}
else
{
if
(
this
.
chosenObj
.
crCount
+
this
.
chosenObj
.
etCount
<
this
.
chosenObj
.
crCount
+
this
.
chosenObj
.
et
zc
Count
<
this
.
chosenObj
.
df
)
{
this
.
chosenObj
[
m
]
=
this
.
chosenObj
[
m
]
-
1
;
...
...
@@ -412,7 +412,9 @@ export default {
let
money
=
this
.
p
.
originalB2CPrice
*
this
.
chosenObj
.
crCount
;
money
+=
(
this
.
p
.
originalB2CPrice
-
this
.
p
.
childNoNeedPrice
+
this
.
p
.
babyChargePrice
)
*
this
.
chosenObj
.
etCount
;
(
this
.
p
.
originalB2CPrice
-
this
.
p
.
childNoNeedPrice
+
this
.
p
.
babyChargePrice
)
*
this
.
chosenObj
.
etbzcCount
;
money
+=
(
this
.
p
.
originalB2CPrice
+
this
.
p
.
childNeedPrice
+
this
.
p
.
babyChargePrice
)
*
this
.
chosenObj
.
etzcCount
;
money
+=
this
.
p
.
babyPrice
*
this
.
chosenObj
.
yeCount
;
money
+=
this
.
p
.
singleRoomPrice
*
this
.
chosenObj
.
df
;
...
...
src/pages/line/orderPreview.vue
View file @
aaf94d58
...
...
@@ -34,69 +34,224 @@
class=
"row q-pa-md"
style=
"min-width: 375px; margin: 0 auto"
:class=
"
{
'row'
: $q.screen.width >= 1200
&&
$q.platform.is.desktop,
'column'
: $q.screen.width
<
1200
||
$
q
.
platform
.
is
.
mobile
,
row
: $q.screen.width >= 1200
&&
$q.platform.is.desktop,
column
: $q.screen.width
<
1200
||
$
q
.
platform
.
is
.
mobile
,
}"
>
<div
class=
"col"
>
<q-card
flat
class=
"q-pa-md"
>
<div
class=
"text-subtitle1 text-weight-bolder"
>
訂購人資訊
</div>
<q-separator
color=
"grey-2"
class=
"q-my-md"
/>
<div
class=
"row q-col-gutter-md"
>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.lastName"
label=
"名字"
:rules=
"[val => !!val || '請輸入名字']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.firstName"
label=
"姓氏"
:rules=
"[val => !!val || '請輸入姓氏']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-select
v-model=
"userInfo.country"
@
input=
"changeCountry"
:options=
"countrys"
emit-value
option-label=
"Name"
option-value=
"ID"
map-options
label=
"國家/地區"
standout
/>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.firstName"
label=
"電話"
:rules=
"[val => !!val || '請輸入行動電話']"
>
<template
v-slot:prepend
>
<div
class=
"text-subtitle2"
>
+
{{
userInfo
.
areaCode
}}
</div>
</
template
>
</q-input>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.mail"
label=
"郵箱地址"
:rules=
"[val => !!val || '請輸入郵箱地址']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-toggle
v-model=
"isUpdateUserInfo"
label=
"同步更新會員資料"
/>
</div>
<div
class=
"text-subtitle1 text-weight-bolder"
>
訂購人資訊
</div>
<q-separator
color=
"grey-2"
class=
"q-my-md"
/>
<div
class=
"row q-col-gutter-md"
>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.lastName"
label=
"名字"
:rules=
"[(val) => !!val || '請輸入名字']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.firstName"
label=
"姓氏"
:rules=
"[(val) => !!val || '請輸入姓氏']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-select
v-model=
"userInfo.country"
@
input=
"changeCountry"
:options=
"countrys"
emit-value
option-label=
"Name"
option-value=
"ID"
map-options
label=
"國家/地區"
standout
/>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.firstName"
label=
"電話"
:rules=
"[(val) => !!val || '請輸入行動電話']"
>
<template
v-slot:prepend
>
<div
class=
"text-subtitle2"
>
+
{{
userInfo
.
areaCode
}}
</div>
</
template
>
</q-input>
</div>
<div
:class=
"filedWidth"
>
<q-input
standout
v-model=
"userInfo.mail"
label=
"郵箱地址"
:rules=
"[(val) => !!val || '請輸入郵箱地址']"
/>
</div>
<div
:class=
"filedWidth"
>
<q-toggle
v-model=
"isUpdateUserInfo"
label=
"同步更新會員資料"
/>
</div>
</div>
</q-card>
<q-card
flat
class=
"q-pa-md q-mt-lg"
>
<div
class=
"text-subtitle1 text-weight-bolder q-mb-md"
>
旅客資料
</div>
<div
class=
"row"
>
<q-img
src=
"https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg"
class=
"rounded-borders"
spinner-color=
"grey-3"
style=
"width:80px;"
/>
<div
class=
"q-ml-md col"
>
<div
class=
"text-subtitle1 ellipsis"
>
【夏季限定】加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原 | 卡加利出发卡加利出发卡加利出发
</div>
<div
class=
"text-caption text-grey-6 ellipsis q-mt-sm"
>
加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原
</div>
</div>
<div
class=
"text-subtitle1 text-weight-bolder q-mb-md"
>
旅客資料
</div>
<div
class=
"row"
>
<q-img
src=
"https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg"
class=
"rounded-borders"
spinner-color=
"grey-3"
style=
"width: 80px"
/>
<div
class=
"q-ml-md col"
>
<div
class=
"text-subtitle1 ellipsis"
>
【夏季限定】加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div
class=
"text-caption text-grey-6 ellipsis q-mt-sm"
>
加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原
</div>
</div>
<div
class=
"q-mt-md row"
>
<div
class=
"text-grey-9"
>
<q-icon
name=
"iconfont iconrili"
size=
"20px"
class=
"q-mr-sm"
/>
<span>
2023-02-27
</span>
</div>
<div
class=
"text-grey-9 q-ml-md"
>
<q-icon
name=
"iconfont iconpeople"
size=
"20px"
class=
"q-mr-sm"
/>
<span
class=
"q-mr-sm"
>
成人 x 2
</span>
<span
class=
"q-mr-sm"
>
兒童 x 2
</span>
</div>
<div
class=
"q-mt-md row"
>
<div
class=
"text-grey-9"
>
<q-icon
name=
"iconfont iconrili"
size=
"20px"
class=
"q-mr-sm"
/>
<span>
2023-02-27
</span>
</div>
<div
class=
"text-grey-9 q-ml-md"
>
<q-icon
name=
"iconfont iconpeople"
size=
"20px"
class=
"q-mr-sm"
/>
<span
class=
"q-mr-sm"
v-if=
"chosenObj.crCount > 0"
>
成人 x {{ chosenObj.crCount }}
</span
>
<span
class=
"q-mr-sm"
v-if=
"chosenObj.etzcCount"
>
兒童占床 x {{ chosenObj.etzcCount }}
</span
>
<span
class=
"q-mr-sm"
v-if=
"chosenObj.etbzcCount"
>
兒童不占床 x {{ chosenObj.etbzcCount }}
</span
>
<span
class=
"q-mr-sm"
v-if=
"chosenObj.yeCount"
>
婴儿 x {{ chosenObj.yeCount }}
</span
>
<span
class=
"q-mr-sm"
v-if=
"chosenObj.df"
>
单房间 x {{ chosenObj.df }}
</span
>
</div>
</div>
<q-separator
color=
"grey-2"
class=
"q-mt-md"
/>
<div
class=
"bg-grey-1 rounded-borders q-pa-md q-mt-md guest-item"
v-for=
"(x, i) in guests"
:key=
"i"
>
<div
class=
"text-subtitle1 q-pb-md text-weight-bold"
>
{{ x.FormatTypeName }}
</div>
<div
class=
"row q-col-gutter-md"
>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.FirstName"
label=
"本國姓"
placeholder=
"例:張"
:rules=
"[(val) => !!val || '請輸本國姓']"
/>
</div>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.LastName"
label=
"本國名"
placeholder=
"例:三"
:rules=
"[(val) => !!val || '請輸本國名']"
/>
</div>
<div
:class=
"filedGuestWidth"
>
<div
class=
"row items-center q-mt-md"
>
<span>
選擇性別:
</span>
<q-radio
v-model=
"x.Sex"
dense
:val=
"1"
label=
"男"
class=
"q-mr-lg"
/>
<q-radio
v-model=
"x.Sex"
dense
:val=
"2"
label=
"女"
/>
</div>
</div>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.PassFirstName"
label=
"護照英文姓"
placeholder=
"例:ZHANG"
:rules=
"[(val) => !!val || '請輸護照英文姓']"
/>
</div>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.PassLastName"
label=
"護照英文名"
placeholder=
"例:SAN"
:rules=
"[(val) => !!val || '請輸護照英文名']"
/>
</div>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.Passport"
label=
"護照號"
:rules=
"[(val) => !!val || '請輸護照號']"
/>
</div>
<div
:class=
"filedGuestWidth"
>
<q-input
standout
v-model=
"x.PassValidate"
label=
"護照有效期"
readonly
>
<
template
v-slot:append
>
<q-icon
name=
"event"
class=
"cursor-pointer"
></q-icon>
</
template
>
<q-popup-proxy
:offset=
"[0, 0]"
ref=
"qDateProxy7"
>
<q-date
mask=
"YYYY-MM-DD"
:title=
"$t('search_date_begin')"
subtitle=
"選擇"
v-model=
"x.PassValidate"
@
input=
"() => $refs.qDateProxy7.hide()"
/>
</q-popup-proxy>
</q-input>
</div>
<div
:class=
"filedGuestWidth"
v-if=
"x.GuestType == 1"
>
<q-input
standout
v-model=
"x.PassFirstName"
label=
"聯絡電話"
placeholder=
"格式:國家區號+號碼,例如:+81 25xxxx"
/>
</div>
<div
:class=
"filedGuestWidth"
v-if=
"x.EnableSignRoom"
>
<q-toggle
v-model=
"x.IsSignRoom"
:disable=
"disableSign && !x.IsSignRoom"
@
input=
"changeRoomHandler"
label=
"入住單房"
/>
</div>
</div>
<q-separator
color=
"grey-2"
class=
"q-my-md"
/>
</div>
<div
class=
"text-subtitle1 q-my-md text-weight-bold"
>
特殊需求備註:
</div>
<q-input
standout
v-model=
"chosenObj.remark"
input-style=
"height:170px;"
type=
"textarea"
placeholder=
"此欄位僅限資料備註。不在商品規範內的個人需求,不保證提供"
maxlength=
"200"
counter
/>
</q-card>
<coupon></coupon>
</div>
<div
<div
class=
"relative-position"
:class=
"{
'q-ml-lg': !($q.screen.width < 1200 || $q.platform.is.mobile),
'q-mt-lg': $q.screen.width < 1200 || $q.platform.is.mobile,
'q-mt-lg
full-width
': $q.screen.width < 1200 || $q.platform.is.mobile,
}"
>
<div
...
...
@@ -105,68 +260,230 @@
:style=
"{
width:
$q.screen.width < 1200 || $q.platform.is.mobile
? '
100%
'
? '
unset
'
: '300px',
position:$q.platform.is.mobile?'unset':'sticky',
top:$q.platform.is.mobile?'unset':'50px',
}"
>
222
</div>
>
<div
class=
"text-subtitle1 text-weight-bolder"
>
付款明細
</div>
<div
class=
"row q-mt-md"
>
<q-img
src=
"https://image.kkday.com/v2/image/get/s1.kkday.com/product_138437/20230217083232_t5rcO/jpg"
class=
"rounded-borders"
spinner-color=
"grey-3"
style=
"width: 80px"
/>
<div
class=
"q-ml-md col"
>
<div
class=
"text-subtitle1 ellipsis"
>
【夏季限定】加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原 |
卡加利出发卡加利出发卡加利出发
</div>
<div
class=
"text-caption text-grey-6 ellipsis q-mt-sm"
>
加拿大三日游 | 班夫
&
贾斯珀国家公园
&
哥伦比亚冰原
</div>
</div>
</div>
<div
class=
"q-mt-md text-grey-6"
>
<div
class=
"row"
>
<div
style=
"width: 80px"
>
出發城市:
</div>
<div
class=
"q-ml-md"
>
武漢起止
</div>
</div>
<div
class=
"row"
>
<div
style=
"width: 80px"
>
出發日期:
</div>
<div
class=
"q-ml-md"
>
2024-02-02
</div>
</div>
</div>
<q-separator
color=
"grey-2"
class=
"q-my-md"
/>
<div
class=
"text-grey-9"
>
<div
class=
"row q-mb-sm"
v-if=
"chosenObj.crCount>0"
>
<div
class=
"col"
>
成人佔床 x {{ chosenObj.crCount }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<div
class=
"row q-mb-sm"
v-if=
"chosenObj.etzcCount>0"
>
<div
class=
"col"
>
兒童佔床 x {{ chosenObj.etzcCount }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<div
class=
"row q-mb-sm"
v-if=
"chosenObj.etbzcCount>0"
>
<div
class=
"col"
>
兒童不佔床 x {{ chosenObj.etbzcCount }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<div
class=
"row q-mb-sm"
v-if=
"chosenObj.yeCount>0"
>
<div
class=
"col"
>
嬰兒不佔床 x {{ chosenObj.yeCount }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<hr
style=
"border:none;border-top:1px dashed #EEE !important;"
class=
"bg-transparent q-mb-sm"
/>
<div
class=
"row q-mb-sm"
v-if=
"(chosenObj.etCount)>0"
>
<div
class=
"col"
>
兒童附加費 x {{ chosenObj.etCount }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<div
class=
"row q-mb-sm"
v-if=
"(chosenObj.df)>0"
>
<div
class=
"col"
>
單房差價 x {{ chosenObj.df }}
</div>
<div>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<div
class=
"row q-mb-sm items-center"
v-if=
"(chosenObj.df)>0"
>
<div
class=
"col"
>
總金額
</div>
<div
class=
"text-subtitle2 text-weight-bolder text-primary"
>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
<hr
style=
"border:none;border-top:1px dashed #EEE !important;"
class=
"bg-transparent q-mb-sm"
/>
<div
class=
"row q-mb-sm items-center"
v-if=
"(chosenObj.df)>0"
>
<div
class=
"col"
>
優惠金額
</div>
<div
class=
"text-subtitle2 text-weight-bolder text-teal"
>
CNY - {{ moneyFormat(9999,2) }}
</div>
<div
class=
"text-grey-5"
>
暫無優惠
</div>
</div>
<div
class=
"row q-mb-sm items-center"
v-if=
"(chosenObj.df)>0"
>
<div
class=
"col"
>
支付金額
</div>
<div
class=
"text-h6 text-weight-bolder text-primary product-price"
>
CNY {{ moneyFormat(9999,2) }}
</div>
</div>
</div>
<div
class=
"text-right q-mt-md"
>
<q-btn
unelevated
color=
"primary"
label=
"立即支付"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<
script
>
import
{
json
}
from
"body-parser"
;
import
coupon
from
'../../components/common/coupon.vue'
export
default
{
components
:{
coupon
},
data
()
{
return
{
step
:
1
,
userInfo
:{
lastName
:
''
,
firstName
:
''
,
country
:
0
,
phone
:
''
,
areaCode
:
''
,
mail
:
''
userInfo
:
{
lastName
:
""
,
firstName
:
""
,
country
:
0
,
phone
:
""
,
areaCode
:
""
,
mail
:
""
,
},
chosenObj
:
{
startDate
:
""
,
crCount
:
4
,
etCount
:
6
,
yeCount
:
0
,
lrCount
:
0
,
etbzcCount
:
4
,
etzcCount
:
2
,
df
:
1
,
dcf
:
0
,
srf
:
0
,
isUnico
:
false
,
unicoDep
:
{
city
:
null
,
date
:
null
,
price
:
0
,
isSup
:
-
2
,
},
unicoArr
:
{
city
:
null
,
date
:
null
,
price
:
0
,
isSup
:
-
2
,
},
remark
:
""
,
},
isUpdateUserInfo
:
false
,
countrys
:
[],
areaCodes
:
[],
guest
:
{
FirstName
:
""
,
LastName
:
""
,
Passport
:
""
,
PassFirstName
:
""
,
PassLastName
:
""
,
GuestType
:
0
,
EnableSignRoom
:
false
,
PassValidate
:
""
,
FormatTypeName
:
""
,
MobilePhone
:
""
,
RoomType
:
0
,
IsSignRoom
:
false
,
Sex
:
0
,
},
isUpdateUserInfo
:
false
,
countrys
:[],
areaCodes
:[]
guests
:
[],
disableSign
:
false
};
},
computed
:{
filedWidth
(){
return
{
'col-12'
:
this
.
$q
.
screen
.
width
<
1200
,
'col-6'
:
this
.
$q
.
screen
.
width
>=
1200
}
}
},
created
()
{
computed
:
{
filedWidth
()
{
return
{
"col-12"
:
this
.
$q
.
screen
.
width
<
1200
,
"col-6"
:
this
.
$q
.
screen
.
width
>=
1200
,
};
},
filedGuestWidth
()
{
return
{
"col-12"
:
this
.
$q
.
screen
.
width
<
1200
,
"col-4"
:
this
.
$q
.
screen
.
width
>=
1200
,
};
},
},
created
()
{},
mounted
()
{
this
.
initCountry
()
this
.
initCountry
();
this
.
initGuestHandler
();
},
methods
:
{
initCountry
(){
this
.
apipost
(
"GetCountryInfo_post"
,
{},
(
r
)
=>
{
this
.
countrys
=
r
.
data
.
data
.
countList
this
.
userInfo
.
country
=
this
.
countrys
[
0
].
ID
this
.
areaCodes
=
r
.
data
.
data
.
phoneCountList
this
.
changeCountry
(
this
.
userInfo
.
country
)
this
.
areaCodes
.
forEach
(
x
=>
{
let
temp
=
this
.
countrys
.
find
(
y
=>
y
.
ID
==
x
.
ID
)
x
.
EnName
=
`
${
temp
.
EnName
}
(
${
x
.
PhoneCode
}
)`
})
changeRoomHandler
(){
let
currentSign
=
this
.
guests
.
filter
(
x
=>
x
.
IsSignRoom
)
this
.
disableSign
=
currentSign
==
this
.
chosenObj
.
df
},
initGuestHandler
()
{
for
(
let
i
=
0
;
i
<
this
.
chosenObj
.
crCount
;
i
++
)
{
let
obj
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
guest
));
obj
.
GuestType
=
1
;
obj
.
FormatTypeName
=
`成人
${
i
+
1
}
:`
;
if
(
this
.
chosenObj
.
df
>
0
)
{
obj
.
EnableSignRoom
=
true
;
}
this
.
guests
.
push
(
obj
);
}
for
(
let
i
=
0
;
i
<
this
.
chosenObj
.
etzcCount
;
i
++
)
{
let
obj
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
guest
));
obj
.
GuestType
=
2
;
obj
.
FormatTypeName
=
`儿童占床
${
i
+
1
}
:`
;
if
(
this
.
chosenObj
.
df
>
0
)
{
obj
.
EnableSignRoom
=
true
;
}
this
.
guests
.
push
(
obj
);
}
for
(
let
i
=
0
;
i
<
this
.
chosenObj
.
etbzcCount
;
i
++
)
{
let
obj
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
guest
));
obj
.
GuestType
=
3
;
obj
.
FormatTypeName
=
`儿童不占床
${
i
+
1
}
:`
;
this
.
guests
.
push
(
obj
);
}
for
(
let
i
=
0
;
i
<
this
.
chosenObj
.
yeCount
;
i
++
)
{
let
obj
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
guest
));
obj
.
GuestType
=
4
;
obj
.
FormatTypeName
=
`婴儿
${
i
+
1
}
:`
;
this
.
guests
.
push
(
obj
);
}
},
initCountry
()
{
this
.
apipost
(
"GetCountryInfo_post"
,
{},
(
r
)
=>
{
this
.
countrys
=
r
.
data
.
data
.
countList
;
this
.
userInfo
.
country
=
this
.
countrys
[
0
].
ID
;
this
.
areaCodes
=
r
.
data
.
data
.
phoneCountList
;
this
.
changeCountry
(
this
.
userInfo
.
country
);
this
.
areaCodes
.
forEach
((
x
)
=>
{
let
temp
=
this
.
countrys
.
find
((
y
)
=>
y
.
ID
==
x
.
ID
);
x
.
EnName
=
`
${
temp
.
EnName
}
(
${
x
.
PhoneCode
}
)`
;
});
});
},
changeCountry
(
id
)
{
this
.
userInfo
.
areaCode
=
this
.
areaCodes
.
find
((
x
)
=>
x
.
ID
==
id
).
PhoneCode
;
},
changeCountry
(
id
){
this
.
userInfo
.
areaCode
=
this
.
areaCodes
.
find
(
x
=>
x
.
ID
==
id
).
PhoneCode
}
},
};
</
script
>
...
...
@@ -175,28 +492,31 @@ export default {
.order-preview
.q-stepper__content
{
display
:
none
!important
;
}
.order-preview
.q-toggle__track
{
height
:
0.7em
;
border-radius
:
0.35em
;
opacity
:
.38
;
width
:
50px
;
.order-preview
.q-toggle__track
{
height
:
0.7em
;
border-radius
:
0.35em
;
opacity
:
0.38
;
width
:
50px
;
}
.order-preview
.q-toggle__thumb
{
top
:
0.42em
;
left
:
0.45em
;
width
:
0.5em
;
height
:
0.5em
;
transition
:
left
0.22s
ease-in-out
;
user-select
:
none
;
z-index
:
0
;
}
.order-preview
.q-toggle__thumb
{
top
:
0.42em
;
left
:
0.45em
;
width
:
0.5em
;
height
:
0.5em
;
transition
:
left
0.22s
ease-in-out
;
user-select
:
none
;
z-index
:
0
;
.order-preview
.q-toggle__inner--truthy
.q-toggle__thumb
{
left
:
0.94em
;
}
.order-preview
.q-toggle__inner
--truthy
.q-toggle__thumb
{
left
:
0.94
em
;
.order-preview
.q-toggle__inner
{
width
:
1.9
em
;
}
.order-preview
.q-toggle__
inner
{
width
:
1.9em
;
.order-preview
.q-toggle__
label
{
margin-top
:
12px
;
}
.
order-preview
.q-toggle__label
{
margin-top
:
12px
;
.
guest-item
:hover
{
background
:
rgba
(
241
,
65
,
108
,
.04
)
!important
;
}
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment