394 lines
8.3 KiB
Vue
394 lines
8.3 KiB
Vue
<template>
|
|
<view style="position: relative;">
|
|
<view class="top">
|
|
<view class="" style="height:var(--status-bar-height) ;">
|
|
</view>
|
|
<view class="nav-con">
|
|
<view class="left"></view>
|
|
<view class="title" @click="navBack">
|
|
<u-icon name="arrow-left" color="#fff" size="40rpx" style="margin-right: 10rpx;"></u-icon> <text
|
|
style="padding-bottom: 5rpx;">栏舍设置</text>
|
|
</view>
|
|
<view class="btn" style="margin-top: -5rpx;">
|
|
<u-icon name="plus" color="#fff" size="40rpx" style="margin-right: 20rpx;" @click="navTo('/pages/plantAdmin/addHouse')"></u-icon>
|
|
<Myindex url='/pages/index/massif' />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="height:var(--status-bar-height) ;">
|
|
</view>
|
|
<view class="nav-con">
|
|
</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="navTo('/pages/plantAdmin/houseDetail?id=23')">
|
|
<image class="img" :src="item.img"></image>
|
|
<view class="tips">
|
|
<view class="title">{{item.name}}</view>
|
|
<view class="item">
|
|
<view class="tip-name">动物名称: </view>
|
|
<view>{{item.animal_name}} </view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="tip-name">动物类型: </view>
|
|
<view>{{item.animal_type}} </view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="tip-name">容量: </view>
|
|
<view>{{item.capacity}} </view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="tip-name">创建人: </view>
|
|
<view>{{item.create_by}} </view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="tip-name">创建时间: </view>
|
|
<view>{{item.create_time}} </view>
|
|
</view>
|
|
</view>
|
|
</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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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'
|
|
onLoad(() => {
|
|
if (!store.state.userInfo) {
|
|
uni.redirectTo({
|
|
url: '/pages/Login/login'
|
|
})
|
|
}
|
|
})
|
|
onShow(() => {
|
|
// list()
|
|
})
|
|
onPullDownRefresh(() => {
|
|
list()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
onReachBottom(() => {
|
|
getlist()
|
|
})
|
|
const datalist = reactive([
|
|
{
|
|
name: '栏舍一号',
|
|
img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/91fb0202311021455371420.jpg',
|
|
animal_name: '山羊',
|
|
animal_type: '哺乳动物',
|
|
capacity: '50只',
|
|
create_by: '张三',
|
|
create_time: '2023-12-19',
|
|
}
|
|
])
|
|
const fomData = reactive({
|
|
page_no: 1,
|
|
page_size: 15,
|
|
keyword: ''
|
|
})
|
|
|
|
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: string)=>{
|
|
if(url) uni.navigateTo({
|
|
url: url
|
|
})
|
|
else uni.showToast({
|
|
title: '暂未开放',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
const navBack = ()=>{
|
|
uni.navigateBack()
|
|
}
|
|
onMounted(() => {
|
|
// console.log('22222222')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $theme-bg-color;
|
|
}
|
|
|
|
.top {
|
|
background-color: #feb048;
|
|
position: fixed;
|
|
z-index: 999999;
|
|
width: 750rpx;
|
|
|
|
}
|
|
|
|
.nav-con {
|
|
width: 100vw;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 10rpx;
|
|
color: #fff;
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
background-color: #feb048;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10rpx 0 10rpx 20rpx;
|
|
}
|
|
|
|
.tits {
|
|
position: relative;
|
|
padding-left: 20rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tits::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
width: 3px;
|
|
/* 左边框的宽度 */
|
|
height: 30rpx;
|
|
background-color: #FFB049;
|
|
}
|
|
|
|
.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: #feb048;
|
|
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: #FFB049;
|
|
}
|
|
|
|
// 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: #feb048;
|
|
border-radius: 0 0 40rpx 40rpx;
|
|
position: absolute;
|
|
width: 750rpx;
|
|
|
|
}
|
|
|
|
.coneng-detail {
|
|
width: 478rpx;
|
|
height: 341rpx;
|
|
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: 14rpx;
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
|
|
.img{
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
margin-right: 20rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
.tips{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.title{
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.item{
|
|
display: flex;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
.tip-name{
|
|
flex-shrink: 0;
|
|
color: #333;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</style> |