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