Skip to content

H
hello-uniapp

weixin_54239399 / hello-uniapp
与 Fork 源项目一致

从无法访问的项目Fork

通知 4
Star 1
Fork 0
H
hello-uniapp

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f281cc61 编写于 作者: 雪洛's avatar 雪洛 提交者： hbcui1984
浏览文件
操作

chore: 支付替换为uniPay实现

上级 83a6227b
隐藏空白更改
内联 并排
Showing with 381 addition and 331 deletion
pages/API/login/login.vue
浏览文件 @ f281cc61
<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
浏览文件 @ f281cc61
<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: 40rpx;
}
.rmbLogo {
font-size: 40rpx;
}
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: 200rpx;
height: 80rpx;
padding-bottom: 4rpx;
}
.price {
border-bottom: 1px solid #eee;
width: 200rpx;
height: 80rpx;
padding-bottom: 4rpx;
}
.ipaPayBtn {
margin-top: 30rpx;
}
</style>
.ipaPayBtn {
margin-top: 30rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或