risk-wx/pages/listview.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<view class="example-body vertical-layout">
			<!-- 用户头像 -->
			<!-- <image :src="avatar" class="user" @click="userTo()">
			</image> -->
			<!-- <view style="width: 100%; height: 98rpx"></view> -->
			<view class="falseSearch">
				<u-search bgColor="#fff" hover-class="search" @search="getOrderBillsPlansList()"
					@confirm="getOrderBillsPlansList()" :showAction="false" placeholder="模糊检索装卸厂家品名"
					v-model="condition.orderNo">
				</u-search>
				<text class="search" hover-class="search-click" @click="getOrderBillsPlansList()">搜索</text>
			</view>
		</view>
		<!-- tab -->
		<view style="background-color: #3c9cff;">
			<u-tabs :list="tabs" lineColor="#fff" lineWidth="60" @change="change" :activeStyle="{
					width: '150rpx',
					height: '60rpx',
					color: '#fff',
					backgroundColor: '#3c9cff',
					borderRadius: '80rpx',
					lineHeight: '60rpx',
					textAlign: 'center'
					}" :inactiveStyle="{
					width: '150rpx',
					height: '60rpx',
					color: '#fff',
					backgroundColor: '#3c9cff',
					borderRadius: '80rpx',
					lineHeight: '60rpx',
					textAlign: 'center'
					}"></u-tabs>
		</view>
		
		<!-- 日期 -->
		<view style="position: sticky;top: 120rpx;">
			<view style="background-color: white">
				<uni-datetime-picker v-model="condition.range" @change="datetimePickerChange" type="daterange" />
			</view>
		</view>
		<view class="dataList">

			<!-- 列表 -->
			<view class="list" v-for="(item,index) in orderBillsPlansList"
				@click="jumpDetails(item.orderNo, item.status)">
				<!-- 头部 -->
				<view class="head vertical-layout">
					<view class="no" style="font-size: 34rpx;">
						<view class="blueStick-blue"></view>
						<!-- 车号 -->
						<text class="odd">{{ item.carRegNo == null ? '' : item.carRegNo }}</text>
					</view>
					<view class="date"><!-- 
						<text class="true" v-if="item.status317 == 2">{{ item.billStatusName }}</text>
						<text class="yellow"
							v-if="item.status317 == 6 && (item.status376 == 0 || item.status376 == 2)">{{ item.billStatusName }}</text>
						<text class="false"
							v-if="item.status317 == 6 && item.status376 == 6">{{ item.billStatusName }}</text> -->
						<!-- <text class="true" v-if="condition.type == 'BD'">{{ item.billStatusName }}</text>
						<text class="yellow" v-if="condition.type == 'BX'">{{ item.billStatusName }}</text> -->
						<!-- <text style="color: #3c9cff;" v-if="item.billStatusName == '费用已提交'">{{ item.billStatusName }}</text>
						<text style="color: green;" v-if="item.billStatusName == '审核通过'">{{ item.billStatusName }}</text>
						<text style="color: #fa4434;" v-if="item.billStatusName == '审核驳回'">{{ item.billStatusName }}</text>
						<text style="color: #3c9cff;" v-if="item.billStatusName == '里程已提交'">{{ item.billStatusName }}</text>
						<text style="color: #fcbd71;" v-if="item.billStatusName == '里程待提交'">{{ item.billStatusName }}</text>
						<text style="color: #fcbd71;" v-if="item.billStatusName == '费用待提交'">{{ item.billStatusName }}</text> -->
						
						<text style="color: #55aaff;" v-if="item.billStatusName == '未装车'">{{ item.billStatusName }}</text>
						<text style="color: #fcbd71;" v-if="item.billStatusName == '未卸车'">{{ item.billStatusName }}</text>
						<text style="color: #3c9cff;" v-if="item.billStatusName == '已卸车'">{{ item.billStatusName }}</text>
						<text style="color: #3c9cff;" v-if="item.billStatusName == '已提交'">{{ item.billStatusName }}</text>
						<text style="color: green;" v-if="item.billStatusName == '已通过'">{{ item.billStatusName }}</text>
						<text style="color: #fa4434;" v-if="item.billStatusName == '已退回'">{{ item.billStatusName }}</text>
						<text style="color: #fcbd71;" v-if="item.billStatusName == '未提交'">{{ item.billStatusName }}</text>
					</view>
				</view>
				<view class="details">

					<view class="didian">
						<view class="text">
							<text>{{ item.loadAddr == null ? '' : item.loadAddr }}</text>
						</view>
						<view class="freight">
							<view class="goods">
								<text>{{ item.goodsCName == null ? '' : item.goodsCName }}</text>
							</view>
							<span class="icon iconfont"
								style="font-size: 100rpx; color: #fcbd71; height: 80rpx;">&#xe6fb;</span>
							<view class="rightqty" style="height: 50rpx;">
								<text>{{ item.rightqty == null ? '' : item.rightqty + "吨" }}</text>
							</view>
						</view>
						<view class="text">
							<text>{{ item.unLoadAddr == null ? '' : item.unLoadAddr }}</text>
						</view>
					</view>
					<view class="date-transact">
						<view class="date">
							<text>{{ item.billDate == null ? '' : item.billDate}}</text>
						</view>
						<view class="transact">
							<text>{{ item.transact == null ? '' : item.transact}}</text>
						</view>
					</view>
					<!-- <view class="data">
						<text class="key">装货品名</text>
						<text class="value">{{ item.goodsCName == null ? '' : item.goodsCName }}
							{{ item.rightqty == null ? '' : item.rightqty + "吨" }}</text>
					</view>
					<view class="data vertical-layout">
						<view class="a">
							<text class="key">派单日期</text>
							<text class="value">{{ item.billDate == null ? '' : item.billDate}}</text>
						</view>
						<view class="b">
							<text class="key">业务员</text>
							<text class="value">{{ item.transact == null ? '' : item.transact }}</text>
						</view>
					</view> -->
				</view>
			</view>

		</view>
		<!-- 加载页 -->
		<u-loading-page bg-color="rgba(0,0,0,0.5)" color="#fff" loadingColor="#fff" style="z-index: 999;" :loading="loadingPageLoading"></u-loading-page>
	</view>
