cbz/components/menuList/menuList.vue

<template>
	<view class="content hflex jbetween">
		<scroll-view scroll-y="true" style="height: 1190rpx;">
			<view :style="[MobileLeft]">
				<view v-show="!isNav">
					<view v-for="(item,index) in titleList" :key="index" :class="menuIndex==index ? 'menuListSelect' : 'menuList' " @click="selectMenu(index,item)">
						{{item.name}}
					</view>
				</view>
				<view v-show="isNav">
					<slot name="nav"></slot>
				</view>
				<view :style="[foot]"></view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="height: 1190rpx;">
			<view :style="[MobileRight]">
				<view v-show="!isSlot" :style="[MobileRight]">
					<view class="goodsList hflex acenter jbetween" v-for="(it,index) in menuLists" :key="index" @click="listenMenu(index)">
						<image :src="it.cover" style="width: 144rpx;height: 144rpx;border-radius: 16rpx;" mode="aspectFill"></image>
						<view class="goodsDesc">
							<text class="goods_text">{{it.name}}</text>
							<!-- <view class="hot">月销量{{it.hot}}</view> -->
							<view class="hflex acenter jbetween">
								<view class="price">￥{{it.price_selling}}</view>
								<image src="/static/images/shop/add-cart.png" style="width: 44rpx;height: 44rpx;" @tap.stop="addCart(index)"></image>
							</view>
							<!-- <view class="type" @tap="onClick(it)">选规格</view> -->
						</view>
					</view>
				</view>
				<view v-show="isSlot">
					<slot name="list"></slot>
				</view>
				<!-- <view :style="[foot]"></view> -->
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		props:{
			menuLists:{
				type:[Array,Number,Object],
				default:[]
			},
			titleList: {
				type:[Array,Number,Object],
				default:[]
			},
			bottomSize:{
				type:String,
				default:'0rpx'
			},
			isSlot:{
				type:Boolean,
				default:false
			},
			isNav:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				menuIndex: 0,
				goods:[],
				height:'',
				title:''
			}
		},
		created() {
			//设置手机的高度
			var me = this
			uni.getSystemInfo({
			    success: function (res) {
					me.height = res.windowHeight
			    }
			});
			if(this.menuLists == []){
				
			}
			// this.goods = this.menuLists[0].goods
		},
		mounted() {

		},
		computed:{
			// 右侧产品样式
			MobileRight(){
				let style = {}
				// style.position = 'fixed'
				// style.right = '0rpx'
				style.width = '520rpx'
				style.height = this.height +'px'
				style.right = "3rpx"
				style.backgroundColor = '#FFFFFF'
				style.overflow = 'auto'
				return style
			},
			//左侧菜单样式
			MobileLeft(){
				let style = {}
				// style.position = 'fixed'
				// style.left = '0rpx'
				style.width = '230rpx'
				style.height = this.height +'px'
				style.backgroundColor = '#f3f4f6'
				style.overflow = 'auto'
				return style
			},
			// 产品图片样式
			ImgStyle(){
				let style = {}
				style.width = this.imgSize
				style.height = this.imgSize
				style.marginTop = '10rpx'
				return style
			},
			//底部距离
			foot(){
				let style = {}
				style.width = '100%'
				style.float = 'left'
				style.height = this.bottomSize
				return style
			}
		},
		methods: {
			// 菜单选择
			selectMenu(index,data){
				this.menuIndex = index
				this.goods = this.menuLists[index].goods
				this.title = this.menuLists[index].title
				this.$emit('listenMenu',data);
			},
			// 点击规格
			onClick(e) {
				this.$emit('listenEvent',e);
			},
			listenMenu(index) {
				this.$emit('listenMenu',index)
			},
			addCart(index) {
				this.$emit('addCart',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menuList{
		text-align: center;
		padding: 20rpx 10rpx;
		font-size: 30rpx;
	}
	.menuListSelect{
		text-align: center;
		background-color: #FFFFFF;
		padding: 30rpx 0rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.goodsList{
		width: 100%;
		float: left;
		border-bottom: 1rpx solid #f3f4f6;
		box-sizing: border-box;
		padding: 10rpx 30rpx 10rpx 10rpx;
		text{
			font-weight: bold;
			font-size: 32rpx;
		}
	}
	.title{
		font-weight: bold;
		font-size: 32rpx;
		padding: 10rpx;
	}
	.hot{
		color: red;
		margin-top: 10rpx;
		font-size: 26rpx;
	}
	.price{
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FF2626;
	}
	.type{
		margin-left: 180rpx;
		width: 105rpx;
		display:inline-block;
		margin-bottom: 10rpx;
		background-color: #dd6161;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 26rpx;
	}
	.goodsDesc{
		width: calc(100% - 164rpx);
		margin-left: 25rpx;
		float: right;
	}
	.goods_text {
		font-size: 28rpx;
		font-weight: 500;
		color: #222222;
		line-height: 40rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		margin-bottom: 16rpx;
	}
</style>