aluminium-trading-uniapp-240925/components/user/productList.vue

<template>
	<view class="list">
		<view class="item" v-for="(item, index) in list" @click="immediatePurchase(item)" :key="index">
			<image class="image" :src="item.pic" mode="aspectFill"></image>
			<view class="info">
				<view class="title">
					{{ $t('other.aluminumProducts') }}
				</view>
				<view class="price">
					<text>{{item.price}}</text>
					{{ $t('components.unitPrice2') }}
				</view>
				<view class="num">
					<!-- 最多批发*快速下单 -->
					库存数量：{{ item.num }}
				</view>
			</view>
			<view class="btn">
				<view class="change">
					{{ $t('components.immediatePurchase') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "productList",
		props: {
			list: {
				type: Array,
				default: false
			},
		},
		data() {
			return {};
		},
		methods: {
			// 立即购买
			immediatePurchase(item) {
				console.log("====")
				// var itemStr = encodeURIComponent(JSON.stringify(item));
				this.$store.state.productDetail = item
				uni.navigateTo({
					url: `/pages_order/tradingPlatform/nowOrder`,
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.item {
			position: relative;
			width: 300rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;

			&:nth-child(odd) {
				margin-right: 20rpx;
			}

			.image {
				width: 300rpx;
				height: 250rpx;
				border-radius: 20rpx;
			}

			.info {
				font-size: 26rpx;

				.title {
					font-size: 30rpx;
					color: #000;
				}

				.price {
					color: #D03F25;
					margin-top: 6rpx;

					text {
						font-size: 34rpx;
						font-weight: 900;
					}
				}

				.favorable {
					display: flex;
					background-image: url(/static/image/product/favorable.png);
					background-size: 100% 100%;
					width: fit-content;
					padding: 5rpx 10rpx;
					font-size: 18rpx;
					margin-top: 6rpx;

					.p {
						color: #fff;
						margin-left: 10rpx;
					}
				}

				.num {
					margin-top: 6rpx;
					font-size: 22rpx;
					color: #888;
				}
			}

			.btn {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				padding: 10rpx;
				border-radius: 50%;
				//background-color: $uni-color;

				.change {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 40rpx;
					color: white;
					font-size: 22rpx;
					//margin: 20rpx 10rpx 0 0;
					padding: 10rpx 10rpx;
					background: #2b467a;
					border: 1px solid #757986;
					//margin-top: 20rpx;
					//border-radius: 40rpx;
				}
			}
		}
	}
</style>