zmj
/
TraceabilityAPP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TraceabilityAPP/pages/index/massif.vue

454 lines
8.8 KiB
Vue
Raw Blame History

<template>
<view class="">
<view class="" style="height: var(--status-bar-height);background-color: #35D190;">
</view>
<view class="header">
<u-icon name="plus-circle" color="white" @click="navto('/pages/addLand/addLand')" :size="28"></u-icon>
<Myindex url='/pages/index/massif' />
</view>
<view class="content">
<view class="serch">
<u-search bgColor="white" :show-action="false" placeholder="搜索你的土地信息" v-model="fomData.keyword"
shape="round" :clearabled='false' @change="inputval"></u-search>
<view class="ser-text" @click="search">
搜索
</view>
</view>
<view class="tits">
土地信息
</view>
<view class="card" v-for="(item,index) in datalist" :key="index" @click="navgo(item)">
<view class="plant-status" v-if="item.residual_area!=item.total_area"
:style="{backgroundImage:`url(${bgc('yzz')})`}">
已种植
</view>
<view class="plant-status" v-if="item.residual_area==item.total_area"
:style="{backgroundImage:`url(${bgc('wzz')})`}">
未种植
</view>
<view class="card-content">
<u--image v-if="item.pic" :src="item.pic[0]||''" height="150rpx" width="150rpx"
style="margin-right: 20rpx;border-radius: 10rpx;overflow: hidden;"></u--image>
<view style="color:#7B7B7B;font-size: 26rpx;">
<view class="card-tit">
{{item.title}}
</view>
<view class="">
<text style="color: black;">种植面积</text> : {{item.total_area-item.residual_area}}亩
</view>
<view class="">
<text style="color: black;">土地面积</text>: {{item.total_area}}亩
</view>
<view class="card-address">
<text style="color: black;white-space: nowrap;">地址</text>: {{item.address}}
</view>
</view>
</view>
<!-- old -->
<!-- <view class="tit card-li" style="margin-top: 50rpx;">
<view class="">
{{item.title}}
</view>
<view class="" style="color: #00A15E;" v-if="item.residual_area!=item.total_area">
已种植
</view>
<view class="" style="color: #00A15E;" v-if="item.residual_area==item.total_area">
未种植
</view>
</view>
<view class="card-li" v-if="item.residual_area!=item.total_area">
<view class="">
种植面积:{{item.total_area-item.residual_area}}亩
</view>
<view class="">
土地面积:{{item.total_area}}亩
</view>
</view>
<view class="card-li" v-if="item.residual_area==item.total_area">
<view class="">
未种植面积:{{item.total_area}}亩
</view>
</view>
<view class="card-li tit">
<view class="" style="font-weight: normal;">
地址: {{item.address}}
</view>
</view>
-->
</view>
<!-- <view class="land" @click="navgo('/pages/addLand/addLand')">
土地
</view> -->
<view class="coneng-detail" v-if="datalist.length==0">
<view class="">
<image src="@/static/img/zw.png" mode="aspectFit"></image>
<view class="">
暂无数据
</view>
</view>
</view>
</view>
</view>
<MyTabbar></MyTabbar>
</template>
<script setup>
import {
onLoad,
onShow,
onReachBottom,
onPullDownRefresh
} from "@dcloudio/uni-app"
import {
ref,
reactive,
onMounted
} from "vue"
import Myindex from '@/components/return/index.vue';
import store from "@/store/index.js"
import {
landlist
} from '@/api/api.js'
import MyTabbar from "@/components/customTabbar/tabbar.vue"
onLoad(() => {
uni.hideTabBar()
// console.log(store.state.userInfo)
if (!store.state.userInfo) {
uni.redirectTo({
url: '/pages/Login/login'
})
}
})
onShow(() => {
list()
})
onPullDownRefresh(() => {
list()
uni.stopPullDownRefresh()
})
onReachBottom(() => {
getlist()
})
const datalist = reactive([])
const fomData = reactive({
page_no: 1,
page_size: 15,
keyword: ''
})
// 获取位置
const getPositionFn = () => {
uni.getLocation({
type: 'gcj02',
geocode: true,
isHighAccuracy: true,
success: function(res) {
uni.request({
url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${res.longitude},${res.latitude}&key=b0c21bc6b220aa882bad8ffb6bce8829&radius=1000&extensions=all`,
success: (res) => {
console.log(res)
}
})
}
});
}
const list = () => {
datalist.splice(0)
fomData.page_no = 1
getlist()
}
const getlist = () => {
landlist(fomData).then((res) => {
if (res.code == 1) {
datalist.push(...res.data)
fomData.page_no = fomData.page_no + 1
}
})
}
//输入监听
const inputval = (e) => {
// console.log(e)
if (e.length == 0) {
list()
}
}
//搜索
const search = () => {
list()
}
const navto = (url) => {
uni.navigateTo({
url
})
}
const navgo = (item) => {
uni.navigateTo({
url: '/pages/landDetail/index?id=' + item.id
})
}
onMounted(() => {
// console.log('22222222')
})
const u = (name) => {
return `/static/main/index/${name}.png`
}
const bgc = (icon) => {
return `/static/main/index/${icon}.png`
}
</script>
<style lang="scss">
page {
// background-color: $theme-bg-color;
background-color: #F5FDFA;
}
.header {
background-color: #34D190;
display: flex;
justify-content: space-between;
padding: 10rpx 0 10rpx 20rpx;
// padding-top: 10rpx;
// padding-left: 20rpx;
// padding-bottom: 20rpx;
}
.tits {
position: relative;
padding-left: 20rpx;
font-weight: bold;
font-size: 28rpx;
margin-bottom: 20rpx;
color: #1A1A1A;
}
.tits::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 6rpx;
/* 左边框的宽度 */
height: 25rpx;
border-radius: 20rpx;
background-color: #34D08D;
}
// old
.content {
position: relative;
padding: 0 20rpx;
// padding-top: 100rpx;
.head-img {
// position: absolute;
// display: flex;
// top: 0;
// right: 10rpx;
// margin-top: 20rpx;
}
.land {
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: 60rpx;
bottom: 130rpx;
position: fixed;
}
.serch {
// padding-bottom: 20rpx;
box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 200rpx;
position: relative;
color: #35D190;
font-size: 28rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
.ser-text {
position: absolute;
padding-left: 20rpx;
top: 50%;
transform: translateY(-50%);
right: 40rpx;
}
.ser-text::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 2px;
/* 左边框的宽度 */
height: 20rpx;
background-color: #34D08D;
}
// width: 100%;
// height: 100rpx;
// background-color: #EAF2EF;
// position: absolute;
// position: fixed;
// display: flex;
// top: 0;
// // padding-top: calc(70rpx + var(--status-bar-height) + 20rpx);
// padding-right: 20rpx;
// .custom-style {
// color: #606266;
// width: 140rpx;
// border-radius: 30rpx;
// margin-top: 10rpx;
// margin-right: 20rpx;
// }
// z-index: 8888 !important;
}
.border-bgc {
height: 200rpx;
background-color: #34D190;
border-radius: 0 0 40rpx 40rpx;
position: absolute;
width: 750rpx;
}
.coneng-detail {
width: 478rpx;
height: 341rpx;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 1;
font-size: 25rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #737373;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 300rpx auto;
image {
width: 280rpx;
height: 142rpx;
margin-bottom: 20rpx;
}
}
.card {
position: relative;
margin: auto;
background-color: #FFFFFF;
box-sizing: border-box;
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
margin-bottom: 40rpx;
.plant-status {
position: absolute;
width: 109rpx;
height: 99rpx;
background-image: url('/static/main/index/wzz.png');
background-size: 100% 100%;
top: -10rpx;
right: 50rpx;
color: white;
text-align: center;
padding-top: 20rpx;
font-size: 26rpx;
}
.card-content {
display: flex;
.card-tit {
font-weight: bold;
margin-bottom: 10rpx;
color: black;
font-size: 28rpx;
}
.card-address {
// width: 60vw;
width: 500rpx;
white-space: nowrap;
/* 文字不换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
.value {
/* 超出部分显示省略号 */
}
}
// .tit {
// display: flex;
// font-size: 33.29rpx;
// font-weight: bold;
// justify-content: space-between;
// }
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink