zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

https证书申请

pull/97/head
rainbro 1 month ago
parent
89220ed451
commit
fff08501a5
2 changed files with 272 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/GuipDialog.vue
  2. 401
      src/views/agent/domainList.vue

6
src/components/GuipDialog.vue
View File

@ -8,6 +8,7 @@
:show-close="showCloseButton"
:before-close="handleClose"
:class="type == 'center' ?'center' : 'normal'"
:close-on-click-modal="closeOnClickModal"
>
<!-- 自定义内容 -->
<slot></slot>
@ -49,6 +50,11 @@
type: Boolean,
default: true,
},
// 是否可以通过点击 modal 关闭 Dialog
closeOnClickModal: {
type: Boolean,
default: true,
},
// 是否显示取消按钮
showCancelButton: {
type: Boolean,

401
src/views/agent/domainList.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="page-container">
<div class="page-container"
v-loading="applyHttpsDomain.isShowWaitLoading"
:element-loading-text="applyHttpsDomain.waitLoadingText"
>
<div class="card">
<div class="tip-title flex">
<img src="@/assets/site/prompt-icon-1.svg" alt="" class="mr-10">使用提示
@ -40,19 +43,23 @@
<div class="register-wrap">
<div class="step3-wrap">
<div class="step3-top flex-common">
<h3 class="flex gap8">域名列表</h3>
</div>
<div>
<div class="flex-common table-wrap">
<div class="step3-top flex">
<h3 class="flex">域名列表</h3>
<GuipButton>新增域名</GuipButton>
</div>
<el-form>
<GuipTable :border="true" :tableData="domainList" :loading="tableLoading">
<el-table-column prop="domain" fixed="left" label="域名"></el-table-column>
<el-table-column prop="beian" label="备案"></el-table-column>
<el-table-column label="操作" fixed="right" min-width="30px">
<el-table-column label="操作">
<template slot-scope="scope">
<div class="flex">
<el-button @click="paySetting(scope.row)" type="text">设置</el-button>
<el-button v-if="scope.row.is_https == false" @click="showGetHttpsCert(scope.row)" type="text">申请免费HTTPS证书</el-button>
<el-button v-else @click="showGetHttpsCert(scope.row)" type="text">更新HTTPS证书</el-button>
<span class="expiretime gray" v-if="scope.row.is_https == true && scope.row.https_expiring_soon == false">（{{ scope.row.https_expire_time }}）</span>
<span class="expiretime red" v-if="scope.row.is_https == true && scope.row.https_expiring_soon == true">（{{ scope.row.https_expire_time }}）</span>
</div>
</template>
</el-table-column>
@ -63,16 +70,39 @@
</div>
</div>
<GuipDialog :dialogVisible="applyHttpsDomain.isShowDialog" title="申请HTTPS证书" :show-close-button="false"
:show-cancel-button="true" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange"
:close-on-click-modal="false"
:confirmText="applyHttpsDomain.confirmText">
<!-- 自定义内容 -->
<el-form>
<GuipInput column="column" v-model="applyHttpsDomain.domain" ref="GuipInput" label="域名" class="mt10" disabled />
<div class="tip-message" v-if="applyHttpsDomain.isShowDnsTxt">
<p class="flex"> <img src="@/assets/tip_blue.svg" alt="" class="mr-10">请添加DNS解析记录</p>
<p>记录类型：TXT</p>
<p>主机记录：_acme-challenge</p>
<p>记录值：{{ applyHttpsDomain.dnsValue }}</p>
</div>
</el-form>
</GuipDialog>
</div>
</template>
<script>
// import GuipButton from '@/components/GuipButton.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipInput from '@/components/GuipInput.vue';
export default {
components: {
// GuipButton,
GuipButton,
GuipTable,
GuipDialog,
GuipInput,
},
data() {
return {
@ -82,7 +112,20 @@ export default {
domainList: [],
// 表格加载
tableLoading: false,
applyHttpsDomain: {
domain: '',
isShowDialog: false,
confirmText: '申请',
confirmType: 1, // 1:申请 2:验证
isShowWaitLoading: false,
waitLoadingText: '申请中，请稍等',
getDnsTxtTimer: null,
timerTime: 2000,
isShowDnsTxt: false,
getVerifyDnsResultTimer: null,
dnsValue: '',
},
}
},
computed: {
@ -97,7 +140,7 @@ export default {
this.tableLoading = true
const that = this
that.payList = []
this.$http('POST', '/agentnew/ajax_get_private_domains', {
this.$http('POST', '/agentnew/ajax_get_private_domain_list', {
gid: this.gid,
},{
headers:{
@ -113,10 +156,53 @@ export default {
})
},
updateAutoRefund(row) {
this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
payid: row.payid,
status: row.is_auto_refund,
applyHttpsCert() {
this.$http('POST', '/agentnew/ajax_apply_https_cert', {
domain: this.applyHttpsDomain.domain,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
console.log(response.data)
// 已经申请过 直接出现验证弹层
if (response.data.data && response.data.data.name && response.data.data.value) {
this.applyHttpsDomain.dnsValue = response.data.data.value
// 弹层内容更新
this.applyHttpsDomain.confirmText = '已解析，现在验证';
this.applyHttpsDomain.isShowDnsTxt = true;
this.applyHttpsDomain.confirmType = 2;
// 打开弹层
this.applyHttpsDomain.isShowDialog = true;
// 关闭等待加载
this.applyHttpsDomain.isShowWaitLoading = false;
// 清除定时器
this.clearApplyHttpsTimer();
return true;
}
// 显示等待加载
this.applyHttpsDomain.isShowWaitLoading = true;
this.applyHttpsDomain.waitLoadingText = '申请中，请稍等';
// 关闭弹框
this.applyHttpsDomain.isShowDialog = false;
// 开始轮询获取DNS TXT
this.startTimer(response.data.keys);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
getHttpsDnsTxt(getHttpsDnsTxt) {
this.$http('POST', '/agentnew/ajax_get_https_dns_txt', {
keys: getHttpsDnsTxt
}, {
headers: {
'Auth': this.token
@ -124,8 +210,27 @@ export default {
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
if (response.data.wait == 1) {
return;
}
this.applyHttpsDomain.dnsValue = response.data.value
// 弹层内容更新
this.applyHttpsDomain.confirmText = '已解析，现在验证';
this.applyHttpsDomain.isShowDnsTxt = true;
this.applyHttpsDomain.confirmType = 2;
// 打开弹层
this.applyHttpsDomain.isShowDialog = true;
// 关闭等待加载
this.applyHttpsDomain.isShowWaitLoading = false;
// 清除定时器
this.clearApplyHttpsTimer();
} else {
// 关闭等待加载
this.applyHttpsDomain.isShowWaitLoading = false;
// 清除定时器
this.clearApplyHttpsTimer();
// 提示错误信息
this.$Message.error(response.info);
}
})
@ -133,33 +238,138 @@ export default {
console.error(error, 'error')
})
},
verifyHttpsCertDns() {
this.$http('POST', '/agentnew/ajax_verify_https_cert_dns', {
domain: this.applyHttpsDomain.domain
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
// 显示等待加载
this.applyHttpsDomain.isShowWaitLoading = true;
this.applyHttpsDomain.waitLoadingText = '验证中，请稍等';
// 关闭弹框
this.applyHttpsDomain.isShowDialog = false;
// 开始轮询获取DNS TXT
this.startTimer(response.data.keys);
} else {
// 关闭等待加载
this.applyHttpsDomain.isShowWaitLoading = false;
this.$Message.error(response.info);
this.clearApplyHttpsTimer();
}
})
}).catch(error => {
console.error(error, 'error')
})
},
getVerifyHttpsCertDnsResult(keys) {
this.$http('POST', '/agentnew/ajax_get_verify_https_cert_dns_result', {
keys: keys
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
if (response.data.wait == 1) {
return;
}
// 关闭等待加载
this.applyHttpsDomain.isShowWaitLoading = false;
// 清除定时器
this.clearApplyHttpsTimer();
this.$Message.error(response.info);
} else {
this.applyHttpsDomain.isShowWaitLoading = false;
this.$Message.error(response.info);
this.clearApplyHttpsTimer();
}
})
}).catch(error => {
console.error(error, 'error')
})
},
// 2. 开始轮询
startTimer(keys) {
console.log(this.applyHttpsDomain, 'this.applyHttpsDomain')
console.log(keys, 'keys')
// 先清除已有定时器（避免重复）
this.clearApplyHttpsTimer();
if (this.applyHttpsDomain.confirmType == 1) {
// 立即执行第一次请求
this.getHttpsDnsTxt(keys);
// 设置定时器
this.applyHttpsDomain.getDnsTxtTimer = setInterval(() => {
this.getHttpsDnsTxt(keys);
}, this.applyHttpsDomain.timerTime);
} else if (this.applyHttpsDomain.confirmType == 2) {
// 立即执行第一次请求
this.getVerifyHttpsCertDnsResult(keys);
// 设置定时器
this.applyHttpsDomain.getVerifyDnsResultTimer = setInterval(() => {
this.getVerifyHttpsCertDnsResult(keys);
}, this.applyHttpsDomain.timerTime);
}
},
// 5. 清除轮询
clearApplyHttpsTimer() {
if (this.applyHttpsDomain.getDnsTxtTimer) {
clearInterval(this.applyHttpsDomain.getDnsTxtTimer);
this.applyHttpsDomain.getDnsTxtTimer = null;
}
if (this.applyHttpsDomain.getVerifyDnsResultTimer) {
clearInterval(this.applyHttpsDomain.getVerifyDnsResultTimer);
this.applyHttpsDomain.getVerifyDnsResultTimer = null;
}
},
// 弹框相关方法---start
showAddPaymentMethodDialog(type, type_desc) {
console.log(type, 'type');
this.addPayDialogVisible = true;
this.addPayTitle = '添加' + type_desc;
this.addPayType = type;
showGetHttpsCert(row) {
console.log(row, 'row');
this.applyHttpsDomain.domain = row.domain;
this.applyHttpsDomain.isShowDialog = true;
},
// 确认按钮事件
handleConfirm() {
console.log(this.applyHttpsDomain, 'applyHttpsDomain')
if (this.applyHttpsDomain.confirmType == 1) {
this.applyHttpsCert();
} else if (this.applyHttpsDomain.confirmType == 2) {
this.verifyHttpsCertDns();
}
},
// 取消按钮事件
handleCancel() {
this.addPayDialogVisible = false;
this.closePayTipDialogVisible = false;
this.getPayList();
this.applyHttpsDomain.isShowDialog = false;
},
// 关闭弹框事件
handleClose() {
this.addPayDialogVisible = false;
this.closePayTipDialogVisible = false;
this.applyHttpsDomain.isShowDialog = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
console.log(data, 'data098908090');
},
// 弹框相关方法---end
handleClick(tab, event) {
console.log(tab, event);
console.log(tab, event);
},
},
// 6. 组件销毁前清除定时器
beforeUnmount() {
this.clearApplyHttpsTimer();
}
};
</script>
@ -226,37 +436,27 @@ export default {
color: #8A9099;
}
.pageheader {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
.expiretime {
font-family: Microsoft YaHei UI;
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
}
.pageheader-title {
flex: 1;
min-width: 300px;
.tip-message {
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
padding: 8px 13px;
margin-bottom: 32px;
}
.pageheader-title h3 {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
margin-top:8px;
.tip-message p {
line-height: 25px;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.red {
color:#FF4D4F !important;
}
@ -271,98 +471,20 @@ export default {
.ml-8 {
margin-left: 8px;
}
.mt-32 {
margin-top: 32px;
}
a {
text-decoration: none;
color: #006AFF;
}
.bind-sites-title {
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
}
.bind-sites p {
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
height: 18px;
line-height: 18px;
z-index: 0;
margin-top: 12px;
}
.el-table {
min-height: auto !important;
}
.beforeNotice {
h4 {
margin: 0;
gap: 8px;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p {
color: #8A9099;
}
}
p {
color: #1E2226;
i {
font-style: normal;
}
&:last-child {
display: flex;
align-items: stretch;
b {
font-weight: normal;
color: #8A9099;
display: inline-flex;
img {
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 5px;
margin-right: 5px;
}
}
}
::v-deep .custom-popover {
position: fixed !important;
// max-height: 290px;
@ -410,9 +532,18 @@ a {
display: flex;
justify-content: space-between;
padding-bottom: 0;
align-items: end;
align-items: center;
margin-bottom: 32px;
h3{
margin: 0;
/* body/body 2_bold */
font-family: Microsoft YaHei UI;
font-size: 14px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
/* text/text_1 */
color: #1E2226;
}
}

Write Preview
Loading…
Cancel
Save