cultivationApp/pages/landDetail/results.vue

<template>
	<view class="content">
		<view class="banner">
			<u-swiper :list="dataobj.pic" width="100%" height="484rpx"></u-swiper>
		</view>

		<view class="content-con-a" v-if="Object.keys(dataobj).length>0">
			<view class="shop_detail">
				<view class="tit">
					动物信息
				</view>
				<view class="shop_detail-botm">
					<view class="detail">
						<view class="detaila">
							耳号：
						</view>
						<view class="detailb">
							{{dataobj.sn}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							品种：
						</view>
						<view class="detailb">
							{{dataobj.brand}}
						</view>
					</view>
					<view class="detail">
						<view class="detaila">
							性别：
						</view>
						<view class="detailb">
							{{dataobj.gender==1?'公':'母'}}
						</view>
					</view>
				</view>
			</view>
			<view class="shop_action">
			</view>

		</view>

    <view class="card-d" v-for="(item, index) in dataList" :key="index">
    	<u--form labelWidth='130' :model="item" ref="form" v-if="item.type==2">
    		<view class="c-title">驱虫信息</view>
    		<view class="c-box">
    			<u-form-item label="驱虫药名称" borderBottom>
    				<up-input  readonly type="txt"
    					border="none" v-model="item.vermifuge_name"></up-input>
    			</u-form-item>
    			<u-form-item label="驱虫方式" borderBottom>
    				<up-input readonly 
    					border="none" v-model="item.deworming_method"></up-input>
    			</u-form-item>
          <u-form-item label="驱虫时间" borderBottom >
          	<up-input  readonly
          		border="none" v-model="item.create_time"></up-input>
          </u-form-item>
          <swiper class="swiper" autoplay indicator-dots indicator-active-color="#ffb049" indicator-color="rgba(255,255,255,0.4)">
            <swiper-item class="swiper-item" v-for="(t, index) in item.pic" :key="index">
              <image class="img" :src="t"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{item.remark}}
          	</view>
          </u-form-item>
    		</view>
    	</u--form>
      <u--form labelWidth='130' :model="item" ref="form" v-if="item.type==3">
      	<view class="c-title">喂食信息</view>
      	<view class="c-box">
      		<u-form-item label="饲料种类" borderBottom>
      			<view style="font-weight: 600;">{{getFeedType(item.feed_type)}}</view>
      		</u-form-item>
      		<u-form-item label="饲料品牌" borderBottom>
      			<up-input  readonly 
      				border="none" v-model="item.feed_brand"></up-input>
      		</u-form-item>
      		<u-form-item label="饲料消耗量(kg)" borderBottom >
      			<up-input  readonly type="number"
      				border="none" v-model="item.feed_consumption"></up-input>
      		</u-form-item>
          <u-form-item label="喂食时间" borderBottom >
          	<up-input  readonly
          		border="none" v-model="item.create_time"></up-input>
          </u-form-item>
          <swiper class="swiper" autoplay indicator-dots indicator-active-color="#ffb049" indicator-color="rgba(255,255,255,0.4)">
            <swiper-item class="swiper-item" v-for="(t, index) in item.pic" :key="index">
              <image class="img" :src="t"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{item.remark}}
          	</view>
          </u-form-item>
      	</view>
      </u--form>
      <u--form labelWidth='130' :model="item"  ref="form" v-if="item.type==1">
      	<view class="c-title">消毒信息</view>
      	<view class="c-box">
      		<u-form-item label="消毒剂名称" borderBottom>
      			<up-input  readonly 
      				border="none" v-model="item.disinfectant_name"></up-input>
      		</u-form-item>
      		<u-form-item label="消毒剂浓度" borderBottom>
      			<up-input  readonly 
      				border="none" v-model="item.concentration"></up-input>
      		</u-form-item>
          <u-form-item label="消毒方法" borderBottom>
          	<up-input  readonly 
          		border="none" v-model="item.disinfectant_method"></up-input>
          </u-form-item>
          <u-form-item label="消毒区域" borderBottom>
          	<up-input  readonly 
          		border="none" v-model="item.disinfectant_area"></up-input>
          </u-form-item>
          <u-form-item label="消毒人员" borderBottom >
          	<up-input  readonly 
          		border="none" v-model="item.operator"></up-input>
          </u-form-item>
          <u-form-item label="消毒时间" borderBottom >
          	<up-input readonly
          		border="none" v-model="item.create_time"></up-input>
          </u-form-item>
          <swiper class="swiper" autoplay indicator-dots indicator-active-color="#ffb049" indicator-color="rgba(255,255,255,0.4)">
            <swiper-item class="swiper-item" v-for="(item, index) in item.pic" :key="index">
              <image class="img" :src="item"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{item.remark}}
          	</view>
          </u-form-item>
      	</view>
      </u--form>
      <u--form labelWidth='130' :model="item"  ref="form" v-if="item.type==4">
      	<view class="c-title">疫苗信息</view>
      	<view class="c-box">
      		<u-form-item label="疫苗名称" borderBottom>
      			<up-input  readonly
      				border="none" v-model="item.vaccine_name"></up-input>
      		</u-form-item>
      		<u-form-item label="疫苗厂家" borderBottom>
      			<up-input  readonly 
      				border="none" v-model="item.vaccine_manufacturers"></up-input>
      		</u-form-item>
          <u-form-item label="疫苗批次号" borderBottom>
          	<up-input  readonly 
          		border="none" v-model="item.vaccine_batch"></up-input>
          </u-form-item>
          <u-form-item label="接种方式" borderBottom >
          	<up-input  readonly 
          		border="none" v-model="item.vaccination_method"></up-input>
          </u-form-item>
          <u-form-item label="接种部位" borderBottom>
          	<up-input  readonly 
          		border="none" v-model="item.vaccination_site"></up-input>
          </u-form-item>
          <u-form-item label="免疫有限期" borderBottom >
          	<up-input   readonly
          		border="none" v-model="item.immune_validity_period"></up-input>
          </u-form-item>
          <u-form-item label="注射人员" borderBottom >
          	<up-input   readonly
          		border="none" v-model="item.operator"></up-input>
          </u-form-item>
          <u-form-item label="接种时间" borderBottom >
          	<up-input   readonly
          		border="none" v-model="item.create_time"></up-input>
          </u-form-item>
          <swiper class="swiper" autoplay indicator-dots indicator-active-color="#ffb049" indicator-color="rgba(255,255,255,0.4)">
            <swiper-item class="swiper-item" v-for="(item, index) in item.pic" :key="index">
              <image class="img" :src="item"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{item.remark}}
          	</view>
          </u-form-item>
      	</view>
      </u--form>
      <u--form labelWidth='130' :model="item"  ref="form" v-if="item.type==5">
      	<view class="c-title">喂水信息</view>
      	<view class="c-box">
      		<u-form-item label="喂水量(L)" borderBottom>
      			<up-input  readonly
      				border="none" v-model="item.water_consumption"></up-input>
      		</u-form-item>
          <u-form-item label="喂水人员" borderBottom >
          	<up-input  readonly
          		border="none" v-model="item.operator"></up-input>
          </u-form-item>
          <u-form-item label="喂水时间" borderBottom >
          	<up-input  readonly
          		border="none" v-model="item.create_time"></up-input>
          </u-form-item>
          <swiper class="swiper" autoplay indicator-dots indicator-active-color="#ffb049" indicator-color="rgba(255,255,255,0.4)">
            <swiper-item class="swiper-item" v-for="(item, index) in item.pic" :key="index">
              <image class="img" :src="item"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{item.remark}}
          	</view>
          </u-form-item>
      	</view>
      </u--form>
    </view>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
  import {
    feedingTypeLists
  } from "@/api/dict.js"
	import {
		onLoad,
		onReady,
    onReachBottom
	} from "@dcloudio/uni-app"
  import {
    fenceHouseDetail,
    animalInfoList,
    operationLogIndex,
    animalInfoDetail
  } from "@/api/manage.js"
  import {
    suYuanData
  } from "@/api/index.js"
	const task_id = ref('');
  const sn = ref('');
	const dataobj = reactive({})
	const daysDiff = ref('');

	onLoad((options) => {
		// sn.value = options.sn;
    sn.value = 8;
		getFenceHouseDetail();
    getSuYuanData();
	})
  onReachBottom(()=>{
    where.value.page_no++;
    getSuYuanData();
  })

	//获取详情
	const getFenceHouseDetail = () => {
	  animalInfoDetail({
	    id: sn.value,
	  }).then((res) => {
	    if (res.code == 1) {
	      res.data.pic = JSON.parse(res.data.pic||'[]');
	      Object.assign(dataobj, res.data);
	    }
	  });
	};
  
  const feedType = ref([]);
  const initFeedingTypeLists = ()=>{
    feedingTypeLists().then(res=>{
      feedType.value = res.data;
    })
  }
  const getFeedType = (value)=>{
    return feedType.value.find(item=>item.value==value)?.name||'';
  }
  initFeedingTypeLists();
  
  const where = ref({
      animal_sn: '6655',
      page_no: 1,
      page_size: 10
    })
  const dataList = ref([]);
  // 操作列表
  const getSuYuanData = ()=>{
    suYuanData(where.value).then(res=>{
      if(res.data.lists.length<=0) return ;
      res.data.lists = res.data.lists.map(item=>{
        item = {
          ...item,
          ...item.detail,
        };
        if(item.pic) item.pic = JSON.parse(item.pic);
        return item;
      })
      dataList.value = [...dataList.value, ...res.data.lists];
    })
  }
  
	//查看图片
	const perviewFn = (url) => {
		console.log(url)
		uni.previewImage({
			urls: url
		})
	}
  
