|
|
|
@ -3,10 +3,60 @@ |
|
|
|
<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: { |
|
|
|
@ -16,6 +66,9 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
GuipInput, GuipFormItem, |
|
|
|
CustomDropdown, GuipButton, |
|
|
|
GuipRadio |
|
|
|
|
|
|
|
}, |
|
|
|
data(){ |
|
|
|
@ -29,16 +82,158 @@ export default { |
|
|
|
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> |
