123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <template>
- <div class="container">
- <div style="display: flex; justify-content: space-between; background-color: #fff;">
- <van-search @search="onSearch" style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
- <!-- <van-icon @click="onSearch" size="20" style="margin: 19px 8px 0 0px;" name="search" /> -->
- </div>
- <ScrollRefresh height="calc(100vh - 99px)" ref="scrollRefresh" :request="request" :defaultLimit="6">
- <template v-slot="slotProps">
- <div class="onther" v-for="(item, index) in slotProps.list" :key="index">
- <div class="onther-top">
- <div style="font-size: 12px;">批次号:{{ item.dispatchBatchNo
- }}
- </div>
- <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
- </div>
- <div class="onther-middel">
- <div class="onther-middel-text">
- <div class="onther-middel-text-style">批次完成时间:{{ item.time }}</div>
- </div>
- </div>
- <div class="onther-bottom">
- <van-cell is-link @click="showPopup(item)"><span
- style="color: #169bd5;">展开查看详情</span></van-cell>
- </div>
- </div>
- </template>
- </ScrollRefresh>
- <van-popup v-model="show" style="width: 100%; height: 60%;">
- <div class="batch-middel" v-for="(item, index) in popupList" :key="index">
- <div class="batch-middel-text">
- <div class="batch-middel-text-style" style="width: 100%; margin-left: -4px;margin-top: 0px;">【{{
- item.expressCompany
- }}】运单号:{{
- item.expressNo }}</div>
- <div class="batch-middel-text-style">收件人:{{ item.recipient }}</div>
- <div class="batch-middel-text-style">部门:{{ item.departmentId }}</div>
- <div class="batch-middel-text-style">楼层:{{ item.floorNum }}</div>
- <div class="batch-middel-text-style">座位号:{{ item.sendSeat }}</div>
- <div style="display: flex;" class="batch-middel-text-style">联系方式:{{ item.phone }} </div>
- <div class="batch-middel-text-style">当前状态:
- <span style="color: #1989fa;">
- {{ item.signinStatus == 0 ? '待签收' : `${item.signinStatus == 1 ?
- '已签收' : `${item.signinStatus == 2 ? '代收' : `${item.signinStatus == 3 ? '拒收' : '延迟'}`}`}` }}
- </span>
- <!-- <span style="color: #1989fa;">查看</span> -->
- </div>
- <div class="batch-middel-text-style">签收时间:{{ item.signatureTime == undefined ? '' :
- item.signatureTime.date.year }}-{{ item.signatureTime == undefined ? '' :
- item.signatureTime.date.month }}-{{ item.signatureTime == undefined ? '' :
- item.signatureTime.date.day }} {{ item.signatureTime == undefined ? '' :
- item.signatureTime.time.hour }}:{{ item.signatureTime == undefined ? '' :
- item.signatureTime.time.minute }}:{{ item.signatureTime == undefined ? '' :
- item.signatureTime.time.second }}
- </div>
- </div>
- <div style="display: flex; padding-top: 5px;">
- </div>
- </div>
- </van-popup>
- </div>
- </template>
- <script>
- import { appOutboundInquiry, appGetTheDetails } from '@/api/index'
- import ScrollRefresh from './ScrollRefresh.vue';
- export default {
- name: 'waitsent',
- components: {
- ScrollRefresh
- },
- data() {
- return {
- show: false,
- params: {
- search: ''
- },
- popupList: [],//点击弹框后的
- };
- },
- methods: {
- async request(_params) {
- let parmas = {
- dispatchBatchNo: this.params.search, // 批次号
- deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
- isFinish: '1',//完成 1已完成 2未完成
- ..._params
- }
- const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true })
- res.data = res.data.map((item) => {
- const date = item.signatureTime.date
- const time = item.signatureTime.time
- return {
- ...item,
- openCard: false,
- time: `${date.year}-${date.month}-${date.day} ${time.hour}:${time.minute}:${time.second}`
- }
- })
- return res
- },
- // 搜索批次号
- async onSearch() {
- this.$refs.scrollRefresh.onRefresh()
- },
- // 展开查看详情
- async showPopup(value) {
- this.show = true;
- const res = await appGetTheDetails({ dispatchBatchNo: value.dispatchBatchNo })
- this.popupList = res.data
- },
- },
- };
- </script>
- <style lang="less" scoped>
- * {
- font-size: 12px;
- }
- .bottom_text {
- text-align: center;
- color: #969799;
- font-size: 14px;
- }
- .container {
- height: 100%
- }
- .batchss {
- height: 130px;
- // overflow: hidden;
- }
- .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: 10px 6px;
- &-text {
- display: flex;
- flex-wrap: wrap;
- &-style {
- font-size: 12px;
- margin-top: 10px;
- }
- }
- }
- &-bottom {
- padding: 10px 4px;
- color: #169bd5;
- }
- }
- .onther {
- background-color: #fff;
- margin: 10px;
- border-radius: 10px;
- padding: 5px;
- &-top {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 0 10px 0;
- .jindu {
- color: #169bd5
- }
- }
- &-bottom {
- padding: 10px 0;
- /deep/ .van-cell {
- padding: 0;
- }
- }
- }
- .batch-middel {
- background-color: #f7f8fa;
- border-radius: 12px;
- padding: 10px 8px;
- height: auto;
- &-text {
- display: flex;
- flex-wrap: wrap;
- &-style {
- width: 165px;
- margin-top: 10px;
- }
- }
- }
- </style>
|