v-model="searchValue"
confirmType="search"
@clear="getWkordList1" maxlength="50" @confirm="getWkordList1"
primaryColor="#C6C7CB"
/>
</view>
<view class="search_icon" @click="getWkordList1">
<uni-icons type="search" size="24" color="#4D4D4D" />
</view>
</view>
</view>
<!-- 设备信息 -->
<view class="device_box">
<!-- 列表数据不为空 -->
<template v-if="dataList.length > 0">
<scroll-view show-scrollbar="true" scroll-y="true" lower-threshold="100" refresher-enabled="true" @scrolltolower="handleBottomOut"
@refresherrefresh="getWkordList1" refresher-triggered="requestLoading" >
<view class="pull_item">
<uni-collapse ref="collapse" accordion>
<uni-collapse-item
v-for="(item, index) in dataList" key="index" style="margin-bottom: 24rpx; background-color: #ffffff; border-radius: 16rpx"
>
<!-- 标题 -->
<template v-slot:title>
<view class="pull_item_title" @click="handleHint">
<view class="title_text">房间号/公区:</view>
<view class="title_content">
{{ dataList[index].newDeviceNumber }}
</view>
</view>
</template>
</uni-collapse-item>
</uni-collapse>
</view>
<!-- 页尾 -->
<view class="bottom_hint" v-show="dataList.length >= 10">
{{ total > dataList.length ? '— 加载中 —' : '— 到底了 —' }}
</view>
</scroll-view>
</template>
<!-- 列表数据为空 -->
<template v-else>
<view class="empty">
<view class="empty_hint" @click="getWkordList1">暂无数据,点击刷新~</view>
</view>
</template>
</view>
</view>
<!-- 页脚 -->
<view class="footer">
<button class="sign_btn" @click="handleSubmitTaskToast">111</button>
<button type="primary" class="change_btn" @click="handleSubmitTaskToast">222</button>
<button type="primary" class="change_btn" @click="handleSubmitTaskToast">333</button>
<button type="primary" class="save_btn" @click="handleSubmitTaskToast">444</button>
</view>
</view>
</template>
<script>
export default {
name: 'Install',
data() {
return {
total: 0, // 总数
requestLoading: false,
dataList: [], // 列表
searchValue: '' // 搜索值
}
},
onLoad() {
this.getWkordList1()
},
methods: {
async getWkordListHttp(params) {
return new Promise(resolve => {
setTimeout(() => {
const list = [{ newDeviceNumber: '1704900012' }]
if (params === '1704900012' || params === '') {
resolve(list)
} else {
resolve([])
}
}, 300)
})
},
async getWkordList1() {
this.pageIndex = 1
this.total = 0
this.requestLoading = true
try {
const res = await this.getWkordListHttp(this.searchValue || '')
this.dataList = []
const roomsList = res || []
this.dataList = roomsList
this.total = roomsList.length || 0
this.requestLoading = false
this.$nextTick(() => {
this.$refs.collapse?.resize()
})
} catch (error) {
this.requestLoading = false
console.warn(error)
}
},
// 打开提交任务弹窗
handleSubmitTaskToast(e) {
console.warn('handleSubmitTaskToast', e)
}
}
}
</script>
<style lang="scss" scoped>
.activebox {
width: 100%;
height: 100%;
background-color: #f7f8fa;
.main_box {
width: 100%;
height: 100%;
padding-bottom: 144rpx;
display: flex;
flex-direction: column;
// 设备
.device_box {
height: calc(100% - 112rpx);
padding: 24rpx 24rpx 20rpx 24rpx;
&::v-deep .uni-collapse {
background-color: transparent;
}
.pull_item {
width: 100%;
height: auto;
background-color: #f7f8fa;
border-radius: 16rpx;
overflow: hidden;
.pull_item_title {
width: 100%;
height: 112rpx;
padding: 0rpx 32rpx;
line-height: 112rpx;
display: flex;
.title_text {
color: #717982;
width: 180rpx;
font-size: 28rpx;
}
}
&::v-deep .uni-collapse-itemtitle {
border-bottom-color: transparent;
}
&::v-deep .uni-collapse-itemtitle.is-open {
border-bottom-color: #f2f3f5 !important;
}
&::v-deep .uni-collapse-itemwrap {
border-bottom-left-radius: 16rpx !important;
border-bottom-right-radius: 16rpx !important;
}
&::v-deep .uni-collapse-itemwrap-content {
border-bottom: none !important;
}
}
.bottom_hint {
height: 50rpx;
line-height: 34rpx;
color: #86909c;
text-align: center;
margin-top: 24rpx;
}
}
// 空白
.empty {
width: 100%;
height: calc(100% - 362rpx);
position: relative;
.empty_img {
width: 360rpx;
height: 360rpx;
position: absolute;
top: 242rpx;
left: 50%;
margin-left: -180rpx;
}
.empty_hint {
width: 100%;
height: 40rpx;
line-height: 40rpx;
color: #86909c;
font-size: 28rpx;
text-align: center;
position: absolute;
top: 612rpx;
left: 0;
}
}
.search_box {
display: flex;
align-items: center;
width: 100%;
height: 112rpx;
flex-grow: 0;
flex-shrink: 0;
background-color: #ffffff;
padding: 0 24rpx;
.search_main {
display: flex;
width: 100%;
height: 76rpx;
background-color: #f7f8fa;
border-radius: 16rpx;
.search_ipt {
height: 100%;
width: calc(100% - 90rpx);
&::v-deep .uni-easyinput {
height: 100%;
padding-left: 20rpx;
.uni-easyinputcontent {
height: 100%;
background-color: transparent !important;
}
.uni-easyinputplaceholder-class {
font-size: 28rpx !important;
color: rgb(192, 196, 204);
}
.uni-easyinputcontent-input {
font-size: 28rpx !important;
padding-left: 0 !important;
}
}
}
.search_icon {
width: 90rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.main_box_p {
padding-bottom: 0rpx !important;
}
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
z-index: 99;
padding: 24rpx;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
width: 100%;
// height: 144rpx;
height: calc(144rpx + constant(safe-area-inset-bottom));
height: calc(144rpx + env(safe-area-inset-bottom));
background-color: #ffffff;
border-top: 2rpx solid #f2f3f5;
.sign_btn {
display: flex;
align-items: center;
justify-content: center;
width: 150rpx;
height: 100%;
background-color: #ffffff;
.sign_title {
font-size: 36rpx;
color: #999999;
}
}
.change_btn {
display: flex;
align-items: center;
justify-content: center;
width: 150rpx;
height: 100%;
background-color: $uni-color-primary;
}
.save_btn {
display: flex;
align-items: center;
justify-content: center;
width: 180rpx;
height: 100%;
background-color: $uni-color-primary;
}
}
}
// 按钮组
.btn {
height: 56rpx;
font-size: 24rpx;
padding: 12rpx 24rpx;
line-height: 32rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
margin-bottom: 20rpx;
}
.on_btn {
border: 2rpx solid #1677ff;
color: #1677ff;
}
.off_btn {
border: 2rpx solid #c9cdd4;
color: #1d2129;
}
.blue_btn {
background-color: #1677ff;
color: #ffffff;
border: none;
}
.disable_btn {
color: #bcbec2;
background-color: #f4f4f5;
border: 2rpx solid #e9e9eb;
pointer-events: none;
cursor: not-allowed;
}
</style>