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-09-04 10:19:25 +08:00
parent 25a1764486 f2241a1739
commit ec8be6c501
24 changed files with 320 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/model-seckill/theme-4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/components/model-seckill/time.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 691 B

2
src/components/common/color-text-size-group/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex-col w h gap-10">
<color-picker v-if="typeList.includes('color')" v-model="color" :default-color="props.defaultColor"></color-picker>
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface" class="ml-4">
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<el-form-item v-if="typeList.includes('size')" label="字号" label-width="40" class="mb-0 w word-size">

4
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -34,7 +34,7 @@
<card-container class="h">
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-radio-group v-model="form.border_show" class="ml-4">
<el-radio-group v-model="form.border_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
</el-radio-group>
@ -44,7 +44,7 @@
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style" class="ml-4">
<el-radio-group v-model="form.border_style">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>

8
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -24,7 +24,7 @@
<color-picker v-model="form.text_color" default-color="#FF3F3F"></color-picker>
</el-form-item>
<el-form-item label="文字大小">
<el-radio-group v-model="form.text_weight" class="ml-4">
<el-radio-group v-model="form.text_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
@ -34,7 +34,7 @@
</el-form-item>
</el-form-item>
<el-form-item label="字符选项">
<el-radio-group v-model="form.text_option" class="ml-4">
<el-radio-group v-model="form.text_option">
<el-radio value="none"><span style="text-decoration: none">Aa</span></el-radio>
<el-radio value="underline"><span style="text-decoration: underline">Aa</span></el-radio>
<el-radio value="line-through"><span style="text-decoration: line-through">Aa</span></el-radio>
@ -83,7 +83,7 @@
<card-container>
<div class="mb-12">边框设置</div>
<el-form-item label="边框显示">
<el-radio-group v-model="form.border_show" class="ml-4">
<el-radio-group v-model="form.border_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
</el-radio-group>
@ -93,7 +93,7 @@
<color-picker v-model="form.border_color" default-color="#FF3F3F"></color-picker>
</el-form-item>
<el-form-item label="边框样式">
<el-radio-group v-model="form.border_style" class="ml-4">
<el-radio-group v-model="form.border_style">
<el-radio value="dashed"><div class="border-style-item" style="border: 1px dashed #979797"></div></el-radio>
<el-radio value="solid"><div class="border-style-item" style="border: 1px solid #979797"></div></el-radio>
<el-radio value="dotted"><div class="border-style-item" style="border: 1px dotted #979797"></div></el-radio>

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

@ -4,13 +4,13 @@
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="样式设置">
<el-radio-group v-model="form.carousel_type" class="ml-4">
<el-radio-group v-model="form.carousel_type">
<el-radio value="inherit">样式一</el-radio>
<el-radio value="card">样式二</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit" class="ml-4">
<el-radio-group v-model="form.img_fit">
<el-radio value="contain">等比缩放</el-radio>
<el-radio value="inherit">铺满</el-radio>
<el-radio value="cover">等比剪切</el-radio>

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

@ -1,7 +1,7 @@
<template>
<card-container class="mb-8">
<el-form-item label="数据类型">
<el-radio-group v-model="form.data_type" class="ml-4">
<el-radio-group v-model="form.data_type">
<el-radio value="goods">商品</el-radio>
<el-radio value="images">图片</el-radio>
</el-radio-group>

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

@ -25,7 +25,7 @@
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="轮播方向">
<el-radio-group v-model="form.rotation_direction" class="ml-4">
<el-radio-group v-model="form.rotation_direction">
<el-radio value="horizontal">横向</el-radio>
<el-radio value="vertical">纵向</el-radio>
</el-radio-group>

2
src/components/model-float-window/model-float-window-content.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">按钮设置</div>
<el-form-item label="按钮跳转">
<el-radio-group v-model="form.button_jump" class="ml-4">
<el-radio-group v-model="form.button_jump">
<el-radio value="link">页面链接</el-radio>
<el-radio value="customer_service">客服入口</el-radio>
</el-radio-group>

4
src/components/model-float-window/model-float-window-styles.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">位置设置</div>
<el-form-item label="展示位置">
<el-radio-group v-model="form.display_location" class="ml-4">
<el-radio-group v-model="form.display_location">
<el-radio value="left">左</el-radio>
<el-radio value="right">右</el-radio>
</el-radio-group>
@ -13,7 +13,7 @@
<slider v-model="form.offset_number" :max="1000"></slider>
</el-form-item>
<el-form-item label="风格">
<el-radio-group v-model="form.float_style" class="ml-4">
<el-radio-group v-model="form.float_style">
<el-radio value="diffuse">扩散</el-radio>
<el-radio value="shadow">阴影</el-radio>
</el-radio-group>

