From 8fbd288d314c8b5f4091f836a2dc05bad9a65b37 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 3 Jul 2025 16:27:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/agent/payCertSetting.vue | 183 ++++++++++++++++++++++++-------------
 1 file changed, 120 insertions(+), 63 deletions(-)

diff --git a/src/views/agent/payCertSetting.vue b/src/views/agent/payCertSetting.vue
index 4589e3a..21e42ed 100644
--- a/src/views/agent/payCertSetting.vue
+++ b/src/views/agent/payCertSetting.vue
@@ -8,8 +8,12 @@
                     <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">
+                                <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>
@@ -32,11 +36,13 @@
                             <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>
+                                    <GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0"
+                                        @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭">
+                                    </GuipSwitch>
                                 </div>
                                 <p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p>
                             </div>
@@ -51,16 +57,20 @@
                         <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>
+                                <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>
+                                        <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="">
@@ -76,7 +86,8 @@
                                             </div>
                                             <div class="flex" v-else>
                                                 <span :class="'notSet'">未设置</span>
-                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="primary"
+                                                    :btnstyle="{ width: '126px', height: '38px' }"
                                                     @click="showDialog('cert')">立即设置</GuipButton>
                                             </div>
                                         </div>
@@ -95,7 +106,8 @@
                                             </div>
                                             <div class="flex" v-else>
                                                 <span :class="'notSet'">未设置</span>
-                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="primary"
+                                                    :btnstyle="{ width: '126px', height: '38px' }"
                                                     @click="showDialog('apiv3')">立即设置</GuipButton>
                                             </div>
                                         </div>
@@ -114,7 +126,8 @@
                                             </div>
                                             <div class="flex" v-else>
                                                 <span :class="'notSet'">未设置</span>
-                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="primary"
+                                                    :btnstyle="{ width: '126px', height: '38px' }"
                                                     @click="showDialog('profit_share_receivers')">立即设置</GuipButton>
                                             </div>
                                         </div>
@@ -133,16 +146,27 @@
             @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
             <div class="config-offline-wrap">
                 <el-form>
+                    <!-- accept=".jpg,.png" -->
                     <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>
+                        <label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4"
+                                src="@/assets/require.svg" /></label>
+                        <el-upload class="upload-demo" :on-change="handleAvatarChange" 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>选择文件</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>
+                        <label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4"
+                                src="@/assets/require.svg" /></label>
+                                <el-upload class="upload-demo" :on-change="handleAvatarChange1" 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>选择文件</GuipButton>
+
                         </el-upload>
                     </div>
                 </el-form>
@@ -160,21 +184,28 @@
             </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">
