|
|
|
@ -1,10 +1,10 @@ |
|
|
|
<template> |
|
|
|
<div class="main-content12"> |
|
|
|
<div class="main-content12 payInfo_wrap"> |
|
|
|
<!-- page content --> |
|
|
|
<div class="site-setting-wrap min-flex-right"> |
|
|
|
<div class="siteMessage flex-common"> |
|
|
|
<h3>支付授权</h3> |
|
|
|
<el-form v-if="payType==payTypeTaoBao"> |
|
|
|
<el-form v-if="payType == payTypeTaoBao"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left" style="max-width:100%"> |
|
|
|
<div class="beforeNotice"> |
|
|
|
@ -15,31 +15,39 @@ |
|
|
|
<p class="mt10 flex"> |
|
|
|
如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<el-form v-else-if="payType==payTypeWeixin"> |
|
|
|
<el-form v-else-if="payType == payTypeWeixin"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left"> |
|
|
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> |
|
|
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" prop="company_short_name" placeholder="6字以内"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" |
|
|
|
prop="company_short_name" placeholder="6字以内"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" prop="mch_id" placeholder="请输入商户号"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' |
|
|
|
target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" |
|
|
|
prop="mch_id" placeholder="请输入商户号"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" prop="payinfo.apiv2" placeholder="请输入微信支付秘钥"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' |
|
|
|
target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10"> |
|
|
|
注意，支付密钥不能设置为纯数字</p></span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" |
|
|
|
prop="payinfo.apiv2" placeholder="请输入微信支付秘钥"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" class="mb24" label="4. 公众号APPID"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID"> |
|
|
|
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' |
|
|
|
target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" |
|
|
|
prop="payinfo.appid" placeholder="请输入公众号APPID"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
@ -50,26 +58,36 @@ |
|
|
|
<p>预览支付二维码</p> |
|
|
|
</div> |
|
|
|
<div class="preview-content"> |
|
|
|
|
|
|
|
<!-- 有二维码的情况 --> |
|
|
|
<QrCode v-if="qrCodeDataUrl" :imageUrl="qrCodeDataUrl" text="微信扫码支付"> |
|
|
|
<div class="flex gap8" slot="desc"> |
|
|
|
<img style="width: 16px;" src="@/assets/register/weixin.svg" alt=""> |
|
|
|
<span class="qrcode-title ft12">微信扫码支付</span> |
|
|
|
</div> |
|
|
|
</QrCode> |
|
|
|
<span v-else class="desc_title">暂未配置</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<el-form v-else-if="payType==payTypeAlipay"> |
|
|
|
<el-form v-else-if="payType == payTypeAlipay"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left"> |
|
|
|
<div v-if="payinfo.is_pay_public==0"> |
|
|
|
<div v-if="payinfo.is_pay_public == 0"> |
|
|
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> |
|
|
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" placeholder="6字以内"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" |
|
|
|
v-model="payinfo.short_name" placeholder="6字以内"></GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号"> |
|
|
|
<span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入公司支付宝账号"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" |
|
|
|
placeholder="请输入公司支付宝账号"></GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
<div v-if="payinfo.is_pay_public==1"> |
|
|
|
<div v-if="payinfo.is_pay_public == 1"> |
|
|
|
<div class="beforeNotice"> |
|
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4> |
|
|
|
<p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p> |
|
|
|
@ -77,11 +95,14 @@ |
|
|
|
</div> |
|
|
|
<GuipFormItem column="column" class="mb24" label="1. 收款人姓名"> |
|
|
|
<span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" |
|
|
|
v-model="payinfo.receive_payment_name" placeholder="6字以内"></GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号"> |
|
|
|
<span class="desc" slot="formRight">请输入有效账号</span> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" |
|
|
|
v-model="payinfo.receive_payment_account" placeholder="请输入有效收款支付宝账号"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -92,29 +113,31 @@ |
|
|
|
<p>预览支付二维码</p> |
|
|
|
</div> |
|
|
|
<div class="preview-content"> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<el-form v-else-if="payType==payTypePdd"> |
|
|
|
<el-form v-else-if="payType == payTypePdd"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left" style="max-width:100%"> |
|
|
|
<div class="beforeNotice"> |
|
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
|
|
|
<p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p> |
|
|
|
<p class="mt12 flex">主账号登录并授权。<a :href="payinfo.authurl" class="flex" |
|
|
|
target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p> |
|
|
|
<p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> |
|
|
|
<p class="mt5 flex gray">授权成功后点击下方“同步授权”。</p> |
|
|
|
</div> |
|
|
|
<GuipFormItem column="column" class="mb24" label="账号名称"> |
|
|
|
<!-- <span class="desc" slot="formRight">账号名称</span> --> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" |
|
|
|
placeholder="请输入账号名称"></GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<el-form v-else-if="payType==payTypeJingdong"> |
|
|
|
<el-form v-else-if="payType == payTypeJingdong"> |
|
|
|
<div class="flex-wrap"> |
|
|
|
<div class="flex-left" style="max-width:100%"> |
|
|
|
<div class="beforeNotice"> |
|
|
|
@ -124,33 +147,32 @@ |
|
|
|
</div> |
|
|
|
<GuipFormItem column="column" class="mb24" label="账号名称"> |
|
|
|
<!-- <span class="desc" slot="formRight">账号名称</span> --> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" placeholder="请输入账号名称"></GuipInput> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.account" |
|
|
|
placeholder="请输入账号名称"></GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Footer></Footer> |
|
|
|
<div class="register-btns"> |
|
|
|
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="cancle">取消</GuipButton> |
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText }}</GuipButton> |
|
|
|
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">{{ confirmText |
|
|
|
}}</GuipButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
<script> |
|
|
|
// import GuipInput from '@/components/GuipInput.vue'; |
|
|
|
import store from '@/store'; |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|
|
|
import GuipInput from '@/components/GuipInput.vue'; |
|
|
|
// import GuipTextarea from '@/components/GuipTextarea.vue'; |
|
|
|
// import GuipRadio from '@/components/GuipRadio.vue'; |
|
|
|
// import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
|
import GuipButton from '@/components/GuipButton.vue'; |
|
|
|
// import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|
|
|
// import {setHighActive} from '@/utils/common'; |
|
|
|
|
|
|
|
import Footer from '@/components/Footer.vue'; |
|
|
|
import QrCode from '@/components/QrCode.vue'; |
|
|
|
import QRCode from 'qrcode' |
|
|
|
// 收款方式 |
|
|
|
const PAY_TYPE_TAOBAO = 0; // 淘宝 |
|
|
|
const PAY_TYPE_WEIXIN = 2; // 微信 |
|
|
|
@ -169,6 +191,8 @@ export default { |
|
|
|
// GuipTextarea, |
|
|
|
// CustomDropdown, |
|
|
|
GuipButton, |
|
|
|
QrCode, |
|
|
|
Footer, |
|
|
|
// GroupFormBtns |
|
|
|
|
|
|
|
}, |
|
|
|
@ -185,6 +209,7 @@ export default { |
|
|
|
payTypeJingdong: PAY_TYPE_JINGDONG, |
|
|
|
payTypePdd: PAY_TYPE_PDD, |
|
|
|
confirmText: '保存', |
|
|
|
qrCodeDataUrl: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -198,13 +223,21 @@ export default { |
|
|
|
store.commit('SET_PAGETITLE', '支付授权'); |
|
|
|
|
|
|
|
this.getPayment(); |
|
|
|
// 模拟生成二维码 |
|
|
|
QRCode.toDataURL('https://your-payment-link.com') |
|
|
|
.then(url => { |
|
|
|
this.qrCodeDataUrl = url |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.error(err) |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getPayment() { |
|
|
|
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
|
|
|
payid: this.$route.query.payid, |
|
|
|
},{ |
|
|
|
headers:{ |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
@ -223,33 +256,33 @@ export default { |
|
|
|
}, |
|
|
|
// 确认按钮事件 |
|
|
|
addPayment() { |
|
|
|
if (this.payType == PAY_TYPE_TAOBAO) { |
|
|
|
window.open(this.payinfo.authurl, '_blank'); |
|
|
|
|
|
|
|
} else if (this.payType == PAY_TYPE_WEIXIN) { |
|
|
|
this.$http('POST', '/agentnew/ajax_add_weixinpay', { |
|
|
|
payid: this.$route.query.payid, |
|
|
|
company_short_name: this.payinfo.short_name, |
|
|
|
mch_id: this.payinfo.mch_id, |
|
|
|
apiv2: this.payinfo.apiv2, |
|
|
|
appid: this.payinfo.appid |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.$nextTick(() => { |
|
|
|
if (response.status) { |
|
|
|
this.$Message.success(response.info); |
|
|
|
} else { |
|
|
|
this.$Message.error(response.info); |
|
|
|
if (this.payType == PAY_TYPE_TAOBAO) { |
|
|
|
window.open(this.payinfo.authurl, '_blank'); |
|
|
|
|
|
|
|
} else if (this.payType == PAY_TYPE_WEIXIN) { |
|
|
|
this.$http('POST', '/agentnew/ajax_add_weixinpay', { |
|
|
|
payid: this.$route.query.payid, |
|
|
|
company_short_name: this.payinfo.short_name, |
|
|
|
mch_id: this.payinfo.mch_id, |
|
|
|
apiv2: this.payinfo.apiv2, |
|
|
|
appid: this.payinfo.appid |
|
|
|
}, { |
|
|
|
headers: { |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
this.$nextTick(() => { |
|
|
|
if (response.status) { |
|
|
|
this.$Message.success(response.info); |
|
|
|
} else { |
|
|
|
this.$Message.error(response.info); |
|
|
|
} |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
|
|
|
|
} else if (this.payType == PAY_TYPE_ALIPAY) { |
|
|
|
} else if (this.payType == PAY_TYPE_ALIPAY) { |
|
|
|
this.$http('POST', '/agentnew/ajax_add_alipay', { |
|
|
|
payid: this.$route.query.payid, |
|
|
|
company_short_name: this.payinfo.short_name, |
|
|
|
@ -266,10 +299,10 @@ export default { |
|
|
|
if (response.status) { |
|
|
|
if (this.payinfo.is_pay_public == 1) { |
|
|
|
this.$Message.success(response.info); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
window.open(response.data.authurl, '_blank'); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
this.$Message.error(response.info); |
|
|
|
} |
|
|
|
@ -295,7 +328,7 @@ export default { |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
} else if (this.payType == PAY_TYPE_JINGDONG) { |
|
|
|
} else if (this.payType == PAY_TYPE_JINGDONG) { |
|
|
|
window.open(this.payinfo.authurl, '_blank'); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -304,43 +337,73 @@ export default { |
|
|
|
}, |
|
|
|
cancle() { |
|
|
|
this.getPayment(); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
color: #006AFF; |
|
|
|
text-decoration: none; |
|
|
|
color: #006AFF; |
|
|
|
} |
|
|
|
|
|
|
|
.payInfo_wrap { |
|
|
|
height: calc(100% - 80px); |
|
|
|
box-sizing: border-box; |
|
|
|
overflow-y: auto; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.register-btns { |
|
|
|
// height: 78px; |
|
|
|
/* 自动布局 */ |
|
|
|
// width: 344px; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
background: #FFFFFF; |
|
|
|
padding: 16px 0px; |
|
|
|
/* 蓝色阴影_常规 */ |
|
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|
|
|
|
|
|
|
button:nth-child(1) { |
|
|
|
margin-right: 56px; |
|
|
|
} |
|
|
|
// height: 78px; |
|
|
|
/* 自动布局 */ |
|
|
|
// width: 344px; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: center; |
|
|
|
background: #FFFFFF; |
|
|
|
padding: 16px 0px; |
|
|
|
/* 蓝色阴影_常规 */ |
|
|
|
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|
|
|
|
|
|
|
button:nth-child(1) { |
|
|
|
margin-right: 56px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.preview { |
|
|
|
background: #FAFAFA; |
|
|
|
border-radius: 4px; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
text-align: left; |
|
|
|
padding: 24px 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.preview-title { |
|
|
|
padding-top: 24px; |
|
|
|
padding-left: 20px; |
|
|
|
// padding-top: 24px; |
|
|
|
// padding-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.qrcode-title { |
|
|
|
font-size: 12px; |
|
|
|
line-height: 13px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #0DAF49; |
|
|
|
} |
|
|
|
|
|
|
|
.desc_title { |
|
|
|
font-size: 16px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #626573; |
|
|
|
} |
|
|
|
|
|
|
|
.preview-title p { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
@ -351,10 +414,12 @@ a { |
|
|
|
|
|
|
|
.preview-content { |
|
|
|
margin-top: 20px; |
|
|
|
margin-left: 20px; |
|
|
|
// margin-left: 20px; |
|
|
|
padding: 16px; |
|
|
|
box-sizing: border-box; |
|
|
|
background: #FFFFFF; |
|
|
|
width: 100%; |
|
|
|
height: 200px; |
|
|
|
min-height: 138px; |
|
|
|
} |
|
|
|
|
|
|
|
.beforeNotice { |
|
|
|
@ -428,6 +493,6 @@ a { |
|
|
|
|
|
|
|
.site-setting-wrap { |
|
|
|
width: 100%; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
