nsgk_mobile/src/views/project/index.vue

<template>
  <div class="app-container">
    <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch"/>

    <van-tabs v-model="active" type="card" color="#0DBCAA" title-active-color="#ffffff" @change="tabChange">
      <van-tab title="供应项目">
        <van-dropdown-menu active-color="#0EB8A4">
          <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getList('search')"/>
          <van-dropdown-item v-model="value2" :title="value2" ref="item">
            <van-tree-select
              :active-id.sync="activeId"
              :items="deptListOption"
              :main-active-index.sync="activeIndex"
              :max="1"
              @click-item="clickItem"
              @click-nav="clickNav"
            />
          </van-dropdown-item>
          <van-dropdown-item v-model="value3" :options="option3" @change="getList('search')"/>
        </van-dropdown-menu>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
          <router-link :to="{path:'project/projectDetail',query:{id:item.id}}" v-for="(item,index) in infoList" :key="index">
            <van-card :thumb="item.fileUrl?'/api'+item.fileUrl:'../../static/images/zwtpxw.jpg'" >
              <template #tags>
                <p class="title">【{{item.rollout}}】{{item.projectName}}</p>
                <p class="type">{{ item.projectShowStatus }}</p>
                <p class="timeEnd">报名结束 {{ item.signupStopTime }}</p>
                <p class="timeEnd">竞价结束 {{ item.biddingStopSetime }}</p>
                <van-row>
                  <van-col span="12" class="money"><span>{{ item.price }}</span>{{ item.unit }}</van-col>
                  <van-col span="8" offset="4" class="time">{{ item.projectReleaseTime }}</van-col>
                </van-row>
              </template>
            </van-card>
          </router-link>
        </van-list>
      </van-tab>
      <van-tab title="需求项目">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getNeedProjectList"/>
          <van-dropdown-item :value="value2" :title="value2" ref="item">
            <van-tree-select
              :active-id.sync="activeId"
              :items="deptListOption"
              :main-active-index.sync="activeIndex"
              :max="1"
              @click-item="clickItem"
              @click-nav="clickNav"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
        <van-list v-model="loading1" :finished="finished1" @load="getNeedProjectList" finished-text="没有更多了">
          <router-link :to="{path:'project/projectNeedsDetail',query:{id:item.id}}" v-for="(item,index) in infoList1" :key="index">
            <van-card :thumb="item.fileUrl?'/api'+item.fileUrl:'../../static/images/zwtpxw.jpg'" >
              <template #tags>
                <p class="title">{{ item.projectName }}</p>
                <p class="type" style="margin-top: 7px;">{{ item.needname }}</p>
                <p class="timeEnd" style="margin-top: 7px;">需求开始时间 {{ item.needStartTime }}</p>
                <p class="timeEnd" style="margin-top: 7px;">需求结束时间 {{ item.needStopTime }}</p>
              </template>
            </van-card>
          </router-link>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getOutProjectList , getDeptList , needProjectList } from "@/api/project/index" ;

