feat: 增加支付宝支付
parent
91df476b68
commit
9617169e6f
|
|
@ -5,8 +5,8 @@ ENV = 'development'
|
|||
VUE_APP_TITLE = 创盈商户管理系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'https://cmx.bskies.cc:8000/admin-api'
|
||||
#VUE_APP_BASE_API = 'http://192.168.1.147:48080'
|
||||
#VUE_APP_BASE_API = 'https://cmx.bskies.cc:8000/admin-api'
|
||||
VUE_APP_BASE_API = 'http://192.168.1.147:48080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -0,0 +1,232 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="payment" :class="pay_close ? 'on' : ''">
|
||||
<view class="title acea-row row-center-wrapper">
|
||||
选择付款方式<text class="iconfont icon-guanbi" @click='close'></text>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" @click='goPay(item.value)' v-for="(item,index) in payMode"
|
||||
:key="index">
|
||||
<view class="left acea-row row-between-wrapper">
|
||||
<view class="iconfont" :class="item.icon"></view>
|
||||
<view class="text">
|
||||
<view class="name">{{item.name}}</view>
|
||||
<view class="info" v-if="item.number">
|
||||
{{item.title}} <span class="money">￥{{ item.number }}</span>
|
||||
</view>
|
||||
<view class="info" v-else>{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @click='close' v-if="pay_close"></view>
|
||||
<!-- 支付宝支付界面 -->
|
||||
<u-modal :show="alipayShow" title="支付宝支付">
|
||||
<view class="slot-content">
|
||||
<rich-text :nodes="alipayForm"></rich-text>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
orderPay,
|
||||
wechatOrderPay,
|
||||
wechatQueryPayResult
|
||||
} from '@/api/order.js';
|
||||
import {
|
||||
memberTopUp
|
||||
} from '@/api/member.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
payMode: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
pay_close: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
payInfo: {
|
||||
type: Object,
|
||||
deafult: () => {
|
||||
return {
|
||||
orderInfos: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alipayShow: false,
|
||||
alipayForm: ''
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['systemPlatform']),
|
||||
methods: {
|
||||
close: function() {
|
||||
this.$emit('onChangeFun', {
|
||||
action: 'payClose'
|
||||
});
|
||||
},
|
||||
goPay: function(paytype) {
|
||||
let that = this;
|
||||
if (that.payInfo.orderInfos.length === 0) return that.$util.Tips({
|
||||
title: '请选择要支付的订单'
|
||||
});
|
||||
uni.showLoading({
|
||||
title: '支付中'
|
||||
});
|
||||
memberTopUp({
|
||||
...that.payInfo,
|
||||
payType: paytype
|
||||
}).then(res => {
|
||||
let jsConfig = res.data
|
||||
switch (paytype) {
|
||||
case 'WXPAY':
|
||||
uni.hideLoading();
|
||||
location.replace(jsConfig.h5Url + '&redirect_url=' + window.location.protocol +
|
||||
'//' + window.location.host + goPages + '&status=1');
|
||||
return that.$util.Tips({
|
||||
title: "支付中",
|
||||
icon: 'success'
|
||||
}, () => {
|
||||
that.$emit('onChangeFun', {
|
||||
action: 'pay_complete'
|
||||
});
|
||||
});
|
||||
break;
|
||||
case 'ALIPAY':
|
||||
uni.hideLoading();
|
||||
const div = document.createElement('div')
|
||||
/* 下面的data.content就是后台返回接收到的数据 */
|
||||
div.innerHTML = jsConfig.body
|
||||
document.body.appendChild(div)
|
||||
document.forms[0].submit()
|
||||
break;
|
||||
case 'weixinh5':
|
||||
uni.hideLoading();
|
||||
location.replace(jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol +
|
||||
'//' + window.location.host + goPages + '&status=1');
|
||||
return that.$util.Tips({
|
||||
title: "支付中",
|
||||
icon: 'success'
|
||||
}, () => {
|
||||
that.$emit('onChangeFun', {
|
||||
action: 'pay_complete'
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.hideLoading();
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
}, () => {
|
||||
that.$emit('onChangeFun', {
|
||||
action: 'pay_fail'
|
||||
});
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.payment {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
background-color: #fff;
|
||||
padding-bottom: 100rpx;
|
||||
z-index: 99;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.payment.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.payment .title {
|
||||
text-align: center;
|
||||
height: 123rpx;
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
padding-right: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.payment .title .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 43rpx;
|
||||
color: #8a8a8a;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.payment .item {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
height: 130rpx;
|
||||
margin-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.payment .item .left {
|
||||
width: 610rpx;
|
||||
}
|
||||
|
||||
.payment .item .left .text {
|
||||
width: 540rpx;
|
||||
}
|
||||
|
||||
.payment .item .left .text .name {
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.payment .item .left .text .info {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.payment .item .left .text .info .money {
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
.payment .item .left .iconfont {
|
||||
font-size: 45rpx;
|
||||
color: #09bb07;
|
||||
}
|
||||
|
||||
.payment .item .left .iconfont.icon-zhifubao {
|
||||
color: #00aaea;
|
||||
}
|
||||
|
||||
.payment .item .left .iconfont.icon-yuezhifu {
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
.payment .item .left .iconfont.icon-yuezhifu1 {
|
||||
color: #eb6623;
|
||||
}
|
||||
|
||||
.payment .item .iconfont {
|
||||
font-size: 0.3rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
|
||||
<paymentMember :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :payInfo="payInfo"></paymentMember>
|
||||
<button class="box-submit" @click="goPay">立即充值</button>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
import {
|
||||
memberGradeInfo
|
||||
} from '@/api/member.js';
|
||||
import payment from '@/components/payment';
|
||||
import paymentMember from '@/components/paymentMember';
|
||||
export default {
|
||||
name: "member_application",
|
||||
components: {
|
||||
payment
|
||||
paymentMember
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -58,20 +58,22 @@
|
|||
form: {
|
||||
phone:''
|
||||
},
|
||||
pay_order_id: '123123',
|
||||
totalPrice: '123',
|
||||
payInfo:{
|
||||
userPhone: '',
|
||||
confirmPhone: '',
|
||||
orderInfos: []
|
||||
},
|
||||
payMode: [{
|
||||
name: "微信支付",
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
value: 'WXPAY',
|
||||
title: '微信快捷支付'
|
||||
},
|
||||
{
|
||||
name: "余额支付",
|
||||
icon: "icon-yuezhifu",
|
||||
value: 'yue',
|
||||
title: '可用余额:',
|
||||
number: 0
|
||||
name: "支付宝",
|
||||
icon: "icon-zhifubao",
|
||||
value: 'ALIPAY',
|
||||
title: '支付宝快捷支付'
|
||||
}
|
||||
],
|
||||
pay_close: false,
|
||||
|
|
@ -107,12 +109,20 @@
|
|||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
goPay(pay_price, order_id) {
|
||||
goPay() {
|
||||
this.$set(this, 'pay_close', true);
|
||||
this.$set(this, 'pay_order_id', '4646');
|
||||
this.$set(this, 'totalPrice', '4646');
|
||||
this.payInfo = {
|
||||
userPhone: '15760696662',
|
||||
confirmPhone: '15760696662',
|
||||
orderInfos: [{
|
||||
gearId: '1',
|
||||
name: '套餐1',
|
||||
gearRemarks: '备注1',
|
||||
gearAmount: 0.01
|
||||
}]
|
||||
}
|
||||
},
|
||||
/**
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue