画刊订阅价格管理

src/views/system_config/OrderSetting.vue

@@ -2,84 +2,102 @@
   <div class="manage-root personnel-create">
     <Header />
     <div class="manage-root-contain">
-        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
-        <div class="manage-root-contain-right">
-            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
-            <div class="create-bottom">
-                <div class="top-box">
-                    <h3>订阅价格管理</h3>
-                    <div class="save-btn">
-                        <el-button size="small" @click="onCancel">取消</el-button>
-                        <el-button type="primary" size="small" @click="onSubmit()" :loading="loading">保存</el-button>
-                    </div>
-                </div>
-                <div class="tabs">
-                    <a :class="[typeValue===item.study_phase?'active':'']" @click="handleChangeTabs(item.study_phase)" v-for="item in $studyType" :key="item.study_phase">{{item.study_phase_name}}</a>
-                </div>
-                <el-table
-                    class="search-table order-table"
-                    :data="tableObj[typeValue]"
-                    border
-                    style="width: 672px"
-                    :key="typeValue"
-                    v-loading="tableLoading"
-                    :max-height="tableHeight">
-                    <el-table-column
-                        type="index"
-                        label="#"
-                        width="64">
-                    </el-table-column>
-                    <el-table-column
-                        prop="issue_no"
-                        label="总期数"
-                        width="152">
-                        <template slot-scope="scope">
-                            <el-input v-model="scope.row.issue_no" placeholder="输入" maxlength="20"></el-input>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="comb_count"
-                        label="合刊"
-                        width="152">
-                        <template slot-scope="scope">
-                            <el-input v-model="scope.row.comb_count" placeholder="1" maxlength="20"></el-input>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="shelve_date"
-                        label="发行日期"
-                        width="152" >
-                       <template slot-scope="scope">
-                            <el-date-picker
-                                v-model="scope.row.shelve_date"
-                                prefix-icon="-"
-                                type="date"
-                                placeholder="选择日期"
-                                value-format="yyyy-MM-dd"
-                                format="yyyy-MM-dd">
-                            </el-date-picker>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="price"
-                        label="价格"
-                        width="152" >
-                        <template slot-scope="scope">
-                            <el-input v-model="scope.row.price" placeholder="输入" type="number" @blur="handlePrice(scope.row)" maxlength="10"></el-input>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <span class="quick-btn" @click="tableLength('-')">
-                    减一行
-                </span>
-                <span class="quick-btn" @click="tableLength('1')">
-                    加一行
-                </span>
-                <span class="quick-btn" @click="tableLength('10')">
-                    加十行
-                </span>
+      <nav-menu
+        class="manage-root-contain-left"
+        :activeMenuIndex="activeMenuIndex"
+      ></nav-menu>
+      <div class="manage-root-contain-right">
+        <breadcrumb
+          :breadcrumbList="breadcrumbList"
+          class="breadcrumb-box"
+        ></breadcrumb>
+        <div class="create-bottom">
+          <div class="top-box">
+            <h3>订阅价格管理</h3>
+            <div class="save-btn">
+              <el-button size="small" @click="onCancel">取消</el-button>
+              <el-button
+                type="primary"
+                size="small"
+                @click="onSubmit()"
+                :loading="loading"
+                >保存</el-button
+              >
             </div>
