添加支付宝支付

feature/zfbpay-0629-ch
ch 2 years ago
parent 5864830b29
commit 60b1f0be39

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

@ -2,32 +2,43 @@
* @Author: ch
* @Date: 2022-05-08 00:39:50
* @LastEditors: ch
* @LastEditTime: 2022-06-15 16:40:14
* @LastEditTime: 2022-06-29 15:34:08
* @Description: file content
-->
<template>
<el-dialog title="打开微信扫描付款" width="380px" class="box" center
<el-dialog :title="title" width="380px" class="box" center
:visible.sync="myVisible" @open="open" @close="close" :modal="false">
<div class="pay">
<div class="pay-type" v-if="!myPayType">
<el-radio-group v-model="myPayType">
<el-radio label="wx" class="pay-type--item" >
<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
</el-radio>
<el-radio label="zfb" class="pay-type--item" >
<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
</el-radio>
</el-radio-group>
</div>
<div class="pay" v-else>
<span class="pay--timer">{{timerTxt}}</span>
<UiMoney class="money" sufSize="14px" preSize="14px" size="20px"
float suffix prefix :money="orderInfo.payAmount"/>
<div class="pay--code">
<img :src="imgUrl" v-if="imgUrl"/>
<!-- <p v-if="!timer"></p> -->
</div>
<p class="pay--tips">如支付后没有自动跳转请点击 <span class="pay--finish" @click="finish"></span></p>
<UiButton class="pay--btn" type='yellow_gradual' @click="myPayType = null">其他支付方式</UiButton>
</div>
</el-dialog>
</template>
<script>
import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
import {ApiPostWxPayCdoeImg, ApiPostZfbPayCdoeImg} from '@/plugins/api/pay'
import {ApiGetOrderDetail} from '@/plugins/api/order'
import UiMoney from './UiMoney.vue';
import UiButton from './UiButton.vue';
import QRcode from 'qrcode';
export default {
components: { UiMoney },
components: { UiMoney, UiButton },
props : {
visible : {
type : Boolean,
@ -36,6 +47,10 @@ export default {
orderId : {
type : Number | String,
default : ''
},
payType:{
type : String | null,
require : true
}
},
data(){
@ -45,6 +60,7 @@ export default {
timerTxt : '',
startSecondNum : 0,
timerStop : null,
myPayType : null
}
},
computed:{
@ -55,12 +71,25 @@ export default {
set(val){
this.$emit('update:visible', val)
}
},
title(){
let str = '请选择支付方式';
if(this.myPayType === 'wx'){
str = '打开微信扫描付款';
}else if(this.myPayType === 'zfb'){
str = '打开支付宝扫描付款';
};
return str;
}
},
methods : {
open(){
this.getOrderInfo();
this.getCodeImg();
this.myPayType = this.payType;
if(this.myPayType){
this.getQrCode();
}
},
/**
* 获取订单最新信息
@ -82,8 +111,32 @@ export default {
}
},
async getCodeImg(){
const {error, result} = await ApiPostPayCdoeImg({orderId : this.orderId});
getQrCode(){
if(this.myPayType == 'wx'){
this.getWxCodeImg();
}else if(this.myPayType === 'zfb'){
this.getZfbCodeImg();
}
},
/**
* 支付宝二维码
*/
async getZfbCodeImg(){
const {error, result} = await ApiPostZfbPayCdoeImg({orderId : this.orderId});
if(error){
return false;
}
QRcode.toDataURL(result.payDataInfo.qrCodeData,{
width : 200
}, (err, url)=>{
this.imgUrl = url;
})
},
/**
* 微信二维码
*/
async getWxCodeImg(){
const {error, result} = await ApiPostWxPayCdoeImg({orderId : this.orderId});
if(error){
return false;
}
@ -123,6 +176,7 @@ export default {
close(){
clearInterval(this.timerStop);
this.timerStop = null;
this.myPayType = this.payType;
this.$emit('cancel');
},
finish(){
@ -136,6 +190,25 @@ export default {
.box{
background: rgba(0,0,0, .5);
}
.pay-type{
width: 270px;
padding: 0 30px;
&--item{
width: 270px;
height: 56px;
display: flex;
align-items: center;
border: 1px solid #ccc;
padding-left: 55px;
margin-bottom: 20px;
}
&--wx{
width: 108px;
}
&--zfb{
width: 78px;
}
}
.pay{
text-align: center;
&--code{
@ -163,6 +236,12 @@ export default {
color: #FF512B;
cursor: pointer;
}
&--btn{
border-radius: 4px;
width: 143px;
height: 32px;
margin-top: 20px;
}
}
.money{
color: #FF512B;

@ -2,7 +2,7 @@
* @Author: ch
* @Date: 2022-05-04 17:30:58
* @LastEditors: ch
* @LastEditTime: 2022-05-27 19:54:39
* @LastEditTime: 2022-06-29 15:39:44
* @Description: file content
-->
@ -12,11 +12,17 @@
<h3 class="title">收货地址</h3>
<BsAddress v-model="address"/>
</template>
<!-- <h3 class="title">支付方式</h3>
<h3 class="title">支付方式</h3>
<div class="pay-type">
<el-radio label="微信支付" />
<el-radio label="支付宝支付" />
</div> -->
<el-radio-group v-model="payType">
<el-radio label="wx" >
<img class="pay-type--wx" src="@/assets/img/order/wx.png"/>
</el-radio>
<el-radio label="zfb" >
<img class="pay-type--zfb" src="@/assets/img/order/zfb.png"/>
</el-radio>
</el-radio-group>
</div>
<h3 class="title">确认商品信息</h3>
<OrderInfo :products="orderInfo.products" />
<Message :orderInfo="orderInfo" :message.sync="userMessage"/>
@ -24,7 +30,7 @@
<div class="pay">
<UiButton radius type="red_panel" @click="submit"></UiButton>
</div>
<BsPay :visible.sync="payVisible" :orderId="payOrder.orderId"
<BsPay :visible.sync="payVisible" :payType="payType" :orderId="payOrder.orderId"
@cancel="cancelPay" @finish="finishPay" />
</div>
</template>
@ -45,6 +51,7 @@ export default {
orderInfo : {},
userMessage : '',
payOrder : {},
payType : 'wx',
payVisible : false,
payTimerTxt : '',
payTimerStop : null,
@ -165,6 +172,12 @@ export default {
.pay-type{
border: 1px solid #DDDDDD;
padding: 30px 70px;
&--wx{
width: 130px;
}
&--zfb{
width:92px
}
}
.pay{
text-align: right;

@ -0,0 +1,26 @@
/*
* @Author: ch
* @Date: 2022-05-08 00:44:22
* @LastEditors: ch
* @LastEditTime: 2022-06-29 14:51:00
* @Description: file content
*/
import {axiosTk} from "../axiosTk";
import {ToAsyncAwait} from "@/plugins/utils";
import ENV from '../config/env';
const BASE_URL = `${ENV.base_url}/mall/trade`;
/**
* 获取微信支付二维码
* @param {*} data
*/
export const ApiPostWxPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
/**
* 获取支付宝支付二维码
* @param {*} data
*/
export const ApiPostZfbPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/aliPay/qr`, data));

@ -1,17 +0,0 @@
/*
* @Author: ch
* @Date: 2022-05-08 00:44:22
* @LastEditors: ch
* @LastEditTime: 2022-06-15 15:07:13
* @Description: file content
*/
import {axiosTk} from "../axiosTk";
import {ToAsyncAwait} from "@/plugins/utils";
import ENV from '../config/env';
const BASE_URL = `${ENV.base_url}/mall/trade`;
export const ApiPostPayCdoeImg = (data) =>
ToAsyncAwait(axiosTk.post(`${BASE_URL}/payCenter/wxPay/nativeData`, data));
Loading…
Cancel
Save