dy-admin-manager/src/components/serviceRemind/index.vue

<template>
  <el-dialog :visible.sync="dialogFormVisible" width="700px" :before-close="beforeClose" :show-close="showClose">
    <div class="serviceTitle" slot="title">
      <span class="squat"></span>服务到期提醒
    </div>
    <p class="tips">
      <i class="el-icon-info"></i
      >您的以下服务即将到期，为了不影响学员的正常使用请联系本机构管理员及时续费
    </p>

    <div class="descriptions-container">
      <div class="descriptions">
        <div class="title">
          <i class="remind iconfont icon-banbenhuiyuantubiao"></i>
          服务信息</div>
        <el-row style="padding: 0 20px 10px">
          <el-col :span="12">
            <el-row>
              <el-col :span="24"
                >当前版本：<span class="color">{{ tInfo.serverName }}</span></el-col
              >
              <el-col :span="24"
                v-if="tInfo.expiryDateEnd"
                >服务有效期：<span class="color"
                  >{{ tInfo.expiryDateEnd }}</span
                ></el-col
              >
            </el-row>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-row>
              <el-col :span="24"
                >学员上限：<span class="color">{{ tInfo.studentNum }} / {{ tInfo.studentUpLimit }}人</span></el-col
              >
              <el-col :span="24"
                >有效期剩余：<span class="color">{{ tInfo.validRemaining }}天</span></el-col
              >
            </el-row>
          </el-col>
        </el-row>
      </div>

      <div class="descriptions">
        <div class="title">
          <i class="remind iconfont icon-yunjiaoshiyue"></i>
          云教室余额</div>
        <el-row style="padding: 0 20px 10px;">
          <el-col :span="24"
            >云教室总余额：<span class="color">{{ tInfo.balance | moneyFormat}}元</span></el-col
          >
        </el-row>
      </div>
    </div>

    <div class="btn-section" v-if="$helpers.permission('/productService') && $helpers.permission('/serviceRenew')">
      <div class="submit" @click="onSubmit">立刻续费</div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import dayjs from 'dayjs';
export default {
  name: "serviceRemind",
  data() {
    return {
      dialogFormVisible: false,
      showClose: true, // 是否显示关闭按钮
      tInfo: {
        serverName: null,
        studentNum: 0,
        studentUpLimit: 0,
        expiryDate: null,
        expiryDateEnd: null,
        validRemaining: 0, // 剩余有效期
        balance: 0
      }
    };
  },
  computed: {
    ...mapGetters(["tenantInfo", "baseTenantId"])
  },
  watch: {
    "$route"(){
      // 路由变化时重新判断是否需要续费
      this.__init()
    },
    tenantInfo() {
      // console.log('showInfo ing', this.tenantInfo)
      this.__init()
    }
  },
  mounted() {
    this.__init()
  },
  methods: {
    __init() {
      const { path, query } = this.$route
      const tenantInfo = this.tenantInfo
      const tenantRenewStatus = sessionStorage.getItem('tenantRenewStatus')
      // 判断是否是平台的
      if(tenantRenewStatus || this.baseTenantId <= 0) {
        this.dialogFormVisible = false
      } else {
        this.tInfo = { ...tenantInfo }
        // 有效期如果小于0则不能关闭弹窗
        if(tenantInfo.validRemaining <= 0) {
          this.showClose = false
        } else if(tenantInfo.validRemaining <= 30 && tenantInfo.validRemaining > 0) {
          // 只要续费则弹窗
          this.dialogFormVisible = true
          this.showClose = true
        } else { // 大于30天
          this.showClose = true
          this.dialogFormVisible = false
        }
        // 如果是续费页面则不能弹续费, 并且tabrouter 也需要一起判断
        if(path === '/productService' && query.tabrouter == 1 || path === '/productService' && !query.tabrouter) {
          this.dialogFormVisible = false
          return
        }
      }
    },
    beforeClose() { // 续费弹窗关闭前
      const tInfo = this.tInfo
      if(tInfo.validRemaining > 0) { // 设置标识,如果机构可用天数大于1天,小于30天则,关闭一次,就不会在提示
        sessionStorage.setItem('tenantRenewStatus', 1)
      } else {
        sessionStorage.removeItem('tenantRenewStatus')
      }
      this.dialogFormVisible = false
    },
    onSubmit() {
      this.beforeClose()
      this.$router.push('/productService')
    }
  }
};
</script>

<style lang="less" scoped>
.serviceTitle {
  font-size: 26px;
  font-weight: 500;
  color: var(--color-primary);
  .squat {
    display: inline-block;
    margin-right: 10px;
    height: 17px;
    width: 5px;
    border-radius: 3px;
    background-color: var(--color-primary);
  }
}
.tips {
  font-size: 16px;
  line-height: 22px;
  color: #6d7278;
  .el-icon-info {
    color: #f7b500;
    margin-right: 6px;
  }
}
::v-deep .el-dialog {
  background: url("./header_bg.png") no-repeat top center #fff;
  background-size: 100% auto;
  border-radius: 6px;
  overflow: hidden;
  .el-dialog__header {
    padding: 26px 26px 10px;
    background: transparent;
    .el-dialog__headerbtn .el-dialog__close {
      color: #000000;
      font-size: 14px;
    }
  }
  .el-dialog__body {
    padding: 0 26px 26px;
  }
}
.descriptions-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 15px;
  margin-top: 50px;
  .descriptions {
    border-radius: 6px;
    border: 1px solid #dde8ff;
    background: #fff;
    margin-bottom: 10px;
    .title {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 18px;
      line-height: 28px;
      font-size: 20px;
      font-weight: 500;
      color: #212121;
    }
  }
  .el-col {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    color: #212121;
    display: table;
    span {
      color: #6d7278;
    }
  }
  .el-col-24 {
    padding-bottom: 15px;
  }
  .color {
    color: #6d7278;
  }
}
.btn-section {
  text-align: center;
  .submit {
    margin: 0 auto;
    width: 227px;
    height: 51px;
    cursor: pointer;
    background: linear-gradient(270deg, #FFC65E 0%, #FFE8A6 100%);
    border-radius: 26px;
    font-size: 24px;
    font-weight: 500;
    color: #981E13;
    line-height: 51px;
  }
}
.remind {
  display: inline-block;
  margin-right: 10px;
  font-size: 22px;
  color: var(--color-primary);
}
// .icon_service {
//   width: 22px;
//   height: 18px;
//   background: url("./icon_service.png") no-repeat center;
//   background-size: contain;
// }
// .icon_yunB {
//   width: 16px;
//   height: 22px;
//   background: url("./icon_yunB.png") no-repeat center;
//   background-size: contain;
// }
</style>