+          </div>
+          <div class="tabs">
+            <a
+              :class="[typeValue === 1 ? 'active' : '']"
+              @click="handleChangeTabs(1)"
+              >画刊</a
+            >
+            <a
+              :class="[typeValue === item.study_phase ? 'active' : '']"
+              @click="handleChangeTabs(item.study_phase)"
+              v-for="item in $studyType"
+              :key="item.study_phase"
+              >{{ item.study_phase_name }}</a
+            >
+          </div>
+          <el-table
+            class="search-table order-table"
+            :data="tableObj[typeValue]"
+            border
+            style="width: 672px"
+            :key="typeValue"
+            v-loading="tableLoading"
+            :max-height="tableHeight"
+          >
+            <el-table-column type="index" label="#" width="64">
+            </el-table-column>
+            <el-table-column prop="issue_no" label="总期数" width="152">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.issue_no"
+                  placeholder="输入"
+                  maxlength="20"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="comb_count" label="合刊" width="152">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.comb_count"
+                  placeholder="1"
+                  maxlength="20"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="shelve_date" label="发行日期" width="152">
+              <template slot-scope="scope">
+                <el-date-picker
+                  v-model="scope.row.shelve_date"
+                  prefix-icon="-"
+                  type="date"
+                  placeholder="选择日期"
+                  value-format="yyyy-MM-dd"
+                  format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+              </template>
+            </el-table-column>
+            <el-table-column prop="price" label="价格" width="152">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.price"
+                  placeholder="输入"
+                  type="number"
+                  @blur="handlePrice(scope.row)"
+                  maxlength="10"
+                ></el-input>
+              </template>
+            </el-table-column>
+          </el-table>
+          <span class="quick-btn" @click="tableLength('-')"> 减一行 </span>
+          <span class="quick-btn" @click="tableLength('1')"> 加一行 </span>
+          <span class="quick-btn" @click="tableLength('10')"> 加十行 </span>
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -88,135 +106,140 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import NavMenu from "../../components/NavMenu.vue"
-import Breadcrumb from '../../components/Breadcrumb.vue';
+import NavMenu from "../../components/NavMenu.vue";
+import Breadcrumb from "../../components/Breadcrumb.vue";
 import { getLogin } from "@/api/ajax";
-import { cutMoneyFiter } from '@/utils/defined';
-import { mapState } from 'vuex';
+import { cutMoneyFiter } from "@/utils/defined";
+import { mapState } from "vuex";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, NavMenu, Breadcrumb },
   props: {},
-  filters:{
+  filters: {
     cutMoneyFiter,
   },
   data() {
     //这里存放数据
     return {
-        activeMenuIndex: "order_setting",
-        breadcrumbList:[
-            {
-                icon:'setting',
-                url:'',
-                text:''
-            },
-            {
-                icon:'',
-                url:'',
-                notLink: true,
-                text:'系统配置'
-            },
-            {
-                icon:'',
-                url:'',
-                text:'订阅价格管理'
-            }
-        ],
-        loading: false,
-        typeValue: 11,
-        tableList:[
-            {
-                issue_no: '',
-                comb_count: '',
-                shelve_date: '',
-                price: ''
-            }
-        ],
-        tableHeight: "", // 表格高度
-        tableObj: {},
-        tableLoading: false
-    }
+      activeMenuIndex: "order_setting",
+      breadcrumbList: [
+        {
+          icon: "setting",
+          url: "",
+          text: "",
+        },
+        {
+          icon: "",
+          url: "",
+          notLink: true,
+          text: "系统配置",
+        },
+        {
+          icon: "",
+          url: "",
+          text: "订阅价格管理",
+        },
+      ],
+      loading: false,
+      typeValue: 1,
+      tableList: [
+        {
+          issue_no: "",
+          comb_count: "",
+          shelve_date: "",
+          price: "",
+        },
+      ],
+      tableHeight: "", // 表格高度
+      tableObj: {},
+      tableLoading: false,
+    };
   },
   //计算属性 类似于data概念
   computed: {
-    ...mapState(['$studyType', 'file_preview_url']),
+    ...mapState(["$studyType", "file_preview_url"]),
   },
   //监控data中数据变化
