uniapp-canteen/pages/canteen/classification/material.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.m_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.material_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="prev">上一步</button>
			<button class="btn btn2" @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				windowHeight: 0,
				tab_list: [],
				current: 0, // tab下标
				material_name: '', // 当前搜索值，搜索的是物资
				checked_list: {},
				is_search_ing: false, // 是否处于搜索中
				request_count: 0, // 请求次数
			}
		},
		onLoad(){
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 3]; // 上上一页
			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;
			
			/*
			this.checked_list = {
				"1": {
					address: "广西南宁市青秀区青秀万达店",
					admin_uid: 1,
					area_id: 2165,
					checked: true,
					city_id: 2163,
					corporate_account: "6214456799861234",
					corporate_account_name: "刘淑怡粮油店",
					corporate_bank: "招商银行",
					corporate_bank_sub: "青秀区支行",
					corporate_name: "法人",
					corporate_phone: "15699896658",
					created_at: "2021-07-17 11:34:50",
					created_uid: 1,
					ctl_man: "刘淑怡",
					ctl_phone: "13397706896",
					deleted_at: null,
					deleted_uid: 0,
					id: 1,
					license_number: "11559896646",
					license_pic: "admin_images/5bbbc1e4f96bc5566c43bb006d36cc37.jpg",
					logo: "admin_images/83e16f0d0c9dd01f1bfd62ddf150607e.jpeg",
					material_list: {},
					private_account: "",
					private_account_name: "",
					private_bank: "",
					private_bank_sub: "",
					province_id: 2162,
					qualification_pic: "",
					remark: "测试备注，我只改个备注",
					s_cate_id: 1,
					state: "启用",
					subject_name: "主体名称",
					subject_type: "公司",
					supplier_name: "供应商001",
					updated_at: "2021-07-17 16:25:58",
					updated_uid: 1
				},
				"2": {
					address: "F座6楼",
					admin_uid: 3,
					area_id: 2165,
					checked: true,
					city_id: 2163,
					corporate_account: "",
					corporate_account_name: "",
					corporate_bank: "",
					corporate_bank_sub: "",
					corporate_name: "",
					corporate_phone: "",
					created_at: "2021-07-17 20:28:17",
					created_uid: 1,
					ctl_man: "芳芳",
					ctl_phone: "13397706896",
					deleted_at: null,
					deleted_uid: 0,
					id: 2,
					license_number: "",
					license_pic: "",
					logo: "admin_images/skyshareimg.jpeg",
					material_list: {},
					private_account: "",
					private_account_name: "",
					private_bank: "",
					private_bank_sub: "",
					province_id: 2162,
					qualification_pic: "",
					remark: "",
					s_cate_id: 2,
					state: "启用",
					subject_name: "",
					subject_type: "公司",
					supplier_name: "供应商002",
					updated_at: "2021-07-27 12:00:01",
					updated_uid: 1
				}
			};
			*/
			
			
			this.getData();
		},
		methods: {
			// 搜索
			search(event){
				this.is_search_ing = true;
				this.material_name = event.value;
				this.current = this.tab_list.length; // 搜索的数据放到最后一项
				this.tab_list.push({m_cate_name: '搜索', list: []});
				this.getData({keyword: event.value});
			},
			// 取消搜索
			cancelSearch(){
				this.is_search_ing = false;
				this.material_name = '';
				this.current = 0;
				this.tab_list.pop();
			},
			// 获取数据
			getData(options){
				let supplier_ids = Object.keys(this.checked_list);
				this.request_count++;
				this.$http(this.API.API_CANTEEN_MATERIALLIST, {
					supplier_ids: supplier_ids, // 供应商id
					...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.material.map(item => {
							if(this.checked_list[item.supplier_id]){
								item.checked = false;
								if(this.checked_list[item.supplier_id].material_list[item.material_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.material.map(item => {
							if(this.checked_list[item.supplier_id]){
								item.checked = false;
								if(this.checked_list[item.supplier_id].material_list[item.material_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({cate_id: item.id});
				}
			},
			// 切换每个供应商的多选状态
			switchChecked(item){
				// 备用改变item.checked方案
				// let tabItem = this.tab_list[this.current];
				// let item = tabItem.list[index];
				// item.checked = !item.checked;
				// this.tab_list[this.current] = tabItem;
				// 新方案
				item.checked = !item.checked;
				if(this.is_search_ing){
					this.tab_list.forEach(t_item => {
						t_item.list.forEach(l_item => {
							if(l_item.material_id == item.material_id){
								l_item.checked = item.checked;
							}
						})
					})
				}
				if(item.checked){
					this.checked_list[item.supplier_id].material_list[item.material_id] = item;
				}else{
					delete this.checked_list[item.supplier_id].material_list[item.material_id];
				}
				uni.$emit('addMaterialList', this.checked_list);
				console.log("checked_list", this.checked_list)
			},
			// 全部选择完毕
			submit(){
				console.log("sssss",this.tab_list);
				console.log("kkkk", this.checked_list);
				
				// todo关闭所有页面跳转 
				// this.$url('/pages/canteen/purchase/launch', {type: 'launch'})
				// this.$toBack(2); // 跳回前两个页面
			},
			// 上一步
			prev(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; // 上一页
				this.checked_list = prevPage.$data.checked_list;
				uni.$emit('addMaterialList', this.checked_list);
				this.$toBack();
			}
		}
	}
</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>