派件查询一半

src/pages/components/HomePage.vue

@@ -29,7 +29,7 @@
 					</router-link>
 				</div>
 				<div class="icon-box">
-					<router-link to="Box">
+					<router-link to="DeliveryInquiry">
 						<div style="">
 							<img src="@/assets/user/u38.png" alt="">
 						</div>

src/pages/components/Sented.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="container">
+        <van-search v-model="value" placeholder="请输入批次号" />
+
+        <div class="onther">
+            <div class="onther-top">
+                <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">ff123</span></div>
+                <div class="jindu">派送进度 10/15</div>
+            </div>
+            <div class="onther-middel">
+                <div class="onther-middel-text">
+                    <div class="onther-middel-text-style">批次完成时间：xxxxxxxxxxxxxxx</div>
+                </div>
+            </div>
+            <div class="onther-bottom">
+                <van-cell style="color: aqua;" is-link @click="showPopup">展示弹出层</van-cell>
+            </div>
+        </div>
+        <van-popup v-model="show" style="width: 100%; height: 60%;">
+            <div class="batch-middel">
+                <div class="batch-middel-text">
+                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                    <div class="batch-middel-text-style">收件人：xxx</div>
+                    <div class="batch-middel-text-style">部门：</div>
+                    <div class="batch-middel-text-style">楼层：</div>
+                    <div class="batch-middel-text-style">座位号：</div>
+                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
+                    <div class="batch-middel-text-style">当前状态:
+                        <span style="color: #1989fa;">已签收</span>
+                        <span  style="color: #1989fa;">查看</span>
+                    </div>
+                    <div class="batch-middel-text-style">签收时间：</div>
+
+                </div>
+                <div style="display: flex; padding-top: 5px;">
+                </div>
+            </div>
+            <div class="batch-middel">
+                <div class="batch-middel-text">
+                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                    <div class="batch-middel-text-style">收件人：xxx</div>
+                    <div class="batch-middel-text-style">部门：</div>
+                    <div class="batch-middel-text-style">楼层：</div>
+                    <div class="batch-middel-text-style">座位号：</div>
+                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
+                    <div class="batch-middel-text-style">当前状态:
+                        <span style="color: #1989fa;">已签收</span>
+                        <span  style="color: #1989fa;">查看</span>
+                    </div>
+                    <div class="batch-middel-text-style">签收时间：</div>
+
+                </div>
+                <div style="display: flex; padding-top: 5px;">
+                </div>
+            </div>
+            <div class="batch-middel">
+                <div class="batch-middel-text">
+                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                    <div class="batch-middel-text-style">收件人：xxx</div>
+                    <div class="batch-middel-text-style">部门：</div>
+                    <div class="batch-middel-text-style">楼层：</div>
+                    <div class="batch-middel-text-style">座位号：</div>
+                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 </div>
+                    <div class="batch-middel-text-style">当前状态:
+                        <span style="color: #1989fa;">已签收</span>
+                        <span  style="color: #1989fa;">查看</span>
+                    </div>
+                    <div class="batch-middel-text-style">签收时间：</div>
+
+                </div>
+                <div style="display: flex; padding-top: 5px;">
+                </div>
+            </div>
+        </van-popup>
+
+
+
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'sented',
+    data() {
+        return {
+            value: '',
+            show: false,
+        };
+    },
+    methods: {
+        showPopup() {
+            this.show = true;
+        },
+    },
+
+};
+</script>
+
+<style lang="less" scoped>
+* {
+    font-size: 14px;
+}
+
+.onther {
+    background-color: #fff;
+    margin: 10px;
+    border-radius: 10px;
+
+    &-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0 6px 0;
+
+        .jindu {
+            color: #169bd5
+        }
+    }
+
+    &-bottom {
+        padding: 10px 0;
+
+
+        /deep/ .van-cell {
+            padding: 0;
+        }
+    }
+
+
+}
+
+.batch-middel {
+    height: 130px;
+    background-color: #f2f2f2;
+    border-radius: 12px;
+    margin: 5px;
+    &-text {
+        display: flex;
+        flex-wrap: wrap;
+
+        &-style {
+            width: 165px;
+            margin-top: 10px;
+        }
+    }
+}
+</style>

