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

<template>
	<view class="b-rx-shop-item">
		<view class="b-rx-shop-item-commodity">
			<image class="b-rx-shop-item-commodity-img" :src="item['product_img']" mode=""></image>
		</view>
		<view class="b-rx-shop-item-commodity-infor">
			<!-- 商品标题 -->
			<view class="b-rx-shop-item-commodity-infor-title b-rx-shop-item-commodity-infor-bottom">
				{{item['product_name']}}
			</view>
			<!-- 补贴金额 -->
			<view v-if="item['max_deduction'] > 0"
				class="b-rx-shop-item-commodity-infor-discount b-rx-shop-item-commodity-infor-bottom">
				最高补贴{{RetainDecimalPoint(item['max_deduction'])}}面额
			</view>
			<!-- 价格 -->
			<view class="b-rx-shop-item-commodity-infor-original-price b-rx-shop-item-commodity-infor-bottom">
				<text class="yang">原价:￥</text>
				<text class="price">{{RetainDecimalPoint(item['pay_price'])}}</text>
			</view>
			<!-- 优惠补贴后的价格 -->
			<view class="b-rx-shop-item-commodity-infor-price b-rx-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" v-if="shopCart['num'] > 0">
				<image class="img" :src="qnyurl('reduce.png','rx')" mode=""
					@tap="reducecommodity"></image>
				<view class="num">
					{{shopCart['num']}}
				</view>
				<image class="img" :src="qnyurl('add.png','rx')" mode="" @tap="GetCommodity"></image>
			</view> -->
			<!-- 需要选择规格 -->
			<view class="b-rx-shop-item-commodity-infor-shopping-cart-sku" @tap="$u.debounce(GetCommodity, 800,true)">
				<view class="b-rx-shop-item-commodity-infor-shopping-cart-sku-btn" :style="[Btnstyle]">
					 <u-badge v-if="NumValu > 0" :offset="[-6,-5]" max="99" absolute :value="NumValu"></u-badge>
					选规格
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @肯德基店铺商品组件
	 * */
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 接口请求
	import {
		menuDetailsAPI,
	} from '@/request/restaurant/index.js';
	import {
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin, restaurantmixins],
		name: "b-rx-shop-item",
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {};
		},
		computed: {
			//当前商店购物信息
			shopCart: function() {
				try {
					return this['GetCartList'][this['item']['product_id']];
				} catch (e) {
					return 0
				}
			},
			
			NumValu(){
				try{
					return this['GetCartList'][this['item']['product_id']]['num']
				}catch(e){
					return 0
				}
			},

			// 按钮颜色
			Btnstyle() {
				if (this['BrandInfor']['brand_id'] == 10) {
					return {
						'background': '#00AF66'
					};
				}
				if (this['BrandInfor']['brand_id'] == 13) {
					return {
						'background': 'linear-gradient(-77deg, #4A6FE7, #83ACFF)'
					};
				}
			}
		},
		methods: {
			...mapMutations({
				SetcommodityInfor: 'shopping/SETINFOR'
			}),
			// 获取商品规格
			GetCommodity() {
				uni.showLoading({
					title: '加载中...'
				});
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					restaurant_id: this['GetShopInfor']['restaurant_id'],
					product_id: this['item']['product_id']
				}
				menuDetailsAPI(parameters).then(res => {
					uni.hideLoading();
					// 设置初始数量
					res['data']['num'] = 1;
					this.SetcommodityInfor(res['data']);
					if (this['BrandInfor']['brand_id'] == 10) {
						// H5端不可用
						// this['$parent']['$parent']['$parent']['$refs']['b-xbk-sku-popup']['show'] = true;
						this.$emit('skupopup','b-xbk-sku-popup');
						console.log(this['BrandInfor']['brand_id'],'执行1')
					};
					
					if (this['BrandInfor']['brand_id'] == 13) {
						this.$emit('skupopup','b-rx-sku-popup');
						// H5端不可用
						// this['$parent']['$parent']['$parent']['$refs']['b-rx-sku-popup']['show'] = true;
						console.log(this['BrandInfor']['brand_id'],'执行2')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.b-rx-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;
			}

			&-original-price {
				.yang {
					font-size: $FONTSIZE22;
				}

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

			&-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;
				}
			}

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

				&-btn {
					width: 106rpx;
					height: 50rpx;
					position: relative;
					border-radius: 25rpx;
					color: #ffffff;
					text-align: center;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}
		}
	}


	.b-kfc-shop-item-commodity-infor-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>