From d93cdaaf8931ce0f6197c490692e109945b503d2 Mon Sep 17 00:00:00 2001
From: rainbro <33367671@qq.com>
Date: Thu, 3 Jul 2025 17:57:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=81=E4=B9=A6=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/agent/payCertSetting.vue | 209 +++++++++++++++++++++----------------
 1 file changed, 117 insertions(+), 92 deletions(-)

diff --git a/src/views/agent/payCertSetting.vue b/src/views/agent/payCertSetting.vue
index 21e42ed..916fd91 100644
--- a/src/views/agent/payCertSetting.vue
+++ b/src/views/agent/payCertSetting.vue
@@ -3,29 +3,44 @@
         <!-- page content -->
         <div class="site-setting-wrap min-flex-right">
             <div class="siteMessage flex-common mt12" id="siteMessage1">
-                <h3>管理证书</h3>
+                <h3 class="mb12">管理证书</h3>
+                <div class="beforeNotice">
+                    <span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;"> API证书获取：
+                        <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
+                            src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>> 账户中心 > API安全，申请API证书。
+                    </span>
+                </div>
                 <el-form>
                     <div class="flex-wrap">
                         <div class="flex-left">
                             <div class="uploadwrap">
-                                <label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4"
+                                <label class="flex upload-title">上传 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 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>
-                                <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
+                                <p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p>
                             </div>
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
-                            <p class="flex-left-desc">微信客服</p>
+                            <div class="uploadwrap">
+                                <label class="flex upload-title">上传 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>
+                                <p class="uploaded" v-if="payinfo.key_uploaded">已上传</p>
+                            </div>
                         </div>
                     </div>
-                    <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" />
+                    <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="saveCert" />
                 </el-form>
             </div>
             <div class="siteMessage flex-common mt-18" id="siteMessage2">
@@ -33,16 +48,14 @@
                 <el-form>
                     <div class="flex-wrap">
                         <div class="flex-left">
-                            <div class="beforeNotice">
+                            <div class="setting">
                                 <div class="flex justify-content-space-between">
-                                    <h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3>
+                                    <h4 class="flex">功能开关</h4>
 
                                     <!-- :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>
@@ -55,14 +68,30 @@
                 <el-form class="tcpr-wrap">
                     <el-tabs v-model="profitShareTab" @tab-click="handleClick">
                         <el-tab-pane label="分账设置" name="profit_share_setting">
-                            <div class="beforeNotice">
+                            <!-- <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> -->
+                            <PromptText text="前期准备事项" :type="1" class="beforeNotice mt20">
+                                <template #next_desc>
+                                    <p class="flex">
+                                        <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
+                                        src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
+                                    </p>
+                                </template>
+                                <template #desc>
+                                    <p class="mt12 flex">
+                                        1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。
+                                    </p>
+                                    <p class="mt10 flex">
+                                        2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。
+                                    </p>
+                                </template>
+                            </PromptText>
                             <div class="semBidWrap">
                                 <div class="baidu-wrap bidWrap">
 
@@ -142,10 +171,11 @@
         </div>
 
         <GuipDialog type="normal" :dialogVisible="dialogVisibleCert" title="配置商户证书" :show-close-button="false"
-            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert(payinfo)"
+            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert()"
             @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
             <div class="config-offline-wrap">
                 <el-form>
+                    <p class="mb24">微信商户平台> 账户中心 > API安全，申请API证书。</p>
                     <!-- accept=".jpg,.png" -->
                     <div class="uploadwrap">
                         <label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4"
@@ -159,9 +189,8 @@
 
                     </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 class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
+                        <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' }">
@@ -216,6 +245,7 @@ import GuipButton from '@/components/GuipButton.vue'
 import GuipDialog from '@/components/GuipDialog.vue'
 import GuipInput from '@/components/GuipInput.vue'
 import GuipSelect from '@/components/GuipSelect.vue'
+import PromptText from '@/components/PromptText.vue'
 
 // 收款方式
 const PAY_TYPE_TAOBAO = 0;    // 淘宝
@@ -235,6 +265,7 @@ export default {
         GuipDialog,
         GuipInput,
         GuipSelect,
+        PromptText,
     },
     data() {
         return {
@@ -407,8 +438,7 @@ export default {
             }
         },
         // 确认按钮事件
-        saveCert(row) {
-            this.formData.set('apiv3',row.apiv3)
+        saveCert() {
             // for(let [key,value] of this.formData){
             //     console.log(key,value,'=====key');
             // }
@@ -430,7 +460,7 @@ export default {
             }).catch(error => {
                 console.error(error, 'error')
             })
-            this.dialogVisibleApiv3 = false;
+            this.dialogVisibleCert = false;
         },
         saveApiv3(row) {
             this.$http('POST', '/agentnew/ajax_save_apiv3', {
@@ -529,73 +559,12 @@ a {
 
 .justify-content-space-between {
     justify-content: space-between;
+    align-items: center;
 }
 .upload-demo{
     margin-top: 12px;
 }
 
-.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;
@@ -761,9 +730,9 @@ lable {
         margin-top: 2px;
         padding-left: 23px;
 
-        p {
-            color: #8A9099;
-        }
+        // p {
+        //     color: #8A9099;
+        // }
 
     }
 
@@ -796,8 +765,8 @@ lable {
         margin-right: 10px;
 
         img {
-            margin-left: 12px;
-            margin-right: 12px;
+            margin-left: 5px;
+            margin-right: 5px;
         }
     }
 }
@@ -829,4 +798,60 @@ lable {
     letter-spacing: 0.08em;
     color: #23242B;
 }
+
+.uploaded {
+    color: #606266;
+    font-size: 12px;
+    margin-top:10px;
+}
+
+.setting {
+
+    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;
+                }
+            }
+        }
+    }
+}
 </style>
\ No newline at end of file