<template>
|
<div class="wrapper" style="
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
">
|
<form id="pay_form" action="https://zf.flyotcpay.com/payment/" method="post">
|
<input type="hidden" name="merchantid" v-model="formDate.merchantid" />
|
<input type="hidden" name="orderno" v-model="formDate.orderno" />
|
<input type="hidden" name="orderamount" v-model="formDate.orderamount" />
|
<input type="hidden" name="paytype" v-model="formDate.paytype" />
|
<input type="hidden" name="ordercurrency" v-model="formDate.ordercurrency" />
|
<input type="hidden" name="serverbackurl" v-model="formDate.serverbackurl" />
|
<input type="hidden" name="callbackurl" v-model="formDate.callbackurl" />
|
<input type="hidden" name="signtype" v-model="formDate.signtype" />
|
<input type="hidden" name="sign" v-model="formDate.sign" />
|
</form>
|
<form id="payh5_form" :action="formh5Date.url" method="post" content-type="application/x-www-form-urlencoded">
|
<input type="hidden" name="app_id" v-model="formh5Date.app_id" />
|
<input type="hidden" name="out_order_sn" v-model="formh5Date.out_order_sn" />
|
<input type="hidden" name="name" v-model="formh5Date.name" />
|
<input type="hidden" name="pay_way" v-model="formh5Date.pay_way" />
|
<input type="hidden" name="price" v-model="formh5Date.price" />
|
<input type="hidden" name="notify_url" v-model="formh5Date.notify_url" />
|
<input type="hidden" name="sign" v-model="formh5Date.sign" />
|
</form>
|
|
<div class="chongzhi-cont" style="display: flex;justify-content: center;">
|
<div style="width:100%">
|
<el-form :hide-required-asterisk="true" :model="form" label-width="90px" ref="ruleForm" :rules="rule"
|
class="demo-form-inline">
|
<div style="width:80%" class="left">
|
<div class="chongzhi-img">
|
<img src="../../../../assets/image/chongzhi.png" v-if="color == 'black-bg'" alt />
|
<img src="../../../../assets/image/chongzhi1.png" v-if="color == 'red-bg'" alt />
|
</div>
|
<div class="chongzhi-input">
|
<span>充值金额：</span>
|
<el-input v-model="form.amt" type="number" placeholder="最小充值金额为100元"></el-input>
|
</div>
|
<div class="chongzhi-type">
|
<span>充值类型:</span>
|
<div class="chongzhi-type-item" v-for="i in optionsPay" @click="changType(i)" :key="i.key">
|
<el-radio v-model="form.id" name="type" :label="i.id">{{ i.channelType }}</el-radio>
|
</div>
|
|
<!-- <div
|
class="chongzhi-type-item"
|
v-for="i in optionsPay"
|
@click="changType(i)"
|
:key="i.key"
|
>
|
<el-radio v-model="form.id" name="type" :label="i.id">{{i.channelType}}</el-radio>
|
</div>-->
|
<!-- <el-radio v-model="chongzhiRadio" label="1">银行卡</el-radio>
|
<el-radio v-model="chongzhiRadio" label="2">微信</el-radio>
|
<el-radio v-model="chongzhiRadio" label="3">支付宝</el-radio>-->
|
</div>
|
<div class="xianshi-cont">
|
<div>
|
<div v-if="form.type === 0">
|
<el-form-item label="支付宝名称" prop="name">
|
<el-input disabled class="cope-input chongzhi-input1" type="text" v-model="info.channelName"
|
placeholder="支付宝名称"></el-input>
|
<span class="copy-btn" v-clipboard:copy="info.channelName" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-form-item label="支付宝账号" prop="name">
|
<el-input disabled class="cope-input chongzhi-input1" type="text" v-model="info.channelAccount"
|
placeholder="支付宝账号"></el-input>
|
<span class="copy-btn chongzhi-input1" v-clipboard:copy="info.channelAccount"
|
v-clipboard:success="onCopy" v-clipboard:error="onError">
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-row>
|
<el-button type="text" @click="toLook">查看支付宝限额说明</el-button>
|
</el-row>
|
</div>
|
<div v-else-if="form.type === 1">
|
<el-form-item label="收款银行" prop="name">
|
<el-input disabled type="text" class="chongzhi-input1" v-model="info.channelDesc"
|
placeholder="收款名称"></el-input>
|
</el-form-item>
|
<el-form-item label="收款名称" prop="name">
|
<el-input disabled class="cope-input chongzhi-input1" type="text" v-model="info.channelName"
|
placeholder="收款账号"></el-input>
|
<span class="copy-btn" v-clipboard:copy="info.channelName" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-form-item label="收款账号" prop="name">
|
<el-input disabled class="cope-input chongzhi-input1" type="text" v-model="info.channelAccount"
|
placeholder="收款账号"></el-input>
|
<span class="copy-btn" v-clipboard:copy="info.channelAccount" v-clipboard:success="onCopy"
|
v-clipboard:error="onError">
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
|
</div>
|
<div v-if="form.type === 0 && info.channelImg" class="pay-box text-center"
|
style="display: flex;justify-content: center;margin-left: 40px;">
|
<img class="eq-code" :src="info.channelImg" alt />
|
</div>
|
</div>
|
|
<div>
|
|
</div>
|
</div>
|
<div class="chongzhi-btn-cont" @click="chongzhi">
|
<div class="chongzhi-btn">充值</div>
|
</div>
|
</div>
|
</el-form>
|
|
<div class="chongzhi-bizhi">
|
<div class="chongzhi-bizhi-cont">
|
<div>入金须知</div>
|
<div class="chongzhi-item">
|
<span class="circle">1</span>
|
<span>点击“点击去充值”,跳转到支付页面;</span>
|
</div>
|
<div class="chongzhi-item">
|
<span class="circle">2</span>
|
<span>打开手机扫描完成支付。</span>
|
</div>
|
<div class="chongzhi-item">
|
<span class="circle">3</span>
|
<span>由于支付收款上限限制，每次收款公户可能不一样，请每次充值前获取最新的二维码完成支付。</span>
|
</div>
|
<div class="chongzhi-item">
|
<span class="circle">4</span>
|
<span>充值默认充值在股票账户中，如需充值指数账户可从股票账户转入至指数账户。</span>
|
</div>
|
</div>
|
<div class="right">
|
<img src="../../../../assets/image/youqingtishi.png" v-if="color == 'black-bg'" alt />
|
<img src="../../../../assets/image/youqingtishi1.png" v-if="color == 'red-bg'" alt />
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog title="支付宝限额说明" :visible.sync="dialogVisible" width="30%">
|
<div class="text-center">
|
<img width="100%" src="../../../../assets/image/xiane.png" alt />
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- <el-row :gutter="10">
|
<el-col :span="14">
|
<div>
|
<el-form
|
:hide-required-asterisk="true"
|
:model="form"
|
label-width="90px"
|
ref="ruleForm"
|
:rules="rule"
|
class="demo-form-inline"
|
>
|
<el-form-item label="充值金额" prop="amt">
|
<el-input type="text" v-model="form.amt" placeholder="请输入充值金额"></el-input>
|
<p>最小充值金额为{{this.settingInfo.chargeMinAmt}}元</p>
|
</el-form-item>
|
|
<el-form-item label="充值类型" prop="idCard">
|
<div class="radio-btn" v-for="i in optionsPay" @click="changType(i)" :key="i.key">
|
<el-radio v-model="form.id" name="type" :label="i.id">{{i.channelType}}</el-radio>
|
</div>
|
</el-form-item>
|
<div v-if="form.type === 0">
|
<el-form-item label="支付宝名称" prop="name">
|
<el-input
|
disabled
|
class="cope-input"
|
type="text"
|
v-model="info.channelName"
|
placeholder="支付宝名称"
|
></el-input>
|
<span
|
class="copy-btn"
|
v-clipboard:copy="info.channelName"
|
v-clipboard:success="onCopy"
|
v-clipboard:error="onError"
|
>
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-form-item label="支付宝账号" prop="name">
|
<el-input
|
disabled
|
class="cope-input"
|
type="text"
|
v-model="info.channelAccount"
|
placeholder="支付宝账号"
|
></el-input>
|
<span
|
class="copy-btn"
|
v-clipboard:copy="info.channelAccount"
|
v-clipboard:success="onCopy"
|
v-clipboard:error="onError"
|
>
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-row>
|
<el-button type="text" @click="toLook">查看支付宝限额说明</el-button>
|
</el-row>
|
</div>
|
<div v-else-if="form.type === 1">
|
<el-form-item label="收款银行" prop="name">
|
<el-input disabled type="text" v-model="info.channelDesc" placeholder="收款名称"></el-input>
|
</el-form-item>
|
<el-form-item label="收款名称" prop="name">
|
<el-input
|
disabled
|
class="cope-input"
|
type="text"
|
v-model="info.channelName"
|
placeholder="收款账号"
|
></el-input>
|
<span
|
class="copy-btn"
|
v-clipboard:copy="info.channelName"
|
v-clipboard:success="onCopy"
|
v-clipboard:error="onError"
|
>
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
<el-form-item label="收款账号" prop="name">
|
<el-input
|
disabled
|
class="cope-input"
|
type="text"
|
v-model="info.channelAccount"
|
placeholder="收款账号"
|
></el-input>
|
<span
|
class="copy-btn"
|
v-clipboard:copy="info.channelAccount"
|
v-clipboard:success="onCopy"
|
v-clipboard:error="onError"
|
>
|
<i class="iconfont icon-fuzhi"></i>复制
|
</span>
|
</el-form-item>
|
</div>
|
|
</el-form>
|
<div v-if="form.type === 0 && info.channelImg" class="pay-box text-center">
|
<img class="eq-code" :src="info.channelImg" alt />
|
</div>
|
|
<div v-if="form.type != 2" slot="footer" class="text-center dialog-footer">
|
<el-button type="primary" :loading="isloading" @click="tosubmit('ruleForm')">我已转账，通知管理员</el-button>
|
</div>
|
<div v-else slot="footer" class="text-center dialog-footer">
|
<el-button
|
type="primary"
|
style="width:200px;"
|
:loading="isloading"
|
@click="tosubmit('ruleForm')"
|
>充值</el-button>
|
</div>
|
<div slot="footer" class="text-center dialog-footer"></div>
|
</div>
|
</el-col>
|
<el-col :span="10">
|
<div v-if="form.type === 0">
|
<div class="tips-group">
|
<p>
|
<i class="iconfont icon-jinggao1"></i>注意事项：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou"></i>由于支付收款上限限制，每次收款公户可能不一样，
|
<span class="red">请每次充值前获取最新的二维码完成支付</span>
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou3"></i>如果您的网络环境不稳定，或由于设备、环境、偏好、行为、关系、账户、身份等维度问题，
|
<span class="red">可能导致支付宝风控系统提示风险，请您在安全的环境下发起支付</span>
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou2"></i>为确保入金及时到账，
|
<span class="red">请确认您输入的金额和提交的充值金额一致</span>.
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou1"></i>受支付宝到账通知时间影响,入金时间到账时间可能会延迟，请耐心等待.
|
</p>
|
</div>
|
<div v-if="false" class="tips-group">
|
<p>
|
<i class="iconfont icon-liucheng"></i>充值方式：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou"></i>将二维码保存到本地，打开支付宝扫描二维码，转账到平台指定对公账户
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou2"></i>点击“复制”，复制支付宝账号，打开支付宝点击转账，转账到平台指定对公账户
|
</p>
|
</div>
|
</div>
|
<div v-else-if="form.type === 1">
|
<div class="tips-group">
|
<p>
|
<i class="iconfont icon-liucheng"></i>操作流程：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou"></i>点击“复制”，复制信息
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou2"></i>完成复制，打开手机银行进行转账
|
</p>
|
</div>
|
<div class="tips-group red">
|
<p>
|
<i class="iconfont icon-jinggao1"></i>注意事项：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou"></i>为确保入金及时到账，请确认您输入的金额和提交的充值金额一致.
|
</p>
|
</div>
|
</div>
|
<div v-else>
|
<div class="tips-group">
|
<p>
|
<i class="iconfont icon-liucheng"></i>操作流程：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou"></i>点击“点击去充值”，跳转到支付页面
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-buzhou2"></i>打开手机扫码完成支付
|
</p>
|
</div>
|
<div class="tips-group red">
|
<p>
|
<i class="iconfont icon-jinggao1"></i>注意事项：
|
</p>
|
<p class="tip-text">
|
<i class="iconfont icon-jingpaibuzhou"></i>由于支付收款上限限制，每次收款公户可能不一样，
|
<span class="red">请每次充值前获取最新的二维码完成支付</span>
|
</p>
|
</div>
|
</div>
|
<div v-show="form.type === 1" class="pay-box text-center">
|
</div>
|
</el-col>
|
</el-row>
|
<div class="attention">
|
<p>注意: 充值默认充值在股票账户中,如需充值指数账户可从股票账户转入至指数账户 。</p>
|
</div>
|
<el-dialog title="支付宝限额说明" :visible.sync="dialogVisible" width="30%">
|
<div class="text-center">
|
<img width="100%" src="../../../../assets/image/xiane.png" alt />
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog :title="info.channelName" :visible.sync="payh5status" width="30%">
|
<div class="text-center" style="width:200px;margin: auto;" id="qrcode" ref="qrcode"></div>
|
<div class="scan">
|
<span v-if="info.formCode == 1">打开支付宝扫一扫</span>
|
<span v-if="info.formCode == 3">打开微信扫一扫</span>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="payh5status = false">取 消</el-button>
|
<el-button type="primary" @click="payh5status = false">充值完成</el-button>
|
</span>
|
</el-dialog>-->
|
</div>
|
</template>
|
|
<script>
|
import * as api from "../../../../axios/api";
|
import QRCode from "qrcodejs2";
|
import { mapState } from "vuex";
|
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
chongzhiRadio: "1",
|
input: "",
|
formData: {},
|
dialogVisible: false,
|
isloading: false,
|
optionsPay: [
|
{
|
channelAccount: "其他账号",
|
channelDesc: "备注",
|
channelImg: "",
|
channelMaxLimit: 10000,
|
channelMinLimit: 1000,
|
channelName: "其他公司",
|
channelType: "支付宝-线上",
|
ctype: 2,
|
formCode: "903",
|
formUrl: "/user/pay/juhe1.do",
|
id: 8,
|
isLock: 0,
|
isShow: 0,
|
},
|
{
|
channelAccount: "对公转账2账号",
|
channelDesc: "中国银行深圳分行",
|
channelImg:
|
"http://img.navihold.com/0d83e672-2ce0-426a-aad7-6892e63c6c34.png",
|
channelMaxLimit: 10000,
|
channelMinLimit: 10,
|
channelName: "对公转账2名称",
|
channelType: "对公转账2",
|
ctype: 1,
|
formCode: "",
|
formUrl: "",
|
id: 10,
|
isLock: 0,
|
isShow: 0,
|
},
|
], // 支付渠道
|
form: {
|
id: "",
|
amt: "",
|
type: "",
|
},
|
rule: {
|
number: [
|
{ required: true, message: "请输入充值金额", trigger: "blur" },
|
],
|
},
|
info: {
|
name: "",
|
},
|
formh5Date: {},
|
payh5status: false,
|
formDate: {
|
pay_amount: "",
|
pay_applydate: "",
|
pay_bankcode: "",
|
pay_callbackurl: "",
|
pay_md5sign: "",
|
pay_memberid: "",
|
pay_notifyurl: "",
|
pay_orderid: "",
|
pay_productdesc: "",
|
pay_productname: "",
|
pay_productnum: "",
|
pay_producturl: "",
|
postUrl: "",
|
},
|
settingInfo: {
|
chargeMinAmt: "",
|
},
|
};
|
},
|
watch: {},
|
computed: {
|
...mapState({
|
color: (state) => state.systemColor,
|
}),
|
},
|
created() {
|
this.getSettingInfo();
|
},
|
mounted() {
|
this.getPayInfo();
|
},
|
methods: {
|
async chongzhi() {
|
// if (this.form.amt < 100) {
|
// this.$message.error("请输入金额大于100");
|
// return;
|
// }
|
|
// if(!this.$store.state.userInfo.idCard){
|
// this.$message.error('请先实名认证')
|
// this.$router.push('/auth')
|
// return
|
// }
|
// if(!this.$store.state.bankInfo.bankNo){
|
// this.$message.error('请先绑定银行卡')
|
// this.$router.push('/bank')
|
// return
|
// }
|
if (this.form.type === 2) {
|
this.isloading = true;
|
//H5支付
|
if (
|
this.info.formUrl !== undefined &&
|
this.info.formUrl !== "" &&
|
this.info.formUrl.indexOf("yunpay.waa.cn") !== -1
|
) {
|
let data5 = await api.getjuheH5({
|
payType: this.info.formCode,
|
payAmt: this.form.amt,
|
});
|
if (data5.status === 0) {
|
this.formh5Date = data5.data;
|
this.payh5status = true;
|
this.$nextTick(() => {
|
this.qrcode(this.formh5Date.qrcode);
|
});
|
this.isloading = false;
|
// console.log(document.getElementById("payh5_form"))
|
// return;
|
// setTimeout(() => {
|
// this.isloading = false
|
// }, 180000)
|
} else {
|
this.$message.error(data5.msg);
|
this.isloading = false;
|
}
|
} else {
|
let data2 = await api.getjuhe1({
|
payType: this.info.formCode,
|
payAmt: this.form.amt,
|
});
|
if (data2.status === 0) {
|
this.formDate = data2.data;
|
//console.log(document.getElementById("pay_form"))
|
// return;
|
setTimeout(() => {
|
document.getElementById("pay_form").submit();
|
this.isloading = false;
|
}, 1500);
|
} else {
|
this.$message.error(data2.msg);
|
this.isloading = false;
|
}
|
}
|
} else {
|
let opts = {
|
amt: this.form.amt,
|
payType: this.form.type,
|
};
|
this.isloading = true;
|
let data = await api.inMoney(opts);
|
if (data.status === 0) {
|
// 成功
|
this.$message.success(data.msg ? data.msg : "充值成功!");
|
} else {
|
this.$message.error(data.msg ? data.msg : "充值失败,请重新充值");
|
}
|
this.isloading = false;
|
}
|
},
|
async getSettingInfo() {
|
// 网站设置信息
|
let data = await api.getSetting();
|
if (data.status === 0) {
|
// 成功
|
this.settingInfo = data.data;
|
this.form.amt = this.settingInfo.chargeMinAmt;
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
async changType(val) {
|
console.log(val.ctype);
|
this.form.type = val.ctype;
|
this.info = val;
|
// if(val.ctype === 2){
|
// // 其他渠道 线上
|
// // this.type = value.ctype
|
// if(!this.form.amt){
|
// this.$message.error('请输入金额')
|
// return
|
// }
|
// let data = await api.getjuhe1({payType:val.formCode,payAmt:this.form.amt})
|
// if(data.status === 0){
|
// // 成功
|
// this.formDate = data.data
|
// }else{
|
// this.$message.error(data.msg)
|
// }
|
// }
|
},
|
onCopy: function (e) {
|
this.$message.success("复制成功！");
|
},
|
onError: function (e) {
|
this.$message.error("复制失败，请重试！");
|
},
|
async getPayInfo() {
|
// 获取支付渠道
|
let data = await api.getPayInfo();
|
if (data.status === 0) {
|
console.log(data.data);
|
this.optionsPay = data.data;
|
this.form.id = data.data[0].id;
|
this.info = data.data[0];
|
this.form.type = data.data[0].ctype;
|
this.form.amt = this.settingInfo.chargeMinAmt;
|
} else {
|
this.$message.error(data.msg);
|
}
|
},
|
tosubmit(formName) {
|
// alert(1);
|
// 提交
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
// if(!this.$store.state.userInfo.idCard){
|
// this.$message.error('请先实名认证')
|
// this.$router.push('/auth')
|
// return
|
// }
|
// if(!this.$store.state.bankInfo.bankNo){
|
// this.$message.error('请先绑定银行卡')
|
// this.$router.push('/bank')
|
// return
|
// }
|
if (this.form.type === 2) {
|
this.isloading = true;
|
//H5支付
|
if (
|
this.info.formUrl !== undefined &&
|
this.info.formUrl !== "" &&
|
this.info.formUrl.indexOf("yunpay.waa.cn") !== -1
|
) {
|
let data5 = await api.getjuheH5({
|
payType: this.info.formCode,
|
payAmt: this.form.amt,
|
});
|
if (data5.status === 0) {
|
this.formh5Date = data5.data;
|
this.payh5status = true;
|
this.$nextTick(() => {
|
this.qrcode(this.formh5Date.qrcode);
|
});
|
this.isloading = false;
|
// console.log(document.getElementById("payh5_form"))
|
// return;
|
// setTimeout(() => {
|
// this.isloading = false
|
// }, 180000)
|
} else {
|
this.$message.error(data5.msg);
|
this.isloading = false;
|
}
|
} else {
|
let data2 = await api.getjuhe1({
|
payType: this.info.formCode,
|
payAmt: this.form.amt,
|
});
|
if (data2.status === 0) {
|
this.formDate = data2.data;
|
//console.log(document.getElementById("pay_form"))
|
// return;
|
setTimeout(() => {
|
document.getElementById("pay_form").submit();
|
this.isloading = false;
|
}, 1500);
|
} else {
|
this.$message.error(data2.msg);
|
this.isloading = false;
|
}
|
}
|
} else {
|
let opts = {
|
amt: this.form.amt,
|
payType: this.form.type,
|
};
|
this.isloading = true;
|
let data = await api.inMoney(opts);
|
if (data.status === 0) {
|
// 成功
|
this.$message.success(data.msg ? data.msg : "充值成功!");
|
} else {
|
this.$message.error(data.msg ? data.msg : "充值失败,请重新充值");
|
}
|
this.isloading = false;
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
onsubmit() {
|
this.$refs.formDate.submit();
|
},
|
toLook() {
|
// 查看限额说明
|
this.dialogVisible = true;
|
},
|
// 生成二维码
|
qrcode(url) {
|
document.getElementById("qrcode").innerHTML = "";
|
let qrcode = new QRCode("qrcode", {
|
width: 200, // 二维码宽度，单位像素
|
height: 200, // 二维码高度，单位像素
|
text: url, // 生成二维码的链接
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.red-bg {
|
|
.chongzhi-cont {
|
position: relative;
|
|
.left {
|
// position: absolute;
|
// left: 50%;
|
// transform: translateX(-50%);
|
}
|
|
.xianshi-cont {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.chongzhi-bizhi {
|
margin-top: 100px;
|
background-color: rgb(229, 229, 229);
|
display: flex;
|
padding: 40px;
|
justify-content: space-between;
|
|
.chongzhi-bizhi-cont .chongzhi-item {
|
margin: 15px 0;
|
color: rgb(121, 121, 121);
|
|
.circle {
|
display: inline-block;
|
width: 15px;
|
text-align: center;
|
height: 15px;
|
border: 1px solid rgb(121, 121, 121);
|
border-radius: 50%;
|
line-height: 15px;
|
}
|
}
|
}
|
|
.chongzhi-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.chongzhi-type {
|
display: flex;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
|
.chongzhi-type-item {
|
margin-right: 20px;
|
}
|
}
|
|
.chongzhi-type>span {
|
display: inline-block;
|
width: 85px;
|
}
|
|
.chongzhi-btn-cont {
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
|
.chongzhi-btn {
|
cursor: pointer;
|
width: 80%;
|
border-radius: 50px;
|
text-align: center;
|
height: 40px;
|
background-color: #c11815;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
margin-top: 20px;
|
}
|
}
|
|
.chongzhi-input {
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
width: 90%;
|
background: none;
|
}
|
|
.chongzhi-input>span {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
|
.black-bg {
|
|
.chongzhi-cont {
|
position: relative;
|
|
.left {
|
// position: absolute;
|
// left: 50%;
|
// transform: translateX(-50%);
|
}
|
|
.xianshi-cont {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.chongzhi-bizhi {
|
margin-top: 100px;
|
background-color: #191E2B;
|
display: flex;
|
padding: 40px;
|
justify-content: space-between;
|
|
.chongzhi-bizhi-cont .chongzhi-item {
|
margin: 15px 0;
|
color: #7E8086;
|
|
.circle {
|
display: inline-block;
|
width: 15px;
|
text-align: center;
|
height: 15px;
|
border: 1px solid rgb(121, 121, 121);
|
border-radius: 50%;
|
line-height: 15px;
|
}
|
}
|
}
|
|
.chongzhi-img {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.chongzhi-type {
|
display: flex;
|
margin-top: 20px;
|
margin-bottom: 20px;
|
|
.chongzhi-type-item {
|
margin-right: 20px;
|
}
|
}
|
|
.chongzhi-type>span {
|
display: inline-block;
|
width: 85px;
|
}
|
|
.chongzhi-btn-cont {
|
display: flex;
|
justify-content: center;
|
margin-top: 10px;
|
|
.chongzhi-btn {
|
cursor: pointer;
|
width: 80%;
|
border-radius: 50px;
|
text-align: center;
|
height: 40px;
|
background-color: #c11815;
|
color: #fff;
|
line-height: 40px;
|
font-size: 14px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
margin-top: 20px;
|
}
|
}
|
|
.chongzhi-input {
|
margin-top: 20px;
|
display: flex;
|
align-items: center;
|
width: 90%;
|
background: none;
|
}
|
|
.chongzhi-input>span {
|
display: inline-block;
|
width: 100px;
|
}
|
}
|
}
|
|
.copy-btn {
|
float: right;
|
color: #409eff;
|
cursor: pointer;
|
}
|
|
.cope-input {
|
width: 80%;
|
}
|
|
.tips-group {
|
line-height: 28px;
|
// margin-bottom: 20px;
|
// margin-top: 20px;
|
padding: 20px;
|
|
.iconfont {
|
margin-right: 10px;
|
}
|
}
|
|
.el-form-item {
|
margin-bottom: 10px;
|
}
|
|
.pay-box {
|
img {
|
width: 80%;
|
}
|
|
.eq-code {
|
width: 180px;
|
margin-bottom: 20px;
|
}
|
}
|
|
.scan {
|
border-top: 0.02rem dashed #ddd;
|
margin-top: 0.5rem;
|
padding: 0.3rem;
|
text-align: center;
|
color: #ff1100;
|
}
|
|
.submit-btn {
|
width: 200px;
|
color: #fff;
|
background-color: #c11815;
|
border-color: #c11815;
|
margin-top: 20px;
|
}
|
|
.radio-btn {
|
width: 50%;
|
float: left;
|
}
|
|
.dialog-footer {
|
margin-top: 20px;
|
}
|
</style>
|
