优化

src/App.vue

@@ -39,7 +39,7 @@ export default {
 [v-cloak] {
   display: none !important;
 }
-#app {
+html {
   --color-primary: #00A79D;
 }
 // 13817a
@@ -271,18 +271,21 @@ input[type="number"] {
   // & > h2 {
   //   display: none !important;
   // }
-  h2 {
+  & > h2 {
     height: 48px;
     line-height: 48px;
     position: relative;
     // padding-left: 20px;
-    font-size: 32px;
+    font-size: 26px;
     font-weight: 600;
-    margin-bottom: 10px;
+    padding-bottom: 15px;
+    margin-bottom: 20px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    color: #212121;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
     .term {
       height: 32px;
       line-height: 32px;

src/utils/setTheme.js

@@ -98,7 +98,7 @@ export const setTheme = async (params) => { // 是否显示加载样式
     })
 
     // 修改其它不是组件里面的颜色
-    const element = document.getElementById('app')
+    const element = document.querySelector('html')
     element.style.setProperty('--color-primary', themeColor)
   }
   // 修改主题

src/utils/vueFilter.js

@@ -670,6 +670,10 @@ Vue.filter('teamPayStatus', value => {
   return tpl[value]
 })
 
+Vue.filter('numberFormat', value => {
+  return numeral(value).format('0,0')
+})
+
 // 金额格式化
 Vue.filter('moneyFormat', value => {
   return numeral(value).format('0,0.00')

src/views/productService/api.js

@@ -15,4 +15,15 @@ export const queryTenantInfoSumm = (data) => request2({
   url: `/api-web/tenantInfo/queryTenantInfoSumm`,
   method: 'get',
   params: data
-})
+})
+
+
+export const checkInfo = (data) => request2({
+  url: '/api-web/tenantInfo/checkInfo/' + data.id,
+  method: 'get'
+})
+
+export const tenantInfoRePay = (data) => request2({
+  url: '/api-web/tenantInfo/renew/' + data.id + '?val=' + data.val,
+  method: 'get',
+})

src/views/productService/components/cloudRecharge.vue

@@ -1,17 +1,43 @@
 <template>
   <div class="cloudRecharge">
-    <div class="tips">
-      <h2>云教室扣费规则</h2>
-      <div class="tips_container">
-        1.系统根据线上课课程人数（含老师）进行扣费；<br />
-        2.用户人数2人（含老师）每分钟0.2元；用户人数3人（含老师）每分钟0.5元；<br />
-        3.每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，总送时长不计算费用；<br />
-        4.扣费金额按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费<br />
-        5.课程结束后费用立即结算。
+    <div class="descriptions-container">
+        <div class="descriptions">
+          <div class="title">云教室扣费规则</div>
+          <div class="tips" style="line-height: 30px;">
+            1.系统根据线上课课程人数（含老师）进行扣费；<br />
+            2.用户人数2人（含老师）每分钟0.2元；用户人数3人（含老师）每分钟0.5元；<br />
+            3.每节线上课平台赠送10分钟免费时，长分别为课前5分钟及课后5分钟，总送时长不计算费用；<br />
+            4.扣费金额按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费<br />
+            5.课程结束后费用立即结算。
+          </div>
+        </div>
+
+        <div class="descriptions">
+          <div class="title">云教室扣费标准</div>
+          <div class="tips">
+            <p style="padding-bottom: 10px">以1v1课程，既老师学员1对1教学，45分钟课程为例，每分钟收费标准0.2元，则该课程结束后将扣除云教室费用45分钟*0.2元/分钟=9元</p>
+            <el-table
+              :data="tableData"
+              border
+              :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+              style="width: 100%;"
+            >
+              <el-table-column align="center" label="云教室扣费标准" width="180">
+                <template slot-scope="scope">
+                  {{ scope.row.num }}人
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="云教室扣费标准">
+                <template slot-scope="scope">
+                  {{ scope.row.minute }}元/分钟
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <el-form label-position="top" ref="form" :model="form" label-width="80px">
+    <el-form inline ref="form" :model="form" label-width="80px">
       <el-form-item label="充值金额"
         prop="amount"
         :rules="[{ required: true, message: '请输入充值金额', trigger: 'blur' },
@@ -22,10 +48,10 @@
           <div slot="append">元</div>
         </el-input>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onRecharge">确认充值</el-button>
+      </el-form-item>
     </el-form>
-    <div class="sure" v-if="$helpers.permission('tenantInfo/recharge')">
-      <el-button type="primary" @click="onRecharge">确认充值</el-button>
-    </div>
 
     <el-dialog
       title="服务订单"
@@ -51,7 +77,14 @@ export default {
       cloudVisible: false,
       form: {
         amount: null
-      }
+      },
+      tableData: [{
+        num: 2,
+        minute: 0.5
+      }, {
+        num: 3,
+        minute: 0.5
+      }]
     }
   },
   methods: {
@@ -78,16 +111,36 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tips {
-  background: #f7f7f7;
-  padding: 15px;
-  h2 {
-    font-size: 18px;
-    line-height: 1.5;
-    height: auto;
+.descriptions-container {
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .descriptions {
+    width: 49%;
+    min-height: 170px;
+    background-color: #f8f8f8;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+
+    .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 rgba(0,0,0,0.25);
+    }
   }
-  .tips_container {
-    line-height: 1.5;
+  .tips {
+    padding: 10px 20px 18px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #212121;
+    line-height: 22px;
   }
 }
 .el-input, .el-select {

src/views/productService/components/serviceRenew.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="serviceRenew">
+    <div class="descriptions-container">
+      <div class="descriptions">
+        <div class="title">
+          {{ tenantInfo.platformServeName }}
+          <span class="version" @click="versionVisible = true"><i class="icon_version"></i>版本对比</span>
+        </div>
+        <el-row style="padding: 0 20px">
+          <el-col :span="6" class="border">
+            <el-row>
+              <el-col :span="24">学员上限：<span>{{ tenantInfo.studentUpLimit | numberFormat }}人</span></el-col>
+              <el-col :span="24">原价：<span class="color">{{ tenantInfo.originalPrice | hasMoneyFormat }}</span></el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="16" :offset="2">
+            <el-row>
+              <el-col :span="24">&nbsp;</el-col>
+              <el-col :span="24">合同价：<span class="color">{{ tenantInfo.contractPrice | moneyFormat }}元/{{ unitSuffix }}</span></el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <el-form inline ref="form" :model="form" label-width="80px">
+      <el-form-item label="续费期限"
+        prop="val"
+        :rules="[{ required: true, message: '请输入续费期限', trigger: 'blur' },
+        { required: true, validator: validPrice, trigger: 'blur' }]">
+        <el-input v-model="form.val" placeholder="请输入续费期限"
+          oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value"
+          type="number">
+          <div slot="append">{{ unitSuffix }}</div>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onRecharge">确认续费</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog
+      title="服务订单"
+      :visible.sync="serviceVisible"
+      width="1000px"
+      v-if="serviceVisible"
+    >
+      <serviceModel :value="form.val" :tenantInfo="tenantInfo" @close="serviceVisible = false" />
+    </el-dialog>
+
+    <el-dialog
+      title="版本对比"
+      :visible.sync="versionVisible"
+      width="1000px"
+      v-if="versionVisible"
+      append-to-body
+    >
+      <version @close="versionVisible = false" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import serviceModel from '@/views/productService/model/serviceModel'
+import version from '@/views/productService/model/version'
+import { tenantInfoInfo } from '@/views/organManager/api'
+import { getTenantId } from '@/utils/auth'
+import { paymentMode } from '@/constant'
+export default {
+  name: 'serviceRenew',
+  components: {
+    serviceModel,
+    version
+  },
+  data() {
+    return {
+      paymentMode,
+      serviceVisible: false,
+      versionVisible: false,
+      form: {
+        val: null
+      },
+      tenantInfo: {
+        platformServeName: null,
+        studentUpLimit: 0,
+        contractPrice: 0,
+        originalPrice: 0,
+        expiryUnit: 'YEAR'
+      }
+    }
+  },
+  computed: {
+    unitSuffix() {
+      // 后辍默认为年
+      return this.paymentMode[this.tenantInfo.expiryUnit] || '年'
+    }
+  },
+  mounted() {
+    this.__init();
+  },
+  methods: {
+    async __init() {
+      try {
+        const res = await tenantInfoInfo({ id: getTenantId() })
+        const { data } = res
+        this.tenantInfo = {
+          platformServeName: data.platformServeName,
+          studentUpLimit: data.studentUpLimit,
+          contractPrice: data.productInfo?.contractPrice || 0,
+          originalPrice: data.productInfo?.originalPrice || 0,
+          expiryUnit: data.productInfo?.expiryUnit
+        }
+      } catch(e) {}
+    },
+    onRecharge() {
+      this.$refs.form.validate(async (_) => {
+        if(_) {
+          this.serviceVisible = true
+        }
+      })
+    },
+    validPrice (rule, value, callback) {
+      if ((value == "" && typeof value == "string") || value == null) {
+        callback(new Error("请输入金额"));
+      } else if (value <= 0) {
+        callback(new Error("输入金额必须大于0"));
+      } else if (value >= 100000) {
+        callback(new Error("输入金额必须小于100000"));
+      } else {
+        callback();
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.descriptions-container {
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  .descriptions {
+    width: 100%;
+    min-height: 170px;
+    background-color: #f8f8f8;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+
+    .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 rgba(0,0,0,0.25);
+    }
+  }
+  .el-col {
+    height: 22px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #212121;
+    display: table;
+    span {
+      color: #6D7278;
+    }
+  }
+  .el-col-24 {
+    padding-top: 15px;
+  }
+  .border {
+    position: relative;
+    &::after {
+      content: ' ';
+      width: 1px;
+      height: 36px;
+      background-color: #979797;
+      display: block;
+      position: absolute;
+      top: 25px;
+      right: 0;
+    }
+  }
+}
+.version {
+  margin-left: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 92px;
+  height: 26px;
+  line-height: 26px;
+  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;
+  }
+}
+.tips {
+  background: #f7f7f7;
+  padding: 15px;
+  h2 {
+    font-size: 18px;
+    line-height: 1.5;
+    height: auto;
+  }
+  .tips_container {
+    line-height: 1.5;
+  }
+}
+.el-input, .el-select {
+  width: 300px !important;
+}
+</style>

src/views/productService/index.vue

@@ -8,17 +8,25 @@
       <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 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.expiryDate && dataInfo.expiryDateEnd">{{ dataInfo.expiryDate }} ~ {{ 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 small">
+        <div class="descriptions">
           <div class="title">云教室余额 <el-button type="text" size="small" @click="onDetail">扣费记录 >></el-button></div>
-          <el-row>
+          <el-row style="padding: 0 20px">
             <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>
@@ -53,13 +61,14 @@
         v-model="activeIndex"
         ref="tab"
       >
-        <!-- <el-tab-pane
+        <el-tab-pane
           label="服务续费"
           lazy
           v-if="permission('/serviceRenew')"
           name="1"
         >
-        </el-tab-pane> -->
+          <service-renew v-if="activeIndex == 1" />
+        </el-tab-pane>
         <el-tab-pane
           label="云教室充值"
           lazy
@@ -74,13 +83,15 @@
 </template>
 <script>
 import cloudRecharge from '@/views/productService/components/cloudRecharge'
+import serviceRenew from '@/views/productService/components/serviceRenew'
 import { permission } from "@/utils/directivePage";
 import { queryTenantInfoSumm } from "./api";
 import dayjs from 'dayjs'
 //    forecastName,
 export default {
   components: {
-    cloudRecharge
+    cloudRecharge,
+    serviceRenew
   },
   name: "productService",
   data() {
@@ -123,37 +134,60 @@ export default {
 <style lang="scss" scoped>
 .descriptions-container {
   display: flex;
-  align-items: center;
+  // align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
   .descriptions {
-    width: 600px;
+    width: 49%;
     min-height: 170px;
-    background-color: #f7f7f7;
-    border-radius: 5px;
-    &.small {
-      margin-left: 15px;
-      width: 300px;
-    }
+    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: 12px 15px;
-      line-height: 1.5;
-      font-size: 18px;
-      font-weight: bold;
+      padding: 20px 0 15px;
+      margin: 0 20px 5px;
+      line-height: 30px;
+      font-size: 21px;
+      font-weight: 500;
+      border-bottom: 1px solid rgba(0,0,0,0.25);
     }
   }
   .el-row {
-    padding: 0 12px;
+    // padding: 0 20px;
   }
   .el-col {
-    height: 30px;
-    line-height: 30px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #212121;
+    display: table;
+    span {
+      color: #6D7278;
+    }
+  }
+  .el-col-24 {
+    padding-top: 15px;
   }
-  .color {
-    color: var(--color-primary);
-    font-weight: bold;
+  .border {
+    position: relative;
+    &::after {
+      content: ' ';
+      width: 1px;
+      height: 36px;
+      background-color: #979797;
+      display: block;
+      position: absolute;
+      top: 25px;
+      right: 0;
+    }
   }
 }
 </style>

src/views/productService/model/rechargeModel.vue

@@ -45,7 +45,7 @@
     </span>
 
     <el-dialog
-      title="激活会员"
+      title="支付二维码"
       :visible.sync="payMentVisible"
       :before-close="onClose"
       v-if="payMentVisible"
@@ -121,6 +121,11 @@ export default {
           callBack()
         }
         this.payMentVisible = false
+      }).catch(e => {
+        if(typeof callBack == 'function') {
+          callBack()
+        }
+        this.payMentVisible = false
       });
     }
   },

src/views/productService/model/serviceModel.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="chioseWrap">
+    <el-form :inline="true" ref="payForm" :model="payForm">
+      <el-form-item prop="payType" :rules="[{required: true, message: '请选择支付方式', trigger: 'change'}]">
+        <el-select
+          v-model.trim="payForm.payType"
+          style="width: 180px"
+          clearable
+          filterable
+          placeholder="请选择支付方式"
+        >
+          <el-option label="支付宝支付" value="alipay_qr"></el-option>
+          <el-option label="微信支付" value="wx_pub"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-table
+      style="width: 100%"
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      :data="tableList"
+    >
+      <el-table-column align="center" prop="platformServeName" label="产品名称">
+      </el-table-column>
+      <el-table-column align="center" label="学员上限">
+        <template slot-scope="scope">
+          {{ scope.row.studentUpLimit | numberFormat }}人
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="付费模式">
+        <template slot-scope="scope">
+          {{ scope.row.expiryUnit | memberEnumType }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="num" label="数量">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="原价（元）"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.rechargeAmount | hasMoneyFormat }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="支付价格（元）"
+      >
+        <template slot-scope="scope">
+          <span style="color: red;">{{ scope.row.value | hasMoneyFormat }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="$listeners.close();">取 消</el-button>
+      <el-button @click="onMemberPay" type="primary">确 定</el-button>
+    </span>
+
+    <el-dialog
+      title="支付二维码"
+      :visible.sync="payMentVisible"
+      :before-close="onClose"
+      v-if="payMentVisible"
+      width="500px"
+      append-to-body
+    >
+      <payment :tableList="tableList" :orderNo="orderNo" :codeUrl="codeUrl" @close="onPaymentClose" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+// import { recharge } from '../api'
+import { vaildStudentUrl } from '@/utils/validate'
+import payment from '@/views/productService/model/payment'
+import { checkInfo, tenantInfoRePay } from '../api'
+import { getTenantId } from '@/utils/auth'
+export default {
+  props: ["value", "tenantInfo"],
+  components: { payment },
+  data() {
+    return {
+      payForm: {
+        payType: null,
+      },
+      pay_channel: null, //支付渠道
+      selectStudentMoney: 0, // 选中学生金额
+      payMentVisible: false,
+      codeUrl: null,
+      orderNo: null,
+      tableList: []
+    };
+  },
+  async mounted() {
+    if(this.value) {
+      const { contractPrice, originalPrice, ...res } = this.tenantInfo
+      this.tableList = [{
+        ...res,
+        num: this.value,
+        rechargeAmount: this.value * originalPrice,
+        value: this.value * contractPrice
+      }]
+    }
+  },
+  methods: {
+    onMemberPay() {
+      this.$refs.payForm.validate(async (_) => {
+        if(_) {
+          try {
+            console.log(this.value, 'this.value')
+            const res = await tenantInfoRePay({ id: getTenantId(), val: this.value })
+            console.log(res)
+            const payForm = this.payForm
+            // // 二维码页面， 唤起支付页面
+            // const { orderNo, sign, amount, orderBody, orderSubject } = res.data.payMap
+            // this.orderNo = orderNo
+            // this.codeUrl = vaildStudentUrl() + '/#/payCenter?orderNo=' + orderNo + '&sign=' + sign + '&amount=' + amount + '&payType=' + payForm.payType + '&orderBody=' + orderBody + '&orderSubject=' + orderSubject + '&platform=tenantRecharge'
+            // console.log(this.codeUrl, 'codeUrl')
+            // this.payMentVisible = true
+          } catch(e) {}
+        }
+      })
+    },
+    onClose(done) {
+      this.onPaymentClose(false, done)
+    },
+    onPaymentClose(hideTip = false, callBack) {
+      if(hideTip) {
+        this.payMentVisible = false
+        this.$emit('close')
+        return
+      }
+      this.$confirm(`是否支付完成？`, "提示", {
+        confirmButtonText: "已完成支付",
+        cancelButtonText: "未完成支付",
+        type: "warning",
+      }).then(async (res) => {
+        if(typeof callBack == 'function') {
+          callBack()
+        }
+        this.payMentVisible = false
+      }).catch(e => {
+        if(typeof callBack == 'function') {
+          callBack()
+        }
+        this.payMentVisible = false
+      });
+    }
+  },
+};
+</script>
+<style lang="less" scoped>
+.chioseWrap {
+  font-size: 16px;
+  > p {
+    font-weight: 500;
+    padding-bottom: 15px;
+    span {
+      color: red;
+      padding: 0 3px;
+    }
+  }
+}
+.dialog-footer {
+  text-align: right;
+  display: block;
+  padding-top: 15px;
+}
+</style>

src/views/productService/model/table.js

@@ -0,0 +1,184 @@
+export const tableInfo = [{
+    id: "团控宝",
+    span: 8,
+    name: "乐团管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "VIP课管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "网管课管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "审批管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "商品管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "内容管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "多分部管理",
+    baseStatus: true,
+    status: true
+  },
+  {
+    id: "团控宝",
+    span: 8,
+    name: "多合作单位管理",
+    baseStatus: true,
+    status: true
+  }
+]
+export const table2 = [{
+  id: "团易宝",
+  span: 7,
+  name: "乐团学员报名缴费",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "乐团新增学员续费",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "乐团临时加课缴费",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "零星收费",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "优惠券",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "分部分润管理",
+  baseStatus: true,
+  status: true
+},
+{
+  id: "团易宝",
+  span: 7,
+  name: "收款账户管理",
+  baseStatus: true,
+  status: true
+}]
+
+export const table3 = [{
+  id: "团运宝",
+  span: 11,
+  name: "异常业务监控",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "运营预警",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "乐团巡查",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "经营报表",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "课酬报表",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "回款统计",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "学员考勤报表",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "账户余额明细",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "课程余额明细",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "VIP/网管课耗报表",
+  baseStatus: false,
+  status: true
+},
+{
+  id: "团运宝",
+  span: 11,
+  name: "自定义报表",
+  baseStatus: false,
+  status: true
+}]

src/views/productService/model/version.vue

@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <!-- :data="tableData"
+      :span-method="objectSpanMethod" -->
+    <el-table
+      :data="tableData"
+      border
+      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      style="width: 100%;"
+    >
+      <template #append>
+        <table style="width: 100%;" cellspacing="0" cellpadding="0" border="0">
+          <colgroup>
+            <col name="el-table_5_column_1" width="180" />
+            <col name="el-table_5_column_2" width="151" />
+            <col name="el-table_5_column_3" width="105" />
+            <col name="el-table_5_column_4" width="105" />
+            <col name="el-table_5_column_5" width="105" />
+            <col name="el-table_5_column_6" width="105" />
+            <col name="el-table_5_column_7" width="105" />
+            <col name="el-table_5_column_8" width="105" />
+            <col name="gutter" width="8" />
+          </colgroup>
+          <thead class="has-gutter">
+            <tr>
+              <th class="is-center" style="background: #EDEEF0; color: #444">
+                服务
+              </th>
+              <th class="is-center" style="background: #EDEEF0; color: #444">
+                功能
+              </th>
+              <th colspan="3" class="is-center" style="background: #EDEEF0; color: #444">
+                基础版
+              </th>
+              <th colspan="3" class="is-center" style="background: #EDEEF0; color: #444">
+                专业版
+              </th>
+            </tr>
+          </thead>
+        </table>
+        <div style="height: 500px;overflow-y: auto;">
+          <table
+            style="width: 100%;"
+            cellspacing="0"
+            cellpadding="0"
+            border="0"
+          >
+            <colgroup>
+              <col name="el-table_5_column_1" width="180" />
+              <col name="el-table_5_column_2" width="151" />
+              <col name="el-table_5_column_3" width="105" />
+              <col name="el-table_5_column_4" width="105" />
+              <col name="el-table_5_column_5" width="105" />
+              <col name="el-table_5_column_6" width="105" />
+              <col name="el-table_5_column_7" width="105" />
+              <col name="el-table_5_column_8" width="105" />
+            </colgroup>
+            <tbody>
+              <tr
+                class="el-table__row"
+                v-for="(item, index) in tableData"
+                :key="item.name"
+              >
+                <td rowspan="8" colspan="1" class="is-center" v-if="index == 0">
+                  <div class="cell">{{ item.id }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">{{ item.name }}</div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="
+                        item.baseStatus ? 'el-icon-check' : 'el-icon-close'
+                      "
+                    ></i>
+                  </div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="item.status ? 'el-icon-check' : 'el-icon-close'"
+                    ></i>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="el-table__row"
+                v-for="(item, index) in table2"
+                :key="item.name"
+              >
+                <td rowspan="7" colspan="1" class="is-center" v-if="index == 0">
+                  <div class="cell">{{ item.id }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">{{ item.name }}</div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="
+                        item.baseStatus ? 'el-icon-check' : 'el-icon-close'
+                      "
+                    ></i>
+                  </div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="item.status ? 'el-icon-check' : 'el-icon-close'"
+                    ></i>
+                  </div>
+                </td>
+              </tr>
+              <tr
+                class="el-table__row"
+                v-for="(item, index) in table3"
+                :key="item.name"
+              >
+                <td
+                  rowspan="11"
+                  colspan="1"
+                  class="is-center"
+                  v-if="index == 0"
+                >
+                  <div class="cell">{{ item.id }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">{{ item.name }}</div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="
+                        item.baseStatus ? 'el-icon-check' : 'el-icon-close'
+                      "
+                    ></i>
+                  </div>
+                </td>
+                <td rowspan="1" colspan="3" class="is-center">
+                  <div class="cell">
+                    <i
+                      :class="item.status ? 'el-icon-check' : 'el-icon-close'"
+                    ></i>
+                  </div>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td rowspan="1" colspan="1" class="is-center" >
+                  <div class="cell">招生人数</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell"></div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~1000人版</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~2000人版</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~3000人版</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~1000人版</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~2000人版</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">0~3000人版</div>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td rowspan="2" colspan="1" class="is-center" >
+                  <div class="cell">零售价</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">月度</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 1860 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 2160 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 2460 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 2340 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 2640 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 2940 | hasMoneyFormat }}</div>
+                </td>
+              </tr>
+              <tr class="el-table__row">
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell">年度</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 18600 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 21600 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 24600 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 23400 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 26400 | hasMoneyFormat }}</div>
+                </td>
+                <td rowspan="1" colspan="1" class="is-center">
+                  <div class="cell amount">{{ 29400 | hasMoneyFormat }}</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+    </el-table>
+  </div>
+</template>
+<script>
+import { tableInfo, table2, table3 } from "./table";
+export default {
+  data() {
+    return {
+      tableData: [...tableInfo],
+      table2: [...table2],
+      table3: [...table3]
+    };
+  },
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-icon-close,
+/deep/.el-icon-check {
+  font-size: 20px;
+  font-weight: bold;
+}
+/deep/.el-icon-close {
+  color: red;
+}
+/deep/.el-icon-check, .amount {
+  color: var(--color-primary);
+}
+</style>

src/views/resetTeaming/components/payInfoDetail.vue

@@ -235,6 +235,7 @@
       :visible.sync="dialogSubjectVisible"
       width="400px"
       class="subjectPreview"
+      v-if="dialogSubjectVisible"
     >
       <el-tabs v-model="activeName" type="card">
         <el-tab-pane
@@ -661,7 +662,7 @@ export default {
           const preViewData = this.formatPreviewData()
           this.preViewData = preViewData
           await this.onPreview()
-          let obj = this.fommatDate();
+          // let obj = this.fommatDate();
         }else {
 
           this.$nextTick(() => {
@@ -724,7 +725,6 @@ export default {
       const form = this.form;
       // 重置小班课数据
       let tmpActiveList = form.activeList?.length > 0 ? form.activeList : []
-      console.log(this.tmpActiveList, 'tmpActiveList')
       let activeList = []
       if(tmpActiveList.length > 0) {
         tmpActiveList.forEach(active => {
@@ -743,9 +743,10 @@ export default {
           }
         })
       }
-      console.log(memberObj, 'memberObj', activeList)
+      // console.log(memberObj, 'memberObj', activeList)
 
       return {
+        payUserType: this.$route.query.payUserType,
         musicGroup: this.musicGroup,
         paymentCalender: {
           activity: [...activeList], // 小班课

src/views/resetTeaming/modals/subject-preview.vue

@@ -201,8 +201,8 @@ export default {
       });
     },
     __dataFormat(tempResult) {
-      console.log(this.preViewData, 'sffwef')
-      console.log(tempResult, 'tempResult')
+      // console.log(this.preViewData, 'sffwef')
+      // console.log(tempResult, 'tempResult')
       this.courseViewType = tempResult.musicGroup.courseViewType || 0;
       this.organId = tempResult.musicGroup.organId;
       this.cloudTeacherFee = tempResult.cloudTeacherFee || 0;
@@ -253,12 +253,12 @@ export default {
       // 团练宝
       const member = paymentCalender && paymentCalender.member ? paymentCalender.member : {}
       member.isStatus = member.optionalFlag ? true : false
-      this.toolsPackage = [member]
+      this.toolsPackage = member.actualAmount ? [member] : []
       // 乐器保养
       const repair = paymentCalender && paymentCalender.repair ? paymentCalender.repair : {}
       repair.name = '乐器保养'
       repair.isStatus = repair.optionalFlag ? true : false // 默认不选择乐器保养
-      this.instrumentRepair = [repair]
+      this.instrumentRepair = repair.actualAmount ? [repair] : []
       // 小班课
       const activity = paymentCalender && paymentCalender.activity ? paymentCalender.activity : []
       activity.map(i => {
@@ -287,7 +287,9 @@ export default {
       this.musicGroupSubject = tempResult.musicGroupSubjectPlan || [];
       let instrumentInfo = {};
       let tempInstrument = [];
-      tempResult.musicGroupSubjectGoodsGroupList?.forEach((item) => {
+      console.log(this.preViewData, 'preViewData')
+      let musicGroupSubjectGoodsGroupList = this.preViewData?.payUserType == "SCHOOL" ? [] : tempResult.musicGroupSubjectGoodsGroupList
+      musicGroupSubjectGoodsGroupList?.forEach((item) => {
         if (item.type == "INSTRUMENT") {
           // 获取乐器所有提供方式
           let KGPTJ = item.kitGroupPurchaseTypeJson