hwnc/components/ui-component/component-unit/image_goods/index.vue

<template>
	<view class="ui-unit-image-goods">
		<u--image mode="aspectFit" :src="local_src"  width="355rpx" height="340rpx" :lazy-load="true" :fade="true"
			duration="450">
			<template v-slot:loading>
				<u-loading-icon color="#f7f7f7"></u-loading-icon>
			</template>
		</u--image>
	</view>
</template>

<script>
	export default {
		name: 'unit-goods-image',
		props: {
			// 商品图片
			src: {
				type: String,
				default: ''
			},
			default_img: {
				type: String
			},
			// 商品SKU，用于埋点，曝光
			sku: {
				type: String,
				default: ''
			},
			// 当前商品曝光顺序
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			const lazyload = this.$store.state.page.env != 1;
			let siteinfo = getApp().globalData.siteinfo;
			const img = siteinfo.root_img + '/static/app/imgs/default-goods.png';
			return {
				local_src: this.src || img, // 默认图
				lazyload // 是否开启懒加载
			};
		},
		computed: {
			// 埋点参数构造
			analytics() {
				const params = {
					pm: `mp`,
					p: `p-${this.$root.pageId}`,
					bv: {
						// cpID: `${this.$root.pageInstanceId}`,
						// cpnum: `${this.$root.compKey}`,
						// cplocation: `${this.$root.uiIndex}`,
						sku: `${this.sku}`,
						// cporder: `${this.$root.layoutIndex}`,
						rank: `${this.index}`
					}
				};
				return JSON.stringify(params);
			}
		}
	};
</script>

<style lang="less" scoped>
	.ui-unit-image-goods {
		display: flex;
		align-items: center;
		align-content: center;

		img {
			width: 100%;
		}
	}
</style>