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

<template>
	<!-- 出库明细页面 -->
	<view class="header">
		<view class="header-one">
			{{$t('scancodeenter.total')}}：<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 @tap="$u.throttle(whole, 500)">{{$t('scancodeenter.tabs_a')}}</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">{{$t('scancodeenter.tabs_b')}}</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">{{$t('scancodeenter.tabs_c')}}</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="$t('scancodeenter.tips')" @change="inputbox" v-model="keyword" :show-action="false"></u-search>
		</view>
		<view class="nothing" v-if="judge==true">
			<u-empty :text="$t('scancodeenter.nodata')"></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>{{$t('scancodeenter.number')}}：{{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 u-font-28" style="width: 100%;" slot="title">
								<view>
									{{item2.tireModel}}
								</view>
								<view class="">
									{{item2.tyreCount}}{{$t('scancodeenter.strip')}}
								</view>
							</view>
							<view class="details" v-for="(item3,index) in item2.matnrMsgVOS" :key="index">
								<view class="u-font-25">
									<view>{{$t('scancodeenter.describe')}}</view>
									<view>{{item3.maktx}}</view>
								</view>
								<view class="u-font-25">
									<view>{{$t('scancodeenter.number_d')}}</view>
									<view>{{item3.tyreNum}}</view>
								</view>
								<view class="u-font-25">
									<view>{{$t('scancodeenter.activity')}}</view>
									<view v-if="item3.satisfyActivity == 1">{{$t('scancodeenter.participation')}}</view>
									<view v-else>{{$t('scancodeenter.noparticipation')}}</view>
								</view>
								<view class="u-font-25">
									<view>{{$t('scancodeenter.creationtime')}}</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="$t('scancodeenter.daterange')"  :mode="mode" @change="time" :mask-close-able="false" :start-text="$t('scancodeenter.start')" :end-text="$t('scancodeenter.end')"></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: this.$t('scancodeenter.loadmore'),
					loading: this.$t('scancodeenter.loading'),
					nomore: this.$t('scancodeenter.nomore')
				},
				style: '.5rpx solid #FFFFFF',
				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: ''
			}
		},
		onBackPress(options) {
			
			if (options.from == 'backbutton') {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/me/index'
				})
			}
			return true;
		},
		onReachBottom() {
			this.status = 'loading';
			this.page++
			if (this.itemList.length >= this.length) {
				this.status = 'nomore';
			} else {
				this.getPage()
			}
		},
		created() {
			uni.setNavigationBarTitle({
			    title: this.$t('scancodeenter.titleOut')
			});
			this.page = 1
			this.whole()
		},
		
		methods: {
			content_s() {
				
			},
			inputbox(e) {
				this.page = 1
				
				this.bottoma = true
				this.bottomb = false
				this.bottomc = false
				
				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 {
					
					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"
				
				
				
				this.current = 0
				this.getPage()
			},
			click(index) {
				this.page = 1
				
				this.brandCode = this.list_a[index].brandCode
				this.itemList = []
				this.judge = true
				
				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
				
				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/getBrandListByStoreId',
						method: 'Post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							userId: this.$store.state.storeInfo.userId
						}
					}).then(res => {
						
						
						for (let i = 0; i < res.data.data.length; i++) {
							
							this.list_a.push({
								brandCode: res.data.data[i].brandCode,
								text: res.data.data[i].brandName,
								color: '#000',
								fontSize: 28
							})
						}
					}).catch(err => {
						
					}).finally(() => {
						// Loading.close()
					})
				}
			},
			time_s() {
				this.itemList = []
				this.judge = true
				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 => {
			// 				
			// 				
			// 				for (let i = 0; i < res.data.data.length; i++) {
			// 					
			// 					this.list_a.push({
			// 						brandCode: res.data.data[i].brandCode,
			// 						text: res.data.data[i].brandName,
			// 						color: '#000',
			// 						fontSize: 28
			// 					})
			// 				}
			// 			}).catch(err => {
			// 				
			// 			}).finally(() => {
			// 				// Loading.close()
			// 			})
			// 		}
			// 	} else if (index == 0) {
			// 		this.page = 0
			// 		
			// 		this.getPage()
			// 	} else if (index == 2) {
			// 		this.show_d = true
			// 	}
			// 	
			// },
			getPage() {
				
				uni.showLoading({
					title: this.$t('unified.Loading')
				});
				
				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 => {
					
					if(res.data.code == 500){
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							position: "bottom"
						})
					}else{
					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
					}
					
					return this.itemList
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: this.$t('scancodeenter.networkstate'),
						position: "bottom"
					})
				}).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>