yyky_new_app/pages/index/components/magicCube.vue

<!-- 装修图文组件：广告魔方 -->
<template>
	<div class="ss-cube-wrap" :style="parseAdWrap">
		<div v-for="(item, index) in data.list" :key="index">
			<div class="cube-img-wrap" :style="[parseImgStyle(item), { margin: data.space + 'px' }]"
				@click="navigateTo(item.url)">
				<image class="cube-img" :src="sheep.$url.cdn(item.imgUrl)" />
			</div>
		</div>
	</div>
</template>

<script>
	import sheep from '@/sheep';
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({}),
			},
			styles: {
				type: Object,
				default: () => ({}),
			},
		},
		watch: {
			data(newVal) {
				if (newVal) {
					console.log(newVal, '更新后的data');
					this.updateComponent(newVal, this.styles);
				}
			},
			styles(newVal) {
				if (newVal) {
					console.log(newVal, '更新后的styles');
					this.updateComponent(this.data, newVal);
				}
			}
		},
		mounted() {
			this.updateComponent(this.data, this.styles);
		},
		methods: {
			updateComponent(data, styles) {
				console.log(data, styles, '88888888');
				// 在这里处理更新后的 data 和 styles
			},
			parseAdWrap() {
				// 更新 cell 的值
				this.cell = (this.windowWidth -
						((this.styles.marginLeft || 0) + (this.styles.marginRight || 0) + (this.styles.padding || 0) * 2)
						) /
					4;

				let heightArr = this.data.list.reduce(
					(prev, cur) => (prev.includes(cur.height + cur.top) ? prev : [...prev, cur.height + cur.top]),
					[]
				);
				let heightMax = Math.max(...heightArr);

				return {
					height: heightMax * this.cell + 'px',
					width: this.windowWidth -
						(this.data?.style?.marginLeft +
							this.data?.style?.marginRight +
							this.styles.padding * 2) *
						2 +
						'px',
				};
			},
			parseImgStyle(item) {
				return {
					width: item.width * this.cell - this.data.space + 'px',
					height: item.height * this.cell - this.data.space + 'px',
					left: item.left * this.cell + 'px',
					top: item.top * this.cell + 'px',
					'border-top-left-radius': this.data.borderRadiusTop + 'px',
					'border-top-right-radius': this.data.borderRadiusTop + 'px',
					'border-bottom-left-radius': this.data.borderRadiusBottom + 'px',
					'border-bottom-right-radius': this.data.borderRadiusBottom + 'px',
				};
			},
			navigateTo(url) {
				this.sheep.$router.go(url);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ss-cube-wrap {
		position: relative;
		z-index: 2;
		width: 750rpx;
	}

	.cube-img-wrap {
		position: absolute;
		z-index: 3;
		overflow: hidden;
	}

	.cube-img {
		width: 100%;
		height: 100%;
	}
</style>