Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_54239399
hello-uniapp
提交
924e7589
H
hello-uniapp
项目概览
weixin_54239399
/
hello-uniapp
与 Fork 源项目一致
从无法访问的项目Fork
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello-uniapp
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
924e7589
编写于
8月 21, 2020
作者:
雪洛
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: 支付替换为uniPay实现
上级
c4f4fe23
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
381 addition
and
331 deletion
+381
-331
pages/API/login/login.vue
pages/API/login/login.vue
+136
-113
pages/API/request-payment/request-payment.vue
pages/API/request-payment/request-payment.vue
+245
-218
未找到文件。
pages/API/login/login.vue
浏览文件 @
924e7589
<
template
>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"uni-padding-wrap"
>
<view
style=
"background:#FFF; padding:40rpx;"
>
<block
v-if=
"hasLogin === true"
>
<view
class=
"uni-h3 uni-center uni-common-mt"
>
已登录
</view>
<view
class=
"uni-hello-text uni-center"
>
<text>
每个账号仅需登录 1 次,\n后续每次进入页面即可自动拉取用户信息。
</text>
</view>
</block>
<block
v-if=
"hasLogin === false"
>
<view
class=
"uni-h3 uni-center uni-common-mt"
>
未登录
</view>
<view
class=
"uni-hello-text uni-center"
>
请点击按钮登录
</view>
</block>
</view>
<view
class=
"uni-btn-v uni- uni-common-mt"
>
<!-- #ifdef MP-TOUTIAO -->
<button
type=
"primary"
class=
"page-body-button"
v-for=
"(value,key) in providerList"
@
click=
"tologin(value)"
:key=
"key"
>
登录
</button>
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<button
type=
"primary"
class=
"page-body-button"
v-for=
"(value,key) in providerList"
@
click=
"tologin(value)"
:key=
"key"
>
{{
value
.
name
}}
</button>
<!-- #endif -->
</view>
</view>
</view>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"uni-padding-wrap"
>
<view
style=
"background:#FFF; padding:40rpx;"
>
<block
v-if=
"hasLogin === true"
>
<view
class=
"uni-h3 uni-center uni-common-mt"
>
已登录
</view>
<view
class=
"uni-hello-text uni-center"
>
<text>
每个账号仅需登录 1 次,\n后续每次进入页面即可自动拉取用户信息。
</text>
</view>
</block>
<block
v-if=
"hasLogin === false"
>
<view
class=
"uni-h3 uni-center uni-common-mt"
>
未登录
</view>
<view
class=
"uni-hello-text uni-center"
>
请点击按钮登录
</view>
</block>
</view>
<view
class=
"uni-btn-v uni- uni-common-mt"
>
<!-- #ifdef MP-TOUTIAO -->
<button
type=
"primary"
class=
"page-body-button"
v-for=
"(value,key) in providerList"
@
click=
"tologin(value)"
:key=
"key"
>
登录
</button>
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<button
type=
"primary"
class=
"page-body-button"
v-for=
"(value,key) in providerList"
@
click=
"tologin(value)"
:key=
"key"
>
{{
value
.
name
}}
</button>
<!-- #endif -->
</view>
</view>
</view>
</
template
>
<
script
>
import
{
mapState
,
mapMutations
}
from
'
vuex
'
import
{
mapState
,
mapMutations
}
from
'
vuex
'
export
default
{
data
()
{
return
{
title
:
'
login
'
,
providerList
:
[]
}
},
computed
:
{
...
mapState
([
'
hasLogin
'
])
},
onLoad
()
{
uni
.
getProvider
({
service
:
'
oauth
'
,
success
:
(
result
)
=>
{
this
.
providerList
=
result
.
provider
.
map
((
value
)
=>
{
let
providerName
=
''
;
switch
(
value
)
{
case
'
weixin
'
:
providerName
=
'
微信登录
'
break
;
case
'
qq
'
:
providerName
=
'
QQ登录
'
break
;
case
'
sinaweibo
'
:
providerName
=
'
新浪微博登录
'
break
;
case
'
xiaomi
'
:
providerName
=
'
小米登录
'
break
;
case
'
alipay
'
:
providerName
=
'
支付宝登录
'
break
;
case
'
baidu
'
:
providerName
=
'
百度登录
'
break
;
case
'
toutiao
'
:
providerName
=
'
头条登录
'
break
;
case
'
apple
'
:
providerName
=
'
苹果登录
'
break
;
}
return
{
name
:
providerName
,
id
:
value
}
});
export
default
{
data
()
{
return
{
title
:
'
login
'
,
providerList
:
[]
}
},
computed
:
{
...
mapState
([
'
hasLogin
'
])
},
onLoad
()
{
uni
.
getProvider
({
service
:
'
oauth
'
,
success
:
(
result
)
=>
{
this
.
providerList
=
result
.
provider
.
map
((
value
)
=>
{
let
providerName
=
''
;
switch
(
value
)
{
case
'
weixin
'
:
providerName
=
'
微信登录
'
break
;
case
'
qq
'
:
providerName
=
'
QQ登录
'
break
;
case
'
sinaweibo
'
:
providerName
=
'
新浪微博登录
'
break
;
case
'
xiaomi
'
:
providerName
=
'
小米登录
'
break
;
case
'
alipay
'
:
providerName
=
'
支付宝登录
'
break
;
case
'
baidu
'
:
providerName
=
'
百度登录
'
break
;
case
'
toutiao
'
:
providerName
=
'
头条登录
'
break
;
case
'
apple
'
:
providerName
=
'
苹果登录
'
break
;
}
return
{
name
:
providerName
,
id
:
value
}
});
},
fail
:
(
error
)
=>
{
console
.
log
(
'
获取登录通道失败
'
,
error
);
}
});
},
methods
:
{
...
mapMutations
([
'
login
'
]),
tologin
(
provider
)
{
uni
.
login
({
provider
:
provider
.
id
,
// #ifdef MP-ALIPAY
scopes
:
'
auth_user
'
,
//支付宝小程序需设置授权类型
// #endif
success
:
(
res
)
=>
{
console
.
log
(
'
login success:
'
,
res
);
// 更新保存在 store 中的登录状态
this
.
login
(
provider
.
id
);
},
fail
:
(
err
)
=>
{
console
.
log
(
'
login fail:
'
,
err
);
}
});
}
}
}
},
fail
:
(
error
)
=>
{
console
.
log
(
'
获取登录通道失败
'
,
error
);
}
});
},
methods
:
{
...
mapMutations
([
'
login
'
]),
tologin
(
provider
)
{
uni
.
login
({
provider
:
provider
.
id
,
// #ifdef MP-ALIPAY
scopes
:
'
auth_user
'
,
//支付宝小程序需设置授权类型
// #endif
success
:
(
res
)
=>
{
console
.
log
(
'
login success:
'
,
res
);
// 更新保存在 store 中的登录状态
this
.
login
(
provider
.
id
);
// #ifdef MP-WEIXIN
console
.
warn
(
'
如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
'
)
uni
.
request
({
url
:
'
https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center
'
,
method
:
'
POST
'
,
data
:
{
action
:
'
loginByWeixin
'
,
params
:
{
code
:
res
.
code
,
platform
:
'
mp-weixin
'
}
},
success
(
res
)
{
console
.
log
(
res
);
if
(
res
.
data
.
code
!==
0
)
{
console
.
log
(
'
获取openid失败:
'
,
res
.
result
.
msg
);
return
}
uni
.
setStorageSync
(
'
openid
'
,
res
.
data
.
openid
)
},
fail
(
err
)
{
console
.
log
(
'
获取openid失败:
'
,
err
);
}
})
// #endif
},
fail
:
(
err
)
=>
{
console
.
log
(
'
login fail:
'
,
err
);
}
});
}
}
}
</
script
>
<
style
>
button
{
background-color
:
#007aff
;
color
:
#ffffff
;
}
</
style
>
button
{
background-color
:
#007aff
;
color
:
#ffffff
;
}
</
style
>
pages/API/request-payment/request-payment.vue
浏览文件 @
924e7589
<
template
>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"uni-padding-wrap"
>
<view
style=
"background:#FFF; padding:50rpx 0;"
>
<view
class=
"uni-hello-text uni-center"
>
支付金额
</text></view>
<view
class=
"uni-h1 uni-center uni-common-mt"
>
<text
class=
"rmbLogo"
>
¥
</text>
<input
class=
"price"
type=
"digit"
:value=
"price"
maxlength=
"4"
@
input=
"priceChange"
/>
</view>
</view>
<view
class=
"uni-btn-v uni-common-mt"
>
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<button
type=
"primary"
@
click=
"weixinPay"
:loading=
"loading"
>
微信支付
</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<template
v-if=
"providerList.length > 0"
>
<button
v-for=
"(item,index) in providerList"
:key=
"index"
@
click=
"requestPayment(item,index)"
:loading=
"item.loading"
>
{{
item
.
name
}}
支付
</button>
</
template
>
<!-- #endif -->
</view>
</view>
</view>
</view>
<view>
<page-head
:title=
"title"
></page-head>
<view
class=
"uni-padding-wrap"
>
<view
style=
"background:#FFF; padding:50rpx 0;"
>
<view
class=
"uni-hello-text uni-center"
>
支付金额
</text></view>
<view
class=
"uni-h1 uni-center uni-common-mt"
>
<text
class=
"rmbLogo"
>
¥
</text>
<input
class=
"price"
type=
"digit"
:value=
"price"
maxlength=
"4"
@
input=
"priceChange"
/>
</view>
</view>
<view
class=
"uni-btn-v uni-common-mt"
>
<!-- #ifdef MP-WEIXIN -->
<button
type=
"primary"
@
click=
"weixinPay"
:loading=
"loading"
>
微信支付
</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<template
v-if=
"providerList.length > 0"
>
<button
v-for=
"(item,index) in providerList"
:key=
"index"
@
click=
"requestPayment(item,index)"
:loading=
"item.loading"
>
{{
item
.
name
}}
支付
</button>
</
template
>
<!-- #endif -->
</view>
</view>
</view>
</view>
</template>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
request-payment
'
,
loading
:
false
,
price
:
1
,
providerList
:
[]
}
},
onLoad
:
function
()
{
// #ifdef APP-PLUS
uni
.
getProvider
({
service
:
"
payment
"
,
success
:
(
e
)
=>
{
console
.
log
(
"
payment success:
"
+
JSON
.
stringify
(
e
));
let
providerList
=
[];
e
.
provider
.
map
((
value
)
=>
{
switch
(
value
)
{
case
'
alipay
'
:
providerList
.
push
({
name
:
'
支付宝
'
,
id
:
value
,
loading
:
false
});
break
;
case
'
wxpay
'
:
providerList
.
push
({
name
:
'
微信
'
,
id
:
value
,
loading
:
false
});
break
;
default
:
break
;
}
})
this
.
providerList
=
providerList
;
},
fail
:
(
e
)
=>
{
console
.
log
(
"
获取支付通道失败:
"
,
e
);
}
});
// #endif
},
methods
:
{
weixinPay
()
{
console
.
log
(
"
发起支付
"
);
this
.
loading
=
true
;
uni
.
login
({
success
:
(
e
)
=>
{
console
.
log
(
"
login success
"
,
e
);
uni
.
request
({
url
:
`https://unidemo.dcloud.net.cn/payment/wx/mp?code=
${
e
.
code
}
&amount=
${
this
.
price
}
`
,
success
:
(
res
)
=>
{
console
.
log
(
"
pay request success
"
,
res
);
if
(
res
.
statusCode
!==
200
)
{
uni
.
showModal
({
content
:
"
支付失败,请重试!
"
,
showCancel
:
false
});
return
;
}
if
(
res
.
data
.
ret
===
0
)
{
console
.
log
(
"
得到接口prepay_id
"
,
res
.
data
.
payment
);
let
paymentData
=
res
.
data
.
payment
;
uni
.
requestPayment
({
timeStamp
:
paymentData
.
timeStamp
,
nonceStr
:
paymentData
.
nonceStr
,
package
:
paymentData
.
package
,
signType
:
'
MD5
'
,
paySign
:
paymentData
.
paySign
,
success
:
(
res
)
=>
{
uni
.
showToast
({
title
:
"
感谢您的赞助!
"
})
},
fail
:
(
res
)
=>
{
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
res
.
errMsg
,
showCancel
:
false
})
},
complete
:
()
=>
{
this
.
loading
=
false
;
}
})
}
else
{
uni
.
showModal
({
content
:
res
.
data
.
desc
,
showCancel
:
false
})
}
},
fail
:
(
e
)
=>
{
console
.
log
(
"
fail
"
,
e
);
this
.
loading
=
false
;
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
e
.
errMsg
,
showCancel
:
false
})
}
})
},
fail
:
(
e
)
=>
{
console
.
log
(
"
fail
"
,
e
);
this
.
loading
=
false
;
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
e
.
errMsg
,
showCancel
:
false
})
}
})
},
async
requestPayment
(
e
,
index
)
{
this
.
providerList
[
index
].
loading
=
true
;
let
orderInfo
=
await
this
.
getOrderInfo
(
e
.
id
);
console
.
log
(
"
得到订单信息
"
,
orderInfo
);
if
(
orderInfo
.
statusCode
!==
200
)
{
console
.
log
(
"
获得订单信息失败
"
,
orderInfo
);
uni
.
showModal
({
content
:
"
获得订单信息失败
"
,
showCancel
:
false
})
return
;
}
uni
.
requestPayment
({
provider
:
e
.
id
,
orderInfo
:
orderInfo
.
data
,
success
:
(
e
)
=>
{
console
.
log
(
"
success
"
,
e
);
uni
.
showToast
({
title
:
"
感谢您的赞助!
"
})
},
fail
:
(
e
)
=>
{
console
.
log
(
"
fail
"
,
e
);
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
e
.
errMsg
,
showCancel
:
false
})
},
complete
:
()
=>
{
this
.
providerList
[
index
].
loading
=
false
;
}
})
},
getOrderInfo
(
e
)
{
let
appid
=
""
;
// #ifdef APP-PLUS
appid
=
plus
.
runtime
.
appid
;
// #endif
let
url
=
'
https://demo.dcloud.net.cn/payment/?payid=
'
+
e
+
'
&appid=
'
+
appid
+
'
&total=
'
+
this
.
price
;
return
new
Promise
((
res
)
=>
{
uni
.
request
({
url
:
url
,
success
:
(
result
)
=>
{
res
(
result
);
},
fail
:
(
e
)
=>
{
res
(
e
);
}
})
})
},
priceChange
(
e
)
{
console
.
log
(
e
.
detail
.
value
)
this
.
price
=
e
.
detail
.
value
;
}
}
}
export
default
{
data
()
{
return
{
title
:
'
request-payment
'
,
loading
:
false
,
price
:
1
,
providerList
:
[]
}
},
onLoad
:
function
()
{
// #ifdef APP-PLUS
uni
.
getProvider
({
service
:
"
payment
"
,
success
:
(
e
)
=>
{
console
.
log
(
"
payment success:
"
+
JSON
.
stringify
(
e
));
let
providerList
=
[];
e
.
provider
.
map
((
value
)
=>
{
switch
(
value
)
{
case
'
alipay
'
:
providerList
.
push
({
name
:
'
支付宝
'
,
id
:
value
,
loading
:
false
});
break
;
case
'
wxpay
'
:
providerList
.
push
({
name
:
'
微信
'
,
id
:
value
,
loading
:
false
});
break
;
default
:
break
;
}
})
this
.
providerList
=
providerList
;
},
fail
:
(
e
)
=>
{
console
.
log
(
"
获取支付通道失败:
"
,
e
);
}
});
// #endif
},
methods
:
{
loginMpWeixin
()
{
return
new
Promise
((
resolve
,
reject
)
=>
{
uni
.
login
({
provider
:
'
weixin
'
,
success
(
res
)
{
uni
.
request
({
url
:
'
https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center
'
,
method
:
'
POST
'
,
data
:
{
action
:
'
loginByWeixin
'
,
params
:
{
code
:
res
.
code
,
platform
:
'
mp-weixin
'
}
},
success
(
res
)
{
if
(
res
.
data
.
code
!==
0
)
{
reject
(
new
Error
(
'
获取openid失败:
'
,
res
.
result
.
msg
))
return
}
uni
.
setStorageSync
(
'
openid
'
,
res
.
data
.
openid
)
resolve
(
res
.
data
.
openid
)
},
fail
(
err
)
{
reject
(
new
Error
(
'
获取openid失败:
'
+
err
))
}
})
},
fail
(
err
)
{
reject
(
err
)
}
})
})
},
async
weixinPay
()
{
let
openid
=
uni
.
getStorageSync
(
'
openid
'
)
console
.
log
(
"
发起支付
"
);
this
.
loading
=
true
;
if
(
!
openid
)
{
try
{
openid
=
await
this
.
loginMpWeixin
()
}
catch
(
e
)
{
console
.
error
(
e
)
}
if
(
!
openid
)
{
uni
.
showModal
({
content
:
'
获取openid失败
'
,
showCancel
:
false
})
this
.
loading
=
false
return
}
}
this
.
openid
=
openid
let
orderInfo
=
await
this
.
getOrderInfo
(
'
wxpay
'
)
if
(
!
orderInfo
)
{
uni
.
showModal
({
content
:
'
获取支付信息失败
'
,
showCancel
:
false
})
return
}
uni
.
requestPayment
({
...
orderInfo
,
success
:
(
res
)
=>
{
uni
.
showToast
({
title
:
"
感谢您的赞助!
"
})
},
fail
:
(
res
)
=>
{
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
res
.
errMsg
,
showCancel
:
false
})
},
complete
:
()
=>
{
this
.
loading
=
false
;
}
})
},
async
requestPayment
(
e
,
index
)
{
this
.
providerList
[
index
].
loading
=
true
;
const
provider
=
e
.
id
let
orderInfo
=
await
this
.
getOrderInfo
(
provider
);
if
(
!
orderInfo
)
{
uni
.
showModal
({
content
:
'
获取支付信息失败
'
,
showCancel
:
false
})
return
}
console
.
log
(
'
--------orderInfo--------
'
)
console
.
log
(
orderInfo
);
uni
.
requestPayment
({
provider
,
orderInfo
:
orderInfo
,
success
:
(
e
)
=>
{
console
.
log
(
"
success
"
,
e
);
uni
.
showToast
({
title
:
"
感谢您的赞助!
"
})
},
fail
:
(
e
)
=>
{
console
.
log
(
"
fail
"
,
e
);
uni
.
showModal
({
content
:
"
支付失败,原因为:
"
+
e
.
errMsg
,
showCancel
:
false
})
},
complete
:
()
=>
{
this
.
providerList
[
index
].
loading
=
false
;
}
})
},
getOrderInfo
(
provider
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
if
(
!
this
.
price
)
{
reject
(
new
Error
(
'
请输入金额
'
))
}
uni
.
request
({
method
:
'
POST
'
,
url
:
'
https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay
'
,
data
:
{
provider
,
openid
:
this
.
openid
,
totalFee
:
Number
(
this
.
price
)
*
100
,
// 转为以分为单位
// #ifdef APP-PLUS
platform
:
'
app-plus
'
,
// #endif
// #ifdef MP-WEIXIN
platform
:
'
mp-weixin
'
,
// #endif
},
success
(
res
)
{
if
(
res
.
data
.
code
===
0
)
{
resolve
(
res
.
data
.
orderInfo
)
}
else
{
reject
(
new
Error
(
'
获取支付信息失败
'
+
res
.
data
.
msg
))
}
},
fail
(
err
)
{
reject
(
new
Error
(
'
请求支付接口失败
'
+
err
))
}
})
})
},
priceChange
(
e
)
{
console
.
log
(
e
.
detail
.
value
)
this
.
price
=
e
.
detail
.
value
;
}
}
}
</
script
>
<
style
>
.rmbLogo
{
font-size
:
40
rpx
;
}
.rmbLogo
{
font-size
:
40
rpx
;
}
button
{
background-color
:
#007aff
;
color
:
#ffffff
;
}
button
{
background-color
:
#007aff
;
color
:
#ffffff
;
}
.uni-h1.uni-center
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
flex-end
;
}
.uni-h1.uni-center
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
flex-end
;
}
.price
{
border-bottom
:
1px
solid
#eee
;
width
:
200
rpx
;
height
:
80
rpx
;
padding-bottom
:
4
rpx
;
}
.price
{
border-bottom
:
1px
solid
#eee
;
width
:
200
rpx
;
height
:
80
rpx
;
padding-bottom
:
4
rpx
;
}
.ipaPayBtn
{
margin-top
:
30
rpx
;
}
</
style
>
.ipaPayBtn
{
margin-top
:
30
rpx
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录