|
@@ -7,56 +7,45 @@
|
|
|
<!-- navMenu -->
|
|
|
<div class="descriptions-container">
|
|
|
<div class="descriptions">
|
|
|
- <div class="title">服务信息</div>
|
|
|
- <el-row style="padding: 0 20px">
|
|
|
- <el-col :span="12" class="border">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">当前版本:<span class="color">{{ dataInfo.serverName }}</span></el-col>
|
|
|
- <el-col :span="24">服务有效期:<span class="color" v-if="dataInfo.expiryDateEnd">{{ dataInfo.expiryDateEnd }}</span></el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- <el-col :span="10" :offset="2">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">学员上限:<span><span class="color">{{ dataInfo.studentNum }}</span> / {{ dataInfo.studentUpLimit }}人</span></el-col>
|
|
|
- <el-col :span="24">有效期剩余:<span class="color">{{ dataInfo.validRemaining }}天</span></el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="descriptions">
|
|
|
- <div class="title">云教室余额 <el-button type="text" @click="onDetail">扣费记录 >></el-button></div>
|
|
|
- <el-row style="padding: 0 20px">
|
|
|
- <el-col :span="24">云教室总余额:<span class="color">{{ dataInfo.balance | hasMoneyFormat }}</span></el-col>
|
|
|
- <!-- <el-col :span="24">冻结余额<el-tooltip placement="top" popper-class="mTooltip">
|
|
|
+ <!-- <el-button type="text" @click="onDetail">扣费记录 >></el-button> -->
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24"><span class="balance">{{ dataInfo.balance | moneyFormat }}</span><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"
|
|
|
+ class="el-icon-warning-outline micon el-tooltip"
|
|
|
style="
|
|
|
font-size: 18px;
|
|
|
- color: #f56c6c;
|
|
|
+ color: #3d3d3d;
|
|
|
top: 2px;
|
|
|
position: relative;
|
|
|
"
|
|
|
></i>
|
|
|
- </el-tooltip>:<span class="color">{{ dataInfo.balance | hasMoneyFormat }}</span></el-col> -->
|
|
|
+ </el-tooltip></el-col>
|
|
|
+ <el-col :span="24" class="subTitle"><i class="icon_balance"></i>云教室余额(元) <el-button plain round @click="onDetail" size="mini">扣费记录 <i class="el-icon-arrow-right"></i></el-button></el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
|
|
|
+ <div class="descriptions">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" style="display: flex;align-items: center;"><span class="balance" style="font-size: 26px; margin-right: 0;">{{ dataInfo.serverName }}</span><span class="version" @click="versionVisible = true"><i class="icon_version"></i>版本对比</span></el-col>
|
|
|
+ <el-col :span="24" class="lastTime"><i class="icon_member"></i>
|
|
|
+ 剩余<span class="days">{{ dataInfo.validRemaining }}</span>天({{ dataInfo.expiryDateEnd }}到期)
|
|
|
+ <span style="padding-left: 50px">
|
|
|
+ (学员上限) <span class="color">{{ dataInfo.studentNum }}/{{ dataInfo.studentUpLimit }}</span>人
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="版本对比"
|
|
|
+ :visible.sync="versionVisible"
|
|
|
+ width="1000px"
|
|
|
+ v-if="versionVisible"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <version @close="versionVisible = false" />
|
|
|
+ </el-dialog>
|
|
|
<tab-router
|
|
|
v-model="activeIndex"
|
|
|
ref="tab"
|
|
@@ -87,12 +76,14 @@ import serviceRenew from '@/views/productService/components/serviceRenew'
|
|
|
import { tenantInfoInfo } from '@/views/organManager/api'
|
|
|
import { permission } from "@/utils/directivePage";
|
|
|
import { queryTenantInfoSumm } from "./api";
|
|
|
+import version from '@/views/productService/model/version'
|
|
|
import dayjs from 'dayjs'
|
|
|
// forecastName,
|
|
|
export default {
|
|
|
components: {
|
|
|
cloudRecharge,
|
|
|
- serviceRenew
|
|
|
+ serviceRenew,
|
|
|
+ version
|
|
|
},
|
|
|
name: "productService",
|
|
|
data() {
|
|
@@ -109,6 +100,7 @@ export default {
|
|
|
frozenAmount: 0,
|
|
|
balance: 0
|
|
|
},
|
|
|
+ versionVisible: false,
|
|
|
tenantInfo: null, // 机构信息
|
|
|
};
|
|
|
},
|
|
@@ -143,29 +135,13 @@ export default {
|
|
|
margin-bottom: 15px;
|
|
|
.descriptions {
|
|
|
width: 49%;
|
|
|
- min-height: 170px;
|
|
|
- background-color: #f8f8f8;
|
|
|
- border-radius: 6px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- // &.small {
|
|
|
- // margin-left: 15px;
|
|
|
- // width: 300px;
|
|
|
- // }
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px 0 15px;
|
|
|
- margin: 0 20px 5px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 21px;
|
|
|
- font-weight: 500;
|
|
|
- border-bottom: 1px solid #979797;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-row {
|
|
|
- // padding: 0 20px;
|
|
|
+ min-height: 154px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid var(--color-primary);
|
|
|
+ padding: 26px 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.el-col {
|
|
|
height: 22px;
|
|
@@ -173,26 +149,76 @@ export default {
|
|
|
font-size: 16px;
|
|
|
color: #212121;
|
|
|
display: table;
|
|
|
- span {
|
|
|
- color: #6D7278;
|
|
|
+ }
|
|
|
+ .balance {
|
|
|
+ font-size: 32px;
|
|
|
+ color: var(--color-primary);
|
|
|
+ margin-right: 9px;
|
|
|
+ }
|
|
|
+ .subTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #212121;
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .el-button {
|
|
|
+ margin-left: 20px;
|
|
|
+ color: var(--color-primary);
|
|
|
+ border-color: var(--color-primary);
|
|
|
+ padding: 4px 9px;
|
|
|
}
|
|
|
}
|
|
|
- .el-col-24 {
|
|
|
- padding-top: 15px;
|
|
|
+ .lastTime {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #545454;
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .days {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #212121;
|
|
|
+ }
|
|
|
}
|
|
|
- .border {
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- content: ' ';
|
|
|
- width: 1px;
|
|
|
- height: 36px;
|
|
|
- background-color: #979797;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 25px;
|
|
|
- right: 0;
|
|
|
+ .color {
|
|
|
+ color: var(--color-primary);
|
|
|
+ }
|
|
|
+ .version {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 92px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ background: var(--color-primary);
|
|
|
+ border-radius: 7px 0px 7px 0px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ .icon_version {
|
|
|
+ display: inline-block;
|
|
|
+ background: url("../../assets/images/icon_version.png") no-repeat center;
|
|
|
+ background-size: cover;
|
|
|
+ width: 14px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 6px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .icon_member {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url('../../assets/images/base/icon_member.png') no-repeat center;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .icon_balance {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url('../../assets/images/base/icon_balance.png') no-repeat center;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|