8
src/components/model-nav-group/model-nav-group-content.vue
View File

@ -4,27 +4,27 @@
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="导航样式">
<el-radio-group v-model="form.nav_style" class="ml-4">
<el-radio-group v-model="form.nav_style">
<el-radio value="image_with_text">图片加文字</el-radio>
<el-radio value="image">图片</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="单行显示">
<el-radio-group v-model="form.single_line" class="ml-4">
<el-radio-group v-model="form.single_line">
<el-radio :value="3">3个</el-radio>
<el-radio :value="4">4个</el-radio>
<el-radio :value="5">5个</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="展示样式">
<el-radio-group v-model="form.display_style" class="ml-4">
<el-radio-group v-model="form.display_style">
<el-radio value="fixed">固定显示</el-radio>
<el-radio value="slide">分页滑动</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.display_style === 'slide'" label="显示行数">
<el-radio-group v-model="form.row" class="ml-4">
<el-radio-group v-model="form.row">
<el-radio :value="1">1行</el-radio>
<el-radio :value="2">2行</el-radio>
<el-radio :value="3">3行</el-radio>

8
src/components/model-notice/model-notice-content.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.notice_style" class="ml-4">
<el-radio-group v-model="form.notice_style">
<el-radio value="inherit">样式一</el-radio>
<el-radio value="card">样式二</el-radio>
</el-radio-group>
@ -14,7 +14,7 @@
<card-container>
<div class="mb-12">公告风格</div>
<el-form-item label="标题类型">
<el-radio-group v-model="form.title_type" class="ml-4">
<el-radio-group v-model="form.title_type">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
@ -27,7 +27,7 @@
</el-form-item>
<template v-if="!is_card">
<el-form-item label="滚动方式">
<el-radio-group v-model="form.direction" class="ml-4">
<el-radio-group v-model="form.direction">
<el-radio value="vertical">上下滚动</el-radio>
<el-radio value="horizontal">左右滚动</el-radio>
</el-radio-group>
@ -41,7 +41,7 @@
<card-container>
<div class="mb-12">按钮设置</div>
<el-form-item label="右侧按钮">
<el-radio-group v-model="form.is_right_button" class="ml-4">
<el-radio-group v-model="form.is_right_button">
<el-radio value="show">显示</el-radio>
<el-radio value="hidden">隐藏</el-radio>
</el-radio-group>

168
src/components/model-seckill/index.vue
View File

