证书上传

src/views/agent/payCertSetting.vue

@@ -60,6 +60,7 @@
                                 <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="">
@@ -68,16 +69,16 @@
                                                     <p>微信商户平台> 账户中心 > API安全，申请API证书。</p>
                                                 </div>
                                             </div>
-                                            <!-- <div class="flex" v-if="siteInfo.bing_client_id&&siteInfo.bing_developer_token">
+                                            <div class="flex" v-if="payinfo.apiv3">
                                                 <span :class="'yesSet'">已设置</span>
-                                                <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
-                                                    @click="manageDialog('configAppInfo')">管理设置</GuipButton>
+                                                    @click="showDialog('cert')">管理设置</GuipButton>
                                             </div>
                                             <div class="flex" v-else>
                                                 <span :class="'notSet'">未设置</span>
-                                                <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
-                                                    @click="manageDialog('configAppInfo')">立即设置</GuipButton>
+                                                    @click="showDialog('cert')">立即设置</GuipButton>
-                                            </div> -->
+                                            </div>
                                         </div>
                                         <div class="biditemMast mb12 flex-between">
                                             <div class="bidwrap-item-top flex">
@@ -89,7 +90,7 @@
                                             </div>
                                             <div class="flex" v-if="payinfo.apiv3">
                                                 <span :class="'yesSet'">已设置</span>
-                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
                                                     @click="showDialog('apiv3')">管理设置</GuipButton>
                                             </div>
                                             <div class="flex" v-else>
@@ -108,8 +109,8 @@
                                             </div>
                                             <div class="flex" v-if="profitShareInfo.receiver_name">
                                                 <span :class="'yesSet'">已设置</span>
-                                                <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
+                                                <GuipButton type="system" :btnstyle="{ width: '126px', height: '38px' }"
-                                                    @click="showDialog('profit_share_receivers')">立即设置</GuipButton>
+                                                    @click="showDialog('profit_share_receivers')">查看</GuipButton>
                                             </div>
                                             <div class="flex" v-else>
                                                 <span :class="'notSet'">未设置</span>
@@ -126,6 +127,28 @@
                 </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">
@@ -136,18 +159,17 @@
                 </el-form>
             </div>
         </GuipDialog>
-        <GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="添加分账接收方" :show-close-button="false"
+        <GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="分账接收方" :show-close-button="false"
-            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveProfitShareReceivers(payinfo)"
+            :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="商户全称，小微商户或个体户，填开户人姓名"
+                    <GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名" v-model="profitShareInfo.receiver_name" placeholder="请输入分账接收方名称" />
-                        v-model="profitShareInfo.receiver_name" prop="receiver_name" placeholder="请输入分账接收方名称" />
+                    <GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号" v-model="profitShareInfo.receiver_account" 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" column="column"  clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type" :options="profitShareReceiversRelationType" valueKey="key" labelKey="val" placeholder="请选择分账接收方关系" @change="profitShareReceiversRelationTypeChange(profitShareInfo)" />
-                    <GuipSelect v-model="profitShareInfo.relation_type" clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type"
+                    <GuipInput v-if="this.showCustomInput" ref="GuipInput" column="column" required label="自定义接收方关系" desc="最多10个字" v-model="profitShareInfo.custom_relation" placeholder="请输入自定义接收方关系" />
-                        prop="card" :options="profitShareReceiversRelationType" valueKey="id1" labelKey="id2" />
                 </el-form>
             </div>
         </GuipDialog>
@@ -187,6 +209,7 @@ export default {
         return {
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            payid: '',
             payinfo: [],
             payType: -1,
             payIsAutoRefund: -1,
@@ -204,9 +227,19 @@ export default {
             profitShareTab: 'profit_share_setting',
             dialogVisibleApiv3: false,
             dialogVisibleProfitShare: false,
+            dialogVisibleCert: false,
 
-            profitShareInfo: [],
+            profitShareInfo: {
+                'receiver_name': '',
+            },
             profitShareReceiversRelationType: [],
+            showCustomInput: false,
+
+            uploadParams: { 
+            },
+            uploadHeaders: { 
+                'Auth': this.token
+            },
         }
     },
     computed: {
@@ -221,6 +254,7 @@ export default {
 
         this.getPayment();
         this.getProfitShareInfo();
+        this.payid = this.$route.query.payid;
     },
     methods: {
         getPayment() {
@@ -256,9 +290,9 @@ export default {
             }).then(response => {
                 this.$nextTick(() => {
                     this.profitShareReceiversRelationType = response.data.receivers_relation_type
-                    if (response.status) {
+                    if (response.status && response.data.receivers.length > 0) {
-                        this.profitShareStatus = response.data
+                        this.profitShareInfo = response.data.receivers[0]
-                        
+                        console.log(this.profitShareInfo)
                     }
                 })
             }).catch(error => {
@@ -286,6 +320,27 @@ export default {
                 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();
         },
@@ -305,12 +360,42 @@ export default {
             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,
@@ -333,13 +418,48 @@ export default {
 
             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>
@@ -626,4 +746,30 @@ lable {
         }
     }
 }
+
+.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>