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.
380 lines
14 KiB
380 lines
14 KiB
<template>
|
|
<div class="site-setting-wrap pagePadding">
|
|
|
|
<div class="siteMessage flex-common" id="siteMessage1">
|
|
<p class="littleTitle mb32">微信收款</p>
|
|
<div class="weixinpay">
|
|
<div class="beforeNotice">
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
|
<div class="flex-between">
|
|
<p class="mt12 flex">1.申请公司微信支付。<a class="guide" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3"
|
|
target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> </p>
|
|
|
|
<span class=" flex">
|
|
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank">
|
|
<img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
|
|
</span>
|
|
</div>
|
|
<p class="mt12">2.登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
|
|
</div>
|
|
<el-form ref="wxform" :model="formData1" :rules="rules">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<GuipFormItem column="column" class="mb24" label="公司简称" :required="true">
|
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="formData1.company_short_name"
|
|
prop="company_short_name" placeholder="请输入">
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column" class="mb24" label="微信支付商户号" :required="true">
|
|
<span class="desc" slot="formRight">
|
|
<a href='https://pay.weixin.qq.com/' class="guide"
|
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
|
|
</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="formData1.mch_id" prop="mch_id"
|
|
placeholder="请输入">
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<GuipFormItem column="column" class="mb24" label="微信支付秘钥" :required="true">
|
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' class="guide"
|
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a>
|
|
</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="formData1.key" prop="key"
|
|
placeholder="不能设为纯数字">
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column" class="mb24" label="公众号APPID" :required="true">
|
|
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' class="guide"
|
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="formData1.appid" prop="appid"
|
|
placeholder="不能设为纯数字">
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="siteMessage flex-common mt12" id="siteMessage2">
|
|
<h3 class="mb12">管理证书</h3>
|
|
<div class="beforeNotice">
|
|
<span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;">
|
|
API证书获取：
|
|
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
|
|
src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>＞账户中心＞账户设置＞API安全
|
|
</span>
|
|
</div>
|
|
<el-form>
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<div class="uploadwrap">
|
|
<label class="flex upload-title gap8">上传 apiclient_cert.pem 证书<img class="ml-4"
|
|
src="@/assets/require.svg" /></label>
|
|
<el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
|
|
:limit="Number(1)" ref="avatorUpload" :auto-upload="false">
|
|
<GuipButton class="upload-button" slot="trigger" type="ignore"
|
|
:btnstyle="{ width: '118px' }">
|
|
<i class="bgImg"></i>选择文件
|
|
</GuipButton>
|
|
</el-upload>
|
|
<!-- <p class="uploaded" v-if="formData.apiclient_cert">已上传</p>
|
|
<p class="normalUpload notuploaded" v-else>未上传任何文件</p> -->
|
|
</div>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<div class="uploadwrap">
|
|
<label class="flex upload-title gap8">上传 apiclient_key.pem 证书<img class="ml-4"
|
|
src="@/assets/require.svg" /></label>
|
|
<el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
|
|
:limit="Number(1)" ref="avatorUpload" :auto-upload="false">
|
|
<GuipButton class="upload-button" slot="trigger" type="ignore"
|
|
:btnstyle="{ width: '118px' }">
|
|
<i class="bgImg"></i>选择文件
|
|
</GuipButton>
|
|
</el-upload>
|
|
<!-- <p class="uploaded" v-if="formData.apiclient_key">已上传</p>
|
|
<p class="normalUpload notuploaded" v-else>未上传任何文件</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div class="save-button">
|
|
<GuipButton type="primary" ref="saveRef" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
|
export default {
|
|
// 站点设置
|
|
name: 'addPay',
|
|
props: {},
|
|
components: {
|
|
GuipInput,
|
|
GuipButton,
|
|
GuipFormItem,
|
|
},
|
|
data() {
|
|
return {
|
|
formData1:{
|
|
// 公司简称
|
|
company_short_name: '',
|
|
// 商户号
|
|
mch_id: '',
|
|
// 微信支付秘钥
|
|
key: '',
|
|
// 公众号APPID
|
|
appid: '',
|
|
},
|
|
rules: {
|
|
company_short_name: [
|
|
{ required: true, message: '请输入公司简称', trigger: 'blur' }
|
|
],
|
|
appid: [
|
|
{ required: true, message: '请输入公众号APPID', trigger: 'blur' }
|
|
],
|
|
mch_id: [
|
|
{ required: true, message: '请输入微信支付商户号', trigger: 'blur' }
|
|
],
|
|
key: [
|
|
{ required: true, message: '请输入微信支付秘钥', trigger: 'blur' }
|
|
],
|
|
},
|
|
formData: new FormData(),
|
|
payInfo:{},
|
|
saveBtnStyleObj: {
|
|
width: '144px',
|
|
height: '46px',
|
|
borderRadius: '4px',
|
|
background: '#006AFF',
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
// 初始化反显
|
|
},
|
|
methods: {
|
|
getPayment() {
|
|
this.$http('POST', '/agentnew/ajax_get_payinfo', {
|
|
payid: this.$route.query.payid,
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
this.payinfo = response.data
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
},
|
|
handleAvatarChange(file, fileList) {
|
|
console.log(file, fileList, 'file')
|
|
let fileObj = file.raw
|
|
this.payInfo.apiclient_cert = fileObj;
|
|
this.formData.set('apiclient_cert', fileObj)
|
|
// this.formData.append('apiclient_cert', fileObj)
|
|
},
|
|
handleAvatarChange1(file, fileList) {
|
|
console.log(file, fileList, 'file')
|
|
let fileObj = file.raw
|
|
this.payInfo.apiclient_key = fileObj;
|
|
this.formData.set('apiclient_key', fileObj)
|
|
},
|
|
|
|
saveConfirm() {
|
|
// 查看有多少参数
|
|
// for (let [key, value] of this.formData.entries()) {
|
|
// console.log('键 (Key):', key);
|
|
// console.log('值 (Value):', value);
|
|
// }
|
|
this.$refs.wxform.validate((valid) => {
|
|
console.log(valid, 'valid');
|
|
if (valid) {
|
|
for (let key in this.formData1) {
|
|
this.formData.set(key, this.formData1[key])
|
|
}
|
|
if(!this.formData.has('apiclient_key') || !this.formData.has('apiclient_cert')){
|
|
this.$positionMessage({
|
|
type: 'error',
|
|
message: '请先上传证书',
|
|
target: this.$refs['saveRef'], // 可以是DOM元素或选择器
|
|
position: 'top'
|
|
})
|
|
return false;
|
|
}
|
|
this.formData.set('doctor_id', this.$route.query.doctor_id)
|
|
this.formData.set('depart_id', this.$route.query.depart_id)
|
|
const that = this
|
|
this.$http('POST', '/agentnew/ajax_payment_switch', this.formData).then(response => {
|
|
if(response.status){
|
|
that.$message.success('保存成功');
|
|
// that.payList = response.data.paylist
|
|
// that.$emit('saveEvent', that.payList)
|
|
this.$router.go(-1);
|
|
|
|
return true;
|
|
}
|
|
that.$message.error(response.info);
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} else {
|
|
return false;
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.guide{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #8A9099 !important;
|
|
font-size: 12px;
|
|
}
|
|
.site-setting-wrap{
|
|
height: calc(100% - 80px);
|
|
overflow-y: auto;
|
|
}
|
|
.notuploaded,.uploaded,.normalUpload{
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: #606266;
|
|
}
|
|
.normalUpload{
|
|
color:#606266;
|
|
}
|
|
.notuploaded{
|
|
color: #FD3B3B;
|
|
}
|
|
.save-button {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background: #fff;
|
|
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
.uploadwrap {
|
|
text-align: left;
|
|
}
|
|
|
|
.upload-title {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0.08em;
|
|
color: #23242B;
|
|
}
|
|
|
|
.upload-button {
|
|
border-radius: 4px;
|
|
background: #F2F3F5;
|
|
box-sizing: border-box;
|
|
border: 1px solid #BABDC2;
|
|
|
|
.bgImg {
|
|
width: 20px;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
background-image: url(@/assets/site/uploadIcon.svg);
|
|
}
|
|
|
|
&:hover {
|
|
.bgImg {
|
|
background-image: url(@/assets/site/uploadIcon_light.svg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload-demo {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.beforeNotice {
|
|
|
|
h4 {
|
|
margin: 0;
|
|
gap: 8px;
|
|
}
|
|
|
|
margin-bottom: 18px;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
padding: 20px 14px;
|
|
border-radius: 4px;
|
|
/* middle/middle_blue_1 */
|
|
background: #F2F7FF;
|
|
/* middle/middle_blue_3 */
|
|
border: 1px solid #BFDAFF;
|
|
|
|
div {
|
|
// margin-top: 2px;
|
|
// padding-left: 23px;
|
|
|
|
p {
|
|
// color: #8A9099;
|
|
}
|
|
|
|
}
|
|
|
|
p {
|
|
color: #1E2226;
|
|
|
|
i {
|
|
font-style: normal;
|
|
}
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: stretch;
|
|
|
|
b {
|
|
font-weight: normal;
|
|
color: #8A9099;
|
|
display: inline-flex;
|
|
|
|
img {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #006AFF;
|
|
margin-right: 10px;
|
|
|
|
img {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: #006AFF;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|