kuailelunwen_new_houtai/src/components/site/serviceSetting/domainSet.vue

<template>
    <div class="main-content12">
        <div class="pageheader">
            <span class="pagetitle">{{info.type_desc}}-独立域名</span>
        </div>

        <div class="flex-common">
            <div class="domain-area">
                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="domain-from">域名来源</div>
                    <div class="domain-radio">
                        <GuipRadio v-model="defaultFrom" :options="domainFromOptions" @change="radioChange"/>
                    </div>
                    <div class="flex domain-info">
                        <span>当前服务域名：</span><span>{{info.domain}}</span>
                    </div>

                    <GuipFormItem column="column" class="combo-formItem w540" v-if="domainOptions">
                        <div slot="formDom" class="self-drop-wrap flex w540">
                            <GuipInput style="width: 60%;" placeholder="仅支持数字、字母">
                            </GuipInput>
                            <!-- 只用作选中内容展示 -->
                            <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{form.ext}}</div>
                        </div>
                        <!--触发 真实下拉操作 -->
                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
                        <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.ext"
                                        :options="domainOptions" @change="changeSelectIp" 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">前往绑定</GuipButton>
                                    </div>
                                </div>
                            </template>
                        </CustomDropdown>
                    </GuipFormItem>
                </el-form>
            </div>
        </div>

        <div class="save-button">
            <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
        </div>
    </div>
</template>
<script>

import GuipRadio from "@/components/GuipRadio.vue";
import GuipButton from "@/components/GuipButton.vue";
import CustomDropdown from "@/components/CustomDropdown.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";

export default {
  name: 'domainSet',
  props: {
    serviceInfo: {
      type: Object,
      required: true
    }
  },
  components: {
      GuipInput, GuipFormItem,
       CustomDropdown, GuipButton,
      GuipRadio

  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
        info: {},
        //添加按钮样式
        saveBtnStyleObj: {
            width: '144px',
            height: '46px',
            borderRadius: '4px',
            background: '#006AFF',
        },
        defaultFrom: '0',
        domainFromOptions: {
            '0': '平台免费域名',
            '1': '更换独立域名'
        },
        domainOptions: [],
        form:{
            'ext' : 'aa'
        }
    }
  },
  mounted() {
    this.info = this.serviceInfo
    this.domainOptions = this.info.domain_list.map(item => ({
        label: item.ext,
        value: item.ext
    }));
    console.log(this.domainOptions)
  },
  methods:{
      radioChange(){

      },
      toggleDrop(e) {
          this.$refs.dropDomain.toggleDropdown(e)
      },
      changeSelectIp(item) {
          // 选中项
          // this.selectedItem1 = { ...item };
          console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
      },
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          obj.return_home_url = this.info.return_homepage_url
          obj.go_check_url = this.info.go_check_url
          obj.is_sync_home = this.syncHome ? 1 : 0
          obj.is_sync_check = this.syncCheck ? 1 : 0

          const that = this
          this.$http('POST', '/agentnew/ajax_update_service_link', obj,{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('保存成功');
                  that.$emit('saveEvent', that.info)
                  return true;
              }
              that.$message.success(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.domain-area{
  text-align: left;
  .domain-from{
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-bottom: 12px;
  }

  .domain-radio{
    .el-form-item{
      margin-bottom: 12px;
    }
  }

  .domain-info{
    width: 540px;
    font-size: 12px;
    line-height: 13px;
    letter-spacing: 0.08em;
    background: #F2F7FF;
    padding: 10px;
    margin-right: 12px;
    margin-bottom: 12px;
    box-sizing: border-box;
    span{
      color: #1E2226;
    }
    span:first-child{
      color: #626573;
    }
  }
}

.w540 {
  width: 540px!important;
}

.combo-formItem {
  .form-item-top{
    display: none;
    height: 0;
    margin: 0;
  }

  ::v-deep {
    .form-item-top{
      display: none;
      height: 0;
      margin: 0;
    }

    .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;
    }
  }
}
</style>