</template>

<script>
	import {
		orderBillsPlansList
	} from "@/api/home"
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				// 查询条件
				condition: {
					range: [],
					head: 1,
					tail: 9
				},
				// tabs
				tabs: [],
				// 数据
				orderBillsPlansList: [],
				show: false,
				// 加载页
				loadingPageLoading: true
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
		},
		onLoad(option) {
			this.condition.type = option.type;
			if (option.type == 'BD') {
				uni.setNavigationBarTitle({
					title: '报单列表'
				});
				this.tabs = [{
                    name: '未装车',
                }, {
                    name: '未卸车'
                }, {
                    name: '已卸车'
                }, {
                    name: '已提交'
                }]
				this.condition.flowType = '未装车'
			} else if (option.type == 'BX'){
				uni.setNavigationBarTitle({
					title: '报销列表'
				});
				this.tabs = [{
				    name: '未提交',
				}, {
				    name: '已提交'
				}, {
				    name: '已通过'
				}, {
				    name: '已退回'
				}]
				this.condition.flowType = '未提交'
			}
			this.getCurrentMonthFirst();
			this.getOrderBillsPlansList();
		},
		onReachBottom() {
			this.condition.head += 9;
			this.condition.tail += 9;
			orderBillsPlansList(this.condition).then(res => {
				var next_data = res.data;
				this.orderBillsPlansList = this.orderBillsPlansList.concat(next_data);
			})
		},
		methods: {
			datetimePickerChange(date) {
				console.log(date);
				this.condition.range = date
				this.getOrderBillsPlansList();
			},
			// 查询主页数据
			getOrderBillsPlansList(type) {
				this.loadingPageLoading = true
				this.condition.head = 1;
				this.condition.tail = 9;
				orderBillsPlansList(this.condition).then(res => {
					this.orderBillsPlansList = res.data;
					this.loadingPageLoading = false
				})
			},
			// 跳转详情
			jumpDetails(orderNo, status) {

				if (this.condition.type == 'BD') {
					uni.navigateTo({
						url: 'particulars/index?orderNo=' + orderNo + '&status=' + status
					});
				} else if (this.condition.type == 'BX') {
					uni.navigateTo({
						url: '/pages/particulars/claimExpense/index?orderNo=' + orderNo + '&status=' + status
					});
				}

			},
			// 跳转用户信息
			userTo() {
				uni.navigateTo({
					url: 'mine/index'
				});

			},
			change(item) {
				this.condition.flowType = item.name
				this.getOrderBillsPlansList();
			},
			//获取当前月份第一天和最后一天
			getCurrentMonthFirst() {
				var date = new Date();
				var nowDate = new Date()
				var fullYear = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1;
				var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
				date.setDate(1);
				var beginDate = date.toISOString().slice(0, 10);
				var endDate = this.getFullDate(new Date().setDate(endOfMonth));


				var date1 = new Date();
				var date2 = new Date(date1);

				//-30为30天前，+30可以获得30天后的日期
				date2.setDate(date1.getDate() - 30);

				//30天前（月份判断是否小于10，小于10的前面+0）
				var agoDay =
					`${date2.getFullYear()}-${date2.getMonth() + 1<10?`0${date2.getMonth() + 1}`:date2.getMonth() + 1}`;

				var date = date2.getDate() + "";

				if (date.length == 1) {
					date = 0 + date
				}

				agoDay += "-" + date

				this.condition.range.push(agoDay, endDate);

			},
			// 日期格式化
			getFullDate(targetDate) {
				var D, y, m, d;
				if (targetDate) {
					D = new Date(targetDate);
					y = D.getFullYear();
					m = D.getMonth() + 1;
					d = D.getDate();
				} else {
					y = fullYear;
					m = month;
					d = date;
				}
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;
				return y + '-' + m + '-' + d;
			}

		},
	}
