heli-mes/mes-ui/mini-app/src/pages/unqualifiedNotification/unqualifiedNotification.vue

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import dataItem from './components/dataItem.vue'
import detailPanel from './components/detailPanel.vue'
const childRef = ref(null);
// tabs 数据
const orderTabs = ref([
  { orderState: '0', title: '未审批', isRender: false },
  { orderState: '1', title: '已审批', isRender: false },
])
// 高亮下标
const activeIndex = ref(0)
const handleIndexChange = (index: any) => {
  orderTabs.value.forEach((e) => {
    e.isRender = false
  })
  activeIndex.value = index
  orderTabs.value[index].isRender = true
}
onLoad(async (options) => {
  if (options.state) {
    // 高亮下标
    orderTabs.value.forEach((e, index) => {
      e.isRender = e.orderState == options.state
      if (e.isRender) {
        activeIndex.value = index
      }
    })
  } else {
    orderTabs.value.forEach((e, index) => {
      e.isRender = e.orderState == '0'
      if (e.isRender) {
        activeIndex.value = index
      }
    })
  }
})

const btnTop = ref(100)
const btnLeft = ref(20)
const startX = ref(0)
const startY = ref(0)

const isShowPop = ref(false)
// 新增
const handleAdd = () => {
  popup.value?.open()
  isShowPop.value = true
}
// uni-ui 弹出层组件 ref
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const handlePopClose = (flag) => {
  popup.value?.close()
  isShowPop.value = false
  flag && childRef.value[0].updateData()
}
</script>

<template>
  <view class="viewport">
    <view class="tabs">
      <text class="item" :class="{ active: activeIndex == index }" v-for="(item, index) in orderTabs" :key="item.title"
        @tap="handleIndexChange(index)">
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex ? '65%' : '14%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="handleIndexChange($event.detail.current)">
      <!-- 滑动项 -->
      <swiper-item v-for="item in orderTabs" :key="item.title">
        <dataItem ref="childRef" v-if="item.isRender" :order-state="item.orderState" />
      </swiper-item>
    </swiper>
    <view class="float-btn" :style="{bottom: btnTop + 'px', right: btnLeft + 'px'}" @click="handleAdd">
      <image class="add" src="/static/images/unqualifiedNotification-add.png" mode="scaleToFill" />
    </view>
    <!-- uni-ui 弹出层 -->
    <uni-popup ref="popup" :mask-click="false" type="bottom" background-color="#fff">
      <detailPanel v-if="isShowPop" @close="handlePopClose" />
    </uni-popup>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: reactive;

  // background-color: #3775F6;
  .navbar {
    width: 750rpx;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    /* background-color: #f8f8f8; */
    background-color: #3775f6;

    .wrap {
      position: relative;
      background-color: #3775f6;

      .title {
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        /* color: #000; */
        color: #fff;
      }

      .back {
        position: absolute;
        left: 0;
        height: 44px;
        width: 44px;
        font-size: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        /* color: #000; */
        color: #fff;
      }
    }
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    line-height: 60rpx;
    position: relative;
    z-index: 9;
    width: 100%;

    .item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #1D2129;

      &.active {
        color: #356899;
      }
    }

    .cursor {
      position: absolute;
      left: 13%;
      bottom: 0;
      width: 20%;
      height: 6rpx;
      padding: 0 50rpx;
      background-color: #356899;
      /* 过渡效果 */
      transition: all 0.4s;
    }
  }

  // swiper
  .swiper {
    background-color: #f7f7f8;
  }
  .float-btn {
    position: absolute;
    color: #fff;
    text-align: center;
    .add {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>