|
@@ -1,96 +1,163 @@
|
|
|
<template>
|
|
|
<div class="m-container">
|
|
|
- <el-page-header
|
|
|
- @back="goback"
|
|
|
- style="padding-bottom: 30px"
|
|
|
- content="创建学员缴费"
|
|
|
- >
|
|
|
- </el-page-header>
|
|
|
- <div class="m-core">
|
|
|
- <el-form :inline="true" :model="form">
|
|
|
- <div class="payTitle">
|
|
|
- <div class="squrt"></div>
|
|
|
- <p>基础信息设置</p>
|
|
|
- </div>
|
|
|
- <el-form-item
|
|
|
- :rules="[
|
|
|
- { required: false, message: '请选择缴费时间', trigger: 'blur' },
|
|
|
- ]"
|
|
|
- >
|
|
|
- <template slot="label">
|
|
|
- <p style="position: relative">
|
|
|
- 缴费时间
|
|
|
- <el-tooltip placement="top" popper-class="mTooltip">
|
|
|
- <div slot="content">在改时间段内学员才可缴费</div>
|
|
|
- <i
|
|
|
- class="el-icon-question"
|
|
|
- style="
|
|
|
- font-size: 18px;
|
|
|
- color: #f56c6c;
|
|
|
- position: relative;
|
|
|
- top: 2px;
|
|
|
- "
|
|
|
- ></i>
|
|
|
- </el-tooltip>
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- <el-date-picker
|
|
|
- v-model="form.paymentDate"
|
|
|
- type="daterange"
|
|
|
- style="width: 280px"
|
|
|
- :picker-options="{ firstDayOfWeek: 1 }"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="备注"
|
|
|
- prop="memo"
|
|
|
- :rules="[{ required: false, message: '请输入备注', trigger: 'blur' }]"
|
|
|
+ <div class="payInfoWrap">
|
|
|
+ <div class="left">
|
|
|
+ <el-page-header
|
|
|
+ @back="goback"
|
|
|
+ style="padding-bottom: 30px"
|
|
|
+ content="创建学员缴费"
|
|
|
>
|
|
|
- <template slot="label">
|
|
|
- <p style="position: relative">
|
|
|
- 备注
|
|
|
- <el-tooltip placement="top" popper-class="mTooltip">
|
|
|
- <div slot="content">本次缴费的内容描述</div>
|
|
|
- <i
|
|
|
- class="el-icon-question"
|
|
|
- style="
|
|
|
- font-size: 18px;
|
|
|
- color: #f56c6c;
|
|
|
- position: relative;
|
|
|
- top: 2px;
|
|
|
- "
|
|
|
- ></i>
|
|
|
- </el-tooltip>
|
|
|
- </p>
|
|
|
- </template>
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- style="width: 280px"
|
|
|
- :rows="2"
|
|
|
- v-model="form.memo"
|
|
|
- maxlength="50"
|
|
|
- show-word-limit
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div class="payTitle">
|
|
|
- <div class="squrt"></div>
|
|
|
- <p>基础信息设置</p>
|
|
|
+ </el-page-header>
|
|
|
+ <div class="m-core">
|
|
|
+ <el-form :inline="true" :model="form" label-width="120px">
|
|
|
+ <div class="payTitle">
|
|
|
+ <div class="squrt"></div>
|
|
|
+ <p>基础信息设置</p>
|
|
|
+ </div>
|
|
|
+ <el-form-item
|
|
|
+ :rules="[
|
|
|
+ { required: false, message: '请选择缴费时间', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template slot="label">
|
|
|
+ <p style="position: relative">
|
|
|
+ 缴费时间
|
|
|
+ <el-tooltip placement="top" popper-class="mTooltip">
|
|
|
+ <div slot="content">在改时间段内学员才可缴费</div>
|
|
|
+ <i
|
|
|
+ class="el-icon-question"
|
|
|
+ style="
|
|
|
+ font-size: 18px;
|
|
|
+ color: #f56c6c;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.paymentDate"
|
|
|
+ type="daterange"
|
|
|
+ style="width: 280px"
|
|
|
+ :picker-options="{ firstDayOfWeek: 1 }"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item
|
|
|
+ label="备注"
|
|
|
+ prop="memo"
|
|
|
+ :rules="[
|
|
|
+ { required: false, message: '请输入备注', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template slot="label">
|
|
|
+ <p style="position: relative">
|
|
|
+ 备注
|
|
|
+ <el-tooltip placement="top" popper-class="mTooltip">
|
|
|
+ <div slot="content">本次缴费的内容描述</div>
|
|
|
+ <i
|
|
|
+ class="el-icon-question"
|
|
|
+ style="
|
|
|
+ font-size: 18px;
|
|
|
+ color: #f56c6c;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ "
|
|
|
+ ></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ style="width: 280px"
|
|
|
+ :rows="2"
|
|
|
+ v-model="form.memo"
|
|
|
+ maxlength="50"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <div class="payTitle">
|
|
|
+ <div class="squrt"></div>
|
|
|
+ <p>基础项目配置</p>
|
|
|
+ </div>
|
|
|
+ <div class="checkWrap">
|
|
|
+ <div
|
|
|
+ class="checkBtn"
|
|
|
+ :class="teamCourse ? 'active' : ''"
|
|
|
+ @click.prevent="teamCourse = !teamCourse"
|
|
|
+ >
|
|
|
+ <p>乐团课</p>
|
|
|
+ <el-checkbox v-model="teamCourse"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="checkBtn"
|
|
|
+ :class="member ? 'active' : ''"
|
|
|
+ @click.prevent="member = !member"
|
|
|
+ >
|
|
|
+ <p>团练宝</p>
|
|
|
+ <el-checkbox v-model="member"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="checkBtn"
|
|
|
+ :class="leBao ? 'active' : ''"
|
|
|
+ @click.prevent="leBao = !leBao"
|
|
|
+ >
|
|
|
+ <p>乐保</p>
|
|
|
+ <el-checkbox v-model="leBao"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="checkBtn"
|
|
|
+ :class="teamActive ? 'active' : ''"
|
|
|
+ @click.prevent="teamActive = !teamActive"
|
|
|
+ >
|
|
|
+ <p>乐团活动</p>
|
|
|
+ <el-checkbox v-model="teamActive"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="coreList">
|
|
|
+ <payTeamCourse :form="form" v-if="teamCourse"/>
|
|
|
+ <payMember :form="form" v-if="member"/>
|
|
|
+ <payLeBao :form="form" v-if="leBao"/>
|
|
|
+ <payTeamActive :form="form" v-if="teamActive"/>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div v-if="!teamCourse&&!member&&!leBao&&!teamActive">
|
|
|
+ <empty desc="暂无缴费项目配置" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import payTeamCourse from "../modals/payTeamCourse";
|
|
|
+import payMember from "../modals/payMember";
|
|
|
+import payLeBao from '../modals/payLeBao'
|
|
|
+import payTeamActive from '../modals/payTeamActive'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ payTeamCourse,
|
|
|
+ payMember,
|
|
|
+ payLeBao,
|
|
|
+ payTeamActive
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
memo: "",
|
|
|
+ eclass: [{}],
|
|
|
},
|
|
|
+ checkList: [],
|
|
|
+ teamCourse: false,
|
|
|
+ member: false,
|
|
|
+ teamActive: false,
|
|
|
+ leBao: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {},
|
|
@@ -118,28 +185,89 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ teamCourse(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.payTitle {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- color: #1a1a1a;
|
|
|
- height: 25px;
|
|
|
- margin-bottom: 15px;
|
|
|
- p {
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
- .squrt {
|
|
|
- width: 4px;
|
|
|
- height: 16px;
|
|
|
- background: var(--color-primary);
|
|
|
- margin-right: 5px;
|
|
|
- position: relative;
|
|
|
- top: -1px;
|
|
|
+.payInfoWrap {
|
|
|
+ .left {
|
|
|
+ /deep/.el-checkbox {
|
|
|
+ padding: 8px 10px 7px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ /deep/.el-checkbox .el-checkbox__inner {
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ &:after {
|
|
|
+ height: 8px;
|
|
|
+ left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-checkbox__inner:hover {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ /deep/.el-checkbox.is-checked {
|
|
|
+ border-color: #fff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .payTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+ height: 25px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ p {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .squrt {
|
|
|
+ width: 4px;
|
|
|
+ height: 16px;
|
|
|
+ background: var(--color-primary);
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .checkWrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .checkBtn.active {
|
|
|
+ background-color: var(--color-primary);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .checkBtn {
|
|
|
+ transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
|
|
|
+ background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
|
|
+ transition-property: border-color, background-color;
|
|
|
+ transition-duration: 0.25s, 0.25s;
|
|
|
+ transition-timing-function: cubic-bezier(0.71, -0.46, 0.29, 1.46),
|
|
|
+ cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
|
|
+ transition-delay: 0s, 0s;
|
|
|
+ margin-right: 12px;
|
|
|
+ padding-left: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border-radius: 6px;
|
|
|
+ height: 41px;
|
|
|
+ p {
|
|
|
+ height: 41px;
|
|
|
+ line-height: 41px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|