8 changed files with 953 additions and 1 deletions
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,916 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<div class="pageheader"> |
|||
<div class="pageheader-title"> |
|||
<h3>收款列表</h3> |
|||
</div> |
|||
|
|||
<div class="button-group"> |
|||
<GuipButton :key="item.type" v-for="item in addablePays" :btnstyle="{ width: '150px', height: '33px' }" @click="showAddPaymentMethodDialog(item.type, item.type_desc)">添加{{ item.type_desc }}</GuipButton> |
|||
</div> |
|||
</div> |
|||
<!-- 支付宝 --> |
|||
<div class="register-wrap"> |
|||
<div class="step3-wrap"> |
|||
<div class="step3-top flex-common"> |
|||
<h3 class="flex gap8"> |
|||
<img src="@/assets/register/zhifubao.svg" alt=""> |
|||
支付宝收款</h3> |
|||
</div> |
|||
<div> |
|||
<div class="flex-common table-wrap"> |
|||
<el-form> |
|||
<GuipTable :border="true" :tableData="payList[payTypeAlipay]" :loading="tableLoading"> |
|||
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column> |
|||
<el-table-column prop="account" label="账号"></el-table-column> |
|||
<el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column> |
|||
<el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch v-if="scope.row.is_pay_public == 0" :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
<el-popover |
|||
placement="bottom" |
|||
title="标题" |
|||
width="200" |
|||
trigger="click" |
|||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> |
|||
<img slot="reference" src="@/assets/site/bind_sites.svg" :color="'#8A9099'" :hoverColor="'#006AFF'" /> |
|||
</el-popover> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick2(scope.row)" type="text">设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 微信 --> |
|||
<div class="register-wrap"> |
|||
<div class="step3-wrap"> |
|||
<div class="step3-top flex-common"> |
|||
<h3 class="flex gap8"> |
|||
<img src="@/assets/register/weixin.svg" alt=""> |
|||
微信收款</h3> |
|||
</div> |
|||
<div> |
|||
<div class="flex-common table-wrap"> |
|||
<el-form> |
|||
<GuipTable :border="true" :tableData="payList[payTypeWeixin]" :loading="tableLoading"> |
|||
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column> |
|||
<el-table-column prop="account" label="账号"></el-table-column> |
|||
<el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column> |
|||
<el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch v-if="scope.row.is_pay_public == 0" :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick2(scope.row)" type="text">设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 淘宝 --> |
|||
<div class="register-wrap"> |
|||
<div class="step3-wrap"> |
|||
<div class="step3-top flex-common"> |
|||
<h3 class="flex gap8"> |
|||
<img src="@/assets/register/taobao.svg" alt=""> |
|||
淘宝/天猫店铺</h3> |
|||
</div> |
|||
<div> |
|||
<div class="flex-common table-wrap"> |
|||
<el-form> |
|||
<GuipTable :border="true" :tableData="payList[payTypeTaoBao]" :loading="tableLoading"> |
|||
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column> |
|||
<el-table-column prop="account" label="账号"></el-table-column> |
|||
<el-table-column prop="expires_time" label="有效期" min-width="50px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.is_expired==true" class="red">授权过期</span> |
|||
<span v-else>{{ scope.row.expires_time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick2(scope.row)" type="text">设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 拼多多 --> |
|||
<div class="register-wrap"> |
|||
<div class="step3-wrap"> |
|||
<div class="step3-top flex-common"> |
|||
<h3 class="flex gap8"> |
|||
<img src="@/assets/register/pinduoduo.svg" alt=""> |
|||
拼多多店铺</h3> |
|||
</div> |
|||
<div> |
|||
<div class="flex-common table-wrap"> |
|||
<el-form> |
|||
<GuipTable :border="true" :tableData="payList[payTypePdd]" :loading="tableLoading"> |
|||
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column> |
|||
<el-table-column prop="account" label="账号"></el-table-column> |
|||
<el-table-column prop="expires_time" label="有效期" min-width="50px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.is_expired==true" class="red">授权过期</span> |
|||
<span v-else>{{ scope.row.expires_time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick2(scope.row)" type="text">设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 京东 --> |
|||
<div class="register-wrap"> |
|||
<div class="step3-wrap"> |
|||
<div class="step3-top flex-common"> |
|||
<h3 class="flex gap8"> |
|||
<img src="@/assets/register/jingdong.svg" alt=""> |
|||
京东店铺</h3> |
|||
</div> |
|||
<div> |
|||
<div class="flex-common table-wrap"> |
|||
<el-form> |
|||
<GuipTable :border="true" :tableData="payList[payTypeJingdong]" :loading="tableLoading"> |
|||
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column> |
|||
<el-table-column prop="account" label="账号"></el-table-column> |
|||
<el-table-column prop="expires_time" label="有效期" min-width="50px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.is_expired==true" class="red">授权过期</span> |
|||
<span v-else>{{ scope.row.expires_time }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> |
|||
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> |
|||
<!-- 传入的modelvalue 为数字 0 或者 1 --> |
|||
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" min-width="30px"> |
|||
<template slot-scope="scope"> |
|||
<div class="flex"> |
|||
<el-button @click="handleClick2(scope.row)" type="text">设置</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</GuipTable> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false" |
|||
:show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel" |
|||
@close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="700px"> |
|||
<!-- 自定义内容 --> |
|||
<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-else-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> |
|||
<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. 公司支付宝账号"> |
|||
<span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipay_account" prop="mch_id" 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 class="jdpay" v-if="addPayType==payTypeJingdong"> |
|||
<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> |
|||
</GuipDialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
import GuipSwitch from '@/components/GuipSwitch.vue'; |
|||
import GuipDialog from '@/components/GuipDialog.vue'; |
|||
import GuipTable from '@/components/GuipTable.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 { |
|||
components: { |
|||
GuipButton, |
|||
GuipFormItem, |
|||
GuipInput, |
|||
GuipSwitch, |
|||
GuipDialog, |
|||
GuipTable, |
|||
}, |
|||
data() { |
|||
return { |
|||
// 收款方式 |
|||
payTypeTaoBao: PAY_TYPE_TAOBAO, |
|||
payTypeWeixin: PAY_TYPE_WEIXIN, |
|||
payTypeAlipay: PAY_TYPE_ALIPAY, |
|||
payTypeJingdong: PAY_TYPE_JINGDONG, |
|||
payTypePdd: PAY_TYPE_PDD, |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
// 可添加的收款方式 |
|||
addablePays: [], |
|||
// 收款方式列表 |
|||
payList: [], |
|||
// 表格加载 |
|||
tableLoading: false, |
|||
// 添加收款方式弹框 |
|||
addPayDialogVisible: false, |
|||
// 控制是否显示取消按钮 |
|||
showCancelButton: true, |
|||
// 控制是否显示关闭按钮 |
|||
showCloseButton: true, |
|||
// 添加收款方式弹框标题 |
|||
addPayTitle: '', |
|||
// 添加收款方式类型 |
|||
addPayType: '', |
|||
// 添加收款方式确认按钮文本 |
|||
addPayconfirmText: '确定', |
|||
// 淘宝授权url |
|||
taobaoAuthUrl: '', |
|||
// 公司简称 |
|||
company_short_name: '', |
|||
// 商户号 |
|||
mch_id: '', |
|||
// 微信支付秘钥 |
|||
apiv2: '', |
|||
// 公众号APPID |
|||
appid: '', |
|||
// 支付宝账号 |
|||
alipay_account: '', |
|||
// 是否存在自供货 存在自供货 则不支持支付宝代收款 |
|||
isExistSelfSupplys: false, |
|||
// 代收款 收款账号 |
|||
receive_payment_account: '', |
|||
// 代收款 收款人姓名 |
|||
receive_payment_name: '', |
|||
// 是否是平台支付 0平台支付 1自营支付 |
|||
isPayPublic: '0', |
|||
// 拼多多授权url |
|||
pddAuthUrl: '', |
|||
// 拼多多店铺名称 |
|||
pdd_shop_name: '', |
|||
// 京东授权url |
|||
jdAuthUrl: '', |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.getAddablePays() |
|||
this.getPayList() |
|||
}, |
|||
methods: { |
|||
// 获取可添加的收款方式 |
|||
getAddablePays() { |
|||
this.$http('POST', '/agentnew/ajax_get_addable_pays', { |
|||
gid: this.gid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
this.addablePays = response.data |
|||
if(response.data[PAY_TYPE_TAOBAO]) { |
|||
this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl |
|||
} |
|||
|
|||
if (response.data[PAY_TYPE_ALIPAY]) { |
|||
this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys |
|||
} |
|||
|
|||
if (response.data[PAY_TYPE_PDD]) { |
|||
this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl |
|||
} |
|||
|
|||
if (response.data[PAY_TYPE_JINGDONG]) { |
|||
this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl |
|||
} |
|||
|
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 获取支付列表 |
|||
getPayList() { |
|||
this.tableLoading = true |
|||
const that = this |
|||
that.payList = [] |
|||
this.$http('POST', '/agentnew/ajax_get_pay_list', { |
|||
gid: this.gid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.tableLoading = false |
|||
this.$nextTick(() => { |
|||
that.payList = response.data.paylist |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
updatePayStatus(row) { |
|||
this.$http('POST', '/agentnew/ajax_update_pay_status', { |
|||
payid: row.payid, |
|||
status: row.status==1 ? 0 : 1, |
|||
}, { |
|||
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') |
|||
}) |
|||
}, |
|||
updateAutoRefund(row) { |
|||
this.$http('POST', '/agentnew/ajax_setting_auto_refund', { |
|||
payid: row.payid, |
|||
status: row.status==1 ? 0 : 1, |
|||
}, { |
|||
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') |
|||
}) |
|||
}, |
|||
|
|||
// 弹框相关方法---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 |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
|
|||
} else if (this.addPayType == PAY_TYPE_ALIPAY) { |
|||
this.$http('POST', '/agentnew/ajax_add_alipay', { |
|||
company_short_name: this.company_short_name, |
|||
alipay_account: this.alipay_account, |
|||
is_pay_public: this.isPayPublic, |
|||
receive_payment_account: this.receive_payment_account, |
|||
receive_payment_name: this.receive_payment_name |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
if (this.isPayPublic == 1) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
this.receive_payment_account = '' |
|||
this.receive_payment_name = '' |
|||
} else { |
|||
window.open(response.data.authurl, '_blank'); |
|||
} |
|||
|
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} else if (this.addPayType == PAY_TYPE_PDD) { |
|||
this.$http('POST', '/agentnew/ajax_add_pddpay', { |
|||
shop_name: this.pdd_shop_name, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
this.pdd_shop_name = '' |
|||
|
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} else if (this.addPayType == PAY_TYPE_JINGDONG) { |
|||
window.open(this.jdAuthUrl, '_blank'); |
|||
} |
|||
|
|||
this.addPayDialogVisible = false; |
|||
}, |
|||
// 取消按钮事件 |
|||
handleCancel() { |
|||
this.addPayDialogVisible = false; |
|||
}, |
|||
// 关闭弹框事件 |
|||
handleClose() { |
|||
this.addPayDialogVisible = false; |
|||
}, |
|||
dialogVisibleChange(data) { |
|||
console.log(data, 'data098908090'); |
|||
}, |
|||
// 弹框相关方法---end |
|||
handleClick(tab, event) { |
|||
console.log(tab, event); |
|||
} |
|||
}, |
|||
|
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.pageheader { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.pageheader-title { |
|||
flex: 1; |
|||
min-width: 300px; |
|||
} |
|||
|
|||
.pageheader-title h3 { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
margin-top:8px; |
|||
} |
|||
|
|||
.button-group { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 3px; |
|||
} |
|||
.red { |
|||
color:#FF4D4F !important; |
|||
} |
|||
|
|||
.gray { |
|||
color:#8A9099 !important; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
.el-table { |
|||
min-height: auto !important; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .custom-popover { |
|||
position: fixed !important; |
|||
// max-height: 290px; |
|||
// overflow-y: auto; |
|||
margin-top: 0 !important; |
|||
margin-left: 0 !important; |
|||
transform: none !important; |
|||
} |
|||
|
|||
.register-wrap { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
|
|||
.custom-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
.register-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
// height: 72px; |
|||
align-items: center; |
|||
padding: 20px 40px 20px 110px; |
|||
background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%); |
|||
color: #23242B; |
|||
letter-spacing: 0.08em; |
|||
line-height: 32px; |
|||
|
|||
.register-top-left { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.register-top-left img { |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.step3-wrap { |
|||
flex: 1; |
|||
|
|||
.step3-top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-bottom: 0; |
|||
align-items: end; |
|||
h3{ |
|||
margin: 0; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.table-wrap { |
|||
span { |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.edit_icon { |
|||
display: none; |
|||
transition: all .3s; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.el-table__row:hover { |
|||
.edit_icon { |
|||
display: block; |
|||
transition: all .3s; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.green, |
|||
.blue { |
|||
width: 80px; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #0DAF49 !important; |
|||
letter-spacing: 0.08em; |
|||
/* 基本 */ |
|||
width: 80px; |
|||
border-radius: 4px; |
|||
background: rgba(239, 255, 224, 0.5); |
|||
box-sizing: border-box; |
|||
border: 1px solid rgba(0, 194, 97, 0.6); |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.blue { |
|||
background: #F2F7FF; |
|||
border: 1px solid #BFDAFF; |
|||
color: #006AFF !important; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.step-wrap { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 24px 0 0 0; |
|||
|
|||
.step-item { |
|||
align-items: center; |
|||
display: flex; |
|||
|
|||
span { |
|||
color: #1E2226; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
|
|||
.custom-icon { |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
|
|||
.checked span { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #006AFF !important; |
|||
transition: all .3s; |
|||
|
|||
} |
|||
|
|||
.success span { |
|||
font-size: 16px; |
|||
font-weight: normal; |
|||
color: #006AFF !important; |
|||
transition: all .3s; |
|||
} |
|||
|
|||
.step-line { |
|||
flex: 1; |
|||
margin: 0 32px; |
|||
border-bottom: 1px solid #DFE2E6; |
|||
} |
|||
|
|||
.step_active-line { |
|||
transition: all .3s; |
|||
border-bottom: 1px solid #006AFF; |
|||
} |
|||
} |
|||
|
|||
.step-desc { |
|||
padding-top: 6px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding-bottom: 24px; |
|||
color: #8A9099; |
|||
|
|||
span { |
|||
padding-left: 36px; |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue