YNUtdPlatform/pages/YNEduApp/learnProj/learnProj.vue

<template>
  <view class="page">
    <u-navbar title="学习项目" @leftClick="leftClick" placeholder />
    <div class="tab-wrapper">
      <div v-for="(item, index) in statusList" :key="index" class="tab-item" @click="chooseStatus(item, index)">
        <div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
          {{ item.text }}
        </div>
        <div :class="{ 'tab-line': activeIndex === index }"></div>
      </div>
    </div>
    <!-- <view class="status-secs">
      <view
        v-for="(item, index) in statusList"
        :key="item.id"
        :class="[{ active: totalStatus.statusCount === item.id }]"
        @click="chooseStatus(item.id)"
      >
        {{ item.text }}
      </view>
    </view> -->
    <uni-easyinput
      suffixIcon="search"
      v-model="totalStatus.keyword"
      placeholder="请输入项目名称"
      @iconClick="toggleSearch"
      style="margin-bottom: 10px"
    ></uni-easyinput>

    <view class="project-cont">
      <view v-for="(item, index) in projList" :key="item.id" class="single-proj" @click="toggleDetail(item.id)">
        <h4 class="img">
          <image src="/static/images/studyPro.png"></image>
        </h4>
        <view class="proj-detail">
          <view class="detail-upper">
            <h5 style="font-size: 16px">{{ item.name }}</h5>
            <!-- <l-starRate v-model="item.star" :disabled="true"></l-starRate> -->
          </view>
          <view class="detail-lower">
            <!-- <view class="avatar">
              <image :src="item.avatar"></image>
            </view> -->
            <view class="progress">
              <span>{{ item.userName }}</span>
              <view class="bar">
                <liu-progressbar
                  :progress="Number(item.trainPercentage) || 0"
                  color="#000"
                  :height="'10rpx'"
                  bgColor="#1989FA"
                  :textInside="false"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <div class="no-data" v-if="projList.length == 0">
        <image src="/static/images/zanwuneirong.png" mode="aspectFit" />
        <view class="no-data-text">暂无内容</view>
      </div>
    </view>
  </view>
</template>

<script>
import { getStudentStudyWorkList } from '@/api/eduApp'
import config from '@/config'

