vue项目 微信支付 和 支付宝支付 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue项目 微信支付 和 支付宝支付

2019-7-2 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

做了一个项目,有充值功能,充值方式为 微信和支付宝,效果如下:



代码:

<template>
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>我要充值</h4>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值金额</h4>
<el-radio-group v-model="amountVal" @change="amountChange">
<el-radio border :label="''+ 100">充值100</el-radio>
<el-radio border :label="''+ 500">充值500</el-radio>
<el-radio border :label="''+ 1000">充值1000</el-radio>
<el-radio border :label="''+ 2000">充值2000</el-radio>
<el-radio border :label="''+ 5000">充值5000</el-radio>
<el-radio border :label="''">自定义</el-radio>
</el-radio-group>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值方式</h4>
<el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
<el-radio border :label="''+ 0">微信</el-radio>
<el-radio border :label="''+ 1">支付宝</el-radio>
</el-radio-group>
</li>
<li>
<h4 style="margin-bottom: 15px;">充值金额</h4>
<el-input :disabled="disabled" clearable v-model="rechargeParams.totalAmt" placeholder="请输入金额" style="width: 150px;"></el-input>
</li>
</ul>
<div style="text-align: center; margin-top: 30px;">
<el-button type="primary" @click="surePay">确认支付</el-button>
</div>
</el-card>
</template>
 
<script>
export default {
data() {
return {
amountVal: '',
disabled: false,
//充值参数
rechargeParams: {
"totalAmt": '', //金额
"paymentType": "0", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
"transType": "0" //交易类型[0:充值,1:消费]
}
}
},
methods: {
//充值金额
amountChange(val) {
this.rechargeParams.totalAmt = val;
if (val == '') {
this.disabled = false
} else {
this.disabled = true
}
},
//支付方式
paymentTypeChange(val) {
this.rechargeParams.paymentType = val
},
//确认支付
async surePay() {
if (this.rechargeParams.totalAmt == '') {
this.$message.warning('请输入金额');
return;
}
const res = await this.$http.post('orderInfo/createOrderInfo', this.rechargeParams)
const {
code,
msg,
result
} = res.data
if (code === '200') {
//支付方式跳转
if (this.rechargeParams.paymentType == '0') {
this.$message.success('微信支付');
this.wechatPay(result);
} else if (this.rechargeParams.paymentType == '1') {
this.$message.success('支付宝支付')
const payDiv = document.getElementById('payDiv');
if (payDiv) {
document.body.removeChild(payDiv);
}
const div = document.createElement('div');
div.id = 'payDiv';
div.innerHTML = result;
document.body.appendChild(div);
document.getElementById('payDiv').getElementsByTagName('form')[0].submit();
} else if (this.rechargeParams.paymentType == '2') {
this.$message.success('余额支付成功');
this.$router.push({
name: 'order'
})
} else {
this.$message.success('活动支付')
}
} else if (code === 401) {
this.$message.error(msg)
this.$router.push({
name: 'login'
})
} else {
this.$message.error(msg)
}
},
//微信支付
wechatPay(result) {
if (result) {
const orderParams = JSON.parse(result);
sessionStorage.qrurl = orderParams.qrurl;
sessionStorage.amt = orderParams.amt;
sessionStorage.returnUrl = orderParams.returnUrl;
sessionStorage.order_id = orderParams.order_id;
this.$router.push({
name: 'wechatPay'
})
}
}
}
}
</script>
 
<style scoped>
/* 信息列表样式 */
.msg-box > li {
list-style: none;
border-bottom: 1px solid #c5c5c5;
padding: 20px 10px;
}
</style>
支付宝方式:后台会返回来一个form,然后提交form自动跳转到支付宝支付页面。

微信方式:需要自己根据后台返回的url生成二维码页面,如图所示:



代码:

<template>
<div class="payBox">
<div class="img-logo">
<img src="http://img.huoxingbeidiao.com/public/WePayLogo.png" alt="">
</div>
<div class="info-box">
<div style="padding-bottom: 20px;">
<qrcode-vue :value="qrurl" :size="200" level="H"></qrcode-vue>
</div>
<img src="http://img.huoxingbeidiao.com/public/WePayInfo.png" alt="">
<p class="price">¥&nbsp;{{amt}}</p>
</div>
</div>
</template>
 
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data() {
return {
amt: 0,
qrurl: '',
timer: null
}
},
components: {
QrcodeVue
},
methods: {
getOrderInfo() {
if (sessionStorage.qrurl && sessionStorage.amt) {
this.qrurl = sessionStorage.qrurl;
this.amt = sessionStorage.amt;
}
},
startLoop() {
this.timer = setInterval(() => {
this.isPaySuccess()
}, 3000)
},
async isPaySuccess() {
const orderId = sessionStorage.order_id;
const res = await this.$http.get('orderInfo/queryOrder?orderId=' + orderId)
const {
code,
msg,
resultList
} = res.data
if (code === '200') {
clearInterval(this.timer);
this.timer = null;
sessionStorage.removeItem('qrurl');
sessionStorage.removeItem('amt');
sessionStorage.removeItem('order_id');
sessionStorage.removeItem('returnUrl');
setTimeout(() => {
this.$router.push({
name: 'order'
})
}, 3000)
} else if (code === 401) {
clearInterval(this.timer);
this.timer = null;
sessionStorage.removeItem('qrurl');
sessionStorage.removeItem('amt');
sessionStorage.removeItem('order_id');
sessionStorage.removeItem('returnUrl');
this.$message.error(msg)
this.$router.push({
name: 'login'
})
} else {
 
}
}
},
created() {
this.getOrderInfo()
this.startLoop()
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
}
}
</script>
 
