deming/components/shop/recommend/pintuan.vue

<template>
    <view class="recommend">
        <view class="top">
            <text>今日拼团推荐</text>
            <text @click="toDetailsPage">点击查看更多></text>
        </view>
        <view class="connect">
            <view class="user">
                <view class="avatar">
					<image :src="info.member_avatar[0]"></image>
					<image :src="info.member_avatar[1]"></image>
				</view>
				<view class="num">{{ info.pintuan_limit_number }}人团</view>
            </view>
            <view class="info" @click="toDetailsPage">
                <text class="u-line-1">{{ info.groupbuy_name }}</text>
                <text class="u-line-2">{{ info.goods_name }}</text>
                <view>
                    <text>￥{{ info.groupbuy_price }}</text>
                    <text>￥{{ info.goods_price }}</text>
                </view>
            </view>
            <image class="img" :src="info.groupbuy_image1"></image>
        </view>
    </view>
</template>
<script>
export default {
	name:"recommend",
	data() {
		return {
			info: {}
		}
	},
	props: ['recommendData', 'type'],
	created() {
		this.info = this.recommendData;
		console.log(this.recommendData);
	},
	methods: {
		toDetailsPage() {
			this.$u.api.getPinTuanDetails({
				pintuan_id: this.recommendData.pintuan_id
			}).then(res => {
				if(res.errCode == 0) {
					const goods = {
						goods: res.data.data,
						type: 2,
					}
					this.$store.commit('setGoodsDetails', goods);
					this.$store.commit('setGoodsId', this.recommendData.pintuan_id);
					this.$u.route({
						url: 'pageB/sdetails/index',
					})
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.recommend{
    .top{
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >text:first-child{
            font-size: 30rpx;
            color: #333;
        }
        >text:last-child{
            font-size: 18rpx;
            color: #999;
        }
    }
    .connect{
        display: flex;
		align-items: center;
        .user {
			margin-right: 16px;
			.avatar {
				width: 96rpx;
				height: 64rpx;
				margin-bottom: 16rpx;
				position: relative;
				> image {
					position: absolute;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					&:first-child {
						left: 0;
						top: 0;
						z-index: 8;
						background-color: aqua;
					}
					&:last-child {
						left: 32rpx;
						top: 0;
						z-index: 9;
						background-color: antiquewhite;
					}
				}
			}
			.num {
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(253,211,96,1);
			}
		}
        .info{
			width: 340rpx;
            display: flex;
            flex-direction: column;
            >text:nth-child(1){
                font-size: 28rpx;
                color: #333;
            }
            >text:nth-child(2){
                margin-top: 17rpx;
                line-height: 36rpx;
                font-size: 24rpx;
                color: #666;
            }
            >view{
                margin-top: 24rpx;
                display: flex;
                align-items: flex-end;
                
                >text:first-child{
                    font-size: 27rpx;
                    color: #FF3131;
                }
                >text:last-child{
                    font-size: 24rpx;
                    color: #999;
                    margin-left: 33rpx;
					text-decoration: line-through;
                }
            }
        }
        .img{
            width: 213rpx;
            height: 160rpx;
            flex-shrink: 0;
            margin-left: 13rpx;
			background-color: antiquewhite;
        }
    }
}
</style>