dy-admin-manager/src/views/productService/components/cloudRecharge.vue

<template>
  <div class="cloudRecharge">
    <div class="descriptions-container">
        <div class="descriptions">
          <div class="title">云教室扣费规则</div>
          <div class="tips" style="line-height: 30px;">
            1.系统根据线上课课程人数（含老师）进行扣费；<br />
            2.每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，赠送时长不计算费用；<br />
            3.扣费金额按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费；<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>

    <el-form inline ref="form" :model="form" label-width="80px">
      <el-form-item label="充值金额"
        prop="amount"
        :rules="[{ required: true, message: '请输入充值金额', trigger: 'blur' },
        { required: true, validator: validPrice, trigger: 'blur' }]">
        <el-input v-model="form.amount" placeholder="请输入充值金额"
          oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value"
          type="number">
          <div slot="append">元</div>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onRecharge" v-if="$helpers.permission('tenantInfo/recharge')">确认充值</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="服务订单"
      :visible.sync="cloudVisible"
      width="1000px"
      v-if="cloudVisible"
      append-to-body
    >
      <rechargeModel :amount="form.amount" v-on="$listeners" @close="cloudVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import rechargeModel from '@/views/productService/model/rechargeModel'
export default {
  name: 'cloudRecharge',
  components: {
    rechargeModel
  },
  data() {
    return {
      cloudVisible: false,
      form: {
        amount: null
      },
      tableData: [{
        num: 2,
        minute: 0.5
      }, {
        num: 3,
        minute: 0.5
      }]
    }
  },
  methods: {
    onRecharge() {
      this.$refs.form.validate(async (_) => {
        if(_) {
          this.cloudVisible = 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: 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 #979797;
    }
  }
  .tips {
    padding: 10px 20px 18px;
    font-size: 16px;
    font-weight: 400;
    color: #212121;
    line-height: 22px;
  }
}
.el-input, .el-select {
  width: 300px !important;
}
</style>