H5_QiCaiYao/components/diy-components/diy-group.vue

<template>
	<view class="diy-group" v-if="showFlag">
		<view v-for="(item, index) in diyGlobalData.value" :key="index" :style="item.pageStyle">
			<template v-if="item.componentName == 'Text'">
				<!-- 文本 -->
				<diy-text :value="item"></diy-text>
			</template>

			<template v-if="item.componentName == 'TextNav'">
				<!-- 文本导航 -->
				<diy-text-nav :value="item"></diy-text-nav>
			</template>

			<template v-if="item.componentName == 'Notice'">
				<!-- 公告 -->
				<diy-notice :value="item"></diy-notice>
			</template>

			<template v-if="item.componentName == 'GraphicNav'">
				<!-- 图文导航 -->
				<diy-graphic-nav :value="item"></diy-graphic-nav>
			</template>

			<template v-if="item.componentName == 'ImageAds'">
				<!-- 图片广告 -->
				<view :class="!showStore || !addonIsExist.store ? 'noStore-bg' : ''">
					<diy-img-ads :value="item"></diy-img-ads>
				</view>
			</template>

			<template v-if="item.componentName == 'Search'">
				<!-- 搜索 -->
				<view class="box" :class="!showStore || !addonIsExist.store ? 'noStore-bg' : ''">
					<diy-search :value="item"></diy-search>
				</view>
				<!-- <view :class="!showStore || !addonIsExist.store ? 'noStore-bg' : 'isStore-top'">
					<diy-search :value="item"></diy-search>
				</view> -->
			</template>

			<template v-if="item.componentName == 'RichText'">
				<!-- 富文本 -->
				<u-parse :content="item.html"></u-parse>
			</template>

			<template v-if="item.componentName == 'HorzLine'">
				<!-- 辅助线 -->
				<diy-horz-line :value="item"></diy-horz-line>
			</template>

			<template v-if="item.componentName == 'HorzBlank'">
				<!-- 辅助空白 -->
				<diy-horz-blank :value="item"></diy-horz-blank>
			</template>

			<template v-if="item.componentName == 'Coupon' && addonIsExist.coupon">
				<!-- 优惠券 -->
				<diy-coupon :value="item"></diy-coupon>
			</template>

			<template v-if="item.componentName == 'GoodsList'">
				<!-- 商品列表 -->
				<diy-goods-list :value="item"></diy-goods-list>
			</template>

			<template v-if="item.componentName == 'ManyGoodsList'">
				<!-- 多商品组 -->
				<diy-many-goods-list ref="ManyGoodsList" :value="item"
					:manyGoodsList='manyGoodsListData'></diy-many-goods-list>
			</template>

			<template v-if="item.componentName == 'RubikCube'">
				<!-- 魔方、橱窗 -->
				<diy-rubik-cube :value="item"></diy-rubik-cube>
			</template>

			<template v-if="item.componentName == 'Video'">
				<!-- 视频 -->
				<diy-video :value="item" ref="diyVideo"></diy-video>
			</template>

			<view class="diy-goods-level-wrap" v-if="item.componentName == 'GoodsCategory'">
				<!-- 商品分类 使用view替代template目的是限制商品分类在自定义首页的高度-->
				<!-- <diy-category :value="item"></diy-category> -->
			</view>

			<template v-if="item.componentName == 'FloatBtn'">
				<!-- 浮动按钮 -->
				<!-- <diy-float-btn :value="item"></diy-float-btn> -->
			</template>

			<template v-if="item.componentName == 'GoodsRecommend'">
				<!-- 商品推荐 -->
				<diy-goods-recommend :value="item"></diy-goods-recommend>
			</template>

			<template v-if="item.componentName == 'GoodsBrand'">
				<!-- 商品品牌 -->
				<diy-goods-brand :value="item"></diy-goods-brand>
			</template>

			<template v-if="item.componentName == 'Article'">
				<!-- 文章 -->
				<diy-article :value="item"></diy-article>
			</template>

			<template v-if="item.componentName == 'MemberInfo'">
				<!-- 自定义会员中心——会员信息 -->
				<diy-member-info ref="diyMemberIndex" :value="item" :token="token"></diy-member-info>
			</template>

			<template v-if="item.componentName == 'MemberMyOrder'">
				<!-- 自定义会员中心——我的订单 -->
				<diy-member-my-order ref="diyMemberMyOrder" :value="item" :token="token"></diy-member-my-order>
			</template>

			<!-- 自定义扩展组件 -->
			<template v-if="diyGlobalData.compExtend.indexOf(item.componentName) != -1">
				<!-- <diy-comp-extend :value="item"></diy-comp-extend> -->
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {

			diyData: {
				type: Object
			},
			storeId: {
				type: [String, Number]
			},
			token: {
				type: String
			},
			height: {
				type: String,
				default () {
					return '100vh';
				}
			}
		},

		data() {
			return {
				showStore: false,
				diyGlobalData: null,
				showFlag: true,
				manyGoodsListData: [],
			};
		},
		watch: {
			diyData: {
				deep: true,
				handler() {
					this.showFlag = false
					this.$nextTick(() => {
						this.showFlag = true
						this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
						this.setPagestyle();

					})

				}
			}
		},
		created() {
			this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
			this.setPagestyle();
		},
		computed: {
			bgColor() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.bgColor;
				}
				return str;
			},
			bgUrl() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.bgUrl;
				}
				return str;
			}
		},
		mounted() {
			if (this.diyData != undefined) {
				this.dealData();
			}
			// this.getHomeIndexList()
		},
		methods: {
			setPagestyle() {
				this.diyGlobalData.value.forEach((item, index) => {
					item.pageStyle = '';
					item.pageStyle += 'background-color:' + item.pageBgColor + ';';
					if (item.margin) {
						item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
						item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
						item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
						item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
					}
					if (item.componentName == 'Search') {
						item.pageStyle +=
							'position: sticky;top:0;padding-top: var(--status-bar-height); background: #f7f7f7;z-index: 999;'
						// background: linear-gradient(#ceebfa, #ceebfa, #f7f7f7);'
					}
				});
			},
			// 刷新数据
			refresh(data) {
				this.diyGlobalData = {}; // 必须先清空自定义组件集合，然后异步刷新
				setTimeout(() => {
					this.diyGlobalData = data;
					this.setPagestyle();
				}, 1);
			},
			dealData() {
				if (Array.isArray(this.diyData.value)) {
					for (var i = 0; i < this.diyData.value.length; i++) {
						if (this.diyData.value[i].componentName == 'StoreShow') {
							this.showStore = true;
						}
					}
				}
			},
			getHomeIndexList() {
				this.$api.sendRequest({
					url: '/api/goodssku/homeIndexList',
					success: res => {
						this.manyGoodsListData = res.data
						console.log(this.manyGoodsListData);
					},
					fail: err => {

					}
				})
			},

		}
	};
</script>

<style lang="scss">
	.diy-group {
		width: 100%;
	}

	:has(.box) {

		z-index: 999 !important;
	}

	// .diy-goods-level-wrap {
	// 	position: relative;
	// 	height: 60vh;
	// }
</style>