export default {
  data() {
    return {
      activeIndex: 0,
      statusList: [
        // status -1: 全部 1: 已完成 0: 未完成
        { text: '全部', id: 0 },
        { text: '已完成', id: 1 },
        { text: '未完成', id: 2 }
      ],
      // 参数状态
      totalStatus: {
        statusCount: 0,
        keyword: '',
        learnType: '',
        outDateStatus: '',
        qualStatus: '',
        signupStatus: ''
      },
      // 状态选项
      learnTypeRange: [
        { text: '学习类型', value: '' },
        { text: '不学', value: 1 },
        { text: '要学', value: 2 }
      ],
      outDateStatusRange: [
        { text: '逾期状态', value: '' },
        { text: '临期', value: 1 },
        { text: '过期', value: 2 }
      ],
      qualStatusRange: [
        { text: '合格状态', value: '' },
        { text: '合格', value: 1 },
        { text: '不及格', value: 2 }
      ],
      signupStatusRange: [
        { text: '报名状态', value: '' },
        { text: '报了', value: 1 },
        { text: '没报', value: 2 }
      ],
      // 项目列表
      projList: []
      // projList: [
      //   {
      //     id: 1,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 5,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 71
      //   },
      //   {
      //     id: 2,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 3,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 33
      //   },
      //   {
      //     id: 3,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 2,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 94
      //   },
      //   {
      //     id: 4,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 4,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 76
      //   },
      //   {
      //     id: 5,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 1,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 63
      //   },
      //   {
      //     id: 6,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 5,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 52
      //   },
      //   {
      //     id: 7,
      //     img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
      //     title: '应急抢险',
      //     star: 4,
      //     avatar: '/static/eduImg/avatar.jpg',
      //     user: '管理员',
      //     percent: 18
      //   }
      // ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        userId: uni.getStorageSync('userId'),
        status: '-1'
      }
      // const res = await getStudentStudyWorkList(params)
      // this.projList = res.data
      this.getStudentStudyWorkList(params)
    },
    async chooseStatus(count, index) {
      this.activeIndex = index
      this.projList = []
      // 清空搜索框
      this.totalStatus.keyword = ''
      let params = {
        userId: uni.getStorageSync('userId'),
        status: '-1'
      }
      this.totalStatus.statusCount = count.id
      if (count.id === 0) {
        params.status = '-1'
      } else if (count.id === 1) {
        params.status = '1'
      } else if (count.id === 2) {
        params.status = '0'
      }
      // const res = await getStudentStudyWorkList(params)
      // this.projList = res.data
      this.getStudentStudyWorkList(params)
    },
    async toggleSearch() {
      this.projList = []
      console.log('开始搜索', this.totalStatus.keyword)
      let params = {
        userId: uni.getStorageSync('userId'),
        status: '-1',
        name: this.totalStatus.keyword
      }
      if (this.totalStatus.statusCount === 0) {
        params.status = '-1'
      } else if (this.totalStatus.statusCount === 1) {
        params.status = '1'
      } else if (this.totalStatus.statusCount === 2) {
        params.status = '0'
      }
      // const res = await getStudentStudyWorkList(params)
      // this.projList = res.data
      this.getStudentStudyWorkList(params)
    },
    statusChange(item) {
      console.log(this.totalStatus)
    },
    toggleDetail(id) {
      uni.navigateTo({
        url: `/pages/YNEduApp/learnProj/learnProjDetail?id=${id}`
      })
    },
    leftClick() {
      uni.navigateTo({
        url: '/pages/YNEduApp/index/index'
      })
    },
    getStudentStudyWorkList(params) {
      this.$verificationToken()
      uni.request({
        url: config.baseUrl + '/exam-student/personalCenter/getStudentStudyWorkList',
        method: 'post',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: uni.getStorageSync('access_token')
        },
        data: params,
        success: res => {
          console.log('🚀 ~ getList ~ res:', res)
          res = res.data
          this.projList = res.data
        },
        fail: err => {
          console.log(err)
        }
      })
    }
  },
  onBackPress(options) {
    console.log(options)
    if (options.from == 'backbutton') {
      // 来自手势返回
      console.log('手势返回')
      // 返回为 true 时，不会执行返回操作，可以自定义返回逻辑
      // 返回为 false 或者不返回时，则执行默认返回操作
      return true
    }
    // 返回为 false 或者不返回时，则执行默认返回操作
    return false
  }
}
</script>

<style lang="scss">
.tab-wrapper {
  display: flex;
  justify-content: space-around;
  /* background: #fff; */
  margin-bottom: 10px;

  .tab-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .tab-line {
      margin-top: 5px;
      width: 30%;
      height: 2px;
      background-color: #409eff;
      transition: width 0.3s;
    }
  }
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  .no-data-text {
    margin-top: 10px;
    color: #999;
  }
}
.page {
  width: 100vw;
  height: 100vh;
  background-color: #f8f8f8;
  box-sizing: border-box;
  padding: 0 10px;

  .status-secs {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 1vh;

    view {
      box-sizing: border-box;
      padding: 0 15rpx;
      font-size: 18px;
      color: #9ea2ac;
      font-weight: bold;
    }

    .active {
      font-size: 28px;
      color: #000;
    }
  }

  .drops {
    width: 100%;
    margin-top: 1vh;
    display: flex;
  }

  .project-cont {
    width: 100%;
    height: 10rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .single-proj {
      width: 49%;
      height: 22vh;
      margin-bottom: 1vh;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background-color: #fff;

      .img {
        width: 100%;
        height: 45%;

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

      .proj-detail {
        flex: 1;
        display: flex;
        flex-direction: column;

        .detail-upper {
          width: 100%;
          height: 50%;
          border-bottom: 1px solid #dfdfdf;
          box-sizing: border-box;
          padding: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          h5 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .icons {
            font-size: 12px;
            color: #c0c0c0;
            display: flex;
            align-items: center;

            span {
              padding-left: 5rpx;
            }
          }
        }

        .detail-lower {
          flex: 1;
          box-sizing: border-box;
          padding: 5px;
          display: flex;
          align-items: center;

          /* .avatar {
            width: 5vh;
            height: 5vh;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10rpx;

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

          .progress {
            flex: 1;
            box-sizing: border-box;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .bar {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>