192 lines
8.3 KiB
Vue
192 lines
8.3 KiB
Vue
|
<template>
|
||
|
|
<el-card shadow="never">
|
||
|
|
<div>
|
||
|
|
<el-scrollbar wrapClass="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="权限类型: " prop="systemName">
|
||
|
|
<span style="color: #808080 !important;"> {{systemName}}权限 </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;">元/月</span>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="购买时长: " prop="choose">
|
||
|
|
<el-radio-group v-model="choose" @change="chooseEvent">
|
||
|
|
<template v-for="item in chooseList">
|
||
|
|
<el-radio-button :label="item.label"></el-radio-button>
|
||
|
|
</template>
|
||
|
|
<el-radio-button label="自定义"></el-radio-button>
|
||
|
|
</el-radio-group>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="months" v-show="!disabled">
|
||
|
|
<el-input-number v-model="saleModel.months" :min="1" :max="1000" :disabled="disabled ">
|
||
|
|
</el-input-number>
|
||
|
|
<span>月</span>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="权限数量: " prop="total">
|
||
|
|
<el-input-number v-model="saleModel.total" :min="1" :max="200"></el-input-number>
|
||
|
|
<span>个</span>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="购买总价: " 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 " @click="commit">提交订单
|
||
|
|
</el-button>
|
||
|
|
<el-button style="float: right; margin-bottom: 20px; margin-right: 10px;" @click="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,
|
||
|
|
choose: '一月',
|
||
|
|
chooseList: [
|
||
|
|
{ label: '一月', value: 1 },
|
||
|
|
{ label: '三月', value: 3 },
|
||
|
|
{ label: '一年', value: 12 },
|
||
|
|
{ label: '两年', value: 24 },
|
||
|
|
{ label: '五年', value: 60 },
|
||
|
|
{ label: '十年', 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 '课程名称';
|
||
|
|
} else if (this.$route.query.permissionType == PermissionType.SCREEN) {
|
||
|
|
return '大屏名称';
|
||
|
|
} else {
|
||
|
|
return '产品名称';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
priceTitle() {
|
||
|
|
switch (this.$route.query.permissionType) {
|
||
|
|
case PermissionType.LESSON: return '课程单价';
|
||
|
|
case PermissionType.EXAM: return '考试单价';
|
||
|
|
case PermissionType.SIMULATION: return '仿真单价';
|
||
|
|
case PermissionType.SCREEN: return '大屏单价';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rules() {
|
||
|
|
return {
|
||
|
|
'name': [
|
||
|
|
{ required: true, message: '课程名称不能为空', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
'months': [
|
||
|
|
{ required: true, message: '请输入购买月数', trigger: 'blur' },
|
||
|
|
{
|
||
|
|
validator(rule, value, callback) {
|
||
|
|
if (Number.isInteger(Number(value)) && Number(value) >= 0) {
|
||
|
|
callback();
|
||
|
|
} else {
|
||
|
|
callback(new Error("请输入有效的购买月数"));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
trigger: 'blur',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
'total': [
|
||
|
|
{ required: true, message: '请输入权限数量', trigger: 'blur' },
|
||
|
|
{
|
||
|
|
validator(rule, value, callback) {
|
||
|
|
if (Number.isInteger(Number(value)) && Number(value) >= 0) {
|
||
|
|
callback();
|
||
|
|
} else {
|
||
|
|
callback(new Error("请输入有效的权限个数"));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
trigger: 'blur',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
orderData: function (val) {
|
||
|
|
if (val) {
|
||
|
|
this.saleModel.price = val.price;
|
||
|
|
this.saleModel.goodsId = val.id;
|
||
|
|
if (this.$route.query.permissionType == PermissionType.LESSON ||
|
||
|
|
this.$route.query.permissionType == PermissionType.EXAM) {
|
||
|
|
this.saleModel.name = val.lessonName;
|
||
|
|
} else if (this.$route.query.permissionType == PermissionType.SCREEN) {
|
||
|
|
this.saleModel.name = val.name;
|
||
|
|
} else {
|
||
|
|
this.saleModel.name = val.prdName;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//选择自定义时长，修改页面控件状态
|
||
|
|
chooseEvent(label) {
|
||
|
|
this.disabled = label === '自定义' ? false : true;
|
||
|
|
this.chooseList.forEach(elem => {
|
||
|
|
if (label === elem.label) {
|
||
|
|
this.saleModel.months = elem.value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//提交订单
|
||
|
|
commit() {
|
||
|
|
this.$refs.make.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
let 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);
|
||
|
|
}).catch(error => {
|
||
|
|
this.$messageBox('提交订单失败');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
back() {
|
||
|
|
history.go(-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|