小程序用户故事功能优化

src/views/story/detailsPage.vue

@@ -12,15 +12,15 @@
             </el-button>
 
             <div class="action-group">
-                <el-button
-                    v-if="form.id && form.status === 0"
-                    type="primary"
-                    size="small"
-                    @click="toggleEdit"
-                    :disabled="!isViewMode"
-                >
-                    编辑
-                </el-button>
+                <!--                <el-button
+                                    v-if="form.id && form.status === 0"
+                                    type="primary"
+                                    size="small"
+                                    @click="toggleEdit"
+                                    :disabled="!isViewMode"
+                                >
+                                    编辑
+                                </el-button>-->
 
                 <el-button
                     v-if="!isViewMode"
@@ -91,14 +91,14 @@ export default {
                         prop: "title",
                         span: 24,
                         rules: [{required: true, message: "请输入故事标题"}],
+                        disabled: false
                     },
-
-                    // 用户昵称 + 点赞数（并排）
                     {
                         label: "用户昵称",
                         prop: "userName",
                         span: 10,
                         rules: [{required: true, message: "请输入用户昵称"}],
+                        disabled: false
                     },
                     {
                         label: "点赞数",
@@ -107,9 +107,8 @@ export default {
                         min: 0,
                         span: 6,
                         rules: [{required: true, message: "请输入点赞数"}],
+                        disabled: false
                     },
-
-                    // 封面图（小尺寸）
                     {
                         label: "封面图片",
                         prop: "titleImg",
@@ -132,9 +131,8 @@ export default {
                             multiple: false,
                         },
                         rules: [{required: true, message: "请上传封面图片"}],
+                        disabled: false
                     },
-
-                    // 用户头像（小尺寸）
                     {
                         label: "用户头像",
                         prop: "userAvatar",
@@ -157,9 +155,8 @@ export default {
                             multiple: false,
                         },
                         rules: [{required: true, message: "请上传用户头像"}],
+                        disabled: false
                     },
-
-                    // 故事内容（全宽）
                     {
                         label: "故事内容",
                         prop: "content",
@@ -167,6 +164,7 @@ export default {
                         span: 24,
                         minRows: 8,
                         rules: [{required: true, message: "请输入故事内容"}],
+                        disabled: false
                     },
 
                     // 状态（只读）
@@ -202,11 +200,12 @@ export default {
     },
     methods: {
         toggleEdit() {
-            this.isViewMode = false;
+            return this.isViewMode;
         },
         submit() {
-            this.$refs.form.validate((valid) => {
+            this.$refs.form.validate((valid, done) => {
                 if (!valid) return;
+                done()
                 if (!this.form.userAvatar) {
                     this.$message.warning("请上传用户头像");
                     return;
@@ -215,15 +214,31 @@ export default {
                     this.$message.warning("请上传封面图片");
                     return;
                 }
+                if (Number(this.form.likes) <= 0) {
+                    this.$message.warning("点赞数最小为1");
+                    return false;
+                }
+                if (this.form.userName.length < 2 || this.form.userName.length > 6) {
+                    this.$message.warning("用户昵称最少两个字符,最多六个字符");
+                    return false;
+                }
+                if (this.form.title.length < 2 || this.form.title.length > 15) {
+                    this.$message.warning("标题最少两个字符,最多十五个字符");
+                    return false;
+                }
+                if (this.form.content.length > 1000) {
+                    this.$message.warning("内容最多一千个字符");
+                    return false;
+                }
 
                 const loading = this.$loading({text: "保存中..."});
                 submit(this.form).then((res) => {
                     console.info('res---', res)
-                        this.$message.success("保存成功");
-                        const id = res.data.data || this.form.id;
+                    this.$message.success("保存成功");
+                    const id = res.data.data || this.form.id;
                     console.info('id-------', id)
-                        this.getDetail(id);
-                    })
+                    this.getDetail(id);
+                })
                     .finally(() => loading.close());
             });
         },
@@ -251,7 +266,13 @@ export default {
                     avatarAttachmentList: data.userAvatar ? [{fileUrl: data.userAvatar}] : [],
                     coverAttachmentList: data.titleImg ? [{fileUrl: data.titleImg}] : [],
                 };
-                this.isViewMode = data.status === 1;
+                this.isViewMode = Number(data.status) === 1;
+                this.findObject(this.formOption.column, "title").disabled = this.isViewMode
+                this.findObject(this.formOption.column, "userName").disabled = this.isViewMode
+                this.findObject(this.formOption.column, "likes").disabled = this.isViewMode
+                this.findObject(this.formOption.column, "titleImg").disabled = this.isViewMode
+                this.findObject(this.formOption.column, "userAvatar").disabled = this.isViewMode
+                this.findObject(this.formOption.column, "content").disabled = this.isViewMode
             });
         },
         goBack() {

src/views/story/index.vue

@@ -66,7 +66,7 @@ export default {
                 delBtn: false,
                 viewBtn: false,
                 selection: false,
-                searchMenuSpan: 6,
+                searchMenuSpan: 12,
                 column: [
                     {label: "ID", prop: "id", width: 80, hide: true},
                     {label: "标题", prop: "title", search: true, overHidden: true},
@@ -155,3 +155,9 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+::v-deep .el-col-md-8 {
+    width: 24.33333%;
+}
+</style>