dy-admin-manager/src/views/productService/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>产品服务
    </h2>
    <div class="m-core">
      <!-- navMenu    -->
      <div class="descriptions-container">
        <div class="descriptions">
          <div class="title">服务信息</div>
          <el-row>
            <el-col :span="15">当前版本：<span class="color">{{ dataInfo.serverName }}</span></el-col>
            <el-col :span="9">学员上限：<span class="color">{{ dataInfo.studentNum }}</span> / {{ dataInfo.studentUpLimit }}人</el-col>
            <el-col :span="15">服务有效期：<span class="color" v-if="dataInfo.expiryDate && dataInfo.expiryDateEnd">{{ dataInfo.expiryDate }} ~ {{ dataInfo.expiryDateEnd }}</span></el-col>
            <el-col :span="9">有效期剩余：<span class="color">{{ dataInfo.validRemaining }}天</span></el-col>
          </el-row>
        </div>

        <div class="descriptions small">
          <div class="title">云教室余额 <el-button type="text" size="small" @click="onDetail">扣费记录 >></el-button></div>
          <el-row>
            <el-col :span="24">云教室总余额：<span class="color">{{ dataInfo.sumBalance | hasMoneyFormat }}</span></el-col>
            <!-- <el-col :span="24">冻结余额<el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">已排线上课预计服务费用总和，课程结束后扣减</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                      font-size: 18px;
                      color: #f56c6c;
                      top: 2px;
                      position: relative;
                    "
                  ></i>
                </el-tooltip>：<span class="color">{{ dataInfo.frozenAmount | hasMoneyFormat }}</span></el-col>
            <el-col :span="24">可用余额<el-tooltip placement="top" popper-class="mTooltip">
                  <div slot="content">排线上课时系统计算预计服务费用，从该余额中进行冻结，若预计服务费用大于该余额则不可排线上课</div>
                  <i
                    class="el-icon-question micon el-tooltip"
                    style="
                      font-size: 18px;
                      color: #f56c6c;
                      top: 2px;
                      position: relative;
                    "
                  ></i>
                </el-tooltip>：<span class="color">{{ dataInfo.balance | hasMoneyFormat }}</span></el-col> -->
          </el-row>
        </div>
      </div>


      <tab-router
        v-model="activeIndex"
        ref="tab"
      >
        <!-- <el-tab-pane
          label="服务续费"
          lazy
          v-if="permission('/serviceRenew')"
          name="1"
        >
        </el-tab-pane> -->
        <el-tab-pane
          label="云教室充值"
          lazy
          v-if="permission('/cloudRecharge')"
          name="2"
        >
          <cloud-recharge v-if="activeIndex == 2" />
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>
<script>
import cloudRecharge from '@/views/productService/components/cloudRecharge'
import { permission } from "@/utils/directivePage";
import { queryTenantInfoSumm } from "./api";
import dayjs from 'dayjs'
//    forecastName,
export default {
  components: {
    cloudRecharge
  },
  name: "productService",
  data() {
    return {
      activeIndex: "2",
      dataInfo: {
        serverName: null,
        expiryDate: null,
        expiryDateEnd: null,
        studentNum: 0,
        studentUpLimit: 0,
        validRemaining: 0,
        sumBalance: 0,
        frozenAmount: 0,
        balance: 0
      }
    };
  },
  mounted() {
    this.__init();
  },
  methods: {
    permission,
    async __init() {
      try {
        const res = await queryTenantInfoSumm()
        console.log(res)
        this.dataInfo = res.data || {}
        this.dataInfo.expiryDate = res.data.expiryDate ? dayjs(res.data.expiryDate).format('YYYY-MM-DD') : null
        this.dataInfo.expiryDateEnd = res.data.expiryDateEnd ? dayjs(res.data.expiryDateEnd).format('YYYY-MM-DD') : null
        this.dataInfo.validRemaining = res.data.validRemaining || 0
      } catch(e) { }
    },
    onDetail() {
      this.$router.push('/federationManager/chargingRecord')
    }
  }
};
</script>
<style lang="scss" scoped>
.descriptions-container {
  display: flex;
  align-items: center;
  .descriptions {
    width: 600px;
    min-height: 170px;
    background-color: #f7f7f7;
    border-radius: 5px;
    &.small {
      margin-left: 15px;
      width: 300px;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 15px;
      line-height: 1.5;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .el-row {
    padding: 0 12px;
  }
  .el-col {
    height: 30px;
    line-height: 30px;
  }
  .color {
    color: var(--color-primary);
    font-weight: bold;
  }
}
</style>