<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!=3 && typeclick!=6">￥</text>
<text v-if="typeclick!=3 && typeclick!=6"
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">去评价</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>
</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'
}
}
},
// 精简后，不显示简介文字和优惠文字，只显示标题，价格和数量
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);
uni.navigateTo({
url:'/pages/pingjia/index?no='+data.orderNo
})
},
// 确认收货
goSure(data,type){
console.log(data);
},
//购买
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>