kuailelunwen_new_houtai/src/views/agent/payCertSetting.vue

<template>
    <div class="main-content12">
        <!-- page content -->
        <div class="site-setting-wrap min-flex-right">
            <div class="siteMessage flex-common mt12" id="siteMessage1">
                <h3>管理证书</h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="uploadwrap">
                                <label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
                                <el-upload class="flex mt12" accept=".jpg,.png" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true">

                                    <el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button>
                                </el-upload>
                                <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
                            </div>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <p class="flex-left-desc">微信客服</p>
                        </div>
                    </div>
                    <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" />
                </el-form>
            </div>
            <div class="siteMessage flex-common mt-18" id="siteMessage2">
                <h3>平台退款</h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="beforeNotice">
                                <div class="flex justify-content-space-between">
                                    <h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3>
                                    
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch>
                                </div>
                                <p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt-18" id="siteMessage3">
                <h3>分账管理</h3>
                <el-form class="tcpr-wrap">
                    <el-tabs v-model="profitShareTab" @tab-click="handleClick">
                        <el-tab-pane label="分账设置" name="profit_share_setting">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>

                                <p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p>
                                <p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p>
                            </div>
                            <div class="semBidWrap">
                                <div class="baidu-wrap bidWrap">
                                    
                                    <div class="bidwrap-item">
                                        <h3 class="flex">分账开关<GuipSwitch :modelValue="payinfo.profit_share_status" :active-value="1" :inactive-value="0" @change="updateProfitShareStatus(payinfo)"></GuipSwitch></h3>
                                        <div class="biditemMast mb12 flex-between">
                                            <div class="bidwrap-item-top flex">
                                                <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                                <div class="top-right column">
                                                    <b>配置商户证书</b>
                                                    <p>微信商户平台> 账户中心 > API安全，申请API证书。</p>
                                                </div>
                                            </div>
                                            <div class="flex" v-if="payinfo.apiv3">
                                                <span :class="'yesSet'">已设置</span>
                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('cert')">管理设置</GuipButton>
                                            </div>
                                            <div class="flex" v-else>
                                                <span :class="'notSet'">未设置</span>
                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('cert')">立即设置</GuipButton>
                                            </div>
                                        </div>
                                        <div class="biditemMast mb12 flex-between">
                                            <div class="bidwrap-item-top flex">
                                                <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                                <div class="top-right column">
                                                    <b>设置 APIv3 密钥</b>
                                                    <p class="flex">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p>
                                                </div>
                                            </div>
                                            <div class="flex" v-if="payinfo.apiv3">
                                                <span :class="'yesSet'">已设置</span>
                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('apiv3')">管理设置</GuipButton>
                                            </div>
                                            <div class="flex" v-else>
                                                <span :class="'notSet'">未设置</span>
                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('apiv3')">立即设置</GuipButton>
                                            </div>
                                        </div>
                                        <div class="biditemMast mb12 flex-between">
                                            <div class="bidwrap-item-top flex">
                                                <img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
                                                <div class="top-right column">
                                                    <b>添加分账接收方</b>
                                                    <p>接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p>
                                                </div>
                                            </div>
                                            <div class="flex" v-if="profitShareInfo.receiver_name">
                                                <span :class="'yesSet'">已设置</span>
                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('profit_share_receivers')">查看</GuipButton>
                                            </div>
                                            <div class="flex" v-else>
                                                <span :class="'notSet'">未设置</span>
                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                                    @click="showDialog('profit_share_receivers')">立即设置</GuipButton>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="分账记录" name="profit_share_list">分账记录</el-tab-pane>
                    </el-tabs>
                </el-form>
            </div>
        </div>

        <GuipDialog type="normal" :dialogVisible="dialogVisibleCert" title="配置商户证书" :show-close-button="false"
            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert(payinfo)"
            @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
            <div class="config-offline-wrap">
                <el-form>
                    <div class="uploadwrap">
                        <label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
                        <el-upload name="apiclient_cert" headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1">
                            <GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton>
                        </el-upload>
                    </div>
                    <div class="uploadwrap mt-18">
                        <label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
                        <el-upload name="apiclient_key"  headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1">
                            <GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton>
                        </el-upload>
                    </div>
                </el-form>
            </div>
        </GuipDialog>

        <GuipDialog type="normal" :dialogVisible="dialogVisibleApiv3" title="配置应用信息" :show-close-button="false"
            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveApiv3(payinfo)"
            @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
            <div class="config-offline-wrap">
                <el-form>
                    <p class="flex mb-24">请在微信商户平台的"账户中心 > API安全"中设置APIv3秘钥。</p>
                    <GuipInput ref="GuipInput" v-model="payinfo.apiv3" placeholder="请输入APIv3秘钥" />
                </el-form>
            </div>
        </GuipDialog>
        <GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="分账接收方" :show-close-button="false"
            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveProfitShareReceivers(profitShareInfo)"
            @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
            <div class="config-offline-wrap">
                <el-form>
                    <p class="flex mb-24">接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p>
                    <GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名" v-model="profitShareInfo.receiver_name" placeholder="请输入分账接收方名称" />
                    <GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号" v-model="profitShareInfo.receiver_account" placeholder="请输入分账接收方账号" />
                    
                    <GuipSelect v-model="profitShareInfo.relation_type" column="column"  clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type" :options="profitShareReceiversRelationType" valueKey="key" labelKey="val" placeholder="请选择分账接收方关系" @change="profitShareReceiversRelationTypeChange(profitShareInfo)" />
                    <GuipInput v-if="this.showCustomInput" ref="GuipInput" column="column" required label="自定义接收方关系" desc="最多10个字" v-model="profitShareInfo.custom_relation" placeholder="请输入自定义接收方关系" />
                </el-form>
            </div>
        </GuipDialog>
    </div>
    
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue'
import GuipButton from '@/components/GuipButton.vue'
import GuipDialog from '@/components/GuipDialog.vue'
import GuipInput from '@/components/GuipInput.vue'
import GuipSelect from '@/components/GuipSelect.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: '',
    props: [''],
    components: {
        GuipSwitch,
        GroupFormBtns,
        GuipButton,
        GuipDialog,
        GuipInput,
        GuipSelect,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            payid: '',
            payinfo: [],
            payType: -1,
            payIsAutoRefund: -1,
            paySvg: '',
            // 收款方式
            payTypeTaoBao: PAY_TYPE_TAOBAO,
            payTypeWeixin: PAY_TYPE_WEIXIN,
            payTypeAlipay: PAY_TYPE_ALIPAY,
            payTypeJingdong: PAY_TYPE_JINGDONG,
            payTypePdd: PAY_TYPE_PDD,
            confirmText: '保存',

            fileList: [],

            profitShareTab: 'profit_share_setting',
            dialogVisibleApiv3: false,
            dialogVisibleProfitShare: false,
            dialogVisibleCert: false,

            profitShareInfo: {
                'receiver_name': '',
            },
            profitShareReceiversRelationType: [],
            showCustomInput: false,

            uploadParams: { 
            },
            uploadHeaders: { 
                'Auth': this.token
            },
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        store.commit('SET_CUSTOMIZE', true);
        store.commit('SET_SLIDER_MENU', 'paySettingData');
    },
    mounted() {
        store.commit('SET_PAGETITLE', '支付授权');

        this.getPayment();
        this.getProfitShareInfo();
        this.payid = this.$route.query.payid;
    },
    methods: {
        getPayment() {
            this.$http('POST', '/agentnew/ajax_get_payinfo', {
                payid: this.$route.query.payid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.payinfo = response.data
                    this.payType = response.data.type
                    this.payIsAutoRefund = Number(response.data.is_auto_refund)
                    this.paySvg = require('@/assets/pay/pay_'+this.payType+'.svg')
                    if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) {
                        this.confirmText = '去授权';
                    } else if (this.payType == PAY_TYPE_PDD) {
                        this.confirmText = '同步授权';
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getProfitShareInfo() {
            this.$http('POST', '/agentnew/ajax_get_profit_share_info', {
                pid: this.$route.query.payid,
            },{
                headers:{
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.profitShareReceiversRelationType = response.data.receivers_relation_type
                    if (response.status && response.data.receivers.length > 0) {
                        this.profitShareInfo = response.data.receivers[0]
                        console.log(this.profitShareInfo)
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updatePayAutoRefund(row) {
            this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
                payid: this.$route.query.payid,
                status: row.is_auto_refund==1 ? 0 : 1,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getPayment()
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateProfitShareStatus(row) {
            this.$http('POST', '/agentnew/ajax_update_profit_share_status', {
                pid: this.$route.query.payid,
                profit_share_status: row.profit_share_status==1 ? 0 : 1,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getPayment()
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        cancle() {
            this.getPayment();
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        showDialog(type) {
            if (type == 'apiv3') {
                this.dialogVisibleApiv3 = true;
                this.dialogVisibleProfitShare = false;
                this.dialogVisibleCert = false;
            } else if (type == 'profit_share_receivers') {
                this.dialogVisibleProfitShare = true;
                this.dialogVisibleApiv3 = false;
                this.dialogVisibleCert = false;
            } else if (type == 'cert') {
                this.dialogVisibleCert = true;
                this.dialogVisibleApiv3 = false;
                this.dialogVisibleProfitShare = false;
            }
        },
        // 确认按钮事件
        saveCert(row) {
            console.log(row)
            this.$refs.upload.submit();
            // this.$http('POST', '/agentnew/upload_pay_cert', {
            //     payid: this.$route.query.payid,
            //     apiv3: row.apiv3
            // }, {
            //     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')
            // })

            // this.dialogVisibleApiv3 = false;
        },
        saveApiv3(row) {
            this.$http('POST', '/agentnew/ajax_save_apiv3', {
                pid: this.$route.query.payid,
                apiv3: row.apiv3
            }, {
                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')
            })

            this.dialogVisibleApiv3 = false;
        },
        saveProfitShareReceivers(row) {
            this.$http('POST', '/agentnew/ajax_add_profit_share_receivers', {
                pid: this.$route.query.payid,
                rname: row.receiver_name,
                raccount: row.receiver_account,
                rtype: row.relation_type,
                custom_relation: row.custom_relation
            }, {
                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')
            })

            this.dialogVisibleApiv3 = false;
        },
        // 取消按钮事件
        handleCancelConfig() {
            this.dialogVisibleApiv3 = false;
            this.dialogVisibleProfitShare = false;
            this.dialogVisibleCert = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        profitShareReceiversRelationTypeChange(row) {
            console.log(row.relation_type, 'relation_type');
            if (row.relation_type == 'CUSTOM') {
                this.showCustomInput = true;
            } else {
                this.showCustomInput = false;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #006AFF;
}

.gray {
    color: #626573 !important;
}

.mt-18 {
    margin-top: 18px;
}
.ml-23 {
    margin-left: 23px;
}

.justify-content-space-between {
    justify-content: space-between;
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
        justify-content: space-between;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_grey_0 */
    background: #FAFAFA;

    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;
        }
    }
}


.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.siteMessage h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
}

.site-setting-wrap {
    width: 100%;
}


.upload-wrap { 
    display: grid;
    justify-items: start;
}

.uploadwrap {
    text-align: left;
}

lable {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
}
.ml-4 {
    margin-left: 4px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mb-30 {
    margin-bottom: 30px;
}

.tcpr-wrap {
    .bidwrap-item {
        padding: 0 !important;
        background: transparent !important;

        .biditemMast {
            background: #fff;
            padding: 24px 16px;
        }
    }

    .semBidWrap {
        padding-bottom: 24rpx;
    }
}
.semBidWrap {
    background: #FAFAFA;
    padding: 18px 14px;
    box-sizing: border-box;

    .el-form-item {
        margin-bottom: 0;
    }

    .close-bid {
        color: #626573;
        font-size: 14px;
        font-weight: normal;
        transition: all .3s;

        &:hover {
            opacity: 0.7;
        }

        img {
            width: 16px;
            height: 16px;
            margin-left: 6px;
        }
    }


    .bidWrap {
        .bidwrap-item {
            padding: 24px 16px;
            box-sizing: border-box;
            border-radius: 8px;
            background: #FFFFFF;


            .bid-item-img {
                width: 32px;
                height: 32px;
                margin-right: 22px;
            }

            .bidwrap-item-top {
                .top-right {
                    p {
                        margin-top: 10px;
                    }

                    a {
                        text-decoration: none;
                        color: #006AFF;

                        img {
                            margin-right: 10px;
                        }
                    }
                }
            }

            .bidwrap-item-bot {
                padding-left: 54px;
                justify-content: flex-end;

            }

        }
    }

}
.notSet,
.yesSet {
    margin-right: 12px;
    color: #FF4D4F;
}

.yesSet {
    color: #00C261;
}


.beforeNotice {
    h4 {
        margin: 0;
        gap: 8px;
        justify-content: flex-start;
    }

    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: 12px;
            margin-right: 12px;
        }
    }
}

.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-title {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #23242B;
}

</style>