|
@@ -1,172 +1,178 @@
|
|
|
<template>
|
|
|
- <div class="content">
|
|
|
- <van-search v-model="value" @search="onSearch" placeholder="请输入运单号" />
|
|
|
- <!-- table切换 -->
|
|
|
- <div class="tab">
|
|
|
- <div>
|
|
|
- <p @click="tab(1)" :class="[index==1?'active':'']">外部件</p>
|
|
|
- <p @click="tab(2)" :class="[index==2?'active':'']">内部件</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <back :title="titlename"></back>
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <van-search v-model="value" @search="onSearch" placeholder="请输入运单号" />
|
|
|
+ <!-- table切换 -->
|
|
|
+ <div class="tab">
|
|
|
+ <div>
|
|
|
+ <p @click="tab(1)" :class="[index==1?'active':'']">外部件</p>
|
|
|
+ <p @click="tab(2)" :class="[index==2?'active':'']">内部件</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 按天按月 -->
|
|
|
+ <div class="change">
|
|
|
+ <div class="time">
|
|
|
+ <p @click="changetimeNew()" class="timeactive">日期筛选</p>
|
|
|
+ <!-- <p @click="changetime(1)" :class="[time==1?'timeactive':'']">按月</p>
|
|
|
+ <p @click="changetime(2)" :class="[time==2?'timeactive':'']">按天</p> -->
|
|
|
</div>
|
|
|
- <!-- 按天按月 -->
|
|
|
- <div class="change">
|
|
|
- <div class="time">
|
|
|
- <p @click="changetimeNew()" class="timeactive">日期筛选</p>
|
|
|
- <!-- <p @click="changetime(1)" :class="[time==1?'timeactive':'']">按月</p>
|
|
|
- <p @click="changetime(2)" :class="[time==2?'timeactive':'']">按天</p> -->
|
|
|
- </div>
|
|
|
- <div class="datapicker">
|
|
|
- <p @click="showPicker=true">{{timevalue}}</p>
|
|
|
- </div>
|
|
|
+ <div class="datapicker">
|
|
|
+ <p @click="showPicker=true">{{timevalue}}</p>
|
|
|
</div>
|
|
|
- <!-- 订单列表 -->
|
|
|
- <div class="list">
|
|
|
- <div class="logistics" v-for="item in mailList">
|
|
|
- <div class="logistics_top">
|
|
|
- <p>订单号:<span :id="'copytkl'+item.expressNo">{{item.expressNo}}</span></p>
|
|
|
- <!-- <p > -->
|
|
|
- <img :id="'fz'+item.expressNo" @click="copyLink(item.expressNo)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.expressNo" src="../assets/images/2022copy.png" alt="">
|
|
|
- <!-- </p> -->
|
|
|
+ </div>
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <div class="list">
|
|
|
+ <div class="logistics" v-for="item in mailList">
|
|
|
+ <div class="logistics_top">
|
|
|
+ <p>订单号:<span :id="'copytkl'+item.expressNo">{{item.expressNo}}</span></p>
|
|
|
+ <!-- <p > -->
|
|
|
+ <img :id="'fz'+item.expressNo" @click="copyLink(item.expressNo)" data-clipboard-action="copy" :data-clipboard-target="'#copytkl'+item.expressNo" src="../assets/images/2022copy.png" alt="">
|
|
|
+ <!-- </p> -->
|
|
|
+ </div>
|
|
|
+ <div class="logistics_center" @click="mailDetail(item.id)">
|
|
|
+ <div>
|
|
|
+ <p>{{item.sendCity}}</p>
|
|
|
+ <p>{{item.sender}}</p>
|
|
|
</div>
|
|
|
- <div class="logistics_center" @click="mailDetail(item.id)">
|
|
|
- <div>
|
|
|
- <p>{{item.sendCity}}</p>
|
|
|
- <p>{{item.sender}}</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img v-if="item.sendSt == '待揽件'" src="../assets/images/j_ico01.png" alt="">
|
|
|
- <img v-if="item.sendSt == '已揽收'" src="../assets/images/j_ico01.png" alt="">
|
|
|
- <img v-if="item.sendSt == '派送中'" src="../assets/images/j_ico02.png" alt="">
|
|
|
- <img v-if="item.sendSt == '已签收'" src="../assets/images/j_ico03.png" alt="">
|
|
|
- <img v-if="item.sendSt == '已退回'" src="../assets/images/j_ico04.png" alt="">
|
|
|
- <p>{{item.sendSt}}</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>{{item.receiveCity}}</p>
|
|
|
- <p>{{item.receiver}}</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img v-if="item.sendSt == '待揽件'" src="../assets/images/j_ico01.png" alt="">
|
|
|
+ <img v-if="item.sendSt == '已揽收'" src="../assets/images/j_ico01.png" alt="">
|
|
|
+ <img v-if="item.sendSt == '派送中'" src="../assets/images/j_ico02.png" alt="">
|
|
|
+ <img v-if="item.sendSt == '已签收'" src="../assets/images/j_ico03.png" alt="">
|
|
|
+ <img v-if="item.sendSt == '已退回'" src="../assets/images/j_ico04.png" alt="">
|
|
|
+ <p>{{item.sendSt}}</p>
|
|
|
</div>
|
|
|
- <!-- <div class="logistics_bottom">
|
|
|
- <p>已揽件:顺丰速运已取快件</p>
|
|
|
- <p>接收时间:2022-10-23 10:11</p>
|
|
|
- </div> -->
|
|
|
+ <div>
|
|
|
+ <p>{{item.receiveCity}}</p>
|
|
|
+ <p>{{item.receiver}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="logistics_bottom">
|
|
|
+ <p>已揽件:顺丰速运已取快件</p>
|
|
|
+ <p>接收时间:2022-10-23 10:11</p>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="logistics">
|
|
|
+ <div class="logistics_top">
|
|
|
+ <p>订单号:CX223232322</p>
|
|
|
+ <img src="../assets/images/2022copy.png" alt="">
|
|
|
</div>
|
|
|
- <!-- <div class="logistics">
|
|
|
- <div class="logistics_top">
|
|
|
- <p>订单号:CX223232322</p>
|
|
|
- <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ <div class="logistics_center">
|
|
|
+ <div>
|
|
|
+ <p>苏州</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- <div class="logistics_center">
|
|
|
- <div>
|
|
|
- <p>苏州</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img src="../assets/images/j_ico01.png" alt="">
|
|
|
- <p>已揽件</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>上海</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/images/j_ico01.png" alt="">
|
|
|
+ <p>已揽件</p>
|
|
|
</div>
|
|
|
- <div class="logistics_bottom">
|
|
|
- <p>已揽件:顺丰速运已取快件</p>
|
|
|
- <p>接收时间:2022-10-23 10:11</p>
|
|
|
+ <div>
|
|
|
+ <p>上海</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="logistics">
|
|
|
- <div class="logistics_top">
|
|
|
- <p>订单号:CX223232322</p>
|
|
|
- <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_bottom">
|
|
|
+ <p>已揽件:顺丰速运已取快件</p>
|
|
|
+ <p>接收时间:2022-10-23 10:11</p>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="logistics">
|
|
|
+ <div class="logistics_top">
|
|
|
+ <p>订单号:CX223232322</p>
|
|
|
+ <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_center">
|
|
|
+ <div>
|
|
|
+ <p>苏州</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- <div class="logistics_center">
|
|
|
- <div>
|
|
|
- <p>苏州</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img src="../assets/images/j_ico02.png" alt="">
|
|
|
- <p>派送中</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>上海</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/images/j_ico02.png" alt="">
|
|
|
+ <p>派送中</p>
|
|
|
</div>
|
|
|
- <div class="logistics_bottom">
|
|
|
- <p>派送中:快件派送不成功</p>
|
|
|
- <p>预计送达时间:2022-10-23 10:11</p>
|
|
|
+ <div>
|
|
|
+ <p>上海</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="logistics">
|
|
|
- <div class="logistics_top">
|
|
|
- <p>订单号:CX223232322</p>
|
|
|
- <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_bottom">
|
|
|
+ <p>派送中:快件派送不成功</p>
|
|
|
+ <p>预计送达时间:2022-10-23 10:11</p>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="logistics">
|
|
|
+ <div class="logistics_top">
|
|
|
+ <p>订单号:CX223232322</p>
|
|
|
+ <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_center">
|
|
|
+ <div>
|
|
|
+ <p>苏州</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- <div class="logistics_center">
|
|
|
- <div>
|
|
|
- <p>苏州</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img src="../assets/images/j_ico03.png" alt="">
|
|
|
- <p>已签收</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>上海</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/images/j_ico03.png" alt="">
|
|
|
+ <p>已签收</p>
|
|
|
</div>
|
|
|
- <div class="logistics_bottom">
|
|
|
- <p>签收时间:2022-10-23 10:11</p>
|
|
|
+ <div>
|
|
|
+ <p>上海</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="logistics">
|
|
|
- <div class="logistics_top">
|
|
|
- <p>订单号:CX223232322</p>
|
|
|
- <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_bottom">
|
|
|
+ <p>签收时间:2022-10-23 10:11</p>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="logistics">
|
|
|
+ <div class="logistics_top">
|
|
|
+ <p>订单号:CX223232322</p>
|
|
|
+ <img src="../assets/images/2022copy.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="logistics_center">
|
|
|
+ <div>
|
|
|
+ <p>苏州</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- <div class="logistics_center">
|
|
|
- <div>
|
|
|
- <p>苏州</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <img src="../assets/images/j_ico01.png" alt="">
|
|
|
- <p>已退回</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>上海</p>
|
|
|
- <p>张三</p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/images/j_ico01.png" alt="">
|
|
|
+ <p>已退回</p>
|
|
|
</div>
|
|
|
- <div class="logistics_bottom">
|
|
|
- <p>已退回:有客户要求快件正在退回</p>
|
|
|
- <p>退回时间:2022-10-23 10:11</p>
|
|
|
+ <div>
|
|
|
+ <p>上海</p>
|
|
|
+ <p>张三</p>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <!-- 日历选择 -->
|
|
|
- <van-calendar color="#00c4b8" v-model:show="showPicker" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
|
|
|
- <!-- 时间选择 -->
|
|
|
- <!-- <van-popup v-model:show="showPicker" position="bottom">
|
|
|
- <van-datetime-picker
|
|
|
- :type="showPickertype"
|
|
|
- :max-date="maxDate"
|
|
|
- @confirm="onConfirm"
|
|
|
- @cancel="showPicker = false"
|
|
|
- />
|
|
|
- </van-popup> -->
|
|
|
- <tabbar></tabbar>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <div class="logistics_bottom">
|
|
|
+ <p>已退回:有客户要求快件正在退回</p>
|
|
|
+ <p>退回时间:2022-10-23 10:11</p>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- 日历选择 -->
|
|
|
+ <van-calendar color="#00c4b8" v-model:show="showPicker" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
|
|
|
+ <!-- 时间选择 -->
|
|
|
+ <!-- <van-popup v-model:show="showPicker" position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ :type="showPickertype"
|
|
|
+ :max-date="maxDate"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ />
|
|
|
+ </van-popup> -->
|
|
|
+ <!-- <tabbar></tabbar> -->
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
<script>
|
|
|
import {Toast,Dialog} from 'vant'
|
|
|
export default{
|
|
|
data(){
|
|
|
return {
|
|
|
+ titlename: "我的寄件",
|
|
|
expressType:'外部件',
|
|
|
userId:'',
|
|
|
mailList:"",
|
|
@@ -286,9 +292,9 @@ import {Toast,Dialog} from 'vant'
|
|
|
computed:{
|
|
|
|
|
|
}
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
<style lang="less" scoped="">
|
|
|
.content{
|
|
|
font-size: .3rem;
|
|
@@ -416,5 +422,5 @@ import {Toast,Dialog} from 'vant'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</style>
|