teambuy-front/components/product/productItem.vue

<template>
	<view class="item" @click="$emit('click')">
		<!-- 商品图片 -->
		<view class="item-image">
			<!-- <image :src="item.image &&
			item.image.split(',')[0]" mode="aspectFill">
			</image> -->
			<image :src="item.image" mode="aspectFill" class="item-image-img" />
		</view>

		<!-- 商品信息 -->
		<view class="info">
			<!-- 商品标题 -->
			<view class="title">
				{{ item.title }}
			</view>

			<!-- 价格 -->
			<!-- <view class="price">
				<view class="money">
					￥<text>{{ getPriceByRole(item) }}</text>
					<text class="unit">/元每件</text>
				</view>
				<view class="price-imgs">
					<image v-if="userInfo.role == 1" :src="configList.vip_money_one" mode="aspectFill" class="price-img">
					</image>
					<image v-if="userInfo.role == 2" :src="configList.vip_money_two" mode="aspectFill" class="price-img">
					</image>
					<image v-if="userInfo.role == 3" :src="configList.vip_money_three" mode="aspectFill"
						class="price-img"></image>
				</view>
			</view> -->

			<!-- 价格区 -->
			<!-- <view class="price-section">
				<view class="price">
					<view class="money">
						￥<text>{{ item.price }}</text>
						<text class="unit">/元每件</text>
					</view>
					<view class="oldPrice">
						￥<text>{{ item.oldPrice }}</text>
						<text class="unit">/元</text>
					</view>
				</view>
				
				<view class="oldPrice">
					<view class="money">
						￥<text>{{ item.oldPrice }}</text>
						<text class="unit">/元每件</text>
					</view>
					<view class="price-imgs">
					</view>
				</view>
				
				<view class="member-price">
					<view class="price">
						<view class="money">
							￥<text>{{ item.silverPrice }}</text>
							<text class="unit">/元每件</text>
						</view>
						<view class="price-imgs">
							<image :src="configList.vip_money_one" mode="aspectFill" class="price-img">
							</image>
						</view>
					</view>
					
					<view class="price">
						<view class="money">
							￥<text>{{ item.goldPrice }}</text>
							<text class="unit">/元每件</text>
						</view>
						<view class="price-imgs">
							<image :src="configList.vip_money_two" mode="aspectFill"
								class="price-img"></image>
						</view>
					</view>
					
					<view class="price">
						<view class="money">
							￥<text>{{ item.diamondPrice }}</text>
							<text class="unit">/元每件</text>
						</view>
						<view class="price-imgs">
							<image :src="configList.vip_money_three" mode="aspectFill" class="price-img">
							</image>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 销量 -->
			<view class="sales-volume">
				<view class="sales-volume-imgbox">
					<image src="@/static/image/category/sales-volume-icon.png" mode="widthFix" class="sales-volume-img">
					</image>
				</view>

				<view class="sales-volume-number">
					已售出{{ item.sales }}单
				</view>
			</view>

			<!-- 价格 -->
			<view :style="{ color: '#FF2A2A'}">
				<text style="font-size: 18rpx;">￥</text><text style="font-size: 30rpx;">{{ item.price }}</text>
			</view>

			<!-- 购买按钮 -->
			<view class="" style="display: flex;justify-content: space-between;">
				<view @click.stop="purchase" class="buy-btn buy-order">
					立即下单
				</view>

				<view @click.stop="addCart(item)" class="buy-btn">
					<!-- <uv-badge type="error" max="9" :value="getProductCount(item.id)" absolute :offset="[-10, 1]" bg-color="#FF2A2A" /> -->
					加购物车
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		props: {
			item: {
				default: {}
			}
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters( 'cartNum' , ['getProductCount'] )
		},
		data() {
		},
		methods: {
			...mapMutations( 'cartNum' , ['incrementProduct'] ),
			// 购买商品(创建订单)
			purchase() {
				this.$emit('purchase')
			},
			// 加入购物车
			addCart(item){
				this.incrementProduct({ productId: item.id })
				uni.showLoading({
					title: '加载中...'
				})
				this.$api('addShopcar', {
					goodsId : item.id,
					num : 1,
				}, res => {
					uni.hideLoading()
					if(res.code == 200){
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			
			//根据角色获取对应价格
			getPriceByRole(item) {
				let priceFiledList = ['goldPrice','silverPrice','diamondPrice']
				let price = item[priceFiledList[this.userInfo.role - 1]]
				
				return price >= 0 ? price : item.price
			}
		},
	}
</script>

<style scoped lang="scss">
	.item {
		width: 92%;
		margin: 20rpx auto;
		padding: 20rpx 10rpx;
		align-items: center;
		display: flex;
		box-sizing: border-box;
		border-bottom: 1rpx solid #00000012;
		background: white;
		border-radius: 10rpx;
		// margin-bottom: 20rpx;
		// box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);

		// 商品图片
		.item-image {
			width: 200rpx;
			height: 200rpx;
			
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}
		}

		// 商品信息
		.info {
			// height: 220rpx;
			padding: 15rpx 0rpx 15rpx 15rpx;
			color: #555;
			width: calc(100% - 200rpx);
			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			gap: 4rpx;
			// 商品标题
			.title {
				font-size: 30rpx;
				font-weight: bold;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
				color: #333;
				margin-bottom: 5rpx;
			}
			.price-section {
				display: flex;
				flex-direction: column;
				gap: 6rpx;
			}

			// 价格
			.price {
				display: flex;
				align-items: center;
				color: #f40;
				font-size: 24rpx;
				align-items: flex-end;
				
				.money {
					font-size: 30rpx;
					font-weight: 600;

					.unit {
						font-size: 18rpx;
						font-weight: normal;
						margin-left: 2rpx;
					}
				}

				.price-imgs {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.price-img {
						width: 70rpx;
						height: 26rpx;
						margin-left: 8rpx;
					}
				}
			}
			.oldPrice{
				color: #999;
				font-size: 20rpx;
				text-decoration: line-through;
				margin-left: 8rpx;
			}
			.member-price {
				display: flex;
				flex-direction: column;
				gap: 4rpx;
				margin-top: 4rpx;
				padding-top: 6rpx;
				border-top: 1rpx dashed #eee;
				.money {
					font-size: 26rpx;

					.unit {
						font-size: 18rpx;
					}
				}

				.price-imgs {
					display: flex;
					flex-wrap: wrap;

					.price-img {
						width: 70rpx;
						height: 26rpx;
						margin-left: 8rpx;
					}
				}
			}

			// 销量
			.sales-volume {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 2rpx;

				.sales-volume-imgbox {
					width: 18rpx;

					.sales-volume-img {
						width: 100%;
					}
				}

				.sales-volume-number {
					color: #999;
					font-size: 24rpx;
					padding-left: 8rpx;
				}
			}

			// 购买按钮
			.buy-btn {
				background: $uni-color;
				color: white;
				display: inline-block;
				padding: 10rpx 24rpx;
				border-radius: 10rpx;
				width: fit-content;
				font-size: 23rpx;
				font-weight: 500;
				box-shadow: 0 2rpx 6rpx rgba(255,68,0,0.2);
				transition: all 0.3s;
				margin-top: 4rpx;
				position: relative;
			}

			.buy-order{
				background: inherit;
				border: 3rpx solid $uni-color;
				color: $uni-color;
			}
		}
	}
</style>