kuailelunwen_new_houtai/src/components/domainBind.vue

<template>
    <div>
        <el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0">
            <GuipFormItem column="column" class="combo-formItem w540" :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'],
  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: {
    formData: {
      deep: true,
      handler() {
        this.show_step = false;
        this.step1 = 1
        this.step2 = 0
      }
    }
  },
  mounted(){
      this.getDomainList()
  },
  methods:{
      getDomainList() {
          const that = this
          that.$http('POST', '/agentnew/ajax_get_private_domains', {}, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  this.domain = response.data[0]
                  that.domainOptions = response.data.map(item => ({
                      label: item,
                      value: item
                  }));
                  return true
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      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){
                  that.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>