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

修改显示内容

v1.3.0
于肖磊 2025-03-21 16:42:37 +08:00
parent 54a9ffab5c
commit 60e7a7e9a3
20 changed files with 117 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/common/border-config/index.vue
View File

@ -1,20 +1,32 @@
<template>
<el-form-item label="边框">
<el-form-item :label="`边${ type == 'frame' ? '框' : '线'}`">
<el-switch v-model="border_show" active-value="1" inactive-value="0" @change="operation_end" />
</el-form-item>
<template v-if="border_show == '1'">
<el-form-item v-if="typeList.includes('color')" label="边框颜色">
<el-form-item v-if="typeList.includes('color')" :label="`边${ type == 'frame' ? '框' : '线'}颜色`">
<color-picker v-model="border_color" :default-color="defaultColor" @operation_end="operation_end"></color-picker>
</el-form-item>
<el-form-item v-if="typeList.includes('style')" label="边框样式">
<el-form-item v-if="typeList.includes('style')" :label="`边${ type == 'frame' ? '框' : '线'}样式`">
<el-radio-group v-model="border_style" @change="operation_end">
<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>
<template v-if="type == 'frame'">
<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>
</template>
<template v-else>
<el-radio value="dashed"><icon name="line-point" class="re top-2" size="32"></icon></el-radio>
<el-radio value="solid"><icon name="line" class="re top-2" size="32"></icon></el-radio>
<el-radio value="dotted"><icon name="line-point" class="re top-2" size="32"></icon></el-radio>
</template>
</el-radio-group>
</el-form-item>
<el-form-item v-if="typeList.includes('size')" label="边框粗细">
<padding :value="border_size" :max="100" @operation_end="operation_end"></padding>
<el-form-item v-if="typeList.includes('size')" :label="`边${ type == 'frame' ? '框' : '线'}粗细`">
<template v-if="type == 'frame'">
<padding :value="border_size" :max="100" @operation_end="operation_end"></padding>
</template>
<template v-else>
<slider v-model="border_line_size" :max="100" @operation_end="operation_end"></slider>
</template>
</el-form-item>
<!-- 额外的使用内容 -->
<slot></slot>
@ -25,9 +37,11 @@
interface Props {
defaultColor?: string;
typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
type?: string;
}
const props = withDefaults(defineProps<Props>(), {
defaultColor: '',
type: 'frame',
typeList: () => ['color', 'style', 'size'],
});
const border_show = defineModel('show', {
@ -54,6 +68,10 @@ const border_size = defineModel('size', {
},
});
const border_line_size = defineModel('lineSize', {
type: Number,
default: 0,
});
const emit = defineEmits(['operation_end']);
// 失去焦点时触发事件
const operation_end = () => {

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

@ -15,7 +15,10 @@
<template v-else>
<image-empty v-model="activity_item.cover" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="theme == '2' && is_show('title')" class="theme-2-title" :style="trends_config('title')">{{ activity_item.title }}</div>
<template v-if="theme == '2'">
<div class="w h abs top-0 left-0 z-i" :style="(form.is_img_mask == '1' ? 'background: rgb(0 0 0 / 35%);' : '') + content_img_radius"></div>
<div v-if="is_show('title')" class="theme-2-title z-deep" :style="trends_config('title')">{{ activity_item.title }}</div>
</template>
</div>
</template>
<div v-if="is_show('keywords') || is_show('desc') || (['0', '1'].includes(theme) && is_show('title'))" class="flex-col gap-10" :style="content_style">
@ -232,8 +235,6 @@ const style_config = (typeface: string, size: number, color: string | object) =>
};
// 活动的图片圆角
const content_img_radius = computed(() => radius_computer(new_style.value.activity_main.img_radius));
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.activity_main));
// 关键字的显示
const keyword_style = computed(() => {
const style = new_style.value.activity_main?.keywords_style || {};
@ -314,7 +315,8 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
.theme-2-title {
position: absolute;
top: 50%;
margin-left: 1.7rem;
transform: translateY(-50%);
left: 50%;
// margin-left: 1.7rem;
transform: translate(-50%, -50%);
}
</style>

14
src/components/model-activity/model-activity-content.vue
View File

@ -28,6 +28,9 @@
<el-checkbox v-for="item in base_list.show_list" :key="item.value" :value="item.value" :disabled="!item.type.includes(form.main_theme)">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="form.main_theme == '2'" label="图片蒙层">
<el-switch v-model="form.is_img_mask" active-value="1" inactive-value="0" />
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -145,6 +148,7 @@ const url_value_dialog_call_back = (item: any[]) => {
const goods_list_sort = (new_list: any) => {
form.value.data_list = new_list;
};
// 切换时更新默认配置
const change_main_style = (val: any) => {
form.value.is_main_show = ['img', 'title', 'desc', 'keywords'];
const list = base_list.main_product_style.filter(item => item.value == val);
@ -155,18 +159,28 @@ const change_main_style = (val: any) => {
height = list[0].height;
}
let color = '#fff';
let title_color = '#000';
let padding = { padding: 0, padding_top: 16, padding_bottom: 0, padding_left: 10, padding_right: 0 };
let radius = { radius: 8, radius_top_left: 8, radius_top_right: 8, radius_bottom_left: 8, radius_bottom_right: 8 }
let img_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
if (val == '1') {
padding = { padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 };
} else if (val == '2') {
form.value.is_img_mask = '1';
color = '';
title_color = '#fff',
radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
img_radius = { radius: 8, radius_top_left: 8, radius_top_right: 8, radius_bottom_left: 8, radius_bottom_right: 8 };
padding = { padding: 0, padding_top: 10, padding_bottom: 0, padding_left: 0, padding_right: 0 };
}
data.value.activity_main = {
...data.value.activity_main,
...radius,
img_radius: img_radius,
activity_main_right_content: {
...padding,
},
title_color: title_color,
img_width: width,
img_height: height,
color_list: [{ color: color, color_percentage: undefined }],

2
src/components/model-activity/model-activity-styles.vue
View File

@ -48,7 +48,7 @@
<border-config v-model:show="form.activity_main.border_is_show" v-model:color="form.activity_main.border_color" v-model:style="form.activity_main.border_style" v-model:size="form.activity_main.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form.activity_main"></shadow-config>
<el-form-item label="右侧内容">
<el-form-item label="基础内容">
<!-- <slider v-model="form.activity_main_content_spacing" :max="100"></slider> -->
<el-form-item label="内间距" label-width="50" class="mb-0 w form-item-child-label">
<padding :value="form.activity_main.activity_main_right_content"></padding>

7
src/components/model-ask-tabs/index.vue
View File

@ -67,15 +67,14 @@ watch(
ask_img_container.value = background_computer(ask_content_data) + padding_computer(new_style.ask_content_padding);
// 产品的值
new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
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.keywords = new_data.content.tabs_list[tabs_active_index.value].keywords;
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;
new_data.content.is_reply = new_data.content.tabs_list[tabs_active_index.value].is_reply;
tabs_list.value = new_data;
// 公共样式
style_container.value += common_styles_computer(new_style.common_style);

1
src/components/model-ask/index.vue
View File

@ -368,6 +368,7 @@ const content_outer_height = computed(() => new_style.value.content_outer_height
line-height: 1.7rem;
text-align: right;
font-style: normal;
background-origin: 0.4rem;
}
.container {
column-count: 2;

7
src/components/model-binding/components/goods-index.vue
View File

@ -7,12 +7,15 @@
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="原价符号">
<el-form-item label="售价符号">
<color-text-size-group v-model:color="form.goods_price_symbol_color" v-model:size="form.goods_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="原价">
<el-form-item label="售价价">
<color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="售价单位">
<color-text-size-group v-model:color="form.goods_price_unit_color" v-model:size="form.goods_price_unit_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="节省价符号">
<color-text-size-group v-model:color="form.goods_save_price_symbol_color" v-model:size="form.goods_save_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>

10
src/components/model-binding/index.vue
View File

@ -3,8 +3,8 @@
<div :style="style_img_container">
<div class="oh flex-col" :style="`gap: ${ new_style.data_content_outer_spacing }px;`">
<div v-for="(match_item, match_index) in list" :key="match_index">
<div :style="match_layout_style">
<div class="flex-col" :style="match_layout_img_style">
<div class="oh" :style="match_layout_style">
<div class="flex-col oh" :style="match_layout_img_style">
<div :class="['oh w h', host_graph_theme == '0' ? 'flex-row' : 'flex-col' ]" :style="host_graph_theme == '0' ? `margin-bottom: ${ new_style.data_content_bottom_spacing }px;` : ''">
<!-- 主图大图模式和主图单列时的显示，并且图片是有值的 -->
<template v-if="!isEmpty(match_item) && ((host_graph_theme == '1' && form.is_host_graph_show == '1') || host_graph_theme == '0')">
@ -85,6 +85,7 @@
<div v-if="is_show('price')" class="flex-row align-c text-line-1">
<span :style="trends_config('price_symbol', 'goods')">{{ item.show_price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ item.price }}</span>
<span v-if="is_show('price_unit')" :style="trends_config('price_unit', 'goods')">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" />
@ -116,6 +117,7 @@
<div v-if="is_show('price')" class="flex-row align-c text-line-1">
<span :style="trends_config('price_symbol', 'goods')">{{ item.show_price_symbol }}</span>
<span :style="trends_config('price', 'goods')">{{ item.price }}</span>
<span v-if="is_show('price_unit')" :style="trends_config('price_unit', 'goods')">{{ item.show_price_unit }}</span>
</div>
<div v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :value="props.value" type="goods_discounts" />
@ -182,6 +184,7 @@ type goods_list = {
price: string,
show_price_symbol: string,
images: string,
show_price_unit: string;
}
type data_list = {
title: string,
@ -207,6 +210,7 @@ const default_list = {
price: '51',
show_price_symbol: '￥',
images: '',
show_price_unit: '/ 台',
},
{
title: '测试商品标题',
@ -215,6 +219,7 @@ const default_list = {
price: '51',
show_price_symbol: '￥',
images: '',
show_price_unit: '/ 台',
},
{
title: '测试商品标题',
@ -223,6 +228,7 @@ const default_list = {
price: '51',
show_price_symbol: '￥',
images: '',
show_price_unit: '/ 台',
}
]
};

1
src/components/model-binding/model-binding-content.vue
View File

@ -115,6 +115,7 @@ const base_list = reactive({
{ name: '商品名称', value: 'title'},
{ name: '商品图片', value: 'goods_img' },
{ name: '商品售价', value: 'price' },
{ name: '商品售价单位', value: 'price_unit' },
{ name: '商品节省价', value: 'save_price' },
],
tabs: [

4
src/components/model-binding/model-binding-styles.vue
View File

@ -11,10 +11,10 @@
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.data_title_color" v-model:typeface="form.data_title_typeface" v-model:size="form.data_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="原价符号">
<el-form-item label="售价符号">
<color-text-size-group v-model:color="form.data_price_symbol_color" v-model:size="form.data_price_symbol_size" default-color="#000000" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="原价">
<el-form-item label="售价">
<color-text-size-group v-model:color="form.data_price_color" v-model:typeface="form.data_price_typeface" v-model:size="form.data_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="节省价符号">

2
src/components/model-realstore/index.vue
View File

@ -154,7 +154,7 @@ const border_style = computed(() => {
const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style.value;
let border = ``;
if (content_border_is_show == '1') {
border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size.padding_top}px ${content_border_size.padding_right}px ${content_border_size.padding_bottom}px ${content_border_size.padding_left}px;border-style: ${ content_border_style };border-color: ${content_border_color};`
border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
}
return border;
});

2
src/components/model-realstore/model-realstore-styles.vue
View File

@ -141,7 +141,7 @@
<card-container>
<div class="mb-12">内边线设置</div>
<!-- 边框处理 -->
<border-config v-model:show="form.content_border_is_show" v-model:color="form.content_border_color" v-model:style="form.content_border_style" v-model:size="form.content_border_size">
<border-config v-model:show="form.content_border_is_show" v-model:color="form.content_border_color" v-model:style="form.content_border_style" v-model:line-size="form.content_border_size" type="line">
<el-form-item label="外间距">
<margin :value="form.content_border_margin"></margin>
</el-form-item>

4
src/components/model-salerecords/index.vue
View File

@ -5,7 +5,7 @@
<div :class="form.rotation_direction == 'vertical' ? 'swiper-free-mode' : ''" :style="`height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :style="`height: ${ swiper_height }px;`" direction="vertical" :loop="true" :speed="swiper_speed" :autoplay="autoplay" :slides-per-view="slides_per_view" :space-between="space_between" :modules="modules">
<swiper-slide v-for="(item, index) in list" :key="index">
<div class="flex-row align-c gap-5">
<div class="flex-row align-c" :style="`gap: ${ new_style.content_spacing }px;`">
<template v-if="!isEmpty(item) && is_show('head')">
<div class="oh re">
<image-empty v-model="item.user.avatar" :style="heading_img_radius"></image-empty>
@ -28,7 +28,7 @@
<swiper :key="carouselKey + index" class="w flex" :style="`height: ${ new_swiper_height }px;`" direction="horizontal" :loop="true" :slides-offset-before="slides_offset_before" :speed="swiper_speed + (1000 * index)" :autoplay="autoplay" slides-per-view="auto" :space-between="space_between" :modules="modules">
<swiper-slide v-for="(item1, index1) in item.split_list" :key="index1">
<div :style="swiper_horizontal_container + 'width: auto;'">
<div class="flex-row align-c gap-5" :style="swiper_horizontal_img_container">
<div class="flex-row align-c" :style="swiper_horizontal_img_container + `gap: ${ new_style.content_spacing }px;`">
<template v-if="is_show('goods_image')">
<image-empty v-model="item1.goods_url" :style="goods_image_radius"></image-empty>
</template>

3
src/components/model-salerecords/model-salerecords-styles.vue
View File

@ -52,6 +52,9 @@
<el-form-item v-if="data.is_show.includes('time')" label="日期时间">
<color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_typeface" v-model:size="form.time_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="数据间距">
<slider v-model="form.data_spacing" :max="100"></slider>
</el-form-item>

7
src/config/const/activity.ts
View File

@ -13,6 +13,7 @@ interface DefaultProductList {
main_theme: string;
is_main_show: string[];
theme: string;
is_img_mask: string;
carousel_col: number;
data_type: string;
data_ids: string[];
@ -117,6 +118,7 @@ const defaultProductList: DefaultProductList = {
keywords: '',
// 轮播列数
carousel_col: 3,
is_img_mask: '1',
// 商品类型
data_type: '0',
data_list: [],
@ -164,6 +166,11 @@ const defaultProductList: DefaultProductList = {
radius_bottom_left: 0,
radius_bottom_right: 0,
},
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
title_color: '#333',
title_size: 16,
title_typeface: 'bold',

2
src/config/const/article-tabs.ts
View File

@ -89,7 +89,7 @@ interface DefaultArticleTabs {
article_content_padding: paddingStyle;
article_content_spacing: number;
article_content: object;
article_direction: string,
article_direction: string;
article_color_list: color_list[],
article_background_img_style: string,
article_background_img: uploadList[],

20
src/config/const/ask.ts
View File

@ -154,11 +154,11 @@ const defaultRealstore: defaultRealstore = {
padding_right: 7,
},
font_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
border_is_show: '0',
border_color: '#eee',
@ -187,11 +187,11 @@ const defaultRealstore: defaultRealstore = {
padding_right: 7,
},
font_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
border_is_show: '0',
border_color: '#eee',

14
src/config/const/binding.ts
View File

@ -145,6 +145,8 @@ interface defaultRealstore {
goods_price_color: string;
goods_price_typeface: string;
goods_price_size: number;
goods_price_unit_color: string,
goods_price_unit_size: number,
goods_save_price_symbol_color: string;
goods_save_price_symbol_size: number;
goods_save_price_color: string;
@ -239,11 +241,11 @@ const defaultRealstore: defaultRealstore = {
padding_right: 10,
},
data_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
},
data_title_img_width: 12,
data_title_img_height: 12,
@ -344,6 +346,8 @@ const defaultRealstore: defaultRealstore = {
goods_price_color: '#EA3323',
goods_price_typeface: '400',
goods_price_size: 9,
goods_price_unit_color: '#EA3323',
goods_price_unit_size: 9,
goods_save_price_symbol_color: '#52C41A',
goods_save_price_symbol_size: 10,
goods_save_price_color: '#52C41A',

21
src/config/const/realstore.ts
View File

@ -148,7 +148,7 @@ interface defaultRealstore {
content_border_is_show: string,
content_border_color: string,
content_border_style: string,
content_border_size: paddingStyle,
content_border_size: number,
content_border_margin: marginStyle,
common_style: object;
};
@ -287,7 +287,16 @@ const defaultRealstore: defaultRealstore = {
padding_right: 4,
},
time_style: cloneDeep(common_icon_style),
phone_style: cloneDeep(common_icon_style),
phone_style: {
...cloneDeep(common_icon_style),
color_list: [{ color: '#FDEFED', color_percentage: undefined }],
color: '#D46A50',
padding: 4,
padding_top: 4,
padding_bottom: 4,
padding_left: 4,
padding_right: 4,
},
location_style: cloneDeep(common_icon_style),
// 是否滚动
is_roll: '1',
@ -312,13 +321,7 @@ const defaultRealstore: defaultRealstore = {
content_border_is_show: '1',
content_border_color: '#eee',
content_border_style: 'dashed',
content_border_size: {
padding: 0,
padding_top: 0,
padding_right: 0,
padding_bottom: 1,
padding_left: 0,
},
content_border_size: 1,
content_border_margin: {
margin: 0,
margin_top: 10,

4
src/config/const/salerecords.ts
View File

@ -51,6 +51,7 @@ interface defaultSalerecords {
content_background_img_style: string;
content_background_img: string[];
data_spacing: number;
content_spacing: number;
content_padding: paddingStyle;
content_radius: {
radius: number;
@ -73,7 +74,7 @@ const defaultSalerecords: defaultSalerecords = {
show_number: 2,
keywords: '',
data_auto_list: [],
number: 4,
number: 10,
is_show: ['head', 'nick_name', 'goods_image', 'goods_title', 'time'],
},
style: {
@ -113,6 +114,7 @@ const defaultSalerecords: defaultSalerecords = {
content_background_img_style: '2',
content_background_img: [],
data_spacing: 10,
content_spacing: 10,
content_padding: {
padding: 0,
padding_top: 6,