新增域名

src/components/domainAdd.vue

@@ -0,0 +1,313 @@
+<template>
+    <div>
+        <GuipDialog :dialogVisible="dalogVisibleAddDomain" 
+            :show-close-button="false"
+            :showFooterButton="false" 
+            type="center" 
+            title="温馨提示">
+            <div class="domain-wrap">
+                <el-form class="el-row demo-ruleForm" ref="formRef" :rules="formRules" :model="formData">
+                    <p class="p-info">设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p>
+                    <p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p>
+                    <p class="p-desc mb18">备案网址：https://beian.aliyun.com</p>
+                    <p class="p-title"><span>2.</span>域名要解析到平台服务器上</p>
+                    <p class="p-desc mb18">记录类型：CNAME；记录值：lunwen.kuailedns.com</p>
+                    <p class="p-title"><span>3.</span>域名填写</p>
+                    <GuipInput width="458px" placeholder="填写完整域名" class="mb18" prop="domain" v-model="formData.domain"></GuipInput>
+                    <p class="p-title"><span>4.</span>域名备案号</p>
+                    <GuipInput width="458px" placeholder="填写备案号" class="mb32" prop="beian" v-model="formData.beian"></GuipInput>
+                    <div class="flex flex-between">
+                        <GuipButton type="ignore" :btnstyle="{'width': '247px', 'border-radius': '4px'}" @click="handleCancel">先用平台免费域名</GuipButton>
+                        <GuipButton type="primary" :btnstyle="{'width': '247px', 'border-radius': '4px'}" :loading="show_step" @click="handleConfirm" >准备完毕，验证自有域名</GuipButton>
+                    </div>
+                    <div class="domain-step" v-if="step1>0">
+                        <div class="flex mr12">
+                            <GuipButton v-if="step1 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                验证域名解析
+                            </GuipButton>
+                            <GuipButton v-if="step1 === 2" type="text" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_success.png" alt="" class="mr5"><span>域名已解析</span>
+                            </GuipButton>
+                            <GuipButton v-if="step1 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_error.png" alt="" class="mr5"><span>域名未解析</span>
+                            </GuipButton>
+                        </div>
+                        <div class="flex">
+                            <img src="@/assets/site/next-line.png" alt="">
+                        </div>
+                        <div class="flex ml12">
+                            <GuipButton v-if="step2 === 0" type="text" :btnstyle="{'color': '#8A9099', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_wait.png" alt="" class="mr5"><span>验证ICP备案</span>
+                            </GuipButton>
+                            <GuipButton v-if="step2 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                验证ICP备案
+                            </GuipButton>
+                            <GuipButton v-if="step2 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_error.png" alt="" class="mr5"><span>ICP未备案</span>
+                            </GuipButton>
+                        </div>
+                    </div>
+                </el-form>
+            </div>
+        </GuipDialog>
+    </div>
+</template>
+<script>
+import GuipInput from "@/components/GuipInput.vue";
+import GuipDialog from "@/components/GuipDialog.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: 'domainAdd',
+  props: {
+    // 可见性
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    authToken: {
+        type: String,
+        default: ''
+    },
+  },
+  components: {
+      GuipButton,
+      GuipDialog,
+      GuipInput
+  },
+  data(){
+    return {
+        // AUTH
+        token: '',
+        dalogVisibleAddDomain: false,
+        formData: {
+            domain: '',
+            beian: '',
+        },
+        formRules: {
+            domain: [
+                { required: true, message: '请输入域名', trigger: 'blur' },
+                {
+                    pattern: /^[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/,
+                    message: '格式错误，请输入正确域名',
+                    trigger: 'blur'
+                }
+            ],
+            beian: [
+                { required: true, message: '请输入域名备案号', trigger: 'blur' }
+            ],
+        },
+        show_step: false,
+        step1: 0, //1正在验证 2验证成功 3验证失败
+        step2: 0 //0等待验证 1正在验证 3验证失败
+    }
+  },
+  watch: {
+    visible(newVal) { 
+        this.dalogVisibleAddDomain = newVal; 
+    },
+    dialogVisible(newVal) {
+        this.$emit('update:visible', newVal);
+    },
+    authToken(newVal) {
+        this.token = newVal;
+    },
+  },
+  mounted(){
+    
+  },
+  methods:{
+    resetForm() {
+        this.formData = {
+            domain: '',
+            beian: ''
+        };
+        this.showStep = false;
+        this.step1 = 0;
+        this.step2 = 0;
+        if (this.$refs.formRef) {
+            this.$refs.formRef.clearValidate();
+        }
+    },
+    init() { 
+        this.dalogVisibleAddDomain = false;
+        this.$emit('update:visible', false);
+        this.resetForm();
+    },
+    handleCancel(){
+        this.init();
+    },
+    handleConfirm(){
+        this.$refs.formRef.validate((valid) => {
+            if (valid) this.verfiyDNS();
+        });
+    },
+    verfiyDNS() {
+        this.step1 = 1;
+        const that = this
+        that.$http('POST', '/agentnew/ajax_check_dns', {
+            domain: that.formData.domain
+        }, {
+            headers: {
+                'Auth': this.token
+            }
+        }).then(response => {
+            if(response.status){
+                that.step1 = 2
+                that.step2 = 1
+                that.verfiyBeian()
+                this.show_step = true
+            } else {
+                that.step1 = 3
+            }
+        }).catch(error => {
+            console.error(error, 'error')
+        })
+    },
+    verfiyBeian(){
+        const that = this
+        that.$http('POST', '/agentnew/ajax_check_beian', {
+            domain: that.formData.domain
+        },{
+            headers:{
+                'Auth': this.token
+            }
+        }).then(response => {
+            if(response.status){
+                that.addDomain()
+            } else {
+                that.step2 = 3
+            }
+
+        }).catch(error => {
+            console.error(error, 'error')
+        })
+    },
+    addDomain(){
+        const that = this
+        that.$http('POST', '/agentnew/ajax_add_domain', {
+            domain: that.formData.domain,
+            beian: that.formData.beian
+        },{
+            headers:{
+                'Auth': this.token
+            }
+        }).then(response => {
+            if(response.status){
+                this.init();
+                that.show_step = false
+                that.$message.success('添加成功');
+                return true
+            }
+            that.$message.error(response.info);
+        }).catch(error => {
+            console.error(error, 'error')
+        })
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.w540 {
+  width: 540px!important;
+}
+.mb18{
+  margin-bottom: 18px;
+}
+.mb32{
+  margin-bottom: 32px;
+}
+.mr12{
+  margin-right: 12px;
+}
+.ml12{
+  margin-left: 12px;
+}
+.mr5{
+  margin-right: 5px;
+}
+
+.combo-formItem-nolabel{
+  ::v-deep {
+    .form-item-top{
+      display: none;
+      height: 0;
+      margin: 0;
+    }
+  }
+}
+
+.combo-formItem {
+  letter-spacing: 0.08em;
+  ::v-deep {
+    .form-item-bottom {
+      position: relative;
+    }
+
+    .select-trigger {
+      background: #F6F7FA;
+      border-color: transparent;
+    }
+
+    .is-open .select-trigger {
+      border-color: #006AFF;
+    }
+
+    .el-input__inner {
+      border-radius: 2px 0 0 2px;
+    }
+  }
+
+  .self-drop-wrap {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+  }
+
+  .appendDrop {
+    height: 38px;
+    align-items: center;
+    border-radius: 0 2px 2px 0;
+    border: 1px solid #DFE2E6;
+    border-left-color: transparent;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 30px 0 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      border: 1px solid #006AFF;
+    }
+  }
+}
+.domain-wrap{
+  letter-spacing: 0.08em;
+  font-size: 14px;
+  .p-info{
+    color: #626573;
+    margin-bottom: 24px;
+  }
+  .p-title{
+    color: #23242B;
+    margin-bottom: 8px;
+    span{
+      width: 23px;
+      display: inline-block;
+    }
+  }
+  .p-desc{
+    color: #8A9099;
+    padding-left: 23px;
+  }
+
+  .domain-step{
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+  }
+}
+</style>

src/views/agent/domainList.vue

@@ -47,7 +47,7 @@
                   <div class="flex-common table-wrap">
                       <div class="step3-top flex">
                           <h3 class="flex">域名列表</h3>
-                          <GuipButton>新增域名</GuipButton>
+                          <GuipButton @click="showAddDomainDialog">新增域名</GuipButton>
                       </div>
                       <el-form>
                           <GuipTable :border="true" :tableData="domainList" :loading="tableLoading">
@@ -86,9 +86,10 @@
             </div>
             
           </el-form>
-          
       </GuipDialog>
 
+      <domainAdd :visible="isShowAddDomainDialog" :authToken="authToken" @update:visible="handleEvent"></domainAdd>
+
     </div>
 </template>
 <script>
@@ -96,6 +97,7 @@ import GuipButton from '@/components/GuipButton.vue';
 import GuipTable from '@/components/GuipTable.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
 import GuipInput from '@/components/GuipInput.vue';
+import domainAdd from '@/components/domainAdd.vue';
 
 export default {
   components: {
@@ -103,6 +105,7 @@ export default {
     GuipTable,
     GuipDialog,
     GuipInput,
+    domainAdd,
   },
   data() {
     return {
@@ -126,6 +129,9 @@ export default {
         getVerifyDnsResultTimer: null,
         dnsValue: '',
       },
+
+      isShowAddDomainDialog: false,
+      authToken: '',
     }
   },
   computed: {
@@ -365,6 +371,15 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
     },
+    showAddDomainDialog() {
+      this.isShowAddDomainDialog = true;
+      this.authToken = this.token;
+    },
+    handleEvent(data) {
+        console.log(data, 'handleEvent');
+        this.isShowAddDomainDialog = data
+    },
+
   },
   // 6. 组件销毁前清除定时器
   beforeUnmount() {