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

1.代码优化

v1.0.0
sws 2024-09-18 13:44:59 +08:00
parent ca409f551a
commit b9cdd09fc4
8 changed files with 82 additions and 69 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;

48
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,25 +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_auto_list = new_data.content.tabs_list[0].data_auto_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) => {

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

@ -26,6 +26,7 @@ interface DefaultArticleTabs {
article_theme: string;
article_carousel_col: string;
tabs_list: articleTabsList[];
tabs_active_index: number;
field_show: string[];
};
style: {
@ -72,6 +73,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
{ 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',