From 370301e605fe6ff7c87cb5319387bc54ae6a6070 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Mon, 14 Jul 2025 10:38:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AB=99=E7=82=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/site/addSiteStep/step1.vue | 318 ++++++++++++++++
 src/components/site/addSiteStep/step2.vue | 601 ++++++++++++++++++++++++++++++
 src/components/site/addSiteStep/step3.vue | 295 +++++++++++++++
 src/router/index.js                       |  15 +-
 src/views/agent/siteAdd.vue               | 290 ++++++++++++++
 5 files changed, 1517 insertions(+), 2 deletions(-)
 create mode 100644 src/components/site/addSiteStep/step1.vue
 create mode 100644 src/components/site/addSiteStep/step2.vue
 create mode 100644 src/components/site/addSiteStep/step3.vue
 create mode 100644 src/views/agent/siteAdd.vue

diff --git a/src/components/site/addSiteStep/step1.vue b/src/components/site/addSiteStep/step1.vue
new file mode 100644
index 0000000..4511476
--- /dev/null
+++ b/src/components/site/addSiteStep/step1.vue
@@ -0,0 +1,318 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="formRules" ref="formRef">
+            <div class="step1-wrap min-flex pb90">
+                <div class="flex-common">
+                    <h3>站点信息</h3>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <GuipFormItem column="column" class="mb24">
+                                <div slot="formLeft">站点简称</div>
+                                <div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分</div>
+                                <GuipInput slot="formDom" ref="GuipInput" prop="short_name" :maxlength="10" :showWordLimit="true"
+                                           v-model="formData.short_name" placeholder="仅自己区分站点销售渠道，客户看不到" />
+                            </GuipFormItem>
+                            <GuipFormItem column="column" class="channel-radio">
+                                <div slot="formLeft">销售渠道</div>
+                                <span slot="formRight" class="desc">{{channel_label}}</span>
+                                <GuipRadio slot="formDom" v-model="formData.sale_channel" :options="sale_channels"
+                                           prop="sale_channel" :rules="formRules.sale_channel" @change="radioChange" />
+                            </GuipFormItem>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <GuipFormItem column="column" class="mb24">
+                                <div slot="formLeft">域名来源</div>
+                                <GuipRadio slot="formDom" v-model="domainType" :options="domain_types" prop="domain" :rules="formRules.domain"
+                                           @change="radioDomainChange" />
+                            </GuipFormItem>
+                            <GuipFormItem column="column">
+                                <div slot="formLeft">域名设置</div>
+                                <GuipInput v-show="domainType==='1'" slot="formDom" v-model="domainPrefix" class="w540">
+                                    <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
+                                    <span slot="appendshow">{{domainName}}</span>
+                                </GuipInput>
+                                <domainBind v-show="domainType==='2'" slot="formDom" :defaultPrefix="domainPrefix" :defaultDomain="domainName" @handleEvent="handleChangeDomain" />
+                            </GuipFormItem>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt20 flex-common">
+                    <h3>模板选择</h3>
+                    <div class="flex-wrap">
+                        <div class="flex-left">
+                            <p class="flex-left-desc">销售方向</p>
+                            <div class="flex mt12">
+                                <GuipRadio v-model="formData.site_type" :options="site_types" label="" prop="site_type" @change="radioChange" />
+                            </div>
+                            <div class="tem-home">
+                                <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
+                                <div class="tem-home-bottom">
+                                    <b>经典深蓝模板（默认）</b>
+                                    <div>
+                                        <div class="tem-look" @click="lookTemImg">
+                                            <img src="@/assets/register/look-tem.svg" alt="">
+                                            预览
+                                        </div>
+                                        <div @click="editTemImg">
+                                            <img src="@/assets/register/edit-tem.svg" alt="">
+                                            修改
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="register-btns">
+                <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="saveConfirm">下一步</GuipButton>
+            </div>
+        </el-form>
+    </div>
+</template>
+<script>
+
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+import GuipRadio from "@/components/GuipRadio.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import domainBind from "@/components/domainBind.vue";
+
+export default {
+  name: 'domainSet',
+  props: {
+      siteInfo: {
+          type: Object,
+          required: true
+      }
+  },
+  components: {
+      domainBind,
+      GuipFormItem, GuipRadio, GuipInput,
+      GuipButton
+  },
+  data(){
+    return {
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+        formData: {
+            short_name: '',
+            domain:'',
+            sale_channel: '',
+            site_type: '',
+            site_tpl: '1',
+            not_finished_uid: '',
+        },
+        formRules: {
+            short_name: [
+                { required: true, message: '请输入站点简称', trigger: 'blur' }
+            ],
+            sale_channel: [
+                { required: true, message: '请选择销售渠道', trigger: 'blur' }
+            ],
+            domain: [
+                { required: true, message: '请设置站点域名', trigger: 'blur' }
+            ],
+        },
+
+        channel_options: [
+            { label: '淘系平台售卖', value: '0', selectedLabel: ''},
+            { label: '非电商平台销售', value: '1', selectedLabel: '适用于搜索推广，如360、百度、微信售卖等渠道' },
+            { label: '自用不出售', value: '2', selectedLabel: '适用于不需要对外售卖，专用于自己检测的用户' },
+            { label: '拼多多平台售卖', value: '3', selectedLabel: '' }
+        ],
+
+        sale_channels:{},
+        domain_types:{},
+        site_types:{},
+        domainType: '1',
+        domainPrefix: '',
+        domainName: '',
+        platDomain: '',
+    }
+  },
+  watch:{
+      domainPrefix() {
+          this.checkFormDataDomain();
+      },
+      domainName() {
+          this.checkFormDataDomain();
+      }
+  },
+  computed: {
+    channel_label() {
+        const labels = this.sale_channels_label;
+        const value = this.formData.sale_channel;
+        return labels && labels[value] ? labels[value] : '';
+    }
+  },
+  mounted() {
+      this.getAddInfo()
+  },
+  methods:{
+      getAddInfo() {
+          const that = this
+          that.payList = []
+          this.$http('POST', '/agentnew/ajax_get_site_add_info', {},{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  const addInfo = response.data
+                  that.sale_channels = addInfo.sale_channels
+                  that.sale_channels_label = addInfo.sale_channels_label
+                  that.domain_types = addInfo.domain_types
+                  that.site_types = addInfo.site_types
+                  that.platDomain = addInfo.plat_domain
+
+                  if(Object.keys(that.siteInfo).length>0){
+                      that.$nextTick(() => {
+                          that.formData.short_name = that.siteInfo.short_name
+                          that.formData.domain = that.siteInfo.domain
+                          that.formData.sale_channel = that.siteInfo.sale_channel
+                          that.formData.site_type = that.siteInfo.site_type
+                          that.formData.site_tpl = that.siteInfo.site_tpl
+                          that.formData.not_finished_uid = that.siteInfo.uid
+
+                          //域名存在且不是平台主域名
+                          if(that.formData.domain){
+                              that.domainType = String(that.siteInfo.domain_type)
+                              that.domainPrefix = that.siteInfo.domain_prefix;
+                              that.domainName = that.siteInfo.domain_name;
+                          }
+                      })
+                  }else{
+                      that.domainName = that.platDomain
+                  }
+                  return true
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      radioChange(val){
+          this.formData.sale_channel = val
+      },
+      radioDomainChange(val){
+          this.domainType = val
+          this.domainName = val === '1' ? this.platDomain : ''
+      },
+      handleClear() {
+          this.domainPrefix = '';
+      },
+      handleChangeDomain(data) {
+          this.domainPrefix = data.prefix
+          this.domainName = data.domain
+      },
+      checkFormDataDomain(){
+          if (this.domainPrefix && this.domainName) {
+              this.formData.domain = this.domainPrefix + this.domainName;
+          }
+      },
+      lookTemImg(){
+
+      },
+      editTemImg(){
+
+      },
+      saveConfirm() {
+          const that = this
+          that.$refs.formRef.validate((valid) => {
+              if (valid) {
+                  const that = this
+                  that.$http('POST', '/agentnew/ajax_add_new_site', that.formData,{
+                      headers:{
+                          'Auth': this.token
+                      }
+                  }).then(response => {
+                      if(response.status && response.data.uid){
+                          that.formData.uid = response.data.uid
+                          this.$emit('handelSiteInfo', that.formData)
+
+                          if(this.formData.sale_channel === '2'){
+                              //自用站点无需设置收款方式
+                              this.$emit('handelStep', 3)
+                          }else{
+                              this.$emit('handelStep', 2)
+                          }
+                          return true;
+                      }
+                      that.$message.error(response.info);
+                  }).catch(error => {
+                      console.error(error, 'error')
+                  })
+              }
+          });
+      },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.w540{
+  width: 540px;
+}
+.pb90{
+  padding-bottom: 90px;
+}
+.mt20{
+  margin-top: 20px;
+}
+.step1-wrap{
+  padding-bottom: 90px;
+}
+
+.tem-home {
+  width: 100%;
+  border-radius: 4px;
+  opacity: 1;
+  background: #FFFFFF;
+  /* middle/middle_line_1 */
+  border: 1px solid #DFE2E6;
+
+  .tem-home-top {
+    width: 100%;
+  }
+
+  .tem-home-bottom {
+    display: flex;
+    align-items: center;
+    padding: 22px 32px;
+    justify-content: space-between;
+
+    .tem-look {
+      margin-right: 36px;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+::v-deep{
+  .el-input-group__append{
+    width: 175px;
+    letter-spacing: 0.08em;
+  }
+
+  .channel-radio .el-radio-group{
+    text-align: left;
+  }
+  .channel-radio .el-radio{
+    min-width: 120px;
+    margin-bottom: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/site/addSiteStep/step2.vue b/src/components/site/addSiteStep/step2.vue
new file mode 100644
index 0000000..f01e42c
--- /dev/null
+++ b/src/components/site/addSiteStep/step2.vue
@@ -0,0 +1,601 @@
+<template>
+    <div>
+        <div class="step2-wrap min-flex">
+            <div class="flex-common">
+                <h3>店铺收款</h3>
+
+                <template v-if="!isJd">
+
+                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '0'">
+                        <div class="flex-wrap">
+                            <div class="flex-left">
+                                <div class="shopadd-wrap" v-if="!taobaoList.length">
+                                    <p class="shopadd-title">店铺授权</p>
+                                    <div class="flex flex-between shopadd-area">
+                                        <div>
+                                            <p>请确保使用要添加的淘宝主账号登录并授权</p>
+                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
+                                        </div>
+                                        <GuipButton :disabled="!addablePays[payTypeTaoBao]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton>
+                                    </div>
+                                </div>
+                                <GuipFormItem column="column" v-else>
+                                    <div slot="formLeft" class="form-top-icon">
+                                        <img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span>
+                                    </div>
+
+                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectTaobao" valueKey="payid"
+                                                    :options="taobaoList" :options_null="!taobaoList.length">
+
+                                        <template #trigger>
+                                            <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
+                                            <span v-else-if="!taobaoList.length">暂无收款账号，稍后配置</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>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</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>
+                                </GuipFormItem>
+                            </div>
+                        </div>
+                    </el-form>
+
+                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '1'">
+                        <div class="flex-wrap">
+                            <div class="flex-left">
+                                <GuipFormItem column="column" class="mb24">
+                                    <div slot="formLeft" class="form-top-icon">
+                                        <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
+                                    </div>
+                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectWeixin" valueKey="payid"
+                                                    :options="wxpayList" :options_null="!wxpayList.length">
+                                        <!-- 选择后显示数据 -->
+                                        <template #trigger>
+                                            <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
+                                            <span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</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>
+
+                                        <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="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </CustomDropdown>
+                                </GuipFormItem>
+                            </div>
+                            <div class="flex-line"></div>
+                            <div class="flex-right">
+                                <!-- 支付宝 -->
+                                <GuipFormItem column="column">
+                                    <div slot="formLeft" class="form-top-icon">
+                                        <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;" alt=""><span>支付宝收款</span>
+                                    </div>
+
+                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectAlipay" valueKey="payid"
+                                                    :options="alipayList" :options_null="!alipayList.length">
+
+                                        <template #trigger>
+                                            <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
+                                            <span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</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>
+
+                                        <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>
+                                </GuipFormItem>
+                            </div>
+                        </div>
+                    </el-form>
+
+                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '3'">
+                        <div class="flex-wrap">
+                            <div class="flex-left">
+                                <div class="shopadd-wrap" v-if="pddList.length">
+                                    <p class="shopadd-title">店铺授权</p>
+                                    <div class="flex flex-between shopadd-area">
+                                        <div>
+                                            <p>请确保使用要添加的拼多多主账号登录并授权</p>
+                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
+                                        </div>
+                                        <GuipButton :disabled="!addablePays[payTypePdd]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypePdd)">前往添加</GuipButton>
+                                    </div>
+                                </div>
+                                <GuipFormItem column="column" v-else>
+                                    <div slot="formLeft" class="form-top-icon">
+                                        <img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span>
+                                    </div>
+
+                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectPdd" valueKey="payid"
+                                                    :options="pddList" :options_null="!pddList.length">
+
+                                        <template #trigger>
+                                            <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
+                                            <span v-else-if="pddList.length === 0">暂无收款账号，稍后配置</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.short_name }}</p>
+                                                    <p>{{ item.account }}</p>
+                                                </div>
+                                                <div class="right">
+                                                    <img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </CustomDropdown>
+                                </GuipFormItem>
+                            </div>
+                        </div>
+                    </el-form>
+
+                </template>
+
+                <template v-else>
+                    <el-form ref="formRef">
+                        <div class="flex-wrap">
+                            <div class="flex-left">
+                                <div class="shopadd-wrap" v-if="!jdList.length">
+                                    <p class="shopadd-title">店铺授权</p>
+                                    <div class="flex flex-between shopadd-area">
+                                        <div>
+                                            <p>请确保使用要添加的京东主账号登录并授权</p>
+                                            <p>如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
+                                        </div>
+                                        <GuipButton :disabled="!addablePays[payTypeJingdong]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeJingdong)">前往添加</GuipButton>
+                                    </div>
+                                </div>
+                                <GuipFormItem column="column" v-else>
+                                    <div slot="formLeft" class="form-top-icon">
+                                        <img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span>
+                                    </div>
+
+                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectJindong" valueKey="payid"
+                                                    :options="jdList" :options_null="!jdList.length">
+
+                                        <template #trigger>
+                                            <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
+                                            <span v-else-if="jdList.length === 0">暂无收款账号，稍后配置</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>
+
+                                        <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="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </CustomDropdown>
+                                </GuipFormItem>
+                            </div>
+                        </div>
+                    </el-form>
+                </template>
+
+                <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" :authToken="authToken"
+                        :taobaoAuthUrl="taobaoAuthUrl" :isExistSelfSupplys="isExistSelfSupplys" :pddAuthUrl="pddAuthUrl" :jdAuthUrl="jdAuthUrl"></addPay>
+            </div>
+        </div>
+
+        <div class="register-btns">
+            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton>
+            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+
+import GuipButton from "@/components/GuipButton.vue";
+import addPay from "@/components/pay/addPay.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import CustomDropdown from "@/components/CustomDropdown.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: 'domainSet',
+  props: {
+      siteInfo: {
+          type: Object,
+          required: true
+      },
+      isJd: {
+          type: Boolean,
+          default: false
+      },
+  },
+  components: {
+      CustomDropdown, GuipFormItem,
+      addPay,
+      GuipButton
+
+  },
+  data(){
+    return {
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+
+        // 收款方式
+        payTypeTaoBao: PAY_TYPE_TAOBAO,
+        payTypeWeixin: PAY_TYPE_WEIXIN,
+        payTypeAlipay: PAY_TYPE_ALIPAY,
+        payTypeJingdong: PAY_TYPE_JINGDONG,
+        payTypePdd: PAY_TYPE_PDD,
+
+        taobaoList: [],
+        wxpayList: [],
+        alipayList: [],
+        pddList: [],
+        jdList: [],
+
+        bindWxpayId: 0,
+        selectWxpay: null,
+        bindAlipayId: 10079,
+        selectAlipay: null,
+        bindTaobaoId: 0,
+        selectTaobao: null,
+        bindPddId: 0,
+        selectPdd: null,
+        bindJdId: 0,
+        selectJd: null,
+
+        addPayType: -1,
+        isShowAddPay: false,
+        authToken: '',
+        addablePays: [],
+
+        // 淘宝授权url
+        taobaoAuthUrl: '',
+        // 是否存在自供货 存在自供货 则不支持支付宝代收款
+        isExistSelfSupplys: false,
+        // 拼多多授权url
+        pddAuthUrl: '',
+        // 拼多多店铺名称
+        pdd_shop_name: '',
+        // 京东授权url
+        jdAuthUrl: '',
+    }
+  },
+  mounted() {
+      if(Object.keys(this.siteInfo).length === 0) {
+          this.$message.error('未知错误');
+          this.$emit('handelStep', 1)
+          return false;
+      }
+
+      this.getSitePayIndex()
+      this.getPayList()
+      this.getAddablePays()
+  },
+  methods:{
+      // 获取支付列表
+      getSitePayIndex() {
+          this.$http('POST', '/agentnew/ajax_get_site_pay_index', {
+              uid: this.siteInfo.uid
+          },{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(Object.keys(response.data).length>0){
+                  console.log(response.data)
+                  this.$nextTick(() => {
+                      if (response.data[this.payTypeWeixin]) {
+                          this.bindWxpayId = response.data[this.payTypeWeixin].payid;
+                          this.selectWxpay = response.data[this.payTypeWeixin];
+                      }
+                      if (response.data[this.payTypeAlipay]) {
+                          this.bindAlipayId = response.data[this.payTypeAlipay].payid;
+                          this.selectAlipay = response.data[this.payTypeAlipay];
+                      }
+                      if (response.data[this.payTypeTaoBao]) {
+                          this.bindTaobaoId = response.data[this.payTypeTaoBao].payid;
+                          this.selectTaobao = response.data[this.payTypeTaoBao];
+                      }
+                      if (response.data[this.payTypePdd]) {
+                          this.bindPddId = response.data[this.payTypePdd].payid;
+                          this.selectPdd = response.data[this.payTypePdd];
+                      }
+                      if (response.data[this.payTypeJingdong]) {
+                          this.bindJdId = response.data[this.payTypeJingdong].payid;
+                          this.selectJd = response.data[this.payTypeJingdong];
+                      }
+                  })
+              }
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      // 获取支付列表
+      getPayList() {
+          this.$http('POST', '/agentnew/ajax_get_pay_list', {},{
+              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')
+          })
+      },
+      // 获取可添加的收款方式
+      getAddablePays() {
+          this.$http('POST', '/agentnew/ajax_get_addable_pays', {},{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              this.$nextTick(() => {
+                  this.addablePays = response.data
+                  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')
+          })
+      },
+      changeSelectWeixin(item) {
+          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) {
+          this.bindAlipayId = item.payid;
+          this.selectAlipay = item;
+          console.log(this.bindWxpayId, 'bindWxpayId');
+
+          this.selectedItem = { ...item };
+          console.log(this.selectedItem, 'this.selectedItem====');
+      },
+      changeSelectTaobao(item) {
+          this.bindTaobaoId = item.payid;
+          this.selectTaobao = item;
+
+          this.selectedItem = { ...item };
+      },
+      changeSelectJindong(item) {
+          this.bindJdId = item.payid;
+          this.selectJd = item;
+
+          this.selectedItem = { ...item };
+      },
+      changeSelectPdd(item) {
+          this.bindPddId = item.payid;
+          this.selectPdd = item;
+
+          this.selectedItem = { ...item };
+      },
+      goBindPay(type) {
+          this.addPayType = type;
+          this.isShowAddPay = true;
+          this.authToken = this.token;
+      },
+      handleEvent() {
+          this.getPayList()
+          this.getAddablePays()
+      },
+      jumpStep(){
+          this.$emit('handelStep', 3)
+      },
+      nextStep() {
+          var data = {
+              uid: this.siteInfo.uid,
+              open_processs: 4,
+              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.$emit('handelStep', 3)
+                      return true;
+                  }
+                  this.$Message.error(response.info);
+              })
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+  }
+}
+</script>
+<style lang="scss">
+.shopadd-wrap{
+  .shopadd-title{
+    color: #1E2226;
+    letter-spacing: 0.08em;
+    font-size: 14px;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+  .shopadd-area{
+    width: 510px;
+    padding: 24px;
+    border-radius: 4px;
+    background: #FAFAFA;
+    div{
+      letter-spacing: 0.08em;
+      font-size: 12px;
+      text-align: left;
+      color: #626573;
+
+      p:first-child{
+        font-size: 14px;
+        color: #1E2226;
+        margin-bottom: 12px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/site/addSiteStep/step3.vue b/src/components/site/addSiteStep/step3.vue
new file mode 100644
index 0000000..292c9d8
--- /dev/null
+++ b/src/components/site/addSiteStep/step3.vue
@@ -0,0 +1,295 @@
+<template>
+    <div>
+        <div class="step3-wrap min-flex">
+            <div class="step3-top flex-common">
+                <h3 class="flex gap8"><img src="@/assets/menu/littleTitleIcon1.svg" alt="">服务列表</h3>
+                <div class="btngroup">
+                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(1)">添加查重服务</GuipButton>
+                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(3)">添加写作辅助</GuipButton>
+                    <GuipButton type="ignore" :btnstyle="{ width: '97px', height: '33px' }" @click="serviceAdd(2)">添加AIGC</GuipButton>
+                </div>
+            </div>
+            <div>
+                <div class="flex-common table-wrap">
+                    <el-form>
+                        <GuipTable :border="true" :tableData="tableData" :loading="tableLoading">
+                            <el-table-column prop="name" fixed="left" label="检测服务" width="200">
+                                <template slot-scope="scope">
+                                    <div class="flex nowrap ">
+                                        <div :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
+                                            }}</div>
+                                        <div class="">{{ scope.row.name }}</div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="stock" label="今日供货价" min-width="138">
+                                <template slot-scope="scope">
+                                    <div class="flex cell_render">
+                                        <span>¥{{ scope.row.stock }}/篇</span>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="price" label="售价" width="300">
+                                <template #default="{ row,$index }">
+                                    <el-popover v-model="row.pricePopoverVisible" :ref="`pricePopover-${row.id}`"
+                                                placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
+                                                popper-class="custom-popover"  @show="popshow" >
+                                        <div style="text-align: center">
+                                            <GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
+                                                       placeholder="请输入售价" unit="元">
+                                            </GuipInput>
+                                            <div v-else class="flex">
+                                                <GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价"
+                                                           unit="元">
+                                                </GuipInput>
+                                                <span class="shortspan">/</span>
+                                                <GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符">
+                                                </GuipInput>
+                                            </div>
+                                            <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                                                <GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
+                                                <GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定</GuipButton>
+                                            </div>
+                                        </div>
+                                        <template #reference>
+                                            <div class="flex cell_render" @click="handlePriceClick(row,$index,'price')">
+                                                <span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span>
+                                                <span v-else :key="random()">¥{{ row.price }}/篇</span>
+                                                <span>测试用一下</span>
+                                                <span>随便写的</span>
+                                                <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                                                          :hoverColor="'#006AFF'" />
+                                            </div>
+                                        </template>
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column prop="num" label="排序" min-width="95">
+                                <template #default="{ row,$index }">
+                                    <!-- <el-tooltip :manual="true" v-model="row.numPopoverVisible" placement="top" effect="light">
+                                      <template #content>
+                                        <div style="text-align: center">
+                                          <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字">
+                                          </GuipInput>
+                                          <p
+                                            style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;">
+                                            输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
+                                          <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                                            <GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton>
+                                            <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
+                                          </div>
+                                        </div>
+                                      </template>
+                                      <div class="flex cell_render" @click="row.numPopoverVisible = true">
+                                        <span>{{ row.num }}</span>
+                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                                          :hoverColor="'#006AFF'" />
+                                      </div>
+                                    </el-tooltip> -->
+                                    <el-popover v-model="row.numPopoverVisible" :ref="`popover-${row.id}`"
+                                                placement="bottom" trigger="manual" :append-to-body="false"  :visible-arrow="true"
+                                                popper-class="custom-popover"  @show="popshow" >
+                                        <!-- <el-popover v-model="row.numPopoverVisible" placement="top" class="single-popover" trigger="manual" :append-to-body="false" :ref="`popover-${row.id}`"> -->
+                                        <div style="text-align: center" :visible-arrow="true">
+                                            <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字">
+                                            </GuipInput>
+                                            <p
+                                                    style="width: 252px;margin-left: 40px;text-align: right;color: #8A9099;letter-spacing: 0.08em;">
+                                                输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
+                                            <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
+                                                <GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton>
+                                                <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
+                                            </div>
+                                        </div>
+                                        <span slot="reference" @click="handlePriceClick(row,$index,'num')">
+                      <div class="flex cell_render">
+                        <GuipToolTip :content="row.num">
+                          <span class="nowrap">{{ row.num }}</span>
+                        </GuipToolTip>
+                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                                  :hoverColor="'#006AFF'" />
+                      </div>
+                    </span>
+                                    </el-popover>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="stock" label="收款方式" min-width="258">
+                                <template slot-scope="scope">
+                                    <div class="flex cell_render">
+                                    <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">
+                                        {{ scope.row.payment == '0' ? '默认站点支付' : '自定义支付' }}</span>
+                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')"
+                                                 :color="'#8A9099'" :hoverColor="'#006AFF'" />
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="stock" fixed="right" label="上首页" min-width="160">
+                                <template slot-scope="scope">
+                                    <GuipSwitch :modelValue="scope.row.homeFlag">
+                                    </GuipSwitch>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="操作" fixed="right" min-width="150px">
+                                <div class="flex">
+                                    <el-button type="text">编辑</el-button>
+                                    <el-button type="text">删除</el-button>
+                                </div>
+                            </el-table-column>
+                        </GuipTable>
+
+                        <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                                       :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
+                                       :total="tableData.length">
+                        </el-pagination>
+                    </el-form>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="register-btns">
+            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">跳过</GuipButton>
+            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">完成</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+import GuipToolTip from "@/components/GuipToolTip.vue";
+import SvgIcon from "@/components/SvgIcon.vue";
+import GuipSwitch from "@/components/GuipSwitch.vue";
+import GuipTable from "@/components/GuipTable.vue";
+
+export default {
+  name: 'domainSet',
+  props: {
+     siteInfo: {
+          type: Object,
+          required: true
+     }
+  },
+  components: {
+      GuipTable, GuipSwitch, SvgIcon, GuipToolTip, GuipInput,
+      GuipButton
+
+  },
+  data(){
+    return {
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+        tableData:[],
+        tableLoading:false,
+        currentPage: 1,    //当前页
+        pageSize: 2,   //每页的容量
+        total: 0,   //列表总数
+        // 服务列表url
+        serviceAddUrl: '/agent/siteAddService',
+    }
+  },
+  mounted() {
+      if(Object.keys(this.siteInfo).length === 0) {
+          this.$message.error('未知错误');
+          this.$emit('handelStep', 1)
+          return false;
+      }
+  },
+  methods:{
+      jumpStep(){
+          this.$emit('handelStep', 4)
+      },
+      nextStep(){
+          //保存数据
+
+          this.$emit('handelStep', 4)
+      },
+
+
+      handleSizeChange(val) {
+          this.pageSize = val
+      },
+      handleCurrentChange(val) {
+          this.currentPage = val
+      },
+      serviceAdd(prodid){
+          this.$router.push(this.serviceAddUrl + '?uid=' + this.siteInfo.uid + '&prodid=' + prodid)
+      },
+
+
+
+
+
+
+
+
+      handleEvent(data){
+          this.newDomain = data
+      },
+      saveConfirm() {
+          let obj = {}
+          obj.uid = this.info.uid
+          obj.type = this.info.type
+          if(this.domainFrom === '1'){
+              if(!this.newDomain.prefix || !this.newDomain.domain) return false
+              obj.domain = this.newDomain.prefix + this.newDomain.domain
+          }else{
+              obj.domain = ''
+          }
+
+          const that = this
+          this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  that.$message.success('保存成功');
+
+                  //替换域名
+                  const protocol = new URL(that.info.domain).protocol;
+                  if(this.domainFrom === '1'){
+                      that.info.domain = protocol + "//" +obj.domain;
+                      that.info.ser_domain = protocol + "//" +obj.domain;
+                  }else{
+                      that.info.domain = that.info.site_domain;
+                      that.info.ser_domain = '';
+                  }
+
+                  that.$emit('saveEvent', that.info)
+                  return true;
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+  }
+}
+</script>
+<style lang="scss">
+.step3-wrap {
+  flex: 1;
+
+  .step3-top {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0;
+    align-items: end;
+    h3{
+      margin: 0;
+    }
+
+    .btngroup {
+      display: flex;
+      height: 33px;
+
+      button {
+        font-size: 12px;
+        margin-left: 12px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f2d7f45..2a33dc5 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,7 +8,7 @@ import HomeView from '../views/HomeView.vue';
 Vue.use(VueRouter)
 // 侧边导航黑名单
 const blackSliderList = [
-  '/register', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
+  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
 ];
 // 一级路由
 let first_child_router = []
@@ -17,7 +17,7 @@ const blackHeaderList = [
   '/franchise'
 ];
 const blackFooterList = [
-  '/', '/franchise','/agent/payInfoSetting','/agent/siteServiceEdit'
+  '/', '/franchise', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit'
 ];
 // const whiteSlideList = ['/', '/ui', 
 //   '/agent/siteList', 
@@ -117,6 +117,17 @@ const routes = [{
     }
   },
   {
+    path: '/agent/siteAdd',
+    name: '添加站点',
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteAdd.vue'),
+    meta: {
+      title: '添加站点',
+      hideBreadcrumb: true, // 一级页面不显示面包屑
+    }
+  },
+  {
     path: '/agent/siteServiceList',
     name: '服务列表',
     isFirst: true,
diff --git a/src/views/agent/siteAdd.vue b/src/views/agent/siteAdd.vue
new file mode 100644
index 0000000..2850c28
--- /dev/null
+++ b/src/views/agent/siteAdd.vue
@@ -0,0 +1,290 @@
+<template>
+    <div class="register-wrap min-width">
+        <!-- 顶部提示语 -->
+        <div class="register-top" v-if="showAlert">
+            <div class="register-top-left">
+                <img src="../../assets/register/register-top-left.svg" alt="">
+                <span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span>
+            </div>
+            <div class="register-top-right">
+                <img src="../../assets/register/register-top-close.svg" alt="" @click="hideAlert">
+            </div>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="sticky">
+            <div style="width: 100%;background: #fff;">
+                <div class="step-wrap min-flex">
+                    <div :class="['step-item', activeStep === 1 ? 'checked' : 'success']" @click="goCurActiveStep(1)">
+                        <img v-if="activeStep === 1" src="../../assets/register/step1_ing.svg" alt="" class="custom-icon">
+                        <img v-if="activeStep > 1" src="../../assets/register/step_success.svg" alt="" class="custom-icon">
+                        <span>基础信息</span>
+                    </div>
+                    <div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div>
+                    <div :class="['step-item', activeStep === 2 ? 'checked' : activeStep > 2 ? 'success' : '']"
+                         @click="goCurActiveStep(2)">
+                        <img v-if="activeStep === 1" src="../../assets/register/step2_null.svg" alt="" class="custom-icon">
+                        <img v-if="activeStep === 2" src="../../assets/register/step2_ing.svg" alt="" class="custom-icon">
+                        <img v-if="activeStep > 2" src="../../assets/register/step_success.svg" alt="" class="custom-icon">
+                        <span>收款方式</span>
+                    </div>
+                    <div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div>
+                    <div :class="['step-item', activeStep === 3 ? 'checked' : activeStep > 2 ? 'success' : '']"
+                         @click="goCurActiveStep(3)">
+                        <img v-if="activeStep !== 3" src="../../assets/register/step3_null.svg" alt="" class="custom-icon">
+                        <img v-if="activeStep === 3" src="../../assets/register/step3_ing.svg" alt="" class="custom-icon">
+                        <!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
+                        <span>添加服务</span>
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;background: #fff;">
+                <div class="step-desc min-flex">
+                    <span>{{ renderStepDesc('1') }}</span>
+                    <span>{{ renderStepDesc('2') }}</span>
+                    <span>{{ renderStepDesc('3') }}</span>
+                </div>
+            </div>
+        </div>
+
+        <p class="pageDesc min-flex">搭建售卖渠道</p>
+
+        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
+        <!-- 默认页面展示 的初始组件 Franchise-->
+        <component :is="process" :siteInfo="siteInfo" ref="dynamicComponent" @handelSiteInfo="handelSiteInfo" @handelStep="handelStep"/>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import step1 from '@/components/site/addSiteStep/step1.vue'
+import step2 from '@/components/site/addSiteStep/step2.vue'
+import step3 from '@/components/site/addSiteStep/step3.vue'
+
+export default {
+    // 服务个性化设置
+    name: 'siteAdd',
+    props: [''],
+    components: {
+        step1,
+        step2,
+        step3,
+    },
+    data() {
+        return {
+            // AUTH
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
+            siteInfo:{},
+            showAlert:true,
+            activeStep: '',//当前步骤条
+            process: '', //进度默认为站点开通
+            prodid: '',//要添加的服务类型
+            stepDesc: {
+                '1': '填写站点信息、选择模板样式',
+                '2': '配置收款方式',
+                '3': '想卖哪些东西？来选选吧',
+            },
+        }
+    },
+    computed: {
+        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
+    },
+    watch:{
+        activeStep: {
+            immediate: true,
+            handler(newVal) {
+                if(newVal){
+                    this.process = 'step'+newVal
+                }
+            },
+        },
+    },
+    mounted() {
+        this.getNotFinishedSite()
+    },
+    methods: {
+        getNotFinishedSite() {
+            const that = this
+            that.payList = []
+            this.$http('POST', '/agentnew/ajax_get_not_finished_site', {},{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                if(response.status){
+                    that.$nextTick(() => {
+                        const unsiteInfo = response.data
+                        if(Object.keys(unsiteInfo).length>0){
+                            that.siteInfo = unsiteInfo
+                            if(that.siteInfo.open_process === '3'){
+                                if(that.siteInfo.sale_channel === '2'){
+                                    that.activeStep = 3 //自用不出售 不设置收款方式
+                                    return true
+                                }else{
+                                    that.activeStep = 2 //站点信息已存在 设置收款方式
+                                    return true
+                                }
+                            }else if(that.siteInfo.open_process === '4'){
+                                that.activeStep = 3 //收款方式已设置 添加售卖服务
+                                return true
+                            }
+                        }
+                        that.activeStep = 1
+                    })
+                    return true
+                }
+                that.$message.error(response.info);
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        hideAlert(){
+            this.showAlert = false
+        },
+        goCurActiveStep(step) {
+            if (step < this.activeStep) {
+                this.activeStep = step
+            }
+        },
+        renderStepDesc(step) {
+            return this.stepDesc[step]
+        },
+        handelSiteInfo(siteInfo){
+            this.siteInfo = siteInfo
+        },
+        handelStep(step){
+            if(step === 4){
+                //跳转主页面
+                this.$message.success('保存成功');
+                return true;
+            }
+
+            this.activeStep = step
+        },
+    }
+}
+</script>
+<style lang="scss">
+.register-btns {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background: #FFFFFF;
+  padding: 16px 0px;
+  /* 蓝色阴影_常规 */
+  box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+  z-index: 999;
+  button:nth-child(1) {
+    margin-right: 56px;
+  }
+}
+
+.register-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .custom-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .register-top {
+    display: flex;
+    justify-content: space-between;
+    // height: 72px;
+    align-items: center;
+    padding: 20px 40px 20px 110px;
+    background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%);
+    color: #23242B;
+    letter-spacing: 0.08em;
+    line-height: 32px;
+
+    .register-top-left {
+      display: flex;
+      align-items: center;
+
+      .register-top-left img {
+        margin-right: 12px;
+      }
+    }
+  }
+
+  .pageDesc {
+    /* 自动布局 */
+    display: flex;
+    flex-direction: column;
+    padding: 24px 36px;
+    line-height: 32px;
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 24px;
+    letter-spacing: 0.06em;
+    color: #1E2226;
+    text-align: left;
+    width: calc(84.75% - 72px);
+  }
+}
+
+.step-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 0 0 0;
+
+  .step-item {
+    align-items: center;
+    display: flex;
+
+    span {
+      color: #1E2226;
+      letter-spacing: 0.08em;
+    }
+
+    .custom-icon {
+      margin-right: 12px;
+    }
+  }
+
+  .checked span {
+    font-size: 16px;
+    font-weight: bold;
+    color: #006AFF !important;
+    transition: all .3s;
+
+  }
+
+  .success span {
+    font-size: 16px;
+    font-weight: normal;
+    color: #006AFF !important;
+    transition: all .3s;
+  }
+
+  .step-line {
+    flex: 1;
+    margin: 0 32px;
+    border-bottom: 1px solid #DFE2E6;
+  }
+
+  .step_active-line {
+    transition: all .3s;
+    border-bottom: 1px solid #006AFF;
+  }
+}
+
+.step-desc {
+  padding-top: 6px;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 24px;
+  color: #8A9099;
+
+  span {
+    padding-left: 36px;
+  }
+}
+</style>
\ No newline at end of file