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" @search="openSearch"></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 text_hide hflex acenter" :class="index == left_active? 'left_active':''" @click="clickTab1(index)">
							<text class="text_hide" style="width:100%; text-align: center;">{{item.name}}</text>
						</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: '24rpx',border: '1rpx solid #5471FF',color: '#5B77FF',padding: '0 24rpx'
				}" :inactiveStyle="{
					color: '#393939',background: '#F3F3F7',borderRadius: '24rpx',padding: '0 24rpx'}"  :current="right_active">
					<view slot="right" style="padding-left: 4rpx;" @tap="open">
						<view class="tabs_text hflex acenter jcenter">全部</view>
					</view>
				</u-tabs> -->
				<scroll-view scroll-x="true" style="white-space: nowrap;position: relative;margin-bottom: 20rpx;width: 470rpx; height: 48rpx;">
					<view class="hflex acenter" v-if="cateList[left_active] && !cate_show">
						<view v-for="(item,index) in cateList[left_active].sub" :key="index" class="right_tab" :class="index == right_active? 'right_tab_active' : ''" @click="clickTab2(index)">{{item.name}}</view>
					</view>
				</scroll-view>
				<view class="tabs_text hflex jcenter" @tap="open" v-if="!cate_show && left_active != -1">全部</view>
				<view class="cate_bg" v-if="cate_show" @click="open">
					<view class="cate_top" @click.stop="">
						<view class="hflex acenter jbetween">
							<view class="top_left">选择分类</view>
							<view class="top_text" @click="open">收起</view>
						</view>
						<view class="hflex acenter fwrap" v-if="cateList[left_active]">
							<block v-for="(item2,index2) in cateList[left_active].sub" :key="index2">
								<view class="cate hflex acenter jcenter" :class="right_active == index2?'cate_active':''" @click="clickcate(index2)">{{item2.name}}</view>
							</block>
						</view>
					</view>
				</view>
				<view class="vflex">
					<block v-for="(item,index) in pageList" :key="index">
						<view class="right_item">
							<view class="hflex acenter">
								<view class="item_left">
									<image :src="item.cover" class="item_cover"></image>
									<image src="/static/images/common/img_bq1.png" v-if="item.status == 1" class="bq1"></image>
									<image src="/static/images/common/img_bq2.png" v-if="item.status == 0" class="bq1"></image>
								</view>
								<view class="vflex">
									<view class="item_title">{{item.name}}</view>
									<view class="item_price">￥{{item.price_selling}}</view>
								</view>
							</view>
							<view class="item_bottom hflex acenter jend">
								<view class="btn1 hflex acenter jcenter" @click="toEdit(item.id)">编辑</view>
								<view class="btn1 btn2 hflex acenter jcenter" v-if="item.status == 1" @click="lower(item.id)">下架</view>
								<view class="btn1 btn2 hflex acenter jcenter" v-if="item.status == 0" @click="shelves(item.id)">上架</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="hover hflex acenter jbetween">
			<view class="hflex acenter" @click="toManager">
				<image src="/static/images/common/sort_icon.png" class="hover_icon"></image>
				<view class="hover_text">批量管理</view>
			</view>
			<view class="hflex acenter" @click="add">
				<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,
						status: '',
						name: '全部',
						badge: {
							value: 0,
							bgColor: '#393939',
							color: '#FFFFFF'
						}
					},
					{
						index: 1,
						status: '1',
						name: '售卖中',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 2,
						status: '0',
						name: '已下架',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 3,
						status: '2',
						name: '已售罄',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					
				],
				tab_active: 0,
				current: 0,
				cateList: [],
				left_active: -1,
				right_active: 0,
				pageList: [],
				cate_show: false,
				page: 1,
				limit: 10,
				total: 10,
				triggered: false,
			}
		},
		onLoad() {
			that = this
			that.isLogin()
			// uni.startPullDownRefresh();
		},
		onShow() {
			that.getCate()
		},
		onPullDownRefresh() {
			that.getCate()
		},
		methods: {
			isLogin() {
				var token = uni.getStorageSync('token')
				if(!token) {
					$api.jump('/pages/login/codeLogin/codeLogin')
				}
			},
			getCate() {
				$api.req({
					url: '/data/api.business.Goods/getCate'
				}, function(res) {
					if(res.code == 1) {
						that.cateList = res.data
						that.getList()
					}
				})
			},
			getList() {
				var cateids = ''
				if(that.left_active == -1) {
					cateids = ''
				} else if(that.cateList[that.left_active].sub.length>0) {
					cateids = that.cateList[that.left_active].sub[that.right_active].id
				} else {
					cateids = that.cateList[that.left_active].id
				}
				$api.req({
					url: '/data/api.business.Goods/goods_list',
					data: {
						name: that.search,
						status: that.tabs[that.tab_active].status,
						cateids: cateids,
						page: that.page
					}
				}, function(res) {
					if(res.code == 1) {
						for(var i=0;i<res.data.list.list.length;i++) {
							var temp = res.data.list.list[i].cover.split('|')
							res.data.list.list[i].cover = temp[0]
						}
						for (var i=0;i<that.tabs.length;i++) {
							that.$set(that.tabs[i].badge,'value',res.data.count[i])
						}
						if(that.page == 1) {
							that.pageList = res.data.list.list
						} else {
							that.pageList = that.pageList.concat(res.data.list.list)
						}
						that.total = res.data.list.page.total
						that.limit = res.data.list.page.limit
					}
					uni.stopPullDownRefresh();
				})
				
			},
			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')
					}
				}
				that.left_active = -1
				that.right_active = 0
				that.tab_active = e.index
				that.page = 1
				that.pageList = []
				that.getList()
			},
			clickTab1(e) {
				that.left_active = e
				that.right_active = 0
				that.page = 1
				that.pageList = []
				that.getList()
			},
			clickTab2(e) {
				that.right_active = e
				that.page = 1
				that.pageList = []
				that.getList()
			},
			clickcate(index) {
				that.right_active = index
				console.log(that.right_active);
				that.page = 1
				that.pageList = []
				that.getList()
				that.open()
			},
			openSearch(e) {
				that.search = e
				that.page = 1
				that.pageList = []
				that.getList()
			},
			open() {
				that.cate_show = !that.cate_show
			},
			add() {
				$api.jump('/pages/good/add')
			},
			toManager() {
				$api.jump('/pages/good/manager')
			},
			toEdit(id) {
				$api.jump('/pages/good/add?id=' + id)
			},
			lower(id) {
				$api.req({
					url: '/data/api.business.Goods/lower',
					method: 'POST',
					data: {
						goods_id: id
					}
				}, function(res) {
					if(res.code ==1) {
						$api.info(res.info)
						that.getList()
					}
				})
			},
			shelves(id) {
				$api.req({
					url: '/data/api.business.Goods/shelves',
					method: 'POST',
					data: {
						goods_id: id
					}
				}, function(res) {
					if(res.code ==1) {
						$api.info(res.info)
						that.getList()
					}
				})
			},
			onReachBottom() {
				if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
				
			},
		},
	}
