TraceabilityAPP/pages/husbandryForm/detail.vue

322 lines
7.1 KiB
Vue

<template>
<view class="content">
<view class="content-con-a" v-if="datalist.length>0">
<view class="shop_action">
<view class="" v-for="(item,i) in datalist">
<view class="shop_action-title">
{{item.type_text}}
</view>
<view class="shop_action-detail" v-if="item.type!=3&&item.type!=5">
<view class="action-detail">
<view class="title">
{{item.type_text.slice(0, -2)}}品种:
</view>
<view class="detail">
{{item.detail.kind}}
</view>
</view>
<view class="action-detail" v-if="item.detail.breed">
<view class="title">
{{item.type_text.slice(0, -2)}}品牌:
</view>
<view class="detail">
{{item.detail.breed}}
</view>
</view>
<view class="action-detail">
<view class="title">
{{item.type_text.slice(0, -2)}}用量:
</view>
<view class="detail">
{{item.detail.dosage}}
<text v-if='item.type==4'>升</text>
<text v-if='item.type!=4&&item.type!=5'>斤</text>
</view>
</view>
<view class="action-detail">
<view class="title">
{{item.type_text.slice(0, -2)}}人:
</view>
<view class="detail">
{{item.detail.user}}
</view>
</view>
<view class="action-detail" v-if="item.detail.start_date">
<view class="title">
{{item.type_text.slice(0, -2)}}开始时间:
</view>
<view class="detail">
{{item.detail.start_date}}
</view>
</view>
<view class="action-detail" v-if="item.detail.end_date">
<view class="title">
{{item.type_text.slice(0, -2)}}结束时间:
</view>
<view class="detail">
{{item.detail.end_date}}
</view>
</view>
<view class="action-detail-img">
<view class="title">
{{item.type_text.slice(0, -2)}}图片:
</view>
<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
<image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
</image>
</view>
</view>
</view>
<view class="shop_action-detail" v-if="item.type==3">
<view class="action-detail">
<view class="title">
灌溉面积:
</view>
<view class="detail">
{{item.detail.area}}亩
</view>
</view>
<view class="action-detail">
<view class="title">
灌溉方式:
</view>
<view class="detail">
{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
</view>
</view>
<view class="action-detail">
<view class="title">
灌溉人:
</view>
<view class="detail">
{{item.detail.user}}
</view>
</view>
<view class="action-detail" v-if="item.detail.start_date">
<view class="title">
{{item.type_text.slice(0, -2)}}开始时间:
</view>
<view class="detail">
{{item.detail.start_date}}
</view>
</view>
<view class="action-detail" v-if="item.detail.end_date">
<view class="title">
{{item.type_text.slice(0, -2)}}结束时间:
</view>
<view class="detail">
{{item.detail.end_date}}
</view>
</view>
<view class="action-detail-img">
<view class="title">
灌溉图片:
</view>
<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
<image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
</image>
</view>
</view>
</view>
<view class="shop_action-detail" v-if="item.type==5">
<view class="action-detail">
<view class="title" style="width: 200rpx;">
收获时间:
</view>
<view class="detail">
{{item.create_time}}
</view>
</view>
<view class="action-detail">
<view class="title" style="width: 200rpx;">
收获人:
</view>
<view class="detail">
{{item.detail.user}}
</view>
</view>
<view class="action-detail-img">
<view class="title">
收获图片:
</view>
<view class="detail-img" v-if="item.detail&&item.detail.pic&&item.detail.pic.length>0">
<image @click="perviewFn(item.detail.pic)" :src="item.detail.pic[0]" mode="aspectFit">
</image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
listForType
} from '@/api/api.js'
import {
ref,
reactive
} from "vue"
import {
onLoad,
onReady
} from "@dcloudio/uni-app"
const task_id = ref('');
const datalist = reactive([])
const daysDiff = ref('');
onLoad((options) => {
task_id.value = options.id
// if (options.task_id) {
// mode.value = "detail"
// }
getlist1(options.plant_id, options.type)
})
//获取详情
const getlist1 = (id, type) => {
listForType({
plant_id: id,
type: type
}).then((res) => {
if (res.code == 1) {
datalist.splice(0, datalist.length, ...res.data)
}
});
};
//生长期计算
const getday = (data) => {
const start = new Date(data.plant_date);
const end = new Date(data.actions[data.actions.length - 1].create_time.split(' ')[0]);
const diffTime = Math.abs(end - start);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
daysDiff.value = diffDays
}
//查看图片
const perviewFn = (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;
.shop_detail {
.shop_detail-top {
margin-bottom: 28rpx;
}
.shop_detail-botm {
width: 694rpx;
padding: 35rpx 0;
background: #FFFFFF;
border-radius: 21rpx 21rpx;
.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;
.action-detail {
display: flex;
padding-left: 35rpx;
margin-bottom: 25rpx;
.title {
width: 240rpx;
}
.detail {
width: 450rpx
}
}
.action-detail-img {
padding-left: 35rpx;
margin-bottom: 30rpx;
.title {
margin-bottom: 30rpx;
}
.detail-img {
width: 627rpx;
height: 529rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
</style>