源文件
This commit is contained in:
279
components/diy/modules/custom/data-group-rendering.vue
Normal file
279
components/diy/modules/custom/data-group-rendering.vue
Normal 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
290
components/diy/modules/custom/data-rendering.vue
Normal 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
378
components/diy/modules/custom/model-custom-group.vue
Normal 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
161
components/diy/modules/custom/model-icon.vue
Normal 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
178
components/diy/modules/custom/model-image.vue
Normal 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
94
components/diy/modules/custom/model-lines.vue
Normal 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
133
components/diy/modules/custom/model-panel.vue
Normal 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
236
components/diy/modules/custom/model-text.vue
Normal 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>
|
||||
304
components/diy/modules/data-magic/custom/index.vue
Normal file
304
components/diy/modules/data-magic/custom/index.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<view :style="style_content_container">
|
||||
<view :style="style_content_img_container">
|
||||
<template v-if="!isEmpty(form.data_source) && form.data_source_is_loop !== '0'">
|
||||
<view 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_container">
|
||||
<view class="wh-auto ht-auto oh" :style="style_img_container">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
|
||||
<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' ? '' : '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" :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>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</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" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<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" :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" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer, common_styles_computer, common_img_computer, border_width, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding, old_radius } from '@/common/js/common/common.js';
|
||||
import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
|
||||
const app = getApp();
|
||||
|
||||
export default {
|
||||
components: {
|
||||
dataRendering
|
||||
},
|
||||
props: {
|
||||
propKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
propMagicScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
propDataSpacing: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
propDataIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
scale: 1,
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
div_width: 0,
|
||||
div_height: 0,
|
||||
custom_list_length: 0,
|
||||
data_source_content_list: [],
|
||||
data_source: '',
|
||||
// 一屏显示的数量
|
||||
slides_per_view: 1,
|
||||
// 轮播高度
|
||||
swiper_height: 0,
|
||||
swiper_width: 'width: 100%;',
|
||||
show_data: { data_key: 'id', data_name: 'name' },
|
||||
gap_width: '',
|
||||
content_outer_spacing_magin: '0rpx',
|
||||
defalt_style: {
|
||||
color_list: [{ color: '', 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,
|
||||
},
|
||||
style_content_container: '',
|
||||
style_content_img_container: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propKey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
get_percentage_count() {
|
||||
return (num) => {
|
||||
return num * this.scale + 'px';
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
init() {
|
||||
if (!isEmpty(this.propValue)) {
|
||||
const new_form = this.propValue.data_content;
|
||||
const new_style = this.propValue.data_style;
|
||||
const { data_common_style = {}, data_color_list = [], data_direction = '180deg', data_radius = old_radius, data_background_img = [], data_background_img_style = '2', data_chunk_padding = old_padding, data_chunk_margin = old_margin, data_content_style = {}, data_pattern = old_border_and_box_shadow } = new_style;
|
||||
const style_data = {
|
||||
color_list: data_color_list,
|
||||
direction: data_direction,
|
||||
}
|
||||
const style_img_data = {
|
||||
background_img: data_background_img,
|
||||
background_img_style: data_background_img_style,
|
||||
}
|
||||
// 数据来源的内容
|
||||
let list = [];
|
||||
if (new_form.is_custom_data == '1') {
|
||||
if (Number(new_form.data_source_content.data_type) === 0) {
|
||||
list = new_form.data_source_content.data_list;
|
||||
} else {
|
||||
list = new_form.data_source_content.data_auto_list.map(item => ({
|
||||
id: Math.random(),
|
||||
new_cover: [],
|
||||
new_title: '',
|
||||
data: item,
|
||||
}));
|
||||
}
|
||||
} else {
|
||||
list = new_form.data_source_content.data_list;
|
||||
}
|
||||
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
|
||||
// 计算宽度
|
||||
const { padding_left, padding_right, padding_top, padding_bottom } = data_chunk_padding;
|
||||
const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
|
||||
const old_width = new_form.width * this.propMagicScale;
|
||||
// 数据宽度
|
||||
const data_style = padding_left + padding_right + margin_left + margin_right + border_width(data_pattern);
|
||||
// 通用样式
|
||||
const chunk_padding = new_style?.chunk_padding || old_padding;
|
||||
const chunk_margin = new_style?.chunk_margin || old_margin;
|
||||
const common_styles = (chunk_margin?.margin_left || 0) + (chunk_margin?.margin_right || 0) + (chunk_padding?.padding_left || 0) + (chunk_padding?.padding_right || 0) + border_width(data_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 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;
|
||||
// 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
|
||||
const width = old_width - data_style - content_spacing - common_styles - data_spacing - (this.propDataSpacing / 2);
|
||||
// 计算缩放比例
|
||||
// 比例增加最小值判断
|
||||
const scale_number = width / new_form.width;
|
||||
const new_scale = scale_number > 0 ? scale_number : 0;
|
||||
// 间距
|
||||
const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
|
||||
// 判断是平移还是整屏滚动
|
||||
let swiper_height = 0;
|
||||
// 商品数量大于列数的时候，高度是列数，否则是当前的数量
|
||||
const col = new_list.length > carousel_col ? carousel_col : new_list.length;
|
||||
// 轮播图高度控制
|
||||
if (new_form.data_source_direction == 'horizontal') {
|
||||
swiper_height = new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||
} else {
|
||||
swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((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%;';
|
||||
const content_style = !isEmpty(new_style.data_content_style)? new_style.data_content_style : this.defalt_style;
|
||||
this.setData({
|
||||
form: new_form,
|
||||
new_style: new_style,
|
||||
div_width: width,
|
||||
scale: new_scale,
|
||||
custom_list_length: new_form.custom_list.length - 1,
|
||||
style_content_container: common_styles_computer(content_style),
|
||||
style_content_img_container: common_img_computer(content_style),
|
||||
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin) + box_shadow_computer(data_pattern) + border_computer(data_pattern), // 用于样式显示
|
||||
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
|
||||
data_source_content_list: new_list,
|
||||
data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
|
||||
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : carousel_col) : 1,
|
||||
swiper_height: swiper_height,
|
||||
swiper_width: swiper_width,
|
||||
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' },
|
||||
content_outer_spacing_magin: space_between + 'px',
|
||||
gap_width: `width: calc(${100 / carousel_col}% - ${gap}px);`,
|
||||
});
|
||||
}
|
||||
},
|
||||
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.$emit('onCarouselChange', e.detail.current, this.propDataIndex);
|
||||
},
|
||||
url_event(e, index, split_index) {
|
||||
if (this.form.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">
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
142
components/diy/modules/data-magic/magic-carousel.vue
Normal file
142
components/diy/modules/data-magic/magic-carousel.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<view class="wh-auto ht-auto oh" :style="style_container">
|
||||
<view class="pr oh wh-auto ht-auto" :style="style_img_container">
|
||||
<swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" :next-margin="next_margin" :display-multiple-items="slides_per_view" class="swiper" style="height: 100%" @change="carousel_change">
|
||||
<swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
|
||||
<template v-if="propType === 'img'">
|
||||
<view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
|
||||
<imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="wh-auto ht-auto" :style="shop_spacing">
|
||||
<product-list-show :propKey="propKey" :propOuterflex="propValue.data_content.goods_outerflex" :propFlex="propValue.data_content.goods_flex" :propNum="show_num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
|
||||
</view>
|
||||
</template>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, border_computer, box_shadow_computer, old_border_and_box_shadow, old_margin, old_radius, old_padding, margin_computer } from "@/common/js/common/common.js";
|
||||
const app = getApp();
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
||||
import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
|
||||
export default {
|
||||
components: {
|
||||
imageEmpty,
|
||||
productListShow,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
propContentImgRadius: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propType: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propActived: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
propGoodStyle: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
propDataIndex: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
propKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
slides_per_view: 1,
|
||||
show_num: 1,
|
||||
shop_spacing: '',
|
||||
next_margin: '0rpx',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propKey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!isEmpty(this.propValue)) {
|
||||
const { data_color_list = [], data_direction = '180deg', data_chunk_margin = old_margin, data_radius = old_radius, data_pattern = old_border_and_box_shadow, data_background_img = [], data_background_img_style = '2', data_chunk_padding = old_padding } = this.propValue.data_style;
|
||||
const style_data = {
|
||||
color_list: data_color_list,
|
||||
direction: data_direction,
|
||||
}
|
||||
const style_img_data = {
|
||||
background_img: data_background_img,
|
||||
background_img_style: data_background_img_style,
|
||||
}
|
||||
let slides_per_view = 1;
|
||||
let show_num = 1;
|
||||
// 商品时的处理逻辑
|
||||
const { goods_outerflex, goods_num } = this.propValue.data_content;
|
||||
const { rotation_direction, rolling_fashion, data_goods_gap } = this.propValue.data_style;
|
||||
// 图片时的处理
|
||||
if (this.propType === 'img') {
|
||||
slides_per_view = 1; // 能够同时显示的slides数量
|
||||
} else {
|
||||
// 判断是平移还是整屏滚动, 平移的时候是一个为1组，如果是整屏滚动，就为一屏为一组
|
||||
if (rolling_fashion == 'translation') {
|
||||
// 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
|
||||
if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
|
||||
slides_per_view = goods_num; // 能够同时显示的slides数量
|
||||
show_num = 1; // 一屏显示的数量 用于商品内部处理显示
|
||||
} else {
|
||||
slides_per_view = 1; // 能够同时显示的slides数量
|
||||
show_num = goods_num; // 一屏显示的数量 用于商品内部处理显示
|
||||
}
|
||||
} else {
|
||||
// 切屏的时候为多个为一组
|
||||
show_num = goods_num; // 一屏显示的数量 用于商品内部处理显示
|
||||
slides_per_view = 1; // 能够同时显示的slides数量
|
||||
}
|
||||
}
|
||||
|
||||
this.setData({
|
||||
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin) + box_shadow_computer(data_pattern) + border_computer(data_pattern), // 用于样式显示
|
||||
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
|
||||
next_margin: rolling_fashion == 'translation' && rotation_direction == 'horizontal' ? `-${ data_goods_gap * 2 }rpx` : '0rpx',
|
||||
shop_spacing: this.propType === 'img' ? 'margin-right: 0px;' : `margin-right: ${ data_goods_gap * 2 }rpx;`,
|
||||
slides_per_view: slides_per_view,
|
||||
show_num: show_num,
|
||||
});
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
carousel_change(e) {
|
||||
this.$emit('onCarouselChange', e.detail.current, this.propDataIndex);
|
||||
},
|
||||
// 跳转链接
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
233
components/diy/modules/data-magic/product-list-show.vue
Normal file
233
components/diy/modules/data-magic/product-list-show.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view :class="['align-c flex-1 w h', (propOuterflex == 'row' ? 'flex-row' : 'flex-col')]" :style="'gap:' + propGoodStyle.data_goods_gap + 'px;'">
|
||||
<template v-if="propFlex === 'row'">
|
||||
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
|
||||
<view class="w h oh" :style="style_container">
|
||||
<view class="w h flex-row gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
|
||||
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title || '' }}</view>
|
||||
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
|
||||
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || '' }}</text>
|
||||
{{ item.min_price || '' }}
|
||||
<template v-if="propIsShow.includes('price_unit')">
|
||||
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || '' }}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="propFlex === 'col_price_float'">
|
||||
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
|
||||
<view class="w h oh" :style="style_container">
|
||||
<view class="w h flex-col gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
|
||||
<view class="w h flex-1 pr oh">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="propIsShow.includes('price')" class="pa" :style="propGoodStyle.goods_price_style + float_pirce_style">
|
||||
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || ''}}</text>{{ item.min_price || ''}}
|
||||
<template v-if="propIsShow.includes('price_unit')">
|
||||
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || ''}}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 2) + 'rpx;'">{{ item.title || '' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
|
||||
<view class="w h oh" :style="style_container">
|
||||
<view class="w h flex-col" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="w h">
|
||||
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
|
||||
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title || '' }}</view>
|
||||
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
|
||||
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || ''}}</text>{{ item.min_price || '' }}
|
||||
<template v-if="propIsShow.includes('price_unit')">
|
||||
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || ''}}</text>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, old_padding } from "@/common/js/common/common.js";
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
||||
export default {
|
||||
components: {
|
||||
imageEmpty,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
propOuterflex: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propFlex: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propContentImgRadius: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propNum: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
propActived: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
propIsShow: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
propChunkPadding: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
propGoodStyle: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
propKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_container: '',
|
||||
style_img_container: '',
|
||||
block_size: '',
|
||||
float_pirce_style: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propKey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
img_padding_computer() {
|
||||
if (!isEmpty(this.propChunkPadding)) {
|
||||
return padding_computer(this.propChunkPadding) + ';box-sizing: border-box;';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
init() {
|
||||
if (!isEmpty(this.propGoodStyle)) {
|
||||
const { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding, goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center', goods_chunk_margin = old_margin} = this.propGoodStyle;
|
||||
const style_data = {
|
||||
color_list: goods_color_list,
|
||||
direction: goods_direction,
|
||||
}
|
||||
const style_img_data = {
|
||||
background_img: goods_background_img,
|
||||
background_img_style: goods_background_img_style,
|
||||
}
|
||||
|
||||
const data = {
|
||||
color_list: goods_price_color_list,
|
||||
direction: goods_price_direction,
|
||||
}
|
||||
let location = 'left:50%;transform:translateX(-50%);bottom:0;'
|
||||
if (goods_price_location == 'left') {
|
||||
location = 'left:0;bottom:0;';
|
||||
} else if (goods_price_location == 'right') {
|
||||
location = 'right:0;bottom:0;';
|
||||
}
|
||||
// 左右间距
|
||||
const shop_left_right_width_margin = goods_chunk_margin?.margin_left || 0 + goods_chunk_margin?.margin_right || 0;
|
||||
// 上下间距
|
||||
const shop_top_bottom_width_margin = goods_chunk_margin?.margin_top || 0 + goods_chunk_margin?.margin_bottom || 0;
|
||||
// 内容间距
|
||||
const total_gap = this.propGoodStyle.data_goods_gap * (this.propValue.length - 1);
|
||||
// 总的宽度
|
||||
const all_width = total_gap + (shop_left_right_width_margin.value * this.propNum);
|
||||
// 总的高度
|
||||
const all_height = total_gap + (shop_top_bottom_width_margin.value * this.propNum);
|
||||
this.setData({
|
||||
float_pirce_style: gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location,
|
||||
style_container: gradient_computer(style_data) + radius_computer(goods_radius) + margin_computer(goods_chunk_margin) + border_computer(this.propGoodStyle) + box_shadow_computer(this.propGoodStyle), // 用于样式显示
|
||||
style_img_container: this.propFlex == 'col' ? background_computer(style_img_data) : padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
|
||||
block_size: this.propOuterflex == 'row' ? 'height:calc(100% - ' + shop_top_bottom_width_margin.value + 'px);width:calc((100% - ' + all_width + 'px) / ' + this.propNum + ');' : 'width:calc(100% - ' + shop_left_right_width_margin.value + 'px);height:calc((100% - ' + all_height + 'px) / ' + this.propNum + ');',
|
||||
});
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
url_event(e) {
|
||||
// 存储数据显示缓存
|
||||
let index = e.currentTarget.dataset.index || 0;
|
||||
let goods = this.propValue[index];
|
||||
app.globalData.goods_data_cache_handle(goods.id, goods);
|
||||
|
||||
this.$emit('url_event', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.w {
|
||||
width: 100%;
|
||||
}
|
||||
.h {
|
||||
height: 100%;
|
||||
}
|
||||
.half-width {
|
||||
width: 50%;
|
||||
}
|
||||
.gap-20 {
|
||||
gap: 40rpx;
|
||||
}
|
||||
</style>
|
||||
57
components/diy/modules/data-magic/video/index.vue
Normal file
57
components/diy/modules/data-magic/video/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<!-- 视频 -->
|
||||
<view class="video pr wh-auto ht-auto">
|
||||
<video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" :style="'object-fit: cover;' + video_style"></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { padding_computer, radius_computer } from '@/common/js/common/common.js';
|
||||
export default {
|
||||
props: {
|
||||
propKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
propDataStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
style_container: '',
|
||||
video_img: '',
|
||||
video: '',
|
||||
video_style: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propKey(val) {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
const new_content = this.propValue || {};
|
||||
// 视频比例
|
||||
this.setData({
|
||||
video_img: new_content.video_img.length > 0 ? new_content.video_img[0].url : '',
|
||||
video: new_content.video.length > 0 ? new_content.video[0].url : '',
|
||||
video_style: radius_computer(this.propDataStyle.img_radius),
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
79
components/diy/modules/image-empty.vue
Normal file
79
components/diy/modules/image-empty.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view :class="['oh img_wh', propClass]" :style="empty_outer_style + propStyle">
|
||||
<image :src="img_url" :mode="propImgFit" :style="empty_style + 'display: block;'" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { is_obj, isEmpty } from '@/common/js/common/common.js';
|
||||
export default {
|
||||
props: {
|
||||
propImageSrc: {
|
||||
type: [Object, String],
|
||||
default: () => {},
|
||||
},
|
||||
propErrorStyle: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propImgFit: {
|
||||
type: String,
|
||||
default: () => 'aspectFill',
|
||||
},
|
||||
propStyle: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
propClass: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
empty_outer_style: '',
|
||||
empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
|
||||
img_url: '',
|
||||
default_image: '/static/images/common/image-empty.png',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propImageSrc(val) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let img_url = this.propImageSrc;
|
||||
if (is_obj(this.propImageSrc)) {
|
||||
img_url = !isEmpty(this.propImageSrc) ? this.propImageSrc.url : '';
|
||||
}
|
||||
// 没有图片的时候根据默认值来算
|
||||
if (img_url == undefined || img_url == null || img_url == '') {
|
||||
this.setData({
|
||||
empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
|
||||
empty_style: `${this.propErrorStyle}`,
|
||||
});
|
||||
img_url = this.default_image;
|
||||
} else {
|
||||
this.setData({
|
||||
empty_outer_style: '',
|
||||
empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
img_url: img_url,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.img_wh {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
98
components/diy/modules/subscript/index.vue
Normal file
98
components/diy/modules/subscript/index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view v-if="form.seckill_subscript_show == '1'" class="corner-marker" :style="corner_marker">
|
||||
<view class="flex-row nowrap" :style="corner_img_marker">
|
||||
<template v-if="form.subscript_type == 'img-icon'">
|
||||
<template v-if="!isEmpty(form.subscript_img_src)">
|
||||
<image :src="form.subscript_img_src[0].url" mode="aspectFill" :style="img_style" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<iconfont :name="'icon-' + form.subscript_icon_class" propContainerDisplay="flex" :size="new_style.subscript_style.text_or_icon_size * 2 + 'rpx'" :color="new_style.subscript_style.text_or_icon_color"></iconfont>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-line-1" :style="text_size">{{ form.subscript_text }}</span>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { common_img_computer, common_styles_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
import iconfont from '@/components/iconfont/iconfont';
|
||||
export default {
|
||||
components: {
|
||||
iconfont,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
propType: {
|
||||
type: String,
|
||||
default: 'outer',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
corner_img_marker: '',
|
||||
img_style: '',
|
||||
text_size: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
// 初始化数据
|
||||
init() {
|
||||
if (!isEmpty(this.propValue)) {
|
||||
const new_content = this.propValue.content || {};
|
||||
const new_style = this.propType == 'outer' ? this.propValue.style || {} : { subscript_style: this.propValue.style || {} };
|
||||
if (!isEmpty(new_style.subscript_style)) {
|
||||
// 视频比例
|
||||
this.setData({
|
||||
form: new_content,
|
||||
new_style: new_style,
|
||||
corner_marker: this.get_corner_marker(new_style),
|
||||
text_size: `font-size: ${ new_style.subscript_style.text_or_icon_size * 2 }rpx;color: ${ new_style.subscript_style.text_or_icon_color };`,
|
||||
corner_img_marker: common_img_computer(new_style.subscript_style),
|
||||
img_style: `height: ${new_style.subscript_style.img_height * 2}rpx; width: ${new_style.subscript_style.img_width * 2}rpx`,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
get_corner_marker(new_style) {
|
||||
const { subscript_style } = new_style;
|
||||
let location = common_styles_computer(subscript_style);
|
||||
// 获取内部的显示数据
|
||||
const { seckill_subscript_location, top_or_bottom_spacing, left_or_right_spacing } = subscript_style;
|
||||
// 圆角根据图片的圆角来计算 对角线是同样的圆角
|
||||
if (seckill_subscript_location == 'top-left') {
|
||||
location += `top: ${ top_or_bottom_spacing * 2 }rpx;left: ${ left_or_right_spacing * 2 }rpx;`;
|
||||
} else if (seckill_subscript_location == 'top-center') {
|
||||
location += 'top: 0;left: 50%;transform: translateX(-50%);';
|
||||
} else if (seckill_subscript_location == 'top-right') {
|
||||
location += `top: ${ top_or_bottom_spacing * 2 }rpx;right:${ left_or_right_spacing * 2 }rpx;`;
|
||||
} else if (seckill_subscript_location == 'bottom-left') {
|
||||
location += `bottom: ${ top_or_bottom_spacing * 2 }rpx;left: ${ left_or_right_spacing * 2 }rpx;`;
|
||||
} else if (seckill_subscript_location == 'bottom-center') {
|
||||
location += 'bottom: 0;left: 50%;transform: translateX(-50%);';
|
||||
} else if (seckill_subscript_location == 'bottom-right') {
|
||||
location += `bottom: ${ top_or_bottom_spacing * 2 }rpx;right: ${ left_or_right_spacing * 2 }rpx;`;
|
||||
}
|
||||
return location;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.corner-marker {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
592
components/diy/modules/tabs-view.vue
Normal file
592
components/diy/modules/tabs-view.vue
Normal file
@@ -0,0 +1,592 @@
|
||||
<template>
|
||||
<!-- 66rpx是自定义顶部导航栏的高度-->
|
||||
<view class="tabs-view" :style="tabs_sticky">
|
||||
<view class="tabs-view" :style="propStyle + propTabsBackground">
|
||||
<view class="pr" :style="propsTabsContainer">
|
||||
<view v-if="propIsRotatingBackground" class="pa top-0 wh-auto ht-auto" :style="propBgImgStyle"></view>
|
||||
<view class="flex-row gap-10 jc-sb align-c" :style="propsTabsImgContainer">
|
||||
<view class="tabs flex-1 flex-width">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="tabs_list_is_sliding_fixed" :scroll-left="scroll_left" :class="'wh-auto interior-area-' + propKey">
|
||||
<view :class="'flex-row ' + flex_class" :style="'height:' + tabs_height + ';width:' + tabs_scroll_width + 'px;'">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" :class="'item nowrap flex-col jc-c align-c gap-4 scroll-item-' + propKey + ' ' + tabs_theme + (index == active_index ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="'flex:0 0 auto;padding-left:' + (index == 0 ? '0' : tabs_spacing) + 'rpx;padding-right:' + (index + 1 == tabs_list.length ? '0' : tabs_spacing) + 'rpx;' + get_item_style(item.is_sliding_fixed)" :data-index="index" @tap="handle_event">
|
||||
<view class="nowrap ma-auto">
|
||||
<view v-if="tabs_theme_index == '4'" :class="'img oh pr z-i-deep ' + (!isEmpty(item.img) ? 'img-no-empty' : '')" :style="tabs_theme_style.tabs_top_img">
|
||||
<imageEmpty :propImageSrc="item.img[0]" propImgFit="aspectFit" propErrorStyle="width: 20rpx;height: 20rpx;"></imageEmpty>
|
||||
<!-- <image :src="item.img[0].url" class="img" mode="aspectFit" /> -->
|
||||
</view>
|
||||
<template v-if="item.tabs_type == '1'">
|
||||
<template v-if="!isEmpty(item.tabs_icon)">
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + (index == active_index ? (['2', '4'].includes(tabs_theme_index) ? tabs_check : '') : '' + tabs_padding_bottom)">
|
||||
<iconfont :name="'icon-' + item.tabs_icon" :color="index == active_index ? tabs_icon_checked_color : tabs_icon_color" propContainerDisplay="flex" :size="index == active_index ? tabs_icon_checked_size : tabs_icon_size"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + index == active_index ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : '' : tabs_padding_bottom">
|
||||
<imageEmpty :propImageSrc="item.tabs_img[0]" :propStyle="index == active_index ? tabs_theme_style.tabs_img_checked : tabs_theme_style.tabs_img" propImgFit="heightFix" propErrorStyle="width: 40rpx;height: 40rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view :class="tabs_theme_index == '4' ? 'title pr z-i' : 'title pr z-i-deep'" :style="(tabs_theme_index == '4' ? tabs_sign_spacing : '') + (index == active_index ? ['2', '4'].includes(tabs_theme_index) ? tabs_theme_style.tabs_title_checked + tabs_check : tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title + tabs_padding_bottom)">{{ item.title }}</view>
|
||||
</template>
|
||||
<view class="desc pr z-i wh-auto" :style="tabs_sign_spacing + (tabs_theme_index == '1' && index == active_index ? tabs_check : '')">{{ item.desc }}</view>
|
||||
<template v-if="tabs_theme_index == '3' && index == active_index">
|
||||
<template v-if="!isEmpty(form.tabs_adorn_icon)">
|
||||
<view class="icon pr z-i wh-auto flex-row jc-c align-c" :style="tabs_sign_spacing">
|
||||
<iconfont :name="'icon-' + form.tabs_adorn_icon" :style="icon_tabs_check" propContainerDisplay="flex" :size="tabs_adorn_icon_size"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="pr z-i wh-auto flex-row jc-c align-c ma-auto" :style="tabs_sign_spacing">
|
||||
<imageEmpty :propImageSrc="form.tabs_adorn_img[0]" :propStyle="tabs_adorn_img_style" propImgFit="aspectFit" propErrorStyle="width: 20rpx;height: 20rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<view class="bottom_line z-i" :class="tabs_bottom_line_theme" :style="tabs_check + tabs_sign_spacing"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="propIsTabsIcon && form.show_more !== '0'" :style="tabs_padding_bottom">
|
||||
<iconfont :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" propContainerDisplay="flex" @click="category_check_event"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选项卡更多弹窗 -->
|
||||
<componentPopup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="newPropTop" :propStyle="newPropStyle" @onclose="quick_close_event">
|
||||
<view :class="'padding-bottom-lg ' + (['toutiao', 'app', 'h5'].includes(platform) ? 'padding-top-lg' : 'padding-top')">
|
||||
<view class="padding-left-main padding-bottom-main">全部选项卡</view>
|
||||
<view class="divider-b">
|
||||
<view class="nav-list-more">
|
||||
<view class="flex-row flex-wrap align-c">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" class="item tc cr-base cp text-size-xs" :data-index="index" @tap="handle_event">
|
||||
<view class="dis-inline-block padding-vertical-xs padding-horizontal round" :class="active_index == index ? 'bg-main border-color-main cr-white' : ''">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tc padding-top-lg flex-row jc-c align-c" @tap="quick_close_event">
|
||||
<text class="padding-right-sm">{{ $t('nav-more.nav-more.h9g4b1') }}</text>
|
||||
<iconfont name="icon-arrow-top" color="#ccc" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</componentPopup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { gradient_computer, isEmpty, radius_computer } from '@/common/js/common/common.js';
|
||||
import componentPopup from '@/components/popup/popup';
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
||||
// 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
// #ifdef MP-TOUTIAO
|
||||
bar_height = 0;
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
componentPopup,
|
||||
imageEmpty,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
// 是否需要icon
|
||||
propIsTabsIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否需要粘性定位置顶
|
||||
propIsTop: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 指定样式
|
||||
propStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 层级
|
||||
propZIndex: {
|
||||
type: Number,
|
||||
default: 11,
|
||||
},
|
||||
// 自定义导航栏高度
|
||||
propCustomNavHeight: {
|
||||
type: String,
|
||||
default: '66rpx',
|
||||
},
|
||||
// tabs背景色
|
||||
propTabsBackground: {
|
||||
type: String,
|
||||
default: 'transparent',
|
||||
},
|
||||
// 置顶距离顶部高度
|
||||
propTop: {
|
||||
type: [String, Number],
|
||||
default: '0',
|
||||
},
|
||||
propsTabsContainer: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
propsTabsImgContainer: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propIsRotatingBackground: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
propBgImgStyle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propKey: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
propTabsSlidingFixedBg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
tabs_theme_index: '',
|
||||
tabs_theme: '',
|
||||
tabs_check: '',
|
||||
icon_tabs_check: '',
|
||||
tabs_spacing: '',
|
||||
tabs_sign_spacing: '',
|
||||
tabs_padding_bottom: '',
|
||||
tabs_list: [],
|
||||
active_index: 0,
|
||||
tabs_theme_style: {
|
||||
tabs_title_checked: '',
|
||||
tabs_title: '',
|
||||
tabs_img_checked: '',
|
||||
tabs_img: '',
|
||||
tabs_top_img: ''
|
||||
},
|
||||
tabs_icon_checked_size: '',
|
||||
tabs_icon_size: '',
|
||||
tabs_icon_checked_color: '',
|
||||
tabs_icon_color: '',
|
||||
icon: {
|
||||
more_icon_class: '',
|
||||
more_icon_size: '',
|
||||
more_icon_color: '',
|
||||
},
|
||||
// 过滤弹窗
|
||||
popup_status: false,
|
||||
propIsBar: false,
|
||||
tabs_bottom_line_theme: '',
|
||||
tabs_sticky: '',
|
||||
tabs_height: '100%',
|
||||
tabs_adorn_img_style: '',
|
||||
tabs_width: 0,
|
||||
tabs_scroll_width: 0,
|
||||
// #ifdef MP
|
||||
sticky_top: bar_height,
|
||||
// #endif
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
sticky_top: bar_height,
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
sticky_top: bar_height,
|
||||
// #endif
|
||||
newPropTop: '',
|
||||
newPropStyle: '',
|
||||
platform: app.globalData.application_client_type(),
|
||||
is_out_of_range: false,
|
||||
tabs_list_is_sliding_fixed: true,
|
||||
scroll_left: 0,
|
||||
tabs_adorn_icon_size: '0rpx',
|
||||
// 默认数据
|
||||
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
|
||||
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
|
||||
old_margin: { margin: 0, margin_top: 10, margin_bottom: 0, margin_left: 0, margin_right: 0 },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
flex_class() {
|
||||
if (this.is_out_of_range) {
|
||||
return this.form.justification == 'center' ? 'jc-c' : this.form.justification == 'right' ? 'jc-e': '';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
get_item_style() {
|
||||
return (val) => {
|
||||
return val == '1' ? `${ this.propTabsSlidingFixedBg };position: sticky;left: 0;z-index: 11;` : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propValue() {
|
||||
this.init();
|
||||
},
|
||||
propIsTop: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(new_val) {
|
||||
if (new_val) {
|
||||
this.tabs_sticky = 'position: sticky;top: calc(' + parseInt(this.propTop) + 'px + ' + this.propCustomNavHeight + ');z-index: ' + this.propZIndex + ';';
|
||||
} else {
|
||||
this.tabs_sticky = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
propTop(new_val, old_val) {
|
||||
if (this.propIsTop) {
|
||||
this.tabs_sticky = 'position: sticky;top: calc(' + parseInt(this.propTop) + 'px + ' + this.propCustomNavHeight + ');z-index: ' + this.propZIndex + ';';
|
||||
} else {
|
||||
this.tabs_sticky = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 判断是否为空
|
||||
isEmpty,
|
||||
// 初始化数据
|
||||
init() {
|
||||
const new_content = this.propValue.content || {};
|
||||
const new_style = this.propValue.style || {};
|
||||
const new_tabs_check = this.tabs_check_computer(new_style);
|
||||
const new_icon = {
|
||||
more_icon_class: new_style.more_icon_class,
|
||||
more_icon_size: new_style.more_icon_size,
|
||||
more_icon_color: new_style.more_icon_color,
|
||||
};
|
||||
const tabs_top_img_height = new_style?.tabs_top_img_height || 39;
|
||||
const tabs_top_img_radius = new_style?.tabs_top_img_radius || { radius: 100, radius_top_left: 100, radius_top_right: 100, radius_bottom_left: 100, radius_bottom_right: 100}
|
||||
// 标题样式
|
||||
const new_tabs_theme_style = {
|
||||
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;line-height: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};`,
|
||||
tabs_title: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size * 2}rpx;line-height: ${new_style.tabs_size * 2}rpx;color:${new_style.tabs_color};`,
|
||||
tabs_img_checked: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
|
||||
tabs_img: `height: ${(new_style?.tabs_img_height || 0) * 2}rpx;` + radius_computer(new_style?.tabs_img_radius || this.old_radius),
|
||||
tabs_top_img: `height: ${tabs_top_img_height * 2 }rpx;width: ${tabs_top_img_height * 2 }rpx;box-sizing: border-box;` + radius_computer(tabs_top_img_radius),
|
||||
};
|
||||
const { tabs_size_checked, tabs_size, tabs_icon_size_checked = 0, tabs_icon_size = 0, tabs_img_height = 0, tabs_sign_spacing = 0 } = new_style || {};
|
||||
let default_height = 0;
|
||||
if (new_content.tabs_theme == '2') {
|
||||
default_height = 12; // 选中的时候,风格二的内间距
|
||||
} else if (new_content.tabs_theme == '4') {
|
||||
// const top_index = new_content?.tabs_list?.findIndex((item) => !isEmpty(item.img)) ?? -1;
|
||||
// default_height = 4 + (top_index > -1 ? tabs_top_img_height + tabs_sign_spacing : 0); // 选中的时候,风格二的内间距 加上上边图片的大小和上边图片之间的间距
|
||||
default_height = 4 + tabs_top_img_height + tabs_sign_spacing;
|
||||
}
|
||||
// 筛选出所有的icon
|
||||
const is_icon = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
|
||||
// 如果有icon，则取选中的icon大小和未选中的icon大小取最大值，作为图标的高度
|
||||
let icon_height = 0;
|
||||
if (is_icon > -1) {
|
||||
icon_height = Math.max(tabs_icon_size_checked + default_height, tabs_icon_size);
|
||||
}
|
||||
// 筛选出所有的图片, 没有选择图标的时候默认是图片
|
||||
const is_img = new_content?.tabs_list?.findIndex((item) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
|
||||
// 选项卡高度 五个值，作为判断依据，因为图片没有未选中的大小设置，所以高度判断的时候只取选中的高度, 其余的icon和标题都分别取选中和未选中的大小对比，取出最大的值，作为选项卡的高度，避免选项卡切换时会出现抖动问题
|
||||
const height = Math.max(tabs_size_checked + default_height, tabs_size, icon_height, is_img > -1 ? (tabs_img_height + default_height) : '');
|
||||
const findIndex = new_content.tabs_list.findIndex(item => item.is_sliding_fixed == '1');
|
||||
// 参数设置
|
||||
this.setData({
|
||||
form: new_content,
|
||||
tabs_list_is_sliding_fixed: findIndex == -1,
|
||||
newPropTop: `calc(${ this.sticky_top * 2}rpx);`,
|
||||
newPropStyle: `padding-top: ${ this.sticky_top * 2 }rpx;margin-top: -${ this.sticky_top * 2 }rpx;`,
|
||||
new_style: new_style,
|
||||
tabs_spacing: Number(new_style.tabs_spacing),
|
||||
tabs_sign_spacing: !isEmpty(new_style.tabs_sign_spacing) ? `margin-top: ${new_style.tabs_sign_spacing * 2}rpx;` : 'margin-top: 8rpx;',
|
||||
tabs_list: new_content.tabs_list,
|
||||
tabs_padding_bottom: this.get_padding_bottom(new_content, new_style) + 'z-index: 11;',
|
||||
// 选项卡主题
|
||||
tabs_theme: this.get_tabs_theme(new_content),
|
||||
tabs_theme_index: new_content.tabs_theme,
|
||||
// 选项卡样式
|
||||
tabs_check: new_tabs_check,
|
||||
icon_tabs_check: `${new_tabs_check};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`,
|
||||
icon: new_icon,
|
||||
tabs_icon_checked_size: (new_style?.tabs_icon_size_checked || 0) * 2 + 'rpx',
|
||||
tabs_icon_size: (new_style?.tabs_icon_size || 0) * 2 + 'rpx',
|
||||
tabs_icon_checked_color: new_style?.tabs_icon_color_checked || '',
|
||||
tabs_icon_color: new_style?.tabs_icon_color || '',
|
||||
tabs_theme_style: new_tabs_theme_style,
|
||||
tabs_bottom_line_theme: new_style.tabs_one_theme == '1' ? 'tabs-bottom-line-theme' : '',
|
||||
tabs_theme_1_style: new_style.tabs_one_theme == '1',
|
||||
tabs_height: ['2', '4'].includes(new_content.tabs_theme) ? height * 2 + 'rpx' : '100%;',
|
||||
tabs_adorn_img_style: this.get_tabs_adorn_img_style(new_style),
|
||||
tabs_adorn_icon_size: (new_style?.tabs_adorn_icon_size || 0) * 2 + 'rpx',
|
||||
});
|
||||
// 只有居中居右的才重新获取dom判断
|
||||
// if (['center', 'right'].includes(this.form.justification)) {
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.interior-area-' + this.propKey)
|
||||
.fields({ size: true, scrollOffset: true},(res) => {
|
||||
if ((res || null) != null) {
|
||||
const { scrollWidth, width } = res;
|
||||
this.setData({
|
||||
is_out_of_range: scrollWidth <= width,
|
||||
tabs_scroll_width: scrollWidth,
|
||||
tabs_width: width
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
}, 0)
|
||||
// }
|
||||
},
|
||||
get_tabs_adorn_img_style(new_style) {
|
||||
return radius_computer(new_style?.tabs_adorn_img_radius || this.old_radius) + `height: ${(new_style?.tabs_adorn_img_height || 10) * 2}rpx;${ new_style.is_tabs_adorn_img_background == '1' ? tabs_check.value : ''}`;
|
||||
},
|
||||
// 获取选项卡主题
|
||||
get_tabs_theme(data) {
|
||||
let arr = {
|
||||
1: 'tabs-style-2',
|
||||
2: 'tabs-style-3',
|
||||
3: 'tabs-style-4',
|
||||
4: 'tabs-style-5',
|
||||
};
|
||||
let value = arr[data.tabs_theme];
|
||||
return value === undefined ? 'tabs-style-1' : value;
|
||||
},
|
||||
get_padding_bottom(form, new_style) {
|
||||
let bottom = 0;
|
||||
if (form.tabs_theme == '0') {
|
||||
if (new_style.tabs_one_theme == '1') {
|
||||
bottom = 6;
|
||||
} else {
|
||||
bottom = 3;
|
||||
}
|
||||
} else if (form.tabs_theme == '3') {
|
||||
bottom = !isEmpty(form.tabs_adorn_icon) ? new_style.tabs_adorn_icon_size : new_style.tabs_adorn_img_height;
|
||||
}
|
||||
const tabs_sign_spacing = !isEmpty(new_style.tabs_sign_spacing) ? new_style.tabs_sign_spacing : 4;
|
||||
return ['1', '2', '4'].includes(form.tabs_theme) ? '' : `padding-bottom: ${(tabs_sign_spacing + bottom) * 2 }rpx;`;
|
||||
},
|
||||
// 选中的背景渐变色样式
|
||||
tabs_check_computer(data) {
|
||||
const new_gradient_params = {
|
||||
color_list: data.tabs_checked,
|
||||
direction: data.tabs_direction,
|
||||
};
|
||||
return gradient_computer(new_gradient_params);
|
||||
},
|
||||
|
||||
// 事件
|
||||
// tabs切换事件
|
||||
handle_event(e) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const tabs_list_item = this.tabs_list[index];
|
||||
this.setData({
|
||||
active_index: index,
|
||||
popup_status: false,
|
||||
});
|
||||
this.set_scoll_left(index);
|
||||
this.$emit('onTabsTap', index, tabs_list_item);
|
||||
setTimeout(() => {
|
||||
this.$emit('tabsZindex', 11)
|
||||
}, 200)
|
||||
},
|
||||
// 将选中的内容定位到中间
|
||||
set_scoll_left(index) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll(`.scroll-item-` + this.propKey)
|
||||
.boundingClientRect((rect) => {
|
||||
const tabs_index = this.form.tabs_list.findIndex(item => item.is_sliding_fixed == '1');
|
||||
// 如果第一个悬浮了，就取第二个的left加上 第一个的宽度和left
|
||||
let new_width = tabs_index == 0 && index != 0 ? rect[1].left - rect[0].width - rect[0].left : rect[0].left;
|
||||
// 如果悬浮的不是第一个并且选中的是悬浮的内容
|
||||
if (index > 0 && tabs_index == index) {
|
||||
new_width = rect[0].left - rect[index + 1].left + rect[index].width;
|
||||
}
|
||||
const scrollLeft =
|
||||
rect[index].left +
|
||||
rect[index].width / 2 -
|
||||
this.tabs_width / 2 -
|
||||
new_width
|
||||
this.setData({
|
||||
scroll_left: scrollLeft,
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
// 分类选择事件
|
||||
category_check_event() {
|
||||
this.setData({
|
||||
popup_status: true,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$emit('tabsZindex', 13)
|
||||
}, 0)
|
||||
},
|
||||
// 关闭分类选择事件
|
||||
quick_close_event(e) {
|
||||
this.setData({
|
||||
popup_status: false,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$emit('tabsZindex', 11)
|
||||
}, 200)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
.item {
|
||||
// padding: 0 0 10rpx 0;
|
||||
position: relative;
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
.bottom_line {
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: red;
|
||||
// position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
// position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
line-height: 20rpx !important;
|
||||
display: none;
|
||||
}
|
||||
.img {
|
||||
// width: 78rpx;
|
||||
// height: 78rpx;
|
||||
border-radius: 100%;
|
||||
border: 2rpx solid transparent;
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&.tabs-style-1 {
|
||||
&.active {
|
||||
.bottom_line {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.tabs-bottom-line-theme {
|
||||
opacity: 0.6;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
height: 14rpx;
|
||||
border-radius: 0;
|
||||
// left: 12%;
|
||||
}
|
||||
}
|
||||
&.tabs-style-2 {
|
||||
&.active {
|
||||
.desc {
|
||||
background: #ff5e5e;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
border-radius: 40rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.tabs-style-3 {
|
||||
&.active {
|
||||
.title {
|
||||
// background: #ff2222;
|
||||
border-radius: 40rpx;
|
||||
padding: 6px 12px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs-style-4 {
|
||||
// padding-bottom: 28rpx;
|
||||
&.active {
|
||||
.title {
|
||||
color: #ff2222;
|
||||
}
|
||||
.icon {
|
||||
color: #ff2222;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs-style-5 {
|
||||
align-items: center;
|
||||
&.active {
|
||||
.title {
|
||||
// font-size: 22rpx;
|
||||
// background: #ff5e5e;
|
||||
border-radius: 40rpx;
|
||||
padding: 2px 7px;
|
||||
box-sizing: border-box;
|
||||
// color: #fff;
|
||||
}
|
||||
.img {
|
||||
border-color: #ff5e5e;
|
||||
}
|
||||
}
|
||||
.img-no-empty {
|
||||
width: 100% !important;
|
||||
}
|
||||
.img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-list-more {
|
||||
width: 100%;
|
||||
max-height: 550rpx;
|
||||
padding-bottom: 20rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.nav-list-more .item {
|
||||
width: 20%;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.pb-14 {
|
||||
padding-bottom: 28rpx;
|
||||
}
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.ma-auto {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user