You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
13 KiB
354 lines
13 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="flexBet searchTop">
|
|
<div class="title flex m20">
|
|
<div class="bar"></div>
|
|
<div class="text">{{ $route.meta.title }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- v-loading="loading" -->
|
|
<div class="bg">
|
|
<div class="bottom form controls">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
|
|
<el-form-item label="版本号" prop="version">
|
|
<el-input v-model="form.version" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<el-form-item label="字符集" prop="charset">
|
|
<el-input v-model="form.charset" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="商户号" prop="spid">
|
|
<el-input v-model="form.spid" placeholder="" style="width: 315px;border-color: #E6F1FF;"
|
|
v-hasPermi="['pay:test:query']" />
|
|
</el-form-item> -->
|
|
|
|
|
|
<el-form-item label="商户号" prop="spid">
|
|
<el-select v-model="form.spid" placeholder="请选择商户" size="medium" v-hasPermi="['pay:test:query']"
|
|
style="width: 315px">
|
|
<el-option v-for="dict in allstore" :key="dict.storeNo" :label="dict.storeName"
|
|
:value="dict.storeNo" />
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
|
|
<!-- <el-form-item label="签名key" prop="payKey">
|
|
<el-input v-model="form.payKey" placeholder="" style="width: 315px;border-color: #E6F1FF;"
|
|
v-hasPermi="['pay:test:query']" />
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="交易金额" prop="tranAmt">
|
|
<el-input v-model="form.tranAmt" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<!-- payerName -->
|
|
<el-form-item label="付款人姓名" prop="">
|
|
<el-input v-model="form.payerName" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="支付类型" prop="payType">
|
|
<el-select v-model="form.payType" placeholder="请选择支付类型" clearable size="medium">
|
|
<el-option v-for="(item, i) in sortLevType" :key="i" :label="item.typeName"
|
|
:value="item.payType"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="商品名称" prop="productName">
|
|
<el-input v-model="form.productName" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="商品描述" prop="productDesc">
|
|
<el-input v-model="form.productDesc" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="保留字段" prop="attach">
|
|
<el-input v-model="form.attach" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<el-form-item label="回调地址" prop="notifyUrl">
|
|
<el-input v-model="form.notifyUrl" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<el-form-item label="商户返回地址" prop="backUrl">
|
|
<el-input v-model="form.backUrl" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<el-form-item label="请求类型" prop="mediaType">
|
|
<el-select v-model="form.mediaType" placeholder="请选择请求类型" clearable size="medium">
|
|
<el-option v-for="(item, i) in list" :key="i" :label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="签名类型" prop="signType">
|
|
<el-input v-model="form.signType" placeholder="" style="width: 315px;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="签名" prop="req_data">
|
|
<el-input v-model="form.req_data" type="textarea" :disabled="true" placeholder=""
|
|
style="width: 315px;border-color: #E6F1FF;" />
|
|
<el-button type="primary" plain icon="" size="medium" style="color:#fff;margin-left:10px"
|
|
@click="handleSay" v-hasPermi="['pay:test:paySign']">获取签名</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain icon="" size="medium" style="color:#fff;margin-left:10px"
|
|
@click="payCode">支付</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="扫码支付响应" prop="resp">
|
|
<el-input type="textarea" v-model="resMsg" placeholder=""
|
|
style="width:80%;border-color: #E6F1FF;" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain icon="" :disabled="!this.form.resp" size="medium"
|
|
style="color:#fff;margin-left:10px" @click="getCode">查看二维码</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<el-dialog v-dialogDrag title="二维码" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
|
|
<div id="qrCode" ref="qrCodeDiv" class="flex" style="justify-content: center;" v-if="showCode"></div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="cancel">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
payTest,
|
|
common_api
|
|
} from "@/api/form";
|
|
import QRCode from 'qrcodejs2';
|
|
export default {
|
|
name: "add",
|
|
|
|
data() {
|
|
return {
|
|
// 返回信息
|
|
resMsg: null,
|
|
|
|
showCode: false,
|
|
rules: {
|
|
payerName: [
|
|
{ required: true, message: "请输入付款人", trigger: "blur" },
|
|
],
|
|
version: [
|
|
{ required: true, message: "请输入版本号", trigger: "blur" },
|
|
],
|
|
charset: [
|
|
{ required: true, message: "请输入字符集", trigger: "blur" },
|
|
],
|
|
spid: [
|
|
{ required: true, message: "请输入商户号", trigger: "blur" },
|
|
],
|
|
tranAmt: [
|
|
{ required: true, message: "请输入交易金额", trigger: "blur" },
|
|
],
|
|
payType: [
|
|
{ required: true, message: "请选择支付类型", trigger: "blur" },
|
|
],
|
|
productName: [
|
|
{ required: true, message: "请输入商品名称", trigger: "blur" },
|
|
],
|
|
productDesc: [
|
|
{ required: true, message: "请输入商品描述", trigger: "blur" },
|
|
],
|
|
attach: [
|
|
{ required: true, message: "请输入保留字段", trigger: "blur" },
|
|
],
|
|
notifyUrl: [
|
|
{ required: true, message: "请输入回调地址", trigger: "blur" },
|
|
],
|
|
mediaType: [
|
|
{ required: true, message: "请选择请求类型", trigger: "blur" },
|
|
],
|
|
},
|
|
sortLevType: [],
|
|
// 所有商户
|
|
allstore: [],
|
|
|
|
form: {
|
|
resp: null,
|
|
signType: 'MD5',
|
|
backUrl: '/admin/paytest/native',
|
|
notifyUrl: 'http://localhost:8082/pay/nativePayNotify2Store',
|
|
attach: 'test',
|
|
version: '2.0',
|
|
charset: 'UTF-8',
|
|
spid: null,
|
|
payKey: null,
|
|
tranAmt: 1,
|
|
payType: null,
|
|
productName: '商品',
|
|
productDesc: '商品描述',
|
|
req_data: null,
|
|
mediaType: null,
|
|
payerName:null,
|
|
},
|
|
list: [
|
|
{
|
|
label: 'JSON',
|
|
value: 'json',
|
|
},
|
|
{
|
|
label: 'XML',
|
|
value: 'xml',
|
|
}
|
|
],
|
|
radio: '',
|
|
// 遮罩层
|
|
loading: false,
|
|
dialogVisible: false,
|
|
// 是否显示弹出层
|
|
open: false,
|
|
|
|
val: {},
|
|
infoList: {},
|
|
// 二维码对象
|
|
qrcode: null,
|
|
|
|
keys: {},
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.getList()
|
|
this.init();
|
|
},
|
|
methods: {
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {};
|
|
this.resetForm("form");
|
|
},
|
|
cancel() {
|
|
this.open = false;
|
|
this.showCode = false;
|
|
},
|
|
// 查看二维码
|
|
getCode() {
|
|
this.open = true
|
|
this.showCode = true;
|
|
this.$nextTick(function () {
|
|
new QRCode(this.$refs.qrCodeDiv, {
|
|
text: this.form.resp,
|
|
width: 200,
|
|
height: 200,
|
|
colorDark: "#333333", //二维码颜色
|
|
colorLight: "#ffffff", //二维码背景色
|
|
correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
// 代扣支付
|
|
payCode() {
|
|
if (!this.form.req_data) {
|
|
this.$message.error('请先获取签名');
|
|
return;
|
|
}
|
|
let form = {
|
|
reqData: this.form.req_data,
|
|
mediaType: this.form.mediaType,
|
|
}
|
|
|
|
payTest
|
|
.payCode(form)
|
|
.then((response) => {
|
|
this.resMsg = response.msg
|
|
let s = JSON.parse(response.msg)
|
|
this.form.resp = s.codeImgUrl
|
|
});
|
|
|
|
|
|
},
|
|
//代扣支付签名
|
|
handleSay() {
|
|
this.form.payKey=this.keys[this.form.spid]
|
|
payTest
|
|
.paySign(this.form)
|
|
.then((response) => {
|
|
this.form.req_data = response.msg
|
|
});
|
|
|
|
},
|
|
init() {
|
|
common_api.getAllPayTestStore().then((response) => {
|
|
this.allstore = response.data
|
|
for (var i = 0; i < this.allstore.length; i++) {
|
|
this.keys[this.allstore[i].storeNo] = this.allstore[i].storeKey
|
|
}
|
|
});
|
|
common_api.payTypeAll().then((response) => {
|
|
this.sortLevType = response.data
|
|
this.form.payType = this.sortLevType[0].payType
|
|
this.form.mediaType = 'json'
|
|
});
|
|
},
|
|
back() {
|
|
this.$router.go(-1)
|
|
},
|
|
// 获取商户配置
|
|
getList() {
|
|
this.loading = true;
|
|
payTest
|
|
.paytest()
|
|
.then((response) => {
|
|
// response.data.storeNo response.data.storeKey C1553225808762 127c01e48c11412aadb453cef8fac426
|
|
this.form.spid = response.data.storeNo
|
|
this.form.payKey = response.data.storeKey
|
|
this.loading = false
|
|
});
|
|
},
|
|
/** 提交按钮 */
|
|
// savePayConfig() {
|
|
// if (!this.infoList.googleCode) {
|
|
// this.$message.error("请填写谷歌动态验证码");
|
|
// return;
|
|
// }
|
|
// this.loading = true
|
|
// this.infoList.storeId = this.val;
|
|
// this.infoList.id = this.infoList.id < 1 ? null : this.infoList.id;
|
|
// payAgentUser
|
|
// .updateStoreConfig(this.infoList)
|
|
// .then((response) => {
|
|
|
|
// this.msgSuccess("编辑成功");
|
|
// this.getList(this.val)
|
|
// this.loading = false;
|
|
// })
|
|
// .catch((err) => {
|
|
// this.loading = false;
|
|
// });
|
|
// },
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-footer {
|
|
margin-left: 130px;
|
|
}
|
|
|
|
.bg {
|
|
padding: 0 0px 30px 0px !important;
|
|
}
|
|
|
|
.bottom {
|
|
padding: 30px
|
|
}
|
|
|
|
.top {
|
|
background: #F2F2F2;
|
|
color: #006EFF;
|
|
font-size: 18px;
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
|
|
<style></style>
|
|
|