Merge branch 'master' of gitea.intra.yunpaper.com:zhangqi/kuailelunwen_new_houtai into zq-realTimeTem

src/components/PromptText.vue

@@ -1,8 +1,18 @@
 <template>
     <div class="prompt-text" :class="typeClass">
+        <div class="flex-text">
+            <div class="flex">
                 <img class="prompt-icon" :src="typeIcon" alt="">
                 <span class="prompt-desc">{{text}}</span>
             </div>
+            <div class="flex">
+                <slot name="next_desc" />
+            </div>
+        </div>
+        <div class="prompt-extra">
+            <slot name="desc" />
+        </div>
+    </div>
 </template>
 <script>
 
@@ -47,33 +57,26 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.info{
+.prompt-text{
+  padding: 8px 13px;
+  border-radius: 4px;
+}
+.flex-text{
   display: flex;
   align-items: center;
-  padding: 8px 13px;
   align-self: stretch;
+  justify-content: space-between;
   z-index: 1;
-  border-radius: 4px;
+}
+.info{
   background: #F2F7FF;
   border: 1px solid #BFDAFF;
 }
 .notice{
-  display: flex;
-  align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
   background: #FEFCE8;
   border: 1px solid rgba(255, 140, 0, 0.3);
 }
 .warning{
-  display: flex;
-  align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
   background: #FFF1F0;
   border: 1px solid #FFA39E;
 }
@@ -87,4 +90,7 @@ export default {
   color: #1E2226;
   letter-spacing: 0.08em;
 }
+.prompt-extra{
+
+}
 </style>

src/components/site/serviceSetting/domainSet.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+
+export default {
+  name: '',
+  props:[],
+  components: {
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/linkSet.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="首页链接">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
+                            </GuipInput>
+                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="检测服务链接">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
+                            </GuipInput>
+                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/menuColorSet.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <h3>PC端页面品牌</h3>
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="提交页Logo上传">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="报告页Logo上传">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="flex-common">
+            <h3 class="mb16">页面色彩</h3>
+
+            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        aaa
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        bbb
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import HoverButton from "@/components/HoverButton.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton, PromptText, GuipFormItem, HoverButton
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/paymentSet.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">收款设置</span>
+        </div>
+
+        <div class="flex-common payment-area">
+            <PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
+            <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import PaymentMethod from "@/components/paymentMethod.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton,
+      PromptText, PaymentMethod
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/priceSet.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+
+export default {
+  name: '',
+  props:[],
+  components: {
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/reportSeoSet.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="报告页关键词（K：keyword）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="报告页描述（D：description）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, PromptText, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>

src/components/site/serviceSetting/showSet.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <h3 class="mb16">基础信息</h3>
+
+            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="服务别名">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="服务广告词">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="服务描述">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
+                                       desc="用来详细的解释服务">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="服务Logo">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="flex-common">
+            <h3>展示开关</h3>
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">首页服务显示</p>
+                                <p class="card-desc">控制首页是否显示本服务</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">检测页价格展示</p>
+                                <p class="card-desc">本服务检测页面是否展示价格</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">首页推荐位</p>
+                                <p class="card-desc">开启即上推荐位</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import HoverButton from "@/components/HoverButton.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipSwitch from "@/components/GuipSwitch.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipInput from "@/components/GuipInput.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton,
+      GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+.flex-right{
+  text-align: left;
+}
+.card-item{
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #FAFAFA;
+  border-radius: 4px;
+  border: none;
+  margin-bottom: 12px;
+  .card-info{
+    text-align: left;
+    margin-left: 12px;
+    font-variation-settings: "opsz" auto;
+    letter-spacing: 0.08em;
+    .card-name{
+      font-size: 14px;
+      line-height: 18px;
+      color: #1E2226;
+    }
+    .card-desc{
+      font-size: 12px;
+      line-height: 13px;
+      margin-top: 12px;
+      color: #8A9099;
+    }
+  }
+
+  .el-form-item{
+    margin: 0;
+  }
+}
+</style>

src/components/site/serviceSetting/submitSeoSet.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内">
+                            </GuipInput>
+
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="提交页关键词（K：keyword）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="提交页描述（D：description）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, PromptText, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>

src/store/index.js

@@ -316,6 +316,75 @@ export default new Vuex.Store({
         ]
       }
     ],
+    siteServiceSettingData:[
+      {
+        name: '服务设置',
+        path: '',//设置为空
+        img:'site/settingIcon.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '价格设置',
+            desc: 'priceSet',//和组件名称、componentsName 一致
+            componentsName:'priceSet'//和页面内引入的组件名称 、及上面desc 一致
+          },
+          {
+            name: '收款设置',
+            desc: 'paymentSet',
+            componentsName:'paymentSet'
+          },
+          {
+            name: '展示设置',
+            desc: 'showSet',
+            componentsName:'showSet'
+          },
+          {
+            name: '页面品牌与色彩',
+            desc: 'menuColorSet',
+            componentsName:'menuColorSet'
+          }
+        ]
+      },
+      {
+        name: 'SEO优化',
+        path: '',
+        img: 'site/sitesem.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '提交页SEO',
+            desc: 'submitSeoSet',
+            componentsName:'submitSeoSet'
+          },
+          {
+            name: '报告页SEO',
+            desc: 'reportSeoSet',
+            componentsName:'reportSeoSet'
+          },
+        ]
+      },
+      {
+        name: '域名与链接',
+        path: '',
+        img: 'site/form_link.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '独立域名',
+            desc: 'domainSet',
+            componentsName:'domainSet'
+          },
+          {
+            name: '自定义导航',
+            desc: 'linkSet',
+            componentsName:'linkSet'
+          },
+        ]
+      }
+    ],
     demoPageData:[
       {
         name: '支付授权',

src/views/agent/payCertSetting.vue

@@ -3,29 +3,44 @@
         <!-- page content -->
         <div class="site-setting-wrap min-flex-right">
             <div class="siteMessage flex-common mt12" id="siteMessage1">
-                <h3>管理证书</h3>
+                <h3 class="mb12">管理证书</h3>
+                <div class="beforeNotice">
+                    <span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;"> API证书获取：
+                        <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;"
+                            src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>> 账户中心 > API安全，申请API证书。
+                    </span>
+                </div>
                 <el-form>
                     <div class="flex-wrap">
                         <div class="flex-left">
                             <div class="uploadwrap">
-                                <label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4"
+                                <label class="flex upload-title">上传 apiclient_cert.pem 证书<img class="ml-4"
                                         src="@/assets/require.svg" /></label>
-                                <el-upload class="flex mt12" accept=".jpg,.png" ref="upload"
+                                <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
-                                    action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
+                                    :limit="Number(1)" ref="avatorUpload"
-                                    :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
+                                    :auto-upload="false">
-                                    :show-file-list="true">
+                                    <GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
-
+                                        <i class="bgImg"></i>选择文件</GuipButton>
-                                    <el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button>
                                 </el-upload>
-                                <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
+                                <p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p>
                             </div>
                         </div>
                         <div class="flex-line"></div>
                         <div class="flex-right">
-                            <p class="flex-left-desc">微信客服</p>
+                            <div class="uploadwrap">
+                                <label class="flex upload-title">上传 apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
+                                <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
+                                    :limit="Number(1)" ref="avatorUpload"
+                                    :auto-upload="false">
+                                    <GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
+                                        <i class="bgImg"></i>选择文件</GuipButton>
+
+                                </el-upload>
+                                <p class="uploaded" v-if="payinfo.key_uploaded">已上传</p>
                             </div>
                         </div>
-                    <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="submitUpload" />
+                    </div>
+                    <GroupFormBtns @cancel="cancleUpdateSiteInfo()" @confirm="saveCert" />
                 </el-form>
             </div>
             <div class="siteMessage flex-common mt-18" id="siteMessage2">
@@ -33,16 +48,14 @@
                 <el-form>
                     <div class="flex-wrap">
                         <div class="flex-left">
-                            <div class="beforeNotice">
+                            <div class="setting">
                                 <div class="flex justify-content-space-between">
-                                    <h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3>
+                                    <h4 class="flex">功能开关</h4>
 
                                     <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                     <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                     <!-- 传入的modelvalue 为数字 0 或者 1 -->
-                                    <GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0"
+                                    <GuipSwitch :modelValue="payinfo.is_auto_refund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch>
-                                        @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭">
-                                    </GuipSwitch>
                                 </div>
                                 <p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p>
                             </div>
@@ -55,14 +68,30 @@
                 <el-form class="tcpr-wrap">
                     <el-tabs v-model="profitShareTab" @tab-click="handleClick">
                         <el-tab-pane label="分账设置" name="profit_share_setting">
-                            <div class="beforeNotice">
+                            <!-- <div class="beforeNotice">
                                 <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                 <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
                                         src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
 
                                 <p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p>
                                 <p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p>
-                            </div>
+                            </div> -->
+                            <PromptText text="前期准备事项" :type="1" class="beforeNotice mt20">
+                                <template #next_desc>
+                                    <p class="flex">
+                                        <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
+                                        src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
+                                    </p>
+                                </template>
+                                <template #desc>
+                                    <p class="mt12 flex">
+                                        1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。
+                                    </p>
+                                    <p class="mt10 flex">
+                                        2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。
+                                    </p>
+                                </template>
+                            </PromptText>
                             <div class="semBidWrap">
                                 <div class="baidu-wrap bidWrap">
 
@@ -135,17 +164,31 @@
                                 </div>
                             </div>
                         </el-tab-pane>
-                        <el-tab-pane label="分账记录" name="profit_share_list">分账记录</el-tab-pane>
+                        <el-tab-pane label="分账记录" name="profit_share_list">
+                            <GuipTable :border="true" :tableData="profitShareList" :loading="tableLoading">
+                              <el-table-column prop="tid" fixed="left" label="订单号"></el-table-column>
+                              <el-table-column prop="transaction_id" label="微信支付订单号" width="350px"></el-table-column>
+                              <el-table-column prop="out_order_no" label="分账单号"></el-table-column>
+                              <el-table-column prop="receiver_amount" label="分账金额"></el-table-column>
+                              <el-table-column prop="receiver_description" label="分账描述"></el-table-column>
+                              <el-table-column prop="status" label="状态"></el-table-column>
+                            </GuipTable>
+                            <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                                :current-page="profitShareListCurrentPage" :page-size="profitShareListPageSize" layout="prev, pager, next,jumper"
+                                :total="profitShareListTotal">
+                            </el-pagination>
+                        </el-tab-pane>
                     </el-tabs>
                 </el-form>
             </div>
         </div>
 
         <GuipDialog type="normal" :dialogVisible="dialogVisibleCert" title="配置商户证书" :show-close-button="false"
-            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert(payinfo)"
+            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveCert()"
             @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
             <div class="config-offline-wrap">
                 <el-form>
+                    <p class="mb24">微信商户平台> 账户中心 > API安全，申请API证书。</p>
                     <!-- accept=".jpg,.png" -->
                     <div class="uploadwrap">
                         <label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4"
@@ -159,8 +202,7 @@
 
                     </div>
                     <div class="uploadwrap mt-18">
-                        <label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4"
+                        <label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label>
-                                src="@/assets/require.svg" /></label>
                         <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
                              :limit="Number(1)" ref="avatorUpload"
                             :auto-upload="false">
@@ -216,6 +258,8 @@ import GuipButton from '@/components/GuipButton.vue'
 import GuipDialog from '@/components/GuipDialog.vue'
 import GuipInput from '@/components/GuipInput.vue'
 import GuipSelect from '@/components/GuipSelect.vue'
+import PromptText from '@/components/PromptText.vue'
+import GuipTable from '@/components/GuipTable.vue'
 
 // 收款方式
 const PAY_TYPE_TAOBAO = 0;    // 淘宝
@@ -235,6 +279,8 @@ export default {
         GuipDialog,
         GuipInput,
         GuipSelect,
+        PromptText,
+        GuipTable,
     },
     data() {
         return {
@@ -243,7 +289,6 @@ export default {
             payid: '',
             payinfo: [],
             payType: -1,
-            payIsAutoRefund: -1,
             paySvg: '',
             // 收款方式
             payTypeTaoBao: PAY_TYPE_TAOBAO,
@@ -264,6 +309,10 @@ export default {
                 'receiver_name': '',
             },
             profitShareReceiversRelationType: [],
+            profitShareList: [],
+            profitShareListCurrentPage: 1,    //当前页
+            profitShareListPageSize: 1,   //每页的容量
+            profitShareListTotal: 0,   //列表总数
             showCustomInput: false,
 
             uploadParams: {
@@ -271,6 +320,8 @@ export default {
             uploadHeaders: {
                 'Auth': this.token
             },
+
+            tableLoading: false,
         }
     },
     computed: {
@@ -303,7 +354,8 @@ export default {
                 this.$nextTick(() => {
                     this.payinfo = response.data
                     this.payType = response.data.type
-                    this.payIsAutoRefund = Number(response.data.is_auto_refund)
+                    this.payinfo.is_auto_refund = Number(response.data.is_auto_refund)
+                    this.payinfo.profit_share_status = Number(response.data.profit_share_status)
                     this.paySvg = require('@/assets/pay/pay_' + this.payType + '.svg')
                     if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) {
                         this.confirmText = '去授权';
@@ -376,6 +428,31 @@ export default {
                 console.error(error, 'error')
             })
         },
+        getProfitShareList() {
+            this.tableLoading = true
+            const that = this
+            that.profitShareList = []
+            this.$http('POST', '/agentnew/ajax_get_profit_share_list', {
+                pid: this.$route.query.payid,
+                cur_page: this.profitShareListCurrentPage,
+                page_size: this.profitShareListPageSize
+            },{
+                headers:{
+                    'Auth': this.token
+                }
+            }).then(response => {
+                this.tableLoading = false
+                this.$nextTick(() => {
+                    that.profitShareList = response.data.list
+
+                    that.profitShareListTotal = response.data.total
+
+                    console.log(this.profitShareList)
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
         cancle() {
             this.getPayment();
         },
@@ -387,9 +464,21 @@ export default {
         },
         handlePreview(file) {
             console.log(file);
+            
         },
         handleClick(tab, event) {
             console.log(tab, event);
+            if (this.profitShareTab == 'profit_share_list') {
+                this.getProfitShareList();
+            }
+        },
+        handleSizeChange(val) {
+            this.profitShareListPageSize = val
+            this.getProfitShareList()
+        },
+        handleCurrentChange(val) {
+            this.profitShareListCurrentPage = val
+            this.getProfitShareList()
         },
         showDialog(type) {
             if (type == 'apiv3') {
@@ -407,8 +496,7 @@ export default {
             }
         },
         // 确认按钮事件
-        saveCert(row) {
+        saveCert() {
-            this.formData.set('apiv3',row.apiv3)
             // for(let [key,value] of this.formData){
             //     console.log(key,value,'=====key');
             // }
@@ -430,7 +518,7 @@ export default {
             }).catch(error => {
                 console.error(error, 'error')
             })
-            this.dialogVisibleApiv3 = false;
+            this.dialogVisibleCert = false;
         },
         saveApiv3(row) {
             this.$http('POST', '/agentnew/ajax_save_apiv3', {
@@ -529,73 +617,12 @@ a {
 
 .justify-content-space-between {
     justify-content: space-between;
+    align-items: center;
 }
 .upload-demo{
     margin-top: 12px;
 }
 
-.beforeNotice {
-
-    h4 {
-        margin: 0;
-        gap: 8px;
-        justify-content: space-between;
-    }
-
-    margin-bottom: 18px;
-    text-align: left;
-    box-sizing: border-box;
-    padding: 20px 14px;
-    border-radius: 4px;
-    /* middle/middle_grey_0 */
-    background: #FAFAFA;
-
-    div {
-        margin-top: 2px;
-        padding-left: 23px;
-
-        p {
-            color: #8A9099;
-        }
-
-    }
-
-    p {
-        color: #1E2226;
-
-        i {
-            font-style: normal;
-        }
-
-        &:last-child {
-            display: flex;
-            align-items: stretch;
-
-            b {
-                font-weight: normal;
-                color: #8A9099;
-                display: inline-flex;
-
-                img {
-                    margin-left: 4px;
-                }
-            }
-        }
-    }
-
-    a {
-        text-decoration: none;
-        color: #006AFF;
-        margin-right: 10px;
-
-        img {
-            margin-left: 5px;
-            margin-right: 5px;
-        }
-    }
-}
-
-
 .siteMessage {
     border-radius: 4px;
     transition: all .5s;
@@ -761,9 +788,9 @@ lable {
         margin-top: 2px;
         padding-left: 23px;
 
-        p {
+        // p {
-            color: #8A9099;
+        //     color: #8A9099;
-        }
+        // }
 
     }
 
@@ -796,8 +823,8 @@ lable {
         margin-right: 10px;
 
         img {
-            margin-left: 12px;
+            margin-left: 5px;
-            margin-right: 12px;
+            margin-right: 5px;
         }
     }
 }
@@ -829,4 +856,60 @@ lable {
     letter-spacing: 0.08em;
     color: #23242B;
 }
+
+.uploaded {
+    color: #606266;
+    font-size: 12px;
+    margin-top:10px;
+}
+
+.setting {
+
+    h4 {
+        margin: 0;
+        gap: 8px;
+        justify-content: space-between;
+    }
+
+    margin-bottom: 18px;
+    text-align: left;
+    box-sizing: border-box;
+    padding: 20px 14px;
+    border-radius: 4px;
+    /* middle/middle_grey_0 */
+    background: #FAFAFA;
+
+    div {
+        margin-top: 2px;
+        padding-left: 23px;
+
+        p {
+            color: #8A9099;
+        }
+
+    }
+
+    p {
+        color: #1E2226;
+
+        i {
+            font-style: normal;
+        }
+
+        &:last-child {
+            display: flex;
+            align-items: stretch;
+
+            b {
+                font-weight: normal;
+                color: #8A9099;
+                display: inline-flex;
+
+                img {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+}
 </style>

src/views/agent/siteServiceEdit.vue

@@ -1,429 +1,224 @@
 <template>
     <div class="main-content12">
-        <div class="pageheader">
+        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
-            <span class="pagetitle">基本设置</span>
+        <!-- 默认页面展示 的初始组件 Franchise-->
+        <component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent"
+                   :someProp="payinfo"  @customEvent="handleComponentEvent"/>
     </div>
 
-<!--        收款方式-->
-        <div class="flex-common payment-area">
-            <PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
-            <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
-        </div>
-
-<!--        提交页seo-->
-        <div class="flex-common">
-            <PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内">
-                            </GuipInput>
-
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="提交页关键词（K：keyword）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="提交页描述（D：description）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        报告页seo-->
-        <div class="flex-common">
-            <PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="报告页关键词（K：keyword）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="报告页描述（D：description）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        展示设置-->
-        <div class="flex-common">
-            <h3 class="mb16">基础信息</h3>
-
-            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="服务别名">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="服务广告词">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="服务描述">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
-                                       desc="用来详细的解释服务">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="服务Logo">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="flex-common">
-            <h3>展示开关</h3>
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">首页服务显示</p>
-                                <p class="card-desc">控制首页是否显示本服务</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">检测页价格展示</p>
-                                <p class="card-desc">本服务检测页面是否展示价格</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">首页推荐位</p>
-                                <p class="card-desc">开启即上推荐位</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        页面品牌和颜色-->
-        <div class="flex-common">
-            <h3>PC端页面品牌</h3>
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="提交页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                              hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="报告页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                              hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="flex-common">
-            <h3 class="mb16">页面色彩</h3>
-
-            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        aaa
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        bbb
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        自定义导航-->
-        <div class="flex-common">
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="首页链接">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
-                            </GuipInput>
-                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="检测服务链接">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
-                            </GuipInput>
-                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="save-button">
-            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
-        </div>
-    </div>
 </template>
 <script>
-
+import store from '@/store';
-import PaymentMethod from "@/components/paymentMethod.vue";
+import { mapState } from 'vuex';
-import GuipButton from "@/components/GuipButton.vue";
+import GuipSwitch from '@/components/GuipSwitch.vue';
-import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipButton from '@/components/GuipButton.vue';
-import GuipInput from "@/components/GuipInput.vue";
+import HoverButton from '@/components/HoverButton.vue'
-import HoverButton from "@/components/HoverButton.vue";
+import priceSet from '@/components/site/serviceSetting/priceSet.vue'
-import GuipSwitch from "@/components/GuipSwitch.vue";
+import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
-import PromptText from "@/components/PromptText.vue";
+import showSet from '@/components/site/serviceSetting/showSet.vue'
+import menuColorSet from '@/components/site/serviceSetting/menuColorSet.vue'
+import submitSeoSet from '@/components/site/serviceSetting/submitSeoSet.vue'
+import reportSeoSet from '@/components/site/serviceSetting/reportSeoSet.vue'
+import domainSet from '@/components/site/serviceSetting/domainSet.vue'
+import linkSet from '@/components/site/serviceSetting/linkSet.vue'
 
 export default {
-    // 站点设置
+    // 服务个性化设置
-    name: '',
+    name: 'siteServiceEdit',
     props: [''],
     components: {
         GuipSwitch,
-        HoverButton,
-        GuipInput, GuipFormItem,
         GuipButton,
-        PaymentMethod,
+        HoverButton,
-        PromptText
+        priceSet,
+        paymentSet,
+        showSet,
+        menuColorSet,
+        submitSeoSet,
+        reportSeoSet,
+        domainSet,
+        linkSet,
     },
     data() {
         return {
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
-
+            payinfo: [
-            uid:0,
+                {
-            type:0,
+                    type: 'a',
-            payList: [],
+                    name: '传递的参数'
-
+                }
-            //添加按钮样式
+            ],
-            saveBtnStyleObj: {
+            payType: -1,
-                width: '144px',
+            payStatus: -1,
-                height: '46px',
+            paySvg: '',
-                borderRadius: '4px',
+            confirmText: '保存',
-                background: '#006AFF',
-            },
         }
     },
     computed: {
+        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
     },
     created() {
-        if(!this.$route.query.uid && !this.$route.query.type) {
+        store.commit('SET_CUSTOMIZE', true);
-            this.$message.error('非法请求');
+        store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');
-            this.$router.push('/agent/siteList')
-        }
-        this.uid = this.$route.query.uid;
-        this.type = this.$route.query.type;
     },
     mounted() {
-        this.getPayList()
+        store.commit('SET_PAGETITLE', '支付授权');
     },
     methods: {
-        // 获取支付列表
+        handleComponentEvent(payload) {
-        getPayList() {
+            console.log('收到子组件事件:', payload);
-            const that = this
-            that.payList = []
-            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
-                uid: that.uid,
-                type: that.type,
-            },{
-                headers:{
-                    'Auth': this.token
-                }
-            }).then(response => {
-                this.$nextTick(() => {
-                    that.payList = response.data.paylist
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
         },
-        confirmPayment(payList){
+        submitSave() {
-            this.payList = payList
+            // 逻辑示例
+            // 获取动态组件实例
+            const componentInstance = this.$refs.dynamicComponent;
+            console.log('当前组件实例:', componentInstance);
+
+            // 调用组件方法（如果存在）
+            if (componentInstance) {
+                console.log('获取到啦');
+                // 调用方法或者获取参数
+                componentInstance.showDomainModal && componentInstance.showDomainModal()
+            }
         },
     }
 }
 </script>
 <style lang="scss" scoped>
-.mb16{
+a {
-  margin-bottom: 16px;
+  text-decoration: none;
+  color: #006AFF;
 }
-.mb32{
+
-  margin-bottom: 32px;
+.gray {
+  color: #626573 !important;
 }
-.pageheader {
+
-    display: flex;
+.mt-18 {
-    justify-content: space-between;
+  margin-top: 18px;
-    /* 关键属性 */
-    align-items: center;
-    margin: 16px 0 16px 0;
 }
 
-.pagetitle {
+.ml-23 {
-    font-size: 18px;
+  margin-left: 23px;
-    font-weight: bold;
-    line-height: normal;
-    letter-spacing: 0.08em;
-    color: #1E2226;
-    margin-top: 8px;
 }
-.flex-common{
+
-  margin-bottom: 12px;
+.justify-content-space-between {
+  justify-content: space-between;
 }
 
-.notice-text{
+.beforeNotice {
-  display: flex;
+
-  align-items: center;
+  h4 {
-  padding: 8px 13px;
+    margin: 0;
-  align-self: stretch;
+    gap: 8px;
-  z-index: 1;
+    justify-content: space-between;
-  border-radius: 4px;
-  background: #F2F7FF;
-  border: 1px solid #BFDAFF;
-  margin-bottom: 32px;
-  .notice-icon{
-    width: 16px;
-    height: 16px;;
-    margin-right: 8px;
   }
-  span{
+
-    color: #1E2226;
+  margin-bottom: 18px;
-    letter-spacing: 0.08em;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 20px 14px;
+  border-radius: 4px;
+  /* middle/middle_grey_0 */
+  background: #FAFAFA;
+
+  div {
+    margin-top: 2px;
+    padding-left: 23px;
+
+    p {
+      color: #8A9099;
     }
+
   }
 
-::v-deep .payment-item{
+  p {
-  width: 540px;
+    color: #1E2226;
-  height: 95px;
+
-  padding: 0 24px;
+    i {
-  background: #FAFAFA;
+      font-style: normal;
-  border-radius: 4px;
-  border: none;
-  margin-bottom: 12px;
     }
 
-.save-button{
+    &:last-child {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background: #fff;
-  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
       display: flex;
-  align-items: center;
+      align-items: stretch;
-  justify-content: center;
+
-  padding: 16px 0;
+      b {
+        font-weight: normal;
+        color: #8A9099;
+        display: inline-flex;
+
+        img {
+          margin-left: 4px;
+        }
+      }
+    }
   }
 
+  a {
+    text-decoration: none;
+    color: #006AFF;
+    margin-right: 10px;
 
-.warning-text{
+    img {
-  display: flex;
+      margin-left: 5px;
-  align-items: center;
+      margin-right: 5px;
-  padding: 8px 13px;
+    }
-  align-self: stretch;
+  }
-  z-index: 1;
+}
+
+
+.siteMessage {
   border-radius: 4px;
-  background: #FFF1F0;
+  transition: all .5s;
-  border: 1px solid #FFA39E;
+  border: 1px solid transparent;
-  margin-bottom: 32px;
-  .warning-icon{
-    width: 16px;
-    height: 16px;;
-    margin-right: 8px;
 }
-  span{
+
-    color: #1E2226;
+.siteMessage h3 {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: normal;
   letter-spacing: 0.08em;
+  color: #1E2226;
 }
+
+.site-setting-wrap {
+  width: 100%;
 }
 
-::v-deep .form-item-bottom{
+::v-deep .mb16{
-  text-align: left;
+  margin-bottom: 16px;
 }
 
-.card-item{
+::v-deep .pageheader {
-  padding: 24px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  background: #FAFAFA;
+  /* 关键属性 */
-  border-radius: 4px;
+  align-items: center;
-  border: none;
+  margin-bottom: 24px;
-  margin-bottom: 12px;
+}
-  .card-info{
+
-    text-align: left;
+::v-deep .pagetitle {
-    margin-left: 12px;
+  font-size: 18px;
-    font-variation-settings: "opsz" auto;
+  font-weight: bold;
+  line-height: normal;
   letter-spacing: 0.08em;
-    .card-name{
-      font-size: 14px;
-      line-height: 18px;
   color: #1E2226;
-    }
+  margin-top: 8px;
-    .card-desc{
-      font-size: 12px;
-      line-height: 13px;
-      margin-top: 12px;
-      color: #8A9099;
-    }
 }
 
-  .el-form-item{
+::v-deep .save-button{
-    margin: 0;
+  position: fixed;
-  }
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 0;
 }
+
 </style>

src/views/elementGroups.vue

@@ -4,6 +4,27 @@
             <PromptText text='这是一个提示框' :type="1"/>
             <PromptText text='这是一个提示框' :type="2"/>
             <PromptText text='这是一个提示框' :type="3"/>
+            <PromptText text="前期准备事项" :type="1" class="beforeNotice">
+                <template #next_desc>
+                    <p class="flex">
+                        <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
+                              class="flex" target="_blank">
+                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                    </p>
+                </template>
+                <template #desc>
+                    <p class="mt12 flex">
+                        1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
+                              class="flex" target="_blank">
+                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                    </p>
+                    <p class="mt10 flex">
+                        2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
+                        <img src="@/assets/site/form_linkActive.svg"
+                             alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
+                    </p>
+                </template>
+            </PromptText>
 
             <div class="ele-item">
                     <label for="">实时预览外层嵌套</label>