zq
4 weeks ago
9 changed files with 1273 additions and 82 deletions
@ -0,0 +1,497 @@ |
|||
<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="0" 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.appid" prop="appid" 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 |
|||
}, |
|||
depart_id:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
doctor_id:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
checkAliPay:{ |
|||
type: Object, |
|||
} |
|||
|
|||
}, |
|||
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: 3, |
|||
|
|||
// 添加收款方式弹框 |
|||
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: '1', |
|||
// 拼多多店铺名称 |
|||
pdd_shop_name: '', |
|||
alipayInfo:{ |
|||
company_short_name: '', |
|||
appid:'' |
|||
}, |
|||
alipayRules:{ |
|||
company_short_name: [ |
|||
{ required: true, message: '请输入公司简称', trigger: 'blur' } |
|||
], |
|||
appid: [ |
|||
{ required: true, message: '请输入支付宝账号', 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.receive_payment_account = ''; |
|||
this.receive_payment_name = ''; |
|||
this.pdd_shop_name = ''; |
|||
this.isPayPublic = '1'; // 重置支付宝标签页 |
|||
}, |
|||
// 弹框相关方法---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; |
|||
// console.log(this.doctor_id,this.depart_id,'depart_id'); |
|||
this.$refs.alipayForm.validate((valid) => { |
|||
console.log(valid,'valid==='); |
|||
if (valid) { |
|||
falseFlag = true; |
|||
this.$http('POST', '/api/admin/set_pay_method', { |
|||
doctor_id:this.doctor_id, |
|||
depart_id:this.depart_id, |
|||
type:this.payTypeAlipay, |
|||
company_short_name: this.alipayInfo.company_short_name, |
|||
appid: this.alipayInfo.appid, |
|||
// pay_id:1 |
|||
// is_pay_public: this.isPayPublic, |
|||
}).then(response => { |
|||
if (response.code == 0) { |
|||
if (!response.data.auth_url) { |
|||
this.$Message.success(response.msg); |
|||
} else { |
|||
window.open(response.data.auth_url, '_blank'); |
|||
} |
|||
} else { |
|||
this.$Message.error(response.msg); |
|||
} |
|||
}).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(); // 切换支付方式时重置表单 |
|||
}, |
|||
checkAliPay(newVal){ |
|||
if(newVal){ |
|||
this.alipayInfo = {...newVal} |
|||
console.log(this.alipayInfo,'newVal=====newVal'); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
</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> |
|||
@ -0,0 +1,194 @@ |
|||
<template> |
|||
<div :class="[list && list.length > 0 ?'mt32':'pagePadding']"> |
|||
<div :class="[list && list.length > 0 ? '' : 'flex-common']"> |
|||
<div class="pageheader flex-between mb32"> |
|||
<p class="littleTitle ">收款方式</p> |
|||
<div class="button-group flex"> |
|||
<GuipButton @click="goToWxPay" type="system" :btnstyle="{ width: '130px', height: '33px' }">增加微信收款</GuipButton> |
|||
<GuipButton @click="goBindPay" type="system" :btnstyle="{ width: '130px', height: '33px' }">增加支付宝收款</GuipButton> |
|||
</div> |
|||
</div> |
|||
<el-form> |
|||
<GuipTable :tableData="payList" :loading="tableLoading"> |
|||
<el-table-column prop="type" fixed="left" label="类型" width="140"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex gap10"> |
|||
<img v-show="scope.row.type == 2" class="pay_type_img" src="@/assets/weixin.svg" alt=""> |
|||
<img v-show="scope.row.type == 3" class="pay_type_img" src="@/assets/zhifubao.svg" alt=""> |
|||
{{ scope.row.type_desc }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="company_short_name" label="公司简称" min-width="160px"></el-table-column> |
|||
<el-table-column prop="appid" label="账号" min-width="288px"></el-table-column> |
|||
<el-table-column prop="expires_time_desc" label="有效期" min-width="260px"></el-table-column> |
|||
<el-table-column prop="status" label="上传证书" min-width="258px"> |
|||
<template slot-scope="scope"> |
|||
<div :class="'flex'+(scope.row.have_cert?'':' error')" v-if="scope.row.type == 2"> |
|||
{{ scope.row.have_cert ? '已上传' : '未上传' }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" label="启用状态" min-width="130px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<GuipSwitch v-model="scope.row.status" active-value="1" inactive-value="0" |
|||
@change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" min-width="130px" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="paySetting(scope.row, scope.row.type)" type="text">修改</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
<addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" @update:data="handleUpdateEvent" |
|||
:isExistSelfSupplys="isExistSelfSupplys" :doctor_id="doctor_id" :depart_id="depart_id" :checkAliPay="checkAliPay"></addPay> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipTable from '@/components/GuipTable.vue'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import addPay from '@/components/addPay.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 { |
|||
props:['doctor_id','depart_id','list'], |
|||
|
|||
data() { |
|||
return { |
|||
// 收款方式 |
|||
payTypeTaoBao: PAY_TYPE_TAOBAO, |
|||
payTypeWeixin: PAY_TYPE_WEIXIN, |
|||
payTypeAlipay: PAY_TYPE_ALIPAY, |
|||
payTypeJingdong: PAY_TYPE_JINGDONG, |
|||
payTypePdd: PAY_TYPE_PDD, |
|||
payList: [ |
|||
// { |
|||
// company_short_name:'微信', |
|||
// type:2, |
|||
// appid:'29384923', |
|||
// mch_id:'98329032wer', |
|||
// pkey:'6634452qwjbj' |
|||
// }, |
|||
// { |
|||
// company_short_name:'支付宝', |
|||
// type:3, |
|||
// appid:'0948032849023' |
|||
// }, |
|||
], |
|||
tableLoading: true, |
|||
doctorId:'', |
|||
departId:'', |
|||
isShowAddPay: false, |
|||
addPayType: -1, |
|||
isExistSelfSupplys: false, |
|||
checkAliPay:null |
|||
}; |
|||
}, |
|||
components: { |
|||
GuipTable, |
|||
GuipSwitch, |
|||
GuipButton, |
|||
addPay, |
|||
|
|||
}, |
|||
watch:{ |
|||
|
|||
list: { |
|||
deep: true, |
|||
handler(newVal) { |
|||
console.log(newVal,'newVal====='); |
|||
this.payList = [...newVal]; |
|||
this.tableLoading = false; |
|||
|
|||
} |
|||
} |
|||
}, |
|||
created(){ |
|||
const {doctor_id,depart_id } = this.$route.query; |
|||
if(depart_id && doctor_id){ |
|||
this.departId =depart_id; |
|||
this.doctorId =doctor_id; |
|||
} |
|||
console.log(this.doctor_id,'=doctor_id==='); |
|||
|
|||
}, |
|||
mounted() { |
|||
if(this.doctor_id){ |
|||
this.getBindpayList() |
|||
} |
|||
}, |
|||
methods: { |
|||
async getBindpayList() { |
|||
await this.$http('POST', '/api/admin/get_pay_list', { |
|||
doctor_id: this.doctor_id, |
|||
depart_id: this.depart_id |
|||
}).then(response => { |
|||
this.payList = response.data; |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
handleEvent(data) { |
|||
this.isShowAddPay = data; |
|||
}, |
|||
handleUpdateEvent(data){ |
|||
if (data.type == this.payTypeWeixin) { |
|||
this.bindWxpayId = data.payid; |
|||
this.selectWxpay = data; |
|||
} |
|||
if (data.type == this.payTypeAlipay) { |
|||
this.bindAlipayId = data.payid; |
|||
this.selectAlipay = data; |
|||
} |
|||
}, |
|||
paySetting(row, payType) { |
|||
if(payType == 3){ |
|||
this.checkAliPay = {...row} |
|||
this.goBindPay() |
|||
}else{ |
|||
this.goToWxPay(this.doctor_id,row.id) |
|||
} |
|||
}, |
|||
updatePayStatus(row) { |
|||
this.$emit('updatePayStatus', row) |
|||
}, |
|||
goToWxPay(doctor_id, pay_id){ |
|||
if(!doctor_id) doctor_id = this.doctor_id; |
|||
var urlpath = `/setPaymentForm?doctor_id=${doctor_id}`; |
|||
if(pay_id) urlpath += `&pay_id=${pay_id}`; |
|||
|
|||
this.$router.push(urlpath); |
|||
}, |
|||
goBindPay() { |
|||
this.addPayType = this.payTypeAlipay; |
|||
this.isShowAddPay = true; |
|||
}, |
|||
}, |
|||
|
|||
|
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.pay_type_img{ |
|||
width: 16px; |
|||
height: 16px; |
|||
} |
|||
.error{ |
|||
color: #FD3B3B; |
|||
} |
|||
.pageheader{ |
|||
|
|||
} |
|||
</style> |
|||
@ -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