@ -9,9 +9,9 @@
</div>
<div v-if="form.theme == '1'" class="pl-6 pr-6 cr-f">|</div>
<div class="flex-row align-c gap-4">
<span v-if="form.theme != '4'" class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
<span class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
<div class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4'? `${ time_bg };padding: 0.3rem 0.4rem;border-radius: 1.1rem;` : '']">
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="url_computer('time')" />
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="new_url" />
<template v-for="(item, index) in time_config" :key="item.key">
<template v-if="form.theme == '4'">
<div class="size-12" :style="`color: ${ new_style.countdown_color }`">{{ item.value }}</div>
@ -30,11 +30,28 @@
<el-icon class="iconfont icon-arrow-right" :color="new_style.head_button_color"></el-icon>
</div>
</div>
<div class="flex flex-wrap" :style="`gap: ${ content_outer_spacing }px;`">
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${ content_radius }; ${ shop_style_type == '1' ? content_padding : '' }`">
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
</template>
<div class="flex-col gap-10" :style="content_style">
<div>{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, gradient_computer } from '@/utils';
import { background_computer, common_styles_computer, gradient_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { online_url } from '@/utils';
const props = defineProps({
value: {
@ -44,6 +61,12 @@ const props = defineProps({
},
},
});
const new_url = ref('');
onBeforeMount(async () => {
const url = await online_url('/static/plugins/seckill/images/diy/').then(res => res);
new_url.value = url + 'time.png';
})
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
const time_config = [
@ -74,13 +97,125 @@ const seckill_head_style = computed(() => {
});
const style = computed(() => common_styles_computer(props.value.style.common_style));
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
return new_url;
interface plugins_icon_data {
name: string;
bg_color: string;
br_color: string;
color: string;
url: string;
}
interface data_list {
title: string;
images: string;
new_cover: string[];
min_original_price: string;
show_original_price_symbol: string;
show_original_price_unit: string;
min_price: string;
show_price_symbol: string;
show_price_unit: string;
sales_count: string;
plugins_view_icon_data: plugins_icon_data[];
}
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: '/ 台',
sales_count: '1000',
images: '',
new_cover: [],
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[]>([]);
onBeforeMount(() => {
list.value = Array(4).fill(default_list);
})
// 商品间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
// 选择的风格
const shop_style_type = computed(() => form.value.shop_style_type);
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
// 内容区域的样式
const content_style = computed(() => {
const spacing_value = new_style.value.content_spacing;
let spacing = '';
if (shop_style_type.value == '1') {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = content_padding.value;
}
return `${spacing}`;
});
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
switch (shop_style_type.value) {
case '1':
class_type = `flex-row bg-f oh multicolumn-columns`;
break;
case '2':
class_type = `flex-col bg-f oh multicolumn-columns`;
break;
case '3':
class_type = `flex-col bg-f oh multicolumn-columns`;
break;
default:
break;
}
return class_type;
});
// 不换行显示
const multicolumn_columns_width = computed(() => {
const { single_line_number } = toRefs(form.value);
let model_number = single_line_number.value;
if (shop_style_type.value == '1') {
model_number = 1;
} else if (shop_style_type.value == '2') {
model_number = 2;
}
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.content_outer_spacing * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
</script>
<style lang="scss" scoped>
:deep(.el-image) {
.image-slot img {
width: 5rem;
height: 5rem;
}
}
.seckill-head {
padding: 1.5rem 1.3rem;
width: 100%;
@ -103,4 +238,23 @@ const url_computer = (name: string) => {
position: relative;
top: -0.1rem;
}
.multicolumn-columns {
height: 100%;
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
}
.flex-img1 {
height: auto;
min-height: 11rem;
max-height: 12rem;
width: 11rem;
}
.flex-img2 {
width: 100%;
height: 18rem;
}
.flex-img3 {
width: 100%;
min-height: 10.4rem;
}
</style>

2
src/components/model-seckill/model-seckill-content.vue
View File

@ -50,7 +50,7 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.shop_style_type == '3'" label="单行显示">
<el-radio-group v-model="form.single_line_number" class="ml-4">
<el-radio-group v-model="form.single_line_number">
<el-radio :value="1">1个</el-radio>
<el-radio :value="2">2个</el-radio>
<el-radio :value="3">3个</el-radio>

12
src/components/model-seckill/model-seckill-setting.vue
View File

@ -62,6 +62,16 @@ onBeforeMount(async () => {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_height: 232,
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,
@ -126,7 +136,7 @@ onBeforeMount(async () => {
style: {
topic_color: '#000',
head_button_color: '#000',
end_text_color: '',
end_text_color: '#666',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_img_url: [],
countdown_bg_color_list: [{ color: '#FF5000', color_percentage: undefined }],

179
src/components/model-seckill/model-seckill-styles.vue
View File

@ -1,51 +1,53 @@
<template>
<div class="w">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item label="标题设置">
<color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="按钮设置">
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item v-if="data.theme != '4'" label="距离结束">
<color-picker v-model="form.end_text_color"></color-picker>
</el-form-item>
<el-form-item label="数字背景">
<mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="数字">
<color-picker v-model="form.countdown_color"></color-picker>
</el-form-item>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
<template v-if="data.head_state == '1'">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item v-if="data.topic_type == 'text'" label="标题设置">
<color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :default-color="clone_form.topic_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item v-if="data.button_status == '1'" label="按钮设置">
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="秒杀提示">
<color-picker v-model="form.end_text_color" :default-color="clone_form.end_text_color"></color-picker>
</el-form-item>
<el-form-item label="数字背景">
<mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="数字">
<color-picker v-model="form.countdown_color" :default-color="clone_form.countdown_color"></color-picker>
</el-form-item>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.header_background_img_url" :limit="1"></upload>
</div>
<upload v-model="form.header_background_img_url" :limit="1"></upload>
</div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item label="内容圆角">
@ -63,6 +65,20 @@
<el-form-item label="原价价格">
<color-picker v-model="form.original_price_color"></color-picker>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item v-if="data.shop_style_type == '1'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="data.shop_style_type == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="秒杀角标">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
@ -77,46 +93,51 @@
</div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">进度条设置</div>
<el-form-item label="背景色">
<color-picker v-model="form.progress_bg_color"></color-picker>
</el-form-item>
<el-form-item label="选中色">
<mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="按钮背景">
<color-picker v-model="form.progress_button_color"></color-picker>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.progress_button_icon_color"></color-picker>
</el-form-item>
<el-form-item label="文字颜色">
<color-picker v-model="form.progress_text_color"></color-picker>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<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" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<template v-if="data.shop_style_type == '1'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">进度条设置</div>
<el-form-item label="背景色">
<color-picker v-model="form.progress_bg_color"></color-picker>
</el-form-item>
<el-form-item label="选中色">
<mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="按钮背景">
<color-picker v-model="form.progress_button_color"></color-picker>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.progress_button_icon_color"></color-picker>
</el-form-item>
<el-form-item label="文字颜色">
<color-picker v-model="form.progress_text_color"></color-picker>
</el-form-item>
</card-container>
</template>
<template v-if="data.shop_style_type == '3'">
<div class="divider-line"></div>
<card-container>
<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" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -136,6 +157,8 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
let clone_form = cloneDeep(props.value);
const base_list = {
location_list: [
{ name: '左上', value: 'left-top' },

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

@ -168,7 +168,6 @@ const props = defineProps({
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
interface plugins_icon_data {
name: string;
bg_color: string;

2
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -9,7 +9,7 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '5'" label="轮播列数">
<el-radio-group v-model="form.carousel_col" class="ml-4">
<el-radio-group v-model="form.carousel_col">
<el-radio :value="1">1个</el-radio>
<el-radio :value="2">2个</el-radio>
<el-radio :value="3">3个</el-radio>

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

@ -17,7 +17,7 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.theme == '5'" label="轮播列数">
<el-radio-group v-model="form.carousel_col" class="ml-4">
<el-radio-group v-model="form.carousel_col">
<el-radio :value="1">1个</el-radio>
<el-radio :value="2">2个</el-radio>
<el-radio :value="3">3个</el-radio>

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

@ -4,14 +4,14 @@
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.tabs_theme" class="ml-4" @change="tabs_theme_change">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio value="0">样式一</el-radio>
<el-radio value="2">样式二</el-radio>
<el-radio value="3">样式三</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="滑动置顶">
<el-radio-group v-model="form.tabs_top_up" class="ml-4">
<el-radio-group v-model="form.tabs_top_up">
<el-radio :value="true">启用</el-radio>
<el-radio :value="false">不启用</el-radio>
</el-radio-group>
@ -27,7 +27,7 @@
<el-input v-model="scoped.row.title" placeholder="请输入标题文字" />
</el-form-item>
<el-form-item label="数据类型" class="w mb-0">
<el-radio-group v-model="scoped.row.data_type" class="ml-4">
<el-radio-group v-model="scoped.row.data_type">
<el-radio value="micro_page">微页面</el-radio>
<el-radio value="category">选择分类</el-radio>
</el-radio-group>

2
src/components/model-text-title/model-text-title-styles.vue
View File

@ -7,7 +7,7 @@
<color-picker v-model="form.title_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="标题文字">
<el-radio-group v-model="form.title_weight" class="ml-4">
<el-radio-group v-model="form.title_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>

2
src/components/page-settings/page-content.vue
View File

@ -59,7 +59,7 @@
</template>
<card-container>
<el-form-item label="底部导航">
<el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
<el-radio-group v-model="form.bottom_navigation_show">
<el-radio v-for="item in base_list.bottom_navigation" :key="item.value" :value="item.value">{{item.name }}</el-radio>
</el-radio-group>
</el-form-item>

6
src/components/page-settings/page-styles.vue
View File

@ -36,19 +36,19 @@
</div>
</el-form-item>
<el-form-item label="功能按钮">
<el-radio-group v-model="form.function_buttons_type" class="ml-4">
<el-radio-group v-model="form.function_buttons_type">
<el-radio value="black">黑色</el-radio>
<el-radio value="white">白色</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="沉浸样式">
<el-radio-group v-model="form.immersive_style" class="ml-4">
<el-radio-group v-model="form.immersive_style">
<el-radio :value="true">开启</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上滑展示">
<el-radio-group v-model="form.up_slide_display" class="ml-4">
<el-radio-group v-model="form.up_slide_display">
<el-radio :value="true">保留</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>

14
src/views/layout/components/main/default/seckill.ts
View File

@ -33,6 +33,10 @@ interface DefaultSeckill {
header_background_img_url: uploadList[];
shop_radius: radiusStyle;
shop_img_radius: radiusStyle;
shop_padding: paddingStyle;
content_outer_spacing: number;
content_spacing: number;
content_outer_height: number;
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
@ -97,6 +101,16 @@ const defaultSeckill: DefaultSeckill = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_height: 232,
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,