hwnc/components/ui-component-load/index.vue

<template>
	<view :class="[AppTheme]" :data-key="uikey" :data-theme="template">
		<Utitle v-if="component && uikey=='U_title'" :styles="styles" :datas="datas">
		</Utitle>
		<Ublank v-else-if="component && uikey=='U_blank'" :styles="styles" :datas="datas">
		</Ublank>
		<Uline v-else-if="component && uikey=='U_line'" :styles="styles" :datas="datas">
		</Uline>
		<Urichtext v-else-if="component && uikey=='U_richtext'" :styles="styles" :datas="datas">
		</Urichtext>
		<Ucube v-else-if="component && uikey=='U_cube'" :styles="styles" :datas="datas">
		</Ucube>
		<Usimplegraph v-else-if="component && uikey=='U_simplegraph'" :styles="styles" :datas="datas">
		</Usimplegraph>
		<Uvideo v-else-if="component && uikey=='U_video'" :styles="styles" :datas="datas">
		</Uvideo>
		<Uslideshow ref="slideshow" v-else-if="component && uikey=='U_slideshow'" :styles="styles" :datas="datas">
		</Uslideshow>
		<Ubutton v-else-if="component && uikey=='U_button'" :styles="styles" :datas="datas">
		</Ubutton>
		<Ususpendbutton v-else-if="component && uikey=='U_suspendbutton'" :styles="styles" :datas="datas">
		</Ususpendbutton>
		<Ubull v-else-if="component && uikey=='U_bull'" :styles="styles" :datas="datas">
		</Ubull>
		<Uactivity v-else-if="component && uikey=='U_activity'" :styles="styles" :datas="datas">
		</Uactivity>
		<Umonitor v-else-if="component && uikey=='U_monitor'" :styles="styles" :datas="datas">
		</Umonitor>
		<Uadopt v-else-if="component && uikey=='U_adopt'" :styles="styles" :datas="datas">
		</Uadopt>
		<Uland v-else-if="component && uikey=='U_land'" :styles="styles" :datas="datas">
		</Uland>
		<Ucoupon v-else-if="component && uikey=='U_coupon'" :styles="styles" :datas="datas">
		</Ucoupon>
		<Ugoods v-else-if="component && uikey=='U_goods'" :styles="styles" :datas="datas">
		</Ugoods>
		<Ugoods2 ref="goodlist" v-else-if="component && uikey=='U_goods2'" :styles="styles" :datas="datas">
		</Ugoods2>
		<Unavbar v-else-if="component && uikey=='U_navbar'" :styles="styles" :datas="datas">
		</Unavbar>
		<Useckill v-else-if="component && uikey=='U_seckill'" :styles="styles" :datas="datas">
		</Useckill>
		<Upublic v-else-if="component && uikey=='U_public'" :styles="styles" :datas="datas">
		</Upublic>
		<Uweather v-else-if="component && uikey=='U_weather'" :styles="styles" :datas="datas">
		</Uweather>
	</view>
</template>