<style scoped>
.payBox {
width: 1000px;
margin: 0 auto;
}
 
.payBox .img-logo {
padding: 20px 0;
text-align: center;
}
 
.payBox .img-logo img {
width: 180px;
}
 
.info-box {
padding: 60px 0;
border-top: 3px solid #F43B66;
-webkit-box-shadow: 0 0 32px 0 rgba(0, 0, 0, .18);
box-shadow: 0 0 32px 0 rgba(0, 0, 0, .18);
text-align: center;
}
 
.info-box .price {
color: #F43B66;
font-size: 40px;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
}
</style>
需要安装qrcode.vue

npm install --save qrcode.vue  或  yarn add qrcode.vue
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: vue项目 微信支付 支付宝支付 « 视觉层级强力拆解 | 为什么高手的配色那么抢眼? 原来是用了CMYK 配色法!»


蓝蓝 http://www.bjhbys.com

  1. 2020年1月(11)
  2. 2019年12月(50)
  3. 2019年11月(61)
  4. 2019年10月(49)
  5. 2019年9月(48)
  6. 2019年8月(58)
  7. 2019年7月(58)
  8. 2019年6月(58)
  9. 2019年5月(31)
  10. 2019年4月(37)
  11. 2019年3月(43)
  12. 帝皇彩票官网2019年2月(25)
  13. 2019年1月(45)
  14. 2018年12月(41)
  15. 2018年11月(40)
  16. 2018年10月(29)
  17. 2018年9月(40)
  18. 2018年8月(87)
  19. 2018年7月(107)
  20. 2018年6月(86)
  21. 2018年5月(110)
  22. 2018年4月(40)
  23. 2018年3月(35)
  24. 2017年8月(35)
  25. 2017年7月(45)
  26. 2017年6月(7)
  27. 2017年5月(27)
  28. 2017年4月(51)
  29. 2017年3月(70)
  30. 2017年2月(65)
  31. 2017年1月(69)
  32. 帝皇彩票官网2016年12月(55)
  33. 帝皇彩票官网2016年11月(111)
  34. 2016年10月(92)
  35. 2016年9月(53)
  36. 2016年8月(9)
  37. 2016年7月(4)
  38. 2016年6月(9)
  39. 2016年3月(19)
  40. 2016年2月(26)
  41. 2016年1月(30)
  42. 2015年12月(33)
  43. 2015年11月(35)
  44. 2015年10月(46)
  45. 2015年9月(43)
  46. 2015年8月(40)
  47. 2015年7月(33)
  48. 2015年6月(46)
  49. 2015年5月(58)
  50. 2015年4月(70)
  51. 2015年3月(55)
  52. 2015年2月(17)
  53. 2015年1月(33)
  54. 2014年12月(21)
  55. 2014年11月(84)
  56. 2014年10月(94)
  57. 2014年9月(6)
  58. 2014年8月(1)
  59. 2014年7月(13)
  60. 2014年6月(66)
  61. 2014年5月(99)
  62. 2014年4月(88)
  63. 帝皇彩票官网2014年3月(102)
  64. 2014年2月(68)
  65. 2014年1月(83)
  66. 帝皇彩票官网2013年12月(106)
  67. 帝皇彩票官网2013年11月(112)
  68. 2013年10月(61)
  69. 2013年9月(20)
  70. 2013年7月(13)
  71. 2013年6月(27)
  72. 2013年5月(48)
  73. 2013年4月(39)
  74. 2013年3月(8)
  75. 2013年2月(20)
  76. 2013年1月(31)
  77. 2012年12月(33)
  78. 2012年11月(31)
  79. 2012年10月(23)
  80. 2012年9月(8)
  81. 2012年7月(14)
  82. 帝皇彩票官网2012年6月(15)
  83. 2012年5月(31)
  84. 2012年4月(24)
  85. 2012年2月(4)
  86. 2012年1月(8)
  87. 2011年12月(35)
  88. 2011年11月(32)
  89. 2011年10月(13)
  90. 2011年8月(1)
  91. 2011年6月(1)
订阅Rss
吉利彩票开户 亚洲彩票 博发彩票登陆 帝皇彩票官网北京赛车pk10赔率最高的平台 博发彩票开户 状元彩票开奖 桔子彩票网址 帝皇彩票官网 诚信网投开户 广西快3走势