+            :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="请输入自定义接收方关系" />
+                    <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';
@@ -221,7 +252,7 @@ export default {
             payTypeJingdong: PAY_TYPE_JINGDONG,
             payTypePdd: PAY_TYPE_PDD,
             confirmText: '保存',
-
+            formData:new FormData(),
             fileList: [],
 
             profitShareTab: 'profit_share_setting',
@@ -235,9 +266,9 @@ export default {
             profitShareReceiversRelationType: [],
             showCustomInput: false,
 
-            uploadParams: { 
+            uploadParams: {
             },
-            uploadHeaders: { 
+            uploadHeaders: {
                 'Auth': this.token
             },
         }
@@ -255,13 +286,17 @@ export default {
         this.getPayment();
         this.getProfitShareInfo();
         this.payid = this.$route.query.payid;
+        this.formData.set('payid', this.payid)
+        // for(let [key,value] of this.formData){
+        //     console.log(key,value,'=====key');
+        // }
     },
     methods: {
         getPayment() {
             this.$http('POST', '/agentnew/ajax_get_payinfo', {
                 payid: this.$route.query.payid,
-            },{
-                headers:{
+            }, {
+                headers: {
                     'Auth': this.token
                 }
             }).then(response => {
@@ -269,7 +304,7 @@ export default {
                     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')
+                    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) {
@@ -283,8 +318,8 @@ export default {
         getProfitShareInfo() {
             this.$http('POST', '/agentnew/ajax_get_profit_share_info', {
                 pid: this.$route.query.payid,
-            },{
-                headers:{
+            }, {
+                headers: {
                     'Auth': this.token
                 }
             }).then(response => {
@@ -302,7 +337,7 @@ export default {
         updatePayAutoRefund(row) {
             this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
                 payid: this.$route.query.payid,
-                status: row.is_auto_refund==1 ? 0 : 1,
+                status: row.is_auto_refund == 1 ? 0 : 1,
             }, {
                 headers: {
                     'Auth': this.token
@@ -323,7 +358,7 @@ export default {
         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,
+                profit_share_status: row.profit_share_status == 1 ? 0 : 1,
             }, {
                 headers: {
                     'Auth': this.token
@@ -373,28 +408,29 @@ export default {
         },
         // 确认按钮事件
         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;
+            this.formData.set('apiv3',row.apiv3)
+            // for(let [key,value] of this.formData){
+            //     console.log(key,value,'=====key');
+            // }
+            this.$http('POST', '/agentnew/upload_pay_cert', 
+                this.formData
+            , {
+                headers: {
+                    'Auth': this.token,
+                    'Content-Type':'multipart/form-data'
+                }
+            }).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', {
@@ -459,14 +495,24 @@ export default {
             } else {
                 this.showCustomInput = false;
             }
+        },
+        handleAvatarChange(file, fileList) {
+            console.log(file, fileList)
+            let fileObj = file.raw
+            this.formData.set('apiclient_cert', fileObj)
+        },
+        handleAvatarChange1(file, fileList) {
+            console.log(file, fileList)
+            let fileObj = file.raw
+            this.formData.set('apiclient_key', fileObj)
         }
     }
 }
 </script>
 <style lang="scss" scoped>
 a {
-  text-decoration: none;
-  color: #006AFF;
+    text-decoration: none;
+    color: #006AFF;
 }
 
 .gray {
@@ -476,6 +522,7 @@ a {
 .mt-18 {
     margin-top: 18px;
 }
+
 .ml-23 {
     margin-left: 23px;
 }
@@ -483,6 +530,9 @@ a {
 .justify-content-space-between {
     justify-content: space-between;
 }
+.upload-demo{
+    margin-top: 12px;
+}
 
 .beforeNotice {
 
@@ -565,7 +615,7 @@ a {
 }
 
 
-.upload-wrap { 
+.upload-wrap {
     display: grid;
     justify-items: start;
 }
@@ -581,12 +631,15 @@ lable {
     letter-spacing: 0.08em;
     color: #1E2226;
 }
+
 .ml-4 {
     margin-left: 4px;
 }
+
 .mb-24 {
     margin-bottom: 24px;
 }
+
 .mb-30 {
     margin-bottom: 30px;
 }
@@ -606,6 +659,7 @@ lable {
         padding-bottom: 24rpx;
     }
 }
+
 .semBidWrap {
     background: #FAFAFA;
     padding: 18px 14px;
@@ -674,6 +728,7 @@ lable {
     }
 
 }
+
 .notSet,
 .yesSet {
     margin-right: 12px;
@@ -752,18 +807,21 @@ lable {
     background: #F2F3F5;
     box-sizing: border-box;
     border: 1px solid #BABDC2;
-    .bgImg{
+
+    .bgImg {
         width: 20px;
         height: 16px;
         margin-right: 6px;
         background-image: url(@/assets/site/uploadIcon.svg);
     }
-    &:hover{
-        .bgImg{
+
+    &:hover {
+        .bgImg {
             background-image: url(@/assets/site/uploadIcon_light.svg);
         }
     }
 }
+
 .upload-title {
     font-size: 14px;
     font-weight: normal;
@@ -771,5 +829,4 @@ lable {
     letter-spacing: 0.08em;
     color: #23242B;
 }
-
 </style>
\ No newline at end of file