czg_team/xo_user_client
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2025-04-25 09:49:53 +08:00
commit 791d82b9e3
640 changed files with 130029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
components/diy/modules/custom/data-group-rendering.vue Normal file
View File

@@ -0,0 +1,279 @@
<template>
<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, item.key) + ';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, item.key) + ';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>
<template v-else-if="item.key == 'img'">
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propImgParams="propShowData.data_logo" @url_event="url_event"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" @url_event="url_event"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" @url_event="url_event"></model-panel>
</template>
</view>
</view>
</template>
<script>
import modelText from '@/components/diy/modules/custom/model-text.vue';
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, isEmpty } from '@/common/js/common/common.js';
export default {
components: {
modelText,
modelLines,
modelImage,
modelIcon,
modelPanel,
},
props: {
propCustomList: {
type: Array,
default: () => {
return [];
},
required: true,
},
propIndex: {
type: Number,
default: 0,
},
propSourceList: {
type: Object,
default: () => {
return {};
}
},
propDataHeight: {
type: Number,
default: 0,
},
propScale: {
type: Number,
default: 1,
},
propDataIndex: {
type: Number,
default: 1,
},
propDataSplitIndex: {
type: Number,
default: 1,
},
propIsCustom: {
type: Boolean,
default: false,
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propShowData: {
type: Object,
default: () => ({
data_key: 'id',
data_name: 'name'
}),
},
propKey: {
type: [String, Number],
default: '',
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: () => {
return [];
}
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
new_list: [],
custom_width: 0,
};
},
watch: {
propKey(val) {
// 初始化
this.init(this.propCustomList);
},
propCustomList(val) {
this.init(val);
}
},
computed: {
get_percentage_count() {
return (num, data_follow, type, is_auto = '0', max_size = 0, key = '') => {
// 检查类型是否为'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 = scaledMaxSize > 0 ? ` max-${type}: ${scaledMaxSize}px;` : '';
const whiteSpaceStyle = type === 'width' && scaledMaxSize <= 0 ? ' white-space:nowrap;' : '';
return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
} else {
return 'auto;';
}
}
} else {
// 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
if (key == 'img' && ['width', 'height'].includes(type)) {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${ Math.round(num * this.propScale) }px`;
} else {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
}
}
}
};
},
get_animation_class() {
return (data) => {
const { type = 'none', number = 'infinite' } = data?.animation_style || {};
if (type != 'none') {
return type + (number == 'infinite' ? `-${number}` : '');
} else {
return '';
}
};
}
},
mounted() {
this.init(this.propCustomList);
},
methods: {
async init(val) {
// 如果为空就不进行渲染
if (isEmpty(val)) {
return;
}
await this.get_custom_width();
this.set_new_list(val);
},
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 && 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);
}
},
};
</script>
<style lang="scss" scoped>
.main-content {
position: absolute;
overflow: hidden;
}
</style>

290
components/diy/modules/custom/data-rendering.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<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, item.key) + ';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, item.key) + ';z-index:' + (new_list.length - 1 > 0 ? (new_list.length - 1) - index : 0)">
<template v-if="item.key == 'text'">
<model-text :propKey="propKey + item.id" :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>
<template v-else-if="item.key == 'img'">
<model-image :propKey="propKey + item.id" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" :propImgParams="propShowData.data_logo" @url_event="url_event"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :propKey="propKey + item.id" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :propKey="propKey + item.id" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" @url_event="url_event"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :propKey="propKey + item.id" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propSourceList="propSourceList" :propConfigLoop="propConfigLoop" :propIsCustom="propIsCustom" :propIsCustomGroup="propIsCustomGroup" :propCustomGroupFieldId="propCustomGroupFieldId" @url_event="url_event"></model-panel>
</template>
<template v-else-if="item.key == 'custom-group'">
<model-custom-group :propKey="propKey + item.id" :propValue="item.com_data" :propScale="propScale" :propFieldList="propFieldList" :propConfigLoop="propConfigLoop" :propDataWidth="item.com_data.com_width" :propDataHeight="item.com_data.custom_height" :propSourceList="propSourceList" :propGroupSourceList="propGroupSourceList" :propIsCustom="propIsCustom" :propShowData="propShowData"></model-custom-group>
</template>
</view>
</view>
</template>
<script>
import modelText from '@/components/diy/modules/custom/model-text.vue';
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 modelCustomGroup from '@/components/diy/modules/custom/model-custom-group.vue';
import { location_compute, isEmpty } from '@/common/js/common/common.js';
export default {
components: {
modelText,
modelLines,
modelImage,
modelIcon,
modelPanel,
modelCustomGroup
},
props: {
propCustomList: {
type: Array,
default: () => {
return [];
},
required: true,
},
propIndex: {
type: Number,
default: 0,
},
propSourceList: {
type: Object,
default: () => {
return {};
}
},
propGroupSourceList: {
type: Array,
default: () => {
return [];
}
},
propDataHeight: {
type: Number,
default: 0,
},
propScale: {
type: Number,
default: 1,
},
propDataIndex: {
type: Number,
default: 1,
},
propDataSplitIndex: {
type: Number,
default: 1,
},
propIsCustom: {
type: Boolean,
default: false,
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propShowData: {
type: Object,
default: () => ({
data_key: 'id',
data_name: 'name'
}),
},
propKey: {
type: [String, Number],
default: '',
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: () => {
return [];
}
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
new_list: [],
custom_width: 0,
};
},
watch: {
propKey(val) {
// 初始化
this.init(this.propCustomList);
},
propCustomList(val) {
this.init(val);
}
},
computed: {
get_percentage_count() {
return (num, data_follow, type, is_auto = '0', max_size = 0, key = '') => {
// 检查类型是否为'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 = scaledMaxSize > 0 ? ` max-${type}: ${scaledMaxSize}px;` : '';
const whiteSpaceStyle = type === 'width' && scaledMaxSize <= 0 ? ' white-space:nowrap;' : '';
return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
} else {
return 'auto;';
}
}
} else {
// 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
if (key == 'img' && ['width', 'height'].includes(type)) {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${ Math.round(num * this.propScale) }px`;
} else {
// 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
return `${num * this.propScale}px`;
}
}
}
};
},
get_animation_class() {
return (data) => {
const { type = 'none', number = 'infinite' } = data?.animation_style || {};
if (type != 'none') {
return type + (number == 'infinite' ? `-${number}` : '');
} else {
return '';
}
};
}
},
mounted() {
this.init(this.propCustomList);
},
methods: {
async init(val) {
// 如果为空就不进行渲染
if (isEmpty(val)) {
return;
}
await this.get_custom_width();
this.set_new_list(val);
},
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 && 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);
}
},
};
</script>
<style lang="scss" scoped>
.main-content {
position: absolute;
overflow: hidden;
}
</style>

378
components/diy/modules/custom/model-custom-group.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<view v-if="is_show" class="ht-auto" :style="style_container">
<view :style="style_img_container">
<view :style="style_content_container">
<view class="w h pr" :style="style_content_img_container">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
<view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
<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" :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>
</view>
</view>
</template>
<view v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh ht-auto">
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
<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" :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>
</swiper-item>
</swiper>
<view v-if="new_style.is_show == '1' && data_source_content_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
<block v-if="new_style.indicator_style == 'num'">
<view :style="indicator_style" class="dot-item">
<text :style="{ color: new_style.actived_color }">{{ actived_index + 1 }}</text>
<text>/{{ data_source_content_list.length }}</text>
</view>
</block>
<block v-else>
<view v-for="(item, index) in data_source_content_list" :key="index" :style="indicator_style + (actived_index == index ? 'background:' + new_style.actived_color : '')" class="dot-item" />
</block>
</view>
</view>
<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" :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>
</view>
</view>
</view>
</view>
</template>
<script>
import { common_styles_computer, common_img_computer, percentage_count, isEmpty, get_indicator_style, get_indicator_location_style, border_width, get_is_eligible } from '@/common/js/common/common.js';
// a组件调用b组件 b组件调用a组件，为了避免循环引用在uniapp中出问题，复制一个相同的data-group-rendering组件
import dataGroupRendering from '@/components/diy/modules/custom/data-group-rendering.vue';
const app = getApp();
export default {
components: {
dataGroupRendering
},
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1
},
propDataWidth: {
type: Number,
default: 0,
},
propDataHeight: {
type: Number,
default: 0,
},
propIsCustom: {
type: Boolean,
default: false
},
propFieldList: {
type: Array,
default: []
},
propGroupSourceList: {
type: Array,
default: () => {
return [];
}
},
propShowData: {
type: Object,
default: () => ({
data_key: 'id',
data_name: 'name',
})
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
new_style: {},
custom_scale: 1,
style_container: '',
style_img_container: '',
custom_list_length: 0,
custom_group_field_id: '',
source_list: {
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
},
data_source_content_list: [],
data_source: '',
// 内容样式
style_content_container: '',
style_content_img_container: '',
// 数据样式
style_chunk_container: '',
style_chunk_img_container: '',
// 指示器选中的下标
actived_index: 0,
// 轮播高度
swiper_height: 0,
swiper_width: 'width: 100%;',
// 指示器样式
indicator_location_style: '',
indicator_style: '',
slides_per_view: 1,
show_data: { data_key: 'id', data_name: 'name' },
old_data_style: {
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
content_outer_spacing_magin: '0rpx',
gap_width: '',
is_show: true
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
percentage_count,
init() {
const new_form = this.propValue;
const new_style = this.propValue.data_style;
const data_source_id = new_form?.data_source_field?.id || '';
// 自定义组的数据源内容切换, 判断是取自定义组数据源内容还是取自定义数据源内容
const is_data_source_id = this.propFieldList.filter((item) => item.field == data_source_id);
let new_list = [];
// 判断是否是循环内容
if (this.propConfigLoop == '1') {
// 如果自定义组选择了数据源，就按照自定义组的数据源的方式走，否则的话就按照自定义的数据走
if (is_data_source_id.length > 0) {
const list = this.get_data_source_content_list(this.propSourceList, new_form);
// 数据来源的内容
new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
} else {
if (!isEmpty(this.propSourceList)) {
const new_source_list = [ this.propSourceList ];
new_list = [{ split_list: new_source_list }];
} else {
new_list = [];
}
}
} else {
// 如果使用父级数据，就直接使用父级的全部数据，否则的话就没有任何数据
if (new_form.is_use_parent_data == '1') {
new_list = this.propGroupSourceList;
} else {
new_list = [];
}
}
// 初始化数据
const { common_style, data_content_style, data_style } = new_style;
const old_width = this.propDataWidth * this.propScale;
// 外层左右间距
const outer_spacing = (common_style?.margin_left || 0) + (common_style?.margin_right || 0) + (common_style?.padding_left || 0) + (common_style?.padding_right || 0) + border_width(common_style);
// 内容左右间距
const content_spacing = (data_content_style?.margin_left || 0) + (data_content_style?.margin_right || 0) + (data_content_style?.padding_left || 0) + (data_content_style?.padding_right || 0) + border_width(data_content_style);
// 数据左右间距
const internal_spacing = (data_style?.margin_left || 0) + (data_style?.margin_right || 0) + (data_style?.padding_left || 0) + (data_style?.padding_right || 0) + border_width(data_style);
// 一行显示的数量
const carousel_col = Number(new_form.data_source_carousel_col);
// 数据间距
const data_spacing = ['vertical', 'horizontal'].includes(new_form.data_source_direction) ? new_style.column_gap * (carousel_col - 1) : 0;
// 自定义组件宽度
const width = old_width - outer_spacing - content_spacing - internal_spacing - data_spacing;
// 自定义组的比例
const scale_number = width / this.propDataWidth;
const custom_scale = scale_number > 0 ? scale_number : 0;
const new_data_style = !isEmpty(new_style.data_style) ? new_style.data_style : this.old_data_style;
const new_data_content_style = !isEmpty(new_style.data_content_style)? new_style.data_content_style : this.old_data_style;
// 判断是平移还是整屏滚动
const { padding_top = 0, padding_bottom = 0, margin_bottom = 0, margin_top = 0 } = new_data_style;
let swiper_height = 0;
let col = Number(new_form.data_source_carousel_col);
// 间距
const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
// 轮播图高度控制
if (new_form.data_source_direction == 'horizontal') {
swiper_height = this.propDataHeight * custom_scale + padding_top + padding_bottom + margin_bottom + margin_top;
} else {
// 商品数量大于列数的时候，高度是列数，否则是当前的数量
col = new_list.length > carousel_col ? carousel_col : new_list.length;
swiper_height = (this.propDataHeight * custom_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((Number(new_form.data_source_carousel_col) - 1) * space_between);
}
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.column_gap * (carousel_col - 1)) / carousel_col;
// 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / carousel_col }%;`: 'width: 100%;';
this.setData({
form: new_form,
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;', // 用于样式显示
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),
style_chunk_container: common_styles_computer(new_data_style) + 'box-sizing: border-box;', // 用于样式显示
style_chunk_img_container: common_img_computer(new_data_style),
style_chunk_width: width,
data_source_content_list: new_list,
data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
indicator_style: get_indicator_style(new_style), // 指示器的样式
indicator_location_style: get_indicator_location_style(new_style),
swiper_height: swiper_height,
swiper_width: swiper_width,
content_outer_spacing_magin: space_between + 'px',
gap_width: `width: calc(${100 / carousel_col}% - ${gap}px);`,
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
is_show: this.get_is_show(new_form),
custom_group_field_id: new_form.data_source_field.id,
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, false, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_data_source_content_list(sourceList, form) {
if (!isEmpty(sourceList)) {
const data_source_id = form?.data_source_field.id || '';
let list = this.get_nested_property(sourceList, data_source_id);
// 如果是自定义标题，进一步处理嵌套对象中的数据
if (sourceList.data) {
list = this.get_nested_property(sourceList.data, data_source_id);
}
return list == '' ? [] : list;
} else {
return [];
}
},
get_nested_property(obj, path) {
// 检查路径参数是否为字符串且非空，若不满足条件则返回空字符串
if (typeof path !== 'string' || !path) return [];
// 将属性路径字符串拆分为属性键数组
const keys = path.split('.');
// 使用reduce方法遍历属性键数组，逐层访问对象属性
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : []), obj) ?? [];
},
get_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = form.data_source_carousel_col;
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(cloneList.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({
split_list: cloneList.slice(i * num, (i + 1) * num),
});
}
return nav_list;
} else {
// 否则的话，就返回全部的信息
return [
{
split_list: cloneList,
},
];
}
} else {
// 存储数据显示
let nav_list = [];
cloneList.forEach((item) => {
nav_list.push({
split_list: [item],
});
});
return nav_list;
}
},
slideChange(e) {
this.setData({
actived_index: e.detail.current,
});
},
url_event(e, index, split_index) {
if (this.data_source == 'goods' && this.data_source_content_list.length > 0) {
const list = this.data_source_content_list[index];
if (!isEmpty(list) && !isEmpty(list.split_list[split_index])) {
const new_list = list.split_list[split_index];
if (!isEmpty(new_list)) {
// 缓存商品数据
app.globalData.goods_data_cache_handle(new_list.data.id, new_list.data);
}
}
}
app.globalData.url_open(e);
},
},
};
</script>
<style scoped lang="scss">
</style>

161
components/diy/modules/custom/model-icon.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<view v-if="is_show" class="img-outer pr oh flex-row align-c wh-auto ht-auto" :style="com_style" @tap="url_event">
<iconfont :name="'icon-' + icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'" propContainerDisplay="flex"></iconfont>
</view>
</template>
<script>
import { radius_computer, padding_computer, gradient_handle, isEmpty, get_nested_property, get_custom_link, get_is_eligible } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1,
},
propIsCustom: {
type: Boolean,
default: false
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: []
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
com_style: '',
scale: 1,
icon_class: '',
icon_url: '',
is_show: true,
};
},
watch: {
propKey(val) {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
const new_form = this.propValue;
let icon_class_value = '';
if (!isEmpty(new_form.icon_class)) {
icon_class_value = new_form.icon_class;
} else {
if (!isEmpty(this.propSourceList)) {
let icon = '';
// 获取数据源ID
const data_source_id = !isEmpty(new_form?.data_source_field?.id || '') && this.propConfigLoop == '1' ? new_form.data_source_field.id : '';
// 数据源内容
const option = new_form?.data_source_field?.option || {};
if (data_source_id.includes(';')) {
const ids = data_source_id.split(';');
let url = '';
ids.forEach((item, index) => {
url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
icon = url;
} else {
// 不输入商品， 文章和品牌时，从外层处理数据
icon = this.data_handling(data_source_id);
}
icon_class_value = (option?.first || '') + icon + (option?.last || '');
} else {
icon_class_value = '';
}
}
this.setData({
form: new_form,
scale: this.propScale,
com_style: this.get_com_style(new_form, this.propScale),
icon_class: icon_class_value,
icon_url: this.get_icon_link(new_form),
is_show: this.get_is_show(new_form),
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, this.propIsCustomGroup, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_icon_link(new_form) {
let url = '';
if (!isEmpty(new_form.icon_link)) {
url = new_form.icon_link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(new_form?.data_source_link_field?.id || '') && this.propConfigLoop == '1' ? new_form?.data_source_link_field?.id : '';
// 数据源内容
const source_link_option = new_form?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
}
return url;
},
data_handling(data_source_id) {
// 不输入商品， 文章和品牌时，从外层处理数据
let icon = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
icon = get_nested_property(this.propSourceList.data, data_source_id);
}
return icon;
},
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, scale, true) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, scale, true) };`;
if (form.border_show == '1') {
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}
if (form.icon_location == 'center') {
style += `justify-content: center;`;
} else if (form.icon_location == 'left') {
style += `justify-content: flex-start;`;
} else if (form.icon_location == 'right') {
style += `justify-content: flex-end;`;
}
return style;
},
url_event(e) {
this.$emit('url_event', this.icon_url);
},
},
};
</script>
<style lang="scss" scoped>
</style>

178
components/diy/modules/custom/model-image.vue Normal file
View File

@@ -0,0 +1,178 @@
<template>
<view v-if="is_show" class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_event">
<imageEmpty :propImageSrc="img" :propStyle="image_style" propErrorStyle="width: 60rpx;height: 60rpx;"></imageEmpty>
</view>
</template>
<script>
import { percentage_count, radius_computer, isEmpty, get_nested_property, get_custom_link, get_is_eligible } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
imageEmpty,
},
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1
},
propIsCustom: {
type: Boolean,
default: false
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propImgParams: {
type: String,
default: ''
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: []
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
img: '',
img_url: '',
image_style: '',
border_style: '',
keyMap: {
goods: 'images',
article: 'cover',
brand: 'logo'
},
is_show: true,
};
},
watch: {
propKey(val) {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
const new_form = this.propValue;
this.setData({
form: new_form,
img: this.get_img_url(new_form),
image_style: this.get_image_style(new_form, this.propScale),
border_style: this.get_border_style(new_form, this.propScale),
img_url: this.get_img_link(new_form),
is_show: this.get_is_show(new_form),
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, this.propIsCustomGroup, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_img_link(form) {
let url = '';
if (!isEmpty(form.link)) {
url = form.link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(form?.data_source_link_field?.id || '') && this.propConfigLoop == '1' ? form.data_source_link_field.id : '';
// 数据源内容
const source_link_option = form?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
}
return url;
},
get_img_url(form) {
if (!isEmpty(form.img[0])) {
return form.img[0];
} else {
if (!isEmpty(this.propSourceList)) {
let image_url = '';
// 获取数据源ID
const data_source_id = !isEmpty(form?.data_source_field?.id || '') && this.propConfigLoop == '1' ? form.data_source_field.id : '';
// 数据源内容
const option = form?.data_source_field?.option || {};
if (data_source_id.includes(';')) {
const ids = data_source_id.split(';');
let url = '';
ids.forEach((item, index) => {
url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
image_url = url;
} else {
image_url = this.data_handling(data_source_id);
}
return (option?.first || '') + image_url + (option?.last || '');
} else {
return '';
}
}
},
data_handling(data_source_id) {
// 不输入商品， 文章和品牌时，从外层处理数据
let image_url = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
// 判断是否是同一标志
if (data_source_id == this.propImgParams) {
// 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : get_nested_property(this.propSourceList.data, data_source_id);
} else {
image_url = get_nested_property(this.propSourceList.data, data_source_id);
}
}
return image_url;
},
get_image_style(form, scale) {
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, scale, true)};`;
},
get_border_style(form, scale) {
let style = ``;
if (form.border_show == '1') {
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color}; ${radius_computer(form.border_radius, scale, true)};box-sizing: border-box;`;
}
return style;
},
url_event(e) {
this.$emit('url_event', this.img_url);
},
},
};
</script>
<style lang="scss" scoped>
.img-outer {
overflow: hidden;
}
</style>

94
components/diy/modules/custom/model-lines.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<view v-if="is_show" :style="border_style"></view>
</template>
<script>
import { get_is_eligible } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1,
},
propIsCustom: {
type: Boolean,
default: false
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: []
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
border_style: '',
is_show: true,
};
},
watch: {
propKey(val) {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
const new_form = this.propValue;
this.setData({
form: new_form,
border_style: this.get_border_style(new_form, this.propScale),
is_show: this.get_is_show(new_form),
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, this.propIsCustomGroup, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_border_style(form, scale) {
if (form.line_settings === 'horizontal') {
return `margin: 10rpx 0;border-bottom: ${form.line_size * scale }px ${form.line_style} ${form.line_color};`;
} else {
return `margin: 0 10rpx;height:100%;border-right: ${form.line_size * scale }px ${form.line_style} ${form.line_color};`;
}
}
},
};
</script>
<style lang="scss" scoped>
</style>

133
components/diy/modules/custom/model-panel.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<view v-if="is_show" class="wh-auto ht-auto re oh" :style="com_style" @tap="url_event">
<view class="wh-auto ht-auto" :style="com_img_style"></view>
</view>
</template>
<script>
import { radius_computer, background_computer, gradient_handle, isEmpty, get_custom_link, get_is_eligible } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1
},
propIsCustom: {
type: Boolean,
default: false
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propFieldList: {
type: Array,
default: []
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
text_title: '',
text_style: '',
com_style: '',
panel_url: '',
is_show: true,
};
},
watch: {
propKey(val) {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
const new_form = this.propValue;
let url = '';
if (!isEmpty(new_form.link)) {
url = new_form.link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(new_form?.data_source_link_field?.id || '') && this.propConfigLoop == '1' ? new_form.data_source_link_field.id : '';
// 数据源内容
const source_link_option = new_form?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
}
this.setData({
form: new_form,
com_style: this.get_com_style(new_form, this.propScale),
com_img_style: this.get_com_img_style(new_form),
panel_url: url,
is_show: this.get_is_show(new_form),
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, this.propIsCustomGroup, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}; transform: rotate(${form.panel_rotate}deg);`;
if (form.border_show == '1') {
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}
return style;
},
get_com_img_style(form) {
const data = {
background_img: form?.background_img || [],
background_img_style: form?.background_img_style || '2'
}
return background_computer(data);
},
url_event(e) {
this.$emit('url_event', this.panel_url);
},
},
};
</script>
<style lang="scss" scoped>
.break {
word-wrap: break-word;
word-break: break-all;
}
.rich-text-content {
white-space: normal;
word-break: break-all;
* {
max-width: 100%;
}
}
</style>

