387 lines
8.5 KiB
Vue
387 lines
8.5 KiB
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.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> |