bc_wx_applet/pages/classify/classify.vue

<template>
	<view class="w-full">
		<view>
			<u-row justify="space-between" customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="icon-container-l">
						<uni-badge size="normal" :text="txts" absolute="rightTop">
							<u-icon :name="iconCooking" label="自提" labelPos="bottom" size="32" ></u-icon>
						</uni-badge>
					</view>
				</u-col>
				<view class="container">
					<u-tag plain :text="tags ? '营业中' : '离线'" :type="tags ? 'success' : 'error'" size="mini"></u-tag>
					<view @click="btnIc">
						<u-icon label="当前餐车名称" labelPos="left" size="16" name="arrow-down"></u-icon>
					</view>
				</view>
				<u-col span="3">
					<view class="icon-container-r">
						<u-icon label="我的" labelPos="bottom" size="32" :name="iconPeople"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- <top-search :isSearch="false" @searchClick="searchClick"></top-search>
		 <view class="w-full padding-lr-sm box-sizing-b dflex-b">
			<scroll-view class="goods-category" scroll-x>
				<view class="category-box">
					<view class="category-item padding-lr-lg" v-for="item in 8" :key="item" :class="{'on-category':onIndex === item}">分类{{item+1}}</view>
				</view>
			</scroll-view>
			<view class="classify-icon">
				<u-icon name="grid-fill" size="30" @click="show = true" />
			</view>
		</view>
		<u-popup :show="show" mode="left" @close="show = false">
			<view class="classify-popup padding-lr-lg padding-tb box-sizing-b">
				<view class="padding-tb-sm">全部</view>
				<view class="padding-tb-sm" v-for="index in 8">分类{{index+1}}</view>
			</view>
		</u-popup> -->
		<view class="w-full dflex-b padding-sm box-sizing-b dflex-wrap-w">
			<view class="goods-item margin-bottom-sm" v-for="(item, index)  in goods" :key="index">
				<view class="img dflex-c" @click="toDetial">
					<image mode="aspectFit" :src="'../../static/x'+ index%2 +'.jpg'"></image>
				</view>
				<view class="title">{{item.goods_name}}</view>
				<view class="dflex padding-bottom-xs">
					<u-tag plain text="销量: 199" borderColor="#FF6D20" color="#FF6D20" size="mini"></u-tag>
				</view>
				<view class="w-full dflex-b">
					<view class="price">{{item.goods_price}}</view>
					<view>
						<u-button type="primary" shape="circle" size='small' icon="shopping-cart-fill"
							color="linear-gradient(to right, #F54319, #FF6D20)" @click="goCart"></u-button>
					</view>
				</view>
			</view>
		</view>
		<my-gap :height="130" />

		<view class="cart-bottom padding-sm dflex-b">
			<view class="cart padding-lr">
				<uni-badge size="small" :text="100" absolute="rightTop">
					<u-icon name="shopping-cart-fill" size="28" color="#FF873D" @click="showCart"></u-icon>
				</uni-badge>
				<text class="cart-total">￥35.60</text>
			</view>
			<view class="balance dflex-c background-gradient">去结算</view>
		</view>
		<cartPopupVue ref="cartPopup" />
	</view>
</template>

<script>
	import cartPopupVue from '../../components/cartPopup.vue'
	import iconCooking from '../../static/cooking.png'
	import iconPeople from '../../static/people.png'
	export default {
		components: {
			cartPopupVue,
		},
		data() {
			return {
				onIndex: 0,
				show: false,
				iconCooking: iconCooking, 
				iconPeople: iconPeople,
				tags: 1,
				txts: 1,
				goods: [ // 购物车数据列表
					{
						id: 1,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",

					},
					{
						id: 2,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",
					}, 
					{
						id: 3,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",
					},
					{
						id: 4,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",
					},
					{
						id: 5,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",
					},
					{
						id: 6,
						goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
						goods_price: "520.00",
					}
				]
			}
		},
		created() {

		},
		methods: {
			// 加购
			goCart() {

			},
			showCart() {
				this.$refs.cartPopup.setShow(true);
			},
			btnIc() {
				uni.navigateTo({
					url: `/pages/diningList/diningList`
				})
			},
			toDetial() {
				uni.navigateTo({
					url: `/pages/goodDetail/goodDetail`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-category {
		width: calc(100% - 100rpx);
		border-radius: 14rpx;
		overflow: hidden;

		.category-box {
			height: 70rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.category-item {
				font-size: 14px;
				flex-shrink: 0;
				height: 100%;
				line-height: 70rpx;
			}

			.on-category {
				color: #FFF;
				background-color: #000;
			}
		}

		.classify-icon {
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.goods-item {
		width: 48%;
		overflow: hidden;
		box-sizing: border-box;
		border: solid 4px #FFF;
		border-radius: 5px;
		box-shadow: 0px 3px 10px 0px rgba(213, 221, 232, 0.5);

		.img {
			width: 100%;
			height: 350rpx;
			overflow: hidden;
			background: #EEE;
		}

		.title {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 10rpx;
		}
	}

	.cart-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 130rpx;
		box-sizing: border-box;
		background-color: #FFF;
		box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.15);
		z-index: 10800;

		.cart {
			width: calc(100% - 220rpx);
			border-radius: 5px;
			background-color: #FEEEE4;
			display: flex;
			align-items: center;
			height: 100%;

			.cart-total {
				padding-left: 40rpx;
				font-size: 16px;
				font-weight: 700;
			}
		}

		.balance {
			width: 200rpx;
			height: 100%;
			background-color: #FF0000;
			font-size: $uni-font-size-lg;
			border-radius: 5px;
			color: #FFF;
		}
	}

	.classify-popup {
		width: 400rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		align-items: center;
		/* 垂直居中子元素 */
		justify-content: center;
		/* 水平居中子元素 */
	}

	.icon-container-l {
		margin-top: 10px;
		margin-left: 15px;
	}

	.icon-container-r {
		margin-left: 20px;
	}
</style>