qjd-shell-uniapp/pagesGood/goodList.vue

<template>
	<view class="container">
		<view class="search-box">
			<uni-search-bar ref="searchBar" radius="5" placeholder="搜索" :defaultText="goodName" clearButton="auto" cancelButton="none"
			 bgColor="#f7f7f7" @confirm="search" class="search-bar" />
		</view>
		<view class="data-tab">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A"
			 inactive-color="#666666" :bold="false" height="90"></u-tabs>
		</view>
		<scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(1)" v-if="tabIndex==0">
			<goodItem v-for="(item, index) in list1" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
		</scroll-view>
		<scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(2)" v-else-if="tabIndex==1">
			<goodItem v-for="(item, index) in list2" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
		</scroll-view>
		<scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(3)" v-else-if="tabIndex==2">
			<goodItem v-for="(item, index) in list3" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
		</scroll-view>
		<view class="good-handle">
			<uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle1" :buttonGroup="buttonGroup1" v-if="!manageType" />
			<uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup2" v-else-if="tabIndex == 0" />
			<uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup3" v-else-if="tabIndex == 1" />
			<uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup4" v-else-if="tabIndex == 2" />
		</view>
		<u-popup v-model="popupShow" mode="bottom">
			<view class="good-handle-box">
				<u-button class="handle-button" :hair-line="false" @click="addGood(1)">普通售卖</u-button>
				<u-button class="handle-button" :hair-line="false" @click="addGood(2)">拍卖</u-button>
				<u-button class="handle-button" :hair-line="false" @click="addGood(3)">自助采摘</u-button>
				<u-button class="handle-close" @click="popupShow = false">取消</u-button>
			</view>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	import goodItem from '@/pagesGood/goodItem.vue'
	export default {
		components: {
			goodItem
		},
		data() {
			return {
				goodName: '',
				tabIndex: 0,
				tabList: [{
					name: '出售中'
				}, {
					name: '已售空'
				}, {
					name: '已下架'
				}],
				pageIndex1: 1,
				isOver1: false,
				list1: [],
				pageIndex2: 1,
				isOver2: false,
				list2: [],
				pageIndex3: 1,
				isOver3: false,
				list3: [],
				manageType: false,
				popupShow: false,
				buttonGroup1: [{
					text: '批量管理',
					backgroundColor: '#75BD60',
					color: '#fff'
				}, {
					text: '添加商品',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
				buttonGroup2: [{
					text: '取消',
					backgroundColor: '#52A63A',
					color: '#fff'
				}, {
					text: '下架',
					backgroundColor: '#52A63A',
					color: '#fff'
				}, {
					text: '删除',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
				buttonGroup3: [{
					text: '取消',
					backgroundColor: '#75BD60',
					color: '#fff'
				}, {
					text: '删除',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
				buttonGroup4: [{
					text: '取消',
					backgroundColor: '#52A63A',
					color: '#fff'
				}, {
					text: '上架',
					backgroundColor: '#52A63A',
					color: '#fff'
				}, {
					text: '删除',
					backgroundColor: '#52A63A',
					color: '#fff'
				}],
			}
		},
		onLoad(options) {},
		onShow(options) {
			this.reasetList()
		},
		methods: {
			//  搜索商品
			search(data) {
				this.goodName = data.value
				this.reasetList()
			},
			//  切换tab
			changeTabs(index) {
				this.tabIndex = index;
				this.reasetList()
			},
			//  刷新数据
			reasetList() {
				this['isOver' + (this.tabIndex + 1)] = false
				this['pageIndex' + (this.tabIndex + 1)] = 1
				this['list' + (this.tabIndex + 1)] = []
				this.getList(this.tabIndex + 1)
			},
			//  懒加载
			handleLoadMore(type) {
				if (!this['isOver' + type]) {
					this['pageIndex' + type]++
					this.getList(type)
				}
			},
			//  获取列表数据
			getList(type) {
				NET.request(API.getGoodList, {
					name: this.goodName,
					pageIndex: this['pageIndex' + type],
					pageSize: 10,
					type: type,
				}, 'POST').then(res => {
					this['isOver' + type] = res.data.list.length != 10
					res.data.list.forEach(site => {
						site.check = false
					})
					this['list' + type] = this['list' + type].concat(res.data.list)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  全部分类下查询
			goodHandle1(e) {
				if (e.index == 0) {
					this.manageType = true
				} else {
					this.popupShow = true
				}
			},
			//  各分类下批量操作
			goodHandle2(e) {
				if (e.index == 0) {
					this.manageType = false
				} else {
					NET.request(API.setGoodsStatus, {
						ids: this['list' + (this.tabIndex + 1)].filter(site => site.check).map(site => {
							return site.id
						}),
						operation: (this.tabIndex == 0 && e.index == 1) ? 1 : ((this.tabIndex == 2 && e.index == 1) ? 2 : 3),
						type: this.tabIndex == 0 ? 1 : 2
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '操作成功',
							type: 'success',
						})
						this.reasetList()
					}).catch(error => {
						this.$refs.uTips.show({
							title: error.data.msg,
							type: 'warning',
						})
					})
				}
			},
			//  新增商品
			addGood(type) {
				this.popupShow = false
				uni.navigateTo({
					url: '/pagesGood/goodForm?type=add&formType=' + type
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		position: relative;
		background-color: #f7f7f7;

		.search-box {
			width: 100%;
			height: 58px;
			box-sizing: border-box;
			padding: 2px 12px 1px 12px;
			background-color: #FFFFFF;
		}

		.data-tab {
			width: 100%;
			height: 45px;
			float: left;
		}

		.data-list {
			width: 100%;
			height: calc(100% - 154px);
			float: left;
		}

		.good-handle {
			width: 100%;
			position: absolute;
			bottom: 0px;
			height: 50px;
			background: #ffffff;
		}

		.good-handle-box {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 20px;

			.handle-button {
				width: 100%;
				height: 66px;
				float: left;
				font-size: 15px;
				font-family: PingFang SC;
				color: #333333;
				line-height: 66px;
				border: none;
				border-top: 1px solid #E0E0E0;
				border-radius: 0;
			}

			.handle-button:first-child {
				border-top: none;
			}

			.handle-close {
				width: 125px;
				height: 42px;
				float: left;
				background: #F1F1F1;
				border-radius: 5px;
				font-size: 16px;
				font-family: PingFang SC;
				color: #51A539;
				line-height: 42px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
			}

			/deep/.u-btn--default {
				border: none;
			}
		}
	}
</style>