uniapp-canteen/pages/canteen/classification/supplier.vue

<template>
	<view>
		<view class="head" v-if="tab_list.length">
			<uni-search-bar @confirm="search" @cancel="cancelSearch" placeholder="搜索供应商" radius="90" bgColor="#f6f6f6" ></uni-search-bar>
		</view>
		<view class="lf-flex content" v-if="tab_list.length">
			<scroll-view :scroll-y="true" class="scroll-left"
				v-if="!is_search_ing"
				:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}">
				<view class="tab-item" :class="{'activa': index == current}" v-for="(item, index) in tab_list" :key="index" @click="switchTab(index)">{{ item.c_cate_name }}</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="scroll-right"
				:style="{height: 'calc('+ windowHeight +'px - 222rpx)', width:is_search_ing?'100%':'550rpx'}">
				<view class="supplier-item" v-for="(item, index) in tab_list[current].list" :key="index">
					<label class="lf-row-between" @click="switchChecked(item)">
						<view style="height: 40rpx;">{{ item.supplier_name }}</view>
						<u-icon name="checkmark-circle-fill" size="40" color="#11D189" v-if="item.checked"></u-icon>
					</label>
				</view>
				<view class="loading-more">
					<lf-nocontent v-if="!tab_list[current].list.length"></lf-nocontent>
				</view>
			</scroll-view>
		</view>
		<!-- 操作按钮 -->
		<view class="fixed-bottom">
			<button class="btn btn1" @click="cancel">取消</button>
			<button class="btn btn2" @click="next">下一步</button>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	
	export default {
		data(){
			return {
				windowHeight: 0,
				tab_list: [],
				checked_list: {},
				current: 0, // tab下标
				supplier_name: '', // 当前搜索值，搜索的是供应商
				is_search_ing: false, // 是否处于搜索中
				request_count: 0, // 请求次数
				show_count: 0, // 页面显示次数
			}
		},
		onLoad(){
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		onShow(){
			this.show_count++;
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; // 上一页
			if(!prevPage){
				let path_url = '/pages/canteen/index/index';
				this.$msg('页面异常, 即将跳转').then(result => {
					this.$url(path_url, {type: 'launch'});
				})
				return;
			}
			this.checked_list = prevPage.$data.material_list;
			
			if(this.show_count <= 1){
				this.getData();
			}
		},
		methods: {
			// 搜索
			search(event){
				this.is_search_ing = true;
				this.supplier_name = event.value;
				this.current = this.tab_list.length; // 搜索的数据放到最后一项
				this.tab_list.push({c_cate_name: '搜索', list: []});
				this.getData({supplier_name: event.value});
			},
			// 取消搜索
			cancelSearch(){
				this.is_search_ing = false;
				this.supplier_name = '';
				this.current = 0;
				this.tab_list.pop();
			},
			// 获取数据
			getData(options){
				// let requestData = {
				// 	canteen_id: 6, // todo，准备改成不需要传，应该在登录接口时一并返回，要不然其他页面获取不到
				// 	...options
				// }
				this.request_count++;
				
				this.$http(this.API.API_CANTEEN_SUPPLIERLIST, {
					...options
				}).then(res => {
					if(this.request_count <= 1){
						let category = res.data.category || [];
						let tab_list = category.map(item => {
							item.list = [];
							return item;
						})
						let list = res.data.list.map(item => {
							if(this.checked_list[item.id]){
								item.checked = true;
							}else{
								item.checked = false;
							}
							return item;
						})
						tab_list[this.current].list = list;
						this.tab_list = tab_list;
					}else{
						let list = res.data.list.map(item => {
							if(this.checked_list[item.id]){
								item.checked = true;
							}else{
								item.checked = false;
							}
							return item; 
						})
						this.tab_list[this.current].list = list;
					}
				})
			},
			// 切换tab
			switchTab(current){
				this.current = current;
				let item = this.tab_list[this.current];
				if(item && item.list.length <= 0){ // 已经有数据了，就不在请求了
					this.getData({s_cate_id: item.id});
				}
			},
			// 切换每个供应商的多选状态
			switchChecked(item){
				item.checked = !item.checked;
				// 当前是否存于搜搜中，如果是，需要做额外的处理[tab中的list也要对应的移除]
				if(this.is_search_ing){
					this.tab_list.forEach(t_item => {
						t_item.list.forEach(l_item => {
							if(l_item.id == item.id){
								l_item.checked = item.checked;
							}
						})
					})
				}
				
				if(item.checked){
					item.material_list = {}; // 物资列表
					this.checked_list[item.id] = item;
				}else{
					delete this.checked_list[item.id];
				}
				uni.$emit('addMaterialList', this.checked_list);
				console.log("checked_list", this.checked_list)
			},
			// 取消
			cancel(){
				this.checked_list = {};
				uni.$emit('addMaterialList', this.checked_list);
				this.$toBack();
			},
			// 下一步
			next(){
				this.$url('/pages/canteen/classification/material');
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	/deep/.uni-searchbar__box{
		border: none;
	}
	.head{
		padding: 14rpx 16rpx;
	}
	.scroll-left{
		width: 200rpx;
		background-color: #F6F6F6;
		.tab-item{
			height: 90rpx;
			width: 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #555555;
		}
		.activa{
			color: #11D189;
		}
	}
	.scroll-right{
		width: 550rpx;
		background-color: #FFFFFF;
		.supplier-item{
			padding: 30rpx 32rpx 30rpx 30rpx;
			width: 100%;
			height: max-content;
			box-sizing: border-box;
			border-bottom: 1rpx solid #e5e5e5;
			font-size: 28rpx;
			color: #222222;
		}
	}
	.fixed-bottom{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 99;
		width: 750rpx;
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E5E5E5;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 32rpx;
		.btn{
			width: 320rpx;
			height: 82rpx;
			border-radius: 41rpx;
			margin: 0;
			padding: 0;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			border: 2rpx solid #555555;
			opacity: .5;
		}
		.btn2{
			background: #11D189;
			color: #FFFFFF;
		}
	}
</style>