cultivationApp/pages/feedDetail/feedDetail.vue

<template>
	<view class="content">
		<view class="card-d">
			<u--form labelWidth='130' :model="formData" :rules="rules" ref="form">
				<view class="c-title">喂食信息</view>
				<view class="c-box">
					<u-form-item label="饲料种类" borderBottom>
						<up-input  readonly 
							border="none" v-model="formData.feed_type_name"></up-input>
					</u-form-item>
					<u-form-item label="饲料品牌" borderBottom>
						<up-input  readonly 
							border="none" v-model="formData.feed_brand"></up-input>
					</u-form-item>
					<u-form-item label="饲料消耗量(kg)" borderBottom >
						<up-input  readonly type="number"
							border="none" v-model="formData.feed_consumption"></up-input>
					</u-form-item>
          <!-- <u-form-item label="喂养人员" borderBottom >
          	<up-input  readonly type="number"
          		border="none" v-model="formData.breed"></up-input>
          </u-form-item> -->
          <u-form-item label="喂食时间" borderBottom >
          	<up-input  readonly
          		border="none" v-model="formData.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 formData.pic" :key="index">
              <image class="img" :src="item"></image>
            </swiper-item>
          </swiper>
          <u-form-item label="备注" borderBottom >
          	<view class="">
          	  {{formData.remark}}
          	</view>
          </u-form-item>
				</view>
			</u--form>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
    getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
  import {
    feedingTypeLists
  } from "@/api/dict.js"
  
  const feedType = ref([]);
  const initFeedingTypeLists = ()=>{
    feedingTypeLists().then(res=>{
      feedType.value = res.data;
      formData.feed_type_name = getType(formData.feed_type);
    })
  }
  const getType = (value)=>{
    return feedType.value.find(item=>item.value==value)?.name||'';
  }

	const formData = reactive({})
	
	onLoad(function(options){
	  const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel();
	  eventChannel.on('setDatasItem', function(data) {
	    Object.assign(formData, data)
      initFeedingTypeLists();
	  })
	})
	
</script>

<style lang='scss' scoped>
	page {
		background-color: #fffcf5;
	}

	.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>