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

Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-08-27 13:43:57 +08:00
parent 1f5351382a 963510f0b8
commit d2162e533a
29 changed files with 313 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="tabs flex-row oh">
<template v-for="(item, index) in tabs.content.tabs_list" :key="index">
<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' : '')">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
@ -8,10 +8,10 @@
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
<icon name="checked-1" class="icon"></icon>
<div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
<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>
<icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<div class="bottom_line" :style="tabs_check"></div>
</div>
</template>
</div>
@ -26,40 +26,72 @@ const props = defineProps({
default: () => ({}),
},
});
const tabs = ref(props.value);
// const tabs = ref(props.value);
// 用于页面判断显示
const state = reactive({
form: props.value.content,
new_style: props.value.style,
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
// 选中的值
const tabs_theme_index = computed(() => form.value.tabs_theme);
//选中的样式
const tabs_theme = computed(() => {
let tabs_theme = '';
if (tabs.value.content.tabs_theme == '1') {
if (form.value.tabs_theme == '1') {
tabs_theme = 'tabs-style-2';
} else if (tabs.value.content.tabs_theme == '2') {
} else if (form.value.tabs_theme == '2') {
tabs_theme = 'tabs-style-3';
} else if (tabs.value.content.tabs_theme == '3') {
} else if (form.value.tabs_theme == '3') {
tabs_theme = 'tabs-style-4';
} else if (tabs.value.content.tabs_theme == '4') {
} else if (form.value.tabs_theme == '4') {
tabs_theme = 'tabs-style-5';
} else {
tabs_theme = 'tabs-style-1';
}
return tabs_theme;
});
const tabs_theme_style = computed(() => {
// 选中的背景渐变色样式
const tabs_check = computed(() => {
const new_gradient_params = {
color_list: tabs.value.style.tabs_checked,
direction: tabs.value.style.tabs_direction,
color_list: new_style.value.tabs_checked,
direction: new_style.value.tabs_direction,
};
const new_style = {
tabs_check: gradient_computer(new_gradient_params),
tabs_title_checked: 'font-weight:' + tabs.value.style.tabs_weight_checked + ';' + 'font-size:' + tabs.value.style.tabs_size_checked + 'px;' + 'color:' + tabs.value.style.tabs_color_checked,
tabs_title: 'font-weight:' + tabs.value.style.tabs_weight + ';' + 'font-size:' + tabs.value.style.tabs_size + 'px;' + 'color:' + tabs.value.style.tabs_color,
};
return new_style;
return gradient_computer(new_gradient_params);
});
// 选中的内部样式
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 };`,
};
});
const title_style = (index: number) => {
// 默认是未选中的状态
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)) {
checked_style += tabs_check.value;
}
style = checked_style;
}
return style;
};
// icon的渐变色处理
const icon_tabs_check = () => {
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 {
max-width: 39rem;
.item {
padding: 0.5rem 0;
padding: 0 0 0.5rem 0;
margin: 0 1rem;
position: relative;
&:first-of-type {
@ -115,7 +147,7 @@ const tabs_theme_style = computed(() => {
&.tabs-style-2 {
&.active {
.desc {
background: red;
background: #FF5E5E;
color: #fff;
}
}
@ -128,7 +160,7 @@ const tabs_theme_style = computed(() => {
&.tabs-style-3 {
&.active {
.title {
background: red;
background: #FF2222;
border-radius: 2rem;
padding: 0.2rem 1.2rem;
color: #fff;
@ -139,10 +171,10 @@ const tabs_theme_style = computed(() => {
padding-bottom: 1.8rem;
&.active {
.title {
color: red;
color: #FF2222;
}
.icon {
color: red;
color: #FF2222;
display: block;
}
}
@ -152,13 +184,13 @@ const tabs_theme_style = computed(() => {
&.active {
.title {
font-size: 1.1rem;
background: red;
background: #FF5E5E;
border-radius: 2rem;
padding: 0.2rem 0.7rem;
color: #fff;
}
.img {
border-color: red;
border-color: #FF5E5E;
}
}
.img {

4
src/components/common/text-size-type/index.vue
View File

@ -10,7 +10,7 @@
<script setup lang="ts">
const typeface = defineModel('typeface', {
type: String,
default: 'normal'
default: '400'
});
const size = defineModel('size', {
type: Number,
@ -19,7 +19,7 @@ const size = defineModel('size', {
const font_weight = [
{ name: '加粗', value: '500' },
{ name: '正常', value: 'normal' },
{ name: '正常', value: '400' },
];
</script>

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

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -84,7 +84,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
import ArticleAPI from '@/api/article';
import { articleStore } from '@/store/article';
const article_store = articleStore();
@ -93,6 +93,10 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const form = reactive(props.value);
const base_list = reactive({
@ -210,6 +214,11 @@ const url_value_dialog_call_back = (item: any[]) => {
});
});
};
const styles = reactive(props.tabStyle);
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
</script>
<style lang="scss" scoped>
.content {

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

@ -1,7 +1,7 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-article-tabs-content :value="value.content"></model-article-tabs-content>
<model-article-tabs-content :value="value.content" :tab-style="value.style"></model-article-tabs-content>
</template>
<template v-else-if="type == '2'">
<model-article-tabs-styles :value="value.style" :content="value.content"></model-article-tabs-styles>

26
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -7,26 +7,16 @@
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
<el-radio-group v-model="form.tabs_weight_checked">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="字号">
<slider v-model="form.tabs_size_checked"></slider>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color_checked"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</div>
</el-form-item>
<el-form-item label="未选文字">
<el-radio-group v-model="form.tabs_weight">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="字号">
<slider v-model="form.tabs_size"></slider>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</div>
</el-form-item>
</card-container>
<card-container class="mb-8">

6
src/components/model-carousel/index.vue
View File

@ -116,7 +116,7 @@ const seat_list = computed(() => {
}
})
// 轮播图自适应高度
const newHeight = computed(() => form.value.height + 'px');
const newHeight = computed(() => new_style.value.height + 'px');
// 轮播图样式
const interval_type = ref('');
// 轮播图key值
@ -139,8 +139,8 @@ const interval_types = computed(() => interval_type.value == 'card' );
// 监听参数的使用
watchEffect(() => {
//#region 轮播图设置
const time = (new_style.value?.interval_time || 2) * 1000;
const display_is_roll = new_style.value.is_roll;
const time = (form.value?.interval_time || 2) * 1000;
const display_is_roll = form.value.is_roll;
const type = form.value.carousel_type;
const carousel_length = form.value.carousel_list.length;
// 判断跟历史的是否相等，不相等更新组件时间

9
src/components/model-carousel/model-carousel-content.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="auxiliary-line common-content-height">
<el-form :model="form" label-width="60">
<el-form :model="form" label-width="70">
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="样式设置">
@ -16,8 +16,11 @@
<el-radio value="cover">等比剪切</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">

7
src/components/model-carousel/model-carousel-styles.vue
View File

@ -9,11 +9,8 @@
</card-container>
<card-container class="mb-8">
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
<el-form-item label="高度设置">
<slider v-model="form.height" :max="1000"></slider>
</el-form-item>
</card-container>
<card-container class="mb-8">

17
src/components/model-custom/model-custom-content.vue
View File

@ -9,7 +9,7 @@
</el-select>
<div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
<div class="re flex align-c">
<image-empty v-model="form.source_list[img_key]" style="width: 10rem; height: 10rem;"></image-empty>
<image-empty v-model="form.source_list[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
<div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
</div>
<div class="flex-1 size-14 text-line-3">{{ form.source_list.title || form.source_list.name }}</div>
@ -40,7 +40,7 @@
</div>
</div>
</Dialog>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="dialog_type" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="[ form.data_source ]" @update:model-value="url_value_dialog_call_back" @close="url_value_close"></url-value-dialog>
</div>
</template>
<script setup lang="ts">
@ -81,6 +81,8 @@ const getCustominit = () => {
const { data_source } = res.data;
options.value = data_source;
data_source_store.set_data_source(data_source);
// 数据处理
processing_data(form.data_source);
});
}
@ -95,6 +97,7 @@ onBeforeMount(() => {
}
});
// 处理显示的图片和传递到下去的数据结构
const model_data_source = ref<data_list[]>([])
const processing_data = (key: string) => {
const list = options.value.filter(item => item.type == key);
if (list.length > 0) {
@ -103,14 +106,11 @@ const processing_data = (key: string) => {
const field_list = list[0].data.filter(item => item.type == 'images');
// 取出图片的key
if (field_list.length > 0) {
img_key.value = field_list[0].field;
form.img_key = field_list[0].field;
}
} else {
model_data_source.value = [];
}
if (!isEmpty(key)) {
dialog_type.value = [ key ];
}
};
//#endregion
//#region 自定义编辑的内部处理逻辑
@ -152,9 +152,6 @@ const accomplish = () => {
};
//#endregion
//#region 数据源更新逻辑处理
const model_data_source = ref<data_list[]>([])
const dialog_type = ref<string[]>([]);
const img_key = ref('');
// 打开弹出框
const url_value_dialog_visible = ref(false);
const changeDataSource = (key: string) => {
@ -181,7 +178,7 @@ const url_value_close = () => {
}
// 替换数据
const replace_data = () => {
if (!isEmpty(dialog_type.value)) {
if (!isEmpty(form.data_source)) {
url_value_dialog_visible.value = true;
}
}

106
src/components/model-data-magic/index.vue
View File

@ -149,6 +149,57 @@ const percentage = (num: number) => {
};
//#endregion
//#region 组装页面显示的数据
// 指示器的样式
const indicator_style = (item: any) => {
let styles = '';
if (!isEmpty(item.indicator_radius)) {
styles += radius_computer(item.indicator_radius)
}
const size = item?.indicator_size || 5;
if (item.indicator_style == 'num') {
styles += `color: ${item?.color || '#DDDDDD'};`;
styles += `font-size: ${size}px;`;
} else if (item.indicator_style == 'elliptic') {
styles += `background: ${item?.color || '#DDDDDD'};`;
styles += `width: ${size * 3}px; height: ${size}px;`;
} else {
styles += `background: ${item?.color || '#DDDDDD'};`;
styles += `width: ${size}px; height: ${size}px;`;
}
return styles;
};
const background_style = (item: any) => {
return gradient_computer(item) + background_computer(item);
};
const style_actived_color = (item: any, index: number) => {
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
}
/*
** 组装产品的数据
** @param {Array} list 商品列表
** @param {Number} num 显示数量
** @return {Array}
*/
const commodity_list = (list: any[], num: number) => {
if (list.length > 0) {
// 深拷贝一下，确保不会出现问题
const goods_list = cloneDeep(list).map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(goods_list.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
}
return nav_list;
} else {
return [];
}
}
const old_list = ref<any>({});
const data_magic_list = ref<data_magic[]>([]);
watch(props.value.content, (val) => {
@ -195,33 +246,7 @@ watch(props.value.content, (val) => {
}
});
data_magic_list.value = data;
})
const background_style = (item: any) => {
return gradient_computer(item) + background_computer(item);
};
// 指示器的样式
const indicator_style = (item: any) => {
let indicator_styles = '';
if (!isEmpty(item.indicator_radius)) {
indicator_styles += radius_computer(item.indicator_radius)
}
const size = item?.indicator_size || 5;
if (item.indicator_style == 'num') {
indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
indicator_styles += `font-size: ${size}px;`;
} else if (item.indicator_style == 'elliptic') {
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
} else {
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
indicator_styles += `width: ${size}px; height: ${size}px;`;
}
return indicator_styles;
};
const style_actived_color = (item: any, index: number) => {
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
}
}, {immediate: true, deep: true})
//#endregion
const carousel_change = (index: number, key: number) => {
if (data_magic_list.value[key]) {
@ -235,32 +260,7 @@ const trends_config = (style: any, key: string) => {
const text_style = (typeface: string, size: number, color: string) => {
return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
}
/*
** 组装产品的数据
** @param {Array} list 商品列表
** @param {Number} num 显示数量
** @return {Array}
*/
const commodity_list = (list: any[], num: number) => {
if (list.length > 0) {
// 深拷贝一下，确保不会出现问题
const goods_list = cloneDeep(list).map((item: any) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(goods_list.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
}
return nav_list;
} else {
return [];
}
}
// 不属于第9个，并且第9个的第一个和第二个
const spacing_processing = (index: number) => {
return form.value.style_actived !== 8 || (form.value.style_actived === 8 && [0, 1].includes(index))

6
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="auxiliary-line common-content-height">
<el-form :model="form" label-width="60">
<el-form :model="form" label-width="80">
<card-container class="mb-8">
<div class="mb-12">展示风格</div>
<el-form-item label="选择风格">
@ -63,10 +63,10 @@ const data_style = {
rotation_direction: 'horizontal',
interval_time: 2,
heading_color: '#000',
heading_typeface: 'normal',
heading_typeface: '400',
heading_size: 20,
subtitle_color: '#FF852A',
subtitle_typeface: 'normal',
subtitle_typeface: '400',
subtitle_size: 14,
chunk_padding: {
padding: 0,

4
src/components/model-data-magic/model-data-magic-styles.vue
View File

@ -2,8 +2,8 @@
<div class="w">
<el-form :model="form" label-width="70">
<card-container class="mb-8">
<div class="mb-12">图片魔方</div>
<el-form-item label="图片间距">
<div class="mb-12">数据魔方</div>
<el-form-item label="数据间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="数据圆角">

4
src/components/model-nav-group/index.vue
View File

@ -2,8 +2,8 @@
<div :style="style_container">
<el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
<el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
<div ref="bannerImg" class="flex flex-wrap">
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c mt-12">
<div ref="bannerImg" class="flex flex-wrap gap-x-10">
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c">
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
<image-empty v-model="item1.nav_image[0]" :style="img_style"></image-empty>
</div>

12
src/components/model-notice/index.vue
View File

@ -20,9 +20,7 @@
<div class="news-card flex-col gap-10">
<div class="flex-row w jc-sb">
<template v-if="form.title_type == 'img'">
<div v-if="!isEmpty(form.img_src)" >
<image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
</div>
<image-empty v-model="form.img_src[0]" :style="img_style" error-img-style="width:1.6rem;height:1.6rem;"></image-empty>
</template>
<template v-else>
<div :style="topic_style" class="pl-6 pr-6 radius-sm">{{ form.title || '公告' }}</div>
@ -90,7 +88,9 @@ const notice_list = computed(() => {
// 内容参数的集合
watchEffect(() => {
//#region 标题设置
if (!isEmpty(form.value.img_src)) {
if (form.value.notice_style == 'card') {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
} else if (!isEmpty(form.value.img_src)) {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
}
//#endregion
@ -141,6 +141,10 @@ watchEffect(() => {
.one3 {
color: #FFC300;
}
.two-style {
width: 2.4rem;
height: 2.4rem;
}
.break {
word-break: break-word;
overflow-wrap: break-word;

31
src/components/model-shop-list/index.vue
View File

@ -22,7 +22,7 @@
<div class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
<div v-if="is_show('title')" :class="text_line" :style="trends_config('title')">{{ item.title }}</div>
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5">
<div v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<div v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius-sm size-9 pl-3 pr-3" :style="icon_style(icon_data)">{{ icon_data.name }}</div>
</div>
</div>
@ -151,13 +151,36 @@ const default_list = {
title: '测试商品标题',
min_original_price: '41.2',
show_original_price_symbol: '￥',
show_original_price_unit: '/ 台',
min_price: '51',
show_price_symbol: '￥',
show_price_unit: '',
show_price_unit: '/ 台',
sales_count: '1000',
images: '',
new_cover: [],
plugins_view_icon_data: []
plugins_view_icon_data: [
{
name: '满减活动',
bg_color: '#EA3323',
br_color: '',
color: '#fff',
url: ''
},
{
name: '包邮',
bg_color: '',
br_color: '#EA3323',
color: '#EA3323',
url: ''
},
{
name: '领劵',
bg_color: '',
br_color: '#EA9223',
color: '#EA9223 ',
url: ''
}
]
};
const list = ref<data_list[]>([]);
@ -331,6 +354,8 @@ const icon_style = (item: { bg_color: string; color: string; br_color: string; }
let style = `background: ${item.bg_color};color: ${item.color};`;
if (!isEmpty(item.br_color)) {
style += `border: 1px solid ${item.br_color};`
} else {
style += `border: 1px solid ${item.bg_color};`
}
return style;
}

15
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_style">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -83,7 +83,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
import ShopAPI from '@/api/shop';
import { shopStore } from '@/store';
const shop_store = shopStore();
@ -93,12 +93,17 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const state = reactive({
form: props.value,
styles: props.tabStyle,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, styles } = toRefs(state);
const base_list = reactive({
tabs_style_list: [
@ -217,6 +222,10 @@ const url_value_dialog_call_back = (item: any[]) => {
});
});
};
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
form.value.theme = val;

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

@ -1,7 +1,7 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-shop-tabs-content :value="value.content"></model-shop-tabs-content>
<model-shop-tabs-content :value="value.content" :tab-style="value.style"></model-shop-tabs-content>
</template>
<template v-if="type == '2'">
<model-shop-tabs-styles :value="value.style" :content="value.content"></model-shop-tabs-styles>

16
src/components/model-shop-tabs/model-shop-tabs-styles.vue
View File

@ -7,16 +7,16 @@
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</div>
</el-form-item>
<el-form-item label="未选文字">
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</div>
</el-form-item>
</card-container>
<card-container class="mb-8">

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

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.tabs_style" class="ml-4">
<el-radio-group v-model="form.tabs_theme" class="ml-4" @change="tabs_theme_change">
<el-radio value="0">样式一</el-radio>
<el-radio value="2">样式二</el-radio>
<el-radio value="3">样式三</el-radio>
@ -44,19 +44,24 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { get_math, tabs_style } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {},
},
tabStyle: {
type: Object,
default: () => ({}),
}
});
const state = reactive({
form: props.value
form: props.value,
styles: props.tabStyle
});
const { form } = toRefs(state);
const { form, styles } = toRefs(state);
const add = () => {
form.value.tabs_list.push({
id: get_math(),
@ -75,6 +80,9 @@ const remove = (index: number) => {
const on_sort = (new_list: nav_group[]) => {
form.value.tabs_list = new_list;
}
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
</script>
<style lang="scss" scoped>
.card.mb-8 {

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

@ -1,7 +1,7 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-tabs-content :value="value.content"></model-tabs-content>
<model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
</template>
<template v-if="type == '2'">
<model-tabs-styles :value="value.style"></model-tabs-styles>

18
src/components/model-tabs/model-tabs-styles.vue
View File

@ -6,17 +6,17 @@
<el-form-item label="选中装饰">
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
<el-form-item label="选中文字" class="">
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color_checked" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
</div>
</el-form-item>
<el-form-item label="未选文字">
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</el-form-item>
<el-form-item label="文字色值">
<color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
<div class="flex-col w h gap-10">
<color-picker v-model="form.tabs_color" default-color="rgba(51,51,51,1)"></color-picker>
<text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
</div>
</el-form-item>
</card-container>
</el-form>

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

@ -117,7 +117,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
article_spacing: 10, // 文章间距
article_width: 155, // 文章宽度
article_height: 155, // 文章宽度
common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_bottom: 10 },
common_style: { ...defaultCommon, padding:10, padding_top:10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
},
};

12
src/layout/components/main/default/carousel.ts
View File

@ -10,7 +10,8 @@ interface defaultSearch {
carousel_type: string;
carousel_list: carousel_list[];
img_fit: string,
height: number,
is_roll: boolean;
interval_time: number;
};
style: {
radius: number;
@ -19,8 +20,7 @@ interface defaultSearch {
radius_bottom_left: number;
radius_bottom_right: number;
is_show: boolean;
is_roll: boolean;
interval_time: number;
height: number,
indicator_style: string;
indicator_location: string;
indicator_size: number;
@ -34,7 +34,8 @@ const defaultSearch: defaultSearch = {
content: {
carousel_type: 'inherit',
img_fit: 'contain',
height: 300,
is_roll: true,
interval_time: 2,
carousel_list: [
{
carousel_img: [],
@ -57,8 +58,7 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 0,
radius_bottom_right: 0,
is_show: true,
is_roll: true,
interval_time: 2,
height: 300,
indicator_style: 'dot',
indicator_location: 'center',
indicator_size: 5,

2
src/layout/components/main/default/custom.ts
View File

@ -3,6 +3,7 @@ import defaultCommon from "./index";
interface defaultSearch {
content: {
height: number;
img_key: string;
data_source: string;
source_list: string[];
custom_list: string[];
@ -14,6 +15,7 @@ interface defaultSearch {
const defaultSearch: defaultSearch = {
content: {
height: 390,
img_key: '',
source_list: [],
data_source:'',
custom_list: []

8
src/layout/components/main/default/notice.ts
View File

@ -54,8 +54,8 @@ const defaultSearch: defaultSearch = {
},
style: {
news_color: '#000',
news_typeface: 'normal',
news_size: 15,
news_typeface: '400',
news_size: 12,
topic_color_list: [
{
color: '',
@ -67,8 +67,8 @@ const defaultSearch: defaultSearch = {
},
],
topic_color: '#000',
topic_typeface: 'normal',
topic_size: 15,
topic_typeface: '400',
topic_size: 14,
topic_width: 24,
topic_height: 24,
button_color: '#999',

36
src/layout/components/main/default/shop-list.ts
View File

@ -70,44 +70,44 @@ const defaultProductList: DefaultProductList = {
padding_right: 10,
},
shop_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_radius: {
radius: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_radius: {
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
shop_title_typeface: 'normal',
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",
shop_price_typeface: 'normal',
shop_price_size: 14,
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",
shop_sold_number_typeface: 'normal',
shop_sold_number_typeface: '400',
shop_sold_number_size: 10,
shop_sold_number_color: "#999999",
shop_score_typeface: 'normal',
shop_score_typeface: '400',
shop_score_size: 10,
shop_score_color: "#999999",
shop_button_typeface:'normal',
shop_button_typeface:'400',
shop_button_size: 12,
shop_button_color: [
{
color: '#2a94ff',
color: '#FF3D53',
color_percentage: ''
},
{
color: '#2a94ff',
color: '#D73A3A',
color_percentage: ''
}
],

42
src/layout/components/main/default/shop-tabs.ts
View File

@ -14,12 +14,13 @@ interface articleTabsList {
}
interface DefaultProductList {
content: {
tabs_style: string;
tabs_theme: string;
tabs_top_up: boolean;
theme: string;
tabs_list: articleTabsList[];
is_show: string[];
is_shop_show: boolean;
is_price_solo: boolean;
shop_type: string;
shop_button_effect: string;
shop_button_size: string;
@ -60,7 +61,7 @@ interface DefaultProductList {
}
const defaultProductList: DefaultProductList = {
content: {
tabs_style: '0',
tabs_theme: '0',
tabs_top_up: false,
theme: '0',
tabs_list: [
@ -71,6 +72,7 @@ const defaultProductList: DefaultProductList = {
],
is_show: ['title', 'plugins_view_icon', 'price', 'sales_count', 'original_price'],
is_shop_show: true,
is_price_solo: true,
shop_type: '0',
shop_button_effect: '0',
shop_button_size: '1',
@ -92,44 +94,44 @@ const defaultProductList: DefaultProductList = {
padding_right: 10,
},
shop_img_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
shop_radius: {
radius: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_radius: {
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
content_outer_spacing: 10,
content_spacing: 10,
content_outer_width: 104,
content_outer_height: 189,
shop_title_typeface: 'normal',
shop_title_typeface: '500',
shop_title_size: 14,
shop_title_color: "#333333",
shop_price_typeface: 'normal',
shop_price_size: 14,
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",
shop_sold_number_typeface: 'normal',
shop_sold_number_typeface: '400',
shop_sold_number_size: 10,
shop_sold_number_color: "#999999",
shop_score_typeface: 'normal',
shop_score_typeface: '400',
shop_score_size: 10,
shop_score_color: "#999999",
shop_button_typeface:'normal',
shop_button_typeface:'400',
shop_button_size: 12,
shop_button_color: [
{
color: '#2a94ff',
color: '#FF3D53',
color_percentage: ''
},
{
color: '#2a94ff',
color: '#D73A3A',
color_percentage: ''
}
],

11
src/layout/components/main/default/tabs.ts
View File

@ -11,12 +11,12 @@ interface tabs_page {
}
interface defaultTabs {
content: {
tabs_style: string;
tabs_theme: string;
tabs_top_up: boolean;
tabs_list: tabs_page[];
};
style: {
tabs_checked: string[];
tabs_checked: color_list[];
tabs_direction: string;
tabs_weight_checked: string,
tabs_size_checked: number,
@ -29,7 +29,7 @@ interface defaultTabs {
}
const defaultTabs: defaultTabs = {
content: {
tabs_style: '0',
tabs_theme: '0',
tabs_top_up: true,
tabs_list: [
{ id: get_math(), title: '热门推荐', desc: '简介', data_type: 'micro_page', classify: {}, micro_page: '', category_list: [] },
@ -38,7 +38,7 @@ const defaultTabs: defaultTabs = {
],
},
style: {
tabs_checked: ['rgba(212,212,212,2)', 'rgba(255,210,210,1)'],
tabs_checked: [{ color: 'rgba(212,212,212,2)', color_percentage: '' }, { color: 'rgba(255,210,210,1)', color_percentage: '' }],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,
@ -48,7 +48,8 @@ const defaultTabs: defaultTabs = {
tabs_color: 'rgba(51,51,51,1)',
common_style: {
...defaultCommon,
padding_top: 0,
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,

18
src/utils/index.ts
View File

@ -156,7 +156,7 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
* @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/
export function common_styles_computer(new_style: componentsCommonCommonStyle) {
return gradient_computer(new_style) + padding_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + background_computer(new_style);
return gradient_computer(new_style) + padding_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + background_computer(new_style) + `overflow:hidden;`;
}
/**
@ -299,3 +299,19 @@ export const set_cookie = (name: string, value: string, expire_time?: number) =>
document.cookie = cookie_str;
}
};
// style 风格
export const tabs_style = (color: string, style: string | number | boolean | undefined) => {
const color_list = ['rgba(51,51,51,1)', 'rgba(255, 34, 34, 1)', 'rgba(255, 255, 255, 1)'];
if (color_list.includes(color)) {
if ((style == '2' || style == '4')) {
return 'rgba(255, 255, 255, 1)';
} else if (style == '3') {
return 'rgba(255, 34, 34, 1)';
} else {
return 'rgba(51,51,51,1)';
}
} else {
return color;
}
}