deming/components/shop/special-shop/index.vue

<template>
	<view class="special">
		<view v-if="type == 'spike'">
			<image :src="item.groupbuy_image1"></image>
			<view class="right">
				<view class="name u-line-1">{{ item.goods_name }}</view>
				<view class="price">
					<view class="groupbuy-price">{{ item.groupbuy_price }}</view>
					<view class="goods-price">{{ item.goods_price }}</view>
				</view>
				<view class="buy">
					<view class="num">剩余{{ item.inventory }}件</view>
					<view class="btn" @click="spikeGoods">立即购买</view>
				</view>
			</view>
		</view>
		<view v-if="type == 'group'">
			<image :src="item.pintuan_image"></image>
			<view class="right">
				<view class="name u-line-1">{{ item.pintuan_goods_name }}</view>
				<view class="price group">
					<view class="groupbuy-price">{{ item.pintuan_goods_price }}</view>
					<view class="btn" @click="toDetailsPage">立即拼团</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {}
	},
	props: {
		item: Object,
		type: String,
	},
	created() {
		// console.log(this.item);
		// console.log(this.type);
	},
	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,
					type: 3,
				}
			})
		},
		toDetailsPage() {
			// this.$u.api.getPinTuanDetails({
			// 	pintuan_id: this.item.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.item.pintuan_id);
			// 		this.$u.route({
			// 			url: 'pageB/sdetails/index',
			// 		})
			// 	}
			// })
			this.$u.route({
				url: 'pageB/sdetails/index',
				params: {
					id: this.item.pintuan_id,
					type: 2,
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.special {
	> view {
		margin: 0 auto 30rpx;
		display: flex;
		width: 690rpx;
		background: rgba(245,245,245,1);
		border-radius: 6rpx;
		> image {
			flex-shrink: 0;
			width: 210rpx;
			height: 170rpx;
			border-radius: 6rpx 0rpx 0rpx 6rpx;
			background: rgba(245,245,245,1);
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 20rpx;
			.name {
				width: 400rpx;
				font-size: 26rpx;
				color: rgba(51,51,51,1);
				margin-bottom: 20rpx;
			}
			.price {
				display: flex;
				.groupbuy-price {
					font-size: 26rpx;
					color: rgba(255,49,49,1);
					margin-right: 12rpx;
				}
				.goods-price {
					font-size: 24rpx;
					text-decoration: line-through;
					color: rgba(153,153,153,1);
				}
			}
			.buy {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.num {
					font-size: 22rpx;
					color: rgba(102,102,102,1);
				}
				.btn {
					width: 140rpx;
					height: 50rpx;
					background: rgba(255,120,15,1);
					border-radius: 25rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: rgba(255,255,255,1);
					line-height: 50rpx;
					text-align: center;
				}
			}
			.group {
				align-items: center;
				justify-content: space-between;
				.btn {
					width: 140rpx;
					height: 50rpx;
					background: rgba(255,120,15,1);
					border-radius: 25rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: rgba(255,255,255,1);
					line-height: 50rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>