subject_gxj/xj_project_app_2024_2_18/pages/focus/index.vue

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

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

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

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

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

  // 触底加载flag
  let moreListFlag = true

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

  // 折叠/展开
  const changeFoldItem = (status, id) => {
    let item = projectList.value.find(item => item.id === id);
    item.unfold = status;
  }

  function getList() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    }
    getFocusList(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) {
    if (type === 'wtdb') {
      uni.navigateTo({
        url: `/pages/problemSupervision/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'qtldjbm') {
      uni.navigateTo({
        url: `/pages/leadersList/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'xcyx') {
      uni.navigateTo({
        url: `/pages/projectImageAndVideo/index?type=${type}&subId=${subId}&subName=${subName}`
      })
    } else if (type === 'more') {
      uni.navigateTo({
        url: `/pages/morePage/index?type=${type}&subId=${subId}&subName=${subName}`
      })

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

  // 收藏/取消
  function changeFocus(id, status) {
    let item = projectList.value.find(item => item.id === id);

    if (status) {
      cancelFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 0;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    } else {
      addFocus({
        subId: id
      }).then(res => {
        if (res.code === 200) {
          item.isAttention = 1;
        }
      }).catch(() => {
        uni.showToast({
          title: "更改收藏状态失败。",
          icon: "none",
          duration: 2000
        })
      })
    }
  }

  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();
    });
    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()
    }
  })
  let cardCurrut = ref(0)

  function onChangeCard(e) {
    if (cardCurrut.value == e) {
      projectList.value[cardCurrut.value].isOpen = !projectList.value[cardCurrut.value].isOpen
    } else {
      projectList.value[cardCurrut.value].isOpen = false
      projectList.value[e].isOpen = true
      cardCurrut.value = e
    }


  }

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

