property-manager-side/wuye-manager-uniapp/pageSubPack/inspection/toDays_inscpection.vue

<template>
  <view class="today_inspection_page">
    <!-- tabs -->
    <view class="tabs_box">
      <view
        v-for="(item, index) in tabslist"
        :key="index"
        @tap="handleTabs(item)"
        class="tabs_items"
        :class="{
          active: item.value === activeValue
        }"
      >
        {{ item.name }}
      </view>
    </view>
    <!-- tabs -->

    <!-- body -->
    <view class="inspection_body">
      <view class="inspection_items" v-for="(item, index) in list" :key="index">
        <view class="title">
          <text class="subtitle">
            <i></i>
            {{ item.address }}
          </text>
          <text class="noactions" v-if="item.status === 0">未巡检</text>
          <text class="noactions alaway_actions" v-else>已巡检</text>
        </view>
        <view class="inspection_item_box">
          <text class="inspection_item" v-for="(ite, index) in item.item" :key="index">
            {{ ite }}
          </text>
        </view>
        <view class="inspection_time">
          <text>巡检时间：</text>
          <text>{{ item.time }}</text>
        </view>
        <view class="inspection_time">
          <text>巡检人：</text>
          <text>{{ item.user }}</text>
          <view class="actions" v-if="item.status === 0" @tap="gotoInspection">
            <text>去巡检</text>
          </view>
        </view>
      </view>
    </view>
    <!-- body -->
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// tabs =========================================================
const activeValue = ref(0)
const tabslist = ref([
  {
    name: '全部',
    value: 0
  },
  {
    name: '已完成',
    value: 1
  },
  {
    name: '已派单',
    value: 2
  }
])
// 点击事件
const handleTabs = (val: { name: string; value: number }) => {
  activeValue.value = val.value
}
// tabs =========================================================
// body =========================================================
/** 跳转到巡检上传页面 */
const gotoInspection = () => {
  console.log('upload')
  uni.navigateTo({
    url: '/pageSubPack/inspection/inspection_upload'
  })
}
// body =========================================================
const list = ref([
  {
    address: '幸福苑小区- B1层地下车库',
    time: '07:00:00 -09:00:00',
    item: ['防火设施安全巡检'],
    user: '李相龙',
    status: 0 // 0未巡检 1已巡检
  },
  {
    address: '幸福苑小区- B2层地下车库',
    time: '13:00:00 -15:00:00',
    item: ['设备巡检'],
    user: '李相龙',
    status: 1 // 0未巡检 1已巡检
  }
])
</script>

<style scoped lang="scss">
/* 页面容器 */
.today_inspection_page {
  padding: 20rpx 40rpx 40rpx;
  min-height: 100vh;
  max-height: 100vh;
  background: repeating-linear-gradient(180deg, #e2f0ff, #f6faff);

  // tabs
  .tabs_box {
    height: 60rpx;
    line-height: 60rpx;
    width: 100%;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;

    .tabs_items {
      /* 关键：不压缩宽度 */
      flex-shrink: 0;
      margin-right: 60rpx;
      color: #4d5dfa;

      &.active {
        position: relative;

        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 8rpx;
          background-color: #6371fa;
          background: linear-gradient(180deg, #4d5dfa 0%, #bac0fa 100%);
          border-radius: 4rpx;
          position: absolute;
          left: 0;
          bottom: 0rpx;
        }
      }
    }
  }

  // body
  .inspection_body {
    margin-top: 20rpx;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    .inspection_items {
      margin-top: 20rpx;
      padding: 40rpx;
      background-color: #fff;
      border-radius: 16rpx;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .subtitle {
          position: relative;
          padding-left: 10rpx;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 32rpx;
          color: #333333;

          i {
            display: block;
            position: absolute;
            left: 0;
            top: 6rpx;
            height: 100%;
            width: 6rpx;
            height: 28rpx;
            background: #4d5dfa;
          }
        }

        .noactions {
          font-weight: 400;
          font-size: 28rpx;
          color: #4d5dfa;
          line-height: 36rpx;
        }

        .alaway_actions {
          color: #6d6d6d;
        }
      }

      // 巡检项目
      .inspection_item_box {
        margin-top: 20rpx;
        margin-bottom: 20rpx;

        .inspection_item {
          border: 1px solid #4d5dfa;
          padding: 0 14rpx;
          height: 48rpx;
          border-radius: 198rpx 198rpx 198rpx 198rpx;
          border: 2rpx solid #4d5dfa;

          font-size: 28rpx;
          color: #4d5dfa;
          line-height: 36rpx;
        }
      }

      //  巡检时间
      .inspection_time {
        margin-bottom: 22rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
        position: relative;
      }

      .actions {
        position: absolute;
        right: 0;
        bottom: 0;

        width: 140rpx;
        height: 50rpx;
        background: #4d5dfa;
        border-radius: 198rpx 198rpx 198rpx 198rpx;

        text-align: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 50rpx;
      }
    }
  }
}
</style>