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

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

v1.0.0
sws 2024-10-11 14:44:55 +08:00
parent 9ae21a4539 54ded86b27
commit a8be02b772
10 changed files with 79 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/custom-module/model-text/index.vue
View File

@ -47,7 +47,7 @@ const text_title = computed(() => {
});
const text_style = computed(() => {
let style = `font-size: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
let style = `font-size: ${ form.text_size }px;line-height: ${ form.text_size }px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding) };`;
if (form.text_weight == 'italic') {
style += `font-style: italic`;
} else if (form.text_weight == '500') {

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

@ -5,7 +5,7 @@
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius"></image-empty>
</template>
<template v-else>
<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" :content-img-radius="contentImgRadius"></product-list-show>
<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="contentImgRadius"></product-list-show>
</template>
</el-carousel-item>
</el-carousel>
@ -17,18 +17,19 @@ interface Props {
contentImgRadius: string;
type: string;
actived: number;
goodStyle?: any;
}
const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
goodStyle: {},
});
const form = computed(() => props.value);
const form = ref(props.value);
const emits = defineEmits(['carousel_change']);
const carousel_change = (index: number) => {
emits('carousel_change', index);
};
watchEffect(() => {
form.value = props.value;
});
</script>
<style lang="scss" scoped>

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

@ -10,8 +10,8 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :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>
@ -29,14 +29,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">
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
{{ item.show_price_symbol }}{{ item.min_price }}
<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 shop-title tl w" style="overflow: inherit;">{{ item.title }}</div>
<div v-if="isShow.includes('title')" class="text-line-1 size-14 shop-title tl w" style="overflow: inherit;" :style="goodStyle.goods_title_style">{{ item.title }}</div>
</div>
</template>
<template v-else>
@ -48,8 +48,8 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :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>
@ -71,8 +71,8 @@
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
</template>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-20">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title">{{ item.title }}</div>
<div v-if="isShow.includes('price')" class="identifying">
<div v-if="isShow.includes('title')" class="text-line-2 size-14 shop-title" :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>
@ -98,6 +98,7 @@ interface Props {
actived: number;
isShow: Array<string>;
chunkPadding: paddingStyle;
goodStyle: any;
}
const props = withDefaults(defineProps<Props>(), {
@ -105,11 +106,8 @@ const props = withDefaults(defineProps<Props>(), {
outerflex: 'row',
flex: 'row',
});
const split_list = ref(props.value);
watchEffect(() => {
split_list.value = props.value;
})
const split_list = computed(() => props.value || {});
</script>
<style lang="scss" scoped>
@ -123,13 +121,10 @@ watchEffect(() => {
width: 4rem !important;
}
}
.identifying {
font-size: 1.4rem;
color: #EA3323;
.num {
font-size: 0.9rem;
}
.identifying .num {
font-size: 0.9rem;
}
.price-suspension {
width: calc(100% - 0.8rem);
margin: 0 0.4rem;
@ -148,7 +143,4 @@ watchEffect(() => {
.half-width {
width: 50%;
}
.shop-title {
line-height: 2rem;
}
</style>

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

@ -40,6 +40,16 @@
</template>
</card-container>
<div class="bg-f5 divider-line" />
<card-container v-if="tabs_content.data_type === 'goods'">
<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>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
</card-container>

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

@ -6,7 +6,7 @@
<template v-if="form.style_actived == 7">
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<div class="w h" :style="`${ item.data_style.background_style }`">
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div class="w h flex-col gap-20" :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="flex-col gap-5 tl">
@ -14,7 +14,7 @@
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
</div>
</div>
</template>
@ -37,7 +37,7 @@
</template>
<template v-else>
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
<div class="w h" :style="`${ item.data_style.background_style }`">
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="[spacing_processing(index) ? 'gap-20 w h flex-col' : 'gap-10 w h flex-col']" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
@ -45,7 +45,7 @@
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
<magic-carousel :value="item" :good-style="item.data_style" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</div>
</div>
</template>
@ -239,12 +239,7 @@ const commodity_list = (list: any[], num: number) => {
return [{ split_list: Array(num).fill(default_list)}];
}
}
const background_style = (item: any) => {
return gradient_computer(item);
};
const background_img_style = (item: any) => {
return background_computer(item);
};
const old_list = ref<any>({});
const data_magic_list = ref<data_magic[]>([]);
watch(props.value.content, (val) => {
@ -257,8 +252,11 @@ watch(props.value.content, (val) => {
item.actived_index = 0;
// 指示器样式
data_style.indicator_styles = indicator_style(data_style);
data_style.background_style = background_style(data_style);
data_style.background_img_style = background_img_style(data_style);
data_style.background_style = gradient_computer(data_style);
data_style.background_img_style = background_computer(data_style);
// 商品名称和价格样式
data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
data_style.goods_price_style = goods_trends_config(item.data_style, 'price');
const { is_roll, rotation_direction, interval_time } = data_style;
const { goods_list, images_list } = data_content;
@ -301,6 +299,9 @@ const carousel_change = (index: number, key: number) => {
}
}
// 根据传递的参数，从对象中取值
const goods_trends_config = (style: any, key: string) => {
return text_style(style[`goods_${key}_typeface`], style[`goods_${key}_size`], style[`goods_${key}_color`]);
}
const trends_config = (style: any, key: string) => {
return text_style(style[`${key}_typeface`], style[`${key}_size`], style[`${key}_color`]);
}

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

@ -70,6 +70,12 @@ const data_style = {
subtitle_color: '#FF852A',
subtitle_typeface: '400',
subtitle_size: 14,
goods_title_typeface: '500',
goods_title_size: 14,
goods_title_color: "#333333",
goods_price_typeface: '500',
goods_price_size: 18,
goods_price_color: "#EA3323;",
chunk_padding: {
padding: 0,
padding_top: 20,

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

@ -107,7 +107,7 @@ const up_slide_style = computed(() => {
const up_slide_img_style = computed(() => {
let style = ``;
if (props.scollTop > 0) {
const { up_slide_background_img, up_slide_background_img_style } = new_style.value;
const { up_slide_background_img = '', up_slide_background_img_style = '' } = new_style.value;
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
style += background_computer(back);

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

@ -19,7 +19,7 @@
</template>
</div>
</el-form-item>
<el-form-item label="功能按钮">
<el-form-item label="状态栏">
<el-radio-group v-model="form.function_buttons_type">
<el-radio value="0">黑色</el-radio>
<el-radio value="1">白色</el-radio>
@ -41,7 +41,7 @@
</el-form-item>
<el-form-item label="上滑背景">
<div class="w h flex-col gap-10">
<mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
<mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_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.up_slide_background_img_style"></bg-btn-style>
@ -106,6 +106,7 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, search_content } = toRefs(state);
console.log(form);
const header_background_type_change_event = (val: any) => {
if (val === 'color_image') {

5
src/views/layout/components/main/index.vue
View File

@ -181,16 +181,19 @@ watchEffect(() => {
// 已选组件逻辑处理
const drawer_selected = ref(false);
const is_show_drawer = ref(true);
watchEffect(() => {
if (diy_data.value.length > 0 || tabs_data.value.length > 0) {
if ((diy_data.value.length > 0 || tabs_data.value.length > 0) && is_show_drawer.value) {
drawer_selected.value = true;
} else {
drawer_selected.value = false;
}
});
const toggle_drawer = () => {
is_show_drawer.value = !is_show_drawer.value;
drawer_selected.value = !drawer_selected.value;
};
// 父组件调用的方法
const emits = defineEmits(['rightUpdate', 'import', 'export', 'clear']);
const activeNames = reactive(['base', 'plugins', 'tool']);

22
src/views/layout/index.vue
View File

@ -133,7 +133,14 @@ const init = () => {
if (get_id()) {
DiyAPI.getInit({ id: get_id() }).then((res: any) => {
if (res.data) {
form.value = form_data_transfor_diy_data(res.data);
let data = form_data_transfor_diy_data(res.data);
// 默认数据合并
data.header.com_data = default_merge(data.header.com_data, 'header_nav');
data.footer.com_data = default_merge(data.footer.com_data, 'footer_nav');
data.diy_data = data_merge(data.diy_data);
data.tabs_data = data_merge(data.tabs_data);
form.value = data;
} else {
is_empty.value = true;
}
@ -146,6 +153,19 @@ const init = () => {
loading_event();
}
};
// 数据合并
const data_merge = (list: string[]) => {
list.forEach((item: any) => {
item.com_data = default_merge(item.com_data, item.key);;
});
return list;
};
// 浅层数据合并
const default_merge = (data: any, key: string) => {
data.style = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style, data.style);
data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]), data.content);
return data;
};
// 初始化公共数据
const common_init = () => {