Skip to content

C
confucius
Commit 44168af2 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 8dafcade
Show whitespace changes
Inline Side-by-side
Showing with 386 additions and 536 deletions
src/components/course/course-form.vue
View file @ 44168af2
<template> <template>
<q-dialog <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
v-model="persistent"
persistent
content-class="bg-grey-1"
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 800px; max-width: 900px"> <q-card style="width: 800px; max-width: 900px">
<q-card-section> <q-card-section>
<div class="text-h6"> <div class="text-h6">
...@@ -15,307 +9,149 @@ ...@@ -15,307 +9,149 @@
<q-card-section class="q-pt-none scroll" style="max-height: 70vh"> <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="text-caption q-mb-lg q-px-md text-grey-6">基本设置</div> <div class="text-caption q-mb-lg q-px-md text-grey-6">基本设置</div>
<div class="row wrap"> <div class="row wrap">
<q-input <q-input filled stack-label :dense="false" v-model="objOption.CourseName" ref="CourseName"
filled class="col-6 q-pr-lg q-pb-lg" label="课程名称" :rules="[(val) => !!val || '请填写课程名称']" />
stack-label <q-select filled stack-label option-value="TId" option-label="TeacherName" v-model="chooseTeacher"
:dense="false" ref="Teacher_Id" :options="TeacherList" label="教师团队" :dense="false" class="col-6 q-pr-lg q-pb-lg" emit-value
v-model="objOption.CourseName" map-options multiple />
ref="CourseName"
class="col-6 q-pr-lg q-pb-lg"
label="课程名称"
:rules="[(val) => !!val || '请填写课程名称']"
/>
<q-select
filled
stack-label
option-value="TId"
option-label="TeacherName"
v-model="chooseTeacher"
ref="Teacher_Id"
:options="TeacherList"
label="教师团队"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
multiple
/>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6 q-pb-lg q-pr-lg"> <div class="col-6 q-pb-lg q-pr-lg">
<q-uploader <q-uploader :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
:style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }" style="width: auto; height: 139px" flat hide-upload-btn max-files="1" label="课程封面" accept=".jpg, image/*"
style="width: auto; height: 139px" :factory="uploadFile" auto-upload>
flat
hide-upload-btn
max-files="1"
label="课程封面"
accept=".jpg, image/*"
:factory="uploadFile"
auto-upload
>
</q-uploader> </q-uploader>
</div> </div>
<div class="col-6 q-pr-lg q-pb-lg"> <div class="col-6 q-pr-lg q-pb-lg">
<q-input <q-input v-model="objOption.CourseFeature" filled type="textarea" placeholder="课程特色" />
v-model="objOption.CourseFeature"
filled
type="textarea"
placeholder="课程特色"
/>
</div> </div>
</div> </div>
<div <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1">
class="text-caption q-mb-lg q-px-md text-grey-6"
v-if="isShowPrice == 1"
>
价格设置 价格设置
<q-toggle <q-toggle style="float: right" size="md" left-label label="阶梯定价" color="primary" :false-value="0"
style="float: right" :true-value="1" v-model="objOption.IsOpenStepPrice" />
size="md"
left-label
label="阶梯定价"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsOpenStepPrice"
/>
</div> </div>
<div class="row wrap" v-if="isShowPrice == 1"> <div class="row wrap" v-if="isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label :dense="false" v-model="objOption.OriginalPrice" ref="OriginalPrice"
filled class="col-6 q-pr-lg q-pb-lg" label="原价" @keyup.native="checkPrice(objOption, 'OriginalPrice')"
stack-label :rules="[(val) => !!val || '请填写原价']" />
:dense="false"
v-model="objOption.OriginalPrice"
ref="OriginalPrice"
class="col-6 q-pr-lg q-pb-lg"
label="原价"
@keyup.native="checkPrice(objOption, 'OriginalPrice')"
:rules="[(val) => !!val || '请填写原价']"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label :dense="false" v-model="objOption.SellPrice" ref="SellPrice"
filled class="col-6 q-pr-lg q-pb-lg" label="卖价" @keyup.native="checkPrice(objOption, 'SellPrice')"
stack-label :rules="[(val) => !!val || '请填写卖价']" />
:dense="false"
v-model="objOption.SellPrice"
ref="SellPrice"
class="col-6 q-pr-lg q-pb-lg"
label="卖价"
@keyup.native="checkPrice(objOption, 'SellPrice')"
:rules="[(val) => !!val || '请填写卖价']"
/>
</div> </div>
</div> </div>
<div class="row wrap" style="margin: 20px 0" v-if="isShowPrice == 1"> <div class="row wrap" style="margin: 20px 0" v-if="isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-btn <q-btn v-if="objOption.IsOpenStepPrice == 1" size="10px" @click="addStepPrice()" round color="primary"
v-if="objOption.IsOpenStepPrice == 1" icon="iconfont icon-img_haha" />
size="10px"
@click="addStepPrice()"
round
color="primary"
icon="iconfont icon-img_haha"
/>
</div> </div>
</div> </div>
<template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1"> <template v-if="objOption.IsOpenStepPrice == 1 && isShowPrice == 1">
<div <div class="row wrap" v-for="(item, index) in ladderPriceList" :key="index">
class="row wrap"
v-for="(item, index) in ladderPriceList"
:key="index"
>
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label v-model="item.PersionNum" @keyup.native="checkInteger(item, 'PersionNum')"
filled :dense="false" class="col-6 q-pr-lg q-pb-lg" label="人" />
stack-label
v-model="item.PersionNum"
@keyup.native="checkInteger(item, 'PersionNum')"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
label="人"
/>
</div> </div>
<div class="col-6" style="position: relative"> <div class="col-6" style="position: relative">
<q-input <q-input filled stack-label v-model="item.PersionPrice" @keyup.native="checkPrice(item, 'PersionPrice')"
filled :dense="false" class="col-6 q-pr-lg q-pb-lg" label="价格" />
stack-label <q-btn style="position: absolute; right: -5px; top: 20px" size="6px" @click="delStepPrice(index)" round
v-model="item.PersionPrice" color="red" icon="iconfont icon-guanbi1" />
@keyup.native="checkPrice(item, 'PersionPrice')"
:dense="false"
class="col-6 q-pr-lg q-pb-lg"
label="价格"
/>
<q-btn
style="position: absolute; right: -5px; top: 20px"
size="6px"
@click="delStepPrice(index)"
round
color="red"
icon="iconfont icon-guanbi1"
/>
</div> </div>
</div> </div>
</template> </template>
<div <div class="text-caption q-mb-lg q-px-md text-grey-6" v-if="isShowPrice == 1">
class="text-caption q-mb-lg q-px-md text-grey-6"
v-if="isShowPrice == 1"
>
可续费课程 可续费课程
<q-toggle <q-toggle style="float: right" size="md" left-label label="可续费课程" color="primary" :false-value="0"
style="float: right" :true-value="1" v-model="objOption.IsRenew" />
size="md"
left-label
label="可续费课程"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsRenew"
/>
</div> </div>
<div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1"> <div class="row wrap" v-if="objOption.IsRenew == 1 && isShowPrice == 1">
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label :dense="false" v-model="objOption.RenewOgPrice" ref="RenewOgPrice"
filled class="col-6 q-pr-lg q-pb-lg" label="续费原价" @keyup.native="checkPrice(objOption, 'RenewOgPrice')"
stack-label :rules="[(val) => !!val || '请填写续费原价']" />
:dense="false"
v-model="objOption.RenewOgPrice"
ref="RenewOgPrice"
class="col-6 q-pr-lg q-pb-lg"
label="续费原价"
@keyup.native="checkPrice(objOption, 'RenewOgPrice')"
:rules="[(val) => !!val || '请填写续费原价']"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label :dense="false" v-model="objOption.RenewSlPrice" ref="RenewSlPrice"
filled class="col-6 q-pr-lg q-pb-lg" label="续费售价" @keyup.native="checkPrice(objOption, 'RenewSlPrice')"
stack-label :rules="[(val) => !!val || '请填写续费售价']" />
:dense="false"
v-model="objOption.RenewSlPrice"
ref="RenewSlPrice"
class="col-6 q-pr-lg q-pb-lg"
label="续费售价"
@keyup.native="checkPrice(objOption, 'RenewSlPrice')"
:rules="[(val) => !!val || '请填写续费售价']"
/>
</div> </div>
</div> </div>
<div class="row wrap"> <div class="row wrap">
<div class="col-6"> <div class="col-6">
<q-input <q-input filled stack-label :disable="!isHaveCourseHoursEdit"
filled @keyup.native="checkPrice(objOption, 'ClassHours')" reverse-fill-mask v-model="objOption.ClassHours"
stack-label ref="ClassHours" class="col-6 q-pr-lg q-pb-lg" label="课时数量" :rules="[(val) => !!val || '请填写课时信息']" />
:disable="!isHaveCourseHoursEdit" </div>
@keyup.native="checkPrice(objOption, 'ClassHours')" <div class="col-6">
reverse-fill-mask <q-select filled stack-label option-value="CateId" option-label="CateName" v-model="objOption.CateId"
v-model="objOption.ClassHours" ref="CateId" :options="TreeCategoryList" label="所属系列" class="col-6 q-pr-lg q-pb-lg" emit-value map-options
ref="ClassHours" :rules="[(val) => !!val || '请选择课程所属系列']" />
class="col-6 q-pr-lg q-pb-lg" </div>
label="课时数量" </div>
:rules="[(val) => !!val || '请填写课时信息']" <div class="row wrap">
/> <div class="col-6">
<q-select filled stack-label option-value="Id" option-label="Name" v-model="objOption.CourseRate"
ref="CourseRate" :options="courseLevelList" label="课程等级" class="col-6 q-pr-lg q-pb-lg" emit-value map-options />
</div> </div>
<div class="col-6"> <div class="col-6">
<q-select
filled
stack-label
option-value="CateId"
option-label="CateName"
v-model="objOption.CateId"
ref="CateId"
:options="TreeCategoryList"
label="所属系列"
class="col-6 q-pr-lg q-pb-lg"
emit-value
map-options
:rules="[(val) => !!val || '请选择课程所属系列']"
/>
</div> </div>
</div> </div>
<div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div> <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div>
<ext-editor <ext-editor :defaultMsg="objOption.CourseIntro" classStr="col-12" @getEditValue="getEditValue"></ext-editor>
:defaultMsg="objOption.CourseIntro"
classStr="col-12"
@getEditValue="getEditValue"
></ext-editor>
<div class="row wrap"> <div class="row wrap">
<div class="col-9"> <div class="col-9">
<span>上架端口：</span> <span>上架端口：</span>
<template v-for="(item, index) in SaleplatList"> <template v-for="(item, index) in SaleplatList">
<q-checkbox <q-checkbox v-model="choosePlat" :label="item.Name" :val="item.Id" :key="index" />
v-model="choosePlat"
:label="item.Name"
:val="item.Id"
:key="index"
/>
</template> </template>
</div> </div>
<div class="col-3"> <div class="col-3">
<q-toggle <q-toggle style="float: right" size="md" left-label label="K12课程" color="primary" :false-value="0"
style="float: right" :true-value="1" v-model="objOption.IsKCourse" />
size="md"
left-label
label="K12课程"
color="primary"
:false-value="0"
:true-value="1"
v-model="objOption.IsKCourse"
/>
</div> </div>
</div> </div>
<div class="row col-12" v-if="choosePlat.find((e) => e == 4)"> <div class="row col-12" v-if="choosePlat.find((e) => e == 4)">
<span class="q-mb-sm">选择分类：</span> <span class="q-mb-sm">选择分类：</span>
<q-card class="full-width"> <q-card class="full-width">
<q-tree <q-tree class="col-sm-6" :nodes="goodClassify" node-key="Id" label-key="Name" children-key="ChildList"
class="col-sm-6" tick-strategy="strict" :ticked.sync="chooseGoodsClassify" default-expand-all
:nodes="goodClassify" @update:ticked="handleCheckChange" />
node-key="Id"
label-key="Name"
children-key="ChildList"
tick-strategy="strict"
:ticked.sync="chooseGoodsClassify"
default-expand-all
@update:ticked="handleCheckChange"
/>
</q-card> </q-card>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right" class="bg-white"> <q-card-actions align="right" class="bg-white">
<q-btn <q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeCourseForm" />
label="取消" <q-btn label="立即提交" color="accent q-px-md" style="font-weight: 400 !important" :loading="saveCourseLoading"
flat @click="saveCourse" />
color="grey-10"
style="font-weight: 400 !important"
@click="closeCourseForm"
/>
<q-btn
label="立即提交"
color="accent q-px-md"
style="font-weight: 400 !important"
:loading="saveCourseLoading"
@click="saveCourse"
/>
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
<script> <script>
import { import {
queryCourseCategoryTree, queryCourseCategoryTree,
saveCourseInfo, saveCourseInfo,
queryCourseInfo, queryCourseInfo,
querySaleplatList, querySaleplatList,
} from "../../api/course/index"; getCourseRate,
import { getTeacherDropDownList } from "../../api/school/index"; } from "../../api/course/index";
import { UploadSelfFile } from "../../api/common/common"; import {
import extEditor from "../common/ext-editor"; getTeacherDropDownList
import { mapState } from "vuex"; } from "../../api/school/index";
export default { import {
UploadSelfFile
} from "../../api/common/common";
import extEditor from "../common/ext-editor";
import {
mapState
} from "vuex";
export default {
components: { components: {
extEditor, extEditor,
}, },
...@@ -347,6 +183,7 @@ export default { ...@@ -347,6 +183,7 @@ export default {
IsKCourse: 0, //是否是K12课程(1-是) IsKCourse: 0, //是否是K12课程(1-是)
ClassHours: 0, ClassHours: 0,
CategoryList: [], CategoryList: [],
CourseRate:"",//课程等级
}, },
optionTitle: "", optionTitle: "",
defaultArray: [], defaultArray: [],
...@@ -361,12 +198,14 @@ export default { ...@@ -361,12 +198,14 @@ export default {
goodClassify: [], //商品分类列表 goodClassify: [], //商品分类列表
chooseGoodsClassify: [], //选中的商品分类 chooseGoodsClassify: [], //选中的商品分类
modifyClassifyList: [], //修改时返回的分类列表 modifyClassifyList: [], //修改时返回的分类列表
courseLevelList: [], //课程等级列表
}; };
}, },
created() { created() {
this.GetTeacherList(); this.GetTeacherList();
this.getSaleplat(); this.getSaleplat();
this.getGoodsClassify(); this.getGoodsClassify();
this.getCourseRateList();
}, },
computed: mapState({ computed: mapState({
isHaveCourseHoursEdit(state) { isHaveCourseHoursEdit(state) {
...@@ -391,6 +230,14 @@ export default { ...@@ -391,6 +230,14 @@ export default {
this.initObj(); this.initObj();
}, },
methods: { methods: {
//获取课程等级列表
getCourseRateList() {
getCourseRate({}).then(res => {
if (res.Code == 1) {
this.courseLevelList = res.Data;
}
})
},
//获取教师下拉 //获取教师下拉
GetTeacherList() { GetTeacherList() {
getTeacherDropDownList({}).then((res) => { getTeacherDropDownList({}).then((res) => {
...@@ -471,6 +318,7 @@ export default { ...@@ -471,6 +318,7 @@ export default {
this.objOption.RenewSlPrice = res.Data.RenewSlPrice; this.objOption.RenewSlPrice = res.Data.RenewSlPrice;
this.objOption.Saleplat = res.Data.Saleplat; this.objOption.Saleplat = res.Data.Saleplat;
this.objOption.IsKCourse = res.Data.IsKCourse; this.objOption.IsKCourse = res.Data.IsKCourse;
this.objOption.CourseRate=res.Data.CourseRate;
if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) { if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) {
this.ladderPriceList = res.Data.StepPriceList; this.ladderPriceList = res.Data.StepPriceList;
} }
...@@ -510,6 +358,7 @@ export default { ...@@ -510,6 +358,7 @@ export default {
this.objOption.RenewSlPrice = 0; this.objOption.RenewSlPrice = 0;
this.objOption.Saleplat = ""; this.objOption.Saleplat = "";
this.objOption.IsKCourse = 0; this.objOption.IsKCourse = 0;
this.objOption.CourseRate="";
this.getCategorytree(); this.getCategorytree();
} }
}, },
...@@ -635,5 +484,6 @@ export default { ...@@ -635,5 +484,6 @@ export default {
}); });
}, },
}, },
}; };
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment