subject_gxj/xj_project_app_2024_2_18/pages/projectImageAndVideo/index.vue

<template>
  <view class="container">
    <page-title>现场影像</page-title>

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

    <view class="tabs">
      <u-tabs :list="list1" @click="changeTabs" activeStyle='color:#222222' :scrollable='false' lineWidth='0'></u-tabs>
    </view>

    <view class="cards-list marginTop" v-if="tabFlag == 0">
      <view class="card" v-for="(item,index) in iamgetList" :key="index">
        <view class="card-box1">
          <view class="fileAddre-image">
            <image :src="item.fileAddre" alt="" class="" @click='viewImg(item.fileAddre)' v-if="item.fileAddre"></image>
            <image src="@/static/images/noImgVideo.svg" alt="" class="no-image-video" @click='viewImg(item.fileAddre)'
              v-else></image>
          </view>
          <view class="text-box">
            <text class="name">{{item.kind}}</text>
            <!-- <text class="time">时间:</text> -->
            <text class="timeValue">{{item.time}}</text>
          </view>
        </view>
      </view>
      <!-- <empty-show v-if="iamgetList.length===0" showText='暂无图片'></empty-show> -->
    </view>

    <view class="cards-list marginTop" v-if="tabFlag == 1">
      <view class="card" v-for="(item,index) in videoList" :key="index">
        <view class="card-box1">
          <view class="fileAddre-image">
            <video :src="item.fileAddre" class="" :show-fullscreen-btn='false' v-if="item.fileAddre"></video>
            <image src="@/static/images/noImgVideo.svg" alt="" class="no-image-video" v-else></image>
          </view>
          <view class="text-box">
            <text class="name">{{item.kind}}</text>
            <text class="timeValue">{{item.time}}</text>
          </view>
        </view>
        <div class="videoClick" @click="videoClick(item)"></div>
      </view>
    </view>


    <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 {
    getPageMediaOfSub,
  } from "@/api/work/projectInfo.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: '',
    type: ""
  })

  let list1 = [{
    name: '现场图片',
  }, {
    name: '现场视频',
  }]
  //图片预览
  function viewImg(e) {
    let imglist = [e]
    uni.previewImage({
      longPressActions: true,
      urls: imglist
    })
  }

  // 播放文件--视频
  function videoClick(event) {
    showFile(event.fileType, event.fileAddre)
  }

  // 文件预览
  function showFile(type, filePath) {
    uni.navigateTo({
      url: `/pages/projectInfo/media/index?type=${type}&filePath=${filePath}`
    })
  }

  //切换tab
  let tabFlag = 0

  function changeTabs(e) {
    tabFlag = e.index
    searchInfo.value.pageNo = 1;
    iamgetList.value = [];
    videoList.value = [];
    getList()
  }

  // 触底加载flag
  let moreListFlag = true

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

  function getList() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    }
    if (tabFlag === 0) {
      searchInfo.value.type = 'IMAGE'
      getPageMediaOfSub(searchInfo.value).then(res => {
        loading.value = false
        iamgetList.value = iamgetList.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
      })
    } else if (tabFlag === 1) {
      searchInfo.value.type = 'VEDIO'
      getPageMediaOfSub(searchInfo.value).then(res => {
        loading.value = false
        videoList.value = videoList.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;
    iamgetList.value = [];
    videoList.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>
  .tabs {
    position: absolute;
    top: 140rpx;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
    width: 92%;

    border-radius: 20rpx 20rpx 20rpx 20rpx;
    height: 90rpx;
    background: #FFFFFF;
  }

  .u-tabs__wrapper__nav__item__text[data-v-5012af6c] {
    font-weight: 500;
    font-size: 32rpx;
    color: #B5B5B5;
  }

  .marginTop {
    margin-top: 190rpx;
  }

  .videoSize {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 364rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .card {
    .videoClick {
      position: absolute;
      top: -20rpx;
      z-index: 100;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .card-box1 {
    // padding-top: 40rpx;
    padding-bottom: 24rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .fileAddre-image {
      width: 304rpx;
      height: 172rpx;
      background: #F6F6F6;
      border-radius: 4rpx;
      border: 2rpx solid #EBEBEB;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }

      video {
        width: 100%;
        height: 100%;
      }

      .no-image-video {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .text-box {
      margin-left: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      height: 160rpx;

      .name {
        font-weight: 500;
        font-size: 32rpx;
        color: #444444;
      }

      .time {
        padding-top: 20rpx;
        font-size: 28rpx;
        color: #797F89;
        font-weight: 400;
      }

      .timeValue {
        width: 220rpx;
        padding-top: 10rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #999999 !important;
        line-height: 28rpx;
      }
    }
  }

  .iamgeSize {
    width: 272rpx;
    height: 222rpx;

    box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.21);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }


  .cards {
    position: relative;
    margin: auto;
    border-radius: 20rpx;
    margin-top: 25rpx;
    background: #FFFFFF;
    height: 470rpx;
    overflow: hidden;
    display: flex;

    .text-box {
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 106rpx;
      padding: 0 40rpx 0 40rpx;
      font-family: OPPOSans-R;
      font-size: 32rpx;
    }


  }

  .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: 35%;
        width: 0;
        height: 0;
        border: 10px solid #FFFFFF;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }

  }

  .container {
    padding-top: calc(var(--status-bar-height) + 50px);
  }
</style>