sailun-tbr-web/pages/me/Delivery-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> -->
			<view style="width: 340rpx;height: 80rpx;text-align: center;padding-top: 25rpx;padding-left: 20rpx;float: left;margin-top: 0;margin-left: 30rpx;">
				<view style="float: left;">
					<text @click="whole">全部</text>
					<view v-if="bottoma == true" style="width: 100%;height: 1rpx;background-color: #FFFFFF;border-radius: 10rpx;"></view>
					<view v-else></view>
				</view>
				<view style="float: left;margin-left: 70rpx;">
					<text @click="brand">品牌</text>
					<view  v-if="bottomb == true" style="width: 100%;height: 1rpx;background-color: #FFFFFF;border-radius: 10rpx;"></view>
					<view v-else></view>
				</view>
				<view style="float: left;margin-left: 70rpx;">
					<text @click="time_s">时间</text>
					<view  v-if="bottomc == true" style="width: 100%;height: 1rpx;background-color: #FFFFFF;border-radius: 10rpx;"></view>
					<view v-else></view>
				</view>
			</view>
			<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,index) in item.tyreMsgVOList" :key="index">
					<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,index) in item2.matnrMsgVOS" :key="index">
								<view>
									<view>物料描述</view>
									<view>{{item3.maktx}}</view>
								</view>
								<view>
									<view>轮胎胎号</view>
									<view>{{item3.tyreNum}}</view>
								</view>
								<view>
									<view>参加活动</view>
									<view v-if="item3.satisfyActivity == 1">参加</view>
									<view v-else>不参加</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: '我是有底线的'
				},
				style: '.5rpx solid #FFFFFF',
				list: [{
					name: '全部'
				}, {
					name: '品牌'
				}, {
					name: '时间'
				}],
				brandCode: null,
				list_a: [],
				current: 0,
				keyword: '',
				bottoma: true,
				bottomb: false,
				bottomc: false,
				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.whole()
		},
		methods: {
			content_s() {
				console.log(this.keyword)
			},
			inputbox(e) {
				this.page = 1
				console.log(e)
				console.log(this.length)
				this.itemList = []
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = e
				if (this.itemList.length >= this.length) {
					this.status = 'nomore';
					this.getPage()
				} else {
					console.log("什么情况")
					this.getPage()
				}
			},
			close() {
				this.whole()
			},
			time(e) {
				this.page = 1
				this.itemList = []
				this.beginDate = e.startDate + " 00:00:00"
				this.endDate = e.endDate + " 23:59:59"
				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()
			},
			whole() {
				this.itemList = []
				this.bottoma = true
				this.bottomb = false
				this.bottomc = false
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = null
				this.page = 1
				console.log(this.brandCode)
				this.getPage()
			},
			brand() {
				this.bottoma = false
				this.bottomb = true
				this.bottomc = false
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = null
				this.show = true
				if (this.list_a.length == 0) {
					request({
						url: '/baseReq/getBrandList',
						method: 'Post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							userId: this.$store.state.storeInfo.userId
						}
					}).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()
					})
				}
			},
			time_s() {
				this.bottoma = false
				this.bottomb = false
				this.bottomc = true
				this.brandCode = null
				this.beginDate = null
				this.endDate = null
				this.content = null
				this.show_d = true
			},
			// 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:this.$store.state.storeInfo.storeId,
			// 					userId:this.$store.state.storeInfo.userId
			// 				}
			// 			}).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: '加载中...'
				});
				console.log("加载中")
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
				request({
					url: '/myPage/getPageScanRecordList',
					method: 'Post',
					data: {
						storeId: this.$store.state.storeInfo.storeId,
						userId: this.$store.state.storeInfo.userId,
						size: this.size,
						current: this.page, //获取第几页
						scanType: '2',
						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>