deming/components/shop/group/item.vue

<template>
    <view class="item" @click="toDetailsPage">
        <image class="head" :src="info.pintuan_image" mode="widthFix"></image>
        <text class="title u-line-1">{{ info.pintuan_goods_name }}</text>
        <view class="price">
            <view class="value">￥{{ info.pintuan_goods_price }}</view>
           	<view class="btn">立即拼团</view>
        </view>
    </view>
</template>
<script>
export default {
	name:"item",
	props: {
		info: Object
	},
	methods: {
		toDetailsPage() {
			// this.$u.api.getPinTuanDetails({
			// 	pintuan_id: this.info.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.info.pintuan_id);
			// 		this.$u.route({
			// 			url: 'pageB/sdetails/index',
			// 		})
			// 	}
			// })
			this.$u.route({
				url: 'pageB/sdetails/index',
				params: {
					// id: this.info.pintuan_id,
					id: this.info.pintuan_goods_id,
					// type: 2,
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.item{
    width: 220rpx;
    height: 100%;
	// overflow: hidden;
    .head{
        width: 100%;
        height: 180rpx;
        border-radius: 6rpx;
    }
    .title{
		display: inline-block;
		width: 100%;
        font-size: 26rpx;
        color: #333;
        margin-top: 10rpx;
    }
    .price{
        display: flex;
        align-items: center;
		// align-content: flex-end;
        justify-content: space-between;
        margin-top: 16rpx;
        .value {
            font-size: 26rpx;
            color: #FF3131;
			// margin-bottom: 12rpx;
        }
        .btn {
			font-size: 22rpx;
			height: 22rpx;
            color: #FDD360;
			text-align: end;
			// margin-top:8rpx;
        }
    }
}
</style>