追求卓越一諾千金

藍藍設計---水族之家zadull,2011年成立|-仲博彩票黑过钱吗,主創清華團隊__315投诉有用吗,專注軟件和互聯網ui設計開發--|短号怎么查长号。擅長企業信息化管理-_全球鹰熊猫怎么样、監控-|保定38军、大數據軟件UIUE谘詢和設計開發服務_|_尊龙娱乐人现金。立足UI--大成基金2020,好好學習-_|哈尔滨断桥,天天進步-|-注册送168彩金!


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

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


如果您想訂閱本博客內容--如何在拍拍上开店,每天自動發到您的郵箱中__上海闹市裸拍女下载, 請點這裏

做了一個項目-|胡梦舟,有充值功能|_注册反现金app,充值方式為 微信和支付寶|||手机qq2009,效果如下_--132彩票app:



代碼-|撒旦缠爱:

<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.jwrumpff.com )是一家專注而深入的界麵設計公司-|_深圳第一现场网站,為期望卓越的國內外企業提供卓越的UI界麵設計|-|038彩票首页、BS界麵設計 ||_娱乐天地彩票平台、 cs界麵設計 |小型玉米深加工项目、 ipad界麵設計 -陈文祥、 包裝設計 ||易网彩票开奖下载、 圖標定製 |_|365彩票买不了怎么回事、 用戶體驗 _|_3721助手、交互設計至尊无名、 網站建設 |-康鸥移动电源怎么样、平麵設計服務|_-135彩票平台官网。

標簽: vue項目 微信支付 支付寶支付 « 視覺層級強力拆解 | 為什麼高手的配色那麼搶眼_-陈奎元? 原來是用了CMYK 配色法||-抓住偷水贼!»


訂閱Rss