vue--支付组价
程序员文章站
2022-06-07 13:39:02
...
组件:
<template>
<div>
<div class="pay-box" v-if="showItem">
<img class="close" src="../assets/xcx_img/close.png" @click="showItem = false" alt="">
<div class="p-title">请选择支付方式</div>
<div class="money">¥{{money}}</div>
<div class="m-tip">当前支付金额</div>
<div class="p-item" v-for="(item, index) in payMode" :key="index" @click="payFunc(item)"> <img :src="item.icon" alt="">{{item.name}}</div>
</div>
<div class="mask" @click="showItem = false" v-if="showItem"></div>
<tip ref="tip" :tip="tip_text"></tip>
</div>
</template>
<script>
import tip from 'components/tip'
export default {
data() {
return {
base_site: this.$img_host,
payMode: [],
showItem: false,
tip_text: ''
}
},
components: {
tip
},
created() {
this.getPayMode()
},
methods: {
showPayItem() {
this.showItem = true
},
payFunc(item) {
let apiUrl = ''
let cbUrl = ''
let apiData = {}
if (this.payType == 'order') {
apiUrl = 'pay/doPay'
cbUrl = 'pay/callbackPay'
apiData = {
url_type: 1,
order_code: this.orderCode,
payment_code: item.payment_code
}
} else if (this.payType == 'coupon') {
apiUrl = 'coupon/payCoupon'
cbUrl = 'coupon/payCallback'
apiData = this.couponData
apiData.payment_code = item.payment_code
}
this.axios.post(apiUrl, apiData).then(res => {
let payInfo = ''
let pay_no = res.data.data.pay_no
if (item.payment_code == 'wxpay') {
payInfo = JSON.parse(res.data.data.payInfo)
let params = {
appid: payInfo.appid,
partnerid: payInfo.partnerid, // merchant id
prepayid: payInfo.prepayid, // prepay id
noncestr: payInfo.noncestr, // nonce
timestamp: payInfo.timestamp, // timestamp
sign: payInfo.sign, // signed string
}
this.wechatPayFunc(params, pay_no, cbUrl)
} else if (item.payment_code == 'alipay') {
payInfo = res.data.data.payInfo
this.alipayFunc(payInfo, pay_no, cbUrl)
}
})
},
wechatPayFunc(params, pay_no , cbUrl) {
let _this = this
Wechat.sendPaymentRequest(params, function() {
_this.axios.post(cbUrl, {
url_type: 1,
pay_no: pay_no
}).then(res => {
_this.tip_text = '支付成功!'
_this.$refs.tip.showTipFunc()
_this.showItem = false
setTimeout(() => {
_this.$emit('paySuccess', res.data.data)
}, 1000)
})
}, function(reason) {
_this.tip_text = '支付失败,请重试!'
_this.$refs.tip.showTipFunc()
});
},
alipayFunc(payInfo, pay_no, cbUrl) {
let _this = this
cordova.plugins.alipay.payment(payInfo, (res) => {
// 支付成功
_this.axios.post(cbUrl, {
url_type: 1,
pay_no: pay_no
}).then(res => {
_this.tip_text = '支付成功!'
_this.$refs.tip.showTipFunc()
_this.showItem = false
setTimeout(() => {
_this.$emit('paySuccess', res.data.data)
}, 1000)
})
}, (error) => {
// 支付失败
///alert("支付失败" + error.resultStatus);
_this.tip_text = '支付失败,请重试!'
_this.$refs.tip.showTipFunc()
})
},
getPayMode() {
this.axios.post('pay/getPayMode', {
url_type: 1
}).then(res => {
this.payMode = res.data.data
})
}
},
props: {
orderCode: {
type: String,
default: ''
},
money: {
type: String,
default: ''
},
payType: { //支付类型 订单支付,优惠券支付
type: String,
default: 'order'
},
couponData: { //优惠券参数
type: Object,
default: () => {}
}
}
}
</script>
<style scoped>
.pay-box {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 9999;
background: #fff;
border-top: 2px solid #eee;
padding: 0 30px;
box-sizing: border-box;
padding-bottom: 60px;
}
.p-item {
display: flex;
align-items: center;
/* padding: 30px 0; */
font-size: 28px;
height: 128px;
border-bottom: 2px solid #EAEAEA;
position: relative;
box-sizing: border-box;
}
.p-item img {
width: 63px;
height: 63px;
margin-right: 20px;
}
.p-item:last-child {
border: none;
}
.p-item::after {
position: absolute;
content: '';
width: 24px;
height: 24px;
border: 2px solid #BFBFBF;
top: 50px;
right: 30px;
transform: rotate(45deg);
border-left: 0;
border-bottom: 0;
}
.p-title {
color: #666;
font-size: 28px;
padding: 30px 0;
font-weight: 600;
}
.money {
text-align: center;
color: #000;
font-size: 42px;
font-weight: 600;
margin-top: 60px;
}
.m-tip {
text-align: center;
font-size: 26px;
color: #999;
margin-top: 10px;
margin-bottom: 30px;
}
.close {
position: absolute;
right: 30px;
top: 15px;
width: 42px;
height: 42px;
}
</style>
调用:
<button @click="payFun">去支付<buttom>
//money:支付金额 payType:支付类型(微信,支付宝) paySuccess:支付成功之后执行的方法
组件快:<pay ref="pay" :money="price" payType="coupon" @paySuccess="paySuccessFunc"></pay>
import pay from "components/payItem";
return {
price: "",
};
components: {
pay,
[Dialog.Component.name]: Dialog.Component
},
paySuccessFunc(res) {
//支付成功之后执行的代码块
},
payFun() {
this.$refs.pay.showPayItem();//出发组件方法
},