服务设置 域名设置组件

src/components/domainBind.vue

@@ -0,0 +1,341 @@
+<template>
+    <div>
+        <el-form class="el-row demo-ruleForm" ref="formRef">
+            <GuipFormItem column="column" class="combo-formItem w540" v-if="domainOptions" :label="label" :class="label ? '' : 'combo-formItem-nolabel'">
+                <div slot="formDom" class="self-drop-wrap flex w540">
+                    <GuipInput v-model="prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput>
+                    <!-- 只用作选中内容展示 -->
+                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{domain}}</div>
+                </div>
+                <!--触发 真实下拉操作 -->
+                <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="domain"
+                                :options="domainOptions" @change="changeSelect" placeholder="请选择">
+                    <template #normal>
+                        <div class="flex flex-between noraml-jump">
+                            <div class="left">
+                                <b>添加新域名</b>
+                                <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
+                                <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
+                            </div>
+                            <div class="right">
+                                <GuipButton size="form" @click="bindNewDomain">前往绑定</GuipButton>
+                            </div>
+                        </div>
+                    </template>
+                </CustomDropdown>
+            </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="rules" :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>
+    </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";
+
+export default {
+  name: 'domainBind',
+  props:['label', 'options'],
+  components: {
+      CustomDropdown, GuipFormItem,
+      GuipButton,
+      GuipDialog,
+      GuipInput
+  },
+  data(){
+    return {
+        domainOptions:[],
+        prefix: '',
+        domain: '',
+        dialogVisible: false,
+        formData: {
+            domain: '',
+            beian: '',
+        },
+        rules: {
+            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: {
+    options: {
+      immediate: true,
+      handler(newVal) {
+        this.domainOptions = newVal;
+        if (newVal.length>0) {
+          this.domain = newVal[0].value
+        }
+      },
+    },
+    formData: {
+      deep: true,
+      handler() {
+        this.show_step = false;
+        this.step1 = 1
+        this.step2 = 0
+      }
+    }
+  },
+  methods:{
+      toggleDrop(e) {
+          this.$refs.dropDomain.toggleDropdown(e)
+      },
+      inputEnd(){
+          this.$emit('handleEvent', {
+              prefix: this.prefix,
+              domain: this.domain,
+          })
+      },
+      changeSelect() {
+          this.$emit('handleEvent', {
+              prefix: this.prefix,
+              domain: this.domain,
+          })
+      },
+      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')
+          })
+      },
+      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.domain = that.formData.domain
+                  that.domainOptions.unshift({
+                      label: that.formData.domain,
+                      value: that.formData.domain
+                  })
+                  that.show_step = false
+                  that.dialogVisible = 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 {
+  ::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/elementGroups.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
+            <domainBind label="域名设置" :options="domainOptions" @handleEvent="handleEvent"/>
             <PromptText text='这是一个提示框' :type="1" />
             <PromptText text='这是一个提示框' :type="2" />
             <PromptText text='这是一个提示框' :type="3" />
@@ -577,11 +578,13 @@ import GuipFormItem from '@/components/GuipFormItem.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 import PromptText from "@/components/PromptText.vue";
 import DevicePreview from "@/components/PreviewTab.vue";
+import domainBind from "@/components/domainBind.vue";
 
 
 export default {
     name: 'HomeView',
     components: {
+        domainBind,
         PromptText,
         GuipTextarea,
         GuipTable,
@@ -945,6 +948,9 @@ export default {
         }
     },
     methods: {
+        handleEvent(data){
+            console.log(data,'data')
+        },
         // 手动copy内容
         handleClickCopy(){
             this.$copy(this.form.input1, {