deming/components/shop/seckill/item.vue

<template>
    <view class="item" @click="spikeGoods">
        <image class="head" :src="item.groupbuy_image1"></image>
        <text class="title u-line-2">{{ item.goods_name }}</text>
        <view class="price">
            <text>￥{{ item.groupbuy_price }}</text>
            <text class="origin">￥{{ item.goods_price }}</text>
        </view>
        <view class="info">
            <text>剩余{{ item.inventory | formatValue }}件</text>
            <text>立即购买</text>
        </view>
    </view>
</template>
<script>
export default {
	name:"item",
	props: ['item'],
	filters: {
		formatValue(value) {
			let temp = Number(value);
			if(temp > 999) temp = '999+';
			return temp;
		}
	},
	methods: {
		spikeGoods() {
			// console.log(this.item.groupbuy_id);
			// this.$u.api.getSpikeInfo({
			// 	groupbuy_id: this.item.groupbuy_id
			// }).then(res => {
			// 	if(res.errCode == 0) {
			// 		const goods = {
			// 			goods: res.data.goodsInfo,
			// 			type: 3, // 商品详情 1普通 2拼团 3秒杀 4优惠券
			// 		}
			// 		this.$store.commit('setGoodsDetails', goods);
			// 		this.$store.commit('setGroupbuyInfo', res.data.groupbuyInfo);
			// 		this.$store.commit('setGoodsId', this.item.groupbuy_id);
			// 		this.$u.route({
			// 			url: 'pageB/sdetails/index',
			// 		})
			// 	}
			// })
			this.$u.route({
				url: 'pageB/sdetails/index',
				params: {
					// id: this.item.groupbuy_id,
					id: this.item.goods_id,
					// type: 3,
				}
			})
		},
	}
}
</script>
<style lang="scss" scoped>
.item{
    width: 220rpx;
    .head{
        width: 210rpx;
        height: 131rpx;
        border-radius: 6rpx;
		background-color: antiquewhite;
    }
    .title{
        font-size: 26rpx;
        color: #333;
        margin-top: 16rpx;
    }
    .price{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 19rpx;
        >text:first-child{
            font-size: 26rpx;
            color: #FF3131;
        }
        >text:last-child{
            font-size: 24rpx;
            color: #999;
			text-decoration: line-through;
        }

    }
    .info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20rpx;
        margin-top: 19rpx;
        >text:first-child{
            color: #666;
        }
        >text:last-child{
            color: #FDD360;
        }
    }
}
</style>