TraceabilityAPP/pages/allPlant/index.vue

162 lines
3.0 KiB
Vue
Raw Normal View History

2023-10-21 18:02:06 +08:00
<template>
<view class="content">
<view class="card">
<view class="tit">
<view class="">
1号土地
</view>
<view class="">
溯源码: 12302
</view>
</view>
<view class="card-li">
<view class="">
当前种植: 土豆
</view>
<view class="">
种植品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
土地面积: 20
</view>
<view class="">
种子品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
预计产量: 20
</view>
<view class="">
已出售: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
播种时间: 2020.12.01
</view>
</view>
</view>
<view class="status">
<view class="" style="margin-bottom: 30rpx;">
今日种植状态
</view>
2023-10-25 19:55:18 +08:00
<imgCard text="地址"
imgUrl='http://ceshi-suyuan.lihaink.cn/uploads/20231025/3048b734cff7d9adfb00aaf6ab7290e5.jpeg'>
</imgCard>
2023-10-21 18:02:06 +08:00
</view>
<view class="status">
<view class="" style="margin-bottom: 30rpx;">
播种图片
</view>
2023-10-25 19:55:18 +08:00
<imgCard text="地址"
imgUrl='http://ceshi-suyuan.lihaink.cn/uploads/20231025/3048b734cff7d9adfb00aaf6ab7290e5.jpeg'>
</imgCard>
2023-10-21 18:02:06 +08:00
</view>
<view class="status">
<view class="" style="margin-bottom: 30rpx;">
生长情况
</view>
2023-10-25 19:55:18 +08:00
<imgCard text="地址" :imgUrl="item.pic" v-for="(item,index) in imgList" :key="index"></imgCard>
2023-10-21 18:02:06 +08:00
</view>
<view class="up-btn">
上传新的种植情况
</view>
</view>
</template>
2023-10-25 19:55:18 +08:00
<script setup>
import imgCard from "@/components/imgCard.vue"
import {
landCropPicListAPI
} from "@/api/plant.js"
import {
onLoad
} from "@dcloudio/uni-app"
import {
ref,
reactive
} from "vue"
const imgList = reactive([])
onLoad((options) => {
landCropPicListAPI({
crop_id: options.crop_id
}).then(res => {
console.log(res)
res.data.forEach(item => {
imgList.push(item)
})
console.log(imgList)
})
})
2023-10-21 18:02:06 +08:00
</script>
<style lang="scss" scoped>
.content {
padding: 20rpx;
background-color: #F4F4F4;
min-height: 100vh;
.card {
.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;
}
}
.status {
margin-bottom: 40rpx;
}
.head-img {
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
margin: 20rpx auto;
position: relative;
.poisition {
opacity: 0.7;
position: absolute;
width: 360.26rpx;
height: 71rpx;
background-color: #FFFFFF;
left: 20rpx;
bottom: 36rpx;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
display: flex;
align-items: center;
font-size: 29.79rpx;
padding-left: 20rpx;
}
}
}
.up-btn {
width: 371.5rpx;
height: 66.59rpx;
border: 1px solid #00A15E;
color: #00A15E;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
text-align: center;
line-height: 66rpx;
margin: 40rpx auto;
}
</style>