wanyu_frontend/pages/workbench/workbench.vue

<template>
  <view class="ctr">
    <view class="fixed-top">
      <me-top title="工作台"></me-top>
      <view class="filter flex-sb line-after">
        <view v-for="(item, index) in filterType" :key="index" class="filter-item flex-c" @click="filter(item.id)">
          <view :class="['title', 'flex-c', data.filterIndex == item.id ? 'title-active' : '']">{{item.name}}({{item.num}})</view>
          <view class="select-style" v-if="data.filterIndex == item.id"></view>
        </view>
      </view>
    </view>

    <me-empty-space :height="listMarginTop"></me-empty-space>
    <view class="list">
      <view class="order-item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r">平台已收款</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="user flex-sb">
          <view class="left">
            <view class="user-name flex-l">
              <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
              <view class="name">安子辰</view>
            </view>
            <view class="phone flex-l">18950807422</view>
          </view>
          <view class="right flex-c">
            <view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
              <me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
            </view>
          </view>
        </view>
        <view class="status-ctr flex-sb">
          <view class="title flex-l">当前工单状态</view>
          <view class="status flex-c">待联系客户</view>
        </view>
      </view>
      <view class="order-item">
        <view class="top flex-sb">
          <view class="type flex-l">日常保洁</view>
          <view class="price flex-r important-color">上门报价</view>
        </view>
        <view class="content flex-sb">
          <view class="left">
            <view class="address-name flex-l">
              金城花园(天府二街)
            </view>
            <view class="address">
              广东省茂名市茂南区金城路26号大院附近
            </view>
            <view class="time-ctr flex-l">
              <me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
              <text class="time">周日 10月08日 12:30</text>
            </view>
          </view>
          <view class="right">
            <view class="icon-ctr flex-c">
              <me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
            </view>
            <view class="distance flex-c">8.34公里</view>
          </view>
        </view>
        <view class="user flex-sb">
          <view class="left">
            <view class="user-name flex-l">
              <me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
              <view class="name">安子辰</view>
            </view>
            <view class="phone flex-l">18950807422</view>
          </view>
          <view class="right flex-c">
            <view class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
              <me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
            </view>
          </view>
        </view>
        <view class="status-ctr flex-sb">
          <view class="title flex-l">当前工单状态</view>
          <view class="status flex-c">待联系客户</view>
        </view>
      </view>
    </view>
    <me-empty-space height="100"></me-empty-space>
  </view>
</template>

<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
const data = reactive({
  globalData: {},
  filterIndex: 1
})
onLoad(() => {
  data.globalData = inject('globalData')
})

const listMarginTop = computed(() => {
  return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH) + 50) * 2
})

const filterType = reactive([
  {
    id: 1,
    name: '进行中',
    num: 2,
  }, {
    id: 2,
    name: '今日',
    num: 2,
  }, {
    id: 3,
    name: '明日',
    num: 0,
  }, {
    id: 4,
    name: '全部',
    num: 724,
  },
])

const filter = (index) => {
  data.filterIndex = index
}
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 686rpx;
    .filter {
      width: 686rpx;
      height: 100rpx;
      .filter-item {
        width: 170rpx;
        height: 100%;
        position: relative;
        .title {
          width: 100%;
          font-size: 28rpx;
          color: var(--summaryColor);
          line-height: 28rpx;
        }
        .title-active {
          color: var(--themeColor) !important;
        }
        .select-style {
          position: absolute;
          bottom: 0;
          width: 122rpx;
          height: 4rpx;
          background: var(--themeColor);
          border-radius: 2rpx;
        }
      }
    }
  }
}
</style>