1、调整协议

src/views/his/packageCate/index.vue

@@ -73,9 +73,11 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-tabs type="card" v-model="queryParams.type" @tab-click="handleClickX">
-      <el-tab-pane v-for="(item,index) in typeOptions" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
+      <el-tab-pane v-for="(item,index) in typeOptions" :key="item.dictValue" :label="item.dictLabel" :name="String(item.dictValue)"></el-tab-pane>
     </el-tabs>
     <el-table v-loading="loading" :data="packageCateList" @selection-change="handleSelectionChange" border>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="ID" align="center" prop="cateId" width="80" />
       <el-table-column label="图片" align="center" prop="imgUrl" width="150px">
         <template slot-scope="scope">
           <el-popover
@@ -129,53 +131,99 @@
     />
 
     <!-- 添加或修改套餐包分类对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :headers="uploadHeaders"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="分类标识" prop="cateCode">
-          <el-input-number v-model="form.cateCode" label="请输入分类标识"></el-input-number>
-        </el-form-item>
-        <el-form-item label="类别" prop="type">
-          <el-select v-model="form.type" placeholder="类别">
-            <el-option
-              v-for="dict in typeOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="parseInt(dict.dictValue)"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="分类名称" prop="cateName">
-          <el-input v-model="form.cateName" placeholder="请输入分类名称" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in statusOptions"
-              :key="dict.dictValue"
-              :label="parseInt(dict.dictValue)"
-            >{{dict.dictLabel}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="排序号" prop="sort">
-          <el-input-number v-model="form.sort" label="请输入排序号"></el-input-number>
-        </el-form-item>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="720px"
+      append-to-body
+      custom-class="package-cate-dialog"
+      :close-on-click-modal="false"
+      @closed="reset"
+    >
+      <el-form
+        ref="form"
+        v-loading="formLoading"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+        class="package-cate-form"
+      >
+        <el-row :gutter="24">
+          <el-col :span="10">
+            <el-form-item label="分类图片" prop="imgUrl">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                :headers="uploadHeaders"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+              >
+                <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar-img">
+                <div v-else class="avatar-placeholder">
+                  <i class="el-icon-plus"></i>
+                  <span>上传图片</span>
+                </div>
+              </el-upload>
+              <div class="upload-tip">建议尺寸 1:1，大小不超过 1MB</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item v-if="form.cateId" label="分类ID">
+              <el-input v-model="form.cateId" disabled />
+            </el-form-item>
+            <el-form-item label="分类名称" prop="cateName">
+              <el-input v-model="form.cateName" placeholder="请输入分类名称" maxlength="50" show-word-limit />
+            </el-form-item>
+            <el-form-item label="分类标识" prop="cateCode">
+              <el-input-number
+                v-model="form.cateCode"
+                :min="0"
+                :controls="true"
+                controls-position="right"
+                placeholder="请输入分类标识"
+                class="form-input-full"
+              />
+            </el-form-item>
+            <el-form-item label="类别" prop="type">
+              <el-select
+                v-model="form.type"
+                placeholder="请选择类别"
+                class="form-input-full"
+                :disabled="form.cateId != null"
+              >
+                <el-option
+                  v-for="dict in typeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="parseInt(dict.dictValue)"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="排序号" prop="sort">
+              <el-input-number
+                v-model="form.sort"
+                :min="0"
+                :controls="true"
+                controls-position="right"
+                class="form-input-full"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in statusOptions"
+                  :key="dict.dictValue"
+                  :label="parseInt(dict.dictValue)"
+                >{{ dict.dictLabel }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -210,6 +258,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      formLoading: false,
+      submitLoading: false,
       // 状态 1正常 0禁用字典
       statusOptions: [],
       typeOptions:[
@@ -221,7 +271,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         cateCode: null,
-        type: 1,
+        type: '1',
         cateName: null,
         status: null,
         imgUrl: null,
@@ -274,16 +324,14 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
-      this.reset();
     },
-    handleAvatarSuccess(res, file) {
-       if(res.code==200){
-         this.form.imgUrl=res.url;
-         self.$forceUpdate()
-       }
-       else{
-         this.msgError(res.msg);
-       }
+    handleAvatarSuccess(res) {
+      if (res.code == 200) {
+        this.form.imgUrl = res.url;
+        this.$forceUpdate();
+      } else {
+        this.msgError(res.msg);
+      }
     },
     beforeAvatarUpload(file) {
       const isLt1M = file.size / 1024 / 1024 < 1;
@@ -299,9 +347,9 @@ export default {
         cateCode: null,
         type: null,
         cateName: null,
-        status: 0,
+        status: 1,
         imgUrl: null,
-        sort: null
+        sort: 0
       };
       this.resetForm("form");
     },
@@ -324,37 +372,49 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.form.type = parseInt(this.queryParams.type);
       this.open = true;
       this.title = "添加套餐包分类";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      const cateId = row && row.cateId != null ? row.cateId : (Array.isArray(this.ids) ? this.ids[0] : this.ids);
+      if (!cateId) {
+        this.msgError("请选择要修改的数据");
+        return;
+      }
       this.reset();
-      const cateId = row.cateId || this.ids
+      this.formLoading = true;
+      this.open = true;
+      this.title = "修改套餐包分类";
       getPackageCate(cateId).then(response => {
+        if (!response.data) {
+          this.open = false;
+          this.msgError("获取分类详情失败");
+          return;
+        }
         this.form = response.data;
-        this.open = true;
-        this.title = "修改套餐包分类";
+      }).finally(() => {
+        this.formLoading = false;
       });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.cateId != null) {
-            updatePackageCate(this.form).then(response => {
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPackageCate(this.form).then(response => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
+        if (!valid) {
+          return;
         }
+        this.submitLoading = true;
+        const request = this.form.cateId != null
+          ? updatePackageCate(this.form)
+          : addPackageCate(this.form);
+        request.then(() => {
+          this.msgSuccess(this.form.cateId != null ? "修改成功" : "新增成功");
+          this.open = false;
+          this.getList();
+        }).finally(() => {
+          this.submitLoading = false;
+        });
       });
     },
     /** 删除按钮操作 */
@@ -389,24 +449,68 @@ export default {
   }
 };
 </script>
+<style scoped>
+.package-cate-form {
+  padding: 8px 12px 0;
+}
+
+.form-input-full {
+  width: 100%;
+}
+
+.avatar-uploader ::v-deep .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.avatar-uploader ::v-deep .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-img {
+  display: block;
+  width: 180px;
+  height: 180px;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 180px;
+  height: 180px;
+  color: #8c939d;
+  background: #fafafa;
+}
+
+.avatar-placeholder i {
+  font-size: 28px;
+  margin-bottom: 8px;
+}
+
+.avatar-placeholder span {
+  font-size: 13px;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+}
+</style>
+
 <style>
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
+.package-cate-dialog .el-dialog__body {
+  padding: 16px 24px 8px;
+}
 
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
+.package-cate-dialog .dialog-footer {
+  text-align: right;
+}
 </style>

src/views/system/config/config.vue

@@ -270,9 +270,12 @@
           <el-form-item label="会员自动续费协议" prop="vipAutomaticService">
             <editor v-model="form3.vipAutomaticService" :min-height="292"/>
           </el-form-item>
-          <el-form-item label="用户注销协议" prop="vipAutomaticService">
+          <el-form-item label="用户注销协议" prop="userRemoveService">
             <editor v-model="form3.userRemoveService" :min-height="292"/>
           </el-form-item>
+          <el-form-item label="儿童隐私保护协议" prop="childrenPrivacyPolicy">
+            <editor v-model="form3.childrenPrivacyPolicy" :min-height="292"/>
+          </el-form-item>
 
           <div class="footer">
             <el-button type="primary" @click="submitForm3">提 交</el-button>
@@ -3490,6 +3493,9 @@ export default {
         ],
         vipService: [
           { required: true, message: '请输入会员服务协议', trigger: 'blur' }
+        ],
+        childrenPrivacyPolicy: [
+          { required: true, message: '请输入儿童隐私保护协议', trigger: 'blur' }
         ]
       },
       rulesDelay: [

src/views/system/config/config2.vue

@@ -175,6 +175,9 @@
             <el-form-item label="会员服务协议" prop="vipService">
               <editor v-model="form3.vipService" :min-height="292"/>
             </el-form-item>
+            <el-form-item label="儿童隐私保护协议" prop="childrenPrivacyPolicy">
+              <editor v-model="form3.childrenPrivacyPolicy" :min-height="292"/>
+            </el-form-item>
 
             <div class="footer">
               <el-button type="primary" @click="submitForm3">提  交</el-button>