yicangzongtai_app_240321/template/components/Goods/index.vue

<template>
	<view class="" @click.stop="openGoodsInfo(GoodsInfo)">
		<!-- mode="aspectFit" -->
		<image ref="imgRef" :src="GoodsInfo.image" :style="{ height: imgHeight + 'px' }" @load="onImgLoad"
			@error="onErrorC"></image>
		<view class="" :style="$getStyle(styles.goodsTitle)">
			{{GoodsInfo.title}}
		</view>
		<view class="goods-price" :style="$getStyle(styles.goodsPrice)">
			<view class="" :style="$getStyle(styles.price)">
				<text>￥</text>
				<text>{{GoodsInfo.price}}</text>
			</view>
			<view class="original-price" :style="$getStyle(styles.originalPrice)">
				<text>￥</text>
				<text>{{GoodsInfo.originalPrice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Goods',
		props: {
			GoodsInfo: {
				type: Object,
				default: {
					image: ''
				}
			},
			// dataVal: {
			// 	type: Object | String,
			// 	default: null
			// },
			// attrs: {
			// 	type: Object | String,
			// 	default: null
			// },
			styles: {
				type: Object | String,
				default: null
			},
		},
		data() {
			return {
				imgHeight: 100,
			}
		},
		methods: {
			onImgLoad(e) {
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const {
					width,
					height
				} = e.mp.detail;
				const imgWidth = this.$refs.imgRef.$el.offsetWidth
				// console.log('onImgLoad = ', width,
				// 	height , this.$refs.imgRef.$el.offsetWidth)
				// this.imgHeight = height
				this.imgHeight = (height / width) * imgWidth; // 高度 = 原始高度 / 原始宽度 * imgWidth
			},
			onErrorC(e) {
				console.log('onErrorC = ', e)
				this.imgHeight = '100'
			},
			openGoodsInfo(GoodsInfo){
				console.log('GoodsInfo = ' , GoodsInfo)
				
			}
		}


	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: auto;
	}
	.goods-price{
		display: flex;
		align-items: flex-end;
		.original-price{
			text-decoration: line-through;
			padding-left: 6rpx;
		}
	}
</style>