RedDragonfly/pages/fleeingGoods/early.vue

<template>
	<view class="staff">
		<view class="search">
			<input class="uni-input" v-model="keyword" placeholder="请输入" />
			<view class="btn" @click="searchHistory()">搜索</view>
		</view>
		<scroll-view scroll-y="true" class="main" @scrolltolower="more()">
			<view class="list" v-for="(v,i) in aList" :key="i">
				<view class="li">
					<view class="left">
						产品名称
					</view>
					<view class="right">
						{{v.name}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						瓶码
					</view>
					<view class="right">
						{{v.bottleId}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						箱码
					</view>
					<view class="right">
						{{v.boxId}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						配送单
					</view>
					<view class="right">
						{{v.sendId}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						配送日期
					</view>
					<view class="right">
						{{getTime(v.sendTime)}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						经销商
					</view>
					<view class="right">
						{{v.agencyName}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						经销商所在地
					</view>
					<view class="right">
						{{v.agencyRegion}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						上报地点
					</view>
					<view class="right">
						{{v.region}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						窜货说明
					</view>
					<view class="right">
						{{v.remark}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						上报时间
					</view>
					<view class="right">
						{{getTime(v.submitTime)}}
					</view>
				</view>
				<view class="li">
					<view class="left">
						上报人
					</view>
					<view class="right button" @click="open">
						{{v.submit}}
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</scroll-view>
		<view class="sum">
			总计: {{sum}}个上报记录
		</view>
	</view>
</template>

<script>
	import {
		search
	} from '../../api/fleeing.js'
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['date'],
		data() {
			return {
				keyword: '',
				aList: [], //展示的数据
				sum: '',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pages: 1,
				status: 'more',
			};
		},
		watch: {
			date(v1, v2) {
				this.getData()
			}
		},
		computed: {
			...mapState({
				submit: store => store.user.name
			})
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				let res = await search({
					conditions: this.keyword,
					submit: this.submit || '',
					submitTime: this.date,
					type: 0,
					num: 10,
					page: 1,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.aList = [...this.aList, ...res.data.list]
				this.sum = res.data.count
				if(this.sum === this.aList.length){
					this.status = "noMore"
				}
			},
			// 获取时间
			getTime(time = new Date()) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '年' + month + '月' + day + '日';
				return timer;
			},
			searchHistory() {
				this.getData()
			},
			// 上拉加载更多
			more() {
				if(this.status != "noMore"){
					this.status = 'loading'
					this.pages++;
					this.getData()
				}	
			}
		},
	}
</script>

<style lang="scss">
	.staff {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.search {
			height: 80rpx;
			display: flex;
			padding: 10rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.uni-input {
				flex: 1;
				height: 100%;
				padding-left: 20rpx;
			}

			.btn {
				width: 20%;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
				background-color: #f4f4f4;
			}
		}

		.main {
			height: calc(100% - 200rpx);
			padding: 0 20rpx;
			box-sizing: border-box;
			.list {
				border-bottom: 10rpx solid #dfdfdf;

				.li {
					display: flex;
					border-bottom: 1rpx solid #c5c5c5;
					padding: 20rpx 0;

					&:last-child {
						border-bottom: 0;
					}

					.left {
						width: 160rpx;
					}

					.right {
						flex: 1;
						color: #707070;
						text-align: right;
					}
				}
			}
		}

		.sum {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color: #e40315;
			border-top: 10rpx solid #dfdfdf;
		}
	}
</style>