新增域名组件优化

src/components/domainAdd.vue

@@ -131,7 +131,7 @@ export default {
     },
     init() { 
         this.dalogVisibleAddDomain = false;
-        this.$emit('update:visible', false);
+        this.$emit('update:visible', this.formData);
         this.resetForm();
     },
     handleCancel(){

src/components/domainBind.vue

@@ -27,61 +27,15 @@
             </GuipFormItem>
         </el-form>
 
-        <GuipDialog :dialogVisible="dialogVisible" :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="show_step">
-                        <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>
+        <domainAdd :visible="isShowAddDomainDialog" :authToken="token" @update:visible="handleAddEvent"></domainAdd>
     </div>
 </template>
 <script>
 import GuipInput from "@/components/GuipInput.vue";
-import GuipDialog from "@/components/GuipDialog.vue";
 import GuipButton from "@/components/GuipButton.vue";
 import GuipFormItem from "@/components/GuipFormItem.vue";
 import CustomDropdown from "@/components/CustomDropdown.vue";
+import domainAdd from "@/components/domainAdd.vue";
 
 export default {
   name: 'domainBind',
@@ -89,7 +43,7 @@ export default {
   components: {
       CustomDropdown, GuipFormItem,
       GuipButton,
-      GuipDialog,
+      domainAdd,
       GuipInput
   },
   data(){
@@ -97,7 +51,6 @@ export default {
         // AUTH
         token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
         domainOptions:[],
-        dialogVisible: false,
         data: {
             prefix: '',
             domain: '',
@@ -107,36 +60,7 @@ export default {
                 { required: true, message: '请输入域名前缀', trigger: 'blur' }
             ],
         },
-        formData: {
-            domain: '',
-            beian: '',
-        },
-        formRules: {
-            domain: [
-                { required: true, message: '请输入域名', trigger: 'blur' },
-                {
-                    pattern: /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/,
-                    message: '格式错误，请输入正确域名',
-                    trigger: 'blur'
-                }
-            ],
-            beian: [
-                { required: true, message: '请输入域名备案号', trigger: 'blur' }
-            ],
-        },
-        show_step: false,
-        step1: 1, //1正在验证 2验证成功 3验证失败
-        step2: 0 //0等待验证 1正在验证 3验证失败
-    }
-  },
-  watch: {
-    formData: {
-      deep: true,
-      handler() {
-        this.show_step = false;
-        this.step1 = 1
-        this.step2 = 0
-      }
+        isShowAddDomainDialog: false,
     }
   },
   mounted(){
@@ -179,82 +103,22 @@ export default {
           this.$emit('handleEvent', this.data)
       },
       bindNewDomain(){
-          this.dialogVisible = true
-      },
-      handleCancel(){
-          this.dialogVisible = false
-      },
-      handleConfirm(){
-          this.$refs.formRef.validate((valid) => {
-              if (valid) this.verfiyDNS();
-          });
-      },
-      verfiyDNS() {
-          this.show_step = true
-
-          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()
-              } 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')
-          })
+          this.isShowAddDomainDialog = true;
       },
-      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){
-                  that.data.domain = '.'+that.formData.domain
-                  that.domainOptions.unshift({
-                      label: '.'+that.formData.domain,
-                      value: '.'+that.formData.domain
+      handleAddEvent(data) {
+          if(data.domain){
+              const index = data.domain.indexOf('.');
+              if (index !== -1) {
+                  this.data.prefix = data.domain.substring(0, index)
+                  this.data.domain = data.domain.substring(index)
+                  this.domainOptions.unshift({
+                      value: this.data.domain,
+                      label: this.data.domain,
                   })
-                  that.show_step = false
-                  that.dialogVisible = false
-                  that.$message.success('添加成功');
-                  return true
+
               }
-              that.$message.error(response.info);
-          }).catch(error => {
-              console.error(error, 'error')
-          })
+          }
+          this.isShowAddDomainDialog = false
       },
   }
 }

src/views/agent/domainList.vue

@@ -376,8 +376,10 @@ export default {
       this.authToken = this.token;
     },
     handleEvent(data) {
-        console.log(data, 'handleEvent');
-        this.isShowAddDomainDialog = data
+        if(data.domain){
+            this.getPrivateDomains()
+        }
+        this.isShowAddDomainDialog = false
     },
 
   },