Commit c7d568bc authored by Mac's avatar Mac

日语培训

parent 6f28e05e
import request from '../../utils/request'
/**
* 获取日语培训列表
*
*/
export function getClassPruductList(data) {
return request({
url: '/order/GetClassPruductList',
method: 'post',
data
})
}
/**
* 获取订单来源 枚举
*
*/
export function getOrderSourceEnumList(data) {
return request({
url: '/order/GetOrderSourceEnumList',
method: 'post',
data
})
}
/**
* 新增 修改订单
*
*/
export function setClassOrder(data) {
return request({
url: '/order/SetClassOrder',
method: 'post',
data
})
}
<template>
<div class="page-body japaneseTrain">
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" option-value="SId" option-label="SName"
v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
</div>
<div class="col-3">
<q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
@clear="resetSearch" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" option-value="TId" option-label="TeacherName"
v-model="msg.TeacherName" :options="TeacherList" emit-value map-options label="带班老师" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
v-model="msg.CourseName" :options="ClassList" emit-value map-options label="学习课程" />
</div>
<div class="col-3">
<div class="col-3 Sysuser_Date">
<q-field filled>
 <template v-slot:control>
<el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
  range-separator="至"  start-placeholder="开学日期"  end-placeholder="结束日期">
  </el-date-picker>       
