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

<template>
    <div>
        <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="flex domain-info">
                        <span>当前服务域名：</span><span>{{info.domain}}</span>
                    </div>
                    <div class="domain-from">域名来源</div>
                    <div class="domain-radio">
                        <GuipRadio v-model="domain_type" :options="domain_types"/>
                    </div>
                    <domainBind ref="domainBind" v-if="domain_type === '2'" label="独立域名"
                                :defaultPrefix="newDomain.prefix" :defaultDomain="newDomain.domain" @handleEvent="handleEvent"/>
                </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 domainBind from "@/components/domainBind.vue";

export default {
  name: 'domainSet',
  props: {
    serviceInfo: {
      type: Object,
      required: true
    }
  },
  components: {
     domainBind,
     GuipButton,
     GuipRadio
  },
  data(){
    return {
        info: {},
        //添加按钮样式
        saveBtnStyleObj: {
            width: '144px',
            height: '46px',
            borderRadius: '4px',
            background: '#006AFF',
        },
        domain_type: '',
        domain_types: {},
        newDomain: {
            prefix: '',
            domain: ''
        }
    }
  },
  mounted() {
      this.info = JSON.parse(JSON.stringify(this.serviceInfo))
      this.domain_type = String(this.info.domain_type)
      this.domain_types = this.info.domain_types
      this.newDomain.prefix = this.info.domain_prefix
      this.newDomain.domain = this.info.domain_name
  },
  methods:{
      handleEvent(data){
          this.newDomain = data
      },
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          obj.domain = ''
          if(this.domain_type === '2') obj.domain = this.newDomain.prefix + this.newDomain.domain

          const that = this
          let domainValid = true;
          if(that.domain_type === '2'){
              that.$refs.domainBind.$refs.bindFormRef.validate(valid => {
                  domainValid = valid
              })
          }
          if (domainValid) {
              that.$http('POST', '/agentnew/ajax_update_service_domain', obj).then(response => {
                  if (response.status) {
                      that.$message.success('保存成功');

                      //替换域名
                      const protocol = new URL(that.info.domain).protocol;
                      if (that.domain_type === '2') {
                          that.info.domain = protocol + "//" + obj.domain;
                      } else {
                          that.info.domain = that.info.site_domain;
                      }

                      that.$emit('saveEvent', that.info)
                      return true;
                  }
                  that.$message.error(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: 16px;
  }

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



</style>