chenghuan
3518573db2
- 更新退款申请表单，修改运费退回选项的标签和逻辑 - 添加计算属性以支持退款金额和运费的动态计算 - 优化退款申请对话框的样式，提升用户体验 - 更新课程列表中的VIP配置过滤条件，支持新类型的显示
946 lines
29 KiB
Vue
946 lines
29 KiB
Vue
<template>
|
||
<div class="mod-config">
|
||
<el-form
|
||
:inline="true"
|
||
:model="dataForm"
|
||
@keyup.enter.native="getDataList()"
|
||
>
|
||
<el-form-item label="标题">
|
||
<el-input
|
||
v-model="dataForm.title"
|
||
placeholder="请输入标题"
|
||
clearable
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="培训年份">
|
||
<el-input
|
||
v-model="dataForm.year"
|
||
placeholder="请输入年份(YYYY)"
|
||
clearable
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="类型">
|
||
<el-select v-model="dataForm.type" placeholder="请选择">
|
||
<el-option label="线上" value="1">线上</el-option>
|
||
<el-option label="线下" value="2">线下</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="App名称">
|
||
<el-select v-model="dataForm.displayApp" placeholder="请选择">
|
||
<el-option label="众妙之门" value="1">众妙之门</el-option>
|
||
<el-option label="吴门医述" value="2">吴门医述</el-option>
|
||
<el-option label="心灵空间" value="3">心灵空间</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
@click="
|
||
pageIndex = 1;
|
||
getDataList();
|
||
"
|
||
>查询</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
@click="addOrUpdateHandle()"
|
||
>新增</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
:data="dataList"
|
||
border
|
||
v-loading="dataListLoading"
|
||
style="width: 100%"
|
||
@sort-change="handleSortChange"
|
||
>
|
||
<el-table-column
|
||
label="序号"
|
||
type="index"
|
||
align="center"
|
||
width="60">
|
||
</el-table-column>
|
||
<el-table-column label="培训日期" width="180" align="center" sortable="custom" :sort-orders="['ascending', 'descending']">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.trainingDate&&scope.row.endDate">
|
||
{{ scope.row.trainingDate }} - {{ scope.row.endDate }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" width="110" align="center" sortable="custom" :sort-orders="['ascending', 'descending']">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.createTime">
|
||
{{ scope.row.createTime.substring(0, 10) }}
|
||
</span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="标题" align="center" width="160">
|
||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="年份" align="center" prop="year" width="90"></el-table-column>
|
||
<el-table-column label="原价" align="center" width="80">
|
||
<template slot-scope="scope">{{ scope.row.fee }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="vip价格" align="center" width="80">
|
||
<template slot-scope="scope">{{ scope.row.vipFee }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="svip价格" align="center" width="80">
|
||
<template slot-scope="scope">{{ scope.row.svipFee }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="湖粉价格" align="center" width="150">
|
||
<template slot-scope="scope">
|
||
一星湖粉 {{ scope.row.oneHuFee }}<br/>
|
||
二星湖粉 {{ scope.row.twoHuFee }}<br/>
|
||
三星湖粉 {{ scope.row.threeHuFee }}<br/>
|
||
四星湖粉 {{ scope.row.fourHuFee }}<br/>
|
||
五星及以上湖粉 {{ scope.row.fiveHuFee }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="App名称" align="center" width="90">
|
||
<template slot-scope="scope">
|
||
{{ getAppNames(scope.row.displayApp) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="活动类型" align="center" prop="type" width="90">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.type==1">线上</span>
|
||
<span v-else-if="scope.row.type==2">线下</span>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="报名状态" align="center" width="200">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
@change="changeSingupFlag(scope.row)"
|
||
v-model="scope.row.singupFlag"
|
||
active-color="#13ce66"
|
||
inactive-color="#999"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="可报名"
|
||
inactive-text="不可报名">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="可用积分" align="center" prop="displayJf" width="90">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.displayJf==0">否</span>
|
||
<span v-else-if="scope.row.displayJf==1">是</span>
|
||
<span v-else>--</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="支付方式" align="center" prop="displayJf" width="90">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.payType" v-html="getPayTypes(scope.row.payType)"></span>
|
||
<span v-else>-</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="是否上架" align="center" width="200">
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
@change="changeDisplayFlag(scope.row)"
|
||
v-model="scope.row.displayFlag"
|
||
active-color="#13ce66"
|
||
inactive-color="#999"
|
||
:active-value="0"
|
||
:inactive-value="1"
|
||
active-text="上架"
|
||
inactive-text="下架">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column> -->
|
||
|
||
<el-table-column label="排序" align="center" prop="sort" width="90"></el-table-column>
|
||
|
||
<el-table-column
|
||
fixed="right"
|
||
header-align="center"
|
||
align="center"
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
@click="editHandle(scope.row)"
|
||
>修改</el-button
|
||
>
|
||
<router-link :to="{ path: '/training-course-user', query: { id: scope.row.id, title: scope.row.title } }">
|
||
<el-button
|
||
type="text"
|
||
size="small"
|
||
>用户列表</el-button
|
||
>
|
||
</router-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="sizeChangeHandle"
|
||
@current-change="currentChangeHandle"
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
>
|
||
</el-pagination>
|
||
|
||
<!-- 弹窗, 新增 / 修改 -->
|
||
<el-dialog
|
||
:visible.sync="addOrUpdateVisible"
|
||
:title="titlesub"
|
||
class="dialog_box"
|
||
@close="cancleClose"
|
||
>
|
||
<el-form
|
||
:model="addForm"
|
||
ref="addFormRef"
|
||
:rules="addFormRule"
|
||
label-width="100px"
|
||
>
|
||
<el-form-item label="标题" prop="title">
|
||
<el-input v-model="addForm.title" placeholder="请输入标题"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="培训日期" prop="trainingDate">
|
||
<el-date-picker
|
||
class="custom-flatpickr"
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@change="handleDateChange">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="原价" prop="fee">
|
||
<el-input v-model="addForm.fee" placeholder="请输入原价"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="排序" prop="sort">
|
||
<el-input v-model="addForm.sort" placeholder="请输入排序"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="vip类型">
|
||
<el-checkbox-group v-model="vipType" @change="handleCheckedVip" class="checkbox-group">
|
||
<el-checkbox v-for="item in vipList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="vip价格" prop="vipFee">
|
||
<el-input v-model="addForm.vipFee" placeholder="请输入vip价格"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="svip类型">
|
||
<el-checkbox-group v-model="svipType" @change="handleCheckedSvip" class="checkbox-group">
|
||
<el-checkbox v-for="item in svipList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="svip价格" prop="svipFee">
|
||
<el-input v-model="addForm.svipFee" placeholder="请输入svip价格"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="湖粉价格">
|
||
<div class="hufen_block">
|
||
<span>一星湖粉</span>
|
||
<el-input v-model="addForm.oneHuFee" placeholder="请输入湖粉价格(30湖分以上)"></el-input>
|
||
</div>
|
||
<div class="hufen_block">
|
||
<span>二星湖粉</span>
|
||
<el-input v-model="addForm.twoHuFee" placeholder="请输入湖粉价格(60湖分以上)"></el-input>
|
||
</div>
|
||
<div class="hufen_block">
|
||
<span>三星湖粉</span>
|
||
<el-input v-model="addForm.threeHuFee" placeholder="请输入湖粉价格(90湖分以上)"></el-input>
|
||
</div>
|
||
<div class="hufen_block">
|
||
<span>四星湖粉</span>
|
||
<el-input v-model="addForm.fourHuFee" placeholder="请输入湖粉价格(120湖分以上)"></el-input>
|
||
</div>
|
||
<div class="hufen_block">
|
||
<span>五星及以上湖粉</span>
|
||
<el-input v-model="addForm.fiveHuFee" placeholder="请输入湖粉价格(150湖分以上)"></el-input>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="选择App" prop="displayApp">
|
||
<el-checkbox-group v-model="appType" @change="handleCheckedApp" class="checkbox-group">
|
||
<el-checkbox v-for="item in appList" :label="item.type" :key="item.type">{{item.title}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="活动类型" prop="type">
|
||
<el-radio-group v-model="addForm.type">
|
||
<el-radio :label="1">线上</el-radio>
|
||
<el-radio :label="2">线下</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="报名状态" prop="singupFlag">
|
||
<el-switch
|
||
v-model="addForm.singupFlag"
|
||
active-color="#13ce66"
|
||
inactive-color="#999"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
inactive-text="不可报名"
|
||
active-text="可报名"
|
||
>
|
||
</el-switch>
|
||
</el-form-item>
|
||
<el-form-item label="可用积分支付" prop="displayJf">
|
||
<el-radio-group v-model="addForm.displayJf">
|
||
<el-radio :label="1">是</el-radio>
|
||
<el-radio :label="0">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="支付方式" prop="payType">
|
||
<el-checkbox-group v-model="addForm.payType" class="checkbox-group">
|
||
<!-- <el-checkbox :label="1">微信</el-checkbox>
|
||
<el-checkbox :label="2">支付宝</el-checkbox>
|
||
<el-checkbox :label="4">天医币</el-checkbox> -->
|
||
<el-checkbox
|
||
v-for="[value, label] in payTypeList"
|
||
:key="value"
|
||
:label="value"
|
||
>
|
||
{{ label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="是否上架" prop="displayFlag">
|
||
<el-switch
|
||
v-model="addForm.displayFlag"
|
||
active-color="#13ce66"
|
||
inactive-color="#999"
|
||
:active-value="0"
|
||
:inactive-value="1"
|
||
inactive-text="下架"
|
||
active-text="上架"
|
||
>
|
||
</el-switch>
|
||
</el-form-item> -->
|
||
<el-form-item label="上传海报" prop="icon">
|
||
<el-upload
|
||
:limit="1"
|
||
class="el-uploadfeng"
|
||
:action="baseUrl + '/oss/fileoss'"
|
||
list-type="picture-card"
|
||
:on-preview="handlePreview"
|
||
:file-list="fileList"
|
||
:on-success="handleSuccess"
|
||
accept=".jpeg,.jpg,.gif,.png"
|
||
:on-remove="handleRemove"
|
||
>
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<span>支持图片类型：.jpeg,.jpg,.gif,.png</span>
|
||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true">
|
||
<img width="100%" :src="addForm.icon" alt="" />
|
||
</el-dialog>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="cancleClose">取 消</el-button>
|
||
<el-button type="primary" @click="addOrEditCate">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { watch } from "less";
|
||
import global from "../../common/common.vue"; //引入共用组间
|
||
export default {
|
||
data() {
|
||
// 通用校验规则：正数且大于 0
|
||
const validatePositiveNumber = (rule, value, callback) => {
|
||
if (!value) {
|
||
return callback(new Error('原价不能为空'));
|
||
}
|
||
if (!/^\d+(\.\d+)?$/.test(value)) {
|
||
return callback(new Error('必须是正数或小数'));
|
||
}
|
||
if (parseFloat(value) <= 0) {
|
||
return callback(new Error('必须大于 0'));
|
||
}
|
||
callback();
|
||
};
|
||
const validateDisplayApp = (rule, value, callback) => {
|
||
if (!this.appType || this.appType.length == 0) {
|
||
return callback(new Error('请选择应用'));
|
||
}
|
||
callback();
|
||
};
|
||
return {
|
||
baseUrl: global.baseUrl,
|
||
dataForm: {
|
||
title: '',
|
||
type: '', //1线上 2线下
|
||
year: '', //日期
|
||
trainingDate: '',
|
||
singupFlag: '', //1可报名 0不可报名
|
||
displayFlag: '', //0上架 1下架
|
||
displayApp: ''
|
||
},
|
||
addForm: {
|
||
id: "", //新增不传
|
||
title: "", //标题
|
||
type: 1, //1线上 2线下
|
||
icon: '',
|
||
year: '',
|
||
trainingDate: '', //开始日期
|
||
endDate: '', //截止日期
|
||
fee: '',
|
||
vipType: '',
|
||
vipFee: '',
|
||
svipType: '',
|
||
payType: [],
|
||
displayJf: 1,
|
||
svipFee: '',
|
||
oneHuFee: '',
|
||
twoHuFee: '',
|
||
threeHuFee: '',
|
||
fourHuFee: '',
|
||
fiveHuFee: '',
|
||
singupFlag: 1, //1可报名 0不可报名
|
||
displayFlag: 0, //0上架 1下架
|
||
displayApp: '',
|
||
sort: ''
|
||
},
|
||
editId: "",
|
||
addFormRule: {
|
||
title: [
|
||
{
|
||
required: true,
|
||
message: "请输入标题",
|
||
},
|
||
],
|
||
trainingDate: [
|
||
{
|
||
required: true,
|
||
message: "请选择日期",
|
||
trigger: 'change'
|
||
},
|
||
],
|
||
fee: [
|
||
{
|
||
required: true,
|
||
validator: validatePositiveNumber
|
||
},
|
||
],
|
||
payType: [
|
||
{
|
||
required: true,
|
||
message: "请选择支付方式",
|
||
trigger: 'change'
|
||
},
|
||
],
|
||
displayApp: [
|
||
{
|
||
required: true,
|
||
validator: validateDisplayApp,
|
||
trigger: 'change'
|
||
}
|
||
]
|
||
},
|
||
dateRange: [], //日期
|
||
dataList: [],
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
dataListLoading: false,
|
||
addOrUpdateVisible: false,
|
||
titlesub: '新增',
|
||
statusType: 0, //区分新增还是修改
|
||
value: '', //选择日期
|
||
fileList: [], //图片数组
|
||
dialogVisible: false,
|
||
//保存数据
|
||
vipList: [],
|
||
svipList: [],
|
||
appList: [
|
||
{
|
||
type: '1',
|
||
title: '众妙之门'
|
||
},
|
||
{
|
||
type: '2',
|
||
title: '吴门医述'
|
||
},
|
||
{
|
||
type: '3',
|
||
title: '心灵空间'
|
||
}
|
||
],
|
||
payTypeList: new Map([
|
||
[1, '微信'],
|
||
[2, '支付宝'],
|
||
[4, '天医币']
|
||
]),
|
||
//勾选值
|
||
vipType: [],
|
||
svipType: [],
|
||
appType: [],
|
||
//日期排序
|
||
sortParams: {
|
||
date1: '',
|
||
date2: ''
|
||
},
|
||
//疯子读书-0 众妙之门-1 吴门医述-2 心灵空间-3 太湖云医-4
|
||
};
|
||
},
|
||
activated(){
|
||
this.getDataList();
|
||
this.getVipData();
|
||
},
|
||
methods: {
|
||
//app名称展示的逻辑
|
||
getAppNames(displayApp) {
|
||
if (!displayApp) return ''
|
||
return displayApp.split(',')
|
||
.map(code => code.trim())
|
||
.filter(code => code !== '')
|
||
.map(code => {
|
||
const app = this.appList.find(item => item.type === code);
|
||
return app ? app.title : '';
|
||
})
|
||
.join(' ');
|
||
},
|
||
getPayTypes(payType) {
|
||
if (!payType) return ''
|
||
return payType.split(',')
|
||
.map(code => {
|
||
const numericCode = parseInt(code.trim());
|
||
// 从 Map 中获取对应的支付方式名称
|
||
return this.payTypeList.get(numericCode) || '';
|
||
})
|
||
.filter(name => name !== '')
|
||
.join('<br>');
|
||
},
|
||
//排序变化事件
|
||
handleSortChange({ column, prop, order }) {
|
||
// 更新当前列的排序状态
|
||
var name = column.label;
|
||
if(name=='培训日期'){
|
||
this.sortParams.date1 = order
|
||
? (order === 'ascending' ? '2' : '1')
|
||
: null;
|
||
}else{
|
||
this.sortParams.date2 = order
|
||
? (order === 'ascending' ? '2' : '1')
|
||
: null;
|
||
}
|
||
this.getDataList();
|
||
},
|
||
|
||
|
||
//时间选择器
|
||
handleDateChange(val){
|
||
this.addForm.trainingDate = this.formatDate(val[0]);
|
||
this.addForm.endDate = this.formatDate(val[1]);
|
||
},
|
||
//日期格式转换
|
||
formatDate(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
|
||
const day = String(date.getDate()).padStart(2, '0'); // 日期补零
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.dataListLoading = true;
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/trainingClass/trainingClassList"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
current: this.pageIndex,
|
||
limit: this.pageSize,
|
||
trainingDateSort: this.sortParams.date1,
|
||
createTimeSort: this.sortParams.date2,
|
||
title: this.dataForm.title,
|
||
type: this.dataForm.type,
|
||
year: this.dataForm.year,
|
||
singupFlag: this.dataForm.singupFlag,
|
||
//displayFlag: this.dataForm.displayFlag,
|
||
displayApp: this.dataForm.displayApp
|
||
}),
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.dataList = data.trainingClassList.records;
|
||
this.total = data.trainingClassList.total;
|
||
}
|
||
this.dataListLoading = false;
|
||
});
|
||
},
|
||
//设置开关 修改数据
|
||
changeSingupFlag(data){
|
||
this.editCate(data, '1');
|
||
},
|
||
//上下架开关
|
||
changeDisplayFlag(data){
|
||
this.editCate(data, '1');
|
||
},
|
||
|
||
//新增
|
||
addOrUpdateHandle(){
|
||
this.addOrUpdateVisible = true;
|
||
this.statusType = 0; //新增
|
||
this.titlesub = '新增';
|
||
this.addForm = {
|
||
title: "", //标题
|
||
type: 1, //1线上 2线下
|
||
icon: '',
|
||
year: '',
|
||
trainingDate: '',
|
||
endDate: '',
|
||
fee: '',
|
||
vipType: '',
|
||
vipFee: '',
|
||
svipType: '',
|
||
appType: '',
|
||
svipFee: '',
|
||
payType: [],
|
||
displayJf: 1,
|
||
threeHuFee: '',
|
||
fiveHuFee: '',
|
||
singupFlag: 1, //1可报名 0不可报名
|
||
displayFlag: 0,
|
||
sort: ''
|
||
}
|
||
this.fileList = [];
|
||
this.vipType = [];
|
||
this.svipType = [];
|
||
this.appType = [];
|
||
this.$nextTick(() => {
|
||
this.$refs.addFormRef.clearValidate();
|
||
});
|
||
},
|
||
//点击确定
|
||
addOrEditCate(){
|
||
if(this.statusType==0){ //如果是新增
|
||
this.addCate();
|
||
}else if(this.statusType==1){ //如果是修改
|
||
this.editCate(this.addForm, '0');
|
||
}
|
||
},
|
||
//取消
|
||
cancleClose(){
|
||
this.addOrUpdateVisible = false;
|
||
},
|
||
//修改
|
||
editCate(data, type){
|
||
if(type=='0'){
|
||
this.$refs["addFormRef"].validate(valid => {
|
||
if (valid) {
|
||
this.submitData(data);
|
||
}
|
||
})
|
||
}else{
|
||
this.submitData(data);
|
||
}
|
||
},
|
||
//修改
|
||
submitData(data){
|
||
var icon = '';
|
||
var vipType = '';
|
||
var svipType = '';
|
||
var appType = '';
|
||
if(this.fileList&&this.fileList.length>0){
|
||
icon = this.fileList[0].url
|
||
}
|
||
console.log('vipType-submit', this.vipType)
|
||
console.log('svipType-submit', this.svipType)
|
||
console.log('appType-submit', this.appType)
|
||
if(this.vipType&&this.vipType.length>0){
|
||
vipType = String(this.vipType);
|
||
}
|
||
if(this.svipType&&this.svipType.length>0){
|
||
svipType = String(this.svipType);
|
||
}
|
||
if(this.appType&&this.appType.length>0){
|
||
appType = String(this.appType);
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/trainingClass/editTrainingClass"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
id: data.id,
|
||
title: data.title,
|
||
type: data.type,
|
||
year: data.year,
|
||
trainingDate: data.trainingDate,
|
||
endDate: data.endDate,
|
||
singupFlag: data.singupFlag,
|
||
//displayFlag: data.displayFlag,
|
||
icon: icon,
|
||
fee: data.fee,
|
||
vipType: vipType,
|
||
vipFee: data.vipFee,
|
||
svipType: svipType,
|
||
payType: data.payType.join(','),
|
||
displayJf: data.displayJf,
|
||
displayApp: appType,
|
||
svipFee: data.svipFee,
|
||
oneHuFee: data.oneHuFee,
|
||
twoHuFee: data.twoHuFee,
|
||
threeHuFee: data.threeHuFee,
|
||
fourHuFee: data.fourHuFee,
|
||
fiveHuFee: data.fiveHuFee,
|
||
sort: data.sort
|
||
}),
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success"
|
||
});
|
||
this.addOrUpdateVisible = false;
|
||
|
||
this.getDataList();
|
||
}
|
||
});
|
||
},
|
||
// 每页数
|
||
sizeChangeHandle(val) {
|
||
this.pageSize = val;
|
||
this.pageIndex = 1;
|
||
this.getDataList();
|
||
},
|
||
// 当前页
|
||
currentChangeHandle(val) {
|
||
this.pageIndex = val;
|
||
this.getDataList();
|
||
},
|
||
//新增
|
||
addCate(){
|
||
this.$refs["addFormRef"].validate(valid => {
|
||
if (valid) {
|
||
var icon = '';
|
||
var vipType = '';
|
||
var svipType = '';
|
||
var appType = '';
|
||
if(this.fileList&&this.fileList.length>0){
|
||
icon = this.fileList[0].url
|
||
}
|
||
if(this.vipType&&this.vipType.length>0){
|
||
vipType = String(this.vipType);
|
||
}
|
||
if(this.svipType&&this.svipType.length>0){
|
||
svipType = String(this.svipType);
|
||
}
|
||
if(this.appType&&this.appType.length>0){
|
||
appType = String(this.appType);
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/trainingClass/addTrainingClass"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
id: this.addForm.id,
|
||
title: this.addForm.title,
|
||
type: String(this.addForm.type),
|
||
trainingDate: this.addForm.trainingDate,
|
||
endDate: this.addForm.endDate,
|
||
singupFlag: String(this.addForm.singupFlag),
|
||
//displayFlag: String(this.addForm.displayFlag),
|
||
icon: icon,
|
||
fee: this.addForm.fee,
|
||
vipType: vipType,
|
||
vipFee: this.addForm.vipFee,
|
||
svipType: svipType,
|
||
displayApp: appType,
|
||
payType: this.addForm.payType.join(','),
|
||
displayJf: this.addForm.displayJf,
|
||
svipFee: this.addForm.svipFee,
|
||
oneHuFee: this.addForm.oneHuFee,
|
||
twoHuFee: this.addForm.twoHuFee,
|
||
threeHuFee: this.addForm.threeHuFee,
|
||
fourHuFee: this.addForm.fourHuFee,
|
||
fiveHuFee: this.addForm.fiveHuFee,
|
||
sort: this.addForm.sort
|
||
}),
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success"
|
||
});
|
||
this.addOrUpdateVisible = false;
|
||
|
||
this.getDataList();
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
//操作
|
||
//点击修改
|
||
editHandle(data){
|
||
this.fileList = [];
|
||
this.addOrUpdateVisible = true;
|
||
this.titlesub = '修改';
|
||
this.statusType = 1; //修改
|
||
|
||
this.addForm.id = data.id;
|
||
this.addForm.title = data.title;
|
||
this.addForm.type = Number(data.type);
|
||
this.addForm.year = data.year;
|
||
this.addForm.trainingDate = data.trainingDate;
|
||
this.addForm.endDate = data.endDate;
|
||
this.addForm.singupFlag = Number(data.singupFlag);
|
||
//this.addForm.displayFlag = Number(data.displayFlag);
|
||
this.addForm.icon = data.icon;
|
||
//图片赋值
|
||
if(data.icon){
|
||
this.fileList.push({
|
||
url: data.icon
|
||
});
|
||
}
|
||
this.addForm.fee = data.fee;
|
||
this.addForm.vipFee = data.vipFee;
|
||
if(data.vipType){
|
||
this.vipType = data.vipType.split(',').map(item => parseInt(item, 10));
|
||
}else{
|
||
this.vipType = [];
|
||
}
|
||
if(data.svipType){
|
||
this.svipType = data.svipType.split(',').map(item => parseInt(item, 10));
|
||
}else{
|
||
this.svipType = [];
|
||
}
|
||
if(data.displayApp){
|
||
this.appType = data.displayApp.split(',').map(item => item.trim());
|
||
}else{
|
||
this.appType = [];
|
||
}
|
||
|
||
this.addForm.payType = data.payType.split(',').map(Number);
|
||
this.addForm.displayJf = data.displayJf;
|
||
|
||
this.addForm.svipFee = data.svipFee;
|
||
this.addForm.oneHuFee = data.oneHuFee;
|
||
this.addForm.twoHuFee = data.twoHuFee;
|
||
this.addForm.threeHuFee = data.threeHuFee;
|
||
this.addForm.fourHuFee = data.fourHuFee;
|
||
this.addForm.fiveHuFee = data.fiveHuFee;
|
||
this.addForm.sort = data.sort;
|
||
this.$nextTick(() => {
|
||
this.$refs.addFormRef.clearValidate();
|
||
});
|
||
},
|
||
//上传图片
|
||
handlePreview(file) {
|
||
this.fileList = [];
|
||
this.addForm.icon = file.url;
|
||
this.fileList.push({
|
||
url: file.url
|
||
});
|
||
this.dialogVisible = true;
|
||
},
|
||
//图片上传成功
|
||
handleSuccess(res, file) {
|
||
if (res.msg == "success") {
|
||
this.fileList.push({
|
||
url: res.url
|
||
});
|
||
this.$message.success("图片上传成功");
|
||
} else {
|
||
this.$message.error("图片上传失败");
|
||
}
|
||
},
|
||
//图片删除操作
|
||
handleRemove(file, fileList) {
|
||
this.fileList = [];
|
||
},
|
||
|
||
//获取vip数据
|
||
getVipData(){
|
||
this.$http({
|
||
url: this.$http.adornUrl("/master/trainingClass/getVipBuyConfigList"),
|
||
method: "post",
|
||
data: this.$http.adornData({}),
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.vipList = data.vipBuyConfigList.filter(item => item.type >= 4 && item.type <= 10);
|
||
this.svipList = data.vipBuyConfigList.filter(item => item.type === 1 || item.type === 2);
|
||
}
|
||
});
|
||
},
|
||
//勾选vip
|
||
handleCheckedVip(value){
|
||
console.log('vip的值', value)
|
||
},
|
||
//勾选svip
|
||
handleCheckedSvip(value){
|
||
console.log('svip的值', value)
|
||
},
|
||
//勾选app
|
||
handleCheckedApp(value){
|
||
console.log('app的值', value)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" >
|
||
::v-deep.custom-height {
|
||
height: 370px;
|
||
}
|
||
.avatar-uploader {
|
||
height: 1px;
|
||
}
|
||
.general_editor {
|
||
height: 420px;
|
||
width: 1060px !important;
|
||
}
|
||
.editor_form {
|
||
height: 500px;
|
||
}
|
||
|
||
.dialog_box {
|
||
.el-form-item__content {
|
||
width: calc(100% - 120px) !important;
|
||
}
|
||
.form_item {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.el-form-item {
|
||
width: 290px;
|
||
}
|
||
}
|
||
}
|
||
.checkbox-group .el-checkbox{
|
||
margin-left: 0;
|
||
margin-right: 20px;
|
||
|
||
.el-checkbox__label{
|
||
padding-left: 6px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
.hufen_block{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span{
|
||
width: 120px;
|
||
display: inline-block;
|
||
}
|
||
.el-input{
|
||
width: 90%;
|
||
line-height: 34px;
|
||
}
|
||
.el-input__inner{
|
||
width: 220px;
|
||
height: 30px;
|
||
line-height: 34px;
|
||
padding: 0 8px;
|
||
}
|
||
.el-input__inner::placeholder {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.custom-flatpickr .el-range-input{
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|