payCertSetting

src/router/index.js

@@ -180,6 +180,18 @@ const routes = [{
     }
   },
   {
+    path: '/agent/payCertSetting',
+    name: '钱款交易设置',
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/payCertSetting.vue'),
+    meta: {
+      title: '钱款交易设置',
+      breadcrumbParent: '收款方式' // 手动指定父级
+      // 如果想隐藏中间层级
+      // breadcrumbParent: '首页', // 跳过医生信息
+      // hideInBreadcrumb: true // 可选：隐藏当前项
+    }
+  },
+  {
     path: '/franchise',
     name: '加盟',
     component: () => import( /* webpackChunkName: "franchise" */ '../views/Franchise.vue'),

src/store/index.js

@@ -325,7 +325,7 @@ export default new Vuex.Store({
       },
       {
         name: '钱款交易',
-        path: '/agent/payList',
+        path: '/agent/payCertSetting',
         img:'site/pay_trade.svg',
         imgActive: require('@/assets/site/sitebase_active.svg'),
         list: [

src/views/agent/payCertSetting.vue

@@ -0,0 +1,629 @@
+<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">
+                                        <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="siteInfo.bing_client_id&&siteInfo.bing_developer_token">
+                                                <span :class="'yesSet'">已设置</span>
+                                                <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
+                                                    @click="manageDialog('configAppInfo')">管理设置</GuipButton>
+                                            </div>
+                                            <div class="flex" v-else>
+                                                <span :class="'notSet'">未设置</span>
+                                                <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
+                                                    @click="manageDialog('configAppInfo')">立即设置</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="primary" :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="primary" :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="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(payinfo)"
+            @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" prop="receiver_name" placeholder="请输入分账接收方名称" />
+                    <GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号"
+                        v-model="profitShareInfo.receiver_account" prop="receiver_account" placeholder="请输入分账接收方账号" />
+                    <GuipSelect v-model="profitShareInfo.relation_type" clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type"
+                        prop="card" :options="profitShareReceiversRelationType" valueKey="id1" labelKey="id2" />
+                </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',
+            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,
+
+            profitShareInfo: [],
+            profitShareReceiversRelationType: [],
+        }
+    },
+    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();
+    },
+    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) {
+                        this.profitShareStatus = response.data
+                        
+                    }
+                })
+            }).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')
+            })
+        },
+        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;
+            } else if (type == 'profit_share_receivers') {
+                this.dialogVisibleProfitShare = true;
+                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;
+        },
+        // 取消按钮事件
+        handleCancelConfig() {
+            this.dialogVisibleApiv3 = false;
+        },
+        dialogVisibleChange(data) {
+            console.log(data, 'data098908090');
+        },
+    }
+}
+</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;
+        }
+    }
+}
+</style>