QianNiaoUser/components/GoodsItem.vue

<template>
	<view :class="[isList ? 'list-box' : 'list-box-two']" :style="{ display: isList ? 'block' : 'inline-block' }" @click="goPage(`/pagesT/product/product?id=${item.id}`)">
		<!-- 单列 -->
		<view class="goods_item_justify clearfix" v-if="isList">
			<view class="imgStyle float_left">
				<block v-if="item.isDistribution === 4">
					<view :style="{ height: item.minMemberPrice > 0 ? '206rpx' : '176rpx' }" v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0" class="sale-end">
						<text class="ibonfont ibonbuhuozhong"></text>
					</view>
				</block>
				<view v-if="item.brandName" class="brand-name primary-lg">{{ item.brandName }}</view>
				<image :style="{ height: item.minMemberPrice > 0 ? '206rpx' : '176rpx' }" mode="aspectFill" :src="item.images[0]"></image>
			</view>
			<view class="float_right goods-info">
				<view class="title ellipsis">{{ item.title }}</view>
				<view class="unit clearfix">
					<!-- <text class="float_right"
						v-if="item.showMinUnitPrice === 5 && item.minMinUnitPrice !== '0.00'">1斤={{ Number(item.minMinUnitPrice) }}元</text> -->
					已售
					<text v-if="baseSet.isSalesNum === 5" style="color: #333333;font-size: 24rpx;margin-left: 10rpx;">{{ item.realSalesNum }}</text>
				</view>
				<!-- <view class="unit" v-if="baseSet.isSalesNum === 5" style="font-size: 26rpx;color: #000000;">已售：{{ item.realSalesNum }}</view> -->
				<view class="price clearfix primary-color">
					<view class="float_left" v-if="!showGoodsPrice">
						<view>
							<text class="rmb-icon" v-if="item.showMinUnitPrice !== 5">¥</text>
							<view style="display: inline-block;" v-if="item.isEq === 4">
								<view style="display: inline-block;" v-if="item.showMinUnitPrice === 5">
									<view class="float_left rmb-icon" style="margin-top: 14rpx;">¥</view>
									<rich-text class="float_left" :nodes="$_utils.splitPrice(item.minMinUnitPrice)"></rich-text>
									<view class="float_left">-</view>
									<rich-text class="float_left" :nodes="$_utils.splitPrice(item.maxMinUnitPrice)"></rich-text>
									<view class="float_left" style="font-size: 20rpx;margin-top: 14rpx;">/斤</view>
								</view>
								<rich-text v-else :nodes="$_utils.splitPrice(item.minSalePrice)"></rich-text>
							</view>
							<view style="display: inline-block;" v-else>
								<view style="display: inline-block;" v-if="item.showMinUnitPrice === 5">
									<view class="float_left rmb-icon" style="margin-top: 14rpx;">¥</view>
									<rich-text class="float_left" :nodes="$_utils.splitPrice(item.maxMinUnitPrice)"></rich-text>
									<view class="float_left" style="font-size: 20rpx;margin-top: 14rpx;">/斤</view>
								</view>
								<rich-text v-else :nodes="$_utils.splitPrice(item.maxSalePrice)"></rich-text>
							</view>
							<!-- <text class="market-price">¥{{ item.maxMarketPrice }}</text> -->
						</view>
						<view class="vip-price clearfix" v-if="item.minMemberPrice > 0">
							<view class="price-text" v-if="item.isEq === 4">¥{{ item.minMemberPrice }}</view>
							<view class="price-text" v-else>¥{{ item.maxMemberPrice }}</view>
							<view class="price-bs">VIP</view>
						</view>
					</view>
					<view class="float_left showGoodsPrice" v-else>{{ showGoodsPrice }}</view>
					<!-- <view class="float_right" @click.stop="addCart"><text
							class="ibonfont ibonxinzeng1 cart-icon p-background-img"></text></view> -->
				</view>
				<view class="addCart-btn p-background-img" @click.stop="addCart">加入购物车</view>
			</view>
		</view>
		<!-- 两列 -->
		<view class="goods_item_align" v-else>
			<view class="img_style">
				<block v-if="item.isDistribution === 4">
					<view class="sale-end" v-if="!(item.inventorTotal - 0) || item.inventorTotal - 0 <= 0"><text class="ibonfont ibonbuhuozhong"></text></view>
				</block>
				<view v-if="item.brandName" class="brand-name primary-btn">{{ item.brandName }}</view>
				<image mode="aspectFill" :src="item.images[0]"></image>
			</view>
			<view class="goods-info">
				<view class="title_align ellipsis">{{ item.title }}</view>
				<!-- <view class="unit_align">{{ item.describe }}</view> -->
				<view class="price_align clearfix">
					<view class="float_left">
						<view class="now-price" v-if="!showGoodsPrice">
							<text class="rmb-icon">¥</text>
							<view style="display: inline-block;" v-if="item.isEq === 4"><rich-text :nodes="$_utils.splitPrice(item.minSalePrice)"></rich-text></view>
							<view style="display: inline-block;" v-else><rich-text :nodes="$_utils.splitPrice(item.maxSalePrice)"></rich-text></view>
							<text class="market-price">¥{{ item.maxMarketPrice }}</text>
							<view class="vip-price clearfix" v-if="item.minMemberPrice > 0">
								<view class="price-text" v-if="item.isEq === 4">¥{{ item.minMemberPrice }}</view>
								<view class="price-text" v-else>¥{{ item.maxMemberPrice }}</view>
								<view class="price-bs">vip</view>
							</view>
						</view>
						<view class="now-price showGoodsPrice" v-else>
							<text>{{ showGoodsPrice }}</text>
						</view>
					</view>
					<view class="k-add-btn" @click.stop="addCart"><text class="ibonfont ibonxinzeng1 cart-icon p-background-img"></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tip_show: false
		};
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		baseSet() {
			return this.$store.state.baseSet;
		},
		showGoodsPrice() {
			if (this.baseSet.goodsPrice === 5 && this.$store.state.hasLogin) {
				return '';
			} else if (!this.$store.state.hasLogin && this.baseSet.goodsPrice === 4) {
				return '请登录';
			} else if (this.$store.state.userStatus.enableStatus === 4 && this.baseSet.goodsPrice === 4) {
				return '已禁用';
			} else if (this.$store.state.userStatus.status !== 2 && this.baseSet.goodsPrice === 4) {
				if (this.$store.state.userStatus.status === 0) {
					return '待审核';
				} else if (this.$store.state.userStatus.status === 1) {
					return '审核中';
				} else if (this.$store.state.userStatus.status === 3) {
					return '已驳回';
				}
			} else {
				return '';
			}
		}
	},
	props: {
		isList: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {
				return {
					images: ['https://cdn.uviewui.com/uview/example/fade.jpg'],
					title: '商品名称商品名称商品名称商品名称商品名称商品名称',
					describe: 'describedescribedescribedescribe',
					id: 1
				};
			}
		},
		index: {
			type: [String, Number],
			default: 0
		}
	},
	methods: {
		addCart(skuId) {
			this.$emit('addCart');
		}
	}
};
</script>

