cd-work-flow-ding/src/views/user/1111111111.vue

<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>