SmartStorage/pages/fetchMaterial/fetchMaterial.vue

<template>
	<view>
		<view class="nav-bar">
			<uni-icons @click="clickLeft" type="left" size="40"></uni-icons>
			<h4 style="font-weight: normal;">领料申请</h4>
			<uni-badge size="small" :text="badgeNum" absolute="leftTop">
				<uni-icons @click="clickOrderCart" type="cart" size="40"></uni-icons>
			</uni-badge>
		</view>
		<view class="search-bar">
			<uni-easyinput suffixIcon="search" v-model="searchVal" placeholder="请输入商品名称" @iconClick="searchClick"></uni-easyinput>
		</view>
		<view class="switch-bar">
			<view
				:class="[{ active: switchStatus == 0 }]"
				@click="switchUpper(1, 0, 0)"
			>
				全部
			</view>
			<view
				:class="[{ active: switchStatus == 1 }]"
				@click="switchUpper(1, 0, 1)"
			>
				施工机具类
			</view>
			<view
				:class="[{ active: switchStatus == 2 }]"
				@click="switchUpper(1, 0, 2)"
			>
				安全工器具类
			</view>
		</view>
		<view 
			class="sliders"
			v-show="subList.length != 0"
		>
			<view
				v-for="(item, index) in subList"
				:key="index"
				:class="[{ active: lowerStatus == item.id }]"
				@click="switchLower(item.id, item.level)"
			>
				{{ item.label }}
			</view>
		</view>
		<view class="items">
			<view 
				class="single-item"
				v-for="(item, index) in itemList"
				:key="index"
				@click="jumpDeviceDetail(item.typeId, item.typeName)"
			>
				<view class="img">
					<image :src="item.photoUrl" mode=""></image>
				</view>
				<view class="name">
					{{ item.typeName }}
				</view>
				<view class="price">
					<span style="font-weight: bold; color: #F29907;">￥</span>{{ item.leasePrice }}
				</view>
			</view>
		</view>
		<uni-popup 
			ref="popup" 
			type="center"
			:mask-click="false"
		>
			<view class="popup">
				<view class="pop-top">
					<h4>部门工程选择</h4>
					<uni-icons 
						style="color: #AAAAAA; font-weight: bold;" 
						type="closeempty" 
						size="32"
						@click="closePopup"
					>
					</uni-icons>
				</view>
				<view class="select-area">
					<uni-forms ref="deptForm" :modelValue="deptFormData" :rules="rules">
						<uni-forms-item name="deptName" required label="选择部门" label-width="100">
							<uni-data-select
							  v-model="deptFormData.deptName"
							  :localdata="deptRange"
							></uni-data-select>
						</uni-forms-item>
						<uni-forms-item name="projName" required label="选择工程" label-width="100">
							<uni-data-select
							  v-model="deptFormData.projName"
							  :localdata="projRange"
							></uni-data-select>
						</uni-forms-item>
						<button class="submit-btn" @click="formSubmit">保存</button>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { basePath } from '../../public';
	export default {
		data() {
			return {
				searchVal: '',
				switchStatus: 0,
				lowerStatus: 0,
				deptFormData: {
					deptName: '',
					projName: ''
				},
				deptRange: [
					{ text: '1', value: '1' },
					{ text: '2', value: '2' },
					{ text: '3', value: '3' }
				],
				projRange: [
					{ text: '4', value: '4' },
					{ text: '5', value: '5' },
					{ text: '6', value: '6' }
				],
				rules: {
					deptName: {
						rules: [
							{
								required: true,
								errorMessage: '请选择部门！'
							}
						]
					},
					projName: {
						rules: [
							{
								required: true,
								errorMessage: '请选择工程！'
							}
						]
					}
				},
				subList: [],
				itemList: [],
				badgeNum: uni.getStorageSync('goodList').length
			}
		},
		methods: {
			searchClick () {
				console.log(this.searchVal);
			},
			clickLeft () {
				uni.navigateBack()
			},
			clickOrderCart () {
				uni.navigateTo({
					url: '/pages/orderCart/orderCart'
				})
			},
			switchUpper (level, parentId, type) {
				this.switchStatus = type
				this.selectType(level, parentId, type)
			},
			switchLower (id, level) {
				this.lowerStatus = id
				console.log(id, level, this.switchStatus);
				this.showDeviceDetail(level, id, this.switchStatus)
			},
			closePopup () {
				this.$refs.popup.close()
			},
			formSubmit () {
				let that = this
				that.$refs.deptForm.validate().then(formData => {
					console.log(formData);
					that.$refs.popup.close()
				})
			},
			jumpDeviceDetail (id, name) {
				uni.navigateTo({
					url: `/pages/deviceDetail/deviceDetail?id=${id}&name=${name}`
				})
			},
			selectType (level, parentId, type) {
				let that = this
				that.subList = []
				that.$api.fetchMaterial.fetchMaterialList({
					level, parentId, type
				}, null).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						for (let i = 0; i < res.data.data.length; i++) {
							for (let k = 0; k < res.data.data[i].children.length; k++) {
								that.subList.push(res.data.data[i].children[k])
							}
						}
						console.log(that.subList[0]);
						console.log(that.subList[0].level, that.subList[0].parentId);
						that.lowerStatus = that.subList[0].id
						that.showDeviceDetail(that.subList[0].level, that.subList[0].id, that.switchStatus)
					}
				}).catch(err => {
					throw err
				})
			},
			showDeviceDetail (level, parentId, type) {
				let that = this
				that.itemList = []
				that.$api.fetchMaterial.fetchMaterialList({
					level, parentId, type
				}, null).then(res => {
					if (res.data.code == 200) {
						that.itemList = res.data.data
						console.log(that.itemList);
					}
				}).catch(err => {
					throw err
				})
			}
		},
		onShow() {
			let that = this
			if (uni.getStorageSync('goodList').length == 0 || !uni.getStorageSync('goodList')) {
				uni.setStorageSync('goodList', [])
			}
			console.log(uni.getStorageSync('goodList'));
			this.selectType(1, 0, 0)
			that.switchStatus = 0
			that.lowerStatus = 0
			// 初始化查询全部商品
			that.itemList = []
		}
	}
</script>

<style lang="scss">
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search-bar{
		width: 95%;
		margin: 30rpx auto;
	}
	.switch-bar{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		font-size: 14px;
		view{
			margin-right: 30rpx;
		}
		.active{
			border-bottom: 2px solid #339FF9;
			color: #339FF9;
		}
	}
	.sliders{
		width: 95%;
		margin: 30rpx auto;
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		font-size: 12px;
		view{
			box-sizing: border-box;
			padding: 8rpx 20rpx;
			display: inline-block;
		}
		.active{
			color: #339FF9;
		}
	}
	.items{
		width: 95%;
		margin: 30rpx auto;
		box-sizing: border-box;
		padding: 15rpx;
		border-radius: 15rpx;
		background-color: #FDF9F9;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.single-item{
			width: 48%;
			background-color: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 15rpx;
			margin-bottom: 15rpx;
			.img{
				width: 100%;
				height: 15vh;
				border-radius: 15rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.name{
				width: 95%;
				margin: 10rpx auto;
				font-size: 14px;
				font-weight: bold;
			}
			.price{
				width: 100%;
				font-size: 12px;
			}
		}
	}
	.popup{
		width: 80vw;
		height: 50vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		.pop-top{
			width: 100%;
			height: 5vh;
			background-color: #F5F5F5;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.select-area{
			width: 85%;
			margin: 40rpx auto;
			.submit-btn{
				background-color: #409EFF;
				color: #fff;
			}
		}
	}
</style>