longchao
4 weeks ago
6 changed files with 477 additions and 60 deletions
@ -0,0 +1,439 @@ |
|||
<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.pkey" prop="pkey" |
|||
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" :file-list="fileList" :on-change="handleAvatarChange" :on-remove="handRemove" 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>{{formData1.hava_apiclient_cert?'重新上传':'选择文件'}} |
|||
</GuipButton> |
|||
</el-upload> |
|||
<!-- <p class="uploaded" v-if="formData.apiclient_cert">已上传</p> --> |
|||
<!-- <p :class="['normalUpload', noFileFlag ?'notuploaded' :'']" v-if="!('apiclient_cert' in payInfo)">未上传任何文件</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" :file-list="fileList1" :on-change="handleAvatarChange1" :on-remove="handRemove1" 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>{{formData1.hava_apiclient_key?'重新上传':'选择文件'}} |
|||
</GuipButton> |
|||
</el-upload> |
|||
<!-- <p class="uploaded" v-if="formData.apiclient_key">已上传</p> --> |
|||
<!-- <p :class="['normalUpload', noFileFlag1 ?'notuploaded' :'']" v-if="!('apiclient_key' in payInfo)">未上传任何文件</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'; |
|||
const PAY_TYPE_WEIXIN = 2; // 微信 |
|||
const PAY_TYPE_ALIPAY = 3; // 支付宝 |
|||
export default { |
|||
// 站点设置 |
|||
name: 'addPay', |
|||
props: {}, |
|||
components: { |
|||
GuipInput, |
|||
GuipButton, |
|||
GuipFormItem, |
|||
}, |
|||
data() { |
|||
const notPureNumberRule = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error('该字段为必填项')); |
|||
} else if (/^\d+$/.test(value)) { |
|||
callback(new Error('不能设为纯数字')); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
formData1:{ |
|||
// 公司简称 |
|||
company_short_name: '', |
|||
// 商户号 |
|||
mch_id: '', |
|||
// 微信支付秘钥 |
|||
pkey: '', |
|||
// 公众号APPID |
|||
appid: '', |
|||
}, |
|||
rules: { |
|||
company_short_name: [ |
|||
{ required: true, message: '请输入公司简称', trigger: 'blur' } |
|||
], |
|||
appid: [ |
|||
{ required: true, message: '请输入公众号APPID', trigger: 'blur' }, |
|||
// { validator: notPureNumberRule, trigger: 'blur' } |
|||
], |
|||
mch_id: [ |
|||
{ required: true, message: '请输入微信支付商户号', trigger: 'blur' }, |
|||
{ |
|||
pattern: /^\d+$/, |
|||
message: '商户号必须为纯数字', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
pkey: [ |
|||
{ required: true, message: '请输入微信支付秘钥', trigger: 'blur' }, |
|||
{ validator: notPureNumberRule, trigger: 'blur' } |
|||
], |
|||
}, |
|||
formData: new FormData(), |
|||
payInfo:{}, |
|||
saveBtnStyleObj: { |
|||
width: '144px', |
|||
height: '46px', |
|||
borderRadius: '4px', |
|||
background: '#006AFF', |
|||
}, |
|||
fileList: [], |
|||
fileList1: [], |
|||
noFileFlag: false, |
|||
noFileFlag1: false, |
|||
payTypeWeixin: PAY_TYPE_WEIXIN, |
|||
payTypeAlipay: PAY_TYPE_ALIPAY, |
|||
pay_id:false, |
|||
} |
|||
}, |
|||
created() { |
|||
// 初始化 |
|||
this.formData.set('doctor_id', this.$route.query.doctor_id) |
|||
this.formData.set('depart_id', this.$route.query.depart_id) |
|||
this.formData.set('pay_id', this.$route.query.pay_id) |
|||
if(this.$route.query.pay_id) this.pay_id = this.$route.query.pay_id |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
if(!this.$route.query.pay_id) return |
|||
this.$http('POST', '/api/admin/get_pay_method', this.formData).then(response => { |
|||
if(response.code == 0){ |
|||
var rdata = response.data |
|||
this.formData1.company_short_name = rdata.company_short_name |
|||
this.formData1.mch_id = rdata.mch_id |
|||
this.formData1.pkey = rdata.token |
|||
this.formData1.appid = rdata.appid |
|||
if(rdata.hava_apiclient_cert) this.formData1.hava_apiclient_cert = rdata.hava_apiclient_cert |
|||
if(rdata.hava_apiclient_key) this.formData1.hava_apiclient_key = rdata.hava_apiclient_key |
|||
|
|||
return |
|||
} |
|||
this.$message.error(response.msg); |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handRemove() { |
|||
this.formData.delete('apiclient_cert'); |
|||
this.payInfo.delete('apiclient_cert'); |
|||
this.noFileFlag = true; |
|||
}, |
|||
handRemove1() { |
|||
this.formData.delete('apiclient_key'); |
|||
this.payInfo.delete('apiclient_key'); |
|||
this.noFileFlag1 = true; |
|||
}, |
|||
handleAvatarChange(file, fileList) { |
|||
console.log(file, fileList, 'file') |
|||
let fileObj = file.raw |
|||
this.noFileFlag = false; |
|||
this.payInfo.apiclient_cert = fileObj; |
|||
this.formData.set('apiclient_cert', fileObj) |
|||
}, |
|||
handleAvatarChange1(file, fileList) { |
|||
console.log(file, fileList, 'file') |
|||
let fileObj = file.raw; |
|||
this.noFileFlag1 = false; |
|||
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); |
|||
// } |
|||
if(!this.formData.has('apiclient_key') && !this.pay_id){ |
|||
this.noFileFlag1 = true; |
|||
if( !this.formData.has('apiclient_cert')){ |
|||
this.noFileFlag = true; |
|||
this.$positionMessage({ |
|||
type: 'error', |
|||
message: '请先上传证书', |
|||
target: this.$refs['saveRef'], // 可以是DOM元素或选择器 |
|||
position: 'top' |
|||
}) |
|||
return false; |
|||
} |
|||
this.$positionMessage({ |
|||
type: 'error', |
|||
message: '请先上传证书', |
|||
target: this.$refs['saveRef'], // 可以是DOM元素或选择器 |
|||
position: 'top' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
this.$refs.wxform.validate((valid) => { |
|||
console.log(valid, 'valid'); |
|||
if (valid) { |
|||
for (let key in this.formData1) { |
|||
this.formData.set(key, this.formData1[key]) |
|||
} |
|||
this.formData.set('doctor_id', this.$route.query.doctor_id) |
|||
this.formData.set('depart_id', this.$route.query.depart_id) |
|||
this.formData.set('type',this.payTypeWeixin)//这个参数 待定 2 微信支付 \ 3 支付宝 |
|||
const that = this; |
|||
this.$http('POST', '/api/admin/set_pay_method', this.formData).then(response => { |
|||
if(response.code == 0){ |
|||
that.$message.success('保存成功'); |
|||
this.$router.go(-1); |
|||
return true; |
|||
} |
|||
that.$message.error(response.msg); |
|||
}).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> |
|||
Loading…
Reference in new issue