282 lines
8.3 KiB
Vue
282 lines
8.3 KiB
Vue
<template>
|
|
<view class="orderList">
|
|
<view v-if="!isLogin" class="notLogin">
|
|
<view class="toLogin-btn" @click="toLogin">登录/注册</view>
|
|
<view class="tips">登录后可查看快递信息</view>
|
|
</view>
|
|
|
|
|
|
<view v-else-if="!allOrderList.data.length && isLogin" class="empty-data">
|
|
<image src="../../../static/emptyData.png" class="empty-data-image"></image>
|
|
<view class="tips">没有运单~</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="title">运单信息</view>
|
|
|
|
<view class="order-item" v-for="(item,index) in allOrderList.data" :key="index"
|
|
@click='handleToOrderInfo(event,item.id,item.transportOrderId)'>
|
|
<view class="orderNumber">
|
|
{{[23000,22000,230011].includes(item.status)?'订':'运'}}单号：{{[23000,22000,230011].includes(item.status)?item.id:item.transportOrderId}}
|
|
<image src="../../../static/pickUp-copy.png" class="copy"
|
|
@click.stop="handleCopy([23000,22000,230011].includes(item.status)?item.id:item.transportOrderId)">
|
|
</image>
|
|
</view>
|
|
<view class="area-to-area">
|
|
<view class="sendBox">
|
|
<view class="sendArea">{{item.senderCity.name}}</view>
|
|
<view class="sendName">{{item.senderName}}</view>
|
|
</view>
|
|
<view class="order-status">
|
|
<view class="status">
|
|
{{showOrderStatus(item.status)}}
|
|
</view>
|
|
<view class="arrow" :class="
|
|
[[21000,23000,23001,23005,23008].includes(item.status)?'green-arrow':'',
|
|
[23009,23010].includes(item.status)?'red-arrow':'',
|
|
[230011,22000].includes(item.status)?'gray-arrow':'']
|
|
"></view>
|
|
</view>
|
|
<view class="getBox">
|
|
<view class="getArea">{{item.receiverCity.name}}</view>
|
|
<view class="getName">{{item.receiverName}}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="order-detail">
|
|
<!-- 已取件运输信息 -->
|
|
<view v-if="item.status ===23001 && item.transportOrderPointVOS" class="detail-item">
|
|
<text>已取件：</text>
|
|
{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
|
</view>
|
|
<!-- 运输中信息 -->
|
|
<view v-if="[23005,23008].includes(item.status) && item.transportOrderPointVOS" class="detail-item">
|
|
<text>运送中：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
|
</view>
|
|
<!-- 已签收 -->
|
|
<view v-if="item.status ===23009 && item.transportOrderPointVOS" class="detail-item">
|
|
<text>已签收：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
|
</view>
|
|
<!-- 已拒收 -->
|
|
<view v-if="item.status ===23010 && item.transportOrderPointVOS" class="detail-item">
|
|
<text>已拒收：</text>{{ item.transportOrderPointVOS.length>0?item.transportOrderPointVOS[item.transportOrderPointVOS.length-1].info:''}}
|
|
</view>
|
|
<!-- 预计上门时间 -->
|
|
<view v-if="item.status ===23000 " class="detail-item">
|
|
<text>预计上门时间：</text>{{item.estimatedStartTime}}
|
|
</view>
|
|
<!-- 取消时间 -->
|
|
<view v-if="item.status ===230011 " class="detail-item"><text>取消时间：</text>{{item.updated}}</view>
|
|
<!-- 预计送达时间 -->
|
|
<view v-if="[23001,23005,23008,23010].includes(item.status) " class="detail-item">
|
|
<text>预计送达时间：</text>{{item.estimatedArrivalTime}}
|
|
</view>
|
|
<!-- 已关闭时间 -->
|
|
<view v-if="item.status ===22000 " class="detail-item"><text>关闭时间：</text>{{item.updated}}</view>
|
|
<!-- 签收时间 -->
|
|
<view v-if="item.status ===23009 " class="detail-item"><text>签收时间：</text>{{item.updated}}</view>
|
|
</view>
|
|
<!-- 功能按钮区域 -->
|
|
<view class="btn-box">
|
|
<view class="btn-list" @click.stop="handleSecondQi">
|
|
<view class="btn" v-if="[23000,23001,23005,23008,23010].includes(item.status)">分享</view>
|
|
<view class="btn" v-if='item.status===23000' @click.stop="handleOrderCancel(item.id)">取消寄件
|
|
</view>
|
|
<view class="btn" v-if="[22000,230011,23009].includes(item.status)"
|
|
@click.stop="handleOrderDelete(item.id)">删除</view>
|
|
</view>
|
|
</view>
|
|
<view class="paymentStatus"
|
|
v-if="item.paymentStatus && [23001,23005,23008,23009,23010].includes(item.status)">
|
|
<image :src="item.paymentStatus===1?'../../../static/daizhifu.png':'../../../static/yizhifu.png'">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="see-more" @click="handleSeeMore">
|
|
查看更多
|
|
<view class="arrow"></view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 删除确认对话框 -->
|
|
<uni-popup ref="popup" type="dialog" class='address-popup'>
|
|
<uni-popup-dialog mode="base" :content="'确定是否删除此条订单？'" :animation='false' :before-close="true"
|
|
@close="close" @confirm="confirm">
|
|
|
|
</uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
} from 'vue';
|
|
import {
|
|
getOrderList,
|
|
deleteOrder
|
|
} from '@/pages/api/order.js'
|
|
import {
|
|
onShow,
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
handleSecondQi
|
|
} from '@/utils/index.js'
|
|
import {
|
|
useStore
|
|
} from 'vuex';
|
|
const store = useStore(); //vuex获取、储存数据
|
|
const emits = defineEmits(["@stopRefresh"]);
|
|
let pageInfo = reactive({
|
|
page: 1,
|
|
pageSize: 10
|
|
})
|
|
let status = ref('more') //加载状态
|
|
let scrollTop = ref(0) //顶部位置
|
|
let allOrderList = reactive({
|
|
data: []
|
|
})
|
|
let orderId = ref()
|
|
let isLogin = ref('')
|
|
let popup = ref(null)
|
|
//关闭删除确认提示框
|
|
const close = () => {
|
|
popup.value.close()
|
|
orderId.value = ''
|
|
}
|
|
onShow((options) => {
|
|
isLogin.value = uni.getStorageSync('token')
|
|
console.log(!isLogin, (!allOrderList.data.length && isLogin.value), '6666')
|
|
})
|
|
onMounted(() => {
|
|
getOrderListFunc()
|
|
})
|
|
//复制
|
|
const handleCopy = (value) => {
|
|
uni.setClipboardData({
|
|
data: value,
|
|
showToast: false,
|
|
success: () => {
|
|
uni.hideToast(); // 隐藏弹出提示
|
|
uni.hideKeyboard(); // 隐藏软键盘
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
|
|
}
|
|
});
|
|
}
|
|
//确认删除订单
|
|
const confirm = () => {
|
|
popup.value.close()
|
|
deleteOrder(orderId.value).then((res) => {
|
|
pageInfo.page = 1
|
|
pageInfo.pageSize = 10
|
|
getOrderListFunc()
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success',
|
|
duration: 1000
|
|
})
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: '网络异常',
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
})
|
|
}
|
|
//删除订单
|
|
const handleOrderDelete = (id) => {
|
|
orderId.value = id
|
|
popup.value.open()
|
|
}
|
|
//跳转到取消订单页面
|
|
const handleOrderCancel = (id) => {
|
|
uni.navigateTo({
|
|
url: '/subPages/order-cancel/index?orderId=' + id
|
|
})
|
|
}
|
|
const toLogin = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/login/index'
|
|
})
|
|
}
|
|
const getOrderListFunc = (flag) => {
|
|
status.value = 'loading'
|
|
getOrderList({
|
|
page: pageInfo.page,
|
|
pageSize: pageInfo.pageSize,
|
|
}).then((res) => {
|
|
console.log(res, 'getOrderListFunc')
|
|
if (res.data) {
|
|
allOrderList.data = res.data.items ? res.data.items.slice(0, 3) : []
|
|
}
|
|
})
|
|
}
|
|
//查看更多
|
|
const handleSeeMore = () => {
|
|
uni.switchTab({
|
|
url: '/pages/pickup/index'
|
|
})
|
|
}
|
|
|
|
//根据状态去显示对应的运单状态文案
|
|
const showOrderStatus = (status) => {
|
|
switch (status) {
|
|
case 21000:
|
|
return '待支付';
|
|
case 23000:
|
|
return '待取件';
|
|
case 230011:
|
|
return '已取消';
|
|
case 23001:
|
|
return '已取件';
|
|
case 23005:
|
|
return '运送中';
|
|
case 22000:
|
|
return '已关闭';
|
|
case 23008:
|
|
return '派送中';
|
|
case 23009:
|
|
return '已签收';
|
|
case 23010:
|
|
return '已拒收';
|
|
}
|
|
}
|
|
//跳转到订单详情页面
|
|
const handleToOrderInfo = (event, id, transportOrderId) => {
|
|
uni.navigateTo({
|
|
url: '/subPages/order-info/index?orderId=' + id + '&transportOrderId=' + transportOrderId
|
|
});
|
|
store.commit('user/setIsToOrderInfo', true)
|
|
}
|
|
|
|
//下拉加载更多
|
|
const LoadMoreCustomers = () => {
|
|
if (status.value === 'no-more') {
|
|
return
|
|
}
|
|
pageInfo.page = pageInfo.page + 1
|
|
getOrderListFunc('topPull')
|
|
}
|
|
//
|
|
const indexGetOrderListFunc = () => {
|
|
pageInfo.page = 1
|
|
getOrderListFunc()
|
|
}
|
|
// 暴漏给父组件
|
|
defineExpose({
|
|
indexGetOrderListFunc,
|
|
LoadMoreCustomers
|
|
});
|
|
</script>
|
|
|
|
<style src="./orderList.scss" lang="scss" scoped></style>
|