cultivationApp/pages/leave/leave.vue

<template>
  <view style="position: relative;">
    <view class="top">
      <view class="" style="height:var(--status-bar-height) ;">
      </view>
      <view class="nav-con">
        <view class="left"></view>
        <view class="title" @click="navBack">
          <u-icon name="arrow-left" color="#fff" size="40rpx" style="margin-right: 10rpx;"></u-icon> <text
            style="padding-bottom: 5rpx;">离栏记录</text>
        </view>
        <view class="btn" style="margin-top: -5rpx;">
          <u-icon name="plus" color="#fff" size="40rpx" style="margin-right: 20rpx;" @click="navTo('/pages/leave/addLeave')"></u-icon>
          <Myindex url='/pages/index/massif' />
        </view>
      </view>
    </view>
    <view class="" style="height:var(--status-bar-height) ;">
    </view>
    <view class="nav-con">
    </view>

    <view class="content">
      <view class="serch">
        <u-search bgColor="white" :show-action="false" placeholder="请输入耳号" v-model="searchKey" shape="round"
          :clearabled='false' @change="inputval"></u-search>
        <view class="ser-text" @click="search">
          搜索
        </view>
      </view>
      <view class="tits">
        离栏记录
      </view>
      <view class="">
        <block class="" v-if="dataList.length>0">
          <view class="thing-card" v-for="(item, index) in dataList" :key="index"
            @click="navTo('/pages/leave/leaveDetail?id=23')">
            <view class="c-title">耳号</view>
            <view class="c-body">
              <view class="c-item">
                <view class="flex">
                  <view class="f-title">所在栏舍:</view>
                  <view>栏舍12号</view>
                </view>
                <view class="flex">
                  <view class="f-title">离舍原因:</view>
                  <view>太肥了</view>
                </view>
              </view>
              <view class="c-item">
                <view class="flex">
                  <view class="f-title">离舍类型:</view>
                  <view>生病</view>
                </view>
                <view class="flex">
                  <view class="f-title">离舍时间:</view>
                  <view>2023-12-21</view>
                </view>
              </view>
            </view>
            <view class="flex">
              <view class="f-title">备注:</view>
              <view>这是备注栏舍16号栏舍16号栏舍16号栏舍16号</view>
            </view>
          </view>
        </block>
        <view class="coneng-detail" v-else>
          <view class="">
            <image src="@/static/img/zw.png" mode="aspectFit"></image>
            <view class="">
              暂无数据
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script setup>
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh
  } from "@dcloudio/uni-app"
  import {
    ref,
    reactive,
    onMounted
  } from "vue"
  import Myindex from '@/components/return/index.vue';

  const searchKey = ref('');
  const dataList = reactive([{
      id: 1,
    },
    {
      id: 2,
    }
  ])


  //跳转
  const navTo = (url) => {
    uni.navigateTo({
      url
    })
  }

  const navBack = () => {
    uni.navigateBack()
  }

  //查看
  const perviewFn = (url) => {
    uni.previewImage({
      urls: [url]
    })
  }
</script>

<style lang="scss">
  page {
    background-color: $theme-bg-color;
  }

  .top {
    background-color: #feb048;
    position: fixed;
    z-index: 999999;
    width: 750rpx;

  }

  .nav-con {
    width: 100vw;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    color: #fff;

    .title {
      display: flex;
      align-items: center;
      margin-left: 20rpx;
    }

    .btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .tits {
    position: relative;
    padding-left: 20rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .tits::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    /* 左边框的宽度 */
    height: 30rpx;
    background-color: #FFB049;
  }

  .content {
    position: relative;
    padding: 0 28rpx;

    .serch {
      box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
      border-radius: 200rpx;
      position: relative;
      color: #feb048;
      font-size: 28rpx;
      margin-top: 20rpx;

      margin-bottom: 20rpx;

      .ser-text {
        position: absolute;
        padding-left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        right: 40rpx;

      }

      .ser-text::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 2px;
        /* 左边框的宽度 */
        height: 20rpx;
        background-color: #FFB049;
      }
    }

  }

  .thing-card {
    width: 694;
    box-sizing: border-box;
    padding: 28rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    font-size: 26rpx;
    margin-bottom: 30rpx;
    box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

    .c-title {
      font-weight: bold;
      margin-bottom: 10rpx;
      font-size: 30rpx;
    }

    .c-body {
      display: flex;

      .c-item {
        flex: 1;
      }
    }

      .flex {
        display: flex;
        color: #999;

        .f-title {
          color: #333;
          margin-right: 10rpx;
          flex-shrink: 0;
        }

        view {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
  }
</style>