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="domainFrom" :options="domainFromOptions"/>
                    </div>
                    <div class="flex domain-info">
                        <span>当前服务域名：</span><span>{{info.domain}}</span>
                    </div>

                    <domainBind v-show="domainFrom === '1'" label="域名设置" @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 {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
        info: {},
        //添加按钮样式
        saveBtnStyleObj: {
            width: '144px',
            height: '46px',
            borderRadius: '4px',
            background: '#006AFF',
        },
        domainFrom: '0',
        domainFromOptions: {
            '0': '平台免费域名',
            '1': '我自己有域名'
        },
        newDomain: {}
    }
  },
  mounted() {
      this.info = JSON.parse(JSON.stringify(this.serviceInfo))
      if(this.info.ser_domain) this.domainFrom = '1'
  },
  methods:{
      handleEvent(data){
          this.newDomain = data
      },
      saveConfirm() {
          let obj = {}
          obj.uid = this.info.uid
          obj.type = this.info.type
          if(this.domainFrom === '1'){
              if(!this.newDomain.prefix || !this.newDomain.domain) return false
              obj.domain = this.newDomain.prefix + this.newDomain.domain

          }else{
              obj.domain = ''
          }

          const that = this
          this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('保存成功');

                  //替换域名
                  const protocol = new URL(that.info.domain).protocol;
                  that.info.domain = protocol + "//" +obj.domain;
                  that.info.ser_domain = protocol + "//" +obj.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: 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;
    }
  }
}



</style>