https证书申请

src/components/GuipDialog.vue

@@ -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,

src/views/agent/domainList.vue

@@ -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 {
@@ -83,6 +113,19 @@ export default {
       // 表格加载
       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,9 @@ export default {
         })
     },
 
-    updateAutoRefund(row) {
+    applyHttpsCert() {
-      this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
+      this.$http('POST', '/agentnew/ajax_apply_https_cert', {
-          payid: row.payid,
+          domain: this.applyHttpsDomain.domain,
-          status: row.is_auto_refund,
       }, {
           headers: {
               'Auth': this.token
@@ -124,7 +166,32 @@ export default {
       }).then(response => {
           this.$nextTick(() => {
               if (response.status) {
-                  this.$Message.success(response.info);
+                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);
               }
@@ -133,33 +200,176 @@ export default {
           console.error(error, 'error')
       })
     },
+    getHttpsDnsTxt(getHttpsDnsTxt) {
+      this.$http('POST', '/agentnew/ajax_get_https_dns_txt', {
+          keys: getHttpsDnsTxt
+      }, {
+          headers: {
+              'Auth': this.token
+          }
+      }).then(response => {
+          this.$nextTick(() => {
+              if (response.status) {
+                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);
+              }
+          })
+      }).catch(error => {
+          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) {
+    showGetHttpsCert(row) {
-      console.log(type, 'type');
+      console.log(row, 'row');
-      this.addPayDialogVisible = true;
+      this.applyHttpsDomain.domain = row.domain;
-      this.addPayTitle = '添加' + type_desc;
+      this.applyHttpsDomain.isShowDialog = true;
-      this.addPayType = type;
+    },
+    // 确认按钮事件
+    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.applyHttpsDomain.isShowDialog = false;
-        this.closePayTipDialogVisible = false;
-        this.getPayList();
     },
     // 关闭弹框事件
     handleClose() {
-        this.addPayDialogVisible = false;
+      this.applyHttpsDomain.isShowDialog = false;
-        this.closePayTipDialogVisible = 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;
 }
 
-
+.expiretime {
-
+  font-family: Microsoft YaHei UI;
-.pageheader {
+  font-size: 12px;
-    display: flex;
+  font-weight: normal;
-    justify-content: space-between;
+  line-height: 13px;
-    align-items: center;
+  letter-spacing: 0.08em;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
 }
 
-.pageheader-title {
+.tip-message {
-    flex: 1;
+    border-radius: 4px;
-    min-width: 300px;
+    /* middle/middle_blue_1 */
+    background: #F2F7FF;
+    /* middle/middle_blue_3 */
+    border: 1px solid #BFDAFF;
+    padding: 8px 13px;
+    margin-bottom: 32px;
 }
-
+.tip-message p {
-.pageheader-title h3 {
+  line-height: 25px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: normal;
-    letter-spacing: 0.08em;
-    color: #1E2226;
-    margin-top:8px;
 }
 
-.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;
       }
 
     }