diff --git a/src/components/pay/addPay.vue b/src/components/pay/addPay.vue
new file mode 100644
index 0000000..f64bd36
--- /dev/null
+++ b/src/components/pay/addPay.vue
@@ -0,0 +1,484 @@
+<template>
+    <div class="config-offline-wrap">
+        <el-form>
+            <GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
+            :show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel"
+            @close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="700px">
+            <!-- 自定义内容 -->
+                <div>
+                    <!-- 淘宝 -->
+                    <div class="taobaopay"  v-if="addPayType==payTypeTaoBao">
+                        <div class="beforeNotice">
+                            <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
+                            <p class="mt12 flex">
+                                请确保使用要添加的淘宝主账号登录并授权
+                            </p>
+                            <p class="mt10 flex">
+                                如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
+                            </p>
+                        </div> 
+                    </div>
+
+                    <!-- 微信 -->
+                    <div class="weixinpay" v-else-if="addPayType==payTypeWeixin">
+                        <div class="beforeNotice">
+                            <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
+                            <p class="mt12">1.申请公司微信支付。<a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">常见问题</a> </p>
+                            <p class="mt12 flex">
+                                2.前往<a href="https://pay.weixin.qq.com/"
+                                                class="flex" target="_blank">
+                                                <img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
+                            </p>
+                            <p> 在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
+                        </div>
+                        <el-form>
+                            <GuipFormItem column="column" class="mb24" label="1. 公司简称">
+                                <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内">
+                                </GuipInput>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
+                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id" placeholder="请输入商户号">
+                                </GuipInput>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
+                                <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2" placeholder="请输入微信支付秘钥">
+                                </GuipInput>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
+                                <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
+                                <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid" placeholder="请输入公众号APPID">
+                                </GuipInput>
+                            </GuipFormItem>
+                        </el-form>
+                    </div>
+
+                    <!-- 支付宝 -->
+                    <div class="alipay"  v-if="addPayType==payTypeAlipay">
+                        <el-tabs v-model="isPayPublic" @tab-click="handleClick">
+                            <el-tab-pane label="我有公司，使用本公司支付宝" name="0">
+                            <el-form>
+                                <GuipFormItem column="column" class="mb24" label="1. 公司简称">
+                                    <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
+                                </GuipFormItem>
+                                <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
+                                    <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipay_account" prop="mch_id" placeholder="请输入公司支付宝账号"></GuipInput>
+                                </GuipFormItem>
+                            </el-form>
+                            </el-tab-pane>
+                            <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false">
+                            <div class="beforeNotice">
+                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
+                                <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
+                                <p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
+                            </div>
+                            <el-form>
+                                <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
+                                    <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
+                                </GuipFormItem>
+                                <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
+                                    <span class="desc" slot="formRight">请输入有效账号</span>
+                                    <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput>
+                                </GuipFormItem>
+                            </el-form>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    <!-- 拼多多 -->
+                    <div class="pddpay"  v-if="addPayType==payTypePdd">
+                    <div class="beforeNotice">
+                        <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
+                        <p class="mt12 flex">主账号登录并授权。<a :href="pddAuthUrl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
+                        <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
+                        <p class="mt5 flex gray">授权成功后会进入＂快乐帮手＂烽火台，复制右上角名称填入下方保存。</p>
+                    </div>
+                    <el-form>
+                        <GuipFormItem column="column" class="mb24" label="账号名称">
+                            <!-- <span class="desc" slot="formRight">账号名称</span> -->
+                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="pdd_shop_name" prop="company_short_name" placeholder="请输入账号名称"></GuipInput>
+                        </GuipFormItem>
+                    </el-form>
+                    </div>
+                    <!-- 京东 -->
+                    <div class="jdpay"  v-if="addPayType==payTypeJingdong">
+                    <div class="beforeNotice">
+                        <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
+                        <p class="mt12 flex">请确保使用要添加的京东主账号登录并授权</p>
+                        <p class="mt10 flex">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面</p>
+                    </div>
+                    </div>
+                </div>
+            </GuipDialog>
+        </el-form>
+    </div>
+</template>
+<script>
+import GuipInput from '@/components/GuipInput.vue';
+import GuipFormItem from '@/components/GuipFormItem.vue';
+import GuipDialog from '@/components/GuipDialog.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: 'addPay',
+    props: {
+        // 收款方式
+        payType: {
+            type: [String, Number],
+            default: '-1',
+            // validator: value => ['success', 'warning', 'error', 'info'].includes(value)
+        },
+        // 可见性
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        authToken: {
+            type: String,
+            default: ''
+        },
+    },
+    components: {
+        GuipInput,
+        GuipFormItem,
+        GuipDialog,
+    },
+    data() {
+        return {
+            // 收款方式
+            payTypeTaoBao: PAY_TYPE_TAOBAO,
+            payTypeWeixin: PAY_TYPE_WEIXIN,
+            payTypeAlipay: PAY_TYPE_ALIPAY,
+            payTypeJingdong: PAY_TYPE_JINGDONG,
+            payTypePdd: PAY_TYPE_PDD,
+            
+            paytypeDesc: {
+                payTypeTaoBao: '淘宝/天猫店铺',
+                payTypeWeixin: '微信收款',
+                payTypeAlipay: '支付宝收款',
+                payTypeJingdong: '京东店铺',
+                payTypePdd: '拼多多店铺'
+            },
+
+            token: '',
+            // 添加收款方式类型
+            addPayType: -1,
+
+            // 添加收款方式弹框
+            addPayDialogVisible: false,
+            // 控制是否显示取消按钮
+            showCancelButton: true, 
+            // 控制是否显示关闭按钮
+            showCloseButton: true, 
+            // 添加收款方式弹框标题
+            addPayTitle: '',
+            
+            // 添加收款方式确认按钮文本
+            addPayconfirmText: '确定',
+            // 淘宝授权url
+            taobaoAuthUrl: '',
+            // 公司简称
+            company_short_name: '',
+            // 商户号
+            mch_id: '',
+            // 微信支付秘钥
+            apiv2: '',
+            // 公众号APPID
+            appid: '',
+            // 支付宝账号
+            alipay_account: '',
+            // 是否存在自供货 存在自供货 则不支持支付宝代收款
+            isExistSelfSupplys: false,
+            // 代收款 收款账号
+            receive_payment_account: '',
+            // 代收款 收款人姓名
+            receive_payment_name: '',
+            // 是否是平台支付 0平台支付 1自营支付
+            isPayPublic: '0',
+            // 拼多多授权url
+            pddAuthUrl: '',
+            // 拼多多店铺名称
+            pdd_shop_name: '',
+            // 京东授权url
+            jdAuthUrl: '',
+
+            // localSiteInfo: { ...this.siteInfo }
+        }
+    },
+    computed: {
+        // ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    mounted() {
+        // store.commit('SET_PAGETITLE', '营销推广');
+        this.getAddablePays()
+    },
+    methods: {
+        updateDialogByPayType() {
+            if (this.addPayType > -1) {
+                // 设置标题
+                let typeDesc = '';
+                // 根据addPayType找到对应的描述
+                for (let key in this.paytypeDesc) {
+                    if (this[key] === this.addPayType) {
+                        typeDesc = this.paytypeDesc[key];
+                        break;
+                    }
+                }
+                this.addPayTitle = '添加' + typeDesc;
+                // 设置确认按钮文本
+                if (this.addPayType === this.payTypeTaoBao || this.addPayType === this.payTypeJingdong) {
+                    this.addPayconfirmText = '去授权';
+                } else {
+                    this.addPayconfirmText = '确定';
+                }
+            }
+        },
+        resetForm() {
+            // 重置所有表单字段
+            this.company_short_name = '';
+            this.mch_id = '';
+            this.apiv2 = '';
+            this.appid = '';
+            this.alipay_account = '';
+            this.receive_payment_account = '';
+            this.receive_payment_name = '';
+            this.pdd_shop_name = '';
+            this.isPayPublic = '0'; // 重置支付宝标签页
+        },
+        // 获取可添加的收款方式
+        getAddablePays() {
+            this.$http('POST', '/agentnew/ajax_get_addable_pays', {
+                // 参数名: 参数值,
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.tableLoading = false
+                this.$nextTick(() => {
+                    if(response.data[PAY_TYPE_TAOBAO]) {
+                        this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl
+                    }
+                    
+                    if (response.data[PAY_TYPE_ALIPAY]) {
+                        this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys
+                    }
+                    
+                    if (response.data[PAY_TYPE_PDD]) {
+                        this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl
+                    }
+                    
+                    if (response.data[PAY_TYPE_JINGDONG]) { 
+                        this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl
+                    }
+                    
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        // 弹框相关方法---start
+        showAddPaymentMethodDialog(type, type_desc) {
+            console.log(type, 'type');
+            this.addPayDialogVisible = true;
+            this.addPayTitle = '添加' + type_desc;
+            this.addPayType = type;
+            if (type == PAY_TYPE_TAOBAO || type == PAY_TYPE_JINGDONG) {
+                this.addPayconfirmText = '去授权';
+            }
+        },
+        // 确认按钮事件
+        addPayment() {
+            if (this.addPayType == PAY_TYPE_TAOBAO) {
+                window.open(this.taobaoAuthUrl, '_blank');
+                
+            } else if (this.addPayType == PAY_TYPE_WEIXIN) {
+                this.$http('POST', '/agentnew/ajax_add_weixinpay', {
+                    company_short_name: this.company_short_name,
+                    mch_id: this.mch_id,
+                    apiv2: this.apiv2,
+                    appid: this.appid
+                }, {
+                    headers: {
+                        'Auth': this.token
+                    }
+                }).then(response => {
+                    this.$nextTick(() => {
+                        if (response.status) {
+                            this.init();
+                            this.$Message.success(response.info);
+                            
+                        } else {
+                            this.$Message.error(response.info);
+                        }
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+
+            } else if (this.addPayType == PAY_TYPE_ALIPAY) { 
+                this.$http('POST', '/agentnew/ajax_add_alipay', {
+                    company_short_name: this.company_short_name,
+                    alipay_account: this.alipay_account,
+                    is_pay_public: this.isPayPublic,
+                    receive_payment_account: this.receive_payment_account,
+                    receive_payment_name: this.receive_payment_name
+                }, {
+                    headers: {
+                        'Auth': this.token
+                    }
+                }).then(response => {
+                    this.$nextTick(() => {
+                        if (response.status) {
+                            if (this.isPayPublic == 1) {
+                                this.init();
+                                this.$Message.success(response.info);
+                            } else { 
+                            window.open(response.data.authurl, '_blank');
+                            }
+                            
+                        } else {
+                            this.$Message.error(response.info);
+                        }
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } else if (this.addPayType == PAY_TYPE_PDD) { 
+                this.$http('POST', '/agentnew/ajax_add_pddpay', {
+                    shop_name: this.pdd_shop_name,
+                }, {
+                    headers: {
+                        'Auth': this.token
+                    }
+                }).then(response => {
+                    this.$nextTick(() => {
+                        if (response.status) {
+                            this.init();
+                            this.$Message.success(response.info);
+                        } else {
+                            this.$Message.error(response.info);
+                        }
+                    })
+                }).catch(error => {
+                    console.error(error, 'error')
+                })
+            } else if (this.addPayType == PAY_TYPE_JINGDONG) { 
+                window.open(this.jdAuthUrl, '_blank');
+            }
+            this.init();
+        },
+        // 取消按钮事件
+        handleCancel() {
+            this.init();
+        },
+        // 关闭弹框事件
+        handleClose() {
+            this.init();
+        },
+        dialogVisibleChange(data) {
+            console.log(data, 'data098908090');
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        init() { 
+            this.addPayDialogVisible = false;
+            this.$emit('update:visible', false);
+            this.resetForm(); // 重置表单
+        },
+    },watch: {
+        visible(newVal) { 
+            this.addPayDialogVisible = newVal; 
+        },
+        payType(newVal) {
+            this.addPayType = newVal;
+            this.updateDialogByPayType();
+            this.resetForm();   // 切换支付方式时重置表单
+        },
+        authToken(newVal) {
+            this.token = newVal;
+        }
+    }
+
+}
+</script>
+<style scoped lang="scss">
+.beforeNotice {
+
+    h4 {
+        margin: 0;
+        gap: 8px;
+    }
+
+    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: 5px;
+            margin-right: 5px;
+        }
+    }
+}
+
+a {
+    color: #006AFF;
+    text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/agent/siteBaseSetting.vue b/src/views/agent/siteBaseSetting.vue
index c656959..c8f3dd9 100644
--- a/src/views/agent/siteBaseSetting.vue
+++ b/src/views/agent/siteBaseSetting.vue
@@ -91,24 +91,20 @@
 
             </div>
             <div class="siteMessage flex-common" id="siteMessage3">
-                <h3>店铺收款</h3>
-                <el-form :model="siteForm2" ref="formRef">
+                <h3>收款方式<span>至少需要配置1种收款方式</span></h3>
+                <el-form ref="formRef">
                     <div class="flex-wrap">
                         <div class="flex-left">
-                            <GuipFormItem column="column" class="mb24">
+                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeWeixin]">
                                 <div slot="formLeft" class="form-top-icon">
-                                    <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
-                                        alt=""><span>微信收款</span>
+                                    <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
                                 </div>
-                                <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
-                                    :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
-                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
-                                    <!-- 自定义触发按钮 -->
+                                <CustomDropdown v-if="wxpayList && wxpayList.length" slot="formDom" width="100%" v-model="bindWxpayId"
+                                    :options="wxpayList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectWeixin" placeholder="请选择" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
                                     <template #trigger>
-                                        <span v-if="selectedItemWeixin"
-                                            style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
-                                                select_placeholder_weixin ? select_placeholder_weixin :
-                                                    selectedItemWeixin.desc }}</span>
+                                        <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                         <span v-else>请选择</span>
                                     </template>
                                     <template #normal>
@@ -119,7 +115,7 @@
                                                 <p>需在微信商户平台-产品中心开通Native支付</p>
                                             </div>
                                             <div class="right">
-                                                <GuipButton type="primary" size="medium">前往绑定</GuipButton>
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                             </div>
                                         </div>
                                     </template>
@@ -128,33 +124,49 @@
                                     <template #item="{ item }">
                                         <div class="flex-between">
                                             <div class="left">
-                                                <p class="one">{{ item.label }}</p>
-                                                <p>{{ item.desc }}</p>
+                                                <p class="one">{{ item.short_name }}</p>
+                                                <p>{{ item.account }}</p>
                                             </div>
                                             <div class="right">
-                                                <img v-if="selectedItem.value == item.value"
-                                                    src="@/assets/register/drop-selected.svg" alt="">
+                                                <img v-if="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindWxpayId"
+                                    :options="wxpayList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectWeixin" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新微信收款</b>
+                                                <p class="one">需要使用您公司的微信支付</p>
+                                                <p>需在微信商户平台-产品中心开通Native支付</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                             </div>
                                         </div>
                                     </template>
                                 </CustomDropdown>
                             </GuipFormItem>
-                            <GuipFormItem column="column">
+
+                            <!-- 支付宝 -->
+                            <GuipFormItem column="column" v-if="addablePays[payTypeAlipay]">
                                 <div slot="formLeft" class="form-top-icon">
-                                    <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
-                                        alt=""><span>支付宝收款</span>
+                                    <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;" alt=""><span>支付宝收款</span>
                                 </div>
-                                <!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
-                                            :options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
-                                <CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
-                                    :options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
-                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
-                                    <!-- 自定义触发按钮 -->
+                                <CustomDropdown v-if="alipayList && alipayList.length" slot="formDom" width="100%" v-model="bindAlipayId"
+                                    :options="alipayList" @change="changeSelectAlipay" placeholder="请选择"
+                                    @changeNormal="changeNormalWeixin">
                                     <template #trigger>
-                                        <span v-if="selectedItemWeixin"
-                                            style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
-                                                select_placeholder_weixin ? select_placeholder_weixin :
-                                                    selectedItemWeixin.desc }}</span>
+                                        <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                         <span v-else>请选择</span>
                                     </template>
                                     <template #normal>
@@ -165,7 +177,64 @@
                                                 <p>需在支付宝商户平台-产品中心开通Native支付</p>
                                             </div>
                                             <div class="right">
-                                                <GuipButton type="primary" size="medium">前往绑定</GuipButton>
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.short_name }}</p>
+                                                <p>{{ item.account }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="selectAlipay && selectAlipay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindAlipayId"
+                                    :options="alipayList" @change="changeSelectAlipay" placeholder="请选择"
+                                    @changeNormal="changeNormalWeixin" :options_null="options_weixin_null">
+                                    <template #trigger>
+                                        <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新支付宝收款</b>
+                                                <p class="one">需要使用您公司的支付宝支付</p>
+                                                <p>需在支付宝商户平台-产品中心开通Native支付</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeJingdong]">
+                                <div slot="formLeft" class="form-top-icon">
+                                    <img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span>
+                                </div>
+                                <CustomDropdown v-if="jdList && jdList.length" slot="formDom" width="100%" v-model="bindJdId"
+                                    :options="jdList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectJindong" placeholder="请选择" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新京东店铺</b>
+                                                <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                             </div>
                                         </div>
                                     </template>
@@ -174,12 +243,32 @@
                                     <template #item="{ item }">
                                         <div class="flex-between">
                                             <div class="left">
-                                                <p class="one">{{ item.label }}</p>
-                                                <p>{{ item.desc }}</p>
+                                                <p class="one">{{ item.account }}</p>
+                                                <p>{{ item.short_name }}</p>
                                             </div>
                                             <div class="right">
-                                                <img v-if="selectedItem.value == item.value"
-                                                    src="@/assets/register/drop-selected.svg" alt="">
+                                                <img v-if="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindJdId"
+                                    :options="jdList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectJindong" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新京东店铺</b>
+                                                <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                             </div>
                                         </div>
                                     </template>
@@ -188,17 +277,132 @@
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
-                            <!-- <div>{{ input1 }}</div> -->
-                            <div class="addStore flex">
-                                <div></div>
-                                添加其他收款方式
-                            </div>
+                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypeTaoBao]">
+                                <div slot="formLeft" class="form-top-icon">
+                                    <img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span>
+                                </div>
+                                <CustomDropdown v-if="taobaoList && taobaoList.length" slot="formDom" width="100%" v-model="bindTaobaoId"
+                                    :options="taobaoList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectTaobao" placeholder="请选择" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新淘宝/天猫店铺</b>
+                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <!-- 自定义下拉选项 -->
+                                    <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.account }}</p>
+                                                <p>{{ item.short_name }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="selectTaobao && selectTaobao.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindTaobaoId"
+                                    :options="taobaoList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectTaobao" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新淘宝/天猫店铺</b>
+                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="mb24" v-if="addablePays[payTypePdd]">
+                                <div slot="formLeft" class="form-top-icon">
+                                    <img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span>
+                                </div>
+                                <CustomDropdown v-if="pddList && pddList.length" slot="formDom" width="100%" v-model="bindPddId"
+                                    :options="pddList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectPdd" placeholder="请选择" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新拼多多店铺</b>
+                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <!-- 自定义下拉选项 -->
+                                    <template #item="{ item }">
+                                        <div class="flex-between">
+                                            <div class="left">
+                                                <p class="one">{{ item.account }}</p>
+                                                <p>{{ item.short_name }}</p>
+                                            </div>
+                                            <div class="right">
+                                                <img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                                <CustomDropdown v-else slot="formDom" width="100%" v-model="bindPddId"
+                                    :options="pddList" displayKey="name" valueKey="payid"
+                                    @change="changeSelectPdd" placeholder="请选择"
+                                    :options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
+                                    <!-- 选择后显示数据 -->
+                                    <template #trigger>
+                                        <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
+                                        <span v-else>请选择</span>
+                                    </template>
+                                    <template #normal>
+                                        <div class="flex flex-between noraml-jump">
+                                            <div class="left">
+                                                <b>绑定新拼多多店铺</b>
+                                                <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
+                                            </div>
+                                            <div class="right">
+                                                <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </CustomDropdown>
+                            </GuipFormItem>
                         </div>
                     </div>
                 </el-form>
-                <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
+                <GroupFormBtns @cancel="cancelClick" @confirm="updateSitePay()" />
             </div>
         </div>
+
+        <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" :authToken="authToken"></addPay>
     </div>
 </template>
 <script>
@@ -212,7 +416,16 @@ import GuipRadio from '@/components/GuipRadio.vue';
 import CustomDropdown from '@/components/CustomDropdown.vue';
 import GuipButton from '@/components/GuipButton.vue';
 import GroupFormBtns from '@/components/GroupFormBtns.vue';
+import addPay from '@/components/pay/addPay.vue';
 // import {setHighActive} from '@/utils/common';
+
+// 收款方式
+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: '',
@@ -224,11 +437,18 @@ export default {
         GuipTextarea,
         CustomDropdown,
         GuipButton,
-        GroupFormBtns
-
+        GroupFormBtns,
+        addPay,
     },
     data() {
         return {
+            // 收款方式
+            payTypeTaoBao: PAY_TYPE_TAOBAO,
+            payTypeWeixin: PAY_TYPE_WEIXIN,
+            payTypeAlipay: PAY_TYPE_ALIPAY,
+            payTypeJingdong: PAY_TYPE_JINGDONG,
+            payTypePdd: PAY_TYPE_PDD,
+
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
             // 站点信息
@@ -237,6 +457,30 @@ export default {
                 company_name: '',
                 phone_num: '',
             },
+            taobaoList: [],
+            wxpayList: [],
+            alipayList: [],
+            pddList: [],
+            jdList: [],
+
+            bindWxpayId: 0,
+            selectWxpay: null,
+            bindAlipayId: 0,
+            selectAlipay: null,
+            bindTaobaoId: 0,
+            selectTaobao: null,
+            bindPddId: 0,
+            selectPdd: null,
+            bindJdId: 0,
+            selectJd: null,
+
+
+            sitePays: [],
+            addPayType: -1,
+            isShowAddPay: false,
+            authToken: '',
+            addablePays: [],
+
             domainOptions: [
                 {
                     value: '.chachongz.com',
@@ -251,26 +495,11 @@ export default {
                     label: '.jishu.chachongz.com'
                 },
             ],
-            siteForm: {
-                company_name: '',
-                company_address: '',
-                company_phone: '',
-                site_alias: '',
-            },
-            // siteFormrules: {
-            //     site_alias: [
-            //         { required: true, message: '请输入站点简称', trigger: 'blur' }
-            //     ]
-            // },
             siteForm1: {
                 domain_set: '',
                 domainSuffix:'.chachongz.com',
                 domain_source: '平台免费域名',
             },
-            siteForm2: {
-                zhifubao_pay: '',
-                weixin_pay: '',
-            },
             siteFormrules1: {
                 domain_source: [
                     { required: true, message: '请输入站点简称', trigger: 'blur' }
@@ -280,15 +509,8 @@ export default {
                 { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                 { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
             ],
-            options_weixin_null: {
-                label: '暂无收款账号',
-                value: '暂时没有收款账号，我想稍后配置',
-                desc: '暂无收款账号，稍后配置'
-            },
+            options_weixin_null: {},
             select_placeholder_weixin: '暂无收款账号，稍后配置',
-            selectedItemWeixin: {},//微信收款方式
-            options_weixin: [],
-            options_zhifubao: [],
         }
     },
     computed: {
@@ -302,8 +524,86 @@ export default {
         store.commit('SET_PAGETITLE', '基本设置');
 
         this.getSiteInfo();
+        this.getPayList();
+        this.getAddablePays();
     },
     methods: {
+        // 获取可添加的收款方式
+        getAddablePays() {
+            this.$http('POST', '/agentnew/ajax_get_addable_pays', {
+                uid: this.$route.query.uid
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    this.addablePays = response.data
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        // 获取支付列表
+        getPayList() {
+            this.$http('POST', '/agentnew/ajax_get_pay_list', {
+                gid: this.gid,
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.$nextTick(() => {
+                    if (
+                        response.data &&
+                        response.data.paylist &&
+                        response.data.paylist[this.payTypeWeixin] &&
+                        response.data.paylist[this.payTypeWeixin].length > 0
+                    ) {
+                        this.wxpayList = response.data.paylist[this.payTypeWeixin]
+                    }
+                    if (
+                        response.data &&
+                        response.data.paylist &&
+                        response.data.paylist[this.payTypeAlipay] &&
+                        response.data.paylist[this.payTypeAlipay].length > 0
+                    ) {
+                        this.alipayList = response.data.paylist[this.payTypeAlipay]
+                    }
+                    if (
+                        response.data &&
+                        response.data.paylist &&
+                        response.data.paylist[this.payTypeTaoBao] &&
+                        response.data.paylist[this.payTypeTaoBao].length > 0
+                    ) {
+                        this.taobaoList = response.data.paylist[this.payTypeTaoBao]
+                    }
+                    if (
+                        response.data &&
+                        response.data.paylist &&
+                        response.data.paylist[this.payTypePdd] &&
+                        response.data.paylist[this.payTypePdd].length > 0
+                    ) {
+                        this.pddList = response.data.paylist[this.payTypePdd]
+                    }
+                    if (
+                        response.data &&
+                        response.data.paylist &&
+                        response.data.paylist[this.payTypeJingdong] &&
+                        response.data.paylist[this.payTypeJingdong].length > 0
+                    ) {
+                        this.jdList = response.data.paylist[this.payTypeJingdong]
+                    }
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        goBindPay(type) {
+            this.addPayType = type;
+            this.isShowAddPay = true;
+            this.authToken = this.token;
+        },
         // 操作下拉框
         toggleDrop(e){
             this.$refs.dropDomain.toggleDropdown(e)
@@ -325,6 +625,49 @@ export default {
             }).then(response => {
                 this.$nextTick(() => {
                     that.siteInfo = response.data
+                    if (
+                        response.data &&
+                        response.data.site_pays &&
+                        response.data.site_pays[this.payTypeWeixin]
+                    ) {
+                        this.bindWxpayId = response.data.site_pays[this.payTypeWeixin].payid;
+                        this.selectWxpay = response.data.site_pays[this.payTypeWeixin];
+                    }
+                    console.log(this.selectWxpay, 'selectWxpay');
+
+                    if (
+                        response.data &&
+                        response.data.site_pays &&
+                        response.data.site_pays[this.payTypeAlipay]
+                    ) {
+                        this.bindAlipayId = response.data.site_pays[this.payTypeAlipay].payid;
+                        this.selectAlipay = response.data.site_pays[this.payTypeAlipay];
+                    } 
+                    if (
+                        response.data &&
+                        response.data.site_pays &&
+                        response.data.site_pays[this.payTypeTaoBao]
+                    ) {
+                        this.bindTaobaoId = response.data.site_pays[this.payTypeTaoBao].payid;
+                        this.selectTaobao = response.data.site_pays[this.payTypeTaoBao];
+                    } 
+                    if (
+                        response.data &&
+                        response.data.site_pays &&
+                        response.data.site_pays[this.payTypePdd]
+                    ) {
+                        this.bindPddId = response.data.site_pays[this.payTypePdd].payid;
+                        this.selectPdd = response.data.site_pays[this.payTypePdd];
+                    } 
+                    if (
+                        response.data &&
+                        response.data.site_pays &&
+                        response.data.site_pays[this.payTypeJingdong]
+                    ) {
+                        this.bindJdId = response.data.site_pays[this.payTypeJingdong].payid;
+                        this.selectJd = response.data.site_pays[this.payTypeJingdong];
+                    } 
+
                 })
             }).catch(error => {
                 console.error(error, 'error')
@@ -363,9 +706,56 @@ export default {
                 this.select_placeholder_weixin = this.options_weixin_null.desc;
                 return
             }
+            this.bindWxpayId = item.payid;
+            this.selectWxpay = item;
+            console.log(this.bindWxpayId, 'bindWxpayId');
+            console.log(this.selectWxpay, 'selectWxpay');
+
+            this.selectedItem = { ...item };
+            console.log(this.selectedItem, 'this.selectedItem====');
+        },
+        changeSelectAlipay(item, flag) {
+            if (flag) {
+                this.select_placeholder_weixin = this.options_weixin_null.desc;
+                return
+            }
+            this.bindAlipayId = item.payid;
+            this.selectAlipay = item;
+            console.log(this.bindWxpayId, 'bindWxpayId');
+
             this.selectedItem = { ...item };
             console.log(this.selectedItem, 'this.selectedItem====');
         },
+        changeSelectTaobao(item, flag) {
+            if (flag) {
+                this.select_placeholder_weixin = this.options_weixin_null.desc;
+                return
+            }
+            this.bindTaobaoId = item.payid;
+            this.selectTaobao = item;
+
+            this.selectedItem = { ...item };
+        },
+        changeSelectJindong(item, flag) {
+            if (flag) {
+                this.select_placeholder_weixin = this.options_weixin_null.desc;
+                return
+            }
+            this.bindJdId = item.payid;
+            this.selectJd = item;
+
+            this.selectedItem = { ...item };
+        },
+        changeSelectPdd(item, flag) {
+            if (flag) {
+                this.select_placeholder_weixin = this.options_weixin_null.desc;
+                return
+            }
+            this.bindPddId = item.payid;
+            this.selectPdd = item;
+
+            this.selectedItem = { ...item };
+        },
         //  销售渠道
         domain_radioChange(type) {
             console.log(type, '--');
@@ -389,6 +779,38 @@ export default {
         },
         confirmClick(type) {
             console.log(type, '确认');
+        },
+        updateSitePay() {
+            var data = {
+                uid: this.$route.query.uid,
+                pay_config: {
+                    0: this.bindTaobaoId,
+                    2: this.bindWxpayId,
+                    3: this.bindAlipayId,
+                    4: this.bindJdId,
+                    11: this.bindPddId,
+                },
+            }
+
+            this.$http('POST', '/agentnew/ajax_update_site_pay', data, {
+                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')
+            })
+        },
+        handleEvent(data) {
+            console.log(data, 'handleEvent');
+            this.isShowAddPay = data
         }
 
     }