dccloud/uni-app-front/pages/template/GetMaterialOuts/GetMaterialOuts.vue

<template>
	<view>
		<uni-list>
			<uni-list-item v-for="(item, index) in listData" :key="index" @click="goDetail(item.materialOutCode)" clickable >
				<view slot="body" class="slot-box">
					<view class="row">
						<view class="column-left">领料编号：</view>
						<view class="column-right">{{item.materialOutCode}}</view>
					</view>
					<view class="row">
						<view class="column-left">状态：</view>
						<view class="column-right">{{item.statusName}}</view>
					</view>
					<view class="row">
						<view class="column-left">领料类型：</view>
						<view class="column-right">{{item.groupName}}</view>
					</view>
					<view class="row">
						<view class="column-left">调拨人：</view>
						<view class="column-right">{{item.outPersonName}}</view>
					</view>
					<view class="row">
						<view class="column-left">领料日期：</view>
						<view class="column-right">{{item.outDate}}</view>
					</view>
					<view class="row">
						<view class="column-left">工程合同：</view>
						<view class="column-right">{{item.contractName}}</view>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		
		<!-- 底部导航开始 /////////////////////////////////////////////////////////////-->
		<!-- is_lhp判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
		<view class="tabBar" :style="{height:is_lhp?'140rpx':'98rpx'}">
			<!-- 导航的中间圆圈 -->
			<view class="border_box" :style="{paddingBottom:is_lhp?'40rpx':''}">
				<view class="tabBar_miden_border"></view>
			</view>
			<view class="tabBar_list" :style="{paddingBottom:is_lhp?'40rpx':''}">
				<view v-for="(item) in tab_nav_list" :key="item.id" :class="{'tabBar_item':item.id!=2,'tabBar_item2':item.id==2}"
				 @tap="cut_index(item.id)">
					<image v-if="show_index == item.id" :src="`/static/tabBar/${item.id+1}${item.id+1}.png`"></image>
					<image v-else :src="`/static/tabBar/${item.id+1}.png`"></image>
					<view :class="{'tabBar_name':true,'nav_active':show_index == item.id}">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 底部导航结束 /////////////////////////////////////////////////////////////-->
	</view>
</template>

<script>
	import {
		getUnit,
		getUnitUser
	} from "@/common/api/commonApi.js";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		GetMaterialOuts
	} from "@/common/api/MaterialInOut.js";

	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				listData: [],
				last_id: '',
				reload: false,
				status: 'more',
                /* 底部导航 */
                show_index: 3, //控制显示那个组件
                tab_nav_list: [{
                	'id': 0,
                	'name': '首页'
                }, {
                	'id': 1,
                	'name': '签证申请'
                }, {
                	'id': 2,
                	'name': '入库单'
                }, {
                	'id': 3,
                	'name': '领料单'
                }, {
                	'id': 4,
                	'name': '质量检查'
                }], //菜单列表
                is_lhp: false,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			};
		},
		onLoad() {
			console.info("当前登录状态:" + this.$store.state.isLogin);
			//console.info(this);
			this.$util.persistLogin(this);
		},
		onPullDownRefresh() {
			this.reload = true;
			this.last_id = '';

			this.getList();
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		created: function() {
			this.getList();
		},
		methods: {

			getList() {
				let that = this;
				let projectcode = that.$util.getState(that,'projectCode');
				let usercode = that.$util.getState(that,'userCode');
				let search = '';
				 
				GetMaterialOuts(projectcode, search).then((res) => {
					console.info(res);
					res.forEach(function(item, index, array) {
						that.$set(that.listData, index, item);
					});
					console.info(that.listData);
				});
			},
			goDetail: function(id) {
				console.info('领料单 godetail',id);
				uni.navigateTo({					
					url: '/pages/template/GetMaterialOutDetail/GetMaterialOutDetail?id=' + id
				});
			},
            // 切换组件
            cut_index(type) {
            	console.log('----------------------------------', type)
            	let _this = this
            	_this.show_index = type
            	if (_this.show_index == 0) {
            		uni.navigateTo({
            			url: '/pages/index/index'
            		})
            	} else if (_this.show_index == 1) {
            		uni.navigateTo({
            			url: '/pages/template/requisitionlist/requisitionlist'
            		})
            	} else if (_this.show_index == 2) {
            
            		uni.navigateTo({
            			url: '/pages/template/GetMaterialIns/GetMaterialIns'
            		})
            	} else if (_this.show_index == 3) {
            		uni.navigateTo({
            			url: '/pages/template/GetMaterialOuts/GetMaterialOuts'
            		})
            
            	}else if (_this.show_index == 4) {
            		uni.navigateTo({
            			url: '/pages/template/GetSafeQualityCheckDTOs/GetSafeQualityCheckDTOs?type=0'
            		})
            
            	}
            
            }
		}
	};
</script>

<style scoped>
	
</style>