更新青少年详情

src/views/Underage/adolescentList/detail.vue

@@ -18,12 +18,11 @@ onMounted(() => {
 <template>
   <div style="margin-top: 24px;">
     <h2>{{ detailData.title }}</h2>
-    <div class="text-indent content">
-      {{ detailData.content }}
+    <div class="text-indent content" v-html="detailData.content">
     </div>
-    <div style="display: inline-flex;justify-content: center; width: 100%;">
+    <!-- <div style="display: inline-flex;justify-content: center; width: 100%;">
       <el-image class="w-[300px] h-[300px]" :src="detailData.img"></el-image>
-    </div>
+    </div> -->
   </div>
 </template>
 <style lang="scss" scoped>
@@ -31,8 +30,7 @@ onMounted(() => {
   margin: 24px 0;
 }
 
-.text-indent {
-  text-indent: 2em;
-  line-height: 36px;
-}
-</style>
+// .text-indent {
+//   text-indent: 2em;
+//   line-height: 36px;
+// }</style>

src/views/Underage/adolescentList/form.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import uploadImage from '@/components/UploadImage/index.vue';
+import RichText from '@/components/RichText/index.vue';
 import {
   queryClassifyList
 } from "@/api/modules/adolescent";
@@ -46,6 +47,9 @@ const getTypeList = async () => {
   })
   typeList.value = code ? data.lists : []
 }
+function chanageEditorValue(val) {
+  newFormInline.value.content = val
+}
 onMounted(() => {
   getTypeList()
 })
@@ -69,7 +73,7 @@ defineExpose({ getRef });
         <el-radio :label="2">外链</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="封面图片" prop="img" v-if="newFormInline.from === 1">
+    <el-form-item label="封面图片" prop="img">
       <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.img" />
     </el-form-item>
     <el-form-item label="url链接地址" prop="url" v-if="newFormInline.from === 2">
@@ -88,7 +92,9 @@ defineExpose({ getRef });
       <el-input type="textarea" v-model="newFormInline.introduced" clearable placeholder="请输入简介" />
     </el-form-item>
     <el-form-item label="内容" prop="content">
-      <el-input type="textarea" v-model="newFormInline.content" clearable placeholder="请输入内容" />
+      <RichText style="border: 1px solid #ccc;" :echoValue="newFormInline.content" @changeValue="chanageEditorValue">
+      </RichText>
+      <!-- <el-input type="textarea" v-model="newFormInline.content" clearable placeholder="请输入内容" /> -->
     </el-form-item>
   </el-form>
 </template>

src/views/Underage/adolescentList/hook.tsx

@@ -117,7 +117,7 @@ export function useData() {
           id: Number(rowData?.id || 0) ?? "",
         }
       },
-      width: "40%",
+      width: "60%",
       hideFooter: true,
       closeOnClickModal: false,
       contentRenderer: () => h(detailView, { ref: formRef, formInline: null })