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'
		}">
			<image @click="quxq(mdata)" style="width:90px;height:90px;" :round="3" :src="mdata[keyMap['img']]"></image>
		</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!=7 && typeclick!=6  && typeclick!=8">￥</text>
						<text v-if="typeclick!=7 && typeclick!=6  && typeclick!=8"
							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="" v-if="mdata[keyMap['orderStatus']]==0">
							<view class="fukuan" @click="goPay(mdata,0)">去付款</view>
						</view>
						<view class="flex" v-if="mdata[keyMap['orderStatus']]==1 ||mdata[keyMap['orderStatus']]==2">
							<view class="fukuan mr-10" @click="goBuy(mdata,1)">再次购买</view>	
							<view class="fukuan" @click="goSure(mdata,1)" v-if="mdata[keyMap['orderStatus']]==1">确认收货</view>						
							<view class="fukuan" @click="goEval(mdata,2)"
								v-if="mdata[keyMap['orderStatus']]==2 && mdata[keyMap['isEval']]== 0 ">去评价</view>
							<!-- <view class="fukuan" @click="goEvalList(mdata,2)"
								v-if="mdata[keyMap['orderStatus']]==2 && mdata[keyMap['isEval']]== 1 ">我的评价</view> -->
						</view>
						<!-- <view class="flex" v-if="mdata[keyMap['orderStatus']]==-2">
							<view class="fukuan mr-10">再次购买</view>
							<view class="fukuan">确认收货</view>
						</view> -->
					</view>
					<view style="position: absolute;right: 20px;" v-if="typeclick==5">
						<view class="genghuan mr-10">出库</view>
						<!-- <view class="genghuan">取出</view> -->
					</view>
					<view style="position: absolute;right: 20px;" v-if="typeclick==6">
						<view class="genghuan mr-10" @click="genghuan(mdata,1)">更换</view>
						<view class="genghuan" @click="genghuan(mdata,2)">出库</view>
					</view>
					<view style="position: absolute;right: 20px;" v-if="typeclick==7">
						<view class="genghuan mr-10" @click="genghuan(mdata,1)">更换</view>
					</view>
					<view style="position: absolute;right: 20px;" v-if="typeclick==8">
						
					</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',
						orderStatus: 'orderStatus',
						isEval:'isEval'
					}
				}
			},
			// 精简后，不显示简介文字和优惠文字，只显示标题，价格和数量
			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: {
			// 付款
			goPay(data,type){
				console.log(data);
			},
			// 评价
			goEval(data,type){
				console.log(data,type);
				this.$emit('Eval', {
					data: data,
					type: 2
				});
			},
			goEvalList(data,type){},
			// 确认收货
			goSure(data,type){
				console.log(data);
				this.$emit('sure', {
					data: data,
					type: 1
				});
				
			},
			//购买 
			goBuy(data,type){
				console.log(data);
			},
			
			jiaru(data) {
				this.$emit('jiaruFun', {
					data: data,
					type: 2
				});
			},
			genghuan(data, type) {
				if (type == 1) {
					this.$emit('genghuan', {
						data: data,
						type: type
					});
				} else if (type == 2) {
					this.$emit('genghuan', {
						data: data,
						type: type
					});
				}
			},
			quxq(data) {
				this.$emit('jiaruFun', {
					data: data,
					type: 1
				});
			},
			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: 14px;
		background: #303440;
		padding: 4px 15px 4px 15px;
		border-radius: 40px;
	}

	.shanchu {
		width: 25px;
		height: 25px;
		float: right;
	}

	.genghuan {
		color: #EBEBEB;
		font-size: 14px;
		background: #303440;
		border-radius: 6px;
		width: 60px;
		height: 27px;
		border: 1px solid #EBEBEB;
		text-align: center;
		line-height: 27px;
		margin-top: 8px;
	}
</style>