shopxo-uniapp/components/diy/custom.vue

<template>
    <view v-if="data_source_content_list.length > 0">
        <view v-for="(item1, index1) in data_source_content_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="index1" @url_event="url_event"></dataRendering>
            </view>
        </view>
    </view>
    <view 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"></dataRendering>
            </view>
        </view>
    </view>
</template>

<script>
    import { common_styles_computer, common_img_computer, percentage_count, isEmpty } from '@/common/js/common/common.js';
    const app = getApp();
    import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
    var system = app.globalData.get_system_info(null, null, true);
    var sys_width = app.globalData.window_width_handle(system.windowWidth);

    export default {
        components: {
            dataRendering
        },
        props: {
            propValue: {
                type: Object,
                default: () => {
                    return {};
                },
            },
            propKey: {
                type: [String, Number],
                default: '',
            },
            // 组件渲染的下标
            propIndex: {
                type: Number,
                default: 1000000,
            },
            propOuterContainerPadding: {
                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,
                source_list: {
                    goods: {
                        // 存放手动输入的id
                        data_ids: [],
                        // 手动输入
                        data_list: [],
                        // 自动
                        data_auto_list: [],
                        // 商品类型
                        data_type: '0',
                        // 商品分类
                        category_ids: [],
                        // 品牌
                        brand_ids: [],
                        // 显示数量
                        number: 4,
                        // 排序类型
                        order_by_type: '0',
                        // 排序规则
                        order_by_rule: '0',
                    },
                    article: {
                        // 存放手动输入的id
                        data_ids: [],
                        // 手动输入
                        data_list: [],
                        // 自动
                        data_auto_list: [],
                        data_type: '0',
                        number: 4,
                        order_by_type: '0',
                        order_by_rule: '0',
                        // 文章封面
                        is_cover: '0',
                        // 分类id
                        category_ids: [],
                    },
                    brand: {
                        // 存放手动输入的id
                        data_ids: [],
                        // 手动输入
                        data_list: [],
                        // 自动
                        data_auto_list: [],
                        // 商品类型
                        data_type: '0',
                        // 商品分类
                        category_ids: [],
                        // 品牌
                        brand_ids: [],
                        // 显示数量
                        number: 4,
                        // 排序类型
                        order_by_type: '0',
                        // 排序规则
                        order_by_rule: '0',
                    }, 
                    common: {
                        // 存放手动输入的id
                        data_ids: [],
                        // 手动输入
                        data_list: [],
                        // 自动
                        data_auto_list: [],
                    }
                },
                data_source_content_list: [],
                data_source: '',
            };
        },
        watch: {
            propKey(val) {
                // 初始化
                this.init();
            },
        },
        mounted() {
            this.init();
        },
        methods: {
            percentage_count,
            init() {
                const new_form = this.propValue.content;
                const new_style = this.propValue.style;
                // 不包含新创建的数组时，将历史数据放到手动添加数组中
                if (!Object.keys(new_form.data_source_content).includes('data_auto_list') && !Object.keys(new_form.data_source_content).includes('data_list')) {
                    //深拷贝一下，保留历史数据
                    const data = JSON.parse(JSON.stringify(new_form.data_source_content));
                    // 判断是否有符合条件的数据源，如何没有的话取公共数据源
                    if (!isEmpty(this.source_list[new_form.data_source])) {
                        new_form.data_source_content = this.source_list[new_form.data_source];
                    } else {
                        new_form.data_source_content = this.source_list['common'];
                    }
                    // 如果老数组中有数据，将数据放到新数组中
                    if (!isEmpty(data)) {
                        new_form.data_source_content.data_list = [ data ];
                    }
                }
                // 数据来源的内容
                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 { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
                const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
                this.setData({
                    form: new_form,
                    new_style: new_style,
                    div_width: width,
                    scale: width / 390,
                    custom_list_length: new_form.custom_list.length - 1,
                    style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
                    style_img_container: common_img_computer(new_style.common_style, this.propIndex),
                    div_height: new_form.height,
                    data_source_content_list: list,
                    data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
                });
            },
            url_event(e) {
                if (this.data_source == 'goods' && this.data_source_content_list.length > 0) {
                    const index = e.currentTarget.dataset.index;
                    const list = this.data_source_content_list[index];
                    if (!isEmpty(list)) {
                        app.globalData.goods_data_cache_handle(list.data.id, list.data);
                    }
                }
                app.globalData.url_event(e);
            },
        },
    };
</script>

<style scoped lang="scss">
    .main-content {
        position: absolute;
        overflow: hidden;
    }
</style>