|
|
|
@ -9,41 +9,18 @@ |
|
|
|
<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"/> |
|
|
|
<GuipRadio v-model="domainFrom" :options="domainFromOptions"/> |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
@ -53,9 +30,7 @@ |
|
|
|
|
|
|
|
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"; |
|
|
|
import domainBind from "@/components/domainBind.vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'domainSet', |
|
|
|
@ -66,10 +41,9 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
GuipInput, GuipFormItem, |
|
|
|
CustomDropdown, GuipButton, |
|
|
|
domainBind, |
|
|
|
GuipButton, |
|
|
|
GuipRadio |
|
|
|
|
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
@ -82,58 +56,52 @@ export default { |
|
|
|
borderRadius: '4px', |
|
|
|
background: '#006AFF', |
|
|
|
}, |
|
|
|
defaultFrom: '0', |
|
|
|
domainFrom: '0', |
|
|
|
domainFromOptions: { |
|
|
|
'0': '平台免费域名', |
|
|
|
'1': '更换独立域名' |
|
|
|
'1': '我自己有域名' |
|
|
|
}, |
|
|
|
domainOptions: [], |
|
|
|
form:{ |
|
|
|
'ext' : 'aa' |
|
|
|
} |
|
|
|
newDomain: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.info = JSON.parse(JSON.stringify(this.serviceInfo)) |
|
|
|
this.domainOptions = this.info.domain_list.map(item => ({ |
|
|
|
label: item.ext, |
|
|
|
value: item.ext |
|
|
|
})); |
|
|
|
console.log(this.domainOptions) |
|
|
|
if(this.info.ser_domain) this.domainFrom = '1' |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
radioChange(){ |
|
|
|
|
|
|
|
}, |
|
|
|
toggleDrop(e) { |
|
|
|
this.$refs.dropDomain.toggleDropdown(e) |
|
|
|
}, |
|
|
|
changeSelectIp(item) { |
|
|
|
// 选中项 |
|
|
|
// this.selectedItem1 = { ...item }; |
|
|
|
console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-'); |
|
|
|
handleEvent(data){ |
|
|
|
this.newDomain = data |
|
|
|
}, |
|
|
|
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 |
|
|
|
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_link', obj,{ |
|
|
|
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.success(response.info); |
|
|
|
that.$message.error(response.info); |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
@ -176,64 +144,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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> |
