vr-shopxo-uniapp/components/diy/modules/custom/data-group-rendering.vue

<template>
    <view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
        <view v-for="(item, index) in propCustomList" :key="item.id" :class="'main-content ' + get_animation_class(item.com_data)" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
            <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';
export default {
    components: {
        modelText,
        modelLines,
        modelImage,
        modelIcon,
        modelPanel,
    },
    props: {
        propCustomList: {
            type: Array,
            default: () => {
                return [];
            },
            required: true,
        },
        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 {};
    },
    computed: {
        get_percentage_count() {
            return (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 '';
                }
            };
        }
    },
    methods: {
        url_event(e) {
            this.$emit('url_event', e, this.propDataIndex, this.propDataSplitIndex);
        }
    },
};
</script>

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