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

<template>
	<view class="content">
		<view class="top hflex acenter">
			<u-navbar :placeholder="true" height="44">
				<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>
		
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			    :refresher-threshold="100" refresher-background="white"
			    @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" >
			<view class="tabs">
				<u-tabs :list="tabs" scrollable @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 && item.examine == 1" class="bq1"></image>
										<image src="/static/images/common/img_bq2.png" v-if="item.status == 0 && item.examine == 1" class="bq1"></image>
									</view>
									<view class="vflex" style="width: calc(100% - 168rpx);">
										<view class="hflex acenter jbetween" style="width: 100%;">
											<view class="item_title text_hide2">{{item.name}}</view>
											<view class="item_price text_red" v-if="item.examine!=1">{{item.examine == 0?'审核中':'审核失败'}}</view>
										</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 && item.examine == 1" @click="lower(item.id)">下架</view>
									<view class="btn1 btn2 hflex acenter jcenter" v-if="item.status == 0 && item.examine == 1" @click="shelves(item.id)">上架</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</scroll-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: '',
						examine: '0,2',
						name: '审核中',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 2,
						status: '1',
						name: '售卖中',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 3,
						status: '0',
						name: '已下架',
						badge: {
							value: 0,
							bgColor: '#EDEDED',
							color: '#888888'
						}
					},
					{
						index: 4,
						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()
			this._freshing = false;
			/* setTimeout(() => {
				this.triggered = true;
			}, 1000) */
			// uni.startPullDownRefresh();
		},
		onShow() {
			that.getCate()
			if(uni.getStorageSync('spectitle')) {
				uni.removeStorageSync('spectitle')
			}
			if(uni.getStorageSync('specData')) {
				uni.removeStorageSync('specData')
			}
		},
		/* onPullDownRefresh() {
			that.getCate()
		}, */
		methods: {
			onPulling(e) {
				// console.log("onpulling", e);
			},
			onRefresh() {
				that.getCate()
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				// console.log("onRestore");
			},
			onAbort() {
				// console.log("onAbort");
			},
			isLogin() {
				var token = uni.getStorageSync('token')
				if(!token) {
					$api.jump('/pages/login/login/login')
				}
			},
			getCate() {
				$api.req({
					url: '/data/api.business.Goods/getCate'
				}, function(res) {
					// uni.stopPullDownRefresh();
					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,
						examine: that.tab_active == '1' ? '0,2' : '',
						cateids: cateids,
						page: that.page
					}
				}, function(res) {
					that.onRestore()
					if(res.code == 1) {
						console.log('商品列表：',res);
						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]
						}
						that.$set(that.tabs[0].badge,'value',res.data.count[0])
						that.$set(that.tabs[1].badge,'value',res.data.count[4])
						that.$set(that.tabs[2].badge,'value',res.data.count[1])
						that.$set(that.tabs[3].badge,'value',res.data.count[2])
						that.$set(that.tabs[4].badge,'value',res.data.count[3])
						console.log('--------',that.tabs);
						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
					}
				})
				
			},
			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 {
			position: fixed;
			top: 166rpx;
			background: #FFF;
			z-index: 99;
		}
		.menuList {
			width: 100%;
			padding: 10rpx 0 0;
			margin: 88rpx 0 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;
					}
					.text_red {
						color: #FF2626;
					}
					.item_price {
						margin-top: 22rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #FF2626;
						line-height: 32rpx;
						white-space: nowrap;
					}
					.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>