|
|
<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']]}}
|
|
|
</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="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">￥</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">
|
|
|
<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>
|
|
|
</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'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 精简后，不显示简介文字和优惠文字，只显示标题，价格和数量
|
|
|
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 {};
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
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:{
|
|
|
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">
|
|
|
|
|
|
</style>
|