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" color="#007b76" title-active-color="#007b76" @change="tabChange">
      <van-tab title="供应项目">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getList"/>
          <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-item v-model="value3" :options="option3" @change="getList"/>
        </van-dropdown-menu>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
          <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.biddingStopTime }}</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">{{ item.needname }}</p>
                <p class="timeEnd">需求开始时间 {{ item.needStartTime }}</p>
                <p class="timeEnd">需求结束时间 {{ item.needStopTime }}</p>
                <van-row>
                  <van-col span="12" class="money"><span>{{ item.price }}</span></van-col>
                  <van-col span="8" offset="4" class="time">{{ item.phone }}</van-col>
                </van-row>
              </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: true,
      //是否显示加载
      loading1: false,
      //是否滚动到底部
      finished1: true,
      option1: [
      ],
      option2: [
      ],
      option3: [
        { text: '竞价状态', value: '' },
        { text: '正在报名', value: '正在报名' },
        { text: '等待竞价', value: '等待竞价' },
        { text: '正在竞价', value: '正在竞价' },
        { text: '等待成交', value: '等待成交' },
        { text: '已经成交', value: '已经成交' },
      ],
      //标的物类型
      projectTypeOption:[{text:'标的物类型',value:''}],
      //标的物所在地
      deptListOption: [
      ],
      input: '',
      infoList:[],
      infoList1:[],
    };
  },
  created() {
    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 => {
        getDeptList(item.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:item.deptName,id:item.deptId})
          }else{
            this.deptListOption.push({ text: item.deptName,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(){
      console.log(this.value1)
      let queryDatas = {
        deptId: this.activeId,
        projectNumber:this.value1,
        projectShowStatus:this.value3
      }
      console.log(queryDatas)
      getOutProjectList(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)
        }
      });
    },
    getNeedProjectList(){
      let queryDatas = {
        deptId: this.activeId,
        projectNumber:this.value1,
      }
      console.log(queryDatas)
      needProjectList(queryDatas).then(response =>{
        console.log(response)
        this.infoList1 = response.rows
      });
    },
    clickNav(index){

    },
    clickItem(data){
      if(data.text==this.value2){
        this.activeId=1
        this.value2='标的物位置'
      }else{
        this.value2=data.text
      }
      this.getList()
      this.$refs.item.toggle();
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
  .title{
    font-size: 0.4rem;
  }
  .type{
    font-size: 0.35rem;
    color: #E7851C;
    margin-top: 5px;
  }
  .timeEnd{
    color: #666666;
    margin-top: 5px;
    font-size: 0.1rem;
  }
  .money{
    color: #C21F3A;
    line-height: 0.5rem;
    margin-top: 5px;
  }
  .money span{
    font-size: 0.5rem;
  }
  .time{
    color: #666666;
    line-height: 0.6rem;
    margin-top: 5px;
  }
</style>