cultivationApp/pages/plantAdmin/house.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/plantAdmin/addHouse')"></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="fomData.fence_house_name" shape="round"
          :clearabled='false' @change="inputval"></u-search>
        <view class="ser-text" @click="search">
          搜索
        </view>
      </view>
      <view class="tits">
        栏舍信息
      </view>
      <view class="card" v-for="(item,index) in datalist" :key="index" @click="navTo(`/pages/plantAdmin/houseDetail?id=${item.id}`)">
        <image class="img" :src="parseImg(item.pic)"></image>
        <view class="tips">
          <view class="title">{{item.fence_house_name}}</view>
          <view class="item">
            <view class="tip-name">动物名称: </view>
            <view>{{item.animal_name}} </view>
          </view>
          <view class="item">
            <view class="tip-name">动物类型: </view>
            <view>{{getAnimalType(item.animal_type)}} </view>
          </view>
          <view class="item">
            <view class="tip-name">容量: </view>
            <view>{{item.capacity}} </view>
          </view>
          <view class="item">
            <view class="tip-name">负责人: </view>
            <view>{{item.master}} </view>
          </view>
          <view class="item">
            <view class="tip-name">创建时间: </view>
            <view>{{item.create_time}} </view>
          </view>
        </view>
      </view>

      <view class="coneng-detail" v-if="datalist.length==0">
        <view class="">
          <image src="@/static/img/zw.png" mode="aspectFit"></image>
          <view class="">
            暂无数据
          </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';
  import store from "@/store/index.js"
  import {
    landlist
  } from '@/api/api.js'
  import {
    fenceHouseList
  } from "@/api/manage.js"
  import {
    animalTypeLists
  } from "@/api/dict.js"
  
  onLoad(() => {
    if (!store.state.userInfo) {
      uni.redirectTo({
        url: '/pages/Login/login'
      })
    }
  })
  onShow(() => {
    list()
  })
  onPullDownRefresh(() => {
    list()
    uni.stopPullDownRefresh()
  })
  onReachBottom(() => {
    getlist()
  })
  const datalist = ref([])
  const fomData = reactive({
    page_no: 1,
    page_size: 15,
    fence_house_name: ''
  })
  
  const animal_type_lists = ref([])
  const initAnimalTypeLists = ()=>{
    animalTypeLists().then(res=>{
      animal_type_lists.value = res.data;
    })
  }
  initAnimalTypeLists();
  const getAnimalType = (type)=>{
    return animal_type_lists.value.find(item=>item.value==type)?.name||'';
  }

  const list = () => {
    datalist.value.splice(0)
    fomData.page_no = 1
    getlist()
  }
  const getlist = () => {
    fenceHouseList(fomData).then(res=>{
      console.log(res);
      datalist.value = [...datalist.value, ...res.data.lists]
      console.log(datalist.value);
    })
  }
  const parseImg = (image)=>{
    try{
      if(typeof image == 'string') image = JSON.parse(image||'[]');
      return image[0];
    }catch(e){
      return ''
    }
  }

  //输入监听
  const inputval = (e) => {
    // console.log(e)
    if (e.length == 0) {
      list()
    }
  }

  //搜索
  const search = () => {
    list()
  }
  const navTo = (url)=>{
    if(url) uni.navigateTo({
      url: url
    })
    else uni.showToast({
      title: '暂未开放',
      icon: 'none'
    })
  }
  const navBack = ()=>{
    uni.navigateBack()
  }
  onMounted(() => {
    // console.log('22222222')
  })
</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;
    }
  }

  .header {
    background-color: #feb048;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0 10rpx 20rpx;
  }

  .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 20rpx;


    // padding-top: 100rpx;

    .head-img {
      // position: absolute;
      // display: flex;
      // top: 0;
      // right: 10rpx;
      // margin-top: 20rpx;

    }

    .land {
      width: 100rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      right: 60rpx;
      bottom: 130rpx;
      position: fixed;
    }


    .serch {

      // padding-bottom: 20rpx;
      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;
      }

      // width: 100%;
      // height: 100rpx;
      // background-color: #EAF2EF;
      // position: absolute;
      // position: fixed;
      // display: flex;
      // top: 0;
      // // padding-top: calc(70rpx + var(--status-bar-height) + 20rpx);
      // padding-right: 20rpx;


      // .custom-style {
      // 	color: #606266;
      // 	width: 140rpx;
      // 	border-radius: 30rpx;
      // 	margin-top: 10rpx;
      // 	margin-right: 20rpx;
      // }

      // z-index: 8888 !important;

    }

    .border-bgc {
      height: 200rpx;
      background-color: #feb048;
      border-radius: 0 0 40rpx 40rpx;
      position: absolute;
      width: 750rpx;

    }

    .coneng-detail {
      width: 478rpx;
      height: 341rpx;
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      font-size: 25rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #737373;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;

      margin: 300rpx auto;

      image {
        width: 280rpx;
        height: 142rpx;
        margin-bottom: 20rpx;


      }
    }

    .card {
      position: relative;

      margin: auto;
      background-color: #FFFFFF;
      box-sizing: border-box;
      border-radius: 14rpx;
      margin-bottom: 40rpx;
      display: flex;

      .img{
        width: 250rpx;
        height: 250rpx;
        margin-right: 20rpx;
        border-radius: 12rpx;
      }
      .tips{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title{
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        .item{
          display: flex;
          color: #999;
          font-size: 26rpx;
          .tip-name{
            flex-shrink: 0;
            color: #333;
            margin-right: 16rpx;
          }
        }
      }
      
      
    }
  }
</style>