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

新增短视频显示

master
于肖磊 2026-02-27 18:30:09 +08:00
parent 53ce11ad83
commit d77eee1668
6 changed files with 63 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/url-value.ts
View File

@ -107,7 +107,15 @@ class UrlValueAPI {
method: 'post', method: 'post',
data, data,
}); });
} }
/** 博客指定数据 */
static getPluginVideoList(data: any) {
return api_request({
url: `plugins/index/pluginsname/video/pluginscontrol/diyvideo/pluginsaction/index`,
method: 'post',
data,
});
}
} }
export default UrlValueAPI; export default UrlValueAPI;

64
src/components/common/url-value/link-plugins-video.vue
View File

@ -2,23 +2,20 @@
<!-- 商品分类 --> <!-- 商品分类 -->
<div class="container"> <div class="container">
<div class="flex-row jc-e gap-20 mb-20 align-c"> <div class="flex-row jc-e gap-20 mb-20 align-c">
<el-select v-model="category_ids" class="search-w" placeholder="请选择博客分类" filterable clearable @change="handle_search"> <div class="flex-row align-c gap-12">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" /> <div class="title horizontal-title">视频分类</div>
</el-select> <el-select v-model="category_ids" class="search-w" placeholder="请选择视频分类" filterable clearable @change="handle_search">
<el-select v-model="category_ids" class="search-w" placeholder="请选择排序类型" filterable clearable @change="handle_search"> <el-option v-for="item in get_data_list(common_store.common.plugins, 'video.category_list')" :key="item.id" :label="item.name" :value="item.id" />
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" /> </el-select>
</el-select> </div>
<el-select v-model="category_ids" class="search-w" placeholder="请选择发布时间" filterable clearable @change="handle_search"> <div class="flex-row align-c gap-12">
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" /> <div class="title horizontal-title">关键字</div>
</el-select> <el-input v-model="search_value" placeholder="请输入关键字" class="search-w" @change="handle_search">
<el-select v-model="category_ids" class="search-w" placeholder="请选择视频时长" filterable clearable @change="handle_search"> <template #suffix>
<el-option v-for="item in article_category_list" :key="item.id" :label="item.name" :value="item.id" /> <icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
</el-select> </template>
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search"> </el-input>
<template #suffix> </div>
<icon name="search" size="16" color="9" class="c-pointer" @click="handle_search"></icon>
</template>
</el-input>
</div> </div>
<div class="content"> <div class="content">
<el-table v-loading="loading" :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click" @select="handle_select" @select-all="handle_select"> <el-table v-loading="loading" :data="tableData" class="w" :header-cell-style="{ background: '#f7f7f7' }" row-key="id" height="438" fixed @row-click="row_click" @select="handle_select" @select-all="handle_select">
@ -28,15 +25,14 @@
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio> <el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="id" label="ID" width="80" type="" /> <el-table-column prop="id" label="ID" width="100" type="" />
<el-table-column prop="cover" label="博客"> <el-table-column prop="cover" label="封面" width="120">
<template #default="scope"> <template #default="scope">
<div class="flex-row align-c gap-10"> <image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="标题" />
<el-table-column prop="category_name" label="分类" />
<template #empty> <template #empty>
<no-data :text="empty_text"></no-data> <no-data :text="empty_text"></no-data>
</template> </template>
@ -82,24 +78,19 @@ onMounted(() => {
const modelValue = defineModel({ type: Object, default: {} }); const modelValue = defineModel({ type: Object, default: {} });
const tableData = ref<pageLinkList[]>([]); const tableData = ref<pageLinkList[]>([]);
const search_value = ref(''); const search_value = ref('');
const category_ids = ref('');
const loading = ref(false); const loading = ref(false);
const init = () => { const init = () => {
template_selection.value = ''; template_selection.value = '';
category_ids.value = ''; category_ids.value = '';
search_value.value = ''; search_value.value = '';
article_category_list.value = get_data_list(common_store.common.plugins, 'blog.category_list');
get_list(1); get_list(1);
}; };
const handle_search = () => { const handle_search = () => {
get_list(1); get_list(1);
}; };
const category_ids = ref('');
interface articleCategory {
id: string;
name: string;
url: string;
}
const article_category_list = ref<articleCategory[]>([]);
const template_selection = ref(''); const template_selection = ref('');
//#region 分页 -----------------------------------------------start //#region 分页 -----------------------------------------------start
// 当前页 // 当前页
@ -118,7 +109,7 @@ const get_list = (new_page: number) => {
page_size: page_size.value, page_size: page_size.value,
}; };
loading.value = true; loading.value = true;
UrlValueAPI.getblogList(new_data).then((res: any) => { UrlValueAPI.getPluginVideoList(new_data).then((res: any) => {
tableData.value = res.data.data_list; tableData.value = res.data.data_list;
if (res.data.data_list.length === 0) { if (res.data.data_list.length === 0) {
empty_text.value = '暂无数据'; empty_text.value = '暂无数据';
@ -185,4 +176,13 @@ const handle_select = (selection: any) => {
} }
} }
} }
.horizontal-title {
font-size: 1.2rem;
line-height: 3.2rem;
text-align: right;
width: 100%;
color: #606266;
flex-basis: max-content;
white-space: nowrap;
}
</style> </style>

4
src/components/common/url-value/url-value-dialog.vue
View File

@ -58,6 +58,10 @@
<template v-else-if="link_select == 'blog'"> <template v-else-if="link_select == 'blog'">
<link-blog v-model="link_value" :select-is-url="selectIsUrl" :multiple="multiple" :reset="reset_compontent"></link-blog> <link-blog v-model="link_value" :select-is-url="selectIsUrl" :multiple="multiple" :reset="reset_compontent"></link-blog>
</template> </template>
<!-- 博客页面-插件 -->
<template v-else-if="link_select == 'plugins_video'">
<link-plugins-video v-model="link_value" :select-is-url="selectIsUrl" :multiple="multiple" :reset="reset_compontent"></link-plugins-video>
</template>
<template v-else-if="!isEmpty(link_url)"> <template v-else-if="!isEmpty(link_url)">
<!-- 商品页面 --> <!-- 商品页面 -->
<template v-if="link_select == 'goods'"> <template v-if="link_select == 'goods'">

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

@ -20,14 +20,14 @@
<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 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' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
<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('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 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> </div>
<div class="flex-row jc-sb gap-8" :class="plugins_video_theme == '3' ? 'ml-10' : 'align-e mt-10'"> <div class="flex-row jc-sb gap-8" :class="plugins_video_theme == '3' ? 'ml-10' : 'align-e mt-10'">
<div :style="plugins_video_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div> <div :style="plugins_video_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view"> <div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="plugins_video_page_view">
<icon name="eye"></icon> <icon name="eye"></icon>
<div> <div>
{{ item.data.access_count ? item.data.access_count : '16' }} {{ item.data.access_count ? item.data.access_count : '0' }}
</div> </div>
</div> </div>
</div> </div>
@ -56,7 +56,7 @@
<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 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" :style="'gap:' + new_style.name_desc_space + 'px;'">
<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('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 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> </div>
<div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] "> <div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
<div :style="plugins_video_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div> <div :style="plugins_video_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>

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

@ -18,7 +18,7 @@
</card-container> </card-container>
<div class="divider-line"></div> <div class="divider-line"></div>
<card-container class="card-container-br"> <card-container class="card-container-br">
<div class="mb-12">短视频设置</div> <div class="mb-12">视频设置</div>
<!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 --> <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
<data-filter type="plugins_video" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter> <data-filter type="plugins_video" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
</card-container> </card-container>
@ -56,7 +56,7 @@ import { get_math } from '@/utils';
import { commonStore } from '@/store'; import { commonStore } from '@/store';
const common_store = commonStore(); const common_store = commonStore();
/** /**
* @description 短视频列表（内容） * @description 视频列表（内容）
* @param value{Object} 传过来的数据，用于数据渲染 * @param value{Object} 传过来的数据，用于数据渲染
* @param styles{Object} 样式 * @param styles{Object} 样式
* @param defaultConfig{Object} 默认配置 * @param defaultConfig{Object} 默认配置
@ -101,14 +101,14 @@ const base_list = reactive({
{ name: '四列展示', value: '3' }, { name: '四列展示', value: '3' },
], ],
data_type_list: [ data_type_list: [
{ name: '选择短视频', value: '0' }, { name: '选择视频', value: '0' },
{ name: '筛选短视频', value: '1' }, { name: '筛选视频', value: '1' },
], ],
field_show_list: [ field_show_list: [
{ name: '短视频标题', value: '3' }, { name: '视频标题', value: '3' },
{ name: '日期时间', value: '0' }, { name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' }, { name: '浏览量', value: '1' },
{ name: '描述', value: '2' }, // { name: '描述', value: '2' },
], ],
field_desc_row: [ field_desc_row: [
{ name: '一行', value: '1' }, { name: '一行', value: '1' },
@ -202,7 +202,7 @@ const url_value_dialog_call_back = (item: any[]) => {
}; };
} }
}; };
// 标题浮起之后短视频标题的颜色和字体更新 // 标题浮起之后视频标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => { const switch_chage = (val: string | number | boolean) => {
if (val == '1') { if (val == '1') {
data.value.name_color = '#fff'; data.value.name_color = '#fff';

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

@ -34,7 +34,7 @@
<el-form-item v-if="form.tabs_theme == '3'" label="选中图标"> <el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
<upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload> <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
</el-form-item> </el-form-item>
<el-form-item label="短视频风格"> <el-form-item label="视频风格">
<el-radio-group v-model="form.plugins_video_theme" @change="plugins_video_theme_change"> <el-radio-group v-model="form.plugins_video_theme" @change="plugins_video_theme_change">
<el-radio v-for="item in base_list.plugins_video_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio> <el-radio v-for="item in base_list.plugins_video_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group> </el-radio-group>
@ -115,7 +115,7 @@ import { get_math, tabs_style } from '@/utils';
import { commonStore } from '@/store'; import { commonStore } from '@/store';
const common_store = commonStore(); const common_store = commonStore();
/** /**
* @description: 短视频选项卡列表 （内容） * @description: 视频选项卡列表 （内容）
* @param value{Object} 内容数据 * @param value{Object} 内容数据
* @param tabsStyle{Object} tabs样式数据 * @param tabsStyle{Object} tabs样式数据
* @param defaultConfig{Object} 默认配置 * @param defaultConfig{Object} 默认配置
@ -160,11 +160,11 @@ const base_list = reactive({
{ name: '四列展示', value: '3' }, { name: '四列展示', value: '3' },
], ],
data_type_list: [ data_type_list: [
{ name: '选择短视频', value: '0' }, { name: '选择视频', value: '0' },
{ name: '筛选短视频', value: '1' }, { name: '筛选视频', value: '1' },
], ],
field_show_list: [ field_show_list: [
{ name: '短视频标题', value: '3' }, { name: '视频标题', value: '3' },
{ name: '日期时间', value: '0' }, { name: '日期时间', value: '0' },
{ name: '浏览量', value: '1' }, { name: '浏览量', value: '1' },
{ name: '描述', value: '2' }, { name: '描述', value: '2' },
@ -273,7 +273,7 @@ const tabs_add = () => {
// emit('update:value', form); // emit('update:value', form);
}; };
// 指定短视频 // 指定视频
const data_list_remove = (index: number, plugins_video_index: number) => { const data_list_remove = (index: number, plugins_video_index: number) => {
form.tabs_list[plugins_video_index].data_list.splice(index, 1); form.tabs_list[plugins_video_index].data_list.splice(index, 1);
}; };
@ -295,7 +295,7 @@ const data_list_replace = (index: number, row_index: number) => {
}; };
const plugins_video_index = ref(0); const plugins_video_index = ref(0);
// 添加短视频 // 添加视频
const plugins_video_add = (index: number) => { const plugins_video_add = (index: number) => {
url_value_multiple_bool.value = true; url_value_multiple_bool.value = true;
url_value_dialog_visible.value = true; url_value_dialog_visible.value = true;
@ -354,7 +354,7 @@ watchEffect(() => {
form.is_general_safe_distance = '0'; form.is_general_safe_distance = '0';
} }
}); });
// 标题浮起之后短视频标题的颜色和字体更新 // 标题浮起之后视频标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => { const switch_chage = (val: string | number | boolean) => {
if (val == '1') { if (val == '1') {
styles.name_color = '#fff'; styles.name_color = '#fff';