<template>
<view>
<view class="uni-list">
<radio-group @change="applePriceChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in priceList" :key="index">
{{item.text}}
<radio :value="item.value" :checked="item.checked" />
</label>
</radio-group>
</view>
<view class="uni-padding-wrap">
<button class="ipaPayBtn" @click="requestPayment" :loading="loading" :disabled="disabled">确认支付</button>
</view>
</view>
</view>
</template>
<script>
let iapChannel = null,
productId = 'HelloUniappPayment1',
productIds = ['HelloUniappPayment1', 'HelloUniappPayment6'];
export default {
data() {
return {
inputAmount: '', //金额
amountList: [6], //快捷金额
userid: this.getUserId(),
title: 'request-payment',
loading: false,
disabled: true,
priceList: [
{
value: 'HelloUniappPayment6',
text: '支付6元',
checked: false
}
]
};
},
onLoad: function() {
plus.payment.getChannels(function(channels){
console.log('获取到channel' + JSON.stringify(channels));
for (var i in channels) {
var channel = channels[i];
if (channel.id === 'appleiap') {
iapChannel = channel;
this.requestOrder();
}
}
if (!iapChannel) {
this.errorMsg();
}
});
},
methods: {
select(amount) {
this.inputAmount = amount;
},
requestOrder() {
uni.showLoading({
title: '检测支付环境...'
});
iapChannel.requestOrder(
productIds,
orderList => {
//必须调用此方法才能进行 iap 支付
this.disabled = false;
console.log('requestOrder success666: ' + JSON.stringify(orderList));
uni.hideLoading();
},
e => {
console.log('requestOrder failed: ' + JSON.stringify(e));
uni.hideLoading();
this.errorMsg();
}
);
},
requestPayment(e) {
this.loading = true;
uni.requestPayment({
provider: 'appleiap',
orderInfo: {
productid: productId
},
success: e => {
uni.showModal({
content: '感谢您的赞助',
showCancel: false
});
},
fail: e => {
uni.showModal({
content: '支付失败,原因为: ' + e.errMsg,
showCancel: false
});
},
complete: () => {
console.log('payment结束');
this.loading = false;
}
});
},
applePriceChange(e) {
productId = e.detail.value;
},
errorMsg() {
uni.showModal({
content: '暂不支持苹果 iap 支付',
showCancel: false
});
}
}
};
</script>
<style lang="scss">
.block {
width: 94%;
padding: 20upx 3%;
.title {
width: 100%;
font-size: 50upx;
}
.content {
.my {
width: 100%;
height: 120upx;
display: flex;
align-items: center;
font-size: 30upx;
border-bottom: solid 1upx #eee;
}
.amount {
width: 100%;
.list {
// display: flex;
justify-content: space-between;
padding: 20upx 0;
.box {
width: 220upx;
height: 120upx;
display: -webkit-inline-box;
justify-content: center;
align-items: center;
border-radius: 10upx;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
font-size: 36upx;
background-color: #f1f1f1;
margin-left: 10upx;
margin-top: 10upx;
color: 333;
&.on {
background-color: #f06c7a;
color: #fff;
}
}
}
.num {
margin-top: 10upx;
display: flex;
// justify-content: flex-end;
align-items: center;
.text {
padding-right: 10upx;
font-size: 50upx;
}
.input {
width: 28.2vw;
border-bottom: solid 2upx #999;
// justify-content: flex-end;
align-items: center;
input {
margin: 0 20upx;
height: 60upx;
font-size: 30upx;
color: #f06c7a;
// justify-content: flex-end;
align-items: center;
}
}
}
}
.pay-list {
width: 100%;
border-bottom: solid 1upx #eee;
.row {
width: 100%;
height: 120upx;
display: flex;
align-items: center;
.left {
width: 100upx;
flex-shrink: 0;
display: flex;
align-items: center;
image {
width: 80upx;
height: 80upx;
}
}
.center {
width: 100%;
font-size: 30upx;
}
.right {
width: 100upx;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
}
}
}
}
}
.pay {
margin-top: 20upx;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
.btn {
width: 70%;
height: 80upx;
border-radius: 80upx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #f06c7a;
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
}
.tis {
margin-top: 10upx;
width: 100%;
font-size: 24upx;
display: flex;
justify-content: center;
align-items: baseline;
color: #999;
.terms {
color: #5a9ef7;
}
}
}
</style>
3 个回复
1***@qq.com
兄弟,我也一样遇到这个问题了,找不到原因
DCloud_uni-ad_HDX
需要自定义基座/云打包/本地打包 生效,hbuilder基座无效
2***@qq.com
同样的 云打包 版本
iPad mini - 支付失败 - 获取不到支付通道信息,回调函数参数channels 的值为空。
iPad - 支付失败 - 可获取通道信息,但iapChannel.requestOrder()失败
iPhone - 支付成功