emergencyManagement/pages/goods/record.vue

<template>
	<view class="page-wrap">
		<view class="pageTabs">
			<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />	
		</view>	
		<view class="pageMain">
			<uni-swipe-action class="item-action-box">
				<uni-card padding="10px 0" margin="5px 0" v-for="item in items" :key="item.memberId">
					<uni-swipe-action-item class="item-action" :auto-close="true" >
						<template v-slot:right>
							<view class="slot-button">
								<view class="bt detail" @click="handle('detail',item)"><text class="slot-button-text">详情</text></view>
								<view class="bt edit" @click="handle('edit',item)"><text class="slot-button-text">编辑</text></view>
								<view class="bt del" @click="handle('del',item)"><text class="slot-button-text">删除</text></view>
							</view>
						</template>
						<view class="item">
							<view class="title">
								<view class="name">{{item.accountName}}</view>									
								<view class="num">
									<uni-tag :text="item.qty" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
								</view>
							</view>
							<view class="tagbox">
								<uni-tag :text="item.goodsCatTitle" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
							</view>
							<view class="bottom">
								<view class="time">{{item.time}}</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-card>
			</uni-swipe-action>
		</view>
	</view>
</template>

<script>
	import goodsApi from '@/api/goods.js'
	export default {
		data() {
			return {
				tabIdx:0,
				tabs:['入库记录','出库记录'],	
				items:[],
				goodsType:undefined,
				page:1,	
				size:10,
				total:0,	
				keywords:""	
			}
		},
		onLoad({type}) {
			this.goodsType=type
			this.getData()
		},
		methods: {
			changeTab({currentIndex}){
				if (this.tabIdx !== currentIndex) {
					this.tabIdx = currentIndex				
					this.page = 1
					this.size = 10
					this.total = 0
					this.getData()
				}
			},
			getData(){
				const getByPage=this.tabIdx===0?goodsApi.getInboundByPage:goodsApi.getOutboundByPage
				getByPage({
					page:this.page,
					size:this.size,
					goodsType:this.goodsType
				}).then((res)=>{
					this.items=res.data.map((item)=>{
						return{
							...item,
							time:this.tabIdx===0?item.inboundTime:item.outboundTime,
							
						}
					})
					this.total=res.total
				})
			},
			handle(type,item){
				
			}
		},
		onReachBottom() {
			if(this.total>this.size*this.page){
				this.page++
				this.getData()				
			}
		}
	}
</script>
<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.pageTabs{
		background-color: #fff;
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.item{
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-size: 36rpx;
					color: #222222;
					font-weight: 500;
				}
				.num{
					font-size: 32rpx;
					color: #424242;
				}
			}
			.tagbox{
				font-size: 24rpx;
				color: #666666;
				padding: 14rpx 0;
			}
			.bottom{
				.time{
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.slot-button{
			width: 400rpx;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding-left: 10px;
			.bt{
				width: 50%;
				height: 100%;
				font-size: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				&.edit{
				    background-color:#007aff;
				}
				&.del{
					background-color:#F56C6C;
				}
				&.detail{
					background-color: #e6a23c;
				}
			}
		}
	}
}
</style>