yijianbao_user_uniapp/components/medicineItem.vue

<template>
	<view class="medicine-item" @click="showProduct">
		<view class="x-bc" style="margin-bottom: 16rpx;">
			<view class="pro-name ellipsis" style="white-space: normal;">{{ item.productName || '' }}</view>
			<view class="otctxt" v-show="item.productType">{{$getDictLabelName("storeProductType",item.productType)}}</view>
		</view>
		<view class="x-f">
			<view class="medicine">
				<image :src="item.image" mode="aspectFill"></image>
				<!-- {{$getDictLabelName("storeProductType",item.productType)}} -->
				<!-- <view class="otc">处方药</view> -->
				<!-- <image class="otc" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/blue_lable_otc.svg" mode="aspectFill"></image> -->
			</view>
			<view class="medicine-r">
				<view class="desc ellipsis">包装规格：{{ item.unitName || '--' }}</view>
				<view class="desc ellipsis">批准文号：{{ item.batchNumber || '--' }}</view>
				<view class="desc ellipsis">生产厂家：{{ item.mah || '--' }}</view>
				<!-- <view class="desc"><text style="color: #2583EB;margin: 0 10rpx;">{{item.storecount||0}}</text> 商家销售 </view> -->
				<view class="price-box x-bc">
					<view>
						<text class="price-box-unit">￥</text>
						<text class="price-box-integer">{{splitPrice(item.price || 0).intPart}}</text>
						<text class="price-box-decimal">.{{splitPrice(item.price || 0).decPart}}</text>
						<!-- <text class="price-box-text">/日</text> -->
						<!-- <text class="old" v-show="item.price!=item.otPrice&&item.otPrice!==null&&item.otPrice!==undefined">¥{{item.otPrice.toFixed(2)}}</text> -->
					</view>
					<view class="desc"><text style="color: #2583EB;margin: 0 10rpx;">{{item.storecount||0}}</text> 商家销售 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		data() {
			return {
				
			}
		},
		methods: {
			splitPrice(num) {
			  const [intPart = '0', decPart = '00'] = String(num||0).split('.');
			  return { intPart, decPart: decPart.padEnd(2, '0').slice(0, 2) };
			},
			showProduct() {
				uni.navigateTo({
					url: '/pages_shopping/productDetails?productId=' + this.item.productId
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.otctxt {
		background-color: #2BC7B9;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 4rpx 14rpx;
		border-radius: 6rpx;
	}
	.pro-name {
		flex: 1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #191A1B;
		flex: 1;
		overflow: hidden;
	}
	.old{
		margin-left: 14rpx;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: line-through;
		color: #BBBBBB;
		line-height: 1.1;
	}
	.price-box {
		font-family: Roboto, Roboto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FF5C03;
		margin-top: 22rpx;
	
		&-unit {
			font-weight: 600;
			font-size: 26rpx;
		}
	
		&-decimal {
			font-weight: 600;
			font-size: 26rpx;
		}
	
		&-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
		}
	}
	.medicine {
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		position: relative;
		margin-right: 24rpx;
		.otc {
			position: absolute;
			top: 0;
			left: 0;
			width: 96rpx;
			height: 40rpx;
			border-radius: 0;
		}
	
		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
	
		&-r {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #191A1B;
			flex: 1;
			overflow: hidden;
		}
	
		&-item {
			align-items: flex-start !important;
			padding: 20rpx 0;
		}
	}
	
	.desc {
		display: block;
		margin-top: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #939599;
	}
</style>