TraceabilityAPP/pages/landDetail/results.vue

387 lines
8.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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.kind}}
</view>
</view>
<view class="detail">
<view class="detaila">
种植日期
</view>
<view class="detailb">
{{dataobj.plant_date}}
</view>
</view>
<view class="detail">
<view class="detaila">
收获日期
</view>
<view class="detailb">
{{dataobj.harvest_date}}
</view>
</view>
<view class="detail">
<view class="detaila">
生长期
</view>
<view class="detailb">
<!-- {{dataobj.plant_date}} -->
<!-- {{dataobj.actions[dataobj.actions.length-1].create_time.split(' ')[0]}} -->
{{ dataobj.group_day }}
</view>
</view>
<view class="detail">
<view class="detaila">
负责人
</view>
<view class="detailb">
<!-- {{dataobj.plant_date}} -->
<!-- {{dataobj.actions[dataobj.actions.length-1].create_time.split(' ')[0]}} -->
{{ dataobj.user}}
</view>
</view>
<view class="detail">
<view class="detaila">
生产地址
</view>
<view class="detailb">
{{dataobj.land_address}}
</view>
</view>
</view>
</view>
<view class="shop_action">
<view class="" v-for="(item,i) in dataobj.actions">
<view class="tit">
{{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)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>品种:
</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)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>品牌:
</view>
<view class="detail">
{{item.detail.breed}}
</view>
</view>
<view class="action-detail">
<view class="title">
{{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>用量:
</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">
参与人:
</view>
<view class="detail">
{{item.detail.user}}
</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> -->
<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
circular></u-swiper>
</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.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
</view>
</view>
<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.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> -->
<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
circular></u-swiper>
</view>
</view>
</view>
<view class="shop_action-detail" v-if="item.type==5">
<view class="action-detail">
<view class="title">
收获时间:
</view>
<view class="detail">
{{dataobj.harvest_date}}
</view>
</view>
<view class="action-detail">
<view class="title">
参与人:
</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> -->
<u-swiper :list="item.detail.pic" @click="hdClick" indicator indicatorMode="dot"
circular></u-swiper>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
suYuan
} from '@/api/api.js'
import {
ref,
reactive
} from "vue"
import {
onLoad,
onReady
} from "@dcloudio/uni-app"
const task_id = ref('');
const dataobj = reactive({})
const daysDiff = ref('');
onLoad((options) => {
task_id.value = options.id
// if (options.task_id) {
// mode.value = "detail"
// }
getlist1(options.id)
})
//获取详情
const getlist1 = (id) => {
suYuan({
plant_id: id
}).then((res) => {
if (res.code == 1) {
Object.assign(dataobj, res.data);
getday(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) => {
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;
.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%;
}
}
}
}
}
}
}
.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: #34D08D;
}
</style>