</script>


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

	.content {
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.banner {
			width: 694rpx;
			height: 484rpx;

			margin: 0 auto;
		}

		.content-con-a {
			padding: 0 32rpx;
			margin-top: 30rpx;
      
      .tit {
      	position: relative;
      	padding-left: 20rpx;
      	font-weight: bold;
      	margin-bottom: 20rpx;
      }
      
      .tit::before {
      	content: "";
      	position: absolute;
      	top: 50%;
      	transform: translateY(-50%);
      	left: 0;
      	width: 3px;
      	/* 左边框的宽度 */
      	height: 30rpx;
      	background-color: #FFB049;
      }

			.shop_detail {
				.shop_detail-top {
					margin-bottom: 28rpx;
				}

				.shop_detail-botm {
					width: 694rpx;
					padding: 35rpx 0;
					background: white;
					border-radius: 21rpx 21rpx;
					box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

					.detail {
						display: flex;
						margin-bottom: 35rpx;
						margin-left: 35rpx;

						.detaila {
							width: 200rpx;
						}

						.detailb {
							width: 500rpx;
						}
					}

				}
			}

			.shop_action {
				margin-top: 42rpx;

				.shop_action-title {
					font-size: 33rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 28rpx;
				}

				.shop_action-detail {
					width: 694rpx;
					padding: 35rpx 0;
					background: #FFFFFF;
					border-radius: 21rpx 21rpx;
					margin-bottom: 30rpx;
					box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);

					.action-detail {
						display: flex;
						padding-left: 35rpx;
						margin-bottom: 25rpx;

						.title {
							width: 200rpx;
						}

						.detail {
							width: 500rpx
						}
					}

					.action-detail-img {
						padding-left: 35rpx;
						margin-bottom: 30rpx;

						.title {
							margin-bottom: 30rpx;

						}

						.detail-img {
							width: 627rpx;
							// height: 529rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

		}
	}

	
  
  .card-d {
  	background-color: #fffcf5;
  
  	.c-title {
  		font-weight: bold;
  		display: flex;
  		align-items: center;
  		padding: 30rpx;
  		padding-bottom: 15rpx;
  
  		&:before {
  			content: '';
  			display: inline-block;
  			height: 0.8rem;
  			width: 6rpx;
  			margin-top: 0.2rem;
  			margin-right: 10rpx;
  			background-color: #feb048;
  			border-radius: 6rpx;
  		}
  	}
  
  	.c-box {
  		background-color: #fff;
  		padding: 20rpx;
      margin: 28rpx;
      margin-top: 0;
      border-radius: 14rpx;
  		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  	}
  
  	.c-box-p {
  		padding: 20rpx;
  	}
  
  	.btn {
  		margin: 20rpx auto;
  		width: 694rpx;
  		height: 80rpx;
  		border-radius: 80rpx;
  		background-color: #feb048;
  		color: #fff;
  	}
  }
  .swiper{
    width: 654rpx;
    height: 400rpx;
    margin: 20rpx 0;
    border-radius: 14rpx;
    overflow: hidden;
    .img{
      width: 100%;
      height: 100%;
    }
  }

  :deep(.u-form-item__body){
    padding: 5rpx 0 !important;
  }
</style>