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

修改数据魔方处理

v1.1.0
于肖磊 2024-10-30 17:35:36 +08:00
parent 5dc053eb5a
commit 4a554f9258
9 changed files with 307 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/model-data-magic/components/magic-carousel.vue
View File

@ -1,17 +1,23 @@
<template> <template>
<el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change"> <div class="w h oh" :style="props.type === 'img' ? '' : style_container(form.data_style)">
<el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1"> <div class="w h" :style="props.type === 'img' ? '' : style_img_container(form.data_style)">
<template v-if="props.type === 'img'"> <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
<image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty> <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
</template> <template v-if="props.type === 'img'">
<template v-else> <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
<product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show> </template>
</template> <template v-else>
</el-carousel-item> <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
</el-carousel> </template>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
import { isEmpty } from "lodash";
interface Props { interface Props {
value: any; value: any;
type: string; type: string;
@ -24,6 +30,44 @@ const props = withDefaults(defineProps<Props>(), {
}); });
const form = computed(() => props.value); const form = computed(() => props.value);
interface new_style {
data_color_list: color_list[];
data_direction: string;
data_radius: radiusStyle;
data_chunk_padding: paddingStyle;
data_background_img: uploadList[];
data_background_img_style: string;
}
// 用于样式显示
const style_container = computed(() => {
return (val: new_style) => {
if (!isEmpty(val)) {
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = val;
const data = {
color_list: data_color_list,
direction: data_direction,
}
return gradient_computer(data) + radius_computer(data_radius);
} else {
return '';
}
}
});
const style_img_container = computed(() => {
return (val: new_style) => {
if (!isEmpty(val)) {
const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
const data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
return padding_computer(data_chunk_padding) + background_computer(data);
} else {
return '';
}
}
});
const emits = defineEmits(['carousel_change']); const emits = defineEmits(['carousel_change']);
const carousel_change = (index: number) => { const carousel_change = (index: number) => {

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

@ -2,58 +2,70 @@
<template v-if="props.outerflex == 'row'"> <template v-if="props.outerflex == 'row'">
<div class="flex-row gap-10 align-c w h"> <div class="flex-row gap-10 align-c w h">
<template v-if="props.flex === 'row'"> <template v-if="props.flex === 'row'">
<div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 half-width h"> <div v-for="(item, index) in split_list" :key="index" class="half-width h">
<template v-if="!isEmpty(item.new_cover)"> <div class="w h oh" :style="style_container(goodStyle)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty> <div class="w h flex-row gap-10" :style="style_img_container(goodStyle)">
</template> <template v-if="!isEmpty(item.new_cover)">
<template v-else> <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template> </template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="actived != 7 || props.num != 1"> <template v-else-if="actived != 7 || props.num != 1">
<div v-for="(item, index) in split_list" :key="index" :class="['flex-col gap-10 h', { 'half-width': props.num != 1, 'w': props.num == 1 }]"> <div v-for="(item, index) in split_list" :key="index" :class="['h', { 'half-width': props.num != 1, 'w': props.num == 1 }]">
<div class="w h re"> <div class="w h oh" :style="style_container(goodStyle)">
<template v-if="!isEmpty(item.new_cover)"> <div class="w h flex-col gap-10" :style="style_img_container(goodStyle)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty> <div class="w h re flex-1">
</template> <template v-if="!isEmpty(item.new_cover)">
<template v-else> <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty> </template>
</template> <template v-else>
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style"> <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
{{ item.show_price_symbol }}{{ item.min_price }} </template>
<template v-if="isShow.includes('price_unit')"> <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
{{ item.show_price_unit }} {{ item.show_price_symbol }}{{ item.min_price }}
</template> <template v-if="isShow.includes('price_unit')">
{{ item.show_price_unit }}
</template>
</div>
</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="goodStyle.goods_title_style">{{ item.title }}</div>
</div> </div>
</div> </div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" style="overflow: inherit;" :style="goodStyle.goods_title_style">{{ item.title }}</div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div v-for="(item, index) in split_list" :key="index" class="flex-col w h"> <div v-for="(item, index) in split_list" :key="index" class="w h">
<template v-if="!isEmpty(item.new_cover)"> <div class="w h oh" :style="style_container(goodStyle)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty> <div class="w h flex-col" :style="style_img_container(goodStyle)">
</template> <template v-if="!isEmpty(item.new_cover)">
<template v-else> <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template> </template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -63,20 +75,24 @@
<template v-else> <template v-else>
<div class="flex-col gap-10 align-c w h"> <div class="flex-col gap-10 align-c w h">
<template v-if="props.flex === 'row'"> <template v-if="props.flex === 'row'">
<div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h shop-max-height"> <div v-for="(item, index) in split_list" :key="index" class="w h shop-max-height">
<template v-if="!isEmpty(item.new_cover)"> <div class="w h oh" :style="style_container(goodStyle)">
<image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty> <div class="w h flex-row gap-10 align-c" :style="style_img_container(goodStyle)">
</template> <template v-if="!isEmpty(item.new_cover)">
<template v-else> <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template> </template>
<template v-else>
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
<template v-if="isShow.includes('price_unit')">
<span class="num">{{ item.show_price_unit }}</span>
</template>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -87,7 +103,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { padding_computer } from '@/utils'; import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
interface Props { interface Props {
value: Array<any>; value: Array<any>;
@ -106,7 +122,44 @@ const props = withDefaults(defineProps<Props>(), {
outerflex: 'row', outerflex: 'row',
flex: 'row', flex: 'row',
}); });
interface new_style {
goods_color_list: color_list[];
goods_direction: string;
goods_radius: radiusStyle;
goods_chunk_padding: paddingStyle;
goods_background_img: uploadList[];
goods_background_img_style: string;
}
// 用于样式显示
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 data = {
color_list: goods_color_list,
direction: goods_direction,
}
return gradient_computer(data) + radius_computer(goods_radius);
} else {
return '';
}
}
});
const style_img_container = computed(() => {
return (val: new_style) => {
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 data = {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
}
return padding_computer(goods_chunk_padding) + background_computer(data);
} else {
return '';
}
}
});
const split_list = computed(() => props.value || {}); const split_list = computed(() => props.value || {});
const gap_height = computed(() => 20 / 3 + 'px'); const gap_height = computed(() => 20 / 3 + 'px');
</script> </script>

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