<script>
	// 加载失败的组件
	import ErrorComponent from './load-error.vue';
	// import defaultGoods from '@/resource/images/default-goods.png';

	// 默认的商品数据
	const default_goods_item = {
		// goods_sn: "269004202",
		// goods_title: "Asymmetric Striped Slit Shirt Dress - Dark Gree",
		// goods_img: defaultGoods,
		tsk_price: 9.99, // 秒杀价格
		shop_price: 9.99, // 销售价
		market_price: 19.99, // 市场价
		discount: 50,
		promotions: [
			'<span>BUY <em class="special fb">1</em> GET 1 <em class="special fb  ml5" data-orgp="">99%</em> OFF</span>',
			'<span>BUY <em class="special fb">1</em> GET 1 <em class="special fb  ml5" data-orgp="">99%</em> OFF</span>'
		]
	};

	// 默认的商品数据列表
	const default_goods_list = [
		default_goods_item,
		default_goods_item,
		default_goods_item,
		default_goods_item
	];
	import Unavbar from '@/components/ui-component/U_navbar/m/index.vue';
	import Utitle from '@/components/ui-component/U_title/m/index.vue';
	import Uslideshow from '@/components/ui-component/U_slideshow/m/index.vue';
	import Ubutton from '@/components/ui-component/U_button/m/index.vue';
	import Ublank from '@/components/ui-component/U_blank/m/index.vue';
	import Uline from '@/components/ui-component/U_line/m/index.vue';
	import Urichtext from '@/components/ui-component/U_richtext/m/index.vue';
	import Ucube from '@/components/ui-component/U_cube/m/index.vue';
	import Usimplegraph from '@/components/ui-component/U_simplegraph/m/index.vue';
	import Uvideo from '@/components/ui-component/U_video/m/index.vue';
	import Ubull from '@/components/ui-component/U_bull/m/index.vue';
	import Umonitor from '@/components/ui-component/U_monitor/m/index.vue';
	import Uland from '@/components/ui-component/U_land/m/index.vue';
	import Uadopt from '@/components/ui-component/U_adopt/m/index.vue';
	import Ugoods from '@/components/ui-component/U_goods/m/index.vue';
	import Ugoods2 from '@/components/ui-component/U_goods2/m/index.vue';
	import Uactivity from '@/components/ui-component/U_activity/m/index.vue';
	import Ucoupon from '@/components/ui-component/U_coupon/m/index.vue';
	import Uweather from '@/components/ui-component/U_weather/m/index.vue';
	import Upublic from '@/components/ui-component/U_public/m/index.vue';
	import Useckill from '@/components/ui-component/U_seckill/m/index.vue';
	export default {
		props: {
			// 组件KEY
			uikey: {
				type: String,
				required: true,
				default: 'U000001',
			},
			// 模版名
			template: {
				type: String,
				required: true,
				default: 'template1'
			},
			vdc: {
				type: Object
			}
		},

		components: {
			Unavbar,
			Ugoods2,
			Utitle,
			Uslideshow,
			Ubutton,
			Ublank,
			Uline,
			Urichtext,
			Ucube,
			Usimplegraph,
			Uvideo,
			Ubull,
			Umonitor,
			Uland,
			Uadopt,
			Ugoods,
			Uactivity,
			Ucoupon,
			Uweather,
			Upublic,
			Useckill,
			ErrorComponent
		},

		data() {
			return {

			};
		},

		computed: {
			// 当前环境, 1=装修页, 2=预览, 3=发布
			env() {
				return this.$store.state.page.env;
			},
			// 当前组件信息
			component() {
				return this.vdc;
			},
			// 功能数据
			datas() {
				// 如果有配置项的话
				if (this.component.is_loaded_config && this.component.hasOwnProperty('config')) {
					const datas = {};
					Object.keys(this.component.config.datas).map(key => {
						datas[key] = this.component.config.datas[key].value;
					});
					return datas;
				} else {
					return this.component.remote_data || {};
				}
			},
			// 样式数据
			styles() {
				// 如果有配置项的话
				if (this.component.is_loaded_config && this.component.hasOwnProperty('config')) {
					const styles = {};
					Object.keys(this.component.config.styles).map(key => {
						styles[key] = this.component.config.styles[key].value;
					});
					return styles;
				} else {
					return this.component.remote_style || {};
				}
			},

		},
		methods: {
			toBottom(type) {
				let that = this
				that.$refs.goodlist.toBottom(type)
			},
			init() {
				let that = this
				if (that.$refs.slideshow) {
					that.$refs.slideshow.init()
				}
			},
		},
	};
</script>

<style scoped>
	.custom-transition .lazy-component-enter {
		opacity: 0;
	}

	.custom-transition .lazy-component-enter-to {
		opacity: 1;
	}

	.custom-transition .lazy-component-enter-active {
		transition: all 0.5s;
	}

	.custom-transition .lazy-component-leave {
		opacity: 1;
	}

	.custom-transition .lazy-component-leave-to {
		opacity: 0;
	}

	.custom-transition .lazy-component-leave-active {
		transition: all 0.5s;
	}
</style>