1.文章优化

sws 2024-08-26

src/components/model-article-list/index.vue

@@ -3,7 +3,7 @@
         <div class="re oh" :style="style">
             <div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
                 <template v-for="(item, index) in data_list" :key="index">
-                    <div class="item gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
+                    <div class="item bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
                         <template v-if="article_theme !== '3'">
                             <template v-if="item.new_cover.length > 0">
                                 <image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
@@ -13,8 +13,8 @@
                         <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
                             <div class="title" :class="article_theme == '3' ? 'text-line-1 flex-1 flex-width' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
                             <div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
-                                <div :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
+                                <div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
-                                <icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
+                                <icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">{{ item.data.access_count ? item.data.access_count : '16' }}</icon>
                             </div>
                         </div>
                     </div>
@@ -24,7 +24,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, padding_computer, radius_computer, get_math } from '@/utils';
+import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 import ArticleAPI from '@/api/article';
 const props = defineProps({
@@ -42,6 +42,8 @@ const style = ref('');
 const style_container = ref('');
 interface dataObj {
     cover?: string;
+    add_time?: string;
+    access_count?: string;
     title?: string;
 }
 interface ArticleList {
@@ -83,12 +85,13 @@ const article_style = ref({});
 const default_data_list: ArticleList = {
     id: 0,
     data: {},
-    new_title: '标题',
+    new_title: '测试标题',
     new_cover: [],
 };
 watch(
     props.value,
     (newVal, oldValue) => {
+        console.log(newVal);
         const new_content = newVal?.content;
         const new_style = newVal?.style;
         // 内容
@@ -119,10 +122,10 @@ watch(
         // 文章间距
         article_spacing.value = `gap: ${new_style.article_spacing}px;`;
         // 文章样式
-        article_style.value = content_spacing.value;
+        article_style.value = '';
         style.value = '';
         if (article_theme.value == '0') {
-            article_style.value += content_padding.value + content_radius.value;
+            article_style.value += content_spacing.value + content_padding.value + content_radius.value;
         } else if (article_theme.value == '1') {
             article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
             article_style.value += article_spacing_children.value + content_radius.value;

src/components/model-article-list/model-article-list-content.vue

@@ -120,7 +120,11 @@ const init = () => {
     }
 };
 const theme_change = (val: any) => {
-    form.field_show = ['1'];
+    if (val == '3' || val == '4') {
+        form.field_show = ['1'];
+    } else {
+        form.field_show = ['0', '1'];
+    }
 };
 
 const data_list_remove = (index: number) => {

src/components/model-article-list/model-article-list-styles.vue

@@ -47,10 +47,13 @@
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
-                <template v-if="theme !== '3'">
+
+                <template v-if="theme == '0'">
                     <el-form-item label="内容间距">
                         <slider v-model="form.content_spacing"></slider>
                     </el-form-item>
+                </template>
+                <template v-if="theme !== '3'">
                     <el-form-item label="文章间距">
                         <slider v-model="form.article_spacing"></slider>
                     </el-form-item>

src/components/model-article-tabs/model-article-tabs-content.vue

@@ -12,7 +12,7 @@
                     <el-switch v-model="form.tabs_top_up" />
                 </el-form-item>
                 <el-form-item label="文章风格">
-                    <el-radio-group v-model="form.article_theme">
+                    <el-radio-group v-model="form.article_theme" @change="article_theme_change">
                         <el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
@@ -74,7 +74,7 @@
             <card-container>
                 <div class="mb-12">列表设置</div>
                 <el-form-item label="是否显示">
-                    <el-checkbox-group v-model="form.is_show">
+                    <el-checkbox-group v-model="form.field_show">
                         <el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>
@@ -148,6 +148,13 @@ const init = () => {
         base_list.article_category_list = article_store.article;
     }
 };
+const article_theme_change = (val: any) => {
+    if (val == '3' || val == '4') {
+        form.field_show = ['1'];
+    } else {
+        form.field_show = ['0', '1'];
+    }
+};
 
 // 开启关闭链接
 const url_value_dialog_visible = ref(false);