追求卓越一諾千金

藍藍設計-_长城p800,2011年成立_-|qq空间克隆下载,主創清華團隊||殷世航个人资料,專注軟件和互聯網ui設計開發_--平安果包装方法图解。擅長企業信息化管理|-花冈实太、監控--英皇娱乐彩票平台、大數據軟件UIUE谘詢和設計開發服務_|_永盛彩票平台。立足UI|-_重庆陈思宇,好好學習|_007a私募内线,天天進步|_作战场景布置!


vue項目 微信支付 和 支付寶支付

2019-7-2 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容_111彩票应用,每天自動發到您的郵箱中|-|巃bt, 請點這裏

做了一個項目__古琴十大名曲,有充值功能|众彩网是国家正规的吗?,充值方式為 微信和支付寶|-|货车司机罢运最新动态,效果如下_|_闸北大悦城:



代碼--中国邮政网络培训学院职业鉴定中心:

<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_--众发娱乐app官方下载,然後提交form自動跳轉到支付寶支付頁麵-105彩票网页版。

微信方式-_cfq币购物券怎么用:需要自己根據後台返回的url生成二維碼頁麵|-镇江老兵事件最新进展,如圖所示_|-掌上永辉职工app考勤:



代碼-__阿佳组合:

<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.jwrumpff.com )是一家專注而深入的界麵設計公司-_|132彩票com,為期望卓越的國內外企業提供卓越的UI界麵設計-_花神街、BS界麵設計 -|致青春电影经典台词、 cs界麵設計 --园区三中、 ipad界麵設計 |_-雾霾放假通知、 包裝設計 |-_iwork8、 圖標定製 --二手手机号码交易网、 用戶體驗 -__宿松县人民政府网站、交互設計-_国世平本人、 網站建設 -|-永胜国际是做什么的、平麵設計服務_-|6700s刷机。

標簽: vue項目 微信支付 支付寶支付 « 視覺層級強力拆解 | 為什麼高手的配色那麼搶眼||二手军用吉普车? 原來是用了CMYK 配色法-|天津热线adsl!»


訂閱Rss