risk-wx/pages/index.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<view class="example-body vertical-layout">
			<!-- 用户头像 -->
			<image :src="avatar" class="user" @click="userTo()">
			</image>
			<view class="falseSearch">
				<u-search bgColor="#fff" hover-class="search" @confirm="getOrderBillsPlansList()" :showAction="false"
					placeholder="请输入订单号码" v-model="condition.orderNo">
				</u-search>
				<text class="search" hover-class="search-click" @click="getOrderBillsPlansList()">搜索</text>
			</view>
		</view>
		<!-- 日期 -->
		<view style="position: sticky;top: 120rpx;">
			<view style="background-color: white">
				<uni-datetime-picker v-model="condition.range" type="daterange" />
			</view>
		</view>
		<view class="dataList">

			<!-- 列表 -->
			<view class="list" v-for="(item,index) in orderBillsPlansList"
				@click="jumpDetails(item.orderNo, item.status317, item.status376)">
				<!-- 头部 -->
				<view class="head vertical-layout">
					<view class="no">
						<view class="blueStick-blue"></view>
						<!-- <view class="blueStick-red" v-if="item.billStatus == 6"></view> -->
						<!-- 订单号 -->
						<text class="odd">订单号:&nbsp;{{ item.orderNo == null ? '' : item.orderNo }}</text>
					</view>

					<!-- <view class="date">
						<text>{{ item.billDate }}</text>
					</view> -->
					<!-- {{item.status317}}
					{{item.status376}} -->
					<view class="date">
						<text class="true" v-if="item.status317 == 2">{{ item.billStatusName }}</text>
						<!-- item.status376 == 0 -->
						<!-- item.status376 == 2  -->
						<text class="yellow"
							v-if="item.status317 == 6">{{ item.billStatusName }}</text>
						<text class="false" v-if="item.status376 == 6">{{ item.billStatusName }}</text>
					</view>
				</view>
				<!-- <view class="details">
					<view class="left vertical-layout">
						<text class="data-left vertical-layout colorBlue">装车地</text>
						<text class="data-right">{{ item.loadAddr == null ? '' : item.loadAddr }}</text>
					</view>
					<view class="right vertical-layout">
						<text class="data-left vertical-layout colorBlue">卸车地&nbsp;</text>
						<text>&nbsp;{{ item.unLoadAddr == null ? '' : item.unLoadAddr }}</text>
					</view>
				</view>

				<view class="details">
					<view class="left vertical-layout">
						<text class="data-left vertical-layout colorBlue">装货品名&nbsp;</text>
						<text>{{ item.goodsCName == null ? '' : item.goodsCName }}</text>
					</view>
					<view class="right">
						<text class="data-left colorBlue">额定数量&nbsp;</text>
						<text>{{ item.rightqty == null ? '' : item.rightqty }}</text>
					</view>
				</view>

				<view class="details">
					<view class="left vertical-layout">
						<text class="data-left vertical-layout colorBlue">业务员&nbsp;</text>
						<text>{{ item.transact == null ? '' : item.transact }}</text>
					</view>
					<view class="right vertical-layout">
						<text class="data-left vertical-layout colorBlue">派单日期</text>
						<text>{{ item.billDate == null ? '' : item.billDate}}</text>
					</view>
				</view> -->

				<view class="details">
					<view class="data">
						<text class="key">装卸地点</text>
						<text
							class="value">{{ item.loadAddr == null ? '' : item.loadAddr }}--{{ item.unLoadAddr == null ? '' : item.unLoadAddr }}</text>
					</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>
	</view>
</template>

<script>
	import {
		orderBillsPlansList
	} from "@/api/home"
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				// 查询条件
				condition: {
					range: [],
					head: 1,
					tail: 9
				},
				// 数据
				orderBillsPlansList: [],
				show: false,

			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
		},
		onLoad() {
			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: {
			// 查询主页数据
			getOrderBillsPlansList() {
				this.condition.head = 1;
				this.condition.tail = 9;
				orderBillsPlansList(this.condition).then(res => {
					this.orderBillsPlansList = res.data;
				})
			},
			// 跳转详情
			jumpDetails(orderNo, status317, status376) {
				uni.navigateTo({
					url: 'particulars/index?orderNo=' + orderNo + '&status317=' + status317 + '&status376=' +
						status376
				});
			},
			// 跳转用户信息
			userTo() {
				// console.log("跳转用户信息");
				uni.navigateTo({
					url: 'mine/index'
				});

			},
			//获取当前月份第一天和最后一天
			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}-${date2.getDate()}`;

				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">
	// 修改布局方向为纵向布局
	.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 {
			// width: calc(100% - 130rpx);
			height: 80rpx;
			// width: 1000rpx;
			border-radius: 35rpx;

			display: flex;
			// align-items: center;

			// margin-left: 0rpx;
			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 {

				font-size: 34rpx;

				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 {
					.true {
						color: red;
					}

					.yellow {
						color: #3c9cff;
					}

					.false {
						color: green;
					}
				}
			}

			.details {

				width: 100%;

				font-size: 30rpx;

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

				padding-bottom: 4rpx;


				margin-left: 20rpx;
				// border-top: 4rpx solid #f0f0f0ff;

				// border-bottom: 2rpx dotted #000;

				.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>