218 lines
10 KiB
Vue
218 lines
10 KiB
Vue
<template>
|
|
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
|
|
<view v-for="(item, index) in data_source_content_list" :key="index">
|
|
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
|
|
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
|
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh pr">
|
|
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != '2'" :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 != '2' ? '' : 'flex-row'">
|
|
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
|
|
<div class="w h" :style="style_img_container">
|
|
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</div>
|
|
<template v-else>
|
|
<view :style="style_container">
|
|
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
|
<dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
<script>
|
|
import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer } from '@/common/js/common/common.js';
|
|
import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
|
|
const app = getApp();
|
|
|
|
export default {
|
|
components: {
|
|
dataRendering
|
|
},
|
|
props: {
|
|
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%;',
|
|
};
|
|
},
|
|
computed: {
|
|
get_percentage_count() {
|
|
return (num) => {
|
|
return num * this.scale + 'px';
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
if (!isEmpty(this.propValue)) {
|
|
const new_form = this.propValue.data_content;
|
|
const new_style = this.propValue.data_style;
|
|
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 } } = 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 (['goods', 'article', 'brand'].includes(new_form.data_source)) {
|
|
if (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 width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
|
|
const new_scale = (width / new_form.width) * this.propMagicScale;
|
|
// 判断是平移还是整屏滚动
|
|
let swiper_height = 0;
|
|
// 轮播图高度控制
|
|
if (new_form.data_source_direction == '2') {
|
|
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) * new_form.data_source_carousel_col;
|
|
}
|
|
// 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
|
|
const swiper_width = (new_form.data_source_direction == '2' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
|
|
this.setData({
|
|
propKey: Math.random(),
|
|
form: new_form,
|
|
new_style: new_style,
|
|
div_width: width,
|
|
scale: new_scale,
|
|
custom_list_length: new_form.custom_list.length - 1,
|
|
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin), // 用于样式显示
|
|
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_carousel_col : 1,
|
|
swiper_height: swiper_height,
|
|
swiper_width: swiper_width,
|
|
});
|
|
}
|
|
},
|
|
get_list(list, form, new_style) {
|
|
// 深拷贝一下，确保不会出现问题
|
|
const cloneList = JSON.parse(JSON.stringify(list));
|
|
if (new_style.rolling_fashion != 'translation') {
|
|
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
|
|
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_event(e);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main-content {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|