first

pagesCreateOrder/index/components/goods-item.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="u-relative u-flex item">
+		<image lazy-load class="img" :src="data.coverImg" mode=""></image>
+		<view class="info u-flex u-row-between u-col-top u-flex-col" @tap="emitEvent('add')">
+			<view>
+				<view>{{data.name}}</view>
+				<view class="u-font-32 font-bold u-m-t-16">
+					￥{{data.price}}
+				</view>
+			</view>
+			<view class="u-flex">
+				<template v-if="!isSellout">
+					<template v-if="!data.isDan">
+						<button class="btn" hover-class="btn-hover-class" @tap="emitEvent('chooseGuige')">选规格</button>
+					</template>
+					<template v-else>
+						<view class="u-flex icon-btn">
+							<view class="u-flex" @tap.stop="emitEvent('add')">
+								<image src="/pagesCreateOrder/static/images/icon-add.svg" class="icon" mode=""></image>
+							</view>
+							<template v-if="data.chooseNumber">
+								<view class="u-font-32">
+									{{data.chooseNumber}}
+								</view>
+								<view class="u-flex" @tap.stop="emitEvent('reduce')">
+									<image src="/pagesCreateOrder/static/images/icon-reduce.svg" class="icon" mode="">
+									</image>
+								</view>
+							</template>
+						</view>
+					</template>
+				</template>
+				<template v-else>
+					<view class=" u-m-t-16">
+						已售罄
+					</view>
+				</template>
+
+
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed,
+		toRef,
+		toRefs,
+		watch
+	} from 'vue';
+	const props = defineProps({
+		index: {
+			type: Number,
+		},
+		data: {
+			type: Object,
+			default: () => {
+				return {
+					chooseNumber: 0
+				}
+			}
+		}
+	})
+	//判断是否是菜品
+	function isGoods(){
+		return props.data.hasOwnProperty('id')
+	}
+	
+	//判断商品是否售尽
+	const isSellout = computed(() => {
+		const item = props.data
+		if(!isGoods()){
+			return false
+		}
+		return (
+			item.isPauseSale ||
+			(item.typeEnum !== "sku" && item.specList[0].stockNumber <= 0)
+		);
+	})
+
+
+	const emits = defineEmits(['add', 'reduce', 'chooseGuige'])
+	
+	function emitEvent(emitName){
+		if(isGoods()){
+			emits(emitName, props.index)
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.icon {
+		width: 48rpx;
+		height: 48rpx;
+	}
+
+	.icon-btn {
+		gap: 14rpx;
+	}
+
+	.btn {
+		background: #EB4F4F;
+		border-radius: 100rpx;
+		font-size: 28rpx;
+		height: 56rpx;
+		line-height: 56rpx;
+		color: #fff;
+	}
+
+	.btn-hover-class {
+		opacity: .6;
+	}
+
+	.item {
+		width: 250rpx;
+		height: 272rpx;
+		background: #F9B798;
+		border-radius: 8rpx 8rpx 8rpx 8rpx;
+		overflow: hidden;
+
+		.img {
+			width: 250rpx;
+			height: 272rpx;
+		}
+
+		.info {
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			color: #fff;
+			padding: 32rpx 24rpx 24rpx 24rpx;
+			top: 0;
+			background: rgba(37, 22, 15, 0.5);
+			border-radius: 8rpx 8rpx 8rpx 8rpx;
+			overflow: hidden;
+		}
+	}
+</style>