bc_wx_applet/pages/classify/classify.vue

<template>
	<view class="w-full">
		<!-- <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="index in 4" :key="index">
				<view class="img dflex-c">
					<image mode="aspectFit" :src="'../../static/x'+ index%2 +'.jpg'"></image>
				</view>
				<view class="title">我是标题我是标题我是标题我是标题</view>
				<view class="dflex padding-bottom-xs">
					<u-tag text="夏季校服" type="error" bgColor="#E8341F" size="mini"></u-tag>
				</view>
				<view class="w-full dflex-b">
					<view class="price">23.30</view>
					<u-tag text="加购" bgColor="#000" shape="circle" size="mini" @click="goCart"></u-tag>
				</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">去结算</view>
		</view>
		<cartPopupVue ref="cartPopup" />
	</view>
</template>

<script>
	import cartPopupVue from '../../components/cartPopup.vue'
	export default {
		components:{cartPopupVue},
		data() {
			return {
				onIndex:0,
				show:false
			}
		},
		methods: {
			// 加购
			goCart(){},
			showCart(){
				this.$refs.cartPopup.setShow(true);
			}
		}
	}
</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;
}
</style>