sailun-tbr-web/pages/me/Warehousing-details/index.vue

<template>
	<!-- 入库明细页面 -->
	<view class="header">
		<view class="header-one">
			库存总量：<text>{{total}}</text>
		</view>
		<view style="width: 100%;margin-top: 60rpx;">
			<u-tabs style="width: 350rpx;float: left;margin-top: 0;" :list="list" :is-scroll="false" :current="current" @change="change"
			 active-color="#fff" inactive-color="#ffffff" bg-color="#ffffff00"></u-tabs>
			<u-search class="inputbox" placeholder="请输入胎号或规格" @change="inputbox" v-model="keyword"
			 :show-action="false"></u-search>
		</view>
		<view class="nothing" v-if="judge==true">
			<u-empty text="暂无数据"></u-empty>
		</view>
		<view style="width: 100%;margin-top: 160rpx;">
			<view class="block" v-for="(item, index) in itemList" :key="index">
				<view class="title">
					<view>|</view>
					<view>单号：{{item.scanNum}} </view>
					<view>{{item.scanTime.slice(0,10)}}</view>
				</view>
				<u-line color="#f4f4f4"></u-line>
				<view v-for="item2 in item.tyreMsgVOList">
					<u-collapse>
						<u-collapse-item style="margin-left: 10rpx;">
							<view class="u-flex u-row-between" style="width: 100%;" slot="title">
								<view>
									{{item2.tireModel}}
								</view>
								<view class="">
									{{item2.tyreCount}}条
								</view>
							</view>
							<view class="details" v-for="item3 in item2.matnrMsgVOS">
								<view>
									<view>物料描述</view>
									<view>{{item3.maktx}}</view>
								</view>
								<view>
									<view>轮胎胎号</view>
									<view>{{item3.tyreNum}}</view>
								</view>
								<view>
									<view>参加活动</view>
									<view>{{item3.satisfyActivity}}</view>
								</view>
								<view>
									<view>创建时间</view>
									<view>{{item3.createDate}}</view>
								</view>
								<u-line color="#f4f4f4"></u-line>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<view style="margin-top: 30rpx;margin-bottom: 30rpx;">
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>
			<u-action-sheet :list="list_a" @click="click" v-model="show" :mask-close-able="false" @close="close"></u-action-sheet>
			<u-calendar v-model="show_d" toolTip="请选择日期范围" :closeable="false" :mode="mode" @change="time" :mask-close-able="false"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				status: 'loadmore',
				iconType: 'flower',
				show: false,
				judge: true,
				show_d: false,
				mode: 'range',
				loadText: {
					loadmore: '无数据',
					loading: '努力加载中',
					nomore: '我是有底线的'
				},
				list: [{
					name: '全部'
				}, {
					name: '品牌'
				}, {
					name: '时间'
				}],
				brandCode: null,
				list_a: [],
				current: 0,
				keyword: '',
				itemList: [],
				total: '',
				size: 10,
				page: 0,
				beginDate: null,
				endDate: null,
				content: null,
				length:''
			}
		},
		onReachBottom() {
			this.status = 'loading';
			this.page++
			if(this.itemList.length >= this.length){
				this.status = 'nomore';
			}else{
				this.getPage()
			}
		},
		created() {
			this.page = 1
			this.getPage()
		},
		methods: {
			content_s(){
				console.log(this.keyword)
			},
			inputbox(e){
				this.page = 1
				console.log(e)
				this.itemList = []
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = e
				if(this.itemList.length >= this.length){
					this.status = 'nomore';
				}else{
					this.getPage()
				}
			},
			close() {
				this.current = 0
				this.page = 1
				this.getPage()
			},
			
			time(e) {
				this.page = 1
				this.itemList = []
				this.beginDate = e.startDate + " 00:00:00"
				this.endDate = e.endDate + " 00:00:00"
				console.log(e)
				console.log("触发了")
				console.log(this.show_d)
				this.current = 0
				this.getPage()
			},
			click(index) {
				this.page = 1
				console.log(`点击了第${index + 1}项，内容为：${this.list_a[index].brandCode}`)
				this.brandCode = this.list_a[index].brandCode
				this.itemList = []
				this.judge = true
				console.log(this.judge)
				this.getPage()
			},
			change(index) {
				this.current = index;
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = null
				if (index == 1) {
					this.show = true
					if (this.list_a.length == 0) {
						request({
							url: '/baseReq/getBrandList',
							method: 'Post',
							data: {
								storeId: '1000',
								userId: '123'
							}
						}).then(res => {
							console.log(res)
							console.log(res.data.data)
							for (let i = 0; i < res.data.data.length; i++) {
								console.log(res.data.data[i].brandCode)
								this.list_a.push({
									brandCode: res.data.data[i].brandCode,
									text: res.data.data[i].brandName,
									color: '#000',
									fontSize: 28
								})
							}
						}).catch(err => {
							console.log(err)
						}).finally(() => {
							// Loading.close()
						})
					}
				} else if (index == 0) {
					this.page = 0
					console.log(this.brandCode)
					this.getPage()
				} else if (index == 2) {
					this.show_d = true
				}
				console.log(this.current)
			},
			getPage() {
				console.log(this.page)
				console.log(this.brandCode)
				console.log(this.beginDate)
				console.log(this.endDate)
				console.log(this.content)
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
				request({
					url: '/myPage/getPageScanRecordList',
					method: 'Post',
					data: {
						storeId: '1000',
						userId: '123',
						size: this.size,
						current: this.page, //获取第几页
						scanType: '1',
						brandCode: this.brandCode,
						beginDate: this.beginDate, //开始时间
						endDate: this.endDate, //结束时间
						content: this.content //搜索内容
					}
				}).then(res => {
					console.log(res)
					this.total = res.data.stock
					this.length = res.data.count
					this.itemList = this.itemList.concat(res.data.record)
					if (this.itemList.length >= res.data.count) this.status = 'nomore';
					else this.status = 'loading';
					if (this.itemList.length == 0) {
						this.judge = true
					} else {
						this.judge = false
					}
					console.log(this.itemList)
					return this.itemList
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					// Loading.close()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.details>view {
		width: 96%;
		height: 54rpx;
		color: #303134;
	}

	.details>view>view:nth-child(1) {
		float: left;
	}

	.details>view>view:nth-child(2) {
		float: right;
	}
	.inputbox{
		width: 350rpx;
		float: right;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}
	.title {
		width: 98%;
		height: 60rpx;
		margin: 0 auto;
		padding-top: 10rpx;
		// background-color: #55aa7f;
	}

	.title>view:nth-child(1) {
		font-size: 34rpx;
		font-weight: bold;
		color: #0094FE;
		float: left;
	}

	.title>view:nth-child(2) {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
		float: left;
		position: relative;
		top: 10%;
	}

	.title>view:nth-child(3) {
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		float: right;
		position: relative;
		top: 10%;
	}

	.block {
		width: 96%;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 15rpx;
		box-shadow: 0 0 24rpx 0 rgba(101, 176, 249, 0.41);
	}

	.nothing {
		width: 96%;
		height: 800rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 200rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 24rpx 0 rgba(101, 176, 249, 0.41);
	}

	.header {
		height: 400rpx;
		width: 100%;
		background: #0094FE;
		color: #fff;
		font-size: 28rpx;
	}

	.header-one {
		text-align: center;
		padding-top: 40rpx;
	}

	.header-one>text {
		font-size: 52rpx;
	}
</style>