Browse Source

服务设置 独立域名设置

pull/87/head
pengda 13 hours ago
parent
commit
1b23cb359f
  1. 44
      src/components/domainBind.vue
  2. 148
      src/components/site/serviceSetting/domainSet.vue
  3. 2
      src/views/elementGroups.vue

44
src/components/domainBind.vue

@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0"> <el-form class="el-row demo-ruleForm" ref="formRef" v-if="domainOptions.length>0" :rules="rules" :model="data">
<GuipFormItem column="column" class="combo-formItem w540" :label="label" :class="label ? '' : 'combo-formItem-nolabel'"> <GuipFormItem column="column" class="combo-formItem w540" :label="label" :class="label ? '' : 'combo-formItem-nolabel'">
<div slot="formDom" class="self-drop-wrap flex w540"> <div slot="formDom" class="self-drop-wrap flex w540">
<GuipInput v-model="prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput> <GuipInput prop="prefix" v-model="data.prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput>
<!-- 只用作选中内容展示 --> <!-- 只用作选中内容展示 -->
<div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{domain}}</div> <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{data.domain}}</div>
</div> </div>
<!--触发 真实下拉操作 --> <!--触发 真实下拉操作 -->
<!-- valueKey="id" displayKey="name" 不添加时默认取值 valuelabel--> <!-- valueKey="id" displayKey="name" 不添加时默认取值 valuelabel-->
<CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="domain" <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="data.domain"
:options="domainOptions" @change="changeSelect" placeholder="请选择"> :options="domainOptions" @change="changeSelect" placeholder="请选择">
<template #normal> <template #normal>
<div class="flex flex-between noraml-jump"> <div class="flex flex-between noraml-jump">
@ -30,7 +30,7 @@
<GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false" <GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false"
type="center" title="温馨提示"> type="center" title="温馨提示">
<div class="domain-wrap"> <div class="domain-wrap">
<el-form class="el-row demo-ruleForm" ref="formRef" :rules="rules" :model="formData"> <el-form class="el-row demo-ruleForm" ref="formRef" :rules="formRules" :model="formData">
<p class="p-info">设置自己的域名需要做 2 步站外操作如果暂时未准备好或打算稍后设置可以先选用平台免费域名平台随时支持域名修改 </p> <p class="p-info">设置自己的域名需要做 2 步站外操作如果暂时未准备好或打算稍后设置可以先选用平台免费域名平台随时支持域名修改 </p>
<p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p> <p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p>
<p class="p-desc mb18">备案网址https://beian.aliyun.com</p> <p class="p-desc mb18">备案网址https://beian.aliyun.com</p>
@ -98,11 +98,20 @@ export default {
prefix: '', prefix: '',
domain: '', domain: '',
dialogVisible: false, dialogVisible: false,
data: {
prefix: '',
domain: '',
},
rules:{
prefix: [
{ required: true, message: '请输入域名前缀', trigger: 'blur' }
],
},
formData: { formData: {
domain: '', domain: '',
beian: '', beian: '',
}, },
rules: { formRules: {
domain: [ domain: [
{ required: true, message: '请输入域名', trigger: 'blur' }, { required: true, message: '请输入域名', trigger: 'blur' },
{ {
@ -142,10 +151,10 @@ export default {
} }
}).then(response => { }).then(response => {
if(response.status){ if(response.status){
this.domain = response.data[0] this.data.domain = '.'+response.data[0]
that.domainOptions = response.data.map(item => ({ that.domainOptions = response.data.map(item => ({
label: item, label: '.'+item,
value: item value: '.'+item
})); }));
return true return true
} }
@ -158,16 +167,10 @@ export default {
this.$refs.dropDomain.toggleDropdown(e) this.$refs.dropDomain.toggleDropdown(e)
}, },
inputEnd(){ inputEnd(){
this.$emit('handleEvent', { this.$emit('handleEvent', this.data)
prefix: this.prefix,
domain: this.domain,
})
}, },
changeSelect() { changeSelect() {
this.$emit('handleEvent', { this.$emit('handleEvent', this.data)
prefix: this.prefix,
domain: this.domain,
})
}, },
bindNewDomain(){ bindNewDomain(){
this.dialogVisible = true this.dialogVisible = true
@ -232,10 +235,10 @@ export default {
} }
}).then(response => { }).then(response => {
if(response.status){ if(response.status){
that.domain = that.formData.domain that.data.domain = that.formData.domain
that.domainOptions.unshift({ that.domainOptions.unshift({
label: that.formData.domain, label: '.'+that.formData.domain,
value: that.formData.domain value: '.'+that.formData.domain
}) })
that.show_step = false that.show_step = false
that.dialogVisible = false that.dialogVisible = false
@ -281,6 +284,7 @@ export default {
} }
.combo-formItem { .combo-formItem {
letter-spacing: 0.08em;
::v-deep { ::v-deep {
.form-item-bottom { .form-item-bottom {
position: relative; position: relative;

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

@ -9,41 +9,18 @@
<el-form class="el-row demo-ruleForm" ref="formRef"> <el-form class="el-row demo-ruleForm" ref="formRef">
<div class="domain-from">域名来源</div> <div class="domain-from">域名来源</div>
<div class="domain-radio"> <div class="domain-radio">
<GuipRadio v-model="defaultFrom" :options="domainFromOptions" @change="radioChange"/> <GuipRadio v-model="domainFrom" :options="domainFromOptions"/>
</div> </div>
<div class="flex domain-info"> <div class="flex domain-info">
<span>当前服务域名</span><span>{{info.domain}}</span> <span>当前服务域名</span><span>{{info.domain}}</span>
</div> </div>
<GuipFormItem column="column" class="combo-formItem w540" v-if="domainOptions"> <domainBind v-show="domainFrom === '1'" label="域名设置" @handleEvent="handleEvent"/>
<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" 不添加时默认取值 valuelabel-->
<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> </el-form>
</div> </div>
</div> </div>
<div class="save-button"> <div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton> <GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton>
</div> </div>
@ -53,9 +30,7 @@
import GuipRadio from "@/components/GuipRadio.vue"; import GuipRadio from "@/components/GuipRadio.vue";
import GuipButton from "@/components/GuipButton.vue"; import GuipButton from "@/components/GuipButton.vue";
import CustomDropdown from "@/components/CustomDropdown.vue"; import domainBind from "@/components/domainBind.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";
export default { export default {
name: 'domainSet', name: 'domainSet',
@ -66,10 +41,9 @@ export default {
} }
}, },
components: { components: {
GuipInput, GuipFormItem, domainBind,
CustomDropdown, GuipButton, GuipButton,
GuipRadio GuipRadio
}, },
data(){ data(){
return { return {
@ -82,58 +56,52 @@ export default {
borderRadius: '4px', borderRadius: '4px',
background: '#006AFF', background: '#006AFF',
}, },
defaultFrom: '0', domainFrom: '0',
domainFromOptions: { domainFromOptions: {
'0': '平台免费域名', '0': '平台免费域名',
'1': '更换独立域名' '1': '我自己有域名'
}, },
domainOptions: [], newDomain: {}
form:{
'ext' : 'aa'
}
} }
}, },
mounted() { mounted() {
this.info = JSON.parse(JSON.stringify(this.serviceInfo)) this.info = JSON.parse(JSON.stringify(this.serviceInfo))
this.domainOptions = this.info.domain_list.map(item => ({ if(this.info.ser_domain) this.domainFrom = '1'
label: item.ext,
value: item.ext
}));
console.log(this.domainOptions)
}, },
methods:{ methods:{
radioChange(){ handleEvent(data){
this.newDomain = data
},
toggleDrop(e) {
this.$refs.dropDomain.toggleDropdown(e)
},
changeSelectIp(item) {
//
// this.selectedItem1 = { ...item };
console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
}, },
saveConfirm() { saveConfirm() {
let obj = {} let obj = {}
obj.uid = this.info.uid obj.uid = this.info.uid
obj.type = this.info.type obj.type = this.info.type
obj.return_home_url = this.info.return_homepage_url if(this.domainFrom === '1'){
obj.go_check_url = this.info.go_check_url if(!this.newDomain.prefix || !this.newDomain.domain) return false
obj.is_sync_home = this.syncHome ? 1 : 0 obj.domain = this.newDomain.prefix + this.newDomain.domain
obj.is_sync_check = this.syncCheck ? 1 : 0
}else{
obj.domain = ''
}
const that = this const that = this
this.$http('POST', '/agentnew/ajax_update_service_link', obj,{ this.$http('POST', '/agentnew/ajax_update_service_domain', obj,{
headers:{ headers:{
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
if(response.status){ if(response.status){
that.$message.success('保存成功'); 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) that.$emit('saveEvent', that.info)
return true; return true;
} }
that.$message.success(response.info); that.$message.error(response.info);
}).catch(error => { }).catch(error => {
console.error(error, '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> </style>

2
src/views/elementGroups.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="main-content12"> <div class="main-content12">
<div class="elementWrap"> <div class="elementWrap">
<domainBind label="域名设置" :options="domainOptions" @handleEvent="handleEvent" @handleOptions="handleOptions"/> <domainBind label="域名设置" @handleEvent="handleEvent" />
<PromptText text='这是一个提示框' :type="1" /> <PromptText text='这是一个提示框' :type="1" />
<PromptText text='这是一个提示框' :type="2" /> <PromptText text='这是一个提示框' :type="2" />
<PromptText text='这是一个提示框' :type="3" /> <PromptText text='这是一个提示框' :type="3" />

Loading…
Cancel
Save