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

Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-09-18 13:45:31 +08:00
parent 93346c5f87 b9cdd09fc4
commit 66bb9b184d
10 changed files with 152 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/common/tabs-view/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="flex-row gap-10 jc-sb align-c">
<div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
<div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == activeIndex ? ' active' : '')">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
@ -10,7 +10,7 @@
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="title_style(index)">{{ item.title }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == activeIndex ? tabs_check : ''">{{ item.desc }}</div>
<icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<div class="bottom_line" :style="tabs_check"></div>
</div>
@ -23,6 +23,7 @@
<script lang="ts" setup>
import { gradient_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { active } from 'sortablejs';
const props = defineProps({
value: {
type: Object,
@ -31,7 +32,11 @@ const props = defineProps({
isTabs: {
type: Boolean,
default: false,
}
},
activeIndex: {
type: Number,
default: 0,
},
});
// const tabs = ref(props.value);
// 用于页面判断显示
@ -67,14 +72,14 @@ const tabs_check = computed(() => {
// 选中的内部样式
const tabs_theme_style = computed(() => {
return {
tabs_title_checked: `font-weight: ${ new_style.value.tabs_weight_checked };font-size: ${ new_style.value.tabs_size_checked}px;color:${ new_style.value.tabs_color_checked };`,
tabs_title: `font-weight: ${ new_style.value.tabs_weight };font-size: ${ new_style.value.tabs_size}px;color:${ new_style.value.tabs_color };`,
tabs_title_checked: `font-weight: ${new_style.value.tabs_weight_checked};font-size: ${new_style.value.tabs_size_checked}px;color:${new_style.value.tabs_color_checked};`,
tabs_title: `font-weight: ${new_style.value.tabs_weight};font-size: ${new_style.value.tabs_size}px;color:${new_style.value.tabs_color};`,
};
});
const title_style = (index: number) => {
// 默认是未选中的状态
let style = `${ tabs_theme_style.value.tabs_title }`;
let style = `${tabs_theme_style.value.tabs_title}`;
if (index == 0) {
let checked_style = tabs_theme_style.value.tabs_title_checked;
if (['2', '4'].includes(tabs_theme_index.value)) {
@ -86,8 +91,8 @@ const title_style = (index: number) => {
};
// icon的渐变色处理
const icon_tabs_check = () => {
return `${ tabs_check.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
}
return `${tabs_check.value};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
};
</script>
<style lang="scss" scoped>
.tabs {
@ -96,6 +101,7 @@ const icon_tabs_check = () => {
padding: 0 0 0.5rem 0;
// margin: 0 1rem;
position: relative;
transition: all 0.3s ease-in-out;
&:first-of-type {
margin-left: 0;
}
@ -149,7 +155,7 @@ const icon_tabs_check = () => {
&.tabs-style-2 {
&.active {
.desc {
background: #FF5E5E;
background: #ff5e5e;
color: #fff;
}
}
@ -162,7 +168,7 @@ const icon_tabs_check = () => {
&.tabs-style-3 {
&.active {
.title {
background: #FF2222;
background: #ff2222;
border-radius: 2rem;
padding: 0.2rem 1.2rem;
color: #fff;
@ -173,10 +179,10 @@ const icon_tabs_check = () => {
padding-bottom: 1.8rem;
&.active {
.title {
color: #FF2222;
color: #ff2222;
}
.icon {
color: #FF2222;
color: #ff2222;
display: block;
}
}
@ -186,13 +192,13 @@ const icon_tabs_check = () => {
&.active {
.title {
font-size: 1.1rem;
background: #FF5E5E;
background: #ff5e5e;
border-radius: 2rem;
padding: 0.2rem 0.7rem;
color: #fff;
}
.img {
border-color: #FF5E5E;
border-color: #ff5e5e;
}
}
.img {

6
src/components/common/upload/index.vue
View File

@ -446,10 +446,6 @@ const edit_type_event = (data: Tree) => {
const remove_type_event = (node: any, data: Tree) => {
app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
UploadAPI.delTree({ id: data.id }).then((res) => {
// const parent = node.parent;
// const children: Tree[] = parent.data.items || parent.data;
// const index = children.findIndex((d) => d.id === data.id);
// children.splice(index, 1);
get_tree(true);
ElMessage({
type: 'success',
@ -484,7 +480,7 @@ const get_attachment_list = (type?: string) => {
page_size: page_size.value,
type: upload_type.value == 'img' ? 'image' : upload_type.value == 'video' ? 'video' : upload_type.value == 'file' ? 'file' : '',
keywords: search_name.value,
category_id: category_id.value,
category_id: category_id.value == 'all' ? '' : category_id.value,
};
UploadAPI.getAttachmentList(new_data).then((res) => {
const data = res.data;

44
src/components/model-article-list/index.vue
View File

@ -2,28 +2,26 @@
<div class="oh" :style="style_container">
<div class="re oh" :style="style">
<div v-if="!['4'].includes(article_theme)" 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 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>
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
<div v-for="(item, index) in data_list" :key="index" 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>
</template>
<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') ? (!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="article_page_view">
<icon name="eye"></icon>
<div>
{{ item.data.access_count ? item.data.access_count : '16' }}
</div>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
</template>
<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') ? (!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="article_page_view">
<icon name="eye"></icon>
<div>
{{ item.data.access_count ? item.data.access_count : '16' }}
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<div v-else class="oh" :class="article_theme_class">
<el-carousel :key="carousel_key" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll ? true : false">
@ -156,10 +154,16 @@ const get_auto_data_list = async () => {
const new_content = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
onMounted(() => {
if (!isEmpty(new_content.value.data_list) && new_content.value.data_type == '0') {
if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
data_list.value = new_content.value.data_list;
} else if (!isEmpty(new_content.value.data_auto_list) && new_content.value.data_type == '1') {
data_list.value = new_content.value.data_auto_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;
data_list.value = new_content.value.data_auto_list.map((item: any) => ({
id: get_math(),
new_title: '',
new_cover: [],
data: item,
}));
} else {
data_list.value = Array(4).fill(default_data_list);
}

47
src/components/model-article-tabs/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="style_container">
<tabs-view ref="tabs" :value="article_tabs"></tabs-view>
<tabs-view ref="tabs" :value="article_tabs" :active-index="tabs_active_index"></tabs-view>
<div class="pt-10">
<model-article-list :value="article_tabs" :is-common-style="false"></model-article-list>
</div>
@ -18,24 +18,31 @@ const props = defineProps({
});
const style_container = ref('');
const article_tabs = ref({});
watch(() => props.value, (val) => {
const newVal = cloneDeep(val);
const new_style = newVal?.style;
let new_data = newVal;
new_data.content.theme = new_data.content.article_theme;
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
new_data.content.category_ids = new_data.content.tabs_list[0].category_ids;
new_data.content.carousel_col = new_data.content.article_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[0].data_list;
new_data.content.data_ids = new_data.content.tabs_list[0].data_ids;
new_data.content.number = new_data.content.tabs_list[0].number;
new_data.content.order_by_type = new_data.content.tabs_list[0].order_by_type;
new_data.content.order_by_rule = new_data.content.tabs_list[0].order_by_rule;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[0].is_cover;
article_tabs.value = new_data;
style_container.value += common_styles_computer(new_style.common_style);
}, { immediate: true, deep: true });
const tabs_active_index = ref(0);
watch(
() => props.value,
(val) => {
const newVal = cloneDeep(val);
const new_style = newVal?.style;
let new_data = newVal;
tabs_active_index.value = new_data.content.tabs_list.length - 1 >= new_data.content.tabs_active_index ? new_data.content.tabs_active_index : new_data.content.tabs_list.length - 1;
new_data.content.theme = new_data.content.article_theme;
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
new_data.content.carousel_col = new_data.content.article_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
new_data.content.data_ids = new_data.content.tabs_list[tabs_active_index.value].data_ids;
new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[tabs_active_index.value].is_cover;
article_tabs.value = new_data;
style_container.value += common_styles_computer(new_style.common_style);
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped></style>

5
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -32,7 +32,7 @@
<el-form-item label="显示标题">
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
</el-form-item>
<template v-if="active_index == index">
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
<el-input v-model="row.desc" placeholder="请输入简介" clearable />
</el-form-item>
@ -188,9 +188,8 @@ const article_theme_change = (val: any) => {
// 开启关闭链接
const url_value_dialog_visible = ref(false);
const active_index = ref(0);
const tabs_list_click = (item: any, index: number) => {
active_index.value = index;
form.tabs_active_index = index;
};
// 选项卡设置
const tabs_list_remove = (index: number) => {

46
src/components/model-goods-tabs/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="style_container">
<tabs-view ref="tabs" :value="props.value"></tabs-view>
<tabs-view ref="tabs" :value="props.value" :active-index="tabs_active_index"></tabs-view>
<div class="pt-10">
<model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
</div>
@ -21,25 +21,29 @@ const props = defineProps({
const style_container = ref('');
const tabs_list = ref({});
const tabs_active_index = ref(0);
watch(
() => props.value,
(val) => {
const new_val = cloneDeep(val);
const new_style = new_val?.style;
let new_data = new_val;
tabs_active_index.value = new_data.content.tabs_list.length - 1 >= new_data.content.tabs_active_index ? new_data.content.tabs_active_index : new_data.content.tabs_list.length - 1;
// 产品的值
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
new_data.content.category_ids = new_data.content.tabs_list[tabs_active_index.value].category_ids;
new_data.content.brand_ids = new_data.content.tabs_list[tabs_active_index.value].brand_ids;
new_data.content.number = new_data.content.tabs_list[tabs_active_index.value].number;
new_data.content.order_by_type = new_data.content.tabs_list[tabs_active_index.value].order_by_type;
new_data.content.order_by_rule = new_data.content.tabs_list[tabs_active_index.value].order_by_rule;
new_data.content.data_list = new_data.content.tabs_list[tabs_active_index.value].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[tabs_active_index.value].data_auto_list;
watch(() => props.value, (val) => {
const new_val = cloneDeep(val);
const new_style = new_val?.style;
let new_data = new_val;
// 产品的值
new_data.content.data_type = new_data.content.tabs_list[0].data_type;
new_data.content.category_ids = new_data.content.tabs_list[0].category_ids;
new_data.content.brand_ids = new_data.content.tabs_list[0].brand_ids;
new_data.content.number = new_data.content.tabs_list[0].number;
new_data.content.order_by_type = new_data.content.tabs_list[0].order_by_type;
new_data.content.order_by_rule = new_data.content.tabs_list[0].order_by_rule;
new_data.content.data_list = new_data.content.tabs_list[0].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[0].data_auto_list;
tabs_list.value = new_data;
// 公共样式
style_container.value += common_styles_computer(new_style.common_style);
},{ immediate: true, deep: true });
tabs_list.value = new_data;
// 公共样式
style_container.value += common_styles_computer(new_style.common_style);
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

6
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -35,7 +35,7 @@
<el-form-item label="显示标题">
<el-input v-model="row.title" placeholder="请输入标题文字" clearable />
</el-form-item>
<template v-if="active_index == index">
<template v-if="form.tabs_active_index == index">
<el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
<upload v-model="row.img" :limit="1" size="40" styles="2"></upload>
</el-form-item>
@ -174,10 +174,8 @@ onBeforeMount(() => {
}, 1000);
});
});
const active_index = ref(0);
const tabs_list_click = (item: any, index: number) => {
active_index.value = index;
form.value.tabs_active_index = index;
};
// 选项卡设置
const tabs_list_remove = (index: number) => {

15
src/views/layout/components/main/default/article-tabs.ts
View File

@ -15,6 +15,7 @@ interface articleTabsList {
order_by_type: string;
order_by_rule: string;
is_cover: string;
data_ids: string;
data_list: ArticleList[];
data_auto_list: ArticleList[];
}
@ -25,6 +26,7 @@ interface DefaultArticleTabs {
article_theme: string;
article_carousel_col: string;
tabs_list: articleTabsList[];
tabs_active_index: number;
field_show: string[];
};
style: {
@ -64,13 +66,14 @@ const defaultArticleTabs: DefaultArticleTabs = {
article_theme: '0',
article_carousel_col: '2',
tabs_list: [
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '2', title: '测试一', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '3', title: '测试二', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '4', title: '测试三', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '5', title: '测试四', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '6', title: '测试五', desc: '简介', data_type: '0', category_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '1', title: '热门推荐', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '2', title: '测试一', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '3', title: '测试二', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '4', title: '测试三', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '5', title: '测试四', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
{ id: '6', title: '测试五', desc: '简介', data_type: '0', category_ids: [], data_ids: '', number: 4, order_by_type: '0', order_by_rule: '0', is_cover: '1', data_list: [], data_auto_list: [] },
],
tabs_active_index: 0,
field_show: ['0', '1'],
},
style: {

2
src/views/layout/components/main/default/goods-tabs.ts
View File

@ -21,6 +21,7 @@ interface DefaultProductList {
theme: string;
carousel_col: number;
tabs_list: articleTabsList[];
tabs_active_index: number;
is_show: string[];
is_shop_show: string;
is_price_solo: string;
@ -81,6 +82,7 @@ const defaultProductList: DefaultProductList = {
{ id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', category_ids: [], brand_ids: [], data_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', data_list: [], data_auto_list: [] },
{ id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', category_ids: [], brand_ids: [], data_ids: [], number: 4, order_by_type: '0', order_by_rule: '0', data_list: [], data_auto_list: [] },
],
tabs_active_index: 0,
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: '1',
is_price_solo: '1',

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

@ -187,16 +187,48 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
const clone_form = cloneDeep(data);
clone_form.header.show_tabs = '1';
clone_form.footer.show_tabs = '0';
const new_array = ['goods-list', 'goods-tabs', 'article-list', 'article-tabs', 'coupon'];
// 字段比coupon多
const new_array_1 = ['goods-list', 'article-list'];
// 数据比正常list多一级
const new_array_2 = ['goods-tabs', 'article-tabs'];
// 数据格式简单
const new_array_3 = ['coupon'];
// 层级更深
const new_array_4 = ['data-magic'];
clone_form.diy_data = clone_form.diy_data.map((item: any) => {
if (new_array.includes(item.key)) {
if (new_array_1.includes(item.key)) {
item.com_data.content.data_ids = item.com_data.content.data_list.map((item: any) => item.data.id).join(',') || '';
// item.com_data.content.data_list = [];
// item.com_data.content.data_auto_list = [];
} else if (item.key == 'data-magic') {
item.com_data.content.data_list = item.com_data.content.data_list.map((item1: any) => {
return {
...item1,
data: [],
};
});
item.com_data.content.data_auto_list = [];
} else if (new_array_2.includes(item.key)) {
item.com_data.content.tabs_list.map((item: any) => {
item.data_ids = item.data_list.map((item1: any) => item1.data.id).join(',') || '';
item.data_list = item.data_list.map((item2: any) => {
return {
...item2,
data: [],
};
});
item.data_auto_list = [];
});
} else if (new_array_3.includes(item.key)) {
item.com_data.content.data_ids = item.com_data.content.data_list.map((item: any) => item.data.id).join(',') || '';
item.com_data.content.data_list = [];
item.com_data.content.data_auto_list = [];
} else if (new_array_4.includes(item.key)) {
item.com_data.content.data_magic_list.map((item1: any) => {
item1.goods_ids = item.goods_list.map((item2: any) => item2.data.id).join(',') || '';
// item1.goods_list = [];
item1.data_content.goods_ids = item1.data_content.goods_list.map((item2: any) => item2.data.id).join(',') || '';
item1.data_content.goods_list = item1.data_content.goods_list.map((item3: any) => {
return {
...item3,
data: [],
};
});
});
}
return {