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-08-16 10:13:49 +08:00
parent 4d90ba5f20 a550315892
commit 0add403b7e
7 changed files with 195 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/model-data-magic/components/magic-carousel.vue Normal file
View File

@ -0,0 +1,36 @@
<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" @change="carousel_change">
<el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
<template v-if="props.type === 'img'">
<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>
</template>
</el-carousel-item>
</el-carousel>
</template>
<script setup lang="ts">
interface Props {
value: any;
contentImgRadius: string;
type: string;
actived: number;
}
const props = defineProps<Props>();
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>
</style>

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

@ -1,30 +1,63 @@
<template>
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col gap-10">
<div>标题</div>
<div>价格</div>
</div>
<template v-if="props.outerflex == 'row'">
<div class="flex-row gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
<template v-else-if="actived != 7 || props.num !== 1">
<div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1, 'w': props.num == 1 }]">
<div class="w h re">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="isShow.includes('1')" class="price-suspension">¥{{ '51' }}</div>
</div>
<div v-if="isShow.includes('0')" class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col w h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="!isEmpty(isShow)" class="flex-col w tl gap-10" :style="`${ padding_computer(props.chunkPadding) }`">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col gap-10 align-c">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col gap-10">
<div>标题</div>
<div>价格</div>
</div>
<div class="flex-col gap-20 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c w h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div v-if="!isEmpty(isShow)" class="flex-col w h tl gap-10">
<div v-if="isShow.includes('0')" class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div v-if="isShow.includes('1')" class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
</div>
</template>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { padding_computer } from '@/utils';
interface Props {
value: Array<any>;
outerflex: string;
flex: string;
contentImgRadius: string;
num: number;
actived: number;
isShow: Array<string>;
chunkPadding: internalStyle;
}
const props = withDefaults(defineProps<Props>(), {
@ -40,5 +73,36 @@ watchEffect(() => {
</script>
<style lang="scss" scoped>
:deep(.el-image) {
height: 100%;
width: 100%;
.el-image__inner {
object-fit: cover;
}
.image-slot img {
width: 4rem !important;
}
}
.identifying {
font-size: 2rem;
color: #EA3323;
.num {
font-size: 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%;
}
</style>

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

@ -50,6 +50,11 @@
</template>
</drag>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
<el-form-item label="展示信息">
<el-checkbox-group v-model="form.is_show">
<el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</card-container>
</template>
<script setup lang="ts">
@ -66,6 +71,8 @@ const props = defineProps({
}
});
const list_show_list = [{ name: '商品名称', value: '0' }, { name: '商品售价', value: '1' }]
const form = ref(props.value);
const img_add = () => {

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

@ -33,18 +33,23 @@
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :max="100"></slider>
</el-form-item>
<template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</div>
</el-form-item>
<el-form-item label="副标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
<template v-if="tabs_content.data_type === 'commodity'">
<template v-if="isShowTitle">
<el-form-item label="主标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
</div>
</el-form-item>
<el-form-item label="副标题">
<div class="flex-col gap-10 w">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
</div>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
</template>
</card-container>
@ -53,6 +58,7 @@
</card-container>
</template>
<script setup lang="ts">
import { pick } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -75,6 +81,15 @@ const mult_color_picker_event = (arry: string[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
const chunk_padding_change = (padding: any) => {
form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, [
'padding',
'padding_top',
'padding_bottom',
'padding_left',
'padding_right'
]));
};
watchEffect(() => {
form.value = props.value;

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

@ -4,30 +4,22 @@
<!-- 风格9 -->
<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 }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<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) }]">
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h">
<div class="flex-col gap-5 tl">
<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">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="mt-20 w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<a>item1</a>
</el-carousel-item>
</el-carousel>
<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>
</div>
</div>
</template>
<template v-else>
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</el-carousel-item>
</el-carousel>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<div v-if="item.data_style.is_show && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
@ -41,39 +33,22 @@
</div>
</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 }`">
<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 }`">
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h flex-col gap-20">
<div class="flex-col gap-5 tl">
<div class="w h flex-col gap-20" :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">
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<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">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<template v-if="item.outerflex == 'row'">
<div class="flex-row gap-10 align-c">
<product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</div>
</template>
<template v-else>
<div class="flex-col gap-20 align-c">
<product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</div>
</template>
</el-carousel-item>
</el-carousel>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</div>
</div>
</template>
<template v-else>
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</el-carousel-item>
</el-carousel>
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
</template>
<div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<div v-if="item.data_style.is_show && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
@ -89,7 +64,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer, padding_computer } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -106,13 +81,14 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
// const data_list = computed(() => form.value.data_magic_list);
const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
// 图片间距设置
const spacing = computed(() => new_style.value.image_spacing / 2 + 'px');
// 内容圆角设置
const content_radius = computed(() => radius_computer(new_style.value.data_radius));
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value));
const content_img_radius = computed(() => radius_computer(new_style.value.img_radius));
//#region 容器大小计算
const div_width = ref(0);
const container_size = computed(() => div_width.value + 'px');
@ -165,7 +141,7 @@ const getSelectedLeft = (item: data_magic) => {
};
// 根据当前页面大小计算成百分比
const selected_style = (item: data_magic) => {
return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
return `overflow: hidden;width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
};
// 计算成百分比
const percentage = (num: number) => {
@ -313,20 +289,17 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
.style-size {
height: 100%;
width: 100%;
.three {
width: 33%;
height: 100%;
position: relative;
}
.style9-top {
width: calc(50% - 0.2rem);
height: 50%;
width: calc(50% - v-bind(outer_spacing));
height: calc(50% - v-bind(outer_spacing));
position: relative;
overflow: hidden;
}
.style9-bottom {
width: calc(33% - 0.1rem);
height: 50%;
width: calc(33% - v-bind(outer_spacing));
height: calc(50% - v-bind(outer_spacing));
position: relative;
overflow: hidden;
}
}
.dot-center {

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

@ -33,10 +33,10 @@
</card-container>
<el-tabs v-model="tabs_name" class="content-tabs">
<el-tab-pane label="内容设置" name="content">
<tabs-content :value="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-content>
<tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-styles>
<tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-styles>
</el-tab-pane>
</el-tabs>
</el-form>
@ -68,6 +68,13 @@ const data_style = {
subtitle_color: '#FF852A',
subtitle_typeface: 'normal',
subtitle_size: 14,
chunk_padding: {
padding: 0,
padding_top: 20,
padding_bottom: 20,
padding_left: 15,
padding_right: 15,
},
is_show: true,
indicator_style: 'dot',
indicator_location: 'center',
@ -85,9 +92,10 @@ const data_style = {
// 每个小模块独立的内容
const data_content = {
data_type: 'commodity',
heading_title: '',
subtitle: '',
heading_title: '主标题',
subtitle: '副标题',
product_list:[],
is_show: ['0', '1'],
img_list:[
{
carousel_img: [],
@ -155,12 +163,19 @@ const style_click = (index: number) => {
}
// 规整复制的数据
const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item) => ({
return cloneDeep(style_show_list[index]).map((item, map_index) => ({
...item,
actived_index: 0,
data_content: cloneDeep(data_content),
data_style: {
...cloneDeep(data_style),
chunk_padding: {
padding: show_padding(index, map_index) ? 10 : 0,
padding_top: show_padding(index, map_index) ? 10 : 20,
padding_bottom: show_padding(index, map_index) ? 10 : 20,
padding_left: show_padding(index, map_index) ? 10 : 15,
padding_right: show_padding(index, map_index) ? 10 : 15,
},
carouselKey: get_math(),
}
}));
@ -171,6 +186,9 @@ const selected_click = (index: number) => {
selected_active.value = index;
tabs_name.value = 'content';
}
const show_padding = (index:number, map_index:number) => {
return index == 7 && ![0, 1].includes(map_index)
}
//#endregion
const data_title = (item: any) => {
let title = `共有`;

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

@ -71,7 +71,6 @@
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { ElButton } from 'element-plus';
const props = defineProps({
value: {
type: Object,