cbz-sj/pages/good/manager.vue

<template>
	<view class="content">
		<view class="tabs">
			<u-tabs :list="tabs" @click="clickTab" lineWidth="0" :scrollable="false" :activeStyle="{color:'#222222',fontSize: '30rpx'}" :inactiveStyle="{color: '#888888'}">
			</u-tabs>
		</view>
		<view class="center">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="box hflex acenter">
					<u-checkbox-group @change="checkboxChange(index)">
						<u-checkbox :checked="item.check" shape="circle"></u-checkbox>
					</u-checkbox-group>
					<image :src="item.cover" class="img"></image>
					<view class="right">
						<view class="item_name text_hide">{{item.name}}</view>
						<view class="item_price">￥<span style="font-size: 32rpx;">{{item.price_selling}}</span></view>
						<view class="item_stock">库存{{item.stock_total}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom hflex jbetween">
			<view class="hflex">
				<u-checkbox-group @change="checkboxChange2" placement="column">
					<u-checkbox shape="circle" :checked="checkAll"></u-checkbox>
				</u-checkbox-group>
				<view class="left_text">全选</view>
			</view>
			<view class="hflex">
				<view class="count_text" v-show="count !== 0">共计{{count}}件</view>
				<view class="btn hflex acenter jcenter" :class="count == 0?'btn1':''" v-if="tab_active == 0" @click="lower">一键下架</view>
				<view class="btn hflex acenter jcenter" :class="count == 0?'btn1':''" v-if="tab_active == 1" @click="shelves">一键上架</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				tabs: [
					{
						index: 0,
						status: 1,
						name: '售卖中',
						badge: {
							value: 0,
							bgColor: '#FF383F',
							color: '#FFFFFF'
						}
					},
					{
						index: 1,
						status: 0,
						name: '已下架',
						badge: {
							value: 0,
							bgColor: '#FF383F',
							color: '#FFFFFF'
						}
					},
					{
						index: 2,
						status: 2,
						name: '已售罄',
						badge: {
							value: 0,
							bgColor: '#FF383F',
							color: '#FFFFFF'
						}
					}
				],
				tab_active: 0,
				pageList: [],
				count:0,
				checkAll: false,
				page: 1,
				limit: 10,
				total: 10
			}
		},
		onLoad() {
			that = this
			that.getList()
		},
		methods: {
			getList() {
				$api.req({
					url: '/data/api.business.Goods/goods_list',
					data: {
						name: '',
						status: that.tabs[that.tab_active].status,
						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+1])
						}
						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",'#FF383F')
						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')
					}
				}
				for(var i=0;i<that.pageList.length;i++) {
					that.$set(that.pageList[i],'check',false)
				}
				that.checkAll = false
				that.count = 0
				that.tab_active = e.index
				that.page = 1
				that.pageList = []
				that.getList()
			},
			checkboxChange(index) {
				if(that.pageList[index].check) {
					that.$set(that.pageList[index],'check',false)
					that.count -= 1 
				} else {
					that.$set(that.pageList[index],'check',true)
					that.count += 1 
				}
			},
			checkboxChange2() {
				that.checkAll = !that.checkAll
				for(var i=0;i<that.pageList.length;i++) {
					if(that.checkAll) {
						that.$set(that.pageList[i],'check',true)
						that.count = that.pageList.length
					} else {
						that.$set(that.pageList[i],'check',false)
						that.count = 0
					}
				}
			},
			lower() {
				var goods_id = ''
				for(var i=0;i<that.pageList.length;i++) {
					if(that.pageList[i].check) {
						goods_id += that.pageList[i].id + ','
					}
				}
				goods_id = goods_id.substr(0,goods_id.length - 1)
				$api.req({
					url: '/data/api.business.Goods/lower',
					method: 'POST',
					data: {
						goods_id: goods_id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.getList()
					}
				})
			},
			shelves() {
				var goods_id = ''
				for(var i=0;i<that.pageList.length;i++) {
					if(that.pageList[i].check) {
						goods_id += that.pageList[i].id + ','
					}
				}
				goods_id = goods_id.substr(0,goods_id.length - 1)
				$api.req({
					url: '/data/api.business.Goods/shelves',
					method: 'POST',
					data: {
						goods_id: goods_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 {
		background: #F4F4F4;
		.tabs {
			width: 100%;
			height: 80rpx;
			background: #ffffff;
		}
		.center {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.box {
				background: #FFFFFF;
				border-radius: 24px;
				margin-top: 20rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				.img {
					width: 164rpx;
					height: 164rpx;
					border-radius: 16rpx;
					margin: 0 16rpx 0 20rpx;
				}
				.right {
					.item_name {
						width: 400rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
						line-height: 42rpx;
						padding: 10rpx 0 18rpx;
					}
					.item_price {
						font-size: 24rpx;
						font-weight: bold;
						color: #FF383F;
						line-height: 28rpx;
					}
					.item_stock {
						font-size: 24rpx;
						font-weight: 400;
						color: #9B9B9B;
						line-height: 34rpx;
						padding: 14rpx 0 8rpx;
					}
				}
			}
			.box:nth-last-child(1) {
				margin-bottom: 186rpx;
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 99;
			box-sizing: border-box;
			padding: 18rpx 30rpx 0;
			.u-checkbox-group--column {
				padding-top: 20rpx;
			}
			.left_text {
				font-size: 26rpx;
				padding-left: 8rpx;
				font-weight: 400;
				color: #393939;
				line-height: 80rpx;
			}
			.count_text {
				font-size: 28rpx;
				font-weight: 400;
				color: #393939;
				line-height: 80rpx;
			}
			.btn {
				width: 216rpx;
				height: 80rpx;
				background: #506EFF;
				border-radius: 40rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			.btn1 {
				background: #AAAAAA;
			}
		}
	}
</style>