|
@ -27,61 +27,15 @@ |
|
|
</GuipFormItem> |
|
|
</GuipFormItem> |
|
|
</el-form> |
|
|
</el-form> |
|
|
|
|
|
|
|
|
<GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false" |
|
|
<domainAdd :visible="isShowAddDomainDialog" :authToken="token" @update:visible="handleAddEvent"></domainAdd> |
|
|
type="center" title="温馨提示"> |
|
|
|
|
|
<div class="domain-wrap"> |
|
|
|
|
|
<el-form class="el-row demo-ruleForm" ref="formRef" :rules="formRules" :model="formData"> |
|
|
|
|
|
<p class="p-info">设置自己的域名,需要做 2 步站外操作。如果暂时未准备好,或打算稍后设置,可以先选用平台免费域名,平台随时支持域名修改。 </p> |
|
|
|
|
|
<p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p> |
|
|
|
|
|
<p class="p-desc mb18">备案网址:https://beian.aliyun.com</p> |
|
|
|
|
|
<p class="p-title"><span>2.</span>域名要解析到平台服务器上</p> |
|
|
|
|
|
<p class="p-desc mb18">记录类型:CNAME;记录值:lunwen.kuailedns.com</p> |
|
|
|
|
|
<p class="p-title"><span>3.</span>域名填写</p> |
|
|
|
|
|
<GuipInput width="458px" placeholder="填写完整域名" class="mb18" prop="domain" v-model="formData.domain"></GuipInput> |
|
|
|
|
|
<p class="p-title"><span>4.</span>域名备案号</p> |
|
|
|
|
|
<GuipInput width="458px" placeholder="填写备案号" class="mb32" prop="beian" v-model="formData.beian"></GuipInput> |
|
|
|
|
|
<div class="flex flex-between"> |
|
|
|
|
|
<GuipButton type="ignore" :btnstyle="{'width': '247px', 'border-radius': '4px'}" @click="handleCancel">先用平台免费域名</GuipButton> |
|
|
|
|
|
<GuipButton type="primary" :btnstyle="{'width': '247px', 'border-radius': '4px'}" :loading="show_step" @click="handleConfirm" >准备完毕,验证自有域名</GuipButton> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="domain-step" v-if="show_step"> |
|
|
|
|
|
<div class="flex mr12"> |
|
|
|
|
|
<GuipButton v-if="step1 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
|
|
|
|
|
验证域名解析 |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
<GuipButton v-if="step1 === 2" type="text" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
|
|
|
|
|
<img src="@/assets/site/step_success.png" alt="" class="mr5"><span>域名已解析</span> |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
<GuipButton v-if="step1 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}"> |
|
|
|
|
|
<img src="@/assets/site/step_error.png" alt="" class="mr5"><span>域名未解析</span> |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
|
|
|
<img src="@/assets/site/next-line.png" alt=""> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex ml12"> |
|
|
|
|
|
<GuipButton v-if="step2 === 0" type="text" :btnstyle="{'color': '#8A9099', 'font-size': '12px'}"> |
|
|
|
|
|
<img src="@/assets/site/step_wait.png" alt="" class="mr5"><span>验证ICP备案</span> |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
<GuipButton v-if="step2 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}"> |
|
|
|
|
|
验证ICP备案 |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
<GuipButton v-if="step2 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}"> |
|
|
|
|
|
<img src="@/assets/site/step_error.png" alt="" class="mr5"><span>ICP未备案</span> |
|
|
|
|
|
</GuipButton> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-form> |
|
|
|
|
|
</div> |
|
|
|
|
|
</GuipDialog> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import GuipInput from "@/components/GuipInput.vue"; |
|
|
import GuipInput from "@/components/GuipInput.vue"; |
|
|
import GuipDialog from "@/components/GuipDialog.vue"; |
|
|
|
|
|
import GuipButton from "@/components/GuipButton.vue"; |
|
|
import GuipButton from "@/components/GuipButton.vue"; |
|
|
import GuipFormItem from "@/components/GuipFormItem.vue"; |
|
|
import GuipFormItem from "@/components/GuipFormItem.vue"; |
|
|
import CustomDropdown from "@/components/CustomDropdown.vue"; |
|
|
import CustomDropdown from "@/components/CustomDropdown.vue"; |
|
|
|
|
|
import domainAdd from "@/components/domainAdd.vue"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'domainBind', |
|
|
name: 'domainBind', |
|
@ -89,7 +43,7 @@ export default { |
|
|
components: { |
|
|
components: { |
|
|
CustomDropdown, GuipFormItem, |
|
|
CustomDropdown, GuipFormItem, |
|
|
GuipButton, |
|
|
GuipButton, |
|
|
GuipDialog, |
|
|
domainAdd, |
|
|
GuipInput |
|
|
GuipInput |
|
|
}, |
|
|
}, |
|
|
data(){ |
|
|
data(){ |
|
@ -97,7 +51,6 @@ export default { |
|
|
// AUTH |
|
|
// AUTH |
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k', |
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k', |
|
|
domainOptions:[], |
|
|
domainOptions:[], |
|
|
dialogVisible: false, |
|
|
|
|
|
data: { |
|
|
data: { |
|
|
prefix: '', |
|
|
prefix: '', |
|
|
domain: '', |
|
|
domain: '', |
|
@ -107,36 +60,7 @@ export default { |
|
|
{ required: true, message: '请输入域名前缀', trigger: 'blur' } |
|
|
{ required: true, message: '请输入域名前缀', trigger: 'blur' } |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
|
formData: { |
|
|
isShowAddDomainDialog: false, |
|
|
domain: '', |
|
|
|
|
|
beian: '', |
|
|
|
|
|
}, |
|
|
|
|
|
formRules: { |
|
|
|
|
|
domain: [ |
|
|
|
|
|
{ required: true, message: '请输入域名', trigger: 'blur' }, |
|
|
|
|
|
{ |
|
|
|
|
|
pattern: /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/, |
|
|
|
|
|
message: '格式错误,请输入正确域名', |
|
|
|
|
|
trigger: 'blur' |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
beian: [ |
|
|
|
|
|
{ required: true, message: '请输入域名备案号', trigger: 'blur' } |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
show_step: false, |
|
|
|
|
|
step1: 1, //1正在验证 2验证成功 3验证失败 |
|
|
|
|
|
step2: 0 //0等待验证 1正在验证 3验证失败 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
formData: { |
|
|
|
|
|
deep: true, |
|
|
|
|
|
handler() { |
|
|
|
|
|
this.show_step = false; |
|
|
|
|
|
this.step1 = 1 |
|
|
|
|
|
this.step2 = 0 |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
mounted(){ |
|
|
mounted(){ |
|
@ -179,82 +103,22 @@ export default { |
|
|
this.$emit('handleEvent', this.data) |
|
|
this.$emit('handleEvent', this.data) |
|
|
}, |
|
|
}, |
|
|
bindNewDomain(){ |
|
|
bindNewDomain(){ |
|
|
this.dialogVisible = true |
|
|
this.isShowAddDomainDialog = true; |
|
|
}, |
|
|
|
|
|
handleCancel(){ |
|
|
|
|
|
this.dialogVisible = false |
|
|
|
|
|
}, |
|
|
|
|
|
handleConfirm(){ |
|
|
|
|
|
this.$refs.formRef.validate((valid) => { |
|
|
|
|
|
if (valid) this.verfiyDNS(); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
verfiyDNS() { |
|
|
|
|
|
this.show_step = true |
|
|
|
|
|
|
|
|
|
|
|
const that = this |
|
|
|
|
|
that.$http('POST', '/agentnew/ajax_check_dns', { |
|
|
|
|
|
domain: that.formData.domain |
|
|
|
|
|
}, { |
|
|
|
|
|
headers: { |
|
|
|
|
|
'Auth': this.token |
|
|
|
|
|
} |
|
|
|
|
|
}).then(response => { |
|
|
|
|
|
if(response.status){ |
|
|
|
|
|
that.step1 = 2 |
|
|
|
|
|
that.step2 = 1 |
|
|
|
|
|
that.verfiyBeian() |
|
|
|
|
|
} else { |
|
|
|
|
|
that.step1 = 3 |
|
|
|
|
|
} |
|
|
|
|
|
}).catch(error => { |
|
|
|
|
|
console.error(error, 'error') |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
verfiyBeian(){ |
|
|
|
|
|
const that = this |
|
|
|
|
|
that.$http('POST', '/agentnew/ajax_check_beian', { |
|
|
|
|
|
domain: that.formData.domain |
|
|
|
|
|
},{ |
|
|
|
|
|
headers:{ |
|
|
|
|
|
'Auth': this.token |
|
|
|
|
|
} |
|
|
|
|
|
}).then(response => { |
|
|
|
|
|
if(response.status){ |
|
|
|
|
|
that.addDomain() |
|
|
|
|
|
} else { |
|
|
|
|
|
that.step2 = 3 |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}).catch(error => { |
|
|
|
|
|
console.error(error, 'error') |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
}, |
|
|
addDomain(){ |
|
|
handleAddEvent(data) { |
|
|
const that = this |
|
|
if(data.domain){ |
|
|
that.$http('POST', '/agentnew/ajax_add_domain', { |
|
|
const index = data.domain.indexOf('.'); |
|
|
domain: that.formData.domain, |
|
|
if (index !== -1) { |
|
|
beian: that.formData.beian |
|
|
this.data.prefix = data.domain.substring(0, index) |
|
|
},{ |
|
|
this.data.domain = data.domain.substring(index) |
|
|
headers:{ |
|
|
this.domainOptions.unshift({ |
|
|
'Auth': this.token |
|
|
value: this.data.domain, |
|
|
} |
|
|
label: this.data.domain, |
|
|
}).then(response => { |
|
|
|
|
|
if(response.status){ |
|
|
|
|
|
that.data.domain = '.'+that.formData.domain |
|
|
|
|
|
that.domainOptions.unshift({ |
|
|
|
|
|
label: '.'+that.formData.domain, |
|
|
|
|
|
value: '.'+that.formData.domain |
|
|
|
|
|
}) |
|
|
}) |
|
|
that.show_step = false |
|
|
|
|
|
that.dialogVisible = false |
|
|
|
|
|
that.$message.success('添加成功'); |
|
|
|
|
|
return true |
|
|
|
|
|
} |
|
|
} |
|
|
that.$message.error(response.info); |
|
|
} |
|
|
}).catch(error => { |
|
|
this.isShowAddDomainDialog = false |
|
|
console.error(error, 'error') |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|