cbz-sj/pages/tabbar/index/index.vue

<template>
	<view class="content">
		<view class="top hflex acenter">
			<u-navbar :placeholder="true">
				<view class="u-nav-slot" slot="left">
					<image src="/static/images/common/logo.png" class="logo"></image>
				</view>
				<view class="u-nav-slot" slot="right">
					<u-search placeholder="请输入搜索内容" :showAction="false" v-model="search"></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="tabs">
			<u-tabs :list="tabs" @click="clickTab" lineWidth="0" :activeStyle="{color:'#222222',fontSize: '30rpx'}" :inactiveStyle="{color: '#888888'}">
			</u-tabs>
		</view>
		<view class="menuList hflex acenter jbetween">
			<scroll-view scroll-y="true" class="menu_left">
				<view class="vflex">
					<block v-for="(item,index) in cateList" :key="index">
						<view class="left_item hflex acenter jcenter" :class="index == left_active? 'left_active':''">{{item.name}}</view>
					</block>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="menu_right">
				<u-tabs :list="cateList[left_active].sub" @click="clickTab2" lineWidth="0" :activeStyle="{
					background: '#E7EBFF',borderRadius: '24px',border: '1px solid #5471FF',color: '#5B77FF',padding: '0 24rpx'
				}" :inactiveStyle="{
					color: '#393939',background: '#F3F3F7',borderRadius: '24px'}">
					<view slot="right" style="padding-left: 4px;" @tap="open">
						<view class="tabs_text hflex acenter jcenter">全部</view>
					</view>
				</u-tabs>
				<view class="vflex">
					<block v-for="(item,index) in pageList" :key="index">
						
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="hover hflex acenter jbetween">
			<view class="hflex acenter">
				<image src="/static/images/common/sort_icon.png" class="hover_icon"></image>
				<view class="hover_text">批量管理</view>
			</view>
			<view class="hflex acenter">
				<image src="/static/images/common/add_icon.png" class="hover_icon"></image>
				<view class="hover_text">添加商品</view>
			</view>
		</view>
		<custom-tab-bar :current="1" />
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				search: '',
				tabs: [
					{
						index: 0,
						name: '全部',
						badge: {
							value: 452,
							bgColor: '#393939',
							color: '#FFFFFF'
						}
					},
					{
						index: 1,
						name: '售卖中',
						badge: {
							value: 126,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 2,
						name: '已下架',
						badge: {
							value: 59,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 3,
						name: '已售罄',
						badge: {
							value: 59,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					
				],
				current: 0,
				cateList: [],
				left_active: 0,
				pageList: [],
				cate_show: false
			}
		},
		onLoad() {
			that = this
			that.getCate()
		},
		methods: {
			getCate() {
				$api.req({
					url: '/data/api.business.Goods/getCate'
				}, function(res) {
					if(res.code == 1) {
						that.cateList = res.data
					}
				})
			},
			clickTab(e) {
				var index = e.index
				for(var i=0;i<that.tabs.length;i++) {
					if (that.tabs[i].index == index) {
						that.$set(that.tabs[i].badge,"bgColor",'#393939')
						that.$set(that.tabs[i].badge,"color",'#FFFFFF')
					} else {
						that.$set(that.tabs[i].badge,"bgColor",'#EDEDED')
						that.$set(that.tabs[i].badge,"color",'#888888')
					}
				}
			},
			open() {
				that.cate_show = !that.cate_show
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		position: relative;
		.top {
			.logo {
				width: 160rpx;
				height: 60rpx;
			}
			.u-navbar__content__right {
				width: 490rpx;
				padding: 0 30rpx !important;
			}
		}
		.tabs {
		}
		.menuList {
			width: 100%;
			.menu_left {
				width: 180rpx;
				height: 1078rpx;
				background: #F5F5F5;
				border-radius: 0px 28rpx 0px 0px;
				.left_item {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					padding: 30rpx 0;
				}
				.left_active {
					color: #506DFF;
					background: #fff;
				}
			}
			.menu_right {
				width: 570rpx;
				height: 1078rpx;
				background: #FFFFFF;
				.tabs_text {
					width: 80rpx;
					height: 56rpx;
					background: #FFFFFF;
					font-size: 20rpx;
					font-weight: 400;
					color: #393939;
					line-height: 28rpx;
				}
			}
		}
		.hover {
			position: fixed;
			bottom: 214rpx;
			left: 50rpx;
			width: 650rpx;
			height: 92rpx;
			z-index: 999;
			background: #FFFFFF;
			box-shadow: 0px 0px 28rpx 0px rgba(0,0,0,0.11);
			border-radius: 46rpx;
			box-sizing: border-box;
			padding: 0 88rpx;
			.hover_icon {
				width: 36rpx;
				height: 36rpx;
			}
			.hover_text {
				padding-left: 2rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
</style>