</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%;
			margin-bottom: 328rpx;
			.menu_left {
				width: 200rpx;
				height: 1078rpx;
				background: #F5F5F5;
				border-radius: 0px 28rpx 0px 0px;
				.left_item {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					padding: 30rpx 20rpx;
				}
				.left_active {
					color: #506DFF;
					background: #fff;
				}
			}
			.menu_right {
				width: 550rpx;
				height: 1078rpx;
				background: #FFFFFF;
				position: relative;
				.right_tab {
					background: #F3F3F7;
					border-radius: 24rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #393939;
					line-height: 48rpx;
					padding: 0 24rpx;
					height: 48rpx;
					margin-right: 20rpx;
					
				}
				.right_tab:nth-last-child(1) {
					margin-right: 80rpx;
				}
				.right_tab_active {
					background: #E7EBFF;
					border: 1rpx solid #5471FF;
					color: #5B77FF;
				}
				.cate_bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0,0,0,0.4);
					z-index: 9;
					.cate_top {
						width: 100%;
						box-sizing: border-box;
						padding: 24rpx 20rpx;
						background: #FFFFFF;
						.top_left {
							font-size: 26rpx;
							font-weight: 500;
							color: #393939;
							line-height: 32rpx;
						}
						.top_text {
							font-size: 16rpx;
							font-weight: 400;
							color: #393939;
							line-height: 22rpx;
						}
						.cate {
							height: 48rpx;
							background: #F3F3F7;
							border-radius: 24rpx;
							padding: 0 24rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #393939;
							line-height: 32rpx;
							margin: 24rpx 20rpx 0 0;
						}
						.cate_active {
							background: #E7EBFF;
							border: 1px solid #5471FF;
							color: #5B77FF;
						}
					}
				}
				.tabs_text {
					position: absolute;
					z-index: 99;
					right: 0;
					top: 0;
					width: 80rpx;
					height: 56rpx;
					background: #FFFFFF;
					font-size: 20rpx;
					font-weight: 400;
					color: #393939;
					line-height: 48rpx;
				}
				.right_item {
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					.item_left {
						position: relative;
						.item_cover {
							width: 144rpx;
							height: 144rpx;
							border-radius: 16rpx;
							margin-right: 20rpx;
						}
						.bq1 {
							position: absolute;
							top: 0;
							right: 20rpx;
							width: 60rpx;
							height: 60rpx;
						}
					}
					.item_title {
						max-width: 100%;
						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;
					}
					.item_price {
						margin-top: 22rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #FF2626;
						line-height: 32rpx;
					}
					.item_bottom {
						width: 100%;
						padding: 20rpx;
						.btn1 {
							width: 120rpx;
							height: 48rpx;
							border-radius: 4rpx;
							border: 1rpx solid #708AFF;
							margin-left: 32rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #5B77FF;
							line-height: 40rpx;
						}
						.btn2 {
							border: 1px solid #979797;
							color: #222222;
						}
					}
				}
			}
		}
		.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>