sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增视频显示

master
于肖磊 2026-03-02 14:24:29 +08:00
parent d77eee1668
commit 2c7fc9d164
11 changed files with 48 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/model-plugins-video-list/index.vue
View File

@ -18,7 +18,7 @@
</div>
</template>
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="plugins_video_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="plugins_video_theme != '0' ? content_padding : 'width: 0;'">
<div class="flex-col" :class="plugins_video_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div class="flex-col" :class="plugins_video_theme == '3' ? 'flex-1 flex-width' : ''">
<div v-if="field_show.includes('3')" class="title" :class="plugins_video_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="plugins_video_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<!-- <div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="plugins_video_desc">{{ item.data.describe || '' }}</div> -->
</div>
@ -54,7 +54,7 @@
<subscript-index :value="props.value"></subscript-index>
</div>
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="plugins_video_theme != '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div class="flex-col">
<div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="plugins_video_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<!-- <div v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="plugins_video_desc">{{ item.data.describe || '' }}</div> -->
</div>
@ -86,7 +86,7 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
/**
* @description: 文章列表（渲染）
* @description: 视频列表（渲染）
* @param value{Object} 样式数据
* @param isCommonStyle{Object} 是否为通用样式
*/
@ -123,10 +123,8 @@ const data_list = ref<plugins_videoList[]>([]);
const plugins_video_theme = ref('0');
// 是否显示
const field_show = ref(['0', '1']);
// 文章
// 视频
const plugins_video_name = ref('');
// 文章描述
const plugins_video_desc = ref('');
// 日期
const plugins_video_date = ref('');
// 浏览量
@ -139,7 +137,7 @@ const img_radius = ref('');
const content_padding = ref('');
// 内容间距
const content_spacing = ref('');
// 文章间距
// 视频间距
const plugins_video_spacing = ref('');
const plugins_video_item_height = ref('155');
@ -191,11 +189,11 @@ const get_auto_data_list = async () => {
}
};
onMounted(() => {
// 判断数据类型是选择文章且数据不为空
// 判断数据类型是选择视频且数据不为空
if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
data_list.value = new_content.value.data_list;
} else if (new_content.value.data_type == '1' && !isEmpty(new_content.value.data_auto_list)) {
// 判断数据是筛选文章且数据不为空
// 判断数据是筛选视频且数据不为空
data_list.value = new_content.value.data_auto_list.map((item: any) => ({
id: get_math(),
new_title: '',
@ -232,11 +230,11 @@ watch(
{ deep: true }
);
// 文章内容高度
// 视频内容高度
const plugins_video_name_height_computer = computed(() => {
return new_style.value.name_size * 2.4 + 'px';
});
// 文章行高计算
// 视频行高计算
const plugins_video_name_line_height_computer = computed(() => {
return new_style.value.name_size * 1.2 + 'px';
});
@ -285,7 +283,7 @@ const carousel_key = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
// 文章名称浮动样式
// 视频名称浮动样式
const float_name_style = computed(() => {
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius = old_radius, name_bg_padding = old_padding, name_bg_margin = old_margin } = new_style.value;
const data = {
@ -295,7 +293,7 @@ const float_name_style = computed(() => {
let location = 'position:absolute;bottom:0;left:0;right:0;'
return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
});
const field_desc_row = ref('1');
const plugins_video_left_right_width_margin = computed(() => {
const { margin = old_margin } = new_style.value;
return margin.margin_left + margin.margin_right;
@ -310,14 +308,6 @@ watch(
field_show.value = new_content.field_show;
// 样式
plugins_video_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
// 文章描述
const desc_size = new_style.desc_size;
field_desc_row.value = new_content.field_desc_row;
if (new_content.field_desc_row == '2') {
plugins_video_desc.value = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
} else {
plugins_video_desc.value = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:'+ desc_size + 'px;color:' + new_style.desc_color + ';';
}
plugins_video_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
plugins_video_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';';
content_radius.value = radius_computer(new_style.content_radius);
@ -326,9 +316,9 @@ watch(
content_padding.value = padding_computer(new_style.padding);
// 内容间距
content_spacing.value = `gap: ${new_style.content_spacing}px;`;
// 文章间距
// 视频间距
plugins_video_spacing.value = `gap: ${new_style.plugins_video_spacing}px;`;
// 文章样式
// 视频样式
plugins_video_style.value = '';
plugins_video_img_style.value = '';
// 背景图的处理
@ -380,7 +370,7 @@ watch(
},
{ deep: true, immediate: true }
);
// 文章主题class计算
// 视频主题class计算
const plugins_video_theme_class = computed(() => {
switch (plugins_video_theme.value) {
case '0':

5
src/components/model-plugins-video-list/model-plugins-video-list-content.vue
View File

@ -30,11 +30,6 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>

2
src/components/model-plugins-video-list/model-plugins-video-list-setting.vue
View File

@ -10,7 +10,7 @@
</template>
<script setup lang="ts">
/**
* @description: 文章选项卡列表（设置）
* @description: 视频选项卡列表（设置）
* @param type{String} 类型是进入内容组件还是样式组件
* @param value{Object} 样式数据
*/

7
src/components/model-plugins-video-list/model-plugins-video-list-styles.vue
View File

@ -24,13 +24,6 @@
</template>
</color-text-size-group>
</el-form-item>
<el-form-item label="视频描述">
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.name_desc_space" :max="100"></slider>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="日期时间">
<color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
</el-form-item>

6
src/components/model-plugins-video-tabs/index.vue
View File

@ -18,7 +18,7 @@
import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { cloneDeep } from 'lodash';
/**
* @description: 文章选项卡列表 （渲染）
* @description: 视频选项卡列表 （渲染）
* @param value{Object} 传过来的数据，用于数据渲染
*/
const props = defineProps({
@ -56,7 +56,7 @@ watch(
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
// 文章区域背景设置
// 视频区域背景设置
const plugins_video_content_data = {
color_list: new_style.plugins_video_content_color_list,
direction: new_style.plugins_video_content_direction,
@ -65,7 +65,7 @@ watch(
}
plugins_video_container.value = gradient_computer(plugins_video_content_data) + margin_computer(new_style.plugins_video_content_margin) + radius_computer(new_style.plugins_video_content_radius) + border_computer(new_style.plugins_video_content) + box_shadow_computer(new_style.plugins_video_content);
plugins_video_img_container.value = background_computer(plugins_video_content_data) + padding_computer(new_style.plugins_video_content_padding);
//文章内容设置
//视频内容设置
new_data.content.theme = new_data.content.plugins_video_theme;
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;

7
src/components/model-plugins-video-tabs/model-plugins-video-tabs-content.vue
View File

@ -88,11 +88,6 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.field_show.includes('2')" label="描述行数">
<el-radio-group v-model="form.field_desc_row">
<el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="form.plugins_video_theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
@ -167,7 +162,7 @@ const base_list = reactive({
{ name: '视频标题', value: '3' },
{ name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' },
{ name: '描述', value: '2' },
// { name: '描述', value: '2' },
],
field_desc_row: [
{ name: '一行', value: '1' },

2
src/components/model-plugins-video-tabs/model-plugins-video-tabs-setting.vue
View File

@ -10,7 +10,7 @@
</template>
<script setup lang="ts">
/**
* @description: 文章选项卡列表 （设置）
* @description: 视频选项卡列表 （设置）
* @param type{String} 类型（1：内容，2：样式）
* @param value{Object} 传过来的数据，用于数据渲染
*/

7
src/components/model-plugins-video-tabs/model-plugins-video-tabs-styles.vue
View File

@ -126,13 +126,6 @@
</template>
</color-text-size-group>
</el-form-item>
<el-form-item label="视频描述">
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.name_desc_space"></slider>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="日期时间">
<color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
</el-form-item>

14
src/config/const/plugins-video-list.ts
View File

@ -26,7 +26,6 @@ interface DefaultPluginsVideoList {
order_by_release_time_rule: string;
order_by_duration_rule: string;
field_show: string[];
field_desc_row: string,
is_cover: string;
is_recommended: string;
is_hot: string;
@ -50,9 +49,9 @@ interface DefaultPluginsVideoList {
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
// desc_color: string;
// desc_size: number;
// name_desc_space: number;
time_weight: string;
time_size: number;
time_color: string;
@ -103,7 +102,6 @@ const defaultPluginsVideoList: DefaultPluginsVideoList = {
order_by_release_time_rule: 'default',
order_by_duration_rule: 'default',
field_show: ['0', '1', '3'],
field_desc_row: '1',
is_cover: defaultSetting.is_cover,
is_recommended: '0',
is_hot: '0',
@ -146,9 +144,9 @@ const defaultPluginsVideoList: DefaultPluginsVideoList = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,
// desc_color: '#999',
// desc_size: 12,
// name_desc_space: 4,
time_weight: '400',
time_size: 12,
time_color: 'rgba(153, 153, 153, 1)',

16
src/config/const/plugins-video-tabs.ts
View File

@ -41,7 +41,7 @@ interface DefaultPluginsVideoTabs {
tabs_list: pluginsVideoTabsList[];
tabs_active_index: number;
field_show: string[];
field_desc_row: string;
// field_desc_row: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
@ -102,9 +102,9 @@ interface DefaultPluginsVideoTabs {
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
// desc_color: string;
// desc_size: number;
// name_desc_space: number;
time_weight: string;
time_size: number;
time_color: string;
@ -162,7 +162,7 @@ const defaultPluginsVideoTabs: DefaultPluginsVideoTabs = {
],
tabs_active_index: 0,
field_show: ['0', '1', '3'],
field_desc_row: '1',
// field_desc_row: '1',
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
@ -332,9 +332,9 @@ const defaultPluginsVideoTabs: DefaultPluginsVideoTabs = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,
// desc_color: '#999',
// desc_size: 12,
// name_desc_space: 4,
time_weight: '400',
time_size: 12,
time_color: 'rgba(153, 153, 153, 1)',

17
src/views/layout/index.vue
View File

@ -301,9 +301,9 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
clone_form.footer.show_tabs = '0';
// 字段比coupon多
const new_array_1 = ['goods-list', 'article-list', 'blog', 'shop', 'realstore', 'binding', 'ask', 'activity'];
const new_array_1 = ['goods-list', 'article-list', 'blog', 'shop', 'realstore', 'binding', 'ask', 'activity', 'plugins-video'];
// 数据比正常list多一级
const new_array_2 = ['goods-tabs', 'article-tabs', 'blog-tabs', 'ask-tabs'];
const new_array_2 = ['goods-tabs', 'article-tabs', 'blog-tabs', 'ask-tabs', 'plugins-video-tabs'];
// 数据格式简单
const new_array_3 = ['coupon'];
// 层级更深
@ -569,17 +569,24 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
new_com_data_content.keywords = '';
new_com_data_content.category_ids = defaultConfigSetting.category_ids;
new_com_data_content.number = defaultConfigSetting.page_size;
new_com_data_content.order_by_rule = defaultConfigSetting.order_by_rule;
// 视频列表的排序规则
if (['plugins-video', 'plugins-video-tabs'].includes(type)) {
new_com_data_content.order_by_type = 'default';
new_com_data_content.order_by_release_time_rule = 'default';
new_com_data_content.order_by_duration_rule = 'default';
} else {
new_com_data_content.order_by_type = defaultConfigSetting.order_by_type;
new_com_data_content.order_by_rule = defaultConfigSetting.order_by_rule;
}
// 根据是否为商品，决定是否设置品牌ID或封面标志
if (is_goods) {
new_com_data_content.brand_ids = defaultConfigSetting.brand_ids;
} else {
// 文章博客的显示
if (['article-list', 'article-tabs', 'blog', 'blog-tabs'].includes(type)) {
if (['article-list', 'article-tabs', 'blog', 'blog-tabs', 'plugins-video', 'plugins-video-tabs'].includes(type)) {
new_com_data_content.is_cover = defaultConfigSetting.is_cover;
if (['blog', 'blog-tabs'].includes(type)) {
if (['blog', 'blog-tabs', 'plugins-video', 'plugins-video-tabs'].includes(type)) {
new_com_data_content.is_recommended = '0';
new_com_data_content.is_hot = '0';
}