kuailelunwen_new_houtai/src/components/domainBind.vue

<template>
    <div>
        <el-form class="el-row demo-ruleForm" ref="bindFormRef" :rules="rules" :model="data">
            <GuipFormItem column="column" class="combo-formItem w540" :label="label" :class="label ? '' : 'combo-formItem-nolabel'">
                <div slot="formDom" class="self-drop-wrap flex w540">
                    <GuipInput prop="prefix" v-model="data.prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd">
                        <i slot="suffix" v-if="data.prefix" class="el-icon-close" @click="handleClear"></i>
                    </GuipInput>
                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{data.domain}}</div>
                </div>
                <!--触发 真实下拉操作 -->
                <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
                <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="data.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>

        <domainAdd :visible="isShowAddDomainDialog" @update:visible="handleAddEvent"></domainAdd>
    </div>
</template>
<script>
import GuipInput from "@/components/GuipInput.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',
  props:['label','defaultPrefix','defaultDomain'],
  components: {
      CustomDropdown, GuipFormItem,
      GuipButton,
      domainAdd,
      GuipInput
  },
  data(){
    return {
        domainOptions:[],
        data: {
            prefix: '',
            domain: '',
        },
        rules:{
            prefix: [
                { required: true, message: '请输入域名前缀', trigger: []}
            ],
        },
        isShowAddDomainDialog: false,
    }
  },
  mounted(){
      this.data.prefix = this.defaultPrefix ? this.defaultPrefix : ''
      this.data.domain = this.defaultDomain ? this.defaultDomain : ''
      this.getDomainList()
  },
  methods:{
      getDomainList() {
          const that = this
          that.$http('POST', '/agentnew/ajax_get_private_domains', {}).then(response => {
              if(response.status){
                  if(response.data.length>0){
                      that.domainOptions = response.data.map(item => ({
                          label: '.'+item,
                          value: '.'+item
                      }));

                      let domain = that.data.domain.startsWith('.') ? that.data.domain.slice(1) : that.data.domain;
                      if(!response.data.includes(domain) || !domain) that.data.domain = '.'+response.data[0]
                  } else {
                      if(!this.data.domain) this.data.domain = '暂无域名'
                  }
                  return true
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      handleClear() {
          this.data.prefix = '';
      },
      toggleDrop(e) {
          this.$refs.dropDomain.toggleDropdown(e)
      },
      inputEnd(){
          this.$emit('handleEvent', this.data)
      },
      changeSelect() {
          this.$emit('handleEvent', this.data)
      },
      bindNewDomain(){
          this.isShowAddDomainDialog = true;
      },
      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,
                  })

              }
          }
          this.isShowAddDomainDialog = false
      },
  }
}
</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>