ykcUniapp/components/newlist/nowList.vue

<template>
	<view class="other">
		<view class="other-1">大家还在拼</view>
		
		<view class="preferred_item" v-for="item in recommendedlist" @click.stop="ToKaiTuan(item)">
			<view class="flex_item" style="overflow: hidden;">
				<view class="tlist-img">
					<view class="leftImgIcon">AA团</view>
					<!-- <view class="leftImgIcon" v-if="sid == 129">达人团</view> -->
					<view class="img"><image :src="item.image" mode="scaleToFill"></image></view>
				</view>
				<view class="tlist-img " v-for="imgItem in item.images">
					<view class="img"><image :src="imgItem" mode="scaleToFill"></image></view>
				</view>
			</view>
			<view class="goods_name">
				<view class="goods_title flex_item">
					<view class="text">{{ item.min_people }}人团</view>
					<view class="title">{{ item.title }}</view>
				</view>
				<view class="goods-height">
					<!-- <view class="goods_num clamp">{{ item.info }}</view> -->
					<view class="flex goods-peplo">
						<view class="goods-tip flex_item">
							<view class="peplo">库存剩{{ item.percent | parseIntTo }}%</view>
							<view class="make">{{ item.mark }}</view>
						</view>
						<view class="right flex_item">
							<image src="/static/icon/hot.png" mode="aspectFill"></image>
							<text>已拼{{ item.sales }}份</text>
						</view>
					</view>
				</view>
				<view class="price flex">
					<view class="price_list">
						<view class="price-red">
							<text>单人仅付:</text>
							<text class="moneyIcon">￥</text>
							<text class="money">{{ item.price }}</text>
							<text class="moneyType">/{{ item.unit_name }}</text>
							<!-- <text class="outMoney">￥{{ item.product_price }}</text> -->
						</view>
					</view>
					<view class="img position-relative" @click.stop="ToKaiTuan(item)">去开团</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		recommendedlist: {
			type: Array,
			default: function() {
				return {
				};
			}
		}
	},
	data() {
		return {};
	},
	filters: {
		parseIntTo(percent) {
			percent = +percent * 100;
			if (percent % 1 === 0) {
				return percent;
			} else {
				percent = percent.toFixed(1);
				return percent;
			}
		}
	},
	methods: {
		// 去开团
		ToKaiTuan(item) {
			console.log(8754847)
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/productGroup?id=' + id
			});
		},
	}
};
</script>

