JM-MiniApp/components/goodsInfo.vue

<script setup>
	import { ref} from "vue"
	// type：category-分类 ； list：内容列表
	const props = defineProps(['type','info',"noPrice"]);
</script>
<template>
	<view class="goodsInfoBox">
		<!-- 展示方式1 上下结构-->
		<view class="showtype1 " v-if="type==1">
			<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
			<image style="width: 100%;border-radius: 5px;" :style="{ height: info && info.goods_image?'340rpx':'340rpx'}" :src="info?.goods_image" mode="aspectFill"></image>
			<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
			<view class="g-desc">
				{{info?.desc}}
			</view>
			<view class="g-buy-box">
				<view class="g-price-box">
					<view class="g-price">￥{{info?.sell_price}}</view>
					<view class="g-price-o" v-if="info?.market_price">
						￥{{info?.market_price}}
					</view>
				</view>
				<slot name="btn"></slot>
			</view>
		</view>
		<!-- 展示方式2 左右结构-->
		<view class="showtype2 " v-else>
			<view class="gcb-list-card-img-box">
				<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
				<!-- <image :src="info?.goods_image" style="width: 100%;" :style="{ height: info && info.goods_image?'':'100rpx'}" mode="widthFix"></image> -->
				<image :src="info?.goods_image" style="width: 100%;"  mode="widthFix"></image>
			</view>
			<view class="gcb-list-card-info-box">
				<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
				<view class="g-desc">
					{{info?.desc}}
				</view>
				<view class="g-buy-box">
					<view class="g-price-box" v-if="!noPrice">
						<view class="g-price">￥{{info?.sell_price}}</view>
						<view class="g-price-o" v-if="info?.market_price">
							￥{{info?.market_price}}
						</view>
					</view>
					<slot name="btn"></slot>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.gcb-list-card-info-box{
		width: 70%;
	}
	.showtype2{
		display: flex;
		.gcb-list-card-img-box{
			// width: 30%;
			// padding: 20rpx;
			max-height: 200rpx;
			max-width: 200rpx;
			width: 30%;
			border: 1px solid #ececec;
			overflow: hidden;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			image{
				max-height: 200rpx;
				width: 150rpx;
				height: 150rpx;
			}
		}
	}
	.g-buy-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.g-cart{
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
		.g-price-box{
			color: #FD5B4E;
			display: flex;
			align-items: flex-end;
			.g-price{
				font-size: 36rpx;
				margin-right: 10rpx;
				font-weight: 600;
			}
			.g-price-o{
				color: gray;
				font-size: 28rpx;
				text-decoration: line-through;
			}
		}
	}
	
	.g-desc{
		color: gray;
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	.g-show-name{
		margin-top: 20rpx;
		font-weight: bolder;
	}
	.gcb-title{
		background: linear-gradient(0deg, #82c8ea, #abdef4);
		color: white;
		padding: 16rpx 0;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}
	.gcb-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
		.gcb-list-card{
			// padding: 20rpx;
			width: 48%;
			margin: 20rpx 0;
		}
	}
	.goods-card-box{
		background: white;
		border: 2rpx solid #82c8ea;
		border-radius: 20rpx;
		overflow: hidden;
		.category-box{
			text-align: center;
		}
	}
</style>