<template>
<div class="projectBox project_list">
<!-- 项目列表 -->
<basic-container class="projectManange">
<!-- <div class="recharge-title">充值</div> -->
<div class="rechange-main">
<div class="header">
<img class="law_logo" :src="userInfo.logo" alt="">
<p class="law_name">{{userInfo.title}}</p>
</div>
<div class="section">
<p class="lave-num">当前剩余(份)：{{printInfo.IntegralNum - printInfo.SignNum}}</p>
<ul class="recharge-list clearfix">
<li
v-for="(item,index) in rechargeWay"
:key="index"
:class="index == activeNo ? 'active_cl' : ''"
@click="changeWay(item,index)">{{item.label}}</li>
</ul>
<img class="way-img" :src="wayIcon" alt="">
<div class="recharge-form">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="电子章(份):">
<el-input v-model="form.copiesNum" size="small" style="300px"></el-input>
</el-form-item>
<el-form-item label="充值金额(元):">
<el-input v-model="rechargePrice" disabled size="small" style="300px"></el-input>
</el-form-item>
<el-form-item>
<div class="add-btn">
<el-button
size="small"
type="primary"
style="margin-left:100px"
@click="getOrder"
>充 值</el-button>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</basic-container>
<!-- 充值二维码 -->
<el-dialog
title=""
:visible.sync="rechargeCode"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="400px">
<div class="qrcode-dialog">
<p>请使用微信扫码支付</p>
<div id="qrcode" ref="qrcode"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="cancelRecharge">取消</el-button>
<el-button type="primary" size="small" @click="rechargeConfirm">完成支付</el-button>
</span>
</el-dialog>
<!-- 充值失败 -->
<el-dialog
title=""
:visible.sync="failDialog"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="400px">
<div class="result-dialog">
<img src="../../assets/electronic/ty1.png" alt="">
<p>本次充值失败！</p>
<p>请重新充值</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="renewRecharge">重新充值</el-button>
</span>
</el-dialog>
<!-- 充值成功 -->
<el-dialog
title=""
:visible.sync="successDialog"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="400px">
<div class="result-dialog">
<img src="../../assets/electronic/success.png" alt="">
<p>电子印章充值成功~</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="successRecharge">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import * as Api from "@/api/signature/index";
import QRCode from 'qrcodejs2';
import { GetOrganizetion } from "../../views/manage/organizetion/api/organizetion";
export default {
name: "recharge",
data() {
return {
rechargeWay:[
// {
// label:'支付宝支付',
// value:'0',
// icon:require('../../assets/electronic/alipay.png')
// },
{
label:'微信支付',
value:'1',
icon:require('../../assets/electronic/weixinpay.png')
}
],
activeNo:0,
// 选择支付宝，微信支付的图标
wayIcon:require('../../assets/electronic/weixinpay.png'),
// 充值的份数
form:{
copiesNum: 1,
},
rechargeCode:false,//充值成功弹框
failDialog:false,//失败弹窗
successDialog:false,//成功
printInfo:{
Price:0,
SignNum:0,
IntegralNum:0
},
orderId:'',//确认充值时的订单id
userInfo:{
title:'',
logo:''
}
}
},
created(){
// 获取用印剩余次数和价格
this.getPrintInfo();
},
computed:{
// 根据份数计算金额
rechargePrice(){
return this.form.copiesNum * this.printInfo.Price;
}
},
methods: {
// 选择支付方式
changeWay(item,index){
this.activeNo = index;
this.wayIcon = item.icon
},
// 获取用印剩余次数和价格
getPrintInfo(){
Api.LawSign().then((res )=> {
if(res.data.Code == 200){
this.printInfo = res.data.Data;
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 确认充值
getOrder(){
const _this = this;
const reg = /(^[1-9]d*$)/;
if(!reg.test(_this.form.copiesNum)){
_this.$message.error('请输入正确的充值份数');
return;
}
const param = {
orderPrice: _this.rechargePrice,
remark: "",
integralNum: _this.form.copiesNum
};
// 微信支付
Api.Order('',param).then((res)=> {
if(res.data.Code == 200){
_this.rechargeCode = true;
_this.orderId = res.data.Data.OrderUid;
_this.$nextTick(()=>{
document.getElementById('qrcode').innerHTML = "";
_this.qrcode(res.data.Data.Url);
})
}else{
_this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error',
});
}
}).catch((error)=>{
if(error.data.Code == 400){
_this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
// 根据url生成二维码
qrcode(url) {
let qrcode = new QRCode('qrcode',{
240, // 设置宽度，单位像素
height: 240, // 设置高度，单位像素
text: url // 设置二维码内容或跳转地址
})
},
// 点击“确定”获取支付状态
rechargeConfirm(){
Api.OrderType(this.orderId).then((res )=> {
if(res.data.Code == 200){
if(res.data.Data.trade_state == 'SUCCESS'){
//充值成功
this.rechargeCode = false;
// 如果想要每次关闭的时候把二维码删掉 那么就在关闭的回调中 直接把div中的内容清空即
document.getElementById('qrcode').innerHTML = "";
// this.payCallBack(res.data.Data.transaction_id);
this.getPrintInfo();
this.successDialog = true;
}else{
// 充值失败
this.rechargeCode = false;
// document.getElementById('qrcode').innerHTML = "";
this.$alert(res.data.Data.trade_state_desc, '提示', {
confirmButtonText: '确定',
type: 'error',
callback: action => {
this.rechargeCode = true;
}
});
}
}else{
this.$alert(res.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
}).catch((error)=>{
if(error.data.Code == 400){
this.$alert(error.data.ShowData, '提示', {
confirmButtonText: '确定',
type: 'error'
});
}
});
},
cancelRecharge(){
this.rechargeCode = false;
document.getElementById('qrcode').innerHTML = "";
},
// 成功回调
// payCallBack(transaction_id){
// const param = {
// xml:transaction_id,
// OrderUid:this.orderId
// }
// Api.ChangeOrder(param).then((res)=> {
// if(res.data.Code == 200){
// }else{
// _this.$message.error(res.data.ShowData);
// }
// });
// },
// 重新充值
renewRecharge(){
this.failDialog = false;
},
successRecharge(){
this.successDialog = false;
}
},
mounted(){
GetOrganizetion().then(res => {
this.userInfo.title = res.data.Data.Name;
this.userInfo.logo = res.data.Data.IconUrl;
})
}
};
</script>
<style scoped lang="scss">
.recharge-title{
padding: 10px 0 20px 60px;
font-size: 14px;
color: #453E9A;
font-weight: bold;
border-bottom: 2px solid #EBEEF5;
box-shadow:0px 0px 12px 0px rgba(12,4,8,0.04);
}
.rechange-main{
600px;
margin: 0 auto;
.header{
text-align: center;
margin: 41px 0;
.law_logo{
98px;
height: 98px;
border-radius: 50%;
}
.law_name{
font-size: 16px;
color: #2A2B2F;
line-height: 20px;
margin: 15px 0 0 0;
font-weight: bold;
letter-spacing: 2px;
}
}
.section{
text-align: center;
.lave-num{
color: #2A2B2F;
padding-left: 14px;
text-align: left;
}
.recharge-list{
padding: 0;
li{
float: left;
list-style: none;
160px;
height:60px;
line-height: 60px;
text-align: center;
letter-spacing: 1px;
color: #82849D;
cursor: pointer;
font-weight: 600;
}
.active_cl{
background:rgba(69,62,154,0.1);
color: #453E9A;
}
}
.way-img{
height: 40px;
margin: 30px 0 16px 0;
}
.recharge-form{
margin-left: 60px;
text-align: left;
}
}
}
.qrcode-dialog{
text-align: center;
#qrcode{
padding: 20px 60px;
}
}
.result-dialog{
text-align: center;
p{
color: #0E0E0E;
font-size: 16px;
font-weight: 600;
}
}
.dialog-footer{
.el-button{
margin: 0 16px;
}
}
</style>