<style lang="scss">
.other{
		.other-1{
			font-size:27rpx;
			color:#333333;
			line-height: 55rpx;
		}
		
		.preferred_item {
			width: 100%;
			height: 100%;
			padding: 25rpx 25rpx;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			margin-bottom: 15rpx;
			.tlist-img {
				width: 225rpx;
				position: relative;
				margin-right: 15rpx;
				.leftImgIcon {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 22rpx;
					font-family: PingFangSC;
					color: rgba(148, 71, 34, 1);
					background: rgba(254, 242, 111, 1);
					z-index: 99;
					border-radius: 5rpx;
					padding: 5rpx 10rpx;
				}
				.img {
					width: 210rpx;
					height: 210rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.stock {
					margin-top: 13rpx;
					font-size: 26rpx;
					background: #fff1ee;
					width: 100%;
					color: #fb4912;
					padding: 6rpx 0;
					border-radius: 5rpx;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 0;
					bottom: 0;
					.img {
						width: 20rpx;
						height: 20rpx;
						flex-shrink: 0;
					}
					.stock-num {
						padding-left: 7rpx;
						font-size: 22rpx;
						border-radius: 5rpx;
						height: 32rpx;
						line-height: 32rpx;
					}
				}
			}
			.goods_name {
				.goods_title {
					padding-top: 15rpx;
					color:rgba(0,0,0,1);
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
					font-size:32rpx;
					color: $font-color-dark;
					// height: 70rpx;
					align-items: baseline;
					.text{
						border-radius: 8rpx;
						border: 2rpx solid #FF1A27;
						color: #FF1A27;
						padding:0rpx 10rpx;
						font-size: 26rpx !important;
						margin-right: 15rpx;
						
					}
					.title {
						width: 80%;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.goods-height {
					min-height: 60rpx;
				}
				.goods_num {
					font-size: 26rpx;
					color: #8f8f97;
					padding-bottom: 15rpx;
				}
				.goods-peplo {
					height: 45rpx;
					margin-top: 15rpx;
					.right {
						color:#8e8e8e;
						font-size: 24rpx;
						width:195rpx;
						image {
							width: 30rpx;
							height: 33rpx;
							margin-right: 15rpx;
						}
					}
					.goods-tip {
						.peplo {
							background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
							padding: 5rpx 10rpx;
							color: #ffffff;
							border-top-left-radius:8rpx;
							border-bottom-left-radius: 8rpx;
						}
						.make {
							background-color: #fef26f;
							color: #944722;
							border-top-right-radius: 8rpx;
							border-bottom-right-radius: 8rpx;
						}
						.make,
						.peplo {
							font-size: $font-sm;
							padding: 5rpx 10rpx;
						}
					}
				}
				.price {
					font-size: 28rpx;
					position: relative;
					padding-top: 15rpx;
					.price_list {
						.price-red {
							font-size: 30rpx !important;
							font-family: Source Han Sans CN;
							color: rgba(253, 27, 42, 1);
							font-size: $font-base;
							font-weight: bold;
							.moneyIcon {
								font-weight: normal !important; 
							}
							.money {
								font-size: 58rpx;
							}
							.moneyType {
								font-weight: 400;
							}
							.outMoney {
								font-weight: 400;
								text-decoration: line-through;
								color: rgba(142, 142, 142, 1);
							}
						}
						.price-green {
							color: #2dbd59;
							font-size: 26rpx !important;
							font-weight: bold;
							text {
								background: linear-gradient(45deg, rgba(21, 197, 52, 1), rgba(21, 197, 52, 1));
								color: #ffffff;
								padding: 0rpx 10rpx;
								border-radius: 7rpx;
								font-size: 24rpx !important;
								margin-left: 15rpx;
							}
						}
					}
					.img {
						width: 265rpx;
						height: 74rpx;
						line-height: 74rpx;
						// background:linear-gradient(14deg,rgba(255,116,37,1),rgba(255,30,41,1));
						background: linear-gradient(270deg, rgba(181,116,242, 1) 0%, rgba(139,86,254, 1) 100%);
						border-radius: 99rpx;
						color: #ffffff;
						font-size: $font-lg;
						text-align: center;
					}
					.img1{
						background-color: #D3D3D3;
						width: 265rpx;
						height: 74rpx;
						line-height: 74rpx;
						border-radius: 99rpx;
						color: #ffffff;
						font-size: $font-lg;
						text-align: center;
					}
					.tomorrow {
						background: #29a66e;
						color: #ffffff;
						border-radius: 25rpx;
						padding: 10rpx 25rpx;
					}
				}
			}
		}
		
		
		.other-2{
			width: 100%;
			background:#ffffff;
			padding: 10rpx 15rpx ;
			border-radius: 20rpx;
			.content-row{
				padding: 10rpx 0;
				.row-1{
					width: 210rpx;
					position: relative;
					margin-right: 20rpx;
					text-align: center;
					.row-1-1{
						text-align: center;
						height:40rpx;
						background:#fff1ee;
						border-radius:6rpx;
						font-size:22rpx;
						font-weight:500;
						color:#fb4912;
						line-height:40rpx;
						image{
							width: 23rpx;
							height: 23rpx;
							margin-right: 5rpx;
						}
					}
					.img1{
						width:170rpx;
						height:170rpx;
						border-radius:10rpx;
					}
					.img2{
						position: absolute;
						top: 0;
						left: 16rpx;
						width:80rpx;
						height:32rpx;
						border-radius:5px;
					}
				}
				.row-2{
					padding: 20rpx 0 20rpx 0;
					width:calc(100% - 210rpx);
					position: relative;
					
					border-bottom: 1px solid #EAEAEA;
					.word-1{
						font-size:32rpx;
						font-weight:bold;
						color:#141821;
						margin-left: 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.word-2{
						margin-top: 10rpx;
						font-size:24rpx;
						color:#979797;
					}
					.word-3{
						margin-top: 10rpx;
						position: relative;
						font-size:20rpx;
						color:#ffffff;
						image{
							width: 235rpx;
							height: 50rpx;
						}
						.word-3-1{
							position: absolute;
							top:8px;
							left:2px;
							width: 230rpx;
							text-align: center;
							.word-3-1-1{
								display: inline-block;
								color:#FD1B2A;
								width: 50%;
							}
							
						}
					}
					.word-4{
						margin-top: 15rpx;
						font-size:23rpx;
						color:#fd1b2a;
						margin-left: 10rpx;
						text{
							font-size:23rpx;
							font-weight:bold;
						}
						.word-4-1{
							font-size:36rpx;
						}
					}
					.word-5{
						margin-top: 15rpx;
						font-size:21rpx;
						color:#868686;
					}
					.button{
						width:145rpx;
						height:60rpx;
						background:linear-gradient(14deg,#ff7425,#ff1e29);
						border-radius:30rpx;
						font-size:27rpx;
						font-weight:bold;
						color:#ffffff;
						line-height:60rpx;
						text-align: center;
						
						position: absolute;
						bottom: 20rpx;
						right: 0;
					}
				}
			}
		}
	}
</style>