</template>
</q-field>
</div>
</div>
</div>
</div>
<div class="page-content" >
<div style="width: 100%;display: flex;justify-content: space-between">
<span style="font-size: 20px;font-weight: 400; ">日语培训产品列表</span>
<span><q-toggle v-model="msg.Q_CanApply" label="只看有余位" class="q-mb-md" false-value="0" true-value="1" @change="resetSearch"/></span>
</div>
<div class="productQueryList" v-loading='loading'>
<ul v-if="data.length!=0">
<li v-for="(item,index) in data" :key="index">
<div class="dline">
<div class="d1">
<div class="di-title">{{item.ClassName}}</div>
<div class="di-c"><img src="../../assets/images/administration/kezname.png" alt="" style="width: 14px;height: 14px;margin-right: 5px;">{{item.CourseName}}</div>
<div class="di-c"><img src="../../assets/images/administration/period.png" alt="" style="width: 14px;height: 14px;margin-right: 5px;">{{item.ClassHours?item.ClassHours:'0'}}课时</div>
</div>
<div class="d2">
<div> <span class="d2-n">带课老师</span><img :src="item.TeacherHead" alt="" style="width: 26px;height: 26px;border-radius: 4px;margin-right: 5px;color: #2961FE">{{item.TeacherName}}</div>
<div><span class="d2-n">上课教室</span>{{item.RoomName}}</div>
<div><span class="d2-n">上课时间</span><span style="text-decoration:underline;color:#111111;">{{item.ClassStyleName}}</span>
<q-popup-proxy>
<q-banner>
<div class="price-popup" style="padding: 10px">
<div class="popup-top">
<span style="color:#2D2D2D;font-size: 14px;font-weight: bold">上课时间</span>
<div style="background: #EEEEEF;font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;justify-content: space-around;margin-top: 20px">
<span>周末</span>
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
</div>
<div style="font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;justify-content: space-around;border-bottom: 1px solid rgba(138, 138, 138, 0.09);margin-bottom: 20px">
<span v-for="(j,k) in item.weeks" :key="k" style="width: 24.5px;">
<img src="../../assets/images/administration/gou.png" alt="" style="width: 16px;height: 12px" v-if="j.select==true">
</span>
</div>
<span style="color:#2D2D2D;font-size: 14px;font-weight: bold;">课程安排</span>
<div style="width: 454px;height: 40px;background: #EEEEEF;font-size: 12px;color: #2D2D2D;font-weight: 600;margin-top: 20px;display: flex;align-items: center">
<div style="width: 50%;padding-left: 20px">
课节
</div>
<div>时间</div>
</div>
<div style="font-size: 12px;color: #2D2D2D;font-weight: bold;height: 40px;width: 454px;line-height: 40px;display: flex;border-bottom: 1px solid rgba(138, 138, 138, 0.09);"
v-for="(zx,zi) in item.ClassTimeList" :key="zi"
>
<div style="width: 50%;padding-left: 20px">
第{{zi+1}}节
</div>
<div>{{zx.StartTime}}-{{zx.EndTime}}</div>
</div>
</div>
</div>
</q-banner>
</q-popup-proxy>
</div>
</div>
<div class="d3">
<div style="font-size: 24px;margin: 0">招生信息</div>
<div><span class="d2-n">截止报名时间</span><span class="d3-s">{{item.OpenTime}}</span></div>
<div><span class="d2-n">开始上课时间</span><span class="d3-s">{{item.EndOrderTime}}</span></div>
</div>
<div class="d4">
<div style="font-size: 24px;margin: 0">价格信息</div>
<div><span class="d2-n">原价</span><span>{{item.OriginalPrice}}</span></div>
<div><span class="d2-n">售价</span><span style="color:#2961FE;">{{item.SellPrice}}</span></div>
<div v-if="item.IsStepPrice==1 && item.ClassStepPriceList.length>0">
更多优惠价格
<q-popup-proxy>
<q-banner>
<div class="price-popup">
<div class="price-popup-item" v-for="(x,index2) in item.ClassStepPriceList" :key="index2" style="margin: 5px 0">
<span style="color: #2D2D2D;font-weight: bold">{{x.PersionNum}}人报名<span style="color:#2860FB;margin-left: 15px">{{x.PersionPrice}}</span></span>
</div>
</div>
</q-banner>
</q-popup-proxy>
</div>
</div>
<div class="d5">
<div style="font-size: 24px;margin: 0">名额信息</div>
<div><span class="d2-n">计划招生人数</span><span>{{item.ClassPersion}}人</span></div>
<div><span class="d2-n">剩余招生名额</span><span style="color:#0000FF;">{{item.SurplusNum}}人</span></div>
</div>
<div class="d7">
<q-btn color="primary" label="立即下单" v-if="item.IsCanApply==1" @click="placeAnorder(item)"/>
<div v-if="item.IsCanApply==0">
<span v-if="item.SurplusNum==0">报名已满</span>
<span v-if="getEXPDate(item.OpenTime)==true">已过期</span>
</div>
</div>
</div>
<div class="d6">
<p>OP备注:</p>
<p :title="item.OutRemark">{{item.OutRemark}}</p>
<div class="progress">
<q-linear-progress size="5px" color="#3FC4FF" :value="(item.OrderStudentCount/item.ClassPersion)" />
</div>
</div>
</li>
</ul>
</div>
<q-dialog v-model="dialog" maximized full-height seamless position="right" >
<q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
<div class="drawerTop">
<div style="display:flex;align-items:center;margin:20px 0 0 20px;">
<span class="drawer_Span">学员报名</span>
</div>
</div>
<div style="padding:20px 15px;">
<q-input filled stack-label maxlength="100" :dense="false" v-model="enrollMsg.GuestNum" type="number" @input="peopleNumber"
class="col-12" label="人数" :rules="[val => !!val || '请填写人数']" />
<q-input filled stack-label :dense="false" v-model="enrollMsg.Unit_Price" :disable="UPrice==true?false:true" @blur="priceNumber"
class="col-12" label="成交单价" :rules="[val => !!val || '请填成交单价']" />
<q-toggle v-model="UPrice" label="高于定价收生" class="q-mb-md" @change="resetSearch"/>
<q-select standout="bg-primary text-white" option-value="Id" option-label="Name"
v-model="enrollMsg.OrderSource" :options="SourceEnumList" emit-value map-options label="客人来源" />
<q-input filled stack-label :dense="false" v-model="enrollMsg.SaleRemark" style="margin-top: 20px"
class="col-12" label="备注" />
<div style="margin:30px 10px 0 0;">
<q-btn class="q-mr-md" label="取消" @click="dialog=false" />
<q-btn color="accent" class="q-mr-md" label="保存" @click="saveSatMsg()" />
</div>
</div>
</q-card>
<div class="dialog-out-close" @click="dialog=false"
style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
<q-icon name="iconfont icon-jujue1" size="26px" />
</div>
</q-dialog>
</div>
</div>
</template>
<script>
import {
getClassPruductList,//获取日语培训列表
getOrderSourceEnumList,//获取订单来源 枚举
setClassOrder,//新增 修改订单
} from '../../api/sale/sale';
import {
getSchoolDropdown, //获取校区列表
getTeacherDropDownList,
} from '../../api/school/index';
import {
queryCourseDropdownList,
} from '../../api/course/index'
export default {
components: {
},
data() {
return {
dialog:false,
data: [],
loading: false,
dateList:[],//开学时间
msg: {
pageIndex: 1,
pageSize: 12,
ClassName: '', //班级名称
StartTime:'',//开始时间
EndTime:'',//结束时间
School_Id: 0, //关联校区
CouseId:0,//课程id
Teacher_Id:0,//教师id
Q_CanApply:"0",//是否可以报名 1是
},
enrollMsg:{
ClassId:0,
GuestNum:1,
Unit_Price:0,//成交单价
PreferPrice:0,//应收总额
OrderSource:0,//客人来源 枚举
SaleRemark:'',//备注
},
//关联校区列表
schoolList: [],
pageCount: 0,
selectitem:{},
UPrice:false,
UnitPrice:0,//用于可以输入单价的验证
SourceEnumList:[],
ClassList: [], //关联课程下拉数据
TeacherList: [], //关联教师下拉数据
}
},
created() {
this.getSchool();
this.getOrderSEList()
this.CourseList();
this.GetTeacherList();
},
mounted() {
this.getList();
},
methods: {
//获取校区列表
getSchool() {
getSchoolDropdown({}).then(res => {
if (res.Code == 1) {
var tempArray = res.Data;
if (!tempArray) {
tempArray = [];
}
tempArray.unshift({
SId: 0,
SName: "不限"
})
this.schoolList = tempArray;
}
})
},
getOrderSEList(){
getOrderSourceEnumList({}).then(res => {
if (res.Code == 1) {
var tempArray = res.Data;
this.SourceEnumList = tempArray;
this.enrollMsg.OrderSource = tempArray[0].Id;
}
})
},
getEXPDate(time){
var str = time.replace(/年/g,"/").replace(/月/g,"/").replace(/日/g,"");
var date = new Date(str ).getTime();
var now = new Date().getTime()+86400;
if(date < now) {
return true //过期
} else {
return false //没过期
}
},
//获取课程
CourseList() {
queryCourseDropdownList({}).then(res => {
if (res.Code == 1) {
this.ClassList = res.Data;
}
})
},
//获取教师下拉
GetTeacherList() {
getTeacherDropDownList({}).then(res => {
if (res.Code == 1) {
this.TeacherList = res.Data;
}
})
},
//翻页
changePage(val) {
this.msg.pageIndex = val;
this.getList()
},
resetSearch() {
this.msg.pageIndex = 1;
this.getList()
},
//获取菜单分页列表
getList() {
if (this.dateList && this.dateList.length > 0) {
this.msg.StartTime = this.dateList[0];
this.msg.EndTime = this.dateList[1];
} else {
this.msg.StartTime = '';
this.msg.EndTime = '';
}
this.loading = true;
getClassPruductList(this.msg).then(res => {
this.loading = false
this.data = res.Data.PageData
this.pageCount = res.Data.PageCount;
this.data.forEach(x=>{
if(x.ClassStyle==1){
let weekList = [//定义一个数组
{id:7,select:false},
{id:1,select:false},
{id:2,select:false},
{id:3,select:false},
{id:4,select:false},
{id:5,select:false},
{id:6,select:false},
];
weekList.forEach(j=>{
x.ClassPlanList.forEach(z=>{
if(j.id == z.WeekDay){
j.select=true
}
})
})
x.weeks = weekList
}
})
}).catch(() => {
this.loading = false
})
},
getSortFun(order, sortBy){
var ordAlpah = (order == 'asc') ? '>' : '<';
var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
return sortFun;
},
countPrice(num){
let array =[] ;
if(this.selectitem.ClassStepPriceList && this.selectitem.ClassStepPriceList.length){
this.selectitem.ClassStepPriceList.forEach(x=>{
let obj ={
PersionNum:x.PersionNum,
PersionPrice:x.PersionPrice,
}
array.push(obj)
})
let fz =false
let a =0;
array.forEach(x=>{
if(x.PersionNum==num){
fz=true;
a = x.PersionPrice
}
})
if(fz==false){
array.push({PersionNum:num})
array.sort(this.getSortFun('asc', 'PersionNum'));//升序排序
var idx;
for(var i=0;i<array.length;i++){
if(array[i].PersionNum == num){
idx = i;
}
}
idx = Math.max(0,idx - 1);
if(array[idx].PersionPrice){
return array[idx].PersionPrice
}else {
return this.selectitem.SellPrice
}
}else {
return a
}
}else {
return this.selectitem.SellPrice
}
},
placeAnorder(item){
this.selectitem= item;
this.dialog = true;
this.enrollMsg.ClassId = item.ClassId;
this.enrollMsg.Unit_Price = this.countPrice(this.enrollMsg.GuestNum)
this.UnitPrice = this.enrollMsg.Unit_Price
},
peopleNumber(val){
if(val>this.selectitem.SurplusNum){
this.enrollMsg.GuestNum=this.selectitem.SurplusNum
}
if(val==''){
this.enrollMsg.GuestNum=1
}
this.enrollMsg.Unit_Price = this.countPrice(this.enrollMsg.GuestNum)
this.UnitPrice = this.enrollMsg.Unit_Price
},
priceNumber(val){//大于的时候赋值
if(this.enrollMsg.Unit_Price<this.UnitPrice ){
this.enrollMsg.Unit_Price = this.UnitPrice
}
},
saveSatMsg(){//立即报名
this.enrollMsg.PreferPrice = this.enrollMsg.GuestNum*this.enrollMsg.Unit_Price
setClassOrder(this.enrollMsg).then(res => {
if (res.Code == 1) {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '报名成功!',
position: 'top'
})
this.getList()
this.dialog = false
}
}).catch(() => {
})
}
}
}
</script>
<style >
li{
list-style-type:none ;
}
.japaneseTrain ul{padding: 0px}
.japaneseTrain li{border: 1px solid #E2E2E2;border-radius: 4px;margin-top:15px}
.japaneseTrain li .dline{display: table;width: 100%;display: flex;flex-direction: row}
.japaneseTrain li .d1{width: 18%;padding:20px;border-right: 1px dashed #dcdfe6;}
.japaneseTrain li .d2{width: 16%;padding:20px;border-right: 1px dashed #dcdfe6;}
.japaneseTrain li .d3{width: 16%;padding:20px;border-right: 1px dashed #dcdfe6;}
.japaneseTrain li .d4{width: 16%;padding:20px;border-right: 1px dashed #dcdfe6;}
.japaneseTrain li .d5{width: 16%;padding:20px;border-right: 1px dashed #dcdfe6;}
.japaneseTrain li .d7{flex:1;width: 1px;display: flex;flex-direction: row;align-items: center;justify-content: center}
.japaneseTrain li .d1 .di-title{font-size: 16px;color: #2961FE;font-weight: 500}
.japaneseTrain li .d1 .di-c{font-size: 14px;display: flex;align-items: center;line-height: 28px;font-weight: bold;color: #111111}
.japaneseTrain li .d6{padding: 20px;width: 100%;height: inherit;border-top:1px solid #E5E5E5;position: relative}
.japaneseTrain li .d6 .progress{width: 100%;height: 5px;position: absolute;left: 0;bottom: 0}
.japaneseTrain li .d2 div{margin: 10px 0;font-size: 14px;color: #111111;font-weight: bold}
.japaneseTrain li .d2-n{font-size: 14px;color: #999999;font-weight: bold;margin-right: 20px}
.japaneseTrain li .d3 .d3-s{color: #3FC4FF}
.japaneseTrain li .d3 div{margin: 10px 0 ;font-size: 14px;font-weight: 600}
.japaneseTrain li .d4 div{font-size: 14px;color: #111111;margin: 10px 0 ;font-weight: 600}
.japaneseTrain li .d5 div{font-size: 14px;color: #111111;margin: 10px 0 ;font-weight: 600}
.japaneseTrain .price-popup{border-radius: 4px;}
</style>
...@@ -331,6 +331,11 @@ const routes = [{ ...@@ -331,6 +331,11 @@ const routes = [{
component: () => component: () =>
import("pages/administration/updateProcessDesign.vue") import("pages/administration/updateProcessDesign.vue")
}, },
{
path: "/sale/japaneseTrain", //日语培训列表
component: () =>
import("pages/sale/japaneseTrain.vue")
},
{ {
path: "/test", //API测试 path: "/test", //API测试
component: () => component: () =>
......
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