agv入料页面完善

pages/agv/agv-in/agv-in.vue

@@ -1,9 +1,12 @@
 <template>
-	<view>
-		<dateCheck></dateCheck>
+	<view class="agv-page">
+		<dateCheck @dateChouse="dateChouse"></dateCheck>
+		<uni-segmented-control :current="queryData.state" :values="items" @clickItem="onClickItem" styleType="button"
+			activeColor="#5500ff" class="segmented-control-box"></uni-segmented-control>
 		<scroll-view class="scroll-view-box" :scroll-y="true">
-			<view v-for="(item, index) in oldMaterialList">
-				<materialItem style="background-color: darkgray" :materialInfo="item"></materialItem>
+			<view v-for="(item, index) in list">
+				 <orderItem :data="item"></orderItem>	
+				 <!-- <materialItem style="background-color: darkgray" :materialInfo="item"></materialItem> -->
 			</view>
 		</scroll-view>
 	</view>
@@ -11,31 +14,66 @@
 
 <script>
 	import dateCheck from '@/pages/agv/components/dateCheck/index.vue';
+	import orderItem from '@/pages/agv/components/orderItem/index.vue';
 	export default {
 		components: {
-			dateCheck
+			dateCheck,
+			orderItem
 		},
 		data() {
 			return {
-				oldMaterialList: [],
+				queryData: {
+					year: 0,
+					week: 0,
+					day: 0,
+					state: 1,
+				},
+
+				items: ['全部', '未完成', '已完成'],
+				list: [1,2,3],
 			}
 		},
 		methods: {
-			
+			getList() {
+				const queryData = this.queryData;
+			},
+			onClickItem(e) {
+				if (this.queryData.state != e.currentIndex) {
+					this.queryData.state = e.currentIndex;
+				}
+				this.getList();
+			},
+			dateChouse(data) {
+				this.queryData.year = data.year
+				this.queryData.week = data.week
+				this.queryData.date = data.date
+				console.log(data);
+				this.getList();
+			}
 		}
 	}
 </script>
 
 <style scoped>
+	.agv-page {
+		padding: 10px;
+	}
+
+	.segmented-control-box {
+		width: 94%;
+		margin: 0 auto;
+	}
+
 	.scroll-view-box {
 		width: 94%;
 		margin: 0 auto;
 		margin-top: 30px;
-	height: 400px;
+		height: 450px;
 		padding: 10px;
 		background-color: rgba(179, 179, 179, 0.7);
 		border-radius: 5px;
 	}
+
 	.scroll-view-last {
 		width: 100%;
 		height: 60px;
@@ -50,6 +88,7 @@
 		border-radius: 10px;
 		background-color: white;
 	}
+
 	.button-box {
 		width: 80%;
 		margin: 10px auto;

pages/agv/components/dateCheck/index.vue

@@ -1,7 +1,8 @@
 <template>
 	<div>
-		<u-calendar :show="show" title="请选择工单日期"></u-calendar>
-		<u-button @click="show = true">选择工单日期</u-button>
+		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
+		<div class="button"><button @click="open">请选择工单时间</button></div>	
+		<div class="text">当前选择：{{year}}年-{{week}}周-{{date}}日</div>
 	</div>
 </template>
 
@@ -9,24 +10,62 @@
 	export default {
 		data() {
 			return {
-				show: false,
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: false,
-					minute: false,
-					second: false
-				},
+				year:0,
+				week:0,
+				date:0
 			}
 		},
+		created() {
+			this.year = new Date().getFullYear();
+			this.week = this.getYearWeek(new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate());
+			this.date = new Date().getDay()
+			this.emitData();
+		},
 		methods: {
-			change(e) {
-				console.log(e);
+			open() {
+				this.$refs.calendar.open();
+			},
+			confirm(e) {
+				this.year = e.lunar.cYear;
+				this.week = this.getYearWeek(e.lunar.cYear, e.lunar.cMonth, e.lunar.cDay);
+				this.date = e.lunar.nWeek;
+				this.emitData();
+
+			},
+			// 选择日期
+			emitData() {
+				const data = {
+					year:this.year,
+					week:this.week,
+					date:this.date
+				}
+				this.$emit('dateChouse', data)
+			},
+			getYearWeek(year, month, day) {
+				/*
+				date1是当前日期
+				date2是当年第一天
+				date3是当前日期是今年第多少天
+				用date3 + 当前年的第一天的周差距的和在除以7就是本年第几周
+				*/
+				let date1 = new Date(year, parseInt(month) - 1, day),
+					date2 = new Date(year, 0, 1),
+					date3 = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
+				return Math.ceil((date3 + ((date2.getDay() + 1) - 1)) / 7);
 			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+	.text{
+		text-align: center;
+		font-size: 24px;
+		font-weight: 700;
+	}
+	.button{
+		width: 90%;
+		margin: 0 auto;
+		margin-top: 10px;
+	}
 </style>

pages/agv/components/orderItem/index.vue

@@ -1,12 +1,24 @@
 <template>
 	<div>
-		<u-picker v-model="show" mode="time"></u-picker>
-		<u-button @click="show = true">打开</u-button>
+		<uni-list-chat title="uni-app" note="您收到一条新的消息" time="2020-02-02 20:20" clickable>
+			<template v-slot:header>
+				<!-- <image class="slot-image" src="/static/logo.png" mode="widthFix"></image> -->
+			</template>
+			<view class="chat-custom-right">
+				<text class="chat-custom-text">任务</text>
+				<!-- 需要使用 uni-icons 请自行引入 -->
+				<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
+			</view>
+		</uni-list-chat>
 	</div>
 </template>
 
 <script>
 	export default {
+		props: {
+			data: {
+			}
+		},
 		data() {
 			return {
 				show: false,