update: 接口许可到期弹窗

src/components/layout/components/expire-dialog.vue

+<template>
+  <div class="expire-alert-box">
+    <el-dialog title="接口许可证即将到期" :visible.sync="visible" width="600px" @close="onClose">
+      <div class="label">企微企业名称：{{ expireData.corpName }}</div>
+      <div class="label">品牌名称：{{ expireData.enterpriseNames }}</div>
+      <div class="label">到期时间：{{ expireData.interceptTime | timeStampToYmd3 }}</div>
+      <div class="label" v-if="interceptTimeNew > 0">
+        企业微信自2022年5月16日起，面对服务商进行平台收费模式调整，服务商需接入接口收费模式，购买并激活接口调用许可后，才可使用企业微信接口；<span>{{ expireData.interceptTimeNew }}天</span>后将有<span>{{ expireData.interceptUserNum }}</span
+        >个接口许可证即将过期，您总共还剩余<span>{{ expireData.permissionUserNum }}</span
+        >个可用的接口许可证，请保证数量充足，如需增加请及时联系运营人员续费，避免影响使用；
+      </div>
+      <div class="label" v-else>
+        企业微信自2022年5月16日起，面对服务商进行平台收费模式调整，服务商需接入接口收费模式，购买并激活接口调用许可后，才可使用企业微信接口；<span>今日{{ expireData.interceptTime | timeStampToHms }}</span
+        >后将有<span>{{ expireData.interceptUserNum }}</span
+        >个接口许可证即将过期，您总共还剩余<span>{{ expireData.permissionUserNum }}</span
+        >个可用的接口许可证，请保证数量充足，如需增加请及时联系运营人员续费，避免影响使用；
+      </div>
+
+      <el-row type="flex" justify="end" align="middle" style="margin: 14px 0;">
+        <el-button @click="onClose">知道了</el-button>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ExpireDialog',
+  data() {
+    return {};
+  },
+  props: {
+    expireData: {},
+    visible: false
+  },
+  methods: {
+    onClose() {
+      let now = new Date().getTime();
+      sessionStorage.setItem('permission-interceptor-time', now);
+      this.$emit('update:visible', false);
+    }
+  }
+  // filters: {
+  //   formatDate(value) {
+  //     if (!value) {
+  //       return '';
+  //     }
+  //     let arr = value.split(' ');
+  //     let arr1 = arr[0].split('-');
+  //     return `${arr1[0]}年${parseInt(arr1[1])}月${parseInt(arr1[2])}日`;
+  //   }
+  // }
+};
+</script>
+<style lang="scss">
+.expire-alert-box .el-dialog {
+  background-repeat: no-repeat;
+  background-image: url('../images/alert_bg.png') !important;
+  background-size: 100% 177px;
+  padding: 0 10px;
+}
+</style>
+<style lang="scss" scoped>
+.label {
+  color: #303133;
+  font-size: 14px;
+  padding-bottom: 10px;
+  line-height: 20px;
+}
+.label span {
+  color: #f5222d;
+}
+.sub-enterprise-box {
+  border-radius: 4px;
+  background: #f7f8fa;
+  margin-bottom: 16px;
+}
+
+.sub-enterprise-box .cell {
+  padding: 10px 12px;
+  color: #303133;
+  font-size: 14px;
+}
+
+.sub-enterprise-box .line {
+  height: 1px;
+  border-bottom: 1px dashed #dcdfe6;
+  box-sizing: border-box;
+  margin: 0 22px 0 12px;
+}
+</style>

src/components/layout/index.vue

@@ -11,6 +11,7 @@
         </keep-alive>
       </div>
     </div>
+    <expire-dialog :visible.sync="showExpireDialog" :expireData="expireData"></expire-dialog>
   </div>
 </template>
 
@@ -20,10 +21,12 @@ import errorMsg from '@/common/js/error.js';
 import MainMenu from './main-menu.vue';
 import AsideMenu from './aside-menu.vue';
 import BreadMenu from './bread-menu.vue';
