139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<template>
|
||
<view>
|
||
<nav-bar title="支付（公众号、APP、微信小程序）"></nav-bar>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<view class="table_box">
|
||
<view class="table_title">目前即实现前端的功能，接口方面需要自己去填写</view>
|
||
<view class="table_title">使用文档</view>
|
||
<view class="table_head">
|
||
<text>环境</text>
|
||
<text>说明</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>APP微信支付</text>
|
||
<text>在config/utils.js => setPay()方法修改对应的支付接口</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>APP支付宝支付</text>
|
||
<text>在config/utils.js => setPay()方法修改对应的支付接口</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>微信小程序支付</text>
|
||
<text>在config/utils.js => setPay()方法修改对应的支付接口</text>
|
||
</view>
|
||
<view class="table_content">
|
||
<text>微信公众号支付</text>
|
||
<text>在config/html5Utils.js => wxPublicPay()方法修改支付接口</text>
|
||
</view>
|
||
</view>
|
||
<view class="input_form_box">
|
||
<view class="input_box btm_line">
|
||
<view class="name">支付（统一分配方法）</view>
|
||
<view class="select_info" @click="onPay">
|
||
<view class="select">点击支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="input_box btm_line">
|
||
<view class="name">APP微信支付</view>
|
||
<view class="select_info" @click="onAppWxPay('wxpay')">
|
||
<view class="select">点击支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="input_box btm_line">
|
||
<view class="name">APP支付宝支付</view>
|
||
<view class="select_info" @click="onAppWxPay('alipay')">
|
||
<view class="select">点击支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="input_box btm_line">
|
||
<view class="name">微信小程序支付</view>
|
||
<view class="select_info" @click="onAppWxPay('smallPay')">
|
||
<view class="select">点击支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="input_box btm_line">
|
||
<view class="name">微信公众号支付</view>
|
||
<view class="select_info" @click="onWxPublicPay">
|
||
<view class="select">点击支付</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { setPay, setPayAssign } from '@/config/utils';
|
||
// #ifdef H5
|
||
import { wxPublicPay } from '@/config/html5Utils';
|
||
// #endif
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
//方法
|
||
methods: {
|
||
onPay() {
|
||
setPayAssign({
|
||
price: 8 ,// 价格，
|
||
title: "商品订单", // 标题
|
||
orderNo: "6546541654122315" // 订单编号
|
||
},res => {
|
||
// 小程序支付的回调
|
||
if(res.success){
|
||
uni.showToast({
|
||
title:"支付成功",
|
||
icon:"none"
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title:"支付失败，" + res.data,
|
||
icon:"none"
|
||
});
|
||
}
|
||
});
|
||
},
|
||
onAppWxPay(type){
|
||
setPay({
|
||
type: type, // APP微信支付=wxpay，APP支付宝支付=alipay，微信小程序支付=smallPay
|
||
price: 8 ,// 价格，
|
||
title: "商品订单", // 标题
|
||
orderNo: "6546541654122315" // 订单编号
|
||
},res => {
|
||
// 小程序支付的回调
|
||
if(res.success){
|
||
uni.showToast({
|
||
title:"支付成功",
|
||
icon:"none"
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title:"支付失败，" + res.data,
|
||
icon:"none"
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 公众号支付
|
||
onWxPublicPay(){
|
||
// #ifdef APP-PLUS
|
||
wxPublicPay({
|
||
orderNo: "6546541654122315" // 订单编号
|
||
});
|
||
// #endif
|
||
// #ifndef APP-PLUS
|
||
uni.showToast({
|
||
title:"请在微信公众号环境使用",
|
||
icon:"none"
|
||
});
|
||
// #endif
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
</style>
|