236
components/diy/modules/custom/model-text.vue Normal file
View File

@@ -0,0 +1,236 @@
<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 ' + text_line_class">
<template v-if="form.is_rich_text == '1'">
<mp-html :content="text_title" />
</template>
<template v-else>
{{ text_title }}
</template>
</view>
</view>
</template>
<script>
import { radius_computer, padding_computer, isEmpty, gradient_handle, get_nested_property, get_custom_link, get_is_eligible, custom_condition_data } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
required: true,
},
propSourceList: {
type: [ Object, Array ],
default: () => {
return {};
},
},
propKey: {
type: [String,Number],
default: '',
},
propScale: {
type: Number,
default: 1
},
propIsCustom: {
type: Boolean,
default: false
},
propIsCustomGroup: {
type: Boolean,
default: false
},
propCustomGroupFieldId: {
type: String,
default: ''
},
propTitleParams: {
type: String,
default: 'name'
},
propFieldList: {
type: Array,
default: []
},
propConfigLoop: {
type: String,
default: "1"
}
},
data() {
return {
form: {},
text_title: '',
text_style: '',
com_style: '',
text_url: '',
keyMap: {
goods: 'title',
article: 'title',
brand: 'name'
},
is_show: true,
text_line_class: ''
};
},
watch: {
propKey(val) {
this.init();
}
},
created() {
this.init();
},
methods: {
init() {
const new_form = this.propValue;
let url = '';
if (!isEmpty(new_form.text_link)) {
url = new_form.text_link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(new_form?.data_source_link_field?.id || '') && this.propConfigLoop == '1' ? new_form.data_source_link_field.id : '';
// 数据源内容
const source_link_option = new_form?.data_source_link_field?.option || {};
// 调用方法处理数据显示
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
}
this.setData({
form: new_form,
text_title: (new_form?.text_captions || '') + this.get_text_title(new_form),
text_style: this.get_text_style(new_form, this.propScale),
com_style: this.get_com_style(new_form, this.propScale),
text_url: url,
is_show: this.get_is_show(new_form),
text_line_class: new_form.width_omit_num == '0' || new_form.is_rich_text == '1' ? '' : `text-line-${ new_form?.width_omit_num || '' }`
});
},
get_is_show(form) {
if (this.propConfigLoop == '1') {
// 取出条件判断的内容
const condition = form?.condition || { field: '', type: '', value: '' };
return get_is_eligible(this.propFieldList, condition, this.propSourceList, this.propIsCustom, this.propIsCustomGroup, this.propCustomGroupFieldId);
} else {
return true;
}
},
get_text_title(form) {
let text = '';
if (!isEmpty(form.text_title)) {
// 存储待处理的文本标题
let new_title = JSON.parse(JSON.stringify((form.text_title)));
let new_field_list = this.propFieldList;
// 判断是否是自定义组
if (this.propIsCustomGroup && !isEmpty(this.propCustomGroupFieldId)) {
// 取出对应自定义组的内容
const group_option_list = new_field_list.find((item) => item.field === this.propCustomGroupFieldId);
// 取出自定义组内部数据源参数的详细数据
new_field_list = group_option_list?.data || [];
}
// 遍历字段列表，替换文本标题中的占位符
if (!isEmpty(new_field_list)) {
new_field_list.forEach((item) => {
const new_field = '${' + item.field + '}';
if (form.text_title.includes(new_field)) {
// 获取到字段的真实数据
const field_value = custom_condition_data(item.field, item, this.propSourceList, this.propIsCustom);
// 使用正则表达式替换文本标题
const regular = new RegExp(`\\$\\{\\s*${item.field}\\s*\\}`, 'g');
// 替换后的内容赋值给原内容, 确保后续可以继续替换
new_title = new_title.replace(regular, field_value);
}
});
}
// 将内容替换为处理后的标题
text = new_title;
} else {
let text_title = '';
// 获取数据源ID
const data_source_id = !isEmpty(form?.data_source_field?.id || []) && this.propConfigLoop == '1' ? form?.data_source_field?.id : [];
// 数据源内容
const option = form?.data_source_field?.option || [];
// 多选判断
if (data_source_id.length > 0) {
text_title += form?.data_split?.left || '';
// 遍历取出所有的值
data_source_id.forEach((source_id, index) => {
const sourceList = option.find((item) => item.field == source_id);
// 根据数据源ID是否包含点号来区分处理方式
if (source_id.includes(';')) {
const ids = source_id.split(';');
let source_text = '';
ids.forEach((item, index) => {
source_text += this.data_handling(item) + (index != ids.length - 1 ? (sourceList?.join || '') : '');
});
text_title += (sourceList?.first || '') + source_text + (sourceList?.last || '');
} else {
text_title += (sourceList?.first || '') + this.data_handling(source_id) + (sourceList?.last || '');
}
if (index < data_source_id.length - 1) {
text_title += form?.data_split?.middle || '';
}
});
text_title += form?.data_split?.right || '';
}
// 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
text = text_title;
}
return text;
},
data_handling(data_source_id) {
let text = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
// 其他的切换为从data中取数据
if (data_source_id == this.propTitleParams) {
// 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : get_nested_property(this.propSourceList.data, data_source_id);
} else {
text = get_nested_property(this.propSourceList.data, data_source_id);
}
}
return text;
},
get_text_style(form, scale) {
let style = `font-size: ${form.text_size * scale }px;line-height: ${ (typeof form.line_text_size === "number" ? form.line_text_size : form.text_size) * scale }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, scale, true)};box-sizing: border-box;`;
if (form.text_weight == 'italic') {
style += `font-style: italic`;
} else if (['bold', '500'].includes(form.text_weight)) {
style += `font-weight: bold;`;
}
return style;
},
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${radius_computer(form.bg_radius, scale, true)}`;
if (form.border_show == '1') {
style += `border: ${form.border_size * scale }px ${form.border_style} ${form.border_color};box-sizing: border-box;`;
}
// 是富文本并且开启了上下滚动的开关
if (form.is_rich_text == '1' && form.is_up_down == '1') {
style += `overflow-y: auto;`;
}
return style;
},
url_event(e) {
this.$emit('url_event', this.text_url)
},
},
};
</script>
<style lang="scss" scoped>
.break {
word-wrap: break-word;
word-break: break-all;
}
.rich-text-content {
white-space: normal;
word-break: break-all;
* {
max-width: 100%;
}
}
</style>