zd_wechatApp/pages/noLogin/WarningPileList.vue

<template>
  <view>
    <image src="https://cczdsz.cn/app/images//background-from.png" mode="" class="background"></image>
    <view>
      <view class="sousuo">
        <u-search  placeholder="请输入阀井名称" @click="showName=true" v-model="valveWellName"  :show-action="false"@search="getProjectList()" ></u-search>
        <!-- <u-select v-model="showName" :list="workList"  label-name="name" value-name="id" @confirm="worker()" @cancel="cancelWorker()"></u-select>
          <u-search placeholder="请输入巡检柱名称" v-model="name"  :show-action="false" :action-style="{'font-size':'40rpx'}"
            @search="getProjectList()"></u-search> -->
        <u-search  placeholder="请输入阀井位置" @click="showName=true" v-model="position"  :show-action="false" @search="getProjectList()"></u-search>
      </view>

      <view v-for="(item,index) in list" :key="index">
        <view class="project-content houseList" @click="gotoindex(item)">
          <view class="font-forty-eight houseList_in">
            <span>{{item.valveWellName}}<span style="font-size: 20rpx;">({{item.position}})</span></span>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import service from '@/api/index.js'
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: false,
        pageNum: 1, // 初始化页码为1
        totalPage: null, // 总共有多少页数据
        isLoadingMore: false, // 标记正在加载更多数据
        second: false
      },
      showName:false,
      showTime: false,
      list: [],
      workList: [],
      value: '',
      nameValue: '',
      name:'',
      valveWellName:'',
      civilPower: '',
      form:{},
      position:'',
	  userId:''
    }

  },
  onLoad() {
    this.getUserName();
    //this.getWorker();
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#2d95f4',
    })
  },
  methods: {
    getWorker()
    {
      service.getWorker({type:'1',name:''}).then(res => {
        this.workList=res
      })
    },
    worker(e)
    {
      this.valveWellName=e[0].label
      this.position=e[0].value
      this.getProjectList()
    },
    cancelWorker()
    {
      this.valveWellName=''
      this.position=''
    },
    time(e)
    {
      this.form.time=e
    },
    gotoindex(item) {
      console.log(item)
      uni.navigateTo({
        url:`/pages/noLogin/valveWellInspection/valveWellInspection?valveWellName=${item.valveWellName}&position=${item.position}&id=${item.id}&managementOfficeId=${item.id}&type=2`
      })
    },
    topage(url) {
      uni.navigateTo({
        url
      })
    },
    onReachBottom() {
		
      if(this.params.pageNum * 10 < this.params.totalPage){
        this.isLoadingMore = true; // 开始加载状态
        setTimeout(()=>{
          this.params.pageNum++; // 每次加载完成后自增页码
          this.getProjectList(); // 再次请求数据
        },100); // 模拟异步操作需要等待一段时间才能返回数据
      }
    },
    getProjectList() {
      service.getvalveWellPositionlist({remark:this.userId,valveWellName:this.valveWellName,position:this.position,pageNum: this.params.pageNum , pageSize: 10}).then(res => {
        console.log(res)
        if (res.total == 0) {
          this.$UTILS.showPrompt('暂无项目!')
        }
        if(this.params.pageNum === 1){
          this.params.totalPage = res.total; // 设置总页数
          this.list = []; // 清空之前的数据
        }

        const newData = res.rows || [];
        this.list = [...this.list, ...newData]; // 将新数据添加到已有数据的尾部
        this.isLoadingMore = false;
      })
    },
    getUserName() {
      service.getUserName().then(res => {
		this.userId=res.id
        this.civilPower = res.civilPower;
		this.getProjectList();
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.background {
  z-index: -1;
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.project {
  border-radius: 72rpx;
  padding: 25rpx 0;
  text-align: center;
  margin: 170rpx 55rpx 0;
}

.project-content {
  width: 90%;
  margin: 40rpx auto;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  background: #edf5ff;
  box-shadow: 0rpx 6rpx 8rpx #d3e6ff;
}
.houseList_in{
  display: flex;
  justify-content:space-between;
  align-items:center;
  color: #cbcbcb;
  font-size: 38rpx;
}
.houseList_in span{
  font-size: 36rpx;
  color: #333;
}
.sousuo{
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.position {
  position: absolute;
  bottom: 100rpx;
  right: 50rpx;

  .arrow {
    width: 152rpx;
    height: 152rpx;
    border-radius: 50%;
    padding: 25rpx;
    margin-left: 20rpx;
  }
}

</style>