yicangzongtai_app_240321/template/SlyCube/SlyCube.vue

<template>
	<view :style="[$wrapStyle(styles)]">
		<view class="cap-cube-wrap" :style="[getWrapStyle()]">
			<view v-for="(item, index) in attrs.layout.list" :key="index" class="absolute cap-cube-item"
				:style="[getMainStyle(item)]">
				<view class="cap-cube-item-wrap" :style="[getItemStyle()]">
					<image class="cap-cube-img" mode="aspectFill" :src="item.image" @click="$jump(item.jump)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			// dataVal: {
			// 	type: Object,
			// 	default: null
			// },
			attrs: {
				type: Object,
				default: null
			},
			styles: {
				type: Object,
				default: null
			},
		},
		watch: {},
		computed: {
			// 单元块尺度
			itemUnit() {
				return (375 - this.styles.pagePadding * 2) / 6;
			},
			// 容器宽度
			wrapHeight() {
				return this.attrs.layout.row * this.itemUnit;
			},
			// 单项间距
			margin() {
				return this.styles.imgMargin;
			},
		},
		methods: {
			// 单项容器样式
			getItemStyle() {
				return {
					borderRadius: this.$unit(this.styles.imgRadius),
				};
			},
			// 容器样式
			getWrapStyle() {
				let result = {};
				if (this.attrs.layout.list.length > 0) {
					result.height = this.$unit(this.wrapHeight);
				} else {
					result.backgroundImage =
						"url('http://110.41.150.71:8090/img/1667354829715.jpg')";
					result.backgroundSize = `100% 100%`;
					result.height = this.$unit(190);
				}
				console.log(result)
				return {
					...this.$cmpStyle(this.styles),
					...result,
				};
			},
			// 主体样式
			getMainStyle(styles) {
				let result = {};

				Object.keys(styles).map((key) => {
					let tmep = styles[key] * this.itemUnit;

					switch (key) {
						case "top":
							let paddingTop = tmep == 0 ? this.margin : this.margin / 2;
							result.paddingTop = this.$unit(paddingTop);
							break;

						case "left":
							let paddingLeft = tmep == 0 ? this.margin : this.margin / 2;
							result.paddingLeft = this.$unit(paddingLeft);
							break;

						case "bottom":
							let paddingBottom =
								tmep == this.wrapHeight ? this.margin : this.margin / 2;
							result.paddingBottom = this.$unit(paddingBottom);
							break;

						case "right":
							let paddingRight =
								tmep == 375 - this.styles.pagePadding * 2 ?
								this.margin :
								this.margin / 2;
							result.paddingRight = this.$unit(paddingRight);
							break;
					}

					result[key] = this.$unit(tmep);
				});
				console.log('result', result, styles)
				return result;
			},
			setInit(val) {
				this.list = val.data.map(el => {
					if (el.image.value) {
						// 只有存在图片才能显示
						return {}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cap-cube-wrap {
		overflow: hidden;
		position: relative;

		.cap-cube-item {
			display: flex;

			.cap-cube-item-wrap {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.cap-cube-img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.absolute {
		position: absolute !important;
	}
</style>