cnbugs/uni-halo
1
0
Fork 0
鏡像自 https://github.com/ialley-workshop-open/uni-halo.git 已同步 2026-06-12 21:29:31 +08:00
程式碼 問題 動態

v1.0.0-beta 源码正式开源

瀏覽代碼
此提交包含在：
小莫唐尼
2022-12-06 15:08:29 +08:00
當前提交 636ae7b169
共有 461 個檔案被更改，包括 116817 行新增 和 0 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案
tm-vuetify/components/tm-cartCellListFood/tm-cartCellListFood.vue
+211
查看文件
@@ -0,0 +1,211 @@
<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>