src/pages/components/Waitsent.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="container">
+        <van-search v-model="value" placeholder="请输入批次号" />
+
+        <div class="batch">
+            <div class="batch-top">
+                <div style="font-size: 16px;">批次号：<span style="font-size: 16px;">ff123</span></div>
+                <div class="jindu">派送进度 10/15</div>
+            </div>
+            <div class="batch-middel">
+                <div class="batch-middel-text">
+                    <div class="batch-middel-text-style">【xx】运单号：xxxxx</div>
+                    <div class="batch-middel-text-style">收件人：xxx</div>
+                    <div class="batch-middel-text-style">部门：</div>
+                    <div class="batch-middel-text-style">楼层：</div>
+                    <div class="batch-middel-text-style">座位号：</div>
+                    <div style="display: flex;" class="batch-middel-text-style">联系方式:138XXXX1234 <van-button
+                            style="margin-top: -5px; border-radius: 6px;" type="info" size="mini">拨打</van-button></div>
+                </div>
+                <div style="display: flex; padding-top: 5px;">
+                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="info"
+                        @click="onReceiving">签收
+                    </van-button>
+                    <van-button style="width: 100px; border-radius: 6px;" size="small" type="danger"
+                        @click="onRetention">设为滞留</van-button>
+                </div>
+            </div>
+            <div class="batch-bottom">
+                展开.....
+            </div>
+
+            <!-- 签收 -->
+            <van-popup v-model="receiving" style="width: 100%; height: 80%;">
+                <div>派件签收</div>
+                <van-form @submit="onSubmit">
+                    <van-field label="运单号" value="xxx" readonly />
+                    <van-field label="快件类型" value="xxx" readonly />
+                    <van-field label="快递公司" value="xxx" readonly />
+                    <van-field label="部门" value="xxx" readonly />
+                    <van-field label="座位号" value="xxx" readonly />
+                    <van-field label="收件人" value="xxx" readonly />
+                    <van-field label="楼层" value="xxx" readonly />
+                    <van-field label="联系方式" value="xxx" readonly />
+                 
+                    <van-field readonly clickable name="picker" :value="value" label="签收类型" placeholder="点击签收类型"
+                        @click="showPicker = true" />
+                    <van-popup v-model="showPicker" position="bottom">
+                        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+                    </van-popup>
+                    <div style="margin: 16px;">
+                        <van-button round block type="info" native-type="submit">签收完成</van-button>
+                    </div>
+                </van-form>
+
+            </van-popup>
+            <!-- 设为滞留 -->
+            <van-popup v-model="retention" style="width: 100%; height: 60%;">内容</van-popup>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'waitsent',
+    data() {
+        return {
+            value: '',
+            receiving: false,//签收
+            retention: false,//滞留
+            value: '',
+            columns: ['本人签收','他人签收'],
+            showPicker: false,
+        };
+    },
+    methods: {
+        // 签收
+        onReceiving() {
+            this.receiving = true;
+        },
+        // 滞留
+        onRetention() {
+            this.retention = true;
+        },
+        onConfirm(value) {
+            this.value = value;
+            this.showPicker = false;
+        },
+    },
+
+};
+</script>
+
+<style lang="less" scoped>
+* {
+    font-size: 12px;
+}
+
+.batch {
+    background-color: #fff;
+    margin: 10px;
+
+    &-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0 6px 0;
+
+        .jindu {
+            color: #169bd5
+        }
+    }
+
+    &-middel {
+        height: 120px;
+        background-color: #f2f2f2;
+        border-radius: 12px;
+        margin: 0 6px;
+
+        &-text {
+            display: flex;
+            flex-wrap: wrap;
+
+            &-style {
+                width: 165px;
+                margin-top: 10px;
+            }
+        }
+    }
+
+    &-bottom {
+        padding: 14px 4px;
+        color: #169bd5;
+    }
+}
+</style>

src/pages/new/deliveryInquiry.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <van-tabs v-model="active">
+            <van-tab title="待派件">
+                <waitsent></waitsent>
+            </van-tab>
+            <van-tab title="已派件">
+                <sented></sented>
+            </van-tab>
+
+        </van-tabs>
+
+
+
+    </div>
+</template>
+
+<script>
+import Sented from '../components/Sented.vue'
+import Waitsent from '../components/Waitsent.vue'
+export default {
+    name: 'DeliveryInquiry',
+    components: {
+        Sented,
+        Waitsent
+    },
+    data() {
+        return {
+            active: 0,
+            value: '',
+        }
+    },
+}
+</script>
+
+<style scoped lang="less"></style>

src/router/index.js

@@ -7,6 +7,7 @@ import Jjsearch from '@/pages/jjsearch'
 import Sjdj from '@/pages/sjdj'
 import Storage from '@/pages/new/storage'
 import Removal from '@/pages/new/removal'
+import DeliveryInquiry from '@/pages/new/deliveryInquiry'
 import Addper from '@/pages/addper'
 import Box from '@/pages/box'
 import Pjpc from '@/pages/pjpc'
@@ -143,6 +144,14 @@ export default new Router({
 				needLogin: true //需要加校检判断的路由
 			}
 		},
+		{ //派件查询
+			path: '/DeliveryInquiry',
+			name: 'DeliveryInquiry',
+			component: DeliveryInquiry,
+			meta: {
+				needLogin: true //需要加校检判断的路由
+			}
+		},
 		{ //新增收件人
 			path: '/Addper',
 			name: 'Addper',