H5-ThreeDoorder/components/b-shop-item/b-kfc-shop-item.vue

<template>
	<view class="b-kfc-shop-item">
		<view class="b-kfc-shop-item-commodity">
			<image class="b-kfc-shop-item-commodity-img" :src="item['product_img']" mode=""></image>
		</view>
		<view class="b-kfc-shop-item-commodity-infor">
			<!-- 商品标题 -->
			<view class="b-kfc-shop-item-commodity-infor-title b-kfc-shop-item-commodity-infor-bottom">
				{{item['product_name']}}
			</view>
			<!-- 补贴金额 -->
			<view class="b-kfc-shop-item-commodity-infor-discount b-kfc-shop-item-commodity-infor-bottom">
				最高补贴{{RetainDecimalPoint(item['max_deduction'])}}面额
			</view>
			<!-- 价格 -->
			<view class="b-kfc-shop-item-commodity-infor-price b-kfc-shop-item-commodity-infor-bottom">
				<text class="yang">原价:￥</text>
				<text class="price">{{RetainDecimalPoint(item['pay_price'])}}</text>
			</view>
			<!-- 优惠补贴后的价格 -->
			<view class="b-kfc-shop-item-commodity-infor-price b-kfc-shop-item-commodity-infor-bottom">
				<text class="yang">补贴后价格:￥</text>
				<text class="price">{{RetainDecimalPoint(item['pay_price'] - item['max_deduction'])}}</text>
			</view>
			<!-- 加入购物车 -->
			<view class="b-kfc-shop-item-commodity-infor-shopping-cart">
				<view v-show="shopCart && shopCart['num']" class="Reduce-Button" :class="[`theme-Union-Class-${BrandInfor['brand_id']}-2`]"  @tap.stop="reducecommodity">
					<view>-</view>
				</view>
				<view class="num" v-show="shopCart && shopCart['num']">
					{{shopCart['num']}}
				</view>
				<view class="Add-Button" :class="[`theme-Union-Class-${BrandInfor['brand_id']}-1`]" @tap.stop="Addcommodity">
					<view>+</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
	export default {
		mixins: [mixin, restaurantmixins],
		name: "b-kfc-shop-item",
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		},
		computed: {
			//当前商店购物信息
			shopCart: function() {
				try {
					return {
						...this['GetCartList'][this['item']['product_id']]
					};
				} catch (e) {
					return false
				}
			},
		},
		mounted() {
			// // 监听麦当劳套餐选择完成之后对商品数据经行整理然后再加入购物车
			// uni.$on('skuarrangement',function(data){
			// 	console.log(data);
			// })
		},
		methods: {

			// 为防止后期添加商品与减少商品增加逻辑所以不在事件上直接调用vuex方法
			/**
			 * @添加数量/增加商品
			 * */
			Addcommodity() {
				if (this['item']['is_sku']) {
					this.PageShopCombo();
					return;
				};
				console.log(this['item'],'item添加');
				this.ADD_CART({
					commodity: this['item']
				})
			},

			/**
			 * @减少/删除商品
			 * */
			reducecommodity() {
				this.REDUCE_CART(this['item'])
			},

			// 跳转套餐页面
			PageShopCombo() {
				uni.navigateTo({
					url: `/pages/restaurant/home/shop_home/shop-combo/mdl-shop-combo?product_id=${this['item']['product_id']}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.b-kfc-shop-item {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;

		&-commodity {
			width: 220rpx;
			height: 195rpx;
			max-width: 220rpx;
			max-height: 195rpx;
			min-width: 220rpx;
			min-height: 195rpx;
			border-radius: 10rpx;
			overflow: hidden;

			&-img {
				width: 100%;
				height: 100%;
			}
		}

		&-commodity-infor {
			flex: 1;
			padding-left: 22rpx;

			&-bottom {
				margin-bottom: 15rpx;
			}

			&-title {
				font-size: $FONTSIZE26;
				color: $THEMECOLOR4;
			}

			&-discount {
				background-color: #FFDADA;
				border-radius: 50rpx;
				color: $THEMECOLOR1;
				font-size: $FONTSIZE22;
				padding: 5rpx 15rpx;
				display: inline-block;
			}

			&-price {
				color: $THEMECOLOR1;

				.yang {
					font-size: $FONTSIZE22;
				}

				.price {
					font-size: $FONTSIZE30;
				}
			}

			&-shopping-cart {
				flex: 1;
				height: 60rpx;
				display: flex;
				justify-content: flex-end;
				font-size: 36rpx;
				align-items: center;

				.num {
					max-width: 100rpx;
					min-width: 100rpx;
					text-align: center;
				}

				.img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}
	
</style>