high-mini/components/cartcontrol.vue

<template>
	<view style="display: flex;flex-direction: row;height: 27px;">
		<view class="food-control">
			<view class="cont" style="margin-top: 2px;" @click="decreaseCart(food)" v-show="food.count>0">
				<image src="../qianzhu-KFC/static/imgs/wreduce.png" mode="" style="width: 26px;height: 26px;"></image>
			</view>
			<!-- <text style="padding: 0 4px;" v-show="food.count>0">{{food.count}}</text> -->
			<input type="number" maxlength="3" style="margin: 0 2px;width: 36px;padding: 3px 1px;border-radius: 3px;"
				v-show="food.count>0" v-model="food.count" @input="inputCart(food)" />
		</view>
		<view style="flex: 1;margin-top: 2px; " class="cont" @click="addCart(food)">
			<image src="../qianzhu-KFC/static/imgs/plus.png" v-if="typeid == 1" style="width: 26px;height: 26px;color: #CCCCCC;"></image>
			<image src="../qianzhu-KFC/static/imgs/blueplus.png" v-if="typeid == 2" style="width: 26px;height: 26px;color: #CCCCCC;">
			</image>
		</view>
	</view>
</template>

<script>
	// import Vue from 'vue'
	let app = getApp();
	export default {
		props: {
			food: {
				type: Object
			}
		},
		data() {
			return {
				typeid: app.globalData.distinguishid //区分类型
			};
		},
		onLoad() {
		},
		methods: {
			addCart: function(item) {
				this.$emit('add', item)
			},
			decreaseCart(item) {
				this.$emit('dec', item)
			},
			inputCart(item) {
				this.fcount = item.count
				if (item.count >= 999) {
					uni.showToast({
						title: "该宝贝不能购买更多了~"
					})
					return false;
				} else {
					this.$emit('input', item)
				}

			}
		}
	}
</script>

<style scoped>
	.food-control {
		display: flex;
		flex: 1;
		justify-content: space-around;
	}

	.cont {
		width: 26px;
		height: 26px;
		box-sizing: border-box;
		border-radius: 50%;
		text-align: center;
	}
</style>