zq
1 month ago
6 changed files with 455 additions and 22 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,342 @@ |
|||||
|
<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> |
||||
|
<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="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="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="apiv2" prop="apiv2" |
||||
|
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="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="payinfo.cert_uploaded">已上传</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="payinfo.key_uploaded">已上传</p> |
||||
|
<p class="normalUpload" 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 { |
||||
|
// 公司简称 |
||||
|
company_short_name: '', |
||||
|
// 商户号 |
||||
|
mch_id: '', |
||||
|
// 微信支付秘钥 |
||||
|
apiv2: '', |
||||
|
// 公众号APPID |
||||
|
appid: '', |
||||
|
payinfo: [], |
||||
|
saveBtnStyleObj: { |
||||
|
width: '144px', |
||||
|
height: '46px', |
||||
|
borderRadius: '4px', |
||||
|
background: '#006AFF', |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化反显 |
||||
|
// this.getPayment() |
||||
|
}, |
||||
|
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) |
||||
|
let fileObj = file.raw |
||||
|
this.formData.set('apiclient_cert', fileObj) |
||||
|
}, |
||||
|
handleAvatarChange1(file, fileList) { |
||||
|
console.log(file, fileList) |
||||
|
let fileObj = file.raw |
||||
|
this.formData.set('apiclient_key', fileObj) |
||||
|
}, |
||||
|
saveConfirm() { |
||||
|
// |
||||
|
// this.$positionMessage({ |
||||
|
// type: 'error', |
||||
|
// message: '请先上传证书', |
||||
|
// target: this.$refs['saveRef'], // 可以是DOM元素或选择器 |
||||
|
// position: 'top' |
||||
|
// }) |
||||
|
// let obj = {} |
||||
|
// obj.uid = this.serviceInfo.uid |
||||
|
// obj.type = this.serviceInfo.type |
||||
|
// obj.info = "" |
||||
|
// const that = this |
||||
|
// this.$http('POST', '/agentnew/ajax_payment_switch', obj).then(response => { |
||||
|
// if(response.status){ |
||||
|
// that.$message.success('保存成功'); |
||||
|
// that.payList = response.data.paylist |
||||
|
// that.$emit('saveEvent', that.payList) |
||||
|
// return true; |
||||
|
// } |
||||
|
// that.$message.error(response.info); |
||||
|
// }).catch(error => { |
||||
|
// console.error(error, 'error') |
||||
|
// }) |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</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