RedDragonfly/pages/dealer/parric.vue

<template>
	<view class="particulars">
		<view class="top">
			<text class="text" @click="showDrawer()">
				筛选
			</text>
			<uni-drawer ref="showRight" mode="right" :width="340">
				<view class="close">
					<view class="par">
						<text class="tad">
							品牌
						</text>
						<view class="th">
							<view class="td" :class="brandIndex == i ? 'active' : ''" v-for="(v,i) in brand" :key="i"
								@click="change(v,i,1)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							是否转基因
						</text>
						<view class="th">
							<view class="td" :class="geneIndex == i ? 'active' : ''" v-for="(v,i) in gene" :key="i"
								@click="change(v,i,2)">
								{{v == -1 ? '全部' : v == 0 ? '转基因' : v== 1 ? '非转基因' : '其他'}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							等级
						</text>
						<view class="th">
							<view class="td" :class="levelIndex == i ? 'active' : ''" v-for="(v,i) in level" :key="i"
								@click="change(v,i,3)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="par">
						<text class="tad">
							容量
						</text>
						<view class="th">
							<view class="td" :class="capacityIndex == i ? 'active' : ''" v-for="(v,i) in capacity" :key="i"
								@click="change(v,i,4)">
								{{v}}
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="" @click="reset()">
							重置
						</view>
						<view class="" @click="confirm()">
							确定
						</view>
					</view>
				</view>
			</uni-drawer>
		</view>
		<view class="main">
			<view class="hint" v-if="wu">
				暂无数据
			</view>
			<view class="tab" v-for="(v, i) in chartData" :key="i">
				<view class="th">
					<view class="">
						{{v.name}}
					</view>
					<view class="">
						{{v.sendBox}}箱/{{v.sendTotal}}瓶
					</view>
				</view>
				<view class="th">
					<view class="">
						{{v.sendId}}
					</view>
					<view class="">
						{{getTime(v.sendTime)}}
					</view>
				</view>
			</view>
		</view>
		<view class="bom">
			合计: {{sendBox}}箱/{{sendTotal}}瓶
		</view>
	</view>
</template>

<script>
import {productSearch,product} from '../../api/dealer.js'
	export default {
		data() {
			return {
				wu: false,
				sendBox: 0,
				sendTotal: 0,
				showRight: false,
				showLeft: false,
				id:'',
				BeginSingle: '',
				FinishSingle: '',
				chartData: '',
				brandIndex: 0,
				capacityIndex: 0,
				geneIndex: 0,
				levelIndex: 0,
				warehouseIndex: 0,
				brand: [],
				capacity: [],
				gene: [],
				level: [],
				warehouse: [],
				brandName: '',
				capacityName: '',
				geneName: '',
				levelName: '',
				warehouseName: '',
				date:''
			};
		},
		onLoad(options) {
			this.date = options.date
			this.name = options.name
			this.dealerName = options.dealerName
			if (this.name) {
				uni.setNavigationBarTitle({
					title: this.dealerName + '—' +this.name
				});
			}
			this.getData()
		},
		mounted() {
			this.getScreen()
		},
		methods: {
			async getData() {
				uni.showLoading({
					title: '加载中'
				});
				const res = await product({
					name: this.dealerName,
					month: this.date,
					typeName: this.name,
					brand: this.brandName,
					gene: this.gene,
					level: this.levelName,
					capacity: this.capacityName,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.chartData = res.data.list
				if(this.chartData === 0){
					this.wu = true
				}
				let that = this
				res.data.list.forEach(v=>{
					that.sendBox += v.sendBox
					that.sendTotal += v.sendTotal
				})
			},
			async getScreen() {
				const res = await productSearch({
					name: this.dealerName,
					month: this.date,
					typeName: this.name,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				this.brand = res.data.data.brand
				this.brand.unshift("全部品牌")
				this.level = res.data.data.level
				this.level.unshift("全部等级")
				this.capacity = res.data.data.capacity
				this.capacity.unshift("全部容量")
				this.gene = res.data.data.gene
				this.gene.unshift(-1)
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs.showRight.open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs.showRight.close()
			},
			// 点击
			change(v, i, num) {
				if (num === 1) {
					this.brandIndex = i
					if (i == 0) {
						this.brandName = ''
					} else {
						this.brandName = v
					}
				} else if (num === 2) {
					this.geneIndex = i
					if (i == 0) {
						this.geneName = ''
					} else {
						this.geneName = v
					}
				} else if (num === 3) {
					this.levelIndex = i
					if (i == 0) {
						this.levelName = ''
					} else {
						this.levelName = v
					}
				} else if (num === 4) {
					this.capacityIndex = i
					if (i == 0) {
						this.capacityName = ''
					} else {
						this.capacityName = v
					}
				}
			},
			// 筛选重置
			reset() {
				this.brandIndex = 0
				this.capacityIndex = 0
				this.geneIndex = 0
				this.levelIndex = 0
				this.warehouseIndex = 0
				this.brandName = ''
				this.capacityName = ''
				this.geneName = ''
				this.levelName = ''
				this.warehouseName = ''
			},
			// 筛选确定
			confirm() {
				this.getData()
				this.closeDrawer()
			},
			// 获取时间
			getTime(time = new Date()) {
				let date = new Date(time);
				let	year = date.getFullYear();
				let	month = date.getMonth() + 1;
				let	day = date.getDate();
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				let minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
					month >= 1 && month <= 9 ? (month = "0" + month) : "";
					day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day + ' ' + hour + ':'+ minute;
				return timer;
			},
		}
	}
</script>

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

		.top {
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			background-color: #e40315;

			.text {
				padding: 30rpx;
				color: #fff;
			}

			.close {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.par {
					text-align: left;
					padding: 20rpx;

					.th {
						display: flex;
						flex-wrap: wrap;

						.td {
							background-color: #eff3f6;
							height: 50rpx;
							line-height: 50rpx;
							padding: 0 20rpx;
							border-radius: 4px;
							margin: 0 10rpx 10rpx 0;
						}

						.active {
							background-color: #e40315;
							color: #fff;
						}
					}
				}

				.btn {
					height: 80rpx;
					padding: 10rpx;
					display: flex;
					margin-bottom: 20rpx;

					view {
						height: 100%;
						flex: 1;
						background-color: #e40315;
						border-right: 2rpx solid #fff;
						text-align: center;
						color: #fff;
						line-height: 80rpx;
					}
				}
			}
		}

		.main {
			flex: 1;
			overflow-y: scroll;
			padding: 0 20rpx;
			.hint{
				text-align: center;
			}
			.tab {
				padding: 15rpx 0;
				border-bottom: 1rpx solid #e3e3e3;

				&>view:nth-child(2) {
					margin: 10rpx 0;
				}

				.th {
					display: flex;
					justify-content: space-between;
				}

				.td {
					color: #818181;
				}
			}
		}

		.bom {
			height: 120rpx;
			border-top: 10rpx solid #f1f1f1;
			text-align: center;
			line-height: 120rpx;
			color: #e40315;
			font-size: 26rpx;
		}
	}
</style>