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.
480 lines
21 KiB
480 lines
21 KiB
<template>
|
|
<div class="config-offline-wrap">
|
|
<el-form>
|
|
<GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
|
|
:show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel"
|
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="599px">
|
|
<!-- 自定义内容 -->
|
|
<div>
|
|
<!-- 淘宝 -->
|
|
<div class="taobaopay" v-if="addPayType==payTypeTaoBao">
|
|
<div class="beforeNotice">
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
|
<p class="mt12 flex">
|
|
请确保使用要添加的淘宝主账号登录并授权
|
|
</p>
|
|
<p class="mt10 flex">
|
|
如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 微信 -->
|
|
<div class="weixinpay" v-if="addPayType==payTypeWeixin">
|
|
<div class="beforeNotice">
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
|
<p class="mt12">1.申请公司微信支付。<a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">常见问题</a> </p>
|
|
<p class="mt12 flex">
|
|
2.前往<a href="https://pay.weixin.qq.com/"
|
|
class="flex" target="_blank">
|
|
<img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
|
|
</p>
|
|
<p> 在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
|
|
</div>
|
|
<el-form>
|
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称">
|
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_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="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="apiv2" prop="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="appid" prop="appid" placeholder="请输入公众号APPID">
|
|
</GuipInput>
|
|
</GuipFormItem>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 支付宝 -->
|
|
<div class="alipay" v-if="addPayType==payTypeAlipay">
|
|
<el-tabs v-model="isPayPublic" @tab-click="handleClick">
|
|
<!-- <el-tab-pane label="我有公司，使用本公司支付宝" name="0"> -->
|
|
<el-form ref="alipayForm" :model="alipayInfo" :rules="alipayRules">
|
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称">
|
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" :maxlength="6" v-model="alipayInfo.company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
|
|
</GuipFormItem>
|
|
<GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
|
|
<span class="desc flex gap12" 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="alipayInfo.alipay_account" prop="alipay_account" placeholder="请输入公司支付宝账号"></GuipInput>
|
|
</GuipFormItem>
|
|
</el-form>
|
|
<!-- </el-tab-pane> -->
|
|
<!-- <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false">
|
|
<div class="beforeNotice">
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
|
|
<p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
|
|
<p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
|
|
</div>
|
|
<el-form>
|
|
<GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
|
|
<span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_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="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput>
|
|
</GuipFormItem>
|
|
</el-form>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
|
</div>
|
|
<!-- 拼多多 -->
|
|
<div class="pddpay" v-if="addPayType==payTypePdd">
|
|
<div class="beforeNotice">
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
|
<p class="mt12 flex">主账号登录并授权。<a :href="pddAuthUrl" 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>
|
|
<el-form>
|
|
<GuipFormItem column="column" class="mb24" label="账号名称">
|
|
<!-- <span class="desc" slot="formRight">账号名称</span> -->
|
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="pdd_shop_name" prop="company_short_name" placeholder="请输入账号名称"></GuipInput>
|
|
</GuipFormItem>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</GuipDialog>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
|
import GuipDialog from '@/components/GuipDialog.vue';
|
|
|
|
// 收款方式
|
|
const PAY_TYPE_TAOBAO = 0; // 淘宝
|
|
const PAY_TYPE_WEIXIN = 2; // 微信
|
|
const PAY_TYPE_ALIPAY = 3; // 支付宝
|
|
const PAY_TYPE_JINGDONG = 4; // 京东
|
|
const PAY_TYPE_PDD = 11; // 拼多多
|
|
|
|
export default {
|
|
// 站点设置
|
|
name: 'addPay',
|
|
props: {
|
|
// 收款方式
|
|
payType: {
|
|
type: [String, Number],
|
|
default: '-1',
|
|
// validator: value => ['success', 'warning', 'error', 'info'].includes(value)
|
|
},
|
|
// 可见性
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 淘宝授权url
|
|
taobaoAuthUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 拼多多授权url
|
|
pddAuthUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 京东授权url
|
|
jdAuthUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否存在自供货 存在自供货 则不支持支付宝代收款
|
|
isExistSelfSupplys: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
components: {
|
|
GuipInput,
|
|
GuipFormItem,
|
|
GuipDialog,
|
|
},
|
|
data() {
|
|
return {
|
|
// 收款方式
|
|
payTypeTaoBao: PAY_TYPE_TAOBAO,
|
|
payTypeWeixin: PAY_TYPE_WEIXIN,
|
|
payTypeAlipay: PAY_TYPE_ALIPAY,
|
|
payTypeJingdong: PAY_TYPE_JINGDONG,
|
|
payTypePdd: PAY_TYPE_PDD,
|
|
|
|
paytypeDesc: {
|
|
payTypeTaoBao: '淘宝/天猫店铺',
|
|
payTypeWeixin: '微信收款',
|
|
payTypeAlipay: '支付宝收款',
|
|
payTypeJingdong: '京东店铺',
|
|
payTypePdd: '拼多多店铺'
|
|
},
|
|
|
|
// 添加收款方式类型
|
|
addPayType: -1,
|
|
|
|
// 添加收款方式弹框
|
|
addPayDialogVisible: false,
|
|
// 控制是否显示取消按钮
|
|
showCancelButton: true,
|
|
// 控制是否显示关闭按钮
|
|
showCloseButton: true,
|
|
// 添加收款方式弹框标题
|
|
addPayTitle: '',
|
|
|
|
// 添加收款方式确认按钮文本
|
|
addPayconfirmText: '确定',
|
|
|
|
// 公司简称
|
|
company_short_name: '',
|
|
// 商户号
|
|
mch_id: '',
|
|
// 微信支付秘钥
|
|
apiv2: '',
|
|
// 公众号APPID
|
|
appid: '',
|
|
// 支付宝账号
|
|
alipay_account: '',
|
|
// 代收款 收款账号
|
|
receive_payment_account: '',
|
|
// 代收款 收款人姓名
|
|
receive_payment_name: '',
|
|
// 是否是平台支付 0平台支付 1自营支付
|
|
isPayPublic: '0',
|
|
// 拼多多店铺名称
|
|
pdd_shop_name: '',
|
|
alipayInfo:{
|
|
company_short_name: '',
|
|
alipay_account:''
|
|
},
|
|
alipayRules:{
|
|
company_short_name: [
|
|
{ required: true, message: '请输入公司简称', trigger: 'blur' }
|
|
],
|
|
alipay_account: [
|
|
{ required: true, message: '请输入公众号APPID', trigger: 'blur' }
|
|
],
|
|
}
|
|
|
|
// localSiteInfo: { ...this.siteInfo }
|
|
}
|
|
},
|
|
computed: {
|
|
// ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
mounted() {
|
|
// store.commit('SET_PAGETITLE', '营销推广');
|
|
},
|
|
methods: {
|
|
updateDialogByPayType() {
|
|
if (this.addPayType > -1) {
|
|
// 设置标题
|
|
let typeDesc = '';
|
|
// 根据addPayType找到对应的描述
|
|
for (let key in this.paytypeDesc) {
|
|
if (this[key] === this.addPayType) {
|
|
typeDesc = this.paytypeDesc[key];
|
|
break;
|
|
}
|
|
}
|
|
this.addPayTitle = '添加' + typeDesc;
|
|
// 设置确认按钮文本
|
|
if (this.addPayType === this.payTypeTaoBao || this.addPayType === this.payTypeJingdong) {
|
|
this.addPayconfirmText = '去授权';
|
|
} else {
|
|
this.addPayconfirmText = '确定';
|
|
}
|
|
}
|
|
},
|
|
resetForm() {
|
|
// 重置所有表单字段
|
|
this.company_short_name = '';
|
|
this.mch_id = '';
|
|
this.apiv2 = '';
|
|
this.appid = '';
|
|
this.alipay_account = '';
|
|
this.receive_payment_account = '';
|
|
this.receive_payment_name = '';
|
|
this.pdd_shop_name = '';
|
|
this.isPayPublic = '0'; // 重置支付宝标签页
|
|
},
|
|
// 弹框相关方法---start
|
|
showAddPaymentMethodDialog(type, type_desc) {
|
|
console.log(type, 'type');
|
|
this.addPayDialogVisible = true;
|
|
this.addPayTitle = '添加' + type_desc;
|
|
this.addPayType = type;
|
|
if (type == PAY_TYPE_TAOBAO || type == PAY_TYPE_JINGDONG) {
|
|
this.addPayconfirmText = '去授权';
|
|
}
|
|
},
|
|
// 确认按钮事件
|
|
addPayment() {
|
|
if (this.addPayType == PAY_TYPE_TAOBAO) {
|
|
window.open(this.taobaoAuthUrl, '_blank');
|
|
|
|
} else if (this.addPayType == PAY_TYPE_WEIXIN) {
|
|
this.$http('POST', '/agentnew/ajax_add_weixinpay', {
|
|
company_short_name: this.company_short_name,
|
|
mch_id: this.mch_id,
|
|
apiv2: this.apiv2,
|
|
appid: this.appid
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
if (response.status) {
|
|
this.init(response.data);
|
|
this.$Message.success(response.info);
|
|
|
|
} else {
|
|
this.$Message.error(response.info);
|
|
}
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
|
|
} else if (this.addPayType == PAY_TYPE_ALIPAY) { //支付宝
|
|
let falseFlag = false;
|
|
this.$refs.alipayForm.validate((valid) => {
|
|
console.log(valid,'valid===');
|
|
if (valid) {
|
|
falseFlag = true;
|
|
this.$http('POST', '/agentnew/ajax_add_alipay', {
|
|
company_short_name: this.alipayRules.company_short_name,
|
|
alipay_account: this.alipayRules.alipay_account,
|
|
// is_pay_public: this.isPayPublic,
|
|
// receive_payment_account: this.receive_payment_account,
|
|
// receive_payment_name: this.receive_payment_name
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
if (response.status) {
|
|
this.init(response.data.payid);
|
|
if (this.isPayPublic == 1) {
|
|
this.$Message.success(response.info);
|
|
} else {
|
|
// window.open(response.data.authurl, '_blank');
|
|
}
|
|
} else {
|
|
this.$Message.error(response.info);
|
|
}
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
if (!falseFlag) return;
|
|
|
|
} else if (this.addPayType == PAY_TYPE_PDD) {
|
|
this.$http('POST', '/agentnew/ajax_add_pddpay', {
|
|
shop_name: this.pdd_shop_name,
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
if (response.status) {
|
|
this.init(response.data);
|
|
this.$Message.success(response.info);
|
|
} else {
|
|
this.$Message.error(response.info);
|
|
}
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
} else if (this.addPayType == PAY_TYPE_JINGDONG) {
|
|
window.open(this.jdAuthUrl, '_blank');
|
|
}
|
|
console.log('addPayment===走到这里了');
|
|
this.init();
|
|
},
|
|
// 取消按钮事件
|
|
handleCancel() {
|
|
this.init();
|
|
},
|
|
// 关闭弹框事件
|
|
handleClose() {
|
|
this.init();
|
|
},
|
|
dialogVisibleChange(data) {
|
|
console.log(data, 'data098908090');
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
init(payid) {
|
|
this.addPayDialogVisible = false;
|
|
this.$emit('update:visible', false);
|
|
this.resetForm(); // 重置表单
|
|
|
|
if(payid){
|
|
this.$http('POST', '/agentnew/ajax_get_payinfo', {
|
|
payid: payid,
|
|
}).then(response => {
|
|
this.$nextTick(() => {
|
|
if (response.status) {
|
|
this.$emit('update:data', response.data);
|
|
}
|
|
})
|
|
}).catch(error => {
|
|
console.error(error, 'error')
|
|
})
|
|
}
|
|
},
|
|
},watch: {
|
|
visible(newVal) {
|
|
this.addPayDialogVisible = newVal;
|
|
},
|
|
payType(newVal) {
|
|
this.addPayType = newVal;
|
|
this.updateDialogByPayType();
|
|
this.resetForm(); // 切换支付方式时重置表单
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.guide{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: #8A9099 !important;
|
|
font-size: 12px;
|
|
}
|
|
a {
|
|
color: #006AFF;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|