-  watch: {
-    
-  },
+  watch: {},
   //方法集合
   methods: {
-    handleChangeTabs(value){
-        this.typeValue = value
-        this.getInfo()
+    handleChangeTabs(value) {
+      this.typeValue = value;
+      this.getInfo();
     },
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
     },
     // 提交表单
-    onSubmit(){
-        let _this = this
-        this.loading = true
-        let MethodName = "/OrgServer/Manager/ReservationPriceManager/SaveReservationPriceList";
-        let index = 0
-        Object.getOwnPropertyNames(_this.tableObj).forEach(function(key){
-            // if(_this.tableObj&&_this.tableObj[key]&&_this.tableObj[key].length>0){
-                let table = _this.tableObj[key].length>0?JSON.parse(JSON.stringify(_this.tableObj[key])):[]
-                table.forEach(item => {
-                    item.comb_count = item.comb_count ? item.comb_count * 1 : 1
-                    item.price = item.price * 1
-                });
-                let data = {
-                    goods_type: 2,
-                    goods_study_phase: key*1,
-                    reservation_price_list: table
-                }
-                getLogin(MethodName, data)
-                .then((res) => {
-                    // this.loading = false
-                    if(res.status===1){
-                        index ++
-                        if(index===Object.keys(_this.tableObj).length+1){
-                            _this.$message.success("保存成功")
-                            _this.loading = false
-                        }
-                        // this.$message.success("保存成功")
-                    }
-                }).catch((res) =>{
-                    _this.loading = false
-                })
-            // }
-            
-        })
+    onSubmit() {
+      let _this = this;
+      this.loading = true;
+      let MethodName =
+        "/OrgServer/Manager/ReservationPriceManager/SaveReservationPriceList";
+      let index = 0;
+      Object.getOwnPropertyNames(_this.tableObj).forEach(function (key) {
+        // if(_this.tableObj&&_this.tableObj[key]&&_this.tableObj[key].length>0){
+        let table =
+          _this.tableObj[key].length > 0
+            ? JSON.parse(JSON.stringify(_this.tableObj[key]))
+            : [];
+        table.forEach((item) => {
+          item.comb_count = item.comb_count ? item.comb_count * 1 : 1;
+          item.price = item.price * 1;
+        });
+        let data = {
+          goods_type: key == 1 ? 4 : 2,
+          goods_study_phase: key * 1,
+          reservation_price_list: table,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {
+            // this.loading = false
+            if (res.status === 1) {
+              index++;
+              if (index === Object.keys(_this.tableObj).length + 1) {
+                _this.$message.success("保存成功");
+                _this.loading = false;
+              }
+              // this.$message.success("保存成功")
+            }
+          })
+          .catch((res) => {
+            _this.loading = false;
+          });
+        // }
+      });
     },
     // 取消 恢复到修改前状态
-    onCancel(){
-        
-    },
+    onCancel() {},
     // 得到配置信息
-    getInfo(){
-        if(this.tableObj[this.typeValue]&&this.tableObj[this.typeValue].length>0){
-            return
-        }
-        this.tableLoading = true
-        let MethodName = "/OrgServer/Manager/ReservationPriceManager/GetReservationPriceList";
-        getLogin(MethodName, {
-            goods_type: 2,
-            goods_study_phase: this.typeValue
-        })
+    getInfo() {
+      if (
+        this.tableObj[this.typeValue] &&
+        this.tableObj[this.typeValue].length > 0
+      ) {
+        return;
+      }
+      this.tableLoading = true;
+      let MethodName =
+        "/OrgServer/Manager/ReservationPriceManager/GetReservationPriceList";
+      getLogin(MethodName, {
+        goods_type: this.typeValue === 1 ? 4 : 2,
+        goods_study_phase: this.typeValue,
+      })
         .then((res) => {
-            this.tableLoading = false
-            if(res.status===1){
-                this.tableList = res.reservation_price_list
-                this.tableObj[this.typeValue] = res.reservation_price_list
-                this.$forceUpdate()
-            }
-        }).catch((res) =>{
-            this.tableLoading = false
+          this.tableLoading = false;
+          if (res.status === 1) {
+            this.tableList = res.reservation_price_list;
+            this.tableObj[this.typeValue] = res.reservation_price_list;
+            this.$forceUpdate();
+          }
         })
+        .catch((res) => {
+          this.tableLoading = false;
+        });
     },
     //计算table高度(动态设置table高度)
     getTableHeight() {
@@ -228,146 +251,151 @@ export default {
         this.tableHeight = window.innerHeight - tableH;
       }
     },
-    handlePrice(item){
-        item.price = cutMoneyFiter(item.price)
+    handlePrice(item) {
+      item.price = cutMoneyFiter(item.price);
     },
-    tableLength(type){
-        if(type=='-'){
-            if(this.tableObj[this.typeValue].length>1){
-                this.tableObj[this.typeValue].splice(this.tableObj[this.typeValue].length-1,1)
-            }else{
-                this.$message.warning('最少须保留一行')
-            }
-        }else{
-            for(let i = 0; i < Number(type); i++){
-                let obj = {
-                    issue_no: '',
-                    comb_count: '',
-                    shelve_date: '',
-                    price: ''
-                }
-                this.tableObj[this.typeValue].push(obj)
-            }
+    tableLength(type) {
+      if (type == "-") {
+        if (this.tableObj[this.typeValue].length > 1) {
+          this.tableObj[this.typeValue].splice(
+            this.tableObj[this.typeValue].length - 1,
+            1
+          );
+        } else {
+          this.$message.warning("最少须保留一行");
         }
-    }
+      } else {
+        for (let i = 0; i < Number(type); i++) {
+          let obj = {
+            issue_no: "",
+            comb_count: "",
+            shelve_date: "",
+            price: "",
+          };
+          this.tableObj[this.typeValue].push(obj);
+        }
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     let timer = setInterval(() => {
-        if(this.$studyType&&this.$studyType.length>0){
-            this.$studyType.forEach(item=>{
-                this.tableObj[item.study_phase] = []
-            })
-            this.getInfo()
-            clearInterval(timer);
-        }
+      if (this.$studyType && this.$studyType.length > 0) {
+        this.$studyType.forEach((item) => {
+          this.tableObj[item.study_phase] = [];
+        });
+        this.getInfo();
+        clearInterval(timer);
+      }
     }, 1000);
     this.getTableHeight();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.create-bottom{
-    padding: 40px 40px;
-    background: #FFFFFF;
-    border-radius: 4px;
-    height: calc(100vh - 140px);
-    overflow: auto;
-    .top-box{
-        display: flex;
-        justify-content: space-between;
-    }
-    h3{
-        font-size: 20px;
+.create-bottom {
+  padding: 40px 40px;
+  background: #ffffff;
+  border-radius: 4px;
+  height: calc(100vh - 140px);
+  overflow: auto;
+  .top-box {
+    display: flex;
+    justify-content: space-between;
+  }
+  h3 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    margin: 0;
+    color: #1d2129;
+  }
+  .tabs {
+    display: flex;
+    padding: 16px 0;
+    a {
+      font-size: 14px;
+      line-height: 22px;
+      color: #4e5969;
+      border-radius: 100px;
+      padding: 5px 16px;
+      margin-right: 12px;
+      &:hover {
+        background: #f2f3f5;
+      }
+      &.active {
+        background: #f2f3f5;
         font-weight: 500;
-        line-height: 28px;
-        margin: 0;
-        color: #1D2129;
-    }
-    .tabs{
-        display: flex;
-        padding: 16px 0;
-        a{
-            font-size: 14px;
-            line-height: 22px;
-            color: #4E5969;
-            border-radius: 100px;
-            padding: 5px 16px;
-            margin-right: 12px;
-            &:hover{
-                background: #F2F3F5;
-            }
-            &.active{
-                background: #F2F3F5;
-                font-weight: 500;
-                color: #165DFF;
-            }
-        }
+        color: #165dff;
+      }
     }
+  }
 }
-.order-table{
-    margin-top: 0;
-    .el-input{
-        width: 135px;
-        height: 22px;
-        background: #FFFFFF;
-    }
+.order-table {
+  margin-top: 0;
+  .el-input {
+    width: 135px;
+    height: 22px;
+    background: #ffffff;
+  }
 }
-.quick-btn{
-    border-radius: 4px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    background: #F4F4F4;
-    width: 219px;
-    height: 30px;
-    text-align: center;
-    margin: 16px 8px 0 0;
-    display: inline-block;
-    color: #000;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 26px; /* 157.143% */
-    cursor: pointer;
+.quick-btn {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #f4f4f4;
+  width: 219px;
+  height: 30px;
+  text-align: center;
+  margin: 16px 8px 0 0;
+  display: inline-block;
+  color: #000;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 26px; /* 157.143% */
+  cursor: pointer;
 }
 </style>
 
 <style lang="scss">
-.order-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
-    background-color: transparent !important;
+.order-table.el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background-color: transparent !important;
 }
-.order-table{
-    .cell{
-        padding: 0;
-    }
-    .el-table__row:hover {
-        background-color: transparent !important;
-    }
-    .el-table__cell{
-        padding: 9px 10px;
-    }
-    .el-input__inner{
-        width: 132px;
-        height: 22px;
-        line-height: 22px;
-        padding: 0;
-        background: #FFFFFF;
-    }
+.order-table {
+  .cell {
+    padding: 0;
+  }
+  .el-table__row:hover {
+    background-color: transparent !important;
+  }
+  .el-table__cell {
+    padding: 9px 10px;
+  }
+  .el-input__inner {
+    width: 132px;
+    height: 22px;
+    line-height: 22px;
+    padding: 0;
+    background: #ffffff;
+  }
 }
-</style>
+</style>

src/views/system_config/ReservationSetting.vue

@@ -2,24 +2,88 @@
   <div class="manage-root reservation_setting">
     <Header />
     <div class="manage-root-contain">
-        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
-        <div class="manage-root-contain-right">
-            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
-            <div class="create-bottom">
-                <h3>精读订阅包年价格</h3>
-                <el-form :model="registerForm" :rules="rulesRegister" ref="registerForm" label-width="100px" class="registerForm" label-position="top">
-                    <el-form-item label="" prop="iread_year_valid_period_price" class="price-box">
-                        <el-input-number v-model="registerForm.iread_year_valid_period_price" :min="0" size="small" :precision="2" class="personal-ceil" maxlength="10"></el-input-number>
-                        <span class="prepend">￥</span>
-                        <span class="append">元</span>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" @click="onSubmit('registerForm')" size="small" :loading="loading">保存</el-button>
-                        <el-button @click="onCancel('registerForm')" size="small">取消</el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
+      <nav-menu
+        class="manage-root-contain-left"
+        :activeMenuIndex="activeMenuIndex"
+      ></nav-menu>
+      <div class="manage-root-contain-right">
+        <breadcrumb
+          :breadcrumbList="breadcrumbList"
+          class="breadcrumb-box"
+        ></breadcrumb>
+        <div class="create-bottom">
+          <h3>精读订阅包年价格</h3>
+          <el-form
+            :model="registerForm"
+            :rules="rulesRegister"
+            ref="registerForm"
+            label-width="100px"
+            class="registerForm"
+            label-position="top"
+          >
+            <el-form-item
+              label=""
+              prop="iread_year_valid_period_price"
+              class="price-box"
+            >
+              <el-input-number
+                v-model="registerForm.iread_year_valid_period_price"
+                :min="0"
+                size="small"
+                :precision="2"
+                class="personal-ceil"
+                maxlength="10"
+              ></el-input-number>
+              <span class="prepend">￥</span>
+              <span class="append">元</span>
+            </el-form-item>
+            <el-form-item
+              label="小学"
+              prop="iread_year_valid_period_price_11"
+              class="price-box"
+            >
+              <el-input-number
+                v-model="registerForm.iread_year_valid_period_price_11"
+                :min="0"
+                size="small"
+                :precision="2"
+                class="personal-ceil"
+                maxlength="10"
+              ></el-input-number>
+              <span class="prepend">￥</span>
+              <span class="append">元</span>
+            </el-form-item>
+            <el-form-item
+              label="初中"
+              prop="iread_year_valid_period_price_20"
+              class="price-box"
+            >
+              <el-input-number
+                v-model="registerForm.iread_year_valid_period_price_20"
+                :min="0"
+                size="small"
+                :precision="2"
+                class="personal-ceil"
+                maxlength="10"
+              ></el-input-number>
+              <span class="prepend">￥</span>
+              <span class="append">元</span>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="onSubmit('registerForm')"
+                size="small"
+                :loading="loading"
+                >保存</el-button
+              >
+              <el-button @click="onCancel('registerForm')" size="small"
+                >取消</el-button
+              >
+            </el-form-item>
+          </el-form>
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -28,8 +92,8 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import NavMenu from "../../components/NavMenu.vue"
-import Breadcrumb from '../../components/Breadcrumb.vue';
+import NavMenu from "../../components/NavMenu.vue";
+import Breadcrumb from "../../components/Breadcrumb.vue";
 import { getLogin } from "@/api/ajax";
 
 export default {
@@ -39,156 +103,169 @@ export default {
   data() {
     //这里存放数据
     return {
-        activeMenuIndex: "reservation_setting",
-        breadcrumbList:[
-            {
-                icon:'setting',
-                url:'',
-                text:''
-            },
-            {
-                icon:'',
-                url:'',
-                notLink: true,
-                text:'系统配置'
-            },
-            {
-                icon:'',
-                url:'',
-                text:'精读订阅包年价格'
-            }
-        ],
-        registerForm:{
-            iread_year_valid_period_price: null
+      activeMenuIndex: "reservation_setting",
+      breadcrumbList: [
+        {
+          icon: "setting",
+          url: "",
+          text: "",
         },
-        rulesRegister:{
+        {
+          icon: "",
+          url: "",
+          notLink: true,
+          text: "系统配置",
         },
-        loading: false
-    }
+        {
+          icon: "",
+          url: "",
+          text: "精读订阅包年价格",
+        },
+      ],
+      registerForm: {
+        iread_year_valid_period_price: null,
+        iread_year_valid_period_price_11: null,
+        iread_year_valid_period_price_20: null,
+      },
+      rulesRegister: {},
+      loading: false,
+    };
   },
   //计算属性 类似于data概念
-  computed: {
-    
-  },
+  computed: {},
   //监控data中数据变化
-  watch: {
-    
-  },
+  watch: {},
   //方法集合
   methods: {
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
     },
     // 提交表单
-    onSubmit(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/Manager/SysConfigManager/SetSysConfig_Reservation";
-            let data = {
-                iread_year_valid_period_price: this.registerForm.iread_year_valid_period_price
-            }
-            getLogin(MethodName, data)
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName =
+            "/OrgServer/Manager/SysConfigManager/SetSysConfig_Reservation";
+          let data = {
+            iread_year_valid_period_price:
+              this.registerForm.iread_year_valid_period_price,
+            iread_year_valid_period_price_study_phase_list: [
+              {
+                study_phase: 11,
+                price: this.registerForm.iread_year_valid_period_price_11,
+              },
+              {
+                study_phase: 20,
+                price: this.registerForm.iread_year_valid_period_price_20,
+              },
+            ],
+          };
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                if(res.status===1){
-                    this.$message.success("保存成功")
-                }
-            }).catch((res) =>{
-                this.loading = false
+              this.loading = false;
+              if (res.status === 1) {
+                this.$message.success("保存成功");
+              }
             })
-          } else {
-            return false;
-          }
-        });
+            .catch((res) => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
+      });
     },
     // 取消 恢复到修改前状态
-    onCancel(formName){
-        this.$refs[formName].resetFields();
+    onCancel(formName) {
+      this.$refs[formName].resetFields();
     },
     // 得到配置信息
-    getInfo(){
-        let MethodName = "/OrgServer/Manager/SysConfigManager/GetSysConfig_Reservation";
-        getLogin(MethodName, {})
+    getInfo() {
+      let MethodName =
+        "/OrgServer/Manager/SysConfigManager/GetSysConfig_Reservation";
+      getLogin(MethodName, {})
         .then((res) => {
-            if(res.status===1){
-                this.registerForm.iread_year_valid_period_price = res.iread_year_valid_period_price
-            }
-        }).catch((res) =>{
-            
+          if (res.status === 1) {
+            this.registerForm.iread_year_valid_period_price =
+              res.iread_year_valid_period_price;
+            this.registerForm.iread_year_valid_period_price_11 =
+              res.iread_year_valid_period_price_study_phase_list[0].price;
+            this.registerForm.iread_year_valid_period_price_20 =
+              res.iread_year_valid_period_price_study_phase_list[1].price;
+          }
         })
-    }
+        .catch((res) => {});
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getInfo()
+    this.getInfo();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.create-bottom{
-    padding: 40px 40px;
-    background: #FFFFFF;
-    border-radius: 4px;
-    height: calc(100vh - 140px);
-    overflow: auto;
-    h3{
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 28px;
-        margin: 0 0 28px 0;
-        color: #1D2129;
-    }
+.create-bottom {
+  padding: 40px 40px;
+  background: #ffffff;
+  border-radius: 4px;
+  height: calc(100vh - 140px);
+  overflow: auto;
+  h3 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    margin: 0 0 28px 0;
+    color: #1d2129;
+  }
 }
-
 </style>
 
 <style lang="scss">
-.reservation_setting{
-    .personal-ceil{
-        width: 200px;
-        .el-input__inner{
-            width: 200px;
-            padding: 0 60px;
-        }
+.reservation_setting {
+  .personal-ceil {
+    width: 200px;
+    .el-input__inner {
+      width: 200px;
+      padding: 0 60px;
     }
-    .price-box{
-        width: 300px;
-        display: inline-block;
-        .el-form-item__content{
-            position: relative;
-            .prepend,.append{
-                position: absolute;
-                left: 44px;
-                font-size: 14px;
-                line-height: 22px;
-                color: #1D2129;
-                line-height: 34px;
-            }
-            .append{
-                left: 142px;
-            }
-        }
+  }
+  .price-box {
+    width: 100%;
+    // display: inline-block;
+    .el-form-item__content {
+      position: relative;
+      .prepend,
+      .append {
+        position: absolute;
+        left: 44px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #1d2129;
+        line-height: 34px;
+      }
+      .append {
+        left: 142px;
+      }
     }
+  }
 }
-</style>
+</style>