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

<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>
    </div>

    <el-form label-position="top" 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>
    <div class="sure">
      <el-button type="primary" @click="onRecharge">确认充值</el-button>
    </div>

    <el-dialog
      title="服务订单"
      :visible.sync="cloudVisible"
      width="1000px"
      v-if="cloudVisible"
      append-to-body
    >
      <rechargeModel :amount="form.amount" @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
      }
    }
  },
  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>
.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>