@ -82,7 +82,7 @@ const props = defineProps({
isShowTitle: { isShowTitle: {
type: Boolean, type: Boolean,
default: true, default: true,
}, }
}); });
const list_show_list = [ const list_show_list = [

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

@ -56,16 +56,56 @@
</el-form-item> </el-form-item>
</card-container> </card-container>
</template> </template>
<template v-if="tabs_content.data_type === 'goods'">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">数据样式</div>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :key="form.carouselKey" :value="form.data_color_list" :type="form.data_direction" @update:value="data_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.data_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.data_background_img" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.data_chunk_padding" @update:value="data_chunk_padding_change"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
</el-form-item>
</card-container>
</template>
<template v-if="tabs_content.data_type === 'goods'"> <template v-if="tabs_content.data_type === 'goods'">
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />
<card-container> <card-container>
<div class="mb-12">商品样式</div> <div class="mb-12">商品样式</div>
<el-form-item label="商品名称"> <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> <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>
<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> <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>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :key="form.carouselKey" :value="form.goods_color_list" :type="form.goods_direction" @update:value="goods_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.goods_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.goods_background_img" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.goods_chunk_padding" @update:value="goods_chunk_padding_change"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :key="form.carouselKey" :value="form.goods_radius" @update:value="goods_radius_change"></radius>
</el-form-item>
</card-container> </card-container>
</template> </template>
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />
@ -74,7 +114,7 @@
</card-container> </card-container>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { pick, isEmpty } from 'lodash'; import { pick, isEmpty, cloneDeep } from 'lodash';
const props = defineProps({ const props = defineProps({
value: { value: {
type: Object, type: Object,
@ -87,7 +127,7 @@ const props = defineProps({
isShowTitle: { isShowTitle: {
type: Boolean, type: Boolean,
default: true, default: true,
}, }
}); });
const form = ref(props.value); const form = ref(props.value);
@ -97,11 +137,11 @@ const mult_color_picker_event = (arry: string[], type: number) => {
form.value.color_list = arry; form.value.color_list = arry;
form.value.direction = type.toString(); form.value.direction = type.toString();
}; };
const chunk_padding_change = (padding: any) => { const chunk_padding_change = (padding: paddingStyle) => {
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right'])); form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
}; };
// 内容圆角 // 内容圆角
const img_radius_change = (radius: any) => { const img_radius_change = (radius: radiusStyle) => {
const data = !isEmpty(form.value.img_radius) ? form.value.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 }; const data = !isEmpty(form.value.img_radius) ? form.value.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
form.value.img_radius = Object.assign(data, pick(radius, [ form.value.img_radius = Object.assign(data, pick(radius, [
'radius', 'radius',
@ -111,6 +151,45 @@ const img_radius_change = (radius: any) => {
'radius_bottom_right', 'radius_bottom_right',
])); ]));
} }
// 数据底板颜色
const data_mult_color_picker_event = (arry: string[], type: number) => {
form.value.data_color_list = arry;
form.value.data_direction = type.toString();
}
const data_chunk_padding_change = (padding: paddingStyle) => {
form.value.data_chunk_padding = Object.assign(form.value.data_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
// 内容圆角
const data_radius_change = (radius: radiusStyle) => {
const data = !isEmpty(form.value.data_radius) ? form.value.data_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
form.value.data_radius = Object.assign(data, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
// 商品底板颜色
const goods_mult_color_picker_event = (arry: string[], type: number) => {
form.value.goods_color_list = arry;
form.value.goods_direction = type.toString();
}
const goods_chunk_padding_change = (padding: paddingStyle) => {
form.value.goods_chunk_padding = Object.assign(form.value.goods_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
};
// 内容圆角
const goods_radius_change = (radius: radiusStyle) => {
const data = !isEmpty(form.value.goods_radius) ? form.value.goods_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
form.value.goods_radius = Object.assign(data, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
watchEffect(() => { watchEffect(() => {
form.value = props.value; form.value = props.value;

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

@ -10,14 +10,14 @@
<template v-if="item.data_content.data_type == 'goods'"> <template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`"> <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')"> <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type == 'text'"> <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p> <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
</template>
<template v-else-if="item.data_content.heading_title_img.length > 0">
<div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" /> <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
</div> </div>
</template> </template>
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p> <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div> </div>
<div class="w h"> <div class="w h">
@ -48,14 +48,14 @@
<template v-if="item.data_content.data_type == 'goods'"> <template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`"> <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')"> <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type == 'text'"> <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p> <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
</template>
<template v-else-if="item.data_content.heading_title_img.length > 0">
<div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" /> <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
</div> </div>
</template> </template>
<template v-else>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p> <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div> </div>
<div class="w h"> <div class="w h">

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

@ -81,6 +81,24 @@ const data_style = {
goods_price_typeface: '500', goods_price_typeface: '500',
goods_price_size: 18, goods_price_size: 18,
goods_price_color: "#EA3323;", goods_price_color: "#EA3323;",
goods_color_list: [{ color: '', color_percentage: undefined }],
goods_direction: '180deg',
goods_background_img_style: '2',
goods_background_img: [],
goods_chunk_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
goods_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
chunk_padding: { chunk_padding: {
padding: 0, padding: 0,
padding_top: 20, padding_top: 20,
@ -97,6 +115,24 @@ const data_style = {
radius_bottom_right: 4, radius_bottom_right: 4,
}, },
is_show: '1', is_show: '1',
data_color_list: [{ color: '', color_percentage: undefined }],
data_direction: '180deg',
data_background_img_style: '2',
data_background_img: [],
data_chunk_padding: {
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
data_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
indicator_style: 'dot', indicator_style: 'dot',
indicator_location: 'center', indicator_location: 'center',
indicator_size: 5, indicator_size: 5,
@ -156,6 +192,12 @@ const style_height = computed(() => cubeHeight.value + 'px');
onBeforeMount(() => { onBeforeMount(() => {
if (isEmpty(form.value.data_magic_list)) { if (isEmpty(form.value.data_magic_list)) {
form.value.data_magic_list = magic_list(0); form.value.data_magic_list = magic_list(0);
} else {
// 历史数据处理一下，避免有新增字段导致报错
form.value.data_magic_list.forEach((item: any) => {
item.data_style = Object.assign({}, cloneDeep(data_style), item.data_style);
item.data_content = Object.assign({}, cloneDeep(data_content), item.data_content);
});
} }
}) })
onMounted(() => { onMounted(() => {

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

@ -11,7 +11,7 @@
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon> <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
</template> </template>
<div v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</div> <div v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</div>
<div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div> <div v-if="!isEmpty(form.subtitle) && new_style.title_line == '1'" class="text-word-break nowrap" :style="subtitle_style">{{ form.subtitle }}</div>
</div> </div>
<div class="flex-row gap-10 align-c right-0 abs"> <div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show == '1'"> <template v-if="form.keyword_show == '1'">
@ -22,7 +22,7 @@
<div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div> <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
</div> </div>
</div> </div>
<div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div> <div v-if="!isEmpty(form.subtitle) && new_style.title_line == '0'" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
</div> </div>
</div> </div>
</div> </div>

5
src/components/page-settings/index.vue
View File

@ -5,7 +5,7 @@
<div class="w h abs up_slide_bg" :style="up_slide_style"> <div class="w h abs up_slide_bg" :style="up_slide_style">
<div class="w h" :style="up_slide_img_style"></div> <div class="w h" :style="up_slide_img_style"></div>
</div> </div>
<div class="pt-15 pl-18 pr-22 w pb-6"> <div class="pt-15 pl-18 pr-22 w pb-6 status-bar">
<img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" :src="main_top_img" /> <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" :src="main_top_img" />
</div> </div>
<div class="model-head tc re mlr-12 mt-6"> <div class="model-head tc re mlr-12 mt-6">
@ -192,6 +192,9 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
width: 34rem; width: 34rem;
} }
} }
.status-bar {
height: 4.2rem;
}
.model-head { .model-head {
// height: 3.2rem; // height: 3.2rem;
overflow: hidden; overflow: hidden;

2
src/config/const/title.ts
View File

@ -31,6 +31,7 @@ interface defaultSearch {
subtitle_color: string; subtitle_color: string;
subtitle_size: number; subtitle_size: number;
subtitle_weight: string; subtitle_weight: string;
title_line: string;
keyword_color: string; keyword_color: string;
keyword_size: number; keyword_size: number;
right_color: string; right_color: string;
@ -80,6 +81,7 @@ const defaultSearch: defaultSearch = {
subtitle_color: '#999', subtitle_color: '#999',
subtitle_size: 12, subtitle_size: 12,
subtitle_weight: 'normal', subtitle_weight: 'normal',
title_line: '0',
// 关键字设置 // 关键字设置
keyword_color: '#000', keyword_color: '#000',
keyword_size: 12, keyword_size: 12,