wardrobe/tm-vuetify/components/tm-cartCellListFood/tm-cartCellListFood.vue

<template>
	<view class="tm-cartCellListFood px-20 py-32 flex-top-start" :class="[
		bgColor,
		black_tmeme ? 'grey-darken-4' : '',
		black_tmeme ? 'bk' : '',
		border === 'top' ? 'border-t-1' : '',
		border === 'bottom' ? 'border-b-1' : '',
	]">
		<view v-if="mdata[keyMap['img']]" class="tm-cartCellListFood-img" :style="{
			width:imgWidth+'rpx',
			height:imgWidth+'rpx'
		}">
			<tm-images :width="imgWidth" :height="imgWidth" :round="3"  :src="mdata[keyMap['img']]"></tm-images>
		</view>
		<view class="tm-cartCellListFood-r fulled ">
			<view class="pl-15">
				<view class="title  text-size-s text-weight-b text-overflow-2" style="line-height: 32rpx;"  :class="[black_tmeme ? 'bk' : '',]">
					{{mdata[keyMap['title']]}}
					<image v-if="typeclick==4" class="shanchu" src="/static/img/94.png"></image>
				</view>
				<view  style="min-height: 64rpx;" >
					<view v-if="!dense&&mdata[keyMap['label']]" class="tm-cartCellListFood-label text-size-s text-grey py-8">{{mdata[keyMap['label']]}}</view>
					<view v-if="!dense&&mdata[keyMap['label']]" class="tm-cartCellListFood-label text-size-s text-grey py-8 text-red">{{mdata[keyMap['size']]}}</view>
					<view v-if="mdata[keyMap['saleLabel']]&&!dense" class="tm-cartCellListFood-sale text-size-s text-grey">
						<block v-for="(item,index) in mdata[keyMap['saleLabel']]" :key="index">
							<tm-tags :black="black_tmeme" :color="color" v-if="index<4" size="xs">{{item}}</tm-tags>
						</block>
					</view>
				</view>
				<view class="tm-cartCellListFood-price flex-between">
					<view>
						<text class="text-size-xs text-red" v-if="typeclick!=3">￥</text>
						<text class="text-size-n text-red text-weight-b px-5">{{mdata[keyMap['price']]}}</text>
						<text v-if="mdata[keyMap['unit']]" class="text-size-xs text-grey pr-10">/{{mdata[keyMap['unit']]}}</text>
						<text v-if="mdata[keyMap['salePrice']]" class="text-delete text-size-xxs text-grey">￥{{mdata[keyMap['salePrice']]}}</text>
					</view>
					<view class="flex jiarugouwuche" v-if="typeclick==1" @click="jiaru(mdata)">
						<image class="" src="/static/img/86.png"></image>
					</view>
					<view class="flex" v-if="typeclick==2">
						<block v-if="cNum>0">
							<view :style="{
							width:`${actionSize}rpx`,
							height:`${actionSize}rpx`,
						}" :class="[color,black_tmeme ? 'bk' : '',]" @click="jian" class="tm-cartCellListFood-actions rounded  flex-center outlined">
								<text  class="iconfont icon-minus text-size-xxs"></text>
							</view>
							<view class="px-12 text-size-n " :class="[black_tmeme ? 'bk' : '',]">{{cNum}}</view>
						</block>
						<view :style="{
							width:`${actionSize}rpx`,
							height:`${actionSize}rpx`,
						}" :class="[color,`border-${color}-a-1`,black_tmeme ? 'bk' : '',]" @click="jia" class="tm-cartCellListFood-actions rounded  flex-center ">
							<text class="iconfont icon-plus text-size-xs"></text>
						</view>
					</view>
					<view class="flex" v-if="typeclick==3" @click="jiaru(mdata)">
						<view class="qiangwang">前往商城购买</view>
					</view>
					<view class="flex" v-if="typeclick==4">
						<view class="fukuan mr-10">去付款</view>
						<view class="fukuan">去付款</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 餐饮购物商品列表
	 * @property {Number} img-width = [] 默认：140，图片元素宽度，rpx单位。
	 * @property {Number} cart-num = [] 默认：0，当前销售的数量，需要cartNum.sync。
	 * @property {String} color = [] 默认：primary，主题色
	 * @property {String} bg-color = [] 默认：white，背景主题色
	 * @property {Boolean} dense = [ture|false] 默认：false，是否隐藏中间优惠和文字说明的结构，只保留标题和价格数量按钮。
	 * @property {Number} action-size = [] 默认：34，增减按钮大小。单位rpx
	 * @property {String} border = [top|bottom] 默认：top， 显示上边线还是下边线
	 * @property {Boolean} black = [ture|false] 默认：null，是否暗黑主题
	 * @property {Object} mdata = [] 默认：{}，数据结构
	 * @property {Object} key-map = [] 默认：{}，mdata的字段映射，每个人数据格式都不一样，如果你的数据和默认字段不一致，需要映射下关键字段。
	 * @property {Function} change 改变销售数量时触发，返回当前改变后的销售数量。
	 */
	import tmSliderNav from "@/tm-vuetify/components/tm-sliderNav/tm-sliderNav.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmTags from "@/tm-vuetify/components/tm-tags/tm-tags.vue"
	export default {
		components:{tmSliderNav,tmImages,tmTags},
		name:"tm-cartCellListFood",
		props:{
			imgWidth:{
				type:Number,
				default:140,
			},
			cartNum:{
				type:Number,
				default:0
			},
			color:{
				type:String,
				default:'primary'
			},
			bgColor:{
				type:String,
				default:'white'
			},
			// 字段映射表，每个人的mdata的数据字段不一样。如果不同就映射下吧。
			keyMap:{
				type:Object,
				default:()=>{
					return {
						img:'img',
						title:'title',
						label:'label',
						price:'price',
						salePrice:'salePrice',
						saleLabel:'saleLabel',
						unit:'unit',
						buy:'buy',
						size:'size',
					}
				}
			},
			// 精简后，不显示简介文字和优惠文字，只显示标题，价格和数量
			dense:{
				type:Boolean|String,
				default:false
			},
			//增减按钮大小。单位rpx
			actionSize:{
				type:Number,
				default:38
			},
			// 显示上边线还是下边线。可选top / bottom
			border: {
				type: String,
				default: 'top'
			},
			black:{
				type:Boolean|String,
				default:null
			},
			mdata:{
				type:Object,
				default:()=>{
					// return {
					// 	img:'https://picsum.photos/300?k=2',
					// 	title:'特色单人套餐（任选）',
					// 	label:'这个产品是只有几个融会',
					// 	price:36.2,
					// 	salePrice:76.4,
					// 	saleLabel:['7折优惠','首单减3元'],
					// 	unit:'/斤'
					//  buy:0
					// }
					return {};
				}
			},
			typeclick:{
				type:Number,
				default:0
			},
		},
		watch:{
			'mdata.buy':function(val){
				if(this.cart_num==val) return;
				this.cart_num = val;
			},
		},
		computed:{
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			
			cart_num:{
				get:function(){
					return  this.cNum;
				},
				set:function(val){

					this.cNum = val;
					this.$emit("update:cartNum",val)
					// #ifdef H5
					this.$nextTick(function(){
						this.$emit("change",val)
					})
					// #endif
					
					// #ifndef H5
					this.$emit("change",val)
					// #endif
					
				}
			}
		},
		data() {
			return {
				cNum:0,
			};
		},
		mounted() {
			this.cNum = this.mdata.buy;
		},
		methods:{
			jiaru(data){
				this.$emit('jiaruFun', data);
			},
			jian(){
				const buyNum = this.cNum;
				if(buyNum<=0) {
					this.cart_num = 0;
					return
				}
				this.cart_num  = buyNum-1
				
			},
			jia(){
				const buyNum = this.cNum;
				this.cart_num  = parseInt(buyNum) + 1

			},
		}
	}
</script>

<style lang="less">
	.jiarugouwuche image{width: 28px !important;height:28px !important;}
	.qiangwang{width: 100px;height: 28px;background: #303440;border: 1px solid white;font-size: 13px;
	text-align: center;color: white;line-height: 28px;border-radius: 5px;margin-top: 30px;}
	.fukuan{color:white;font-size: 15px;background: #303440;padding:4px 15px 4px 15px;border-radius: 40px;}
	.shanchu{width: 25px;height:25px;float: right;}
</style>