+import filters from '@/filters/index.js';
+import ExpireDialog from './components/expire-dialog.vue';
 let provideData = { layoutVm: {} };
 export default {
   name: 'DmHbLayout',
-  components: { MainMenu, AsideMenu, BreadMenu },
+  components: { MainMenu, AsideMenu, BreadMenu, ExpireDialog },
   provide: () => provideData,
   props: {
     // 菜单树数据
@@ -51,7 +54,10 @@ export default {
       fullLoading: {
         visible: false,
         timer: null
-      }
+      },
+      // 接口到期弹窗
+      showExpireDialog: false,
+      expireData: {}
     };
   },
   watch: {
@@ -74,8 +80,29 @@ export default {
     this.enterpriseId = JSON.parse(sessionStorage.getItem('userInfos') || '{}').enterpriseId;
     this.$on('command', this.onCommand);
     this.getEnterpriseSecret();
+    this.getEnterpriseOverdue();
   },
   methods: {
+    getEnterpriseOverdue() {
+      let para = {
+        wxEnterpriseId: JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId
+      };
+      getRequest('/haoban-manage3-web/qywx-fee-wxEnterprise-detail', para).then(res => {
+        const { code, result } = res.data || {};
+        if (code != 0) {
+          errorMsg.errorMsg(res.data);
+          return;
+        }
+        if (!result) return;
+        // result.interceptTime = 1660319999000;
+        let last = sessionStorage.getItem('permission-interceptor-time');
+        if (filters.timeStampMode(last) == 0) return;
+        result.interceptTimeNew = filters.timeStampMode(result.interceptTime);
+        if (result.interceptTimeNew < 0) return;
+        this.expireData = result;
+        this.showExpireDialog = true;
+      });
+    },
     getEnterpriseSecret() {
       if (this.$route.path == '/enterpriseSet') return;
       getRequest('/haoban-manage3-web/is-wx-enterprise-secret-set', {}).then(res => {

src/filters/index.js

@@ -97,7 +97,20 @@ const timeStampToYmd = function(data) {
   let newMonth = month < 10 ? '0' + month : month;
   return `${date.getFullYear()}-${newMonth}-${day}`;
 };
-
+/**
+ * 时间戳---> 年-月-日
+ * @param timestamp
+ */
+const timeStampToYmd3 = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  return `${date.getFullYear()}年${newMonth}月${day}日`;
+};
 /**
  * 时间戳---> 年-月-日
  * @param timestamp
@@ -154,7 +167,34 @@ const timeStampSpace = function(date) {
   // let seconds = Math.round(leave3 / 1000);
   return `${days}天${hours}小时${minutes}分`;
 };
-
+// 时间戳转化为明后天系列
+const timeStampMode = function(time) {
+  if (!isNaN(time)) time = Number(time);
+  let now = new Date(); // 当前时间
+  console.log(now);
+  let today = new Date(`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} 23:59:59`).getTime(); // 今天
+  let yesterday = new Date(`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate() - 1} 23:59:59`).getTime(); // 昨天
+  let tomorrow = new Date(`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate() + 1} 23:59:59`).getTime(); // 明天
+  let dayAfterTomorrow = new Date(`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate() + 2} 23:59:59`).getTime(); // 后天
+  console.log((time - today) / (24 * 60 * 60 * 1000));
+  if (time <= today && time > yesterday) {
+    // 今天
+    return 0;
+  } else if (time > today && time <= tomorrow) {
+    // 明天
+    return 1;
+  } else if (time > tomorrow && time <= dayAfterTomorrow) {
+    // 后天
+    return 2;
+  } else if (time > dayAfterTomorrow) {
+    // 未来时间
+    let sub = parseInt((time - today) / (24 * 60 * 60 * 1000)) + 1;
+    return sub;
+  } else if (time <= yesterday) {
+    // 昨天以前
+    return -1;
+  }
+};
 /**
  * 手机号格式化
  * @param {String} phone
@@ -217,6 +257,8 @@ export default {
   formatTimeYmdHms,
   formatPhoneNum,
   timeStampToYmd2,
+  timeStampToYmd3,
+  timeStampMode,
   formatName,
   timeStampSpace,
   formatTime,