maishidaSJ/components/foodItem/foodItem.vue

<template>
	<view>
		<view class="thumb-boxR">
		<myImage class="goodimage" :mysrc="foodImag" mymode="scaleToFill"></myImage>
		<view class="msText">
			<text class="dianpuming" >{{name}}</text>
			<view class="buyBT" style="background-color: #FEFCED;">
				<!-- <image class="xingxing" src="/static/images/dianzan@3x.png" mode="heightFix"></image> -->
				<text class="peisongsuoming" style="color: #988233;">{{introduce}}</text>
			</view>
			<text class="peisongsuoming">{{$t('comp.yuexiao')}}300+</text>
			<view class="buyBTSB">
				<text class="peisongsuoming">{{$formPr(price+otherPrice)}}{{$t('locale.huobidw')}}</text>
				<view class="rconten">
					<image v-if="shuliang>0" class="imageRJ" src="/static/images/jian@3x.png" mode="aspectFit" @click="jiajian(-1)"></image>
					<text v-if="shuliang>0" class="textR">{{shuliang}}</text>
					<image class="imageR" src="/static/images/plus-circle-fill@3x.png" mode="aspectFit" @click="jiajian(1)"></image>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	
	// var tempsp={
	// 	"shangpin":shangpinlist[j],
	// 	"sku":tempSKU,
	// 	"otherPrice":otherPrice,
	// 	"shuliang":shuliang
	// }
	
	export default {
		name:"foodItem",
		props: {
			food:'',
			shuliang:0,
			otherPrice:0,
		},
		data() {
			return {
				foodImag:'',
				name:'',
				price:0,
				introduce:''
			};
		},
		watch: {
			food(val){
				this.foodImag = this.food.shangpin.image;
				this.name = this.food.shangpin.name;
				this.price = this.food.shangpin.price;
				this.introduce = this.food.shangpin.introduce;
			}
		},
		methods:{
			jiajian(e){
				this.$emit('Ejiajian',e);
			},
		},
	}
</script>


<style>

	.thumb-boxR {
	    width: 90%;
		margin-left: 5%;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    flex-direction: row;
	    margin-top:12rpx;
		background-color: white;
		border-radius: 8rpx;
	}
	.goodimage{
		border-radius: 8rpx;
		width: 180rpx;
		height:140rpx;
	}
	.msText{
		width: 500rpx;
		padding-left: 10rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.dianpuming{
		font-size: 30rpx;
		line-height: 32rpx;
		height: 32rpx;
		font-weight: bold;
	}
	.buyBTSB{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
	}
	
	.buyBT{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
	}
	.xingxing{
		width: 34rpx;
		height: 34rpx;
	}
	.peisongsuoming{
		font-size: 26rpx;
		line-height: 38rpx;
		height: 38rpx;
		color: dimgray;
	}
	.rconten{
		margin-left: auto;
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	.imageRJ{
		width: 56rpx;
		height: 56rpx;
		margin-right: 8rpx;
	}
	.imageR{
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.textR{
		margin-left: 6rpx;
		margin-right: 6rpx;
	}
</style>