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

修改商品和文章的显示

v1.1.0
于肖磊 2024-11-23 14:56:31 +08:00
parent 0d77db2eea
commit e26d3f022e
18 changed files with 419 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
<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="sliderName" label-width="40" class="mb-0 w form-item-child-label">
<el-form-item v-if="typeList.includes('size')" :label="sliderName" :label-width="labelWidth" class="mb-0 w form-item-child-label">
<slider v-model="size" :max="100"></slider>
</el-form-item>
<!-- 额外的使用内容 -->
@ -17,11 +17,13 @@ interface Props {
defaultColor?: string;
typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
sliderName?: string;
labelWidth?: number;
}
const props = withDefaults(defineProps<Props>(), {
defaultColor: '',
typeList: () => ['color', 'typeface', 'size'],
sliderName: '字号',
labelWidth: 40,
});
const color = defineModel('color', {
type: String,

6
src/components/common/mult-color-picker/index.vue
View File

@ -10,7 +10,7 @@
<div v-for="(item, index) in color_list" :key="index" class="flex-row align-s gap-12">
<div class="flex-col">
<div class="flex-row align-c gap-12">
<el-color-picker v-model="item.color" :predefine="predefine_colors" @change="change_color(index, $event)" />
<el-color-picker v-model="item.color" :predefine="predefine_colors" :show-alpha="isShowAlpha" @change="change_color(index, $event)" />
<div class="re mo-input-number">
<el-input-number v-model="item.color_percentage" :max="999" placeholder="百分比" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
<div class="define-append">%</div>
@ -46,6 +46,10 @@ const props = defineProps({
[''];
},
},
isShowAlpha: {
type: Boolean,
default: false,
},
});
const direction_type = ref(props.type);
let state = reactive({

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

@ -46,15 +46,18 @@
<template v-else>
<image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-if="field_show.includes('3') && new_content.name_float == '1'">
<div class="text-line-1" :style="article_name + float_name_style">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
</template>
<!-- 角标设置 -->
<subscript-index :value="props.value"></subscript-index>
</div>
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
<div v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && new_content.name_float == '0')" class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div v-if="field_show.includes('3')" class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('3') && new_content.name_float == '0'" class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
</div>
<div class="flex-row jc-sb gap-8 align-e mt-10">
<div :class="[ 'flex-row jc-sb gap-8 align-e', { 'mt-10': (field_show.includes('3') && new_content.name_float == '0') || field_show.includes('2') }] ">
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
<icon name="eye"></icon>
@ -73,7 +76,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle } from '@/utils';
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
import ArticleAPI from '@/api/article';
import { Swiper, SwiperSlide } from 'swiper/vue';
@ -283,6 +286,20 @@ const carousel_col = ref('2');
const carousel_key = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
// 数据的默认值，避免没有值的时候报错
const old_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
const old_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 };
const old_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 };
// 文章名称浮动样式
const float_name_style = computed(() => {
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius = old_radius, name_bg_padding = old_padding, name_bg_margin = old_margin } = new_style.value;
const data = {
color_list: name_bg_color_list,
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
return gradient_computer(data) + radius_computer(name_bg_radius) + padding_computer(name_bg_padding) + margin_computer(name_bg_margin) + location;
});
// 监听value数据变化
watch(
() => props.value,

15
src/components/model-article-list/model-article-list-content.vue
View File

@ -28,6 +28,11 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<template v-if="form.theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -200,6 +205,16 @@ const url_value_dialog_call_back = (item: any[]) => {
};
}
};
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
data.value.name_color = '#fff';
data.value.name_weight = '400';
} else {
data.value.name_color = '#333';
data.value.name_weight = '500';
}
};
</script>
<style lang="scss" scoped>
.content {

21
src/components/model-article-list/model-article-list-styles.vue
View File

@ -15,7 +15,20 @@
</div>
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="文章描述">
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
@ -154,7 +167,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
const background_img_change = (arry: uploadList[]) => {
form.value.article_background_img = arry;
};
// 文章标题浮起显示设置
const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.name_bg_color_list = arry;
form.value.name_bg_direction = type.toString();
};
const emit = defineEmits(['update:value']);
const common_style_update = (value: any) => {
form.value.common_style = value;

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

@ -58,6 +58,11 @@
<el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<template v-if="form.article_theme == '4'">
<el-form-item label="标题浮起">
<el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -292,6 +297,16 @@ watchEffect(() => {
form.tabs_top_up = '0';
}
});
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {
styles.name_color = '#fff';
styles.name_weight = '400';
} else {
styles.name_color = '#333';
styles.name_weight = '500';
}
};
</script>
<style lang="scss" scoped>
.content {

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

@ -41,7 +41,20 @@
</div>
</el-form-item>
<el-form-item label="文章名称">
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size" :label-width="data.theme == '4' && data.name_float == '1' ? 60 : 40">
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :value="form.name_bg_color_list" :type="form.name_bg_direction" :is-show-alpha="true" @update:value="name_bg_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :value="form.name_bg_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :value="form.name_bg_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :value="form.name_bg_radius"></radius>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="文章描述">
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
@ -197,6 +210,11 @@ const background_img_change = (arry: uploadList[]) => {
const common_styles_update = (val: Object) => {
form.value.common_style = val;
};
// 文章标题浮起显示设置
const name_bg_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.name_bg_color_list = arry;
form.value.name_bg_direction = type.toString();
};
</script>
<style lang="scss" scoped>
.styles {

67
src/components/model-data-magic/components/carousel/product-list-show.vue
View File

@ -14,10 +14,10 @@
</div>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<div v-if="isShow.includes('price')" :style="props.goodStyle.goods_price_style">
<span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
<span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
@ -36,14 +36,14 @@
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">
{{ item.show_price_symbol }}{{ item.min_price }}
<div v-if="isShow.includes('price')" class="abs bottom-0 text-line-1" :style="props.goodStyle.goods_price_style + float_pirce_style(props.goodStyle)">
<span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
{{ item.show_price_unit }}
<span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="props.goodStyle.goods_title_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">{{ item.title }}</div>
</div>
</div>
</div>
@ -60,10 +60,10 @@
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<div v-if="isShow.includes('price')" :style="props.goodStyle.goods_price_style">
<span :style="props.goodStyle.goods_price_symbol_style">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
<span :style="props.goodStyle.goods_price_unit_style">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
@ -76,7 +76,7 @@
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
import { gradient_computer, radius_computer, padding_computer, background_computer, margin_computer } from "@/utils";
interface Props {
value: Array<any>;
@ -103,13 +103,22 @@ interface new_style {
goods_chunk_padding: paddingStyle;
goods_background_img: uploadList[];
goods_background_img_style: string;
goods_price_color_list: color_list[];
goods_price_direction: string;
goods_price_radius: radiusStyle;
goods_price_padding: paddingStyle;
goods_price_margin: marginStyle;
goods_price_location: string;
}
// 数据的默认值，避免没有值的时候报错
const old_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 };
const old_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 };
const old_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 };
const block_size = computed(() => {
const total_gap: number = props.goodStyle.data_goods_gap * (split_list.value.length - 1);
return props.outerflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap + 'px) / ' + props.num + ');' : 'width: 100%;height:calc((100% - ' + total_gap + 'px) / ' + props.num + ');';
});
// 图片显示比例
const image_scale = computed(() => {
const data = ['title', 'price', 'price_unit'];
@ -120,11 +129,28 @@ const image_scale = computed(() => {
return 100;
}
});
const float_pirce_style = computed(() => {
return (val: new_style) => {
const { goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center' } = val;
const data = {
color_list: goods_price_color_list,
direction: goods_price_direction,
}
let location = 'left:50%;transform:translateX(-50%);'
if (goods_price_location == 'left') {
location = 'left:0;';
} else if (goods_price_location == 'right') {
location = 'right:0;';
}
return gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location;
}
});
// 用于样式显示
const style_container = computed(() => {
return (val: new_style) => {
if (!isEmpty(val)) {
const { goods_color_list = [], goods_direction = '180deg', goods_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 } } = val;
const { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius } = val;
const data = {
color_list: goods_color_list,
direction: goods_direction,
@ -138,7 +164,7 @@ const style_container = computed(() => {
const style_img_container = computed(() => {
return (val: new_style, type?: string) => {
if (!isEmpty(val)) {
const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding} = val;
const data = {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
@ -167,19 +193,6 @@ const split_list = computed(() => props.value || {});
font-size: 0.9rem;
line-height: 0.9rem;
}
.price-suspension {
width: calc(100% - 0.8rem);
margin: 0 0.4rem;
background: #fff;
font-size: 1.2rem;
line-height: 1.7rem;
color: #EA3323;
text-align: center;
position: absolute;
bottom: 0.4rem;
border-radius: 0.8rem;
}
.half-width {
width: 50%;
}

60
src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
View File

@ -90,12 +90,52 @@
<template v-if="tabs_content.data_type === 'goods'">
<card-container>
<div class="mb-12">商品样式</div>
<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="价格">
<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>
<template v-if="tabs_content.is_show.includes('title')">
<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>
</template>
<template v-if="tabs_content.is_show.includes('price')">
<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" :label-width="tabs_content.goods_flex == 'col_price_float' ? 60 : 40" default-color="#000000">
<template v-if="tabs_content.goods_flex == 'col_price_float'">
<el-form-item label="对齐方式" label-width="60" class="mb-0 w form-item-child-label">
<el-radio-group v-model="form.goods_price_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
<el-form-item label="背景" label-width="60" class="mb-0 w form-item-child-label">
<mult-color-picker :key="form.carouselKey" :value="form.goods_price_color_list" :type="form.goods_price_direction" @update:value="goods_price_mult_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="外边距" label-width="60" class="mb-0 w form-item-child-label">
<margin :key="form.carouselKey" :value="form.goods_price_margin"></margin>
</el-form-item>
<el-form-item label="内间距" label-width="60" class="mb-0 w form-item-child-label">
<padding :key="form.carouselKey" :value="form.goods_price_padding"></padding>
</el-form-item>
<el-form-item label="圆角" label-width="60" class="mb-0 w form-item-child-label">
<radius :key="form.carouselKey" :value="form.goods_price_radius"></radius>
</el-form-item>
</template>
</color-text-size-group>
</el-form-item>
<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="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<template v-if="tabs_content.is_show.includes('price_unit')">
<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="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</template>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
@ -198,7 +238,7 @@ const data_radius_change = (radius: radiusStyle) => {
]));
}
// 商品底板颜色
// 商品底部颜色
const goods_mult_color_picker_event = (arry: string[], type: number) => {
form.value.goods_color_list = arry;
form.value.goods_direction = type.toString();
@ -218,6 +258,12 @@ const goods_radius_change = (radius: radiusStyle) => {
]));
}
// 商品价格底部颜色
const goods_price_mult_color_picker_event = (arry: string[], type: number) => {
form.value.goods_price_color_list = arry;
form.value.goods_price_direction = type.toString();
}
watchEffect(() => {
form.value = props.value;
tabs_content.value = props.content;

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

@ -387,6 +387,9 @@ watch(props.value.content, (val) => {
data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;`;
data_style.goods_price_style = goods_trends_config(item.data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
data_style.goods_price_symbol_style = goods_trends_config(item.data_style, 'price_symbol');
data_style.goods_price_unit_style = goods_trends_config(item.data_style, 'price_unit');
const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
const { goods_list, images_list } = data_content;
// 商品时的处理逻辑

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

@ -121,6 +121,36 @@ const data_style = {
padding_left: 15,
padding_right: 15,
},
goods_price_symbol_size: 9,
goods_price_symbol_color: "#EA3323;",
goods_price_unit_size: 9,
goods_price_unit_color: "#EA3323;",
goods_price_location: 'center',
goods_price_color_list: [{ color: '#fff', color_percentage: undefined }],
goods_price_direction: '180deg',
goods_price_background_img_style: '2',
goods_price_background_img: [],
goods_price_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 4,
margin_left: 0,
margin_right: 0,
},
goods_price_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
},
goods_price_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
// 图片圆角
img_radius: {
radius: 4,

27
src/components/model-goods-list/index.vue
View File

@ -41,14 +41,13 @@
<div v-if="!['3', '4', '5'].includes(form.theme)" class="flex-col gap-5 oh">
<div :class="[form.is_price_solo == '1' ? 'flex-row align-c nowrap' : 'flex-col gap-5']">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">{{ item.show_price_symbol }}</span
<span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
<span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
@ -76,14 +75,13 @@
<div v-else class="flex-row align-c jc-sb">
<div class="flex-row align-c nowrap">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">{{ item.show_price_symbol }}</span
<span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
<span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
@ -133,14 +131,13 @@
<div class="flex-row align-c jc-sb">
<div class="flex-row align-c nowrap">
<div v-if="is_show('price') && (!isEmpty(item.min_price) || typeof item.min_price == 'number')" class="num" :style="`color: ${new_style.shop_price_color}`">
<span class="identifying">{{ item.show_price_symbol }}</span
<span :style="trends_config('price_symbol')">{{ item.show_price_symbol }}</span
><span :style="trends_config('price')">{{ item.min_price }}</span>
<span v-if="is_show('price_unit')" class="identifying">{{ item.show_price_unit }}</span>
<span v-if="is_show('price_unit')" :style="trends_config('price_unit')">{{ item.show_price_unit }}</span>
</div>
<div v-if="show_content && is_show('original_price') && (!isEmpty(item.min_original_price) || typeof item.min_original_price == 'number')" class="size-10 flex">
<!-- <img class="original-price-left" :src="form.static_img[0].url" /> -->
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]"
>{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<span :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="trends_config('original_price')">{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
@ -547,13 +544,7 @@ watchEffect(() => {
// }
.original-price {
// background-color: #ede2c5;
border-radius: 0;
color: #999;
text-decoration: line-through;
font-size: 1.2rem;
border-bottom-right-radius: 1rem;
border-top-right-radius: 1rem;
padding: 0 1rem;
}
.two-columns {
width: calc((100% - v-bind(two_columns)) / 2);

79
src/components/model-goods-list/model-goods-list-styles.vue
View File

@ -14,20 +14,39 @@
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="商品简述">
<color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
<template v-if="data.is_show.includes('title')">
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('simple_desc') && ['0', '1', '2', '3', '5'].includes(theme)">
<el-form-item label="商品简述">
<color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
</el-form-item>
</color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('price')">
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="售价符号">
<color-text-size-group v-model:color="form.shop_price_symbol_color" v-model:size="form.shop_price_symbol_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<template v-if="data.is_show.includes('price_unit')">
<el-form-item label="售价单位">
<color-text-size-group v-model:color="form.shop_price_unit_color" v-model:size="form.shop_price_unit_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</color-text-size-group>
</el-form-item>
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<template v-if="theme != '6'">
</template>
</template>
<template v-if="data.is_show.includes('original_price') && ['0', '1', '2'].includes(theme)">
<el-form-item label="商品原价">
<color-text-size-group v-model:color="form.shop_original_price_color" v-model:size="form.shop_original_price_size" default-color="#999" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('sales_count') && ['0', '1', '2'].includes(theme) ">
<el-form-item label="已售数量">
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="大小" default-color="#000000"></color-text-size-group>
</el-form-item>
@ -97,24 +116,26 @@
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
</el-form-item>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
<template v-if="data.is_shop_show == '1'">
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
</el-form-item>
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
</el-form-item>
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>

74
src/components/model-goods-tabs/model-goods-tabs-styles.vue
View File

@ -40,13 +40,39 @@
<upload v-model="form.shop_background_img" :limit="1" @update:model-value="background_img_change"></upload>
</div>
</el-form-item>
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<template v-if="theme != '6'">
<template v-if="data.is_show.includes('title')">
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('simple_desc') && ['0', '1', '2', '3', '5'].includes(theme)">
<el-form-item label="商品简述">
<color-text-size-group v-model:color="form.shop_simple_desc_color" v-model:size="form.shop_simple_desc_size" default-color="#999" :type-list="['color', 'size']">
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
<slider v-model="form.title_simple_desc_spacing" :max="100"></slider>
</el-form-item>
</color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('price')">
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="售价符号">
<color-text-size-group v-model:color="form.shop_price_symbol_color" v-model:size="form.shop_price_symbol_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<template v-if="data.is_show.includes('price_unit')">
<el-form-item label="售价单位">
<color-text-size-group v-model:color="form.shop_price_unit_color" v-model:size="form.shop_price_unit_size" default-color="#EA3323" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</template>
<template v-if="data.is_show.includes('original_price') && ['0', '1', '2'].includes(theme)">
<el-form-item label="商品原价">
<color-text-size-group v-model:color="form.shop_original_price_color" v-model:size="form.shop_original_price_size" default-color="#999" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
<template v-if="data.is_show.includes('sales_count') && ['0', '1', '2'].includes(theme) ">
<el-form-item label="已售数量">
<color-text-size-group v-model:color="form.shop_sold_number_color" v-model:typeface="form.shop_sold_number_typeface" v-model:size="form.shop_sold_number_size" slider-name="大小" default-color="#000000"></color-text-size-group>
</el-form-item>
@ -116,24 +142,26 @@
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#2a94ff"></flex-gradients-create>
</el-form-item>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
<template v-if="data.is_shop_show == '1'">
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">
<flex-gradients-create :color-list="form.shop_button_color" default-color="#FF3D53"></flex-gradients-create>
</el-form-item>
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
<template v-if="data.shop_type == 'text'">
<el-form-item label="文字设置">
<color-text-size-group v-model:color="form.shop_button_text_color" v-model:typeface="form.shop_button_typeface" v-model:size="form.shop_button_size" default-color="#fff"></color-text-size-group>
</el-form-item>
</template>
<template v-else>
<el-form-item label="图标设置">
<color-text-size-group v-model:color="form.shop_icon_color" v-model:size="form.shop_icon_size" slider-name="大小" default-color="#fff" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>

32
src/config/const/article-list.ts
View File

@ -29,6 +29,7 @@ interface DefaultArticleList {
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
name_float: string;
};
style: {
article_direction: string,
@ -38,6 +39,11 @@ interface DefaultArticleList {
name_weight: string;
name_size: number;
name_color: string;
name_bg_color_list: color_list[];
name_bg_direction: string,
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
@ -83,6 +89,7 @@ const defaultArticleList: DefaultArticleList = {
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
name_float: '0'
},
style: {
article_direction: '90deg',
@ -91,7 +98,30 @@ const defaultArticleList: DefaultArticleList = {
article_background_img: [],
name_weight: '500',
name_size: 14,
name_color: 'rgba(51, 51, 51, 1)',
name_color: '#333',
name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
name_bg_direction: '180deg',
name_bg_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
name_bg_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
},
name_bg_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,

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

@ -36,6 +36,7 @@ interface DefaultArticleTabs {
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
name_float: string;
};
style: {
tabs_one_theme: string;
@ -57,6 +58,11 @@ interface DefaultArticleTabs {
name_weight: string;
name_size: number;
name_color: string;
name_bg_color_list: color_list[];
name_bg_direction: string,
name_bg_margin: marginStyle,
name_bg_padding: paddingStyle,
name_bg_radius: radiusStyle,
desc_color: string;
desc_size: number;
name_desc_space: number;
@ -103,6 +109,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
name_float: '0',
},
style: {
tabs_one_theme: '0',
@ -133,7 +140,30 @@ const defaultArticleTabs: DefaultArticleTabs = {
article_background_img: [],
name_weight: '500',
name_size: 14,
name_color: 'rgba(51, 51, 51, 1)',
name_color: '#333',
name_bg_color_list: [{ color: 'rgba(0, 0, 0, 0.7)', color_percentage: undefined }],
name_bg_direction: '180deg',
name_bg_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
name_bg_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
},
name_bg_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
desc_color: '#999',
desc_size: 12,
name_desc_space: 4,

12
src/config/const/goods-list.ts
View File

@ -58,6 +58,12 @@ interface DefaultProductList {
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
shop_price_symbol_color: string;
shop_price_symbol_size: number;
shop_price_unit_color: string;
shop_price_unit_size: number;
shop_original_price_color: string;
shop_original_price_size: number;
shop_sold_number_typeface: string;
shop_sold_number_size: number;
shop_sold_number_color: string;
@ -169,6 +175,12 @@ const defaultProductList: DefaultProductList = {
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: "#EA3323;",
shop_price_symbol_color: '#EA3323',
shop_price_symbol_size: 9,
shop_price_unit_color: '#EA3323',
shop_price_unit_size: 9,
shop_original_price_color: '#999',
shop_original_price_size: 12,
shop_sold_number_typeface: '400',
shop_sold_number_size: 10,
shop_sold_number_color: "#999999",

12
src/config/const/goods-tabs.ts
View File

@ -79,6 +79,12 @@ interface DefaultProductList {
shop_price_typeface: string;
shop_price_size: number;
shop_price_color: string;
shop_price_symbol_color: string;
shop_price_symbol_size: number;
shop_price_unit_color: string;
shop_price_unit_size: number;
shop_original_price_color: string;
shop_original_price_size: number;
shop_sold_number_typeface: string;
shop_sold_number_size: number;
shop_sold_number_color: string;
@ -211,6 +217,12 @@ const defaultProductList: DefaultProductList = {
shop_price_typeface: '500',
shop_price_size: 18,
shop_price_color: '#EA3323;',
shop_price_symbol_color: '#EA3323',
shop_price_symbol_size: 9,
shop_price_unit_color: '#EA3323',
shop_price_unit_size: 9,
shop_original_price_color: '#999',
shop_original_price_size: 12,
shop_sold_number_typeface: '400',
shop_sold_number_size: 10,
shop_sold_number_color: '#999999',