</script>

<style lang="scss">
	@import url("/font/iconfont.css");

	// 修改布局方向为纵向布局
	.vertical-layout {
		display: flex;
	}

	// 文字浅蓝色
	.colorBlue {
		color: #3c9cff;
	}

	.blueStick-blue {
		width: 10rpx;
		height: 100%;
		border-radius: 5rpx;
		background-color: #3c9cff;
	}

	.blueStick-red {
		width: 10rpx;
		height: 100%;
		border-radius: 5rpx;
		background-color: red;
	}

	.img {
		padding-left: 20rpx;
		max-width: 30rpx;
	}

	// 头部
	.example-body {

		box-sizing: border-box;

		width: 100%;
		height: 120rpx;
		position: -webkit-sticky;
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		background-color: #3c9cff;

		padding-left: 40rpx;

		align-items: center;

		// 用户头像
		.user {
			width: 90rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background-color: #c4c6c9;
			margin-right: 40rpx;
		}

		// 搜索框
		.falseSearch {
			height: 80rpx;
			border-radius: 35rpx;

			width: 680rpx;

			display: flex;
			background-color: #fff;

			align-content: center;
			align-items: center;

			color: #c4c6c9;

			// 搜索按钮
			.search {
				height: 100%;
				border-radius: 35rpx;
				color: #303133;
				text-align: center;
				line-height: 80rpx;
				padding: 0 40rpx;
			}

			.search-click {
				background-color: pink;
			}

		}
	}

	.dataList {

		box-sizing: border-box;
		padding-left: 10rpx;
		padding-right: 10rpx;

		.list {

			padding-top: 5rpx;

			border-radius: 20rpx;
			margin-top: 20rpx;
			background-color: white;
			padding-bottom: 15rpx;

			box-shadow: 1px 1px 2px 2px rgba(76, 76, 76, 0.1);

			.head {



				height: 50rpx;
				margin: 10rpx 20rpx 20rpx 20rpx;

				padding-top: 6rpx;
				padding-bottom: 6rpx;

				// margin-bottom: 20rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;

				.no {

					height: 100%;
					display: flex;
					align-items: center;

					.odd {
						height: 100%;
						display: flex;
						align-items: center;
						padding-left: 15rpx;
						font-weight: 700;
					}
				}

				.date {

					font-weight: 600;

					.true {
						color: #fa4434;
					}

					.yellow {
						color: #3c9cff;
					}

					.false {
						color: green;
					}
				}
			}

			.details {
				color: #3d3e41;

				.didian {
					display: flex;
					justify-content: space-around;
					align-items: center;

					border-bottom: 2rpx solid #f2f2f0;

					.text {
						font-size: 36rpx;
						font-weight: 600;
					}

					.freight {
						display: flex;
						flex-direction: column;
						align-items: center;

						.goods {
							font-weight: 600;
						}

						.rightqty {
							font-weight: 600;
						}
					}
				}

				.date-transact {
					margin: 0 20rpx;
					line-height: 100rpx;
					font-size: 34rpx;
					font-weight: 600;
					// border-bottom: 2rpx solid #f2f2f0;

					display: flex;
					justify-content: space-between;
				}

				margin-right: 20rpx;
				margin-bottom: 10rpx;

				padding-bottom: 4rpx;


				margin-left: 20rpx;

				.left {
					// text-align: right;
					width: 35%;
					float: left;

				}

				.right {
					width: 50%;
					margin-left: 30%;
				}

				.right-two {
					// border-top: 4rpx solid #f0f0f0ff;\
					margin-top: 10rpx;
					padding-bottom: 10rpx;

				}

				.data-left {
					margin-right: 20rpx;
					display: inline-block;
					width: 50%;
					text-align: right;
				}

				.data-right {
					// width: 50%;
				}

				.data {

					margin-bottom: 10rpx;

					.key {
						color: #3c9cff;
					}

					.value {
						padding-left: 20rpx;
					}

					.a {
						width: 50%;
					}

					.b {
						width: 50%;
					}

				}
			}

			.primary {
				float: right;
				line-height: 40rpx;
				margin-top: 10rpx;
				margin-right: 10rpx;
				height: 40rpx;
			}

		}
	}
</style>