subject_gxj/xj_project_app_2024_2_18/pages/problemSupervision/index.vue

<template>
  <view class="container">
    <page-title>更多（问题督办）</page-title>
    <!-- <view class="list-tip">
      <view class="tip-item">
        <image src="@/static/images/yearPlan.svg" mode=""></image>
        <text>年度计划</text>
      </view>
      <view class="tip-item">
        <image src="@/static/images/problem.svg" mode=""></image>
        <text class="light">问题督办</text>
        <view class="saniao">
        </view>
      </view>
      <view class="tip-item">
        <image src="@/static/images/qianqi.svg" mode=""></image>
        <text>前期手续</text>
      </view>
      <view class="tip-item">
        <image src="@/static/images/leaderAndDepart.svg" mode=""></image>
        <text>领导及部门</text>
      </view>
      <view class="tip-item">
        <image src="@/static/images/videoImage.svg" mode=""></image>
        <text>现场影像</text>
      </view>
    </view> -->

    <view class="cards-list">
      <view class="card" v-for="(item,index) in projectList" :key="index">
        <!-- 					<view>
						<view style="height:20rpx"></view>
			
						<view class="special-item">
			
							<view class="card-name">
								<view class="card-name-title">
									<text class="card-name-description">项目名称</text>
								</view>
			
								<text class="card-name-text">{{item.subName || "--"}}</text>
							</view>
						</view>
					</view> -->
        <!-- <card-title :numerator="index+1" :denominator="listTotal" isSpecial></card-title> -->
        <view class="card-name card-top">
          <view class="card-name-title card-top-left">
            <text class="">项目<br />名称</text>
          </view>

          <text class="card-name-text card-top-right">
            <view class="card-item">
              <view class="card-item-content">{{item.sub_name || "--"}}</view>
            </view>
          </text>
        </view>

        <view class="line"></view>
        <view class="card-item">
          <view class="card-item-name">申报单位</view>

          <view class="card-item-content">{{item.unitTitle || "--"}}</view>
        </view>

        <view class="card-item">
          <view class="card-item-name">当前状态</view>

          <view class="card-item-content">{{item.status || "--"}}</view>
        </view>

        <view class="card-item">
          <view class="card-item-name">问题描述</view>

          <view class="card-item-content">{{item.title || "--"}}</view>
        </view>
        <view class="line"></view>
        <view class="card-item">
          <view class="card-item-name">要求解决日期</view>

          <view class="card-item-content">{{item.date_conf || "--"}}</view>
        </view>
      </view>

    </view>
    <empty-show v-if="projectList.length===0"></empty-show>
    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  import {
    onLoad,
    onUnload,
    onPullDownRefresh,
    onReachBottom,
    onPageScroll
  } from "@dcloudio/uni-app";

  import {
    getOverseeListBySubId,
  } from "@/api/work/oversee.js"

  import {
    addFocus,
    cancelFocus
  } from "@/api/work/focus.js";

  function backToBefore() {
    uni.reLaunch({
      url: "/pages/index"
    });
  };

  let scrollTop = ref(0)
  let loading = ref(true)
  // 参数
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
    subId: ''
  })

  // 触底加载flag
  let moreListFlag = true

  // 获取列表
  let projectList = ref([]);
  let listTotal = ref(0);

  function getList() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    }
    getOverseeListBySubId(searchInfo.value).then(res => {
      loading.value = false
      projectList.value = projectList.value.concat(res.data.list);
      listTotal.value = res.data.total;
      if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
          .length)) moreListFlag = false;

    }).catch(() => {
      loading.value = false
    })
  }

  // function goToDetail(id, subName) {
  // 	uni.navigateTo({
  // 		url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
  // 	})
  // }

  // function goToPage(url) {
  // 	uni.navigateTo({
  // 		url
  // 	})
  // }

  // function goToReport(type, subId, subName) {
  // 	uni.navigateTo({
  // 		url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
  // 	})
  // }



  onLoad((options) => {
    // uni.$on('projectInfoSearch', resolve => {
    // 	searchInfo.value = Object.assign(searchInfo.value, resolve);
    // 	searchInfo.value.pageNo = 1;
    // 	projectList.value = [];
    // 	listTotal.value = 0;
    // 	moreListFlag = true;

    // 	getList();
    // });
    console.log(options);
    searchInfo.value.subId = options.subId
    getList();
  });

  onUnload(() => {
    // uni.$off('projectInfoSearch');
  })

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
  })

  onPullDownRefresh(() => {
    searchInfo.value.pageNo = 1;
    projectList.value = [];
    moreListFlag = true;
    try {
      getList();
    } finally {
      uni.stopPullDownRefresh()
    }
  })

  onReachBottom(() => {
    if (!moreListFlag) {
      return uni.showToast({
        title: "已经到底了。",
        icon: "none",
        duration: 2000
      })
    }
    searchInfo.value.pageNo++;
    getList();
  })
</script>

<style lang="scss" scoped>
  .list-tip {
    width: 750rpx;
    height: 164rpx;
    background: #FFFFFF;
    box-shadow: 0px 4rpx 8rpx 0px #D8EEFF;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .tip-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      image {
        width: 72rpx;
        height: 72rpx;
      }

      text {
        font-weight: 300;
        font-size: 24rpx;
        color: #666666;
      }

      .light {
        font-weight: 500;
        color: #222222 !important;
      }

      .saniao {
        position: absolute;
        bottom: -34px;
        left: 15px;
        width: 0;
        height: 0;
        border: 10px solid #FFFFFF;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }

  }

  .card {
    padding-top: 0 !important;
    padding-bottom: 32rpx !important;
    .card-item {

      .card-item-content {
        line-height: 44rpx;
        // font-weight: 500;
        // font-size: 24rpx;
        // color: #333333;
      }
    }

    .line {
      width: 100%;
      height: 1px;
      border-top: 1px dashed #DDDDDD;
    }
  }

  .card .card-name {
    padding: 0;
  }

  .card-top {
    display: flex;

    .card-top-left {
      width: 112rpx;
      height: 112rpx;
      background: #D6ECFF;
      border-radius: 0px 0px 16rpx 16rpx;
      font-weight: 500 !important;
      font-size: 28rpx !important;
      color: #002F69 !important;
      display: flex !important;
      justify-content: center;
      align-items: center;
      margin-right: 24rpx;
      line-height: 40rpx;
    }

    .card-top-right {
      display: flex !important;
      justify-content: flex-start;
      align-items: center;
      height: 120rpx;
      .card-item {

        // margin-top: 22rpx;
        // line-height: 44rpx;
        .card-item-content {
          font-weight: 500;
          font-size: 28rpx;
          color: #222222;
      display: -webkit-box; 
      -webkit-box-orient: vertical; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      -webkit-line-clamp: 2; 
        }
      }

      .tysh {
        width: 488rpx;
        height: 56rpx;
        border-radius: 30rpx;
        border: 2rpx solid #EBEBEB;
        display: flex;
        align-items: center;
        padding-left: 32rpx;
        margin-top: 18rpx;
        margin-bottom: 26rpx;

        .card-item-name,
        .card-item-content {
          width: auto;
          font-weight: 500;
          font-size: 24rpx;
          color: #7A85E0;
        }
      }
    }
  }
  .container {
      padding-top: calc(var(--status-bar-height) + 50px);
  }
</style>