<template>
<div class="orderAll">
<my-header>订单</my-header>
<!-- Tab 标签栏---------------------------------------
1. v-model="billStatus" 绑定一个值, 指定当前激活的tab栏的下标, 下标0开始
2. sticky 吸顶粘性布局
3. animated 切换动画
4. swipeable 滑动切换效果
下拉刷新
v-model 设置为 false，表示加载完成
----------------------------------------------------------->
<div class="state-tabs">
<van-tabs
v-model="billStatus"
@click.native="handleClick"
sticky
animated
swipeable
>
<!-- 待完成 -->
<van-tab title="待完成" name="wait">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div
class="wait wait1"
v-for="item in orders"
:key="item.orderId"
@click="orderDetail(item.orderType, item.orderId)"
>
<div class="title">
<h4 v-if="item.orderType == 'caiOrder'">
采血任务
</h4>
<h4 v-if="item.orderType == 'huiOrder'">
回输任务
</h4>
<span class="waitState">{{ item.nodeName }}</span>
</div>
<!-- 详细内容 -------------------------->
<div class="details">
<!-- 订单号 -->
<div class="row clearfix">
<span class="fl">订单号</span>
<em class="num fr">{{ item.billNo }}</em>
</div>
<!-- 订单日期 -->
<div class="row clearfix">
<span class="fl">订单日期</span>
<em class="startTime fr">{{ item.billDate }}</em>
</div>
<!-- 采血提货时间 -->
<div class="row clearfix">
<span class="fl">提货时间</span>
<em class="scheduledTime fr ">{{ item.pickTime }}</em>
</div>
<!-- 提货点 -->
<div class="row clearfix">
<span class="fl">提货点</span>
<em class="place fr">{{ item.pickPoint }}</em>
</div>
<!-- 提货地址 -->
<div class="row clearfix">
<span class="fl">提货地址</span>
<em class="place fr">{{ item.pickAddr }}</em>
</div>
<!-- 送达点 -->
<div class="row clearfix">
<span class="fl">送达点</span>
<em class="place fr">{{ item.deliveryPoint }}</em>
</div>
<!-- 送达地址 -->
<div class="row clearfix">
<span class="fl">送达地址</span>
<em class="place fr">{{ item.deliveryAddr }}</em>
</div>
<!-- 联系人 -->
<div class="row clearfix person">
<span>联系人</span>
<em class="who ">{{ item.pickPsn }}</em>
<div class="phoneNum fr">{{ item.pickTel }}</div>
</div>
</div>
</div>
</van-pull-refresh>
</van-tab>
<!-- 完成 -->
<van-tab title="完成" name="completed">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div
class="completed completed1"
v-for="item in orders"
:key="item.orderId"
@click="orderDetail(item.orderType, item.orderId)"
>
<!-- 标题 -->
<div class="title com">
<h4 v-if="item.orderType == 'caiOrder'">
采血任务
</h4>
<h4 v-if="item.orderType == 'huiOrder'">
回输任务
</h4>
<span class="completedState">{{ item.nodeName }}</span>
</div>
<!-- 细节 -->
<div class="details">
<!-- 订单号 -->
<div class="row clearfix">
<span class="fl">订单号</span>
<em class="num fr">{{ item.billNo }}</em>
</div>
<!-- 订单日期 -->
<div class="row clearfix">
<span class="fl">订单日期</span>
<em class="startTime fr">{{ item.billDate }}</em>
</div>
<!-- 采血提货时间 -->
<div class="row clearfix">
<span class="fl">提货时间</span>
<em class="scheduledTime fr ">{{ item.pickTime }}</em>
</div>
<!-- 提货点 -->
<div class="row clearfix">
<span class="fl">提货点</span>
<em class="place fr">{{ item.pickPoint }}</em>
</div>
<!-- 提货地址 -->
<div class="row clearfix">
<span class="fl">提货地址</span>
<em class="place fr">{{ item.pickAddr }}</em>
</div>
<!-- 送达点 -->
<div class="row clearfix">
<span class="fl">送达点</span>
<em class="place fr">{{ item.deliveryPoint }}</em>
</div>
<!-- 送达地址 -->
<div class="row clearfix">
<span class="fl">送达地址</span>
<em class="place fr">{{ item.deliveryAddr }}</em>
</div>
<!-- 联系人 -->
<div class="row clearfix person">
<span>联系人</span>
<em class="who ">{{ item.pickPsn }}</em>
<div class="phoneNum fr">{{ item.pickTel }}</div>
</div>
</div>
</div>
</van-pull-refresh>
</van-tab>
<!-- 全部任务 -->
<van-tab title="全部" name="all">
<div class="all">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<div
class="wait wait1"
v-for="item in orders"
:key="item.orderId"
@click="orderDetail(item.orderType, item.orderId)"
>
<!-- 通过判断附加class 属性 -->
<div
class="title"
:class="{ com: item.billStatus === ' 4' }"
>
<h4 v-if="item.orderType == 'caiOrder'">
采血任务
</h4>
<h4 v-if="item.orderType == 'huiOrder'">
回输任务
</h4>
<span
:class="{
waitState: item.billStatus === '2',
completedState: item.billStatus === ' 4'
}"
>{{ item.nodeName }}</span
>
</div>
<div class="details">
<!-- 订单号 -->
<div class="row clearfix">
<span class="fl">订单号</span>
<em class="num fr">{{ item.billNo }}</em>
</div>
<!-- 订单日期 -->
<div class="row clearfix">
<span class="fl">订单日期</span>
<em class="startTime fr">{{ item.billDate }}</em>
</div>
<!-- 提货时间 -->
<div class="row clearfix">
<span class="fl">提货时间</span>
<em class="scheduledTime fr ">{{ item.pickTime }}</em>
</div>
<!-- 提货点 -->
<div class="row clearfix">
<span class="fl">提货点</span>
<em class="place fr">{{ item.pickPoint }}</em>
</div>
<!-- 提货地址 -->
<div class="row clearfix">
<span class="fl">提货地址</span>
<em class="place fr">{{ item.pickAddr }}</em>
</div>
<!-- 送达点 -->
<div class="row clearfix">
<span class="fl">送达点</span>
<em class="place fr">{{ item.deliveryPoint }}</em>
</div>
<!-- 送达地址 -->
<div class="row clearfix">
<span class="fl">送达地址</span>
<em class="place fr">{{ item.deliveryAddr }}</em>
</div>
<!-- 联系人 -->
<div class="row clearfix person">
<span>联系人</span>
<em class="who ">{{ item.pickPsn }}</em>
<div class="phoneNum fr">{{ item.pickTel }}</div>
</div>
</div>
</div>
</van-pull-refresh>
</div>
</van-tab>
</van-tabs>
</div>
<!-- 底部 -->
<div class="footer">
<ul>
<li>
<div @click="$router.push('/')">
<i class="el-icon-s-home big"></i>
<p>首页</p>
</div>
</li>
<li>
<div>
<i class="el-icon-s-order current"></i>
<p class="current">订单</p>
</div>
</li>
<li>
<div @click="$router.push('/my')">
<i class="el-icon-s-custom"></i>
<p>我的</p>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
orders: [], // 默认值给一个空对象
billStatus: 'all', // 默认全部页签
count: 0,
isLoading: false,
resultClass: { wait: 'waitState', completed: 'completedState' }
}
},
created () {
// 第一时间渲染列表
const { billStatus } = this.$route.params
this.billStatus = billStatus
if (billStatus) {
this.getOrders(this.billStatus)
}
},
methods: {
// tabs切换
handleClick () {
console.log(this.billStatus)
this.getOrders(this.billStatus)
},
async getOrders (billStatus) {
// 从本地获取用户 id 和 token
const deptId = localStorage.getItem('dept_id')
// 发送获取个人信息的请求时，需要携带上token令牌，需要放在请求头Authorization字段上
const res = await this.$axios.get(`/orders/${deptId}/${billStatus}`)
console.log(res)
const { statusCode, data } = res.data
if (statusCode === 200) {
this.orders = data
}
},
orderDetail (orderType, orderId) {
this.$router.push({
name: orderType,
params: {
orderId: orderId
}
})
},
// 下拉刷新
onRefresh () {
setTimeout(() => {
this.$toast('刷新成功')
this.isLoading = false
this.getOrders(this.billStatus)
}, 1000)
}
}
}
</script>
<style lang="less" scoped>
.orderAll {
height: 100%;
// 单个订单
.wait1,
.completed1,
.completed2 {
border-radius: 7px;
padding: 10px;
box-shadow: 2px 2px 10px rgba(121, 118, 116, 0.4);
margin: 20px 20px;
}
}
</style>