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
c30fc511
Commit
c30fc511
authored
Mar 09, 2023
by
沈良进
Browse files
Options
Browse Files
Download
Plain Diff
解决冲突
parents
7bff68e2
40f7533e
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
210 additions
and
14 deletions
+210
-14
wx_tip.jpg
src/assets/img/pay/wx_tip.jpg
+0
-0
wepay.vue
src/components/pay/wepay.vue
+50
-10
pay.vue
src/pages/pay/pay.vue
+8
-3
paysuccess.vue
src/pages/pay/paysuccess.vue
+146
-0
routes.js
src/router/routes.js
+6
-1
No files found.
src/assets/img/pay/wx_tip.jpg
0 → 100644
View file @
c30fc511
12.9 KB
src/components/pay/wepay.vue
View file @
c30fc511
<
template
>
<
template
>
<div
class=
"text-center"
>
<div>
<q-inner-loading
:showing=
"loading"
label=
"正在加載中"
></q-inner-loading>
<q-dialog
v-model=
"$q.platform.is.desktop"
persistent
>
<div
v-if=
"$q.platform.is.desktop && orderNo && payUrl!='' && !loading"
class=
"q-my-xl"
>
<q-card
flat
class=
"q-pa-lg"
style=
"width:600px !important;max-width:600px !important"
>
<QrcodeVue
level=
"H"
size=
"256"
:value=
"payUrl"
></QrcodeVue>
<div
class=
"text-h6 text-weight-bold q-mb-lg"
>
微信支付
</div>
<div
class=
"text-body2 q-mt-lg"
>
請打開微信(WeChat),使用 [掃一掃],掃描上方二維碼進行支付
</div>
<div
class=
"text-center"
>
</div>
<q-inner-loading
:showing=
"loading"
label=
"正在加載中"
></q-inner-loading>
<div
class=
"q-my-xl"
v-if=
"!orderNo && !loading"
>
<div
v-if=
"$q.platform.is.desktop && orderNo && payUrl!='' && !loading"
>
創建付款連接失敗,請刷新頁面重試
<div
class=
"row justify-center"
>
</div>
<QrcodeVue
level=
"H"
size=
"200"
:value=
"payUrl"
class=
"light-shadow"
></QrcodeVue>
<img
src=
"../../assets/img/pay/wx_tip.jpg"
class=
"q-ml-md"
style=
"height:200px;"
>
</div>
<div
class=
"text-body2 q-mt-lg text-grey-6"
>
請打開微信(WeChat),使用 [掃一掃]掃描上方二維碼進行支付
</div>
<div
class=
"q-mt-lg text-right"
>
<q-btn
outline
dense
label=
"取消支付"
color=
"primary"
class=
"q-px-md q-mr-md"
@
click=
"cancelPayHandler"
></q-btn>
<q-btn
unelevated
dense
label=
"已完成付款"
:loading=
"checkLoading"
color=
"primary"
class=
"q-px-md"
@
click=
"checkPaySatausHandler"
></q-btn>
</div>
</div>
<div
class=
"q-ma-xl"
v-if=
"!orderNo && !loading"
>
創建付款連接失敗,請刷新頁面重試
</div>
</div>
</q-card>
</q-dialog>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -17,7 +35,9 @@ export default {
...
@@ -17,7 +35,9 @@ export default {
data
()
{
data
()
{
return
{
return
{
loading
:
true
,
loading
:
true
,
payUrl
:
'weixin://wxpay/bizpayurl?pr=CDXqaD1zz'
showDialog
:
true
,
payUrl
:
'weixin://wxpay/bizpayurl?pr=CDXqaD1zz'
,
checkLoading
:
false
}
}
},
},
props
:{
props
:{
...
@@ -45,6 +65,26 @@ export default {
...
@@ -45,6 +65,26 @@ export default {
}
}
this
.
loading
=
false
this
.
loading
=
false
})
})
},
checkPaySatausHandler
(){
this
.
checkLoading
=
true
this
.
apipost
(
"GetDetailsByOrderNo_post"
,{
OrderNo
:
this
.
orderNo
},
r
=>
{
if
(
r
.
data
.
resultCode
==
1
){
if
(
r
.
data
.
data
.
OrderStatus
==
2
||
r
.
data
.
data
.
OrderStatus
==
3
){
this
.
CommonJump
(
"/paysuccess/"
+
this
.
orderNo
,
{});
}
else
{
this
.
$message
.
error
(
"當前訂單未支付,請您繼續完成訂單支付"
)
}
}
else
{
location
.
reload
()
}
this
.
checkLoading
=
false
},
e
=>
{
this
.
checkLoading
=
false
})
},
cancelPayHandler
(){
this
.
$emit
(
"cancel"
)
}
}
},
},
}
}
...
...
src/pages/pay.vue
→
src/pages/pay
/pay
.vue
View file @
c30fc511
...
@@ -65,7 +65,7 @@
...
@@ -65,7 +65,7 @@
@click="showPayFormHandler('wechat')"
@click="showPayFormHandler('wechat')"
>
>
<q-img
<q-img
src=
"../assets/img/pay/wepay.png"
src=
"../
../
assets/img/pay/wepay.png"
spinner-color=
"white"
spinner-color=
"white"
style=
"width: 100px"
style=
"width: 100px"
/>
/>
...
@@ -75,7 +75,7 @@
...
@@ -75,7 +75,7 @@
</div>
-->
</div>
-->
</div>
</div>
<div
class=
"q-mt-md"
v-if=
"showPay != ''"
>
<div
class=
"q-mt-md"
v-if=
"showPay != ''"
>
<wechatpay
v-if=
"showPay == 'wechat'"
:order-no=
"orderNo"
></wechatpay>
<wechatpay
@
cancel=
"cancelPayHandler"
v-if=
"showPay == 'wechat'"
:order-no=
"orderNo"
></wechatpay>
</div>
</div>
</q-card>
</q-card>
...
@@ -114,7 +114,7 @@
...
@@ -114,7 +114,7 @@
</
template
>
</
template
>
<
script
>
<
script
>
import
wechatpay
from
"../components/pay/wepay"
;
import
wechatpay
from
"../
../
components/pay/wepay"
;
import
NoneData
from
"src/components/common/noneData.vue"
;
import
NoneData
from
"src/components/common/noneData.vue"
;
export
default
{
export
default
{
data
()
{
data
()
{
...
@@ -147,6 +147,7 @@ export default {
...
@@ -147,6 +147,7 @@ export default {
this
.
orderNo
=
OrderNo
this
.
orderNo
=
OrderNo
this
.
orderInfo
=
r
.
data
.
data
this
.
orderInfo
=
r
.
data
.
data
this
.
loading
=
false
this
.
loading
=
false
}
else
{
}
else
{
this
.
goHomeHandler
()
this
.
goHomeHandler
()
}
}
...
@@ -157,6 +158,10 @@ export default {
...
@@ -157,6 +158,10 @@ export default {
// setTimeout(() => {
// setTimeout(() => {
// location.href = location.origin;
// location.href = location.origin;
// }, 3000);
// }, 3000);
},
cancelPayHandler
(){
this
.
showPay
=
''
location
.
reload
()
}
}
},
},
};
};
...
...
src/pages/pay/paysuccess.vue
0 → 100644
View file @
c30fc511
<
template
>
<div
class=
"content-page order-preview"
style=
"min-height:60vh;"
>
<q-stepper
v-model=
"step"
ref=
"stepper"
color=
"primary"
inactive-color=
"grey-5 "
done-color=
"primary"
class=
"bg-transparent"
flat
animated
>
<q-step
:name=
"1"
title=
"確認訂單"
icon=
"settings"
:done=
"step > 1"
></q-step>
<q-step
:name=
"2"
title=
"付款"
icon=
"iconfont iconPayment-1"
:done=
"step > 2"
></q-step>
<q-step
:name=
"3"
title=
"訂購完成"
icon=
"iconfont iconicon_finish_R"
:done=
"step == 3"
></q-step>
</q-stepper>
<q-inner-loading
:showing=
"loading"
label=
"正在加載中"
></q-inner-loading>
<q-card
flat
class=
"q-pa-lg q-mb-lg"
:class=
"
{ 'q-mx-md': $q.platform.is.mobile }" v-if="!loading
&&
orderInfo">
<div
style=
"width:350px;margin:0 auto;"
>
<div
class=
"row items-center"
>
<q-icon
name=
"iconfont iconsuccess"
color=
"positive"
size=
"40px"
></q-icon>
<span
class=
"q-ml-lg text-subtitle1"
>
支付成功
</span>
</div>
<div
class=
"q-mt-lg"
>
<div
class=
"row"
>
<div
style=
"width:80px;"
class=
"text-subtitle2"
>
商品訂單:
</div>
<div
class=
"q-ml-md text-grey-6"
>
{{
orderNo
}}
</div>
</div>
<div
class=
"row q-mt-md"
>
<div
style=
"width:80px;padding-top:5px;"
class=
"text-subtitle2"
>
支付金額:
</div>
<div
class=
"q-ml-md col"
>
<div
class=
"row items-center"
>
<span
class=
"text-positive text-subtitle1 col"
>
CNY 8960.00
</span>
<div
class=
"text-grey-6 q-mr-sm cursor-pointer"
@
click=
"$event=>isExplends=!isExplends"
>
訂單詳情
</div>
<q-icon
:name=
"isExplends?'keyboard_arrow_up':'keyboard_arrow_down'"
@
click=
"$event=>isExplends=!isExplends"
size=
"14px"
color=
"grey-6"
class=
"cursor-pointer"
/>
</div>
<div
v-if=
"isExplends"
>
<div
class=
"q-mt-md text-grey-6"
>
商品名称:
{{
orderInfo
.
GoodsName
}}
</div>
<div
class=
"q-mt-md text-grey-6"
>
出行摘要:
{{
orderInfo
.
OrderMake
}}
</div>
<div
class=
"q-mt-md text-grey-6"
>
应付金额: CNY
{{
(
moneyFormat
(
orderInfo
.
TotalPrice
,
2
))
}}
</div>
<div
class=
"q-mt-md text-grey-6"
>
购买时间:
{{
orderInfo
.
CreateTime
}}
</div>
</div>
</div>
</div>
</div>
<div
class=
"q-mt-lg"
>
<q-btn
unelevated
dense
color=
"primary"
label=
"回到首頁"
@
click=
"CommonJump('/',
{})" class="q-px-md">
</q-btn>
</div>
</div>
</q-card>
<div
v-if=
"(!orderNo || orderNo == '') && !loading"
class=
"text-center q-my-xl"
>
<none-data
iconType=
"order"
title=
"沒有找到您的訂單信息哦"
subtitle=
"趕緊去挑選心儀的旅遊產品吧,三秒後自動跳轉到首頁"
></none-data>
</div>
</div>
</
template
>
<
script
>
import
{
date
}
from
"quasar"
;
export
default
{
data
()
{
return
{
step
:
3
,
orderNo
:
""
,
loading
:
true
,
orderInfo
:
null
,
isExplends
:
false
};
},
created
()
{
this
.
checkParamsHandler
()
},
methods
:
{
showPayFormHandler
(
payStr
)
{
this
.
showPay
=
payStr
;
},
checkParamsHandler
()
{
if
(
this
.
$route
.
params
&&
this
.
$route
.
params
.
id
)
{
this
.
getOrderInfoHandler
(
this
.
$route
.
params
.
id
)
}
else
{
this
.
goHomeHandler
()
}
},
getOrderInfoHandler
(
OrderNo
)
{
this
.
apipost
(
"GetDetailsByOrderNo_post"
,
{
OrderNo
},
r
=>
{
if
(
r
.
data
.
resultCode
==
1
)
{
this
.
orderNo
=
OrderNo
this
.
orderInfo
=
r
.
data
.
data
this
.
orderInfo
.
CreateTime
=
date
.
formatDate
(
this
.
orderInfo
.
CreateTime
.
replaceAll
(
'T'
,
' '
),
'YYYY年MM月DD日 HH時mm分'
)
this
.
loading
=
false
if
(
this
.
orderInfo
.
OrderStatus
!=
2
||
this
.
orderInfo
.
OrderStatus
!=
3
){
this
.
CommonJump
(
"/pay/"
+
this
.
orderNo
,
{});
}
}
else
{
this
.
goHomeHandler
()
}
})
},
goHomeHandler
()
{
this
.
loading
=
false
// setTimeout(() => {
// location.href = location.origin;
// }, 3000);
}
},
}
</
script
>
<
style
>
.order-pay-page
.q-stepper__content
{
display
:
none
!important
;
}
</
style
>
\ No newline at end of file
src/router/routes.js
View file @
c30fc511
...
@@ -165,7 +165,12 @@ const routes = [{
...
@@ -165,7 +165,12 @@ const routes = [{
{
{
path
:
'/pay/:id?'
,
//自定义页面
path
:
'/pay/:id?'
,
//自定义页面
component
:
()
=>
component
:
()
=>
import
(
'pages/pay.vue'
)
import
(
'pages/pay/pay.vue'
)
},
{
path
:
'/paysuccess/:id?'
,
//自定义页面
component
:
()
=>
import
(
'pages/pay/paysuccess.vue'
)
},
},
]
]
...
...
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