修改配置界面

pages/main/index/user_credit_setting.vue

@@ -1,21 +1,66 @@
 <template>
+
   <div id="vip-setting">
-    <el-form style="padding-top: 1%"  :rules="rules" ref="ruleForm">
-      <h3>会员定价</h3>
-      <template v-for="item of formData">
-        <el-form-item label="原价(分)" prop="original_price_1">
-          <el-input v-model="item.original_price"></el-input>
-        </el-form-item>
-        <el-form-item label="现价(分)" prop="real_price">
-          <el-input v-model="item.real_price"></el-input>
-        </el-form-item>
-        <el-form-item prop="can_buy_monthly">
-          <el-checkbox label="支持购买" v-model="item.status"></el-checkbox>
+    <el-radio-group v-model="tab" size="small">
+      <el-radio-button label="item">技术信用</el-radio-button>
+      <el-radio-button label="package">套餐配置</el-radio-button>
+    </el-radio-group>
+
+    <el-form v-if="tab=='item'" style="padding-top: 1%" :rules="rules" ref="ruleForm">
+      <h3>技术信用定价</h3><br/>
+      <template v-for="(item,i) of items">
+        <div style="width: 150px;margin-bottom: 20px;">
+          <label style="margin-right: 20px">{{item.name}}</label>
+        </div>
+        <div style="margin-left: 20px;">
+          <el-form-item label="原价(分)" prop="original_price">
+            <el-input v-model="items[i].original_price" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="现价(分)" prop="real_price">
+            <el-input v-model="items[i].real_price" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="logo" prop="real_price">
+            <el-input v-model="items[i].logo"></el-input>
+          </el-form-item>
+          <br/>
+          <el-form-item label="简要描述" prop="real_price">
+            <el-input v-model="items[i].description"></el-input>
+          </el-form-item>
+          <el-form-item label="排序（整数）" prop="real_price">
+            <el-input v-model="items[i].order"></el-input>
+          </el-form-item>
+          <el-form-item prop="can_buy">
+            <el-checkbox label="支持购买" v-model="items[i].status_bool"></el-checkbox>
+          </el-form-item>
+        </div>
+        <br/>
+      </template>
+      <br/>
+      <el-form-item label-width="150px">
+        <el-button type="primary" @click="submitForm('item')">保存</el-button>
+      </el-form-item>
+    </el-form>
+    <el-form v-if="tab=='package'" style="padding-top: 1%" :rules="rules" ref="ruleForm">
+      <h3>套餐定价</h3><br/>
+      <template v-for="(item,i) of packages">
+        <el-form-item :label="item.name">
+          <el-form-item label="原价(分)" prop="original_price">
+            <el-input v-model="packages[i].original_price" disabled type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="现价(分)" prop="real_price">
+            <el-input v-model="packages[i].real_price" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="套餐内容" prop="real_price">
+            <el-input v-model="packages[i].items" ></el-input>
+          </el-form-item>
+          <el-form-item prop="can_buy">
+            <el-checkbox label="支持购买" v-model="packages[i].status_bool"></el-checkbox>
+          </el-form-item>
         </el-form-item>
       </template>
       <br/>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+      <el-form-item label-width="150px">
+        <el-button type="primary" @click="submitForm('package')">保存</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -30,36 +75,39 @@
         rules: {},
         items: [],
         shows: true,
-        formData: [],
+        tab: 'item',
+        packages: []
       };
     },
     async mounted() {
       await this.getList();
-      this.items.forEach(item => {
-        this.rules['original_price_' + item.id] = [{required: true, message: "请输入数字", trigger: "blur"}]
-        this.rules['real_price_' + item.id] = [{required: true, message: "请输入数字", trigger: "blur"}]
-        this.ruleForm['original_price_' + item.id] = '';
-        this.ruleForm['real_price_' + item.id] = '';
-        this.formData[item.id-1] = {
-          'original_price': item.original_price,
-          'real_price': item.real_price,
-          'status': item.status == 1
-        }
-      })
-      console.log(this.formData)
     },
     methods: {
       /**
        * 提交
        */
-      submitForm(formName) {
-        this.$refs[formName].validate(valid => {
-          if (valid) {
-            console.log(valid)
-          } else {
-            return false;
-          }
-        });
+      submitForm(type) {
+        switch (type) {
+          case 'item':
+            this.$post("/api/admin/user_credit/update_setting", {
+              type: 'item',
+              'content': JSON.stringify(this.items)
+            }).then(res => {
+
+            });
+            break;
+          case 'package':
+            this.$post("/api/admin/user_credit/update_setting", {
+              type: 'package',
+              'content': this.packages
+            }).then(res => {
+
+            });
+            break;
+          default:
+
+        }
+
       },
 
       /**
@@ -68,6 +116,7 @@
       async getList() {
         const res = await this.$post("/api/user_credit/get_credit_list", {page: 1, size: 100});
         this.items = res.data.items;
+        this.packages = res.data.packages;
       }
     }
   };
@@ -79,6 +128,7 @@
   }
 
   .table {
+    height: 100%;
     height: calc(100% - 80px);
   }
 
@@ -86,6 +136,7 @@
     width: auto;
   }
 
+  .el-check-group,
   .el-form-item,
   .el-form-item__content {
     display: inline-block;