<style lang="scss">
.list-box-two {
	padding: 0 10rpx;
}

.goods_item_justify {
	background-color: #ffffff;
	padding: 24upx;
	width: 100%;
	border-radius: 12upx;

	.imgStyle {
		position: relative;

		.sale-end {
			position: absolute;
			height: 176upx;
			width: 176upx;
			border-radius: 10upx;
			display: block;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 8;
			line-height: 160rpx;
			background-color: rgba($color: #000000, $alpha: 0.3);

			.ibonfont {
				font-size: 120rpx;
				color: #ffffff;
			}
		}

		image {
			height: 176upx;
			width: 176upx;
			border-radius: 10upx;
			display: block;
		}

		.brand-name {
			position: absolute;
			z-index: 9;
			top: -12rpx;
			left: -12rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
			height: 32rpx;
			color: #ffffff;
			border-radius: 8rpx;
			font-size: 20rpx;
		}
	}

	.goods-info {
		// width: 476upx;
		width: calc(100% - 188rpx);
		position: relative;
		.title {
			font-size: 28upx;
			width: 100%;
			height: 80upx;
			line-height: 40upx;
			font-weight: 500;
			color: #111111;
		}

		.unit {
			font-size: 20upx;
			font-family: DIN-Medium;
			color: #9d9d9d;
			width: 100%;
			height: 28upx;
			line-height: 28upx;
			margin-top: 8rpx;
			margin-bottom: 12rpx;
		}

		.price {
			color: $price-color;
			font-size: 32upx;
			font-weight: 500;
			font-family: DIN-Medium;

			.rmb-icon {
				font-size: 20upx;
				font-weight: 400;
			}

			.float_right {
				.cart-icon {
					font-size: 40rpx;
					background-image: -webkit-linear-gradient(45deg, #fe923e 0%, #ff3724 100%);
					-webkit-background-clip: text;
					color: transparent;
					display: block;
				}
			}

			.market-price {
				font-family: DINPro-Regular;
				color: #d8d8d8;
				text-decoration: line-through;
				font-size: 24upx;
				margin-left: 20upx;
				font-weight: 400;
			}
		}
	}
}

.vip-price {
	// margin-left: 20upx;
	margin-top: 6upx;
	line-height: 32rpx;
	height: 32rpx;
	border-radius: 4rpx;
	overflow: hidden;
	font-family: DINPro-Regular;

	.price-text {
		min-width: 80rpx;
		text-align: center;
		float: left;
		vertical-align: middle;
		font-size: 20rpx;
		color: #ffdfa2;
		background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
		padding: 0 8rpx;
	}

	.price-bs {
		text-align: center;
		float: left;
		vertical-align: middle;
		width: 32rpx;
		background-color: #ffdfa2;
		font-size: 16rpx;
		color: #2c7564;
		font-family: DIN-Medium;
	}
}
.addCart-btn {
	width: 198rpx;
	height: 60rpx;
	background: linear-gradient(90deg, #fe923e 0%, #ff3724 100%);
	border-radius: 30rpx;
	color: #ffffff;
	line-height: 60rpx;
	font-size: 28rpx;
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
}

.goods_item_align {
	width: 350upx;
	margin-top: 12upx;
	background-color: #ffffff;
	border-radius: 10upx;
	overflow: hidden;

	.img_style {
		padding-top: 24rpx;
		position: relative;

		.sale-end {
			position: absolute;
			height: 260upx;
			width: 260upx;
			border-radius: 10upx;
			display: block;
			left: 50%;
			transform: translate(-50%, -50%);
			top: calc(50% + 12rpx);
			text-align: center;
			line-height: 260rpx;
			background-color: rgba($color: #000000, $alpha: 0.3);

			.ibonfont {
				font-size: 120rpx;
				color: #ffffff;
			}
		}

		image {
			width: 260rpx;
			height: 260rpx;
			display: block;
			margin: 0 auto;
			border-radius: 8rpx;
		}

		.brand-name {
			position: absolute;
			top: 12rpx;
			left: 12rpx;
			padding: 0 10rpx;
			line-height: 32rpx;
			height: 32rpx;
			color: #ffffff;
			border-radius: 8rpx;
			font-size: 20rpx;
			z-index: 9;
		}
	}

	.goods-info {
		padding: 20upx;

		.title_align {
			font-size: 28upx;
			font-weight: 500;
			width: 100%;
			height: 72upx;
			line-height: 36upx;
		}

		.unit_align {
			font-size: 24upx;
			height: 32upx;
			line-height: 32upx;
			color: #9d9d9d;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 8upx 0;
		}

		.price_align {
			color: $price-color;
			font-size: 28upx;
			position: relative;

			.k-add-btn {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);

				.cart-icon {
					font-size: 40rpx;
					background-image: -webkit-linear-gradient(45deg, #fe923e 0%, #ff3724 100%);
					-webkit-background-clip: text;
					color: transparent;
					display: block;
				}
			}

			.now-price {
				display: inline-block;
				font-weight: 500;
				font-size: 32upx;
				font-family: DIN-Medium;

				.rmb-icon {
					font-size: 24upx;
					font-weight: 400;
				}
			}

			.market-price {
				font-size: 24rpx;
				color: #d8d8d8;
				font-family: DINPro-Regular;
				text-decoration: line-through;
				margin-left: 20rpx;
				font-weight: 400;
			}

			.cart-icon {
				font-size: 40rpx;
				background-image: -webkit-linear-gradient(45deg, #fe923e 0%, #ff3724 100%);
				-webkit-background-clip: text;
				color: transparent;
				display: inline-block;
			}
		}
	}
}
</style>