cultivationApp/components/plant/breedInfo.vue

<template>
	<view class="" style="margin-top: 10rpx;">
		<view v-if="info.fenceHouseAttr" class="" style="display: flex;align-items: center;height: 60rpx;">
			<u-icon name="map"></u-icon>
			{{info.fenceHouseAttr.fence_house_name}}
		</view>

		<view class="info">
			<view class="info-li" style="background-image: url('/static/main/animal/er_hao.png');">
				耳号
				<view class="">
					{{info.sn}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/animal/pin_lei.png');">
				品类
				<view class="">
					{{getAnimalType(info.animal_type)}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/animal/pin_zhong.png');">
				品种
				<view class="">
					{{info.brand}}
				</view>
			</view>
			<view class="info-li" @click="showInputDialog('physi_stage', info.physi_stage)" style="background-image: url('/static/main/animal/sheng_li_jie_duan.png');">
				生理阶段
				<view class="">
					<uni-icons type="compose" size="20"></uni-icons>{{info.physi_stage}}
				</view>
			</view>
			<view class="info-li" @click="showInputDialog('current_estimation', info.current_estimation)" style="background-image: url('/static/main/animal/ti_zhong.png');">
				体重
				<view class="">
					<uni-icons type="compose" size="20"></uni-icons>{{info.current_estimation}}kg
				</view>
			</view>
      <view class="info-li" style="background-image: url('/static/main/animal/jian_kang_zhuang_kuang.png');">
      	体温
      	<view class="">
      		{{ info.temperature || '--' }} ℃
      	</view>
      </view>
      <!-- <view class="info-li-d"></view> -->
		</view>
    <u-modal :show="show" :title="editType=='current_estimation'?'修改体重':'修改生理阶段'" showConfirmButton showCancelButton @confirm="dialogInputConfirm" @cancel="show = false">
      <u-input v-model="editValue" :type="editType=='current_estimation'?'number':'text'"></u-input>
    </u-modal>
	</view>
</template>

<script setup>
	import {
		reactive,
		watch,
    ref
	} from "vue";
  import {
    animalTypeLists
  } from "@/api/dict.js"
  import {
    animalInfoEdit
  } from "@/api/manage.js"
  
	const props = defineProps({
		info: Object,
		isDetail: Boolean
	})
  
  const emit = defineEmits(['getFenceHouseDetail']);
  
  console.log(props.info);
  
  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 show = ref(false);
  const editType = ref('');
  const editValue = ref('');
  const showInputDialog = (type, value)=>{
    editType.value = type;
    editValue.value = value;
    show.value = true;
  }
  
  const dialogInputConfirm = (e)=>{
    if(editValue.value=='') return show.value = false;
    let obj = JSON.parse(JSON.stringify(props.info));
    obj[editType.value] = editValue.value;
    animalInfoEdit(obj).then(res=>{
      // props.info[editType.value] = editValue.value;
      emit('getFenceHouseDetail')
      show.value = false;
    }).catch(err=>{
      
    })
  }

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

<style lang="scss" scoped>
	.info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.info-li {
			width: 223rpx;
			height: 129rpx;
			border-radius: 10rpx;
			background-size: 100% 100%;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
		}
    .info-li-d {
    	width: 223rpx;
    	height: 129rpx;
    	border-radius: 10rpx;
    	padding: 20rpx;
    	margin-bottom: 20rpx;
    }
	}

	.card {
		// width: 710rpx;
		margin: 0 auto;

		.tit {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EBF1EF;
		}

		.card-li {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>