hldy_xcx/pages/supplierindex/orgMaterial.vue

<template>
	<view>
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="uni.navigateBack()">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<view style="font-size: 30rpx;">物料编辑</view>
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
		<view class="box">
			 <view v-for="(v,i) in materialTypeList" @click="checkMaterialType(v.materialTypeId)">{{v.typeName}}</view>
		</view>
		<view>
			<view class="queding" @click="handleYulan">
				预览
			</view>
			<view class="queding" @click="handleQueren">
				确定
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	 import { reactive, ref, onMounted, onUnmounted, } from 'vue';
	 import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	 import { getSuppliersMaterialType, getSuppliersMaterialInfo } from './api.js'
	 const orgObj = ref({});//机构信息
	 const materialTypeList = ref([]);//物料分类集合
	 const materialInfoList = ref([]);//物料信息集合
	 const materialTypeId = ref('');//物料分类选中条件
	 const openId = uni.getStorageSync('openid');//用户id
	 onLoad((e)=>{
		 orgObj.value = JSON.parse(e.orgObj);
		 console.log('orgObj.value-->',orgObj.value);
		 getMaterialType();//获取分类信息
		 // getMaterialInfo();//获取物料信息
	 })
	 //获取分类信息
	 const getMaterialType = ()=>{
		 let obj = {
			 orgCode: orgObj.value.orgCode,
			 openId: openId
		 }
		 getSuppliersMaterialType(obj).then(res=>{
			 console.log('1--->',res);
			 materialTypeList.value = res.result
		 })
	 }
	 //获取物料信息
	 const getMaterialInfo = ()=>{
		 let obj = {
			 orgCode: orgObj.value.orgCode,
			 materialTypeId: materialTypeId.value,
			 openId: openId
		 }
		 console.log('getMaterialInfo-obj--->', obj);
		 getSuppliersMaterialInfo(obj).then(res=>{
			 console.log('2--->',res);
			 // list.value.push(...res.result) 
		 })
	 }
	 //选中物料分类
	 const checkMaterialType = (checkId)=>{
		 console.log('checkId--->',checkId);
		 materialTypeId.value = checkId;
		 console.log('materialTypeId.value>',materialTypeId.value);
		 getMaterialInfo();
	 }
	 //预览
	 const handleYulan = ()=>{
		 
	 }
	 //确认
	 const handleQueren = ()=>{
		 
	 }
</script>

<style lang="less" scoped>
	.bottom-button-qiehuan {
		width: 70rpx;
		height: 42rpx;
		background-color: #E1EFFC;
		border-radius: 20rpx;
		border: #CAE0F9 1rpx solid;
		display: flex;
		align-items: center;
		position: relative;
	
		.blue-ball {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			margin-left: 30rpx;
			background-color: #0385FA;
			position: relative;
		}
		.guodu {
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
	}
	.noact{
		background-color:#f3f3f3;
		.blue-ball {
			background-color: #666;
		}
	}
	.queding{
		width: 320rpx;
		height: 100rpx;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(180deg, #E6F4FE,#CCE8FE,#CAE6FE);
		color: #0083FA;
		font-size: 36rpx;
		font-weight: 900;
		margin: 80rpx auto 30rpx;
	}
	.box{
		width: 700rpx;
		padding: 15rpx;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 30rpx;
		.cont{
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E5E5E5;
			font-size: 28rpx;
			position: relative;
			.one-left-imge {
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 50%;
				right: 8rpx;
				transform: translateY(-50%);
			}
			.left{
				width: 200rpx;
				color: #646464;
				padding-left: 15rpx;
			}
			.cot{
				color: #9E9E9E;
				max-width: 400rpx;
				input{
					max-width: 400rpx;
					color: #9E9E9E;
				}
			}
		}
	}

.title-back {
		background-color: #F7F7F7;
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #cbd1d2;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.left-father {
		display: flex;
		align-items: center;
		z-index: 1;

		.back-img {
			width: 45rpx;
			height: 40rpx;
			margin-left: 40rpx;
			margin-right: 15rpx;
		}
	}
</style>
<style>
	page{
		background: RGBA(247, 247, 247, 1);
	}
</style>