|
@@ -7,13 +7,64 @@
|
|
|
>
|
|
|
</el-page-header>
|
|
|
<div class="m-core">
|
|
|
- <el-form >
|
|
|
- <el-alert
|
|
|
- style="margin: 20px 0"
|
|
|
- title="缴费基本信息"
|
|
|
- :closable="false"
|
|
|
- type="info"
|
|
|
- ></el-alert>
|
|
|
+ <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: 400px"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <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" v-model="form.memo"></el-input>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -21,7 +72,11 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ memo: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
@@ -50,3 +105,26 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.payTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a1a1a;
|
|
|
+ height: 25px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .squrt {
|
|
|
+ width: 4px;
|
|
|
+ height: 16px;
|
|
|
+ background: #14928a;
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|