独立域名列表

src/router/index.js

@@ -9,7 +9,8 @@ const whiteSecondSider = [
   '/agent/siteAddFinally','/agent/siteServiceAdd'
 ];
 const blackSliderList = [
-  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList'
+  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
+  '/agent/domainList'
   , '/agent/noticeList'
 ];
 // 一级路由
@@ -54,7 +55,7 @@ const routes = [{
   },
   {
     path: '/agent/supplyList',
-    name: '首页',
+    name: '供货价格',
     component: () => import( /* webpackChunkName: "register" */ '../views/agent/supplyList.vue'),
     isFirst: true, //是否属于一级路由
     meta: {
@@ -63,6 +64,16 @@ const routes = [{
     }
   },
   {
+    path: '/agent/domainList',
+    name: '域名列表',
+    component: () => import( /* webpackChunkName: "register" */ '../views/agent/domainList.vue'),
+    isFirst: true, //是否属于一级路由
+    meta: {
+      title: '首页', //面包屑名称（此页面确认不需要放置在面包屑可以不添加此属性；如果获取不到title 会自动 获取 name 作为面包屑名称）
+      hideBreadcrumb: true // 是否隐藏面包屑
+    }
+  },
+  {
     path: '/agent/noticeList',
     name: '首页',
     component: () => import( /* webpackChunkName: "register" */ '../views/agent/noticeList.vue'),

src/views/agent/domainList.vue

@@ -0,0 +1,531 @@
+<template>
+    <div class="page-container">
+      <div class="card">
+        <div class="tip-title flex">
+          <img src="@/assets/site/prompt-icon-1.svg" alt="" class="mr-10">使用提示
+        </div>
+        <div class="card-content">
+            <div class="number-container mr-10">1.</div>
+            <div class="descriptions">
+                <div class="desc-item"><div class="desc-text"><p style="color: #1E2226;">使用场景</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>推广途径需求：使用360，百度等推广方式时，需要使用您自己的域名</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>宣传自己公司：有自己的公司，使用自己公司域名更容易让人记住，能达到宣传效果</p></div></div>
+            </div>
+        </div>
+        <div class="card-content">
+            <div class="number-container mr-10">2.</div>
+            <div class="descriptions">
+                <div class="desc-item"><div class="desc-text"><p style="color: #1E2226;">说明</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>站点级：使用自己的域名，生成独立的访问链接，站点下的服务链接根据站点生成</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>服务级：对单独的服务链接进行设置，设置后只改变此服务的链接，不影响站点及其他服务链接</p></div></div>
+            </div>
+        </div>
+        <div class="card-content">
+            <div class="number-container mr-10">3.</div>
+            <div class="descriptions">
+                <div class="desc-item"><div class="desc-text"><p style="color: #1E2226;">使用</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>站点专属域名设置路径：首页->站点设置</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>服务专属域名设置路径：首页->服务列表->修改->独立域名（服务未开通需要先开通服务）</p></div></div>
+            </div>
+        </div>
+        <div class="card-content">
+            <div class="number-container mr-10">4.</div>
+            <div class="descriptions">
+                <div class="desc-item"><div class="desc-text"><p style="color: #1E2226;">如何添加专属域名</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>备案：所添加的域名必须在阿里云备案</p></div></div>
+                <div class="desc-item"><div class="desc-text"><p>解析：将域名增加CNAME解析到“ lunwen.kuailedns.com ”（记录类型：CNAME；记录值：lunwen.kuailedns.com）</p></div></div>
+            </div>
+        </div>
+      </div>
+
+      <div class="register-wrap">
+          <div class="step3-wrap">
+              <div class="step3-top flex-common">
+                  <h3 class="flex gap8">域名列表</h3>
+              </div>
+              <div>
+                  <div class="flex-common table-wrap">
+                      <el-form>
+                          <GuipTable :border="true" :tableData="domainList" :loading="tableLoading">
+                            <el-table-column prop="domain" fixed="left" label="域名"></el-table-column>
+                            <el-table-column prop="beian" label="备案"></el-table-column>
+                            <el-table-column label="操作" fixed="right" min-width="30px">
+                                <template slot-scope="scope">
+                                <div class="flex">
+                                    <el-button @click="paySetting(scope.row)" type="text">设置</el-button>
+                                </div>
+                                </template>
+                            </el-table-column>
+                          </GuipTable>
+                      </el-form>
+                  </div>
+              </div>
+          </div>
+      </div>
+
+    </div>
+</template>
+<script>
+// import GuipButton from '@/components/GuipButton.vue';
+import GuipTable from '@/components/GuipTable.vue';
+
+export default {
+  components: {
+    // GuipButton,
+    GuipTable,
+  },
+  data() {
+    return {
+      // AUTH
+      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
+      // 域名列表
+      domainList: [],
+      // 表格加载
+      tableLoading: false,
+      
+    }
+  },
+  computed: {
+    
+  },
+  mounted() {
+    this.getPrivateDomains()
+  },
+  methods: {
+    // 获取支付列表
+    getPrivateDomains() {
+        this.tableLoading = true
+        const that = this
+        that.payList = []
+        this.$http('POST', '/agentnew/ajax_get_private_domains', {
+            gid: this.gid,
+        },{
+            headers:{
+                'Auth': this.token
+            }
+        }).then(response => {
+            this.tableLoading = false
+            this.$nextTick(() => {
+                that.domainList = response.data
+            })
+        }).catch(error => {
+            console.error(error, 'error')
+        })
+    },
+
+    updateAutoRefund(row) {
+      this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
+          payid: row.payid,
+          status: row.is_auto_refund,
+      }, {
+          headers: {
+              'Auth': this.token
+          }
+      }).then(response => {
+          this.$nextTick(() => {
+              if (response.status) {
+                  this.$Message.success(response.info);
+              } else {
+                  this.$Message.error(response.info);
+              }
+          })
+      }).catch(error => {
+          console.error(error, 'error')
+      })
+    },
+    
+    // 弹框相关方法---start
+    showAddPaymentMethodDialog(type, type_desc) {
+      console.log(type, 'type');
+      this.addPayDialogVisible = true;
+      this.addPayTitle = '添加' + type_desc;
+      this.addPayType = type;
+    },
+    // 取消按钮事件
+    handleCancel() {
+        this.addPayDialogVisible = false;
+        this.closePayTipDialogVisible = false;
+        this.getPayList();
+    },
+    // 关闭弹框事件
+    handleClose() {
+        this.addPayDialogVisible = false;
+        this.closePayTipDialogVisible = false;
+    },
+    dialogVisibleChange(data) {
+        console.log(data, 'data098908090');
+    },
+    // 弹框相关方法---end
+    handleClick(tab, event) {
+        console.log(tab, event);
+    },
+  },
+
+};
+</script>
+<style lang="scss" scoped>
+.page-container {
+    padding: 32px 32px;
+}
+.tip-title { 
+  /* body/body 2_bold */
+  font-family: Microsoft YaHei UI;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  /* text/text_1 */
+  color: #1E2226;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 14px;
+  gap: 12px;
+  border-radius: 4px;
+  background: #F2F7FF;
+  border: 1px solid #BFDAFF;
+  margin-bottom: 12px;
+}
+
+.card-content {
+    display: flex;
+}
+
+.number-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 13px;
+    height: 18px;
+}
+
+.descriptions {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.desc-item {
+    display: flex;
+    align-items: flex-start;
+}
+
+.desc-text {
+  font-family: Microsoft YaHei UI;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  /* text/text_4 */
+  color: #8A9099;
+}
+
+
+
+.pageheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+}
+
+.pageheader-title {
+    flex: 1;
+    min-width: 300px;
+}
+
+.pageheader-title h3 {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    margin-top:8px;
+}
+
+.button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+}
+.red {
+  color:#FF4D4F !important;
+}
+
+.gray {
+  color:#8A9099 !important;
+}
+
+.ml-5 {
+  margin-left: 5px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+
+a {
+  text-decoration: none;
+  color: #006AFF;
+}
+
+.bind-sites-title {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  color: #1E2226;
+}
+
+.bind-sites p {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  color: #1E2226;
+  height: 18px;
+  line-height: 18px;
+  z-index: 0;
+  margin-top: 12px;
+}
+
+.el-table {
+  min-height: auto !important;
+}
+
+.beforeNotice {
+
+    h4 {
+        margin: 0;
+        gap: 8px;
+    }
+
+    margin-bottom: 18px;
+    text-align: left;
+    box-sizing: border-box;
+    padding: 20px 14px;
+    border-radius: 4px;
+    /* middle/middle_blue_1 */
+    background: #F2F7FF;
+    /* middle/middle_blue_3 */
+    border: 1px solid #BFDAFF;
+
+    div {
+        margin-top: 2px;
+        padding-left: 23px;
+
+        p {
+            color: #8A9099;
+        }
+
+    }
+
+    p {
+        color: #1E2226;
+
+        i {
+            font-style: normal;
+        }
+
+        &:last-child {
+            display: flex;
+            align-items: stretch;
+
+            b {
+                font-weight: normal;
+                color: #8A9099;
+                display: inline-flex;
+
+                img {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+
+    a {
+        text-decoration: none;
+        color: #006AFF;
+        margin-right: 10px;
+
+        img {
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+    }
+}
+
+::v-deep .custom-popover {
+    position: fixed !important;
+    // max-height: 290px;
+    // overflow-y: auto;
+    margin-top: 0 !important;
+    margin-left: 0 !important;
+    transform: none !important;
+}
+
+.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;
+      }
+    }
+  }
+
+  .step3-wrap {
+    flex: 1;
+
+    .step3-top {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 0;
+      align-items: end;
+      h3{
+        margin: 0;
+      }
+
+    }
+  }
+
+}
+
+
+.table-wrap {
+  span {
+    color: #1E2226;
+  }
+
+  .edit_icon {
+    display: none;
+    transition: all .3s;
+    margin-left: 8px;
+  }
+
+  .el-table__row:hover {
+    .edit_icon {
+      display: block;
+      transition: all .3s;
+    }
+  }
+}
+
+.green,
+.blue {
+  width: 80px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #0DAF49 !important;
+  letter-spacing: 0.08em;
+  /* 基本 */
+  width: 80px;
+  border-radius: 4px;
+  background: rgba(239, 255, 224, 0.5);
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 194, 97, 0.6);
+  margin-right: 8px;
+}
+
+.blue {
+  background: #F2F7FF;
+  border: 1px solid #BFDAFF;
+  color: #006AFF !important;
+}
+
+
+
+
+.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>