export default {
  name: "project",
  data() {
    return {
      active:0,
      value1: '',
      value2: '标的物位置',
      activeId: this.global.deptId,
      activeIndex: 0,
      value3: '',
      value:"",
      //是否显示加载
      loading: false,
      //是否滚动到底部
      finished: false,
      //是否显示加载
      loading1: false,
      //是否滚动到底部
      finished1: false,
      option1: [
      ],
      option2: [
      ],
      option3: [
        { text: '竞价状态', value: '' },
        { text: '正在报名', value: '正在报名' },
        { text: '等待竞价', value: '等待竞价' },
        { text: '正在竞价', value: '正在竞价' },
        { text: '等待成交', value: '等待成交' },
        { text: '已经成交', value: '已经成交' },
      ],
      //标的物类型
      projectTypeOption:[{text:'标的物类型',value:''}],
      //标的物所在地
      deptListOption: [
      ],
      input: '',
      infoList:[],
      infoList1:[],
      queryDatas : {
        deptId: this.activeId,
        projectNumber:this.value1,
        projectShowStatus:this.value3,
        pageNum:1,
        pageSize:10
      },
      queryNeedDatas : {
        deptId: this.activeId,
        projectNumber:this.value1,
        pageNum:1,
        pageSize:10
      }
    };
  },
  created() {
    clearInterval();
    this.getDicts("project_type").then(response => {
      console.log(response)
      response.data.map(item => {
        this.projectTypeOption.push({ value:item.dictValue, text: item.dictLabel});
      });
    });
    getDeptList().then(response => {
      response.data.map(item => {
        this.deptListOption.push({text: item.deptName,children: [],id:item.deptId})
      });

      console.log(this.deptListOption)

      if(response.data.length > 0){
        getDeptList(response.data[0].deptId).then(res => {
          let list = []
          res.data.map(i =>{
            list.push({text:i.deptName,children:[],id:i.deptId})
          })
          if(list.length==0){
            list.push({text:response.data[0].deptName,id:response.data[0].deptId})
          }else{
            this.$set(this.deptListOption[0], "children", list);
          }
        });
      }

    });
    this.getList();
  },
  mounted(){},
  methods: {
    tabChange(e){
      console.log(e)
      if (e == 0){
        this.getList();
      }else{
        this.getNeedProjectList()
      }
    },
    onSearch(val) {
      this.loading = true;
      if(this.infoList.length>0){
        let newList = []
        for(let j = 0 ;j<this.infoList.length;j++){
          if(this.infoList[j].projectName.indexOf(val)>-1){
            newList.push(this.infoList[j]);
          }
        }
        this.infoList = newList
      }
      if(val==""){
        this.getList()
      }
      this.loading = false;
    },
    getList(type){
      console.log(this.queryDatas)
      console.log(this.value1)
      console.log(this.value3)
      if (type == 'search'){
        this.queryDatas.pageNum = 1;
        this.infoList=[];
        this.finished = false;
      }
      this.loading = true;
      this.queryDatas.deptId = this.activeId;
      this.queryDatas.projectNumber = this.value1;
      this.queryDatas.projectShowStatus = this.value3;
      getOutProjectList(this.queryDatas).then(response =>{
        // console.log(response)
        // this.infoList = response.rows
        // if(this.infoList.length>0){
        //   let newList = []
        //   for(let j = 0 ;j<this.infoList.length;j++){
        //     if(this.infoList[j].projectName.indexOf(this.value)>-1){
        //       newList.push(this.infoList[j]);
        //     }
        //   }
        //   this.infoList = newList
        //   console.log(this.infoList)
        // }

        response.rows.forEach(res=>{
          this.infoList.push(res);
        })

        if(this.infoList.length >= response.total){
          this.finished = true;
          return;
        }else{
          this.loading = false;
          this.queryDatas.pageNum += 1 ;
        }
      });
    },
    getNeedProjectList(){
      this.loading1 = true;
      needProjectList(this.queryNeedDatas).then(response =>{
        response.rows.forEach(res=>{
          this.infoList1.push(res);
        })

        if(this.infoList1.length >= response.total){
          this.finished1 = true;
          return;
        }else{
          this.loading1 = false;
          this.queryNeedDatas.pageNum += 1 ;
        }
      });
    },
    clickNav(index){
      console.log(index)
      getDeptList(this.deptListOption[index].id).then(res => {
        let list = []
        res.data.map(i =>{
          list.push({text:i.deptName,children:[],id:i.deptId})
        })
        if(list.length==0){
          list.push({text:this.deptListOption[index].deptName,id:this.deptListOption[index].id})
        }else{
          this.$set(this.deptListOption[index], "children", list);
        }
      });
    },
    clickItem(data){
      console.log('clickItem')
      if(data.text==this.value2){
        this.activeId=1
        this.value2='标的物位置'
      }else{
        this.value2=data.text
      }
      this.getList('search')
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 70PX) ;
  background: #F4F8FB;
  overflow-y: scroll;
}
.van-search{
  background: linear-gradient(to bottom right,#91E1CA,#E0F4E4);
}
/deep/ .van-tab{
  border-radius: 100PX!important;
  background: #ffffff;
  border: none;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  padding: 1vh 0;
  height: auto;
}
/deep/ .van-tabs__nav{
  background: transparent;
  border: none;
  .van-tab{
    &:nth-child(1){
      margin-right: 20PX;
    }
  }
}

  .title{
    font-size: 0.4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
    overflow: hidden;
  }
  .type{
    font-size: 0.35rem;
    color: #E7851C;
    margin-top: 5PX;
  }
  .timeEnd{
    color: #9A9A9A;
    margin-top: 5PX;
    font-size: 12PX;
  }
  .money{
    color: #FA5B5C;
    line-height: 0.5rem;
    margin-top: 5PX;
  }
  .money span{
    /*font-size: 0.35rem;*/
  }
  .time{
    color: #9A9A9A;
    line-height: 0.6rem;
    margin-top: 5PX;
  }
/deep/ .van-card{
  width: 94%;
  margin: 3vw auto 0;
  border-radius: 10PX;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}
</style>