<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.num>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" disabled="true" style="margin: 0 2px;width: 36px;padding: 3px 1px;border-radius: 3px;" v-show="food.num>0" v-model="food.num" @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.num if (item.num >= 999) { uni.showToast({ title: "该宝贝不能购买更多了~", duration:2000, icon:'none' }) 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>