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

Merge branch 'dev-yxl' of gitee.com:zongzhige/shopxo-uniapp into dev

master
gongfuxiang 2025-02-26 17:00:32 +08:00
parent cd9f2d6709 4dad15f548
commit cd79ff3c39
13 changed files with 389 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
common/js/common/common.js
View File

@ -629,4 +629,25 @@ export function get_math() {
export const percentage_count = (num, container_size) => {
const marks = (num / container_size) * 100;
return marks.toFixed(4) + '%';
};
/**
* 计算当前偏移量
*
* @param size 当前的组件的大小宽或者高。
* @param location 容器的位置的偏移量。
* @param container_size 对应位置的容器的大小
* @returns 偏移量
*/
export const location_compute = (size, location, container_size) => {
if (size + location >= container_size) {
const deviation = container_size - size;
if (deviation >= 0) {
return deviation;
} else {
return 0;
}
} else {
return location;
}
};

10
components/diy/custom.vue
View File

@ -10,7 +10,7 @@
<view v-for="(item1, index1) in item.split_list" :key="index1">
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -23,7 +23,7 @@
<view :class="form.data_source_direction != 'horizontal' ? 'ht-auto ' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'column-gap:' + new_style.column_gap + 'px;' : ''">
<view v-for="(item1, index1) in item.split_list" :key="index1" class="wh-auto ht-auto" :style="style_chunk_container + swiper_width + (form.data_source_direction == 'horizontal' ? gap_width : 'margin-bottom:' + content_outer_spacing_magin)">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -44,7 +44,7 @@
<template v-else>
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propConfigLoop="form.data_source_is_loop || '1'" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</template>
@ -52,14 +52,14 @@
<template v-else-if="!isEmpty(form.data_source) && form.data_source_is_loop == '0'">
<view class="h" :style="style_chunk_container">
<view class="w h oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="{}" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propSourceList="{}" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</template>
<template v-else>
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propConfigLoop="form.data_source_is_loop || '1'" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</template>

4
components/diy/data-magic.vue
View File

@ -203,8 +203,8 @@
const new_style = this.propValue.style;
const container_height = !isEmpty(new_form.container_height) ? new_form.container_height : sys_width;
const density = !isEmpty(new_form.magic_cube_density) ? new_form.magic_cube_density : 4;
const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
const { margin_left, margin_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
this.setData({
form: new_form,
new_style: new_style,

81
components/diy/diy.vue
View File

@ -10,7 +10,7 @@
<view class="content flex-col" :style="'padding-top:calc(' + (temp_is_header_top ? temp_header_top + temp_sticky_top + 'px)' : '0px)')">
<view v-for="item in tabs_data" :key="item.key">
<template v-if="item.is_enable == '1'">
<componentDiyTabs v-if="item.key == 'tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="get_tabs_data_prop_top" :propStickyTop="get_tabs_data_prop_sticky_top" :propIsImmersionModel="is_immersion_model && is_the_safe_distance_enabled" :propNavIsTop="is_header_top" :propTabsIsTop="true" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabs v-if="item.key == 'tabs'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="get_tabs_data_prop_top" :propStickyTop="get_tabs_data_prop_sticky_top" :propIsImmersionModel="is_immersion_model && is_the_safe_distance_enabled && item.com_data.content.tabs_top_up == '1'" :propNavIsTop="is_header_top" :propTabsIsTop="true" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propIndex="is_immersive_style_and_general_safe_distance_value ? item.index : -1" :propContentPadding="content_padding" :propValue="item.com_data" :propTop="get_tabs_data_prop_top" :propStickyTop="get_tabs_data_prop_sticky_top" :propIsImmersionModel="is_immersion_model && is_the_safe_distance_enabled" :propScrollTop="scroll_top" :propTabsIsTop="true" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event" @onVideoPlay="video_play"></componentDiyTabsCarousel>
</template>
</view>
@ -26,9 +26,9 @@
<componentDiyNotice v-else-if="item.key == 'notice'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyNotice>
<componentDiyVideo v-else-if="item.key == 'video'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyVideo>
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyArticleList>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height" :propIsTabsUseSafeDistance="(is_immersion_model && is_header_top) || !is_immersion_model"></componentDiyArticleTabs>
<componentDataTabs v-else-if="item.key == 'data-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height" :propIsTabsUseSafeDistance="(is_immersion_model && is_header_top) || !is_immersion_model" @goods_buy_event="goods_buy_event"></componentDataTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height" :propIsTabsUseSafeDistance="(is_immersion_model && is_header_top) || !is_immersion_model" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance"></componentDiyArticleTabs>
<componentDataTabs v-else-if="item.key == 'data-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance" @goods_buy_event="goods_buy_event"></componentDataTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance" @goods_buy_event="goods_buy_event"></componentDiyGoodsTabs>
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :ref="'diy_goods_buy' + index" :propIndex="get_prop_index(item)" :propDiyIndex="index" :propKey="item.id + index" :propValue="item.com_data" @goods_buy_event="goods_buy_event"></componentDiyGoodsList>
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyDataMagic>
<componentDiyCustom v-else-if="item.key == 'custom'" :propOuterContainerPadding="outer_container_padding" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyCustom>
@ -290,44 +290,67 @@
}
},
get_diy_prop_top() {
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return this.temp_sticky_top + this.tabs_height;
} else {
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return this.tabs_height;
return (item) => {
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return this.temp_sticky_top + this.tabs_height;
} else {
// 开启安全距离
if (this.is_the_safe_distance_enabled) {
return this.is_header_top ? this.temp_sticky_top : 0;
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return this.tabs_height;
} else {
return 0;
// 开启安全距离
let is_general_safe_distance_num = this.temp_sticky_top;
// #ifdef H5 || MP-TOUTIAO
is_general_safe_distance_num = this.is_header_top ? this.temp_sticky_top : 0
// #endif
if (this.is_the_safe_distance_enabled) {
return is_general_safe_distance_num;
} else {
if (item?.content?.is_general_safe_distance == '1') {
return is_general_safe_distance_num;
} else {
return 0;
}
}
}
}
}
}
},
get_diy_custom_nav_height() {
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return (item) => {
let header_height = (this.is_search_alone_row ? 66 + this.data_alone_row_space : 33);
// #ifdef H5 || MP-TOUTIAO
header_height = this.is_header_top ? header_height : 0;
// #endif
return header_height;
} else {
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return 0;
// 不开启沉浸模式时的处理
if (!this.is_immersion_model) {
return header_height;
} else {
// 开启沉浸模式时并且开启安全距离
if (this.is_the_safe_distance_enabled) {
return this.is_search_alone_row ? 66 + this.data_alone_row_space : 33;
// 开启沉浸模式且开启选项卡置顶时
if (this.is_tabs_data_topped) {
return 0;
} else {
return 0
}
}
// 开启沉浸模式时并且开启安全距离
if (this.is_the_safe_distance_enabled) {
return this.is_search_alone_row ? 66 + this.data_alone_row_space : 33;
} else {
if (item?.content?.is_general_safe_distance == '1') {
return header_height;
} else {
return 0;
}
}
}
}
}
},
getPropIsTabsUseSafeDistance() {
let is_tabs_use_safe_distance = this.is_immersion_model;
// #ifdef H5 || MP-TOUTIAO
is_tabs_use_safe_distance = this.is_immersion_model && this.is_header_top;
// #endif
return is_tabs_use_safe_distance || !this.is_immersion_model;
}
},
watch: {

7
components/diy/img-magic.vue
View File

@ -143,8 +143,9 @@
const container_height = !isEmpty(new_content.container_height) ? new_content.container_height : sys_width;
const density = !isEmpty(new_content.magic_cube_density) ? new_content.magic_cube_density : 4;
const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right - padding_left - padding_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
const { margin_left, margin_right } = new_style.common_style;
const width = sys_width - margin_left - margin_right - border_width(new_style.common_style) - this.propOuterContainerPadding;
const scale = width / 390;
this.setData({
form: this.propValue.content,
new_style: this.propValue.style,
@ -155,7 +156,7 @@
style_img_container: common_img_computer(new_style.common_style, this.propIndex) + 'box-sizing: border-box;',
img_fit: fit,
div_width: sys_width,
container_size: container_height * (width / 390) + 'px',
container_size: container_height * scale + 'px',
cube_cell: sys_width / density,
content_img_container: common_styles_computer(new_style) + margin_computer(new_style?.margin || old_margin) + 'box-sizing: border-box;',
content_img_style_container: common_img_computer(new_style) + padding_computer(new_style?.padding || old_padding) + 'box-sizing: border-box;',

144
components/diy/modules/custom/data-group-rendering.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
<view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
<view :class="'wh-auto pr allSignList-' + propIndex + propKey" :style="'height:' + propDataHeight * propScale + 'px;'">
<view v-for="(item, index) in new_list" :key="index" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="'sign-' + propIndex + propKey + ' main-content ' + get_animation_class(item.com_data)" :style="'left:' + get_percentage_count(item.location.x, item.com_data.data_follow, 'left') + ';top:' + get_percentage_count(item.location.y, item.com_data.data_follow, 'top') + ';width:' + get_percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) + ';height:' + get_percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) + ';z-index:' + (new_list.length - 1 > 0 ? (new_list.length - 1) - index : 0)">
<template v-if="item.key == 'text'">
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
</template>
@ -26,6 +26,7 @@ import modelLines from '@/components/diy/modules/custom/model-lines.vue';
import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
import { location_compute } from '@/common/js/common/common.js';
export default {
components: {
modelText,
@ -42,6 +43,10 @@ export default {
},
required: true,
},
propIndex: {
type: Number,
default: 0,
},
propSourceList: {
type: Object,
default: () => {
@ -96,15 +101,51 @@ export default {
propConfigLoop: {
type: String,
default: "1"
},
}
},
data() {
return {};
return {
new_list: [],
custom_width: 0,
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
computed: {
get_percentage_count() {
return (num) => {
return num * this.propScale + 'px';
return (num, data_follow, type, is_auto = '0', max_size = 0) => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
// 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
if (id !== '' && follow_type === type) {
return `${num}px`;
}
// 如果条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
} else {
// 如果is_auto设置为'1'，则根据type和max_size计算自动样式
if (is_auto === '1') {
if (type === 'width' || type === 'height') {
if (typeof max_size === 'number' && max_size >= 0) {
const scaledMaxSize = max_size * this.propScale;
const autoStyle = 'auto;';
const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
} else {
return 'auto;';
}
}
} else {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
}
}
};
},
get_animation_class() {
@ -118,7 +159,98 @@ export default {
};
}
},
mounted() {
this.init();
},
methods: {
async init() {
await this.get_custom_width();
this.set_new_list(this.propCustomList);
},
get_custom_width() {
// 获取当前容器的宽度
const query = uni.createSelectorQuery().in(this);
query.select('.allSignList-' + this.propIndex + this.propKey)
.boundingClientRect((res) => {
if (res) {
this.setData({
custom_width: res.width,
});
}
})
.exec();
},
async set_new_list(val) {
// 第一次渲染先渲染全部数据
this.setData({
new_list: val
});
// 判断是否有跟随的数据
const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
if (follow_list.length > 0) {
// 等待页面渲染完成之后再获取内容
await this.$nextTick();
// 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
const query = uni.createSelectorQuery().in(this);
query.selectAll('.sign-' + this.propIndex + this.propKey)
.boundingClientRect((rect) => {
if (rect) {
// 将返回的内容转成map对象，方便快速查找，节省性能
const idMap = new Map(rect.map(item => [item.dataset.id, item]));
// 历史数据拷贝，方便后续操作避免每次都更新数据，统一重新渲染
const val = JSON.parse(JSON.stringify(this.new_list));
val.forEach((item1) => {
const { data_follow } = item1.com_data;
const targetItem = idMap.get(data_follow?.id);
if (targetItem) {
const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
if (data_follow?.type === 'left') {
// 更新位置信息
const location_x = this.updateLocation(targetItem, data_follow, this.propScale, true);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_width = item1.com_data.com_width;
// 如果是宽度自适应,需要重新判断一下处理逻辑
if (item1.com_data?.is_width_auto === '1' && text_item) {
item_width = text_item.width;
}
// 根据容器信息更新位置信息
item1.location.x = location_compute(item_width, location_x, this.custom_width);
} else if (data_follow?.type === 'top') {
// 更新位置信息
const location_y = this.updateLocation(targetItem, data_follow, this.propScale, false);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_height = item1.com_data.com_height;
// 如果是高度自适应,需要重新判断一下处理逻辑
if (item1.com_data?.is_height_auto === '1' && text_item) {
item_height = text_item.height;
}
// 根据容器信息更新位置信息
item1.location.y = location_compute(item_height, location_y, this.propDataHeight * this.propScale);
}
}
});
this.setData({
new_list: val
});
}
})
.exec();
}
},
updateLocation(targetItem, data_follow, scale, isX) {
try {
const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
if (locationValueStr == null) {
return;
}
const locationValue = parseFloat(locationValueStr);
if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.width < 0 : targetItem.height < 0)) return;
return ((locationValue + (data_follow?.spacing || 0)) * scale) + (isX ? targetItem.width : targetItem.height);
} catch (error) {
console.error(`Error updating location ${isX ? 'X' : 'Y'}:`, error);
}
},
url_event(e) {
this.$emit('url_event', e, this.propDataIndex, this.propDataSplitIndex);
}

142
components/diy/modules/custom/data-rendering.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
<view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
<view :class="'wh-auto pr allSignList-' + propIndex + propKey" :style="'height:' + propDataHeight * propScale + 'px;'">
<view v-for="(item, index) in new_list" :key="index" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="'sign-' + propIndex + propKey + ' main-content ' + get_animation_class(item.com_data)" :style="'left:' + get_percentage_count(item.location.x, item.com_data.data_follow, 'left') + ';top:' + get_percentage_count(item.location.y, item.com_data.data_follow, 'top') + ';width:' + get_percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) + ';height:' + get_percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) + ';z-index:' + (new_list.length - 1 > 0 ? (new_list.length - 1) - index : 0)">
<template v-if="item.key == 'text'">
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propTitleParams="propShowData.data_name" @url_event="url_event"></model-text>
</template>
@ -30,6 +30,7 @@ import modelImage from '@/components/diy/modules/custom/model-image.vue';
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
import modelCustomGroup from '@/components/diy/modules/custom/model-custom-group.vue';
import { location_compute } from '@/common/js/common/common.js';
export default {
components: {
modelText,
@ -47,6 +48,10 @@ export default {
},
required: true,
},
propIndex: {
type: Number,
default: 0,
},
propSourceList: {
type: Object,
default: () => {
@ -110,12 +115,48 @@ export default {
}
},
data() {
return {};
return {
new_list: [],
custom_width: 0,
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
computed: {
get_percentage_count() {
return (num) => {
return num * this.propScale + 'px';
return (num, data_follow, type, is_auto = '0', max_size = 0) => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
// 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
if (id !== '' && follow_type === type) {
return `${num}px`;
}
// 如果条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
} else {
// 如果is_auto设置为'1'，则根据type和max_size计算自动样式
if (is_auto === '1') {
if (type === 'width' || type === 'height') {
if (typeof max_size === 'number' && max_size >= 0) {
const scaledMaxSize = max_size * this.propScale;
const autoStyle = 'auto;';
const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
} else {
return 'auto;';
}
}
} else {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
}
}
};
},
get_animation_class() {
@ -129,7 +170,98 @@ export default {
};
}
},
mounted() {
this.init();
},
methods: {
async init() {
await this.get_custom_width();
this.set_new_list(this.propCustomList);
},
get_custom_width() {
// 获取当前容器的宽度
const query = uni.createSelectorQuery().in(this);
query.select('.allSignList-' + this.propIndex + this.propKey)
.boundingClientRect((res) => {
if (res) {
this.setData({
custom_width: res.width,
});
}
})
.exec();
},
async set_new_list(val) {
// 第一次渲染先渲染全部数据
this.setData({
new_list: val
});
// 判断是否有跟随的数据
const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
if (follow_list.length > 0) {
await this.$nextTick();
// 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
const query = uni.createSelectorQuery().in(this);
query.selectAll('.sign-' + this.propIndex + this.propKey)
.boundingClientRect((rect) => {
if (rect) {
// 将返回的内容转成map对象，方便快速查找，节省性能
const idMap = new Map(rect.map(item => [item.dataset.id, item]));
// 历史数据拷贝，方便后续操作避免每次都更新数据，统一重新渲染
const val = JSON.parse(JSON.stringify(this.new_list));
val.forEach((item1) => {
const { data_follow } = item1.com_data;
const targetItem = idMap.get(data_follow?.id);
if (targetItem) {
const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
if (data_follow?.type === 'left') {
// 更新位置信息
const location_x = this.updateLocation(targetItem, data_follow, this.propScale, true);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_width = item1.com_data.com_width;
// 如果是宽度自适应,需要重新判断一下处理逻辑
if (item1.com_data.is_width_auto === '1' && text_item) {
item_width = text_item.width;
}
// 根据容器信息更新位置信息
item1.location.x = location_compute(item_width, location_x, this.custom_width);
} else if (data_follow?.type === 'top') {
// 更新位置信息
const location_y = this.updateLocation(targetItem, data_follow, this.propScale, false);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_height = item1.com_data.com_height;
// 如果是高度自适应,需要重新判断一下处理逻辑
if (item1.com_data?.is_height_auto === '1' && text_item) {
item_height = text_item.height;
}
// 根据容器信息更新位置信息
item1.location.y = location_compute(item_height, location_y, this.propDataHeight * this.propScale);
}
}
});
this.setData({
new_list: val
});
}
})
.exec();
}
},
updateLocation(targetItem, data_follow, scale, isX) {
try {
const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
if (locationValueStr == null) {
return;
}
const locationValue = parseFloat(locationValueStr);
if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.width < 0 : targetItem.height < 0)) return;
const computedValue = ((locationValue + (data_follow?.spacing || 0)) * scale) + (isX ? targetItem.width : targetItem.height);
return computedValue;
} catch (error) {
console.error(`Error updating location ${isX ? 'X' : 'Y'}:`, error);
}
},
url_event(e) {
this.$emit('url_event', e, this.propDataIndex, this.propDataSplitIndex);
}

8
components/diy/modules/custom/model-custom-group.vue
View File

@ -9,7 +9,7 @@
<view v-for="(item1, index1) in item.split_list" :key="index1">
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propIsCustom="propIsCustom" :propIsCustomGroup="true" :propShowData="propShowData" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataGroupRendering>
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propIsCustom="propIsCustom" :propIsCustomGroup="true" :propShowData="propShowData" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataGroupRendering>
</view>
</view>
</view>
@ -22,7 +22,7 @@
<view :class="form.data_source_direction != 'horizontal' ? 'wh-auto ht-auto' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'column-gap:' + new_style.column_gap + 'px;' : ''">
<view v-for="(item1, index1) in item.split_list" :key="index1" class="wh-auto ht-auto" :style="style_chunk_container + swiper_width + (form.data_source_direction == 'horizontal' ? gap_width : 'margin-bottom:' + content_outer_spacing_magin)">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propIsCustom="propIsCustom" :propIsCustomGroup="true" :propShowData="propShowData" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataGroupRendering>
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propIsCustom="propIsCustom" :propIsCustomGroup="true" :propShowData="propShowData" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataGroupRendering>
</view>
</view>
</view>
@ -43,7 +43,7 @@
<template v-else>
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" @url_event="url_event"></dataGroupRendering>
<dataGroupRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propFieldList="propFieldList" :propDataHeight="propDataHeight" :propScale="custom_scale" :propConfigLoop="propConfigLoop !== '1' ? form.is_use_parent_data : '1'" @url_event="url_event"></dataGroupRendering>
</view>
</view>
</template>
@ -264,7 +264,7 @@
new_style: new_style,
custom_scale: custom_scale,
custom_list_length: new_form.custom_list.length - 1,
style_container: common_styles_computer(new_style.common_style) + (new_form.is_scroll_bar == '1' ? 'overflow: auto;' : '') + 'box-sizing: border-box;width:100%;height:100%;', // 用于样式显示
style_container: common_styles_computer(new_style.common_style) + (new_form.is_scroll_bar == '1' ? 'overflow: auto;' : '') + 'box-sizing: border-box;', // 用于样式显示
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
style_content_container: common_styles_computer(new_data_content_style) + 'box-sizing: border-box;', // 用于样式显示
style_content_img_container: common_img_computer(new_data_content_style),

4
components/diy/modules/custom/model-text.vue
View File

@ -1,8 +1,8 @@
<template>
<view v-if="is_show" class="img-outer wh-auto ht-auto re oh" :style="com_style" @tap="url_event">
<view :style="text_style" class="break">
<view :style="text_style" class="break wh-auto ht-auto">
<template v-if="form.is_rich_text == '1'">
<view class="rich-text-content" :innerHTML="text_title"></view>
<mp-html :content="text_title" />
</template>
<template v-else>
{{ text_title }}

10
components/diy/modules/data-magic/custom/index.vue
View File

@ -8,7 +8,7 @@
<view v-for="(item1, index1) in item.split_list" :key="index1">
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -21,7 +21,7 @@
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'column-gap:' + new_style.column_gap + 'px;' : ''">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width + (form.data_source_direction == 'horizontal' ? gap_width : 'margin-bottom:' + content_outer_spacing_magin)">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -31,7 +31,7 @@
<view v-else>
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -39,14 +39,14 @@
<view v-else-if="!isEmpty(form.data_source) && form.data_source_is_loop == '0'">
<view :style="style_container">
<view class="w h oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="{}" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propSourceList="{}" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
<view v-else>
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</view>

6
components/diy/seckill.vue
View File

@ -12,7 +12,7 @@
<view v-if="form.theme == '1'" class="padding-horizontal-sm cr-white">|</view>
<view v-if="intervalId != undefined" class="flex-row align-c gap-4">
<text class="text-size-xss" :style="{ color: new_style.end_text_color }">{{ seckill_time.time_first_text }}</text>
<view class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4' ? time_bg + 'padding: 6rpx 8rpx;border-radius: 22rpx;' : '']">
<view class="flex-row gap-3 jc-c align-c" :style="form.theme == '4' ? time_bg + 'padding: 6rpx 8rpx;border-radius: 22rpx;' : ''">
<image v-if="form.theme == '4' && form.theme_4_static_img.length > 0" class="seckill-head-icon radius-xs" :src="form.theme_4_static_img[0].url" />
<view v-for="(item, index) in time_config" :key="item.key" class="flex-row gap-3 jc-c align-c">
<template v-if="form.theme == '4'">
@ -606,6 +606,10 @@
}
.colon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 33rpx;
top: -2rpx;
}
.slide-bottom {

11
components/diy/tabs-carousel.vue
View File

@ -2,7 +2,7 @@
<view class="ou pr" :style="style_container + swiper_bg_style">
<view class="pa top-0 wh-auto ht-auto" :style="swiper_bg_img_style"></view>
<view class="ou wh-auto" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? swiper_bg_img_style_null : '')">
<componentDiyTabs :propKey="propKey" prop :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propIsRotatingBackground="is_rotating_background" :propBgStyle="swiper_bg_style" :propBgImgStyle="swiper_bg_img_style" :propStickyTop="propStickyTop" :propIsImmersionModel="propIsImmersionModel" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<componentDiyTabs :propKey="propKey" :propContentPadding="propContentPadding" :propValue="propValue" :propTop="propTop" :propIsRotatingBackground="is_rotating_background" :propBgStyle="swiper_bg_style" :propBgImgStyle="swiper_bg_img_style" :propStickyTop="propStickyTop" :propIsImmersionModel="propIsImmersionModel" :propNewIsTabsSafeDistance="new_is_tabs_safe_distance" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" :propIsCommon="false" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propSpacingCommonStyle="spacing_common_style" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onComputerHeight="tabs_height_event" @onTabsTap="tabs_click_event"></componentDiyTabs>
<view :style="carousel_margin_top">
<view :style="carousel_container">
<view :style="carousel_img_container">
@ -101,6 +101,7 @@
swiper_bg_img_style: '',
swiper_bg_img_style_null: `background-image: url('')`,
is_rotating_background: false,
new_is_tabs_safe_distance: false,
};
},
created() {
@ -137,14 +138,20 @@
background_img_style: carousel_content_background_img_style,
background_img: carousel_content_background_img,
}
// 头部的高度
const newPropTop = app.globalData.rpx_to_px(this.propTop * 2);
// 选项卡的外边距
const new_tabs_top = app.globalData.rpx_to_px((tabs_margin?.margin_top || 0) * 2);
// 选项卡的实际外边距
const tabs_margin_top = new_content.is_tabs_safe_distance == '1' ? newPropTop + this.propStickyTop : 0;
// 选项卡的内边距处理
const new_padding_top = new_style.common_style.padding_top - newPropTop;
this.setData({
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};`,
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
carousel_margin_top: 'margin-top:' + new_style.data_spacing * 2 + 'rpx',
new_is_tabs_safe_distance: new_content.is_tabs_safe_distance == '1',
// 是否开启轮播图背景设置
is_rotating_background: new_content.rotating_background == '1',
tabs_sliding_fixed_bg: gradient_computer(tabs_data),
@ -154,7 +161,7 @@
carousel_img_container: background_computer(carousel_content_data) + padding_computer(carousel_content_padding) + 'box-sizing: border-box;overflow: hidden;',
spacing_common_style: {
padding: 0,
padding_top: new_style.common_style.padding_top + (this.propIsImmersionModel ? this.propStickyTop : 0),
padding_top: (this.propIsImmersionModel && new_content.is_tabs_safe_distance == '1' ? new_style.common_style.padding_top + this.propStickyTop : new_padding_top > 0 ? new_padding_top : 0),
padding_bottom: 0,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,

6
components/diy/tabs.vue
View File

@ -86,6 +86,10 @@
type: Boolean,
default: false
},
propNewIsTabsSafeDistance: {
type: Boolean,
default: true
},
propTabsSlidingFixedBg: {
type: String,
default: ''
@ -189,7 +193,7 @@
style_img_container: this.propIsCommon ? common_img_computer(new_style.common_style, this.propIndex) : new_content.tabs_top_up == '1' ? background_computer(new_style.common_style) + padding_computer(this.propSpacingCommonStyle, 1, true) + 'box-sizing: border-box;' : '', // 如果是选项卡轮播，不需要走默认样式
tabs_top_style: new_tabs_top_style,
// 沉浸模式下并且开通了安全距离 会显示-的margin
style_margin_container: this.propIsImmersionModel ? `margin-top: -${ newPropTop + this.propStickyTop }px;` : '',
style_margin_container: this.propIsImmersionModel && this.propNewIsTabsSafeDistance ? `margin-top: -${ newPropTop + this.propStickyTop }px;` : '',
// 判断是否置顶
top_up: new_top_up,
tabs_z_index: 'z-index: 11;'