486 lines
12 KiB
Vue
486 lines
12 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- confirm:confirm; input:change; cancel:点击取消；
|
||
clear：点击清除；focus:获取焦点；blur：失去焦点 -->
|
||
<uni-row class="demo-uni-row" >
|
||
<uni-col :span="7">
|
||
<uni-data-select align="left" :clear="false" v-model="value" :localdata="range" ></uni-data-select>
|
||
</uni-col>
|
||
<uni-col :span="17">
|
||
<uni-search-bar @confirm="search" :focus="true" bgColor="#fbfdfe"
|
||
v-model="searchValue"
|
||
cancelButton="always"
|
||
placeholder="请输入搜索内容"
|
||
@cancel="cancel" @clear="cancel">
|
||
</uni-search-bar>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-section class="mb-10" title="温室列表" style="background:transparent;" type="line">
|
||
<scroll-view
|
||
scroll-y
|
||
class="list-scroll"
|
||
@scrolltolower="loadMore"
|
||
lower-threshold="50"
|
||
scroll-with-animation
|
||
>
|
||
<view
|
||
v-for="(item, index) in listData"
|
||
:key="index"
|
||
:class="['list-item', { 'list-item-disabled': item.online === '离线' }]"
|
||
@tap="item.online !== '离线' && onItemTap(item)"
|
||
>
|
||
<view class="item-title">
|
||
<view class="title-text">{{ item.title }}</view>
|
||
<text :class="['tag','tag-status',{'tag-manual':item.status==='手动模式'}]" v-if="item.status">{{ item.status }}</text>
|
||
<text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</text>
|
||
</view>
|
||
|
||
<view class="item-subtitle">
|
||
{{ item.subtitle }}
|
||
</view>
|
||
|
||
<view class="item-tags">
|
||
<text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
|
||
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
|
||
<text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
|
||
<text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="isLoading" class="loading-more">
|
||
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
|
||
<text>加载中...</text>
|
||
</view>
|
||
<view v-else-if="noMore" class="no-more">没有更多数据了</view>
|
||
<view class="add-agri" @tap="handleAddAgri">
|
||
<image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
|
||
<text class="text">点击添加大棚</text>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-section>
|
||
<!-- <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
|
||
<!-- :direction="direction" @trigger="trigger" @fabClick="fabClick" />-->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
listData: [],
|
||
page: 1,
|
||
pageSize: 6,
|
||
isLoading: false,
|
||
noMore: false,
|
||
total: 20, // 模拟总条数
|
||
value: 0,
|
||
range: [{
|
||
"value": 0,
|
||
"text": "大棚名称",
|
||
}, {
|
||
"value": 1,
|
||
"text": "设备编号",
|
||
}],
|
||
imageSrc:'/static/agri.png',
|
||
scrollHeight: 0,
|
||
// horizontal: 'right',
|
||
// vertical: 'bottom',
|
||
// direction: 'horizontal',
|
||
searchValue: null,
|
||
/* pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#007AFF',
|
||
iconColor: '#fff'
|
||
},
|
||
content: [{
|
||
iconPath: '/static/image.png',
|
||
selectedIconPath: '/static/image-active.png',
|
||
text: '添加大棚',
|
||
active: false
|
||
},
|
||
{
|
||
iconPath: '/static/home.png',
|
||
selectedIconPath: '/static/home-active.png',
|
||
text: '',
|
||
active: false
|
||
},
|
||
{
|
||
iconPath: '/static/star.png',
|
||
selectedIconPath: '/static/star-active.png',
|
||
text: '收藏',
|
||
active: false
|
||
}
|
||
]*/
|
||
}
|
||
|
||
},
|
||
onBackPress() {
|
||
/* if (this.$refs.fab.isShow) {
|
||
this.$refs.fab.close()
|
||
return true
|
||
}
|
||
return false*/
|
||
},
|
||
onLoad() {
|
||
this.getListData()
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
methods: {
|
||
handleAddAgri() {
|
||
uni.showToast({
|
||
title: '准备添加大棚',
|
||
icon: 'none'
|
||
})
|
||
// 这里可以添加跳转到添加大棚页面的逻辑
|
||
// uni.navigateTo({ url: '/pages/add-agri/add-agri' })
|
||
},
|
||
search(res) {
|
||
uni.showToast({
|
||
title: '搜索：' + res.value,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
input(res) {
|
||
|
||
},
|
||
|
||
cancel(res) {
|
||
uni.showToast({
|
||
title: '点击取消，输入值为：' + res.value,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
/*trigger(e) {
|
||
console.log(e)
|
||
this.content[e.index].active = !e.item.active
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fabClick() {
|
||
uni.showToast({
|
||
title: '点击了悬浮按钮',
|
||
icon: 'none'
|
||
})
|
||
},*/
|
||
// 模拟获取列表数据
|
||
getListData(isRefresh = false) {
|
||
if (isRefresh) {
|
||
this.page = 1
|
||
this.noMore = false
|
||
this.listData = []
|
||
}
|
||
|
||
if (this.isLoading || this.noMore) return
|
||
|
||
this.isLoading = true
|
||
|
||
// 模拟接口请求
|
||
setTimeout(() => {
|
||
const start = (this.page - 1) * this.pageSize
|
||
const end = this.page * this.pageSize
|
||
const newData = []
|
||
|
||
for (let i = start; i < end && i < this.total; i++) {
|
||
// 新增：给每条数据加唯一id，优化v-for的key
|
||
newData.push({
|
||
id: `item-${i}`,
|
||
title: `设备名称${i + 1}`,
|
||
subtitle: `设备编号：SN-${10000 + i}`,
|
||
status: i % 2 === 0 ? "自动模式" : "手动模式",
|
||
online: i % 3 === 0 ? "在线" : "离线",
|
||
temp1: Math.floor(Math.random() * 51), // 0-50随机温度
|
||
temp2: Math.floor(Math.random() * 51),
|
||
temp3: Math.floor(Math.random() * 51),
|
||
temp4: Math.floor(Math.random() * 51)
|
||
})
|
||
}
|
||
|
||
this.listData = isRefresh ? newData : [...this.listData, ...newData]
|
||
this.page++
|
||
this.isLoading = false
|
||
|
||
if (this.listData.length >= this.total) {
|
||
this.noMore = true
|
||
}
|
||
}, 0)
|
||
},
|
||
// 加载更多（防抖：避免快速上拉重复触发）
|
||
loadMore() {
|
||
if (!this.isLoading && !this.noMore) {
|
||
// 延迟触发，避免滚动到底部瞬间多次调用
|
||
setTimeout(() => {
|
||
this.getListData()
|
||
}, 100)
|
||
}
|
||
},
|
||
// 点击列表项
|
||
onItemTap(item) {
|
||
uni.showToast({
|
||
title: `点击了：${item.title}`,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 适配小程序/H5的盒模型，避免padding导致宽度溢出 */
|
||
page {
|
||
box-sizing: border-box;
|
||
}
|
||
.page-container {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background: radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%);
|
||
}
|
||
|
||
.list-scroll {
|
||
/* 把背景色改为透明，才能透出背景渐变 */
|
||
background-color: transparent;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
margin-top: 10rpx;
|
||
/* 新增：H5端避免滚动条样式不一致 */
|
||
scrollbar-width: thin;
|
||
}
|
||
/* H5端滚动条样式优化（可选） */
|
||
.list-scroll::-webkit-scrollbar {
|
||
width: 4rpx;
|
||
}
|
||
.list-scroll::-webkit-scrollbar-thumb {
|
||
background-color: #e0e0e0;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.list-item {
|
||
padding: 14rpx 30rpx;
|
||
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
|
||
margin-bottom: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
/* 新增：点击态样式，双端统一 */
|
||
transition: all 0.2s ease;
|
||
box-shadow: 8rpx 5rpx 10rpx #999;
|
||
}
|
||
.list-item:active {
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
line-height: 52rpx;
|
||
font-weight: bolder;
|
||
color: #333;
|
||
/* 核心：flex布局，让文字和标签在同一行 */
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.title-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
/* 在线标签样式 */
|
||
.tag-online {
|
||
font-size: 20rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #f0f9eb;
|
||
color: #67c23a;
|
||
white-space: nowrap;
|
||
line-height: 30rpx;
|
||
/* 兜底：如果flex失效，用margin-left:auto强制居右 */
|
||
margin-left: auto;
|
||
display: inline-block; /* 确保样式生效 */
|
||
}
|
||
.tag-status.tag-manual {
|
||
background-color: #dde3f6;
|
||
color: #7491ef;
|
||
}
|
||
/* 离线：深灰色系 */
|
||
.tag-offline {
|
||
background-color: #f2f2f2;
|
||
color: #c5c3c3;
|
||
}
|
||
.item-subtitle {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 52rpx;
|
||
display: block;
|
||
}
|
||
|
||
.item-tags {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
|
||
margin: 14rpx 0;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
display: inline-block; /* 修复H5端padding不生效问题 */
|
||
}
|
||
.tag-status {
|
||
background-color: #f8f1f1;
|
||
color: #e66060;
|
||
margin-left: 20rpx;
|
||
font-weight: lighter;
|
||
line-height: 30rpx;
|
||
padding: 4rpx 6rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.tag-temp1 {
|
||
background-color: #e8f4ff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.tag-temp2 {
|
||
background-color: #fdf4e4;
|
||
color: #f5961d;
|
||
}
|
||
|
||
.tag-temp3 {
|
||
background-color: #f4f4f5;
|
||
color: #909399;
|
||
}
|
||
|
||
.tag-temp4 {
|
||
background-color: #e7faf4;
|
||
color: #1bd1a7;
|
||
}
|
||
|
||
.loading-more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
gap: 10rpx;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.no-more {
|
||
/* 核心：flex布局实现居中 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 占满滚动容器剩余高度，保证垂直居中 */
|
||
min-height: 200rpx; /* 最小高度，避免内容太少时不居中 */
|
||
/* 文字样式保留 */
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
/* 可选：增加上下内边距，视觉更舒适 */
|
||
padding: 30rpx 0;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
/* 新增：禁用状态样式 */
|
||
.list-item-disabled {
|
||
/* 文字置灰 */
|
||
color: #999;
|
||
/* 禁用光标 */
|
||
cursor: not-allowed;
|
||
/* 背景色变浅，视觉区分 */
|
||
background-color: #fafafa;
|
||
/* 可选：添加透明度 */
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 禁用状态下的子元素也置灰 */
|
||
.list-item-disabled .tag {
|
||
color: #ccc;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/deep/ .uni-searchbar {
|
||
padding: 20rpx 0;
|
||
}
|
||
/deep/ .uni-searchbar__box, /deep/ .uni-select {
|
||
box-shadow: 8rpx 5rpx 10rpx #999;
|
||
background: #fbfdfe;
|
||
border-radius: 0 !important;
|
||
}
|
||
/deep/ .uni-searchbar__box {
|
||
border-radius: 0 10rpx 10rpx 0 !important;
|
||
}
|
||
.uni-stat__select {
|
||
padding: 20rpx 0;
|
||
}
|
||
/deep/ .uni-select {
|
||
border: 0;
|
||
height: 78rpx;
|
||
border-radius: 10rpx 0 0 10rpx !important;
|
||
}
|
||
|
||
/* 强制隐藏搜索图标容器 */
|
||
/deep/ .uni-searchbar__box-icon-search {
|
||
display: none !important;
|
||
}
|
||
/deep/ .uni-section .uni-section-header {
|
||
padding: 12rpx 10rpx;
|
||
}
|
||
|
||
/* 添加大棚容器样式 */
|
||
.add-agri {
|
||
/* 核心：flex布局实现一行显示 + 垂直居中 */
|
||
display: flex;
|
||
align-items: center;
|
||
/* 水平居中（可选，根据需求调整） */
|
||
justify-content: center;
|
||
/* 内边距，增加点击区域和视觉间距 */
|
||
padding: 30rpx 0;
|
||
/* 可选：添加背景和圆角，和列表项风格统一 */
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
margin-top: 20rpx;
|
||
/* 点击态效果，和列表项保持一致 */
|
||
transition: all 0.2s ease;
|
||
}
|
||
.add-agri:active {
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 图片和文字的间距 */
|
||
.add-agri image {
|
||
margin-right: 20rpx;
|
||
/* 可选：图片垂直对齐，兜底兼容 */
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 文字样式优化 */
|
||
.add-agri .text {
|
||
/* 文字大小，和标签风格统一 */
|
||
font-size: 26rpx;
|
||
/* 文字颜色（保留原有绿色） */
|
||
color: #1AAD19;
|
||
/* 可选：加粗，突出按钮感 */
|
||
font-weight: 500;
|
||
/* 兜底：垂直对齐 */
|
||
vertical-align: middle;
|
||
}
|
||
</style> |