<template>
	<view>
		<div class="image-container" @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
			<van-image  fit="cover"  lazy-load :src="item.mainImg" height="45vw"
					loading-icon="https://img.edsmall.com/ROOT/ETao/fenxiao/h5/default1.png" icon-size="30vw" />
		</div>
		<view style="padding: 15rpx;background: #ffffff" @click="goto(`/pages/good/detail?skuId=${item.skuId}&spuId=${item.spuId}`)">
			<text class="text-s ellipsis line_over2" style="text-align: left;background: #ffffff;min-height: 60rpx;overflow: hidden">
				{{ item.title }}
			</text>
		</view>
		<view style="display: flex;background: #ffffff;padding: 15rpx;align-items: center" class="text01">
			<view  class="text-orange text-ss">￥
				<text class="text-bold text-l">{{ item.salePrice }}</text>
			</view>
			<view  class="text-ss" style="margin-left: 16rpx">
				<text class="text-gray text-ss line-through">￥{{ item.productPrice }}</text>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    props:{
      item:{
        type:Object,
        default: ()=>{ return {} }
      },
    },
    methods:{
      goto(url) {
        url && uni.navigateTo({ url })
      }
    }
  }
</script>

<style lang="scss" scoped>
	.text01{
		border-bottom-left-radius: 10px; /* 设置圆角的大小 */
		border-bottom-right-radius: 10px; /* 设置圆角的大小 */
	}
	.image-container {
		background-color: #ffffff;
		border-top-left-radius: 10px; /* 设置圆角的大小 */
		border-top-right-radius: 10px; /* 设置圆角的大小 */
		overflow: hidden;
	}

	.image-container .van-image {
		width: 100%;
		height: 100%;
		border-radius: inherit; /* 继承外层容器的圆角 */
	}
</style>