rt-sim-training-client/src/views/components/pay/commit.vue

<template>
  <el-card shadow="never">
    <div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-form
          ref="make"
          :model="saleModel "
          label-width="120px"
          :rules="rules"
          style="margin-top: 80px; margin-bottom: 80px; width: 80%"
        >
          <el-form-item :label="nameTitle + ':'" prop="name">
            <span style="color: #808080 !important;"> {{ saleModel.name }} </span>
          </el-form-item>
          <el-form-item :label="$t('global.permissionType')" prop="systemName">
            <span style="color: #808080 !important;"> {{ systemName }}{{ $t('global.permissions') }} </span>
          </el-form-item>
          <el-form-item :label="priceTitle + ':'" prop="price">
            <span style="font-size: 16px;color: #fb7a1b;"> {{ saleModel.price.toFixed(2) }}</span>
            <span style="color: #333;">{{ $t('global.yuanMonth') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.purchaseDuration')" prop="choose">
            <el-radio-group v-model="choose" @change="chooseEvent">
              <template v-for="(item,idx) in chooseList">
                <el-radio-button :key="idx" :label="item.label" />
              </template>
              <el-radio-button :label="$t('global.custom')" />
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="!disabled" prop="months">
            <el-input-number v-model="saleModel.months" :min="1" :max="1000" :disabled="disabled " />
            <span>{{ $t('global.month') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.permissionNum')" prop="total">
            <el-input-number v-model="saleModel.total" :min="1" :max="200" />
            <span>{{ $t('global.indexA') }}</span>
          </el-form-item>
          <el-form-item :label="$t('global.purchasePrice')" prop="sumPrice">
            <span style="font-size: 24px; color: #fb7a1b;"> {{ parseInt(sumPrice) }}</span>
            <span style="font-size: 16px;color: #fb7a1b;">. {{ (sumPrice -
              parseInt(sumPrice)).toFixed(2).toString().replace('.0', '').replace(' ', '') }}
            </span>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <el-button style="float: right; margin-bottom: 20px; margin-right: 20px;" type="primary" :disabled="commitDisabled" @click="commit">{{ $t('global.submitOrders') }}
    </el-button>
    <el-button style="float: right; margin-bottom: 20px; margin-right: 10px;" :disabled="commitDisabled" @click="back">{{ $t('global.back') }}</el-button>
  </el-card>
</template>

<script>
import { commitOrder } from '@/api/management/order';
import { PermissionType } from '@/scripts/ConstDic';

export default {
    name: 'CommitDraft',
    props: {
        orderData: {
            type: Object,
            required: true
        },
        systemName: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            disabled: true,
            commitDisabled: false,
            choose: this.$t('global.january'),
            chooseList: [
                { label: this.$t('global.january'), value: 1 },
                { label: this.$t('global.march'), value: 3 },
                { label: this.$t('global.year'), value: 12 },
                { label: this.$t('global.twoYears'), value: 24 },
                { label: this.$t('global.fiveYears'), value: 60 },
                { label: this.$t('global.tenYears'), value: 120 }
            ],
            saleModel: {
                goodsId: '',
                name: '',
                price: 0,
                months: 1,
                total: 1
            }
        };
    },
    computed: {
        sumPrice() {
            return this.saleModel.price * this.saleModel.months * this.saleModel.total || 0;
        },
        nameTitle() {
            if (this.$route.query.permissionType == PermissionType.EXAM ||
                    this.$route.query.permissionType == PermissionType.LESSON) {
                return this.$t('global.courseName');
            } else if (this.$route.query.permissionType == PermissionType.SCREEN) {
                return this.$t('global.screenName');
            } else {
                return this.$t('global.productName');
            }
        },
        priceTitle() {
            switch (this.$route.query.permissionType) {
            case PermissionType.LESSON: return this.$t('global.coursePrice');
            case PermissionType.EXAM: return this.$t('global.testPrice');
            case PermissionType.SIMULATION: return this.$t('global.simulationPrice');
            case PermissionType.SCREEN: return this.$t('global.timeUnitPrice');
            }
            return '';
        },
        rules() {
            return {
                'name': [
                    { required: true, message: this.$t('rules.courseNameEmpty'), trigger: 'blur' }
                ],
                'months': [
                    { required: true, message: this.$t('rules.purchaseMonth'), trigger: 'blur' },
                    {
                        validator(rule, value, callback) {
                            if (Number.isInteger(Number(value)) && Number(value) >= 0) {
                                callback();
                            } else {
                                callback(new Error(this.$t('tip.purchaseMonth')));
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                'total': [
                    { required: true, message: this.$t('rules.accessNumber'), trigger: 'blur' },
                    {
                        validator(rule, value, callback) {
                            if (Number.isInteger(Number(value)) && Number(value) >= 0) {
                                callback();
                            } else {
                                callback(new Error(this.$t('tip.permissionsNumber')));
                            }
                        },
                        trigger: 'blur'
                    }
                ]
            };
        }
    },
    watch: {
        orderData: function (val) {
            if (val) {
                this.saleModel.price = val.price;
                this.saleModel.goodsId = val.id;
                this.saleModel.name = val.name;
            }
        }
    },
    methods: {
        // 选择自定义时长，修改页面控件状态
        chooseEvent(label) {
            this.disabled = label !== this.$t('global.custom');
            this.chooseList.forEach(elem => {
                if (label === elem.label) {
                    this.saleModel.months = elem.value;
                }
            });
        },
        // 提交订单
        commit() {
            this.$refs.make.validate((valid) => {
                if (valid) {
                    this.commitDisabled = true;
                    const model = {
                        goodsId: this.saleModel.goodsId,
                        price: this.saleModel.price,
                        monthAmount: this.saleModel.months,
                        amount: this.saleModel.total,
                        permissionType: this.$route.query.permissionType
                    };
                    commitOrder(model).then(response => {
                        this.$emit('commit', response.data);
                        this.commitDisabled = false;
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.failedSubmitOrder'));
                        this.commitDisabled = false;
                    });
                }
            });
        },
        back() {
            this.commitDisabled = true;
            setTimeout(() => {
                history.go(-1);
            }, 100);
        }
    }
};
</script>