<template>
  <view class="container">
    <page-title>关注项目</page-title>
    <view class="cards-list" :style="isUnfold ? {marginTop:'30rpx'} :''">
      <view v-for="(item,index) in projectList" :key="index">
        <view class="card">
          <view class="project-layer" :style="!item.isOpen ? {border:'none'}:''">
            <text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
            <view class="name">
              {{item.subName ?? "--"}}
            </view>

          </view>
          <view class="card-status" @click="onChangeCard(index)">
            <image class="status-light" src="../../static/images/red.svg" mode="" v-if="item.status_fgw=='2'"></image>
            <image class="status-light" src="../../static/images/green.svg" mode=""
              v-if="item.status_fgw=='0'||item.status_fgw==null"></image>
            <image class="status-light" src="../../static/images/yellow.svg" mode="" v-if="item.status_fgw=='1'"></image>
              {{item.status ?? "--"}}
              <image src="../../static/images/liaghtUp.svg" mode=""
                :class="item.isOpen ?'card-status-icon-change' :''"></image>
          </view>

          <view class="card-content-box" :style="item.isOpen ? {height:'250rpx'} :''">
            <view class="card-item" style="margin-top: 5rpx;">
              <view class="card-item-name">总 投 资 金 额</view>
              <view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
            </view>

            <!-- 年度计划投资-申报单位（万元） -->
            <view class="card-item">
              <view class="card-item-name">年度计划投资</view>
              <view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
            </view>

            <!-- 已完成投资（万元）-->
            <view class="card-item">
              <view class="card-item-name">年度完成投资</view>
              <view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
            </view>
            <!-- 当前状态 -->
            <view class="card-item">
              <view class="card-item-name">项目状态</view>
              <view class="card-item-content" :class="item.status?'red' :''">{{item.status ?? "--"}}</view>
            </view>
            <view class="card-btn-list">
              <view class="button" @click="goToReport('weekly',item.id,item.subName)">
                周报
              </view>
              <view class="button" @click="goToReport('monthly',item.id,item.subName)">
                月报
              </view>
              <view class="button" v-if="!item.isAttention" @click="changeFocus(item.id,item.isAttention)">
                关注
              </view>
              <view class="button" @click="changeFocus(item.id,item.isAttention)" v-else>
                取消关注
              </view>
              <view class="button" v-if="item.usersub == 1" @click="goToDetail(item.id,item.subName)">
                项目详情
              </view>
              <view class="button" v-else @click="goToDetail(item.id,item.subName)">
                查看
              </view>
              <view class="button" @click="goToReport('more',item.id,item.subName)">
                更多
              </view>
            </view>
          </view>
        </view>
      </view>

      <empty-show v-if="projectList.length===0"></empty-show>
    </view>


    <u-back-top :scroll-top="scrollTop"></u-back-top>

    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<style lang="scss" scoped>
  .red{
    color: #E02020 !important;
  }
  .card .card-status {
    top: 32rpx;
    height: 64rpx;
    background: #F2F7FF;
    font-weight: 500;
    font-size: 12px;
    color: #98B7DC;
  }
  
  .status-light {
    width: 60rpx !important;
    height: 60rpx !important;
    position: absolute !important;
    right: 0;
    top: -46rpx !important;
  }
  
  .card-name-num {
    width: 64rpx;
    height: 64rpx;
    border-radius: 4rpx;
    border: 2rpx solid #F4F4F4;
    font-size: 24rpx;
    color: #B5B5B5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card .project-layer {
    justify-content: flex-start;
    // padding-bottom: 20rpx !important;
    .name {
      width: 64% !important;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
  
    }
  }
  .card{
    padding-top: 20rpx !important;
     padding-bottom: 0rpx !important;
     .card-item{
       .card-item-name{
         width: 200rpx;
       }
     } 
  }
  
  
  .project-btn {
    width: 48% !important;
    background: #1869F6;
  }

  .focus-btn {
    width: 48% !important;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 3rpx solid #1869F6;
    color: #1869F6;

  }

  .focus-btn-no {
    width: 48% !important;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 3rpx solid #FF2D2D;
    color: #FF2D2D;
  }

  .more-btn {
    background-color: #fff;
    color: #1869F6;

    font-size: 32rpx;
  }

  .focusText {
    font-size: 12rpx;
    margin-right: 12rpx;
  }

  .card {
    padding-top: 16rpx;
    // overflow: hidden;
  }

  .light-item {
    margin-bottom: 32rpx;
  }

  .card-light {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-light-bottom {
    width: 122rpx;
    height: 44rpx;
    margin: auto 0;
    background-size: 100% 100%;
  }

  .light-red {
    background-image: url('@/static/icon-light-red.png');
  }

  .light-yellow {
    background-image: url('@/static/icon-light-yellow.png');
  }

  .light-green {
    background-image: url('@/static/icon-light-green.png');
  }

  .focus {
    width: 46rpx;
    height: 40rpx;
    background-image: url("@/static/focus-off.png");
    background-size: 100% 100%;
  }

  .focus-on {
    background-image: url("@/static/focus-on.png");
  }

  .special-btn {
    background: linear-gradient(225deg, #2428F1 0%, #12C8C2 94%);
  }

  .bottom-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    row-gap: 20rpx;
    margin-bottom: 64rpx;
  }

  .lamp {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 72rpx;
      height: 72rpx;
      margin-right: 20rpx;
    }

    text {
      font-size: 32rpx;
    }
  }

  .card-box2 {
    padding: 0 0 36rpx 0;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
  }

  .card-value {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 255rpx;
    height: 68rpx;
    padding-right: 22rpx;
    text-align: right;
    line-height: 68rpx;
    color: #1869F6;
    font-size: 32rpx;
    background: linear-gradient(270deg, #B2CEFF 0%, rgba(219, 232, 255, 0) 100%);
  }

  .card-fold {
    position: relative;
    width: 100%;
    min-height: 152rpx;
    margin-bottom: 20rpx;
    padding: 24rpx 30rpx 52rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 40rpx;
    overflow: hidden;
  }

  .card-fold-option {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
    z-index: 999;

    .card-fold-count {
      flex: 1;
      font-size: 28rpx;
      color: #1869F6;
    }

    .card-fold-center {
      flex: 1;

      .card-fold-btn {
        width: 32rpx;
        height: 20rpx;
        margin: 0 auto;
        background-image: url("@/static/icon-fold.png");
        background-size: 100% 100%;
      }

      .card-unfold-btn {
        transform: rotate(180deg);
      }
    }

    .card-fold-chaos {
      flex: 1;
    }
  }

  .card-fold-red {
    background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%);

    .card-fold-count {
      color: #FF0000;
    }

    .card-fold-center {
      .card-fold-btn {
        background-image: url("@/static/icon-fold-red.png");
      }
    }
  }

  .card-fold-yellow {
    background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%);

    .card-fold-count {
      color: #E19703;
    }

    .card-fold-center {
      .card-fold-btn {
        background-image: url("@/static/icon-fold-yellow.png");
      }
    }
  }
</style>