新增缴费缴费周期修改

src/views/resetTeaming/modals/extra-class.vue

@@ -130,7 +130,6 @@
               size="small"
               style="width: 90%!important;"
               class="number-input"
-              :disabled="!isUserType"
               v-model="list.form[scope.$index].courseOriginalPrice"
               :controls="false"
               :precision="2"
@@ -146,7 +145,12 @@
         key="close"
         width="60">
         <template slot-scope="scope">
-          <i v-if="form.length > 1" @click="$listeners.remove && $listeners.remove(scope.$index)" class="el-icon-circle-close"></i>
+          <i
+            v-if="form.length > 1"
+            @click="$listeners.remove && $listeners.remove(scope.$index)"
+            class="el-icon-circle-close"
+            style="margin-bottom: 24px;cursor: pointer;"
+          ></i>
         </template>
       </el-table-column>
     </el-table>

src/views/resetTeaming/modals/payment-cycle.vue

@@ -17,6 +17,7 @@
         :controls="false"
         :precision="2"
         :min="0"
+        @change="paymentAmountChange"
         :disabled="(isUserType || (isCommon && isUserType)) && isDisabled"
         placeholder="请输入缴费金额"
       />
@@ -76,6 +77,11 @@ export default {
       paymentPatternTypeOptions: objectToOptions(paymentPatternType),
     }
   },
+  methods: {
+    paymentAmountChange() {
+      this.$set(this.form, 'changeed', true)
+    }
+  }
 }
 </script>
 <style lang="less" scoped>

src/views/resetTeaming/modals/user-pay-form.vue

@@ -48,11 +48,35 @@
                 class="alert"
                 type="info">
       </el-alert>
-      <paymentCycle ref="cycle"
-                    :isUserType="isUserType"
-                    :form.sync="cycle"
-                    :isCommon="isCommon"
-                    :isDisabled="true" />
+      <el-collapse :value="collapse" @change="collapseChange" >
+        <el-collapse-item
+          v-for="(item, index) in cycles"
+          :key="index"
+          :name="index"
+        >
+          <template slot="title">
+            <div class="collapse-title">
+              <span>缴费周期 {{index + 1}}</span>
+              <i v-if="cycles.length > 1" class="el-icon-circle-close" @click.stop="removeCycle(index)"></i>
+            </div>
+          </template>
+          <paymentCycle
+            ref="cycles"
+            :form="item"
+            :isCommon="isCommon"
+            :isUserType="isUserType"
+            :isDisabled="form.leixing === '1' || paymentType == '0'"
+          />
+        </el-collapse-item>
+      </el-collapse>
+      <el-button
+        icon="el-icon-circle-plus-outline"
+        plain
+        type="info"
+        size="small"
+        style="width: 100%;margin: 20px 0;"
+        @click="addCycle"
+      >新增缴费周期</el-button>
     </template>
     <el-alert title="其它"
               :closable="false"
@@ -124,7 +148,7 @@ export default {
       cycles: [{}],
       cycle: {},
       eclass: [],
-      collapse: [],
+      collapse: [0],
       nextVisible: false,
       typeList: [],
       charges: [],
@@ -151,6 +175,9 @@ export default {
       }
       return data;
     },
+    paymentAmountDisabled() {
+      return (this.isUserType || (this.isCommon && this.isUserType)) && this.isDisabled
+    }
   },
   watch: {
     type () {
@@ -258,10 +285,29 @@ export default {
       for (const item of this.eclass) {
         money += item.courseCurrentPrice;
       }
+      if (this.cycles.length) {
+        const floorMoney = Math.floor(money / this.cycles.length)
+        const remainder = money % this.cycles.length
+        if (this.paymentAmountDisabled) {
+          this.cycles = this.cycles.map((item, index) => {
+            return {
+              ...item,
+              paymentAmount: (index === 0 ? floorMoney + remainder : floorMoney)
+            }
+          })
+        } else {
+          this.cycles = this.cycles.map((item, index) => {
+            return {
+              ...item,
+              paymentAmount: (index === 0 && !item.changeed ? money : item.paymentAmount)
+            }
+          })
+        }
+      }
       // if (!money) {
         // this.$set(this.cycle, "paymentAmount", undefined);
       // } else {
-        this.$set(this.cycle, "paymentAmount", money);
+        // this.$set(this.cycle, "paymentAmount", money);
       // }
       if (this.rowDetail) {
         this.$set(
@@ -315,11 +361,13 @@ export default {
     addCycle () {
       this.cycles.push({});
       this.collapse.push(this.collapse.length);
+      this.syncAllMoney()
     },
     removeCycle (index) {
       this.cycles[index] = null;
       this.cycles = this.cycles.filter((item) => !!item);
       this.collapse.pop();
+      this.syncAllMoney()
     },
     collapseChange (val) {
       this.collapse = val;
@@ -329,7 +377,7 @@ export default {
     },
     getForms () {
       const { $refs: refs } = this;
-      return [refs.base, refs.eclass, refs.cycle, refs.other]
+      return [refs.base, refs.eclass, refs.cycle, ...refs.cycles, refs.other]
         .filter((item) => !!item)
         .map((item) => item.$refs.form);
     },
@@ -355,7 +403,17 @@ export default {
         const { paymentDate, paymentValid, leixing, ...rest } = {
           ...this.form,
           ...this.other,
-          ...this.cycle,
+          cycles: [...this.cycles.map(item => {
+            const { paymentDate, paymentValid, ...other } = item
+            return {
+              ...other,
+              ...getTimes(paymentDate, ["startPaymentDate", "deadlinePaymentDate"]),
+              ...getTimes(paymentValid, [
+                "paymentValidStartDate",
+                "paymentValidEndDate",
+              ]),
+            }
+          })],
           musicGroupPaymentCalenderCourseSettingsList: this.eclass,
         };
         const data = {