nsgk_mobile/src/views/biddingHall/index.vue

<template>
  <div>
    <van-nav-bar
      title="竞价大厅"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <van-row>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="projectTypeOption" @change="getList"/>
        <van-dropdown-item :value="value2" :title="value2">
          <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-row>
    <van-row type="flex" justify="center" class="biddingProcessTitle">
      <van-col span="24">竞价流程</van-col>
    </van-row>
    <van-row type="flex" justify="space-around" class="biddingProcessContent">
      <van-col span="1">
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.bjd"
          />
        </div>
        <p class="biddingProcess_text">第一步</p>
        <p class="biddingProcess_text">查看项目</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.bzj"
          />
        </div>
        <p class="biddingProcess_text">第二步</p>
        <p class="biddingProcess_text">注册报名</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.cj"
          />
        </div>
        <p class="biddingProcess_text">第三步</p>
        <p class="biddingProcess_text">交保证金</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.jcxx"
          />
        </div>
        <p class="biddingProcess_text">第四步</p>
        <p class="biddingProcess_text">资质审核</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.k"
          />
        </div>
        <p class="biddingProcess_text">第五步</p>
        <p class="biddingProcess_text">参与竞价</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.xmjflc"
          />
        </div>
        <p class="biddingProcess_text">第六步</p>
        <p class="biddingProcess_text">成家确认</p>
      </van-col>
      <van-col span="3">
        <div class="biddingProcess">
          <van-image
            class="biddingProcess_img"
            :src="iconList.zj"
          />
        </div>
        <p class="biddingProcess_text">第七步</p>
        <p class="biddingProcess_text">结算交割</p>
      </van-col>
      <van-col span="1"></van-col>
    </van-row>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onL"
      >
        <van-row v-for="(item,index) in infoList" :key="index" :title="item">
          <van-col span="13" class="biddingProcessListLeftCol">
            <span >{{item.content}}</span>
          </van-col>
          <van-col span="11" class="biddingProcessListRightCol">
            <van-count-down :time="item.deadline">
              <template #default="timeData">
                <span style="color: #666666">距竞价结束</span><span>{{timeData.days}}天{{timeData.hours}}时{{timeData.minutes}}分{{timeData.seconds}}秒</span>
              </template>
            </van-count-down>
            <van-row> <span style="color: #666666">当前价 </span><span style="font-size: 14px">{{item.currentPrice}}</span> <span>{{item.priceUnit}}</span></van-row>
          </van-col>
        </van-row>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {getBiddingList, getDeptList} from "../../api/biddingHall";

export default {
  name: "biddingHallApply",
  data() {
    return {
      //标的物类型
      projectTypeOption:[{text:'标的物类型',value:''}],
      input: '',
      iconList: {
        bjd: "../../static/images/11.png",
        bzj:"../../static/images/22.png",
        cj:"../../static/images/33.png",
        jcxx:"../../static/images/44.png",
        k:"../../static/images/55.png",
        xmjflc:"../../static/images/66.png",
        zj:"../../static/images/77.png",
      },
      iconWidthHeight:"0.4rem",
      infoList:[],
      value1: '',
      value2: '标的物位置',
      activeId: 1,
      activeIndex: 0,
      value3: '',
      value:"",
      info:[],
      //标的物所在地
      deptListOption: [
      ],
      option3: [
        { text: '竞价状态', value: '' },
        { text: '全部', value: '全部' },
        { text: '竞价中', value: '竞价中' },
        { text: '竞价结束', value: '竞价结束' },
      ],
      loading: false,
      finished: false,
      refreshing: false,
    }
  },
  created(){
    this.getDicts("project_type").then(response => {
      response.data.map(item => {
        this.projectTypeOption.push({ value:item.dictCode, 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});
          }

        });
      });
    });
  },
  methods:{
    getList(){
      let queryDatas = {
        deptId: this.value1,
        projectNumber:this.activeId,
        projectShowStatus:this.value3
      }
      getBiddingList(queryDatas).then(response =>{
        this.infoList = response.rows.map(item => {
          if (item.biddingStopTime!=""){
            let time = 0
            let endDate =  Date.parse(item.biddingStopTime);
            let nowDate = Date.parse(new Date());
            if(endDate>nowDate){
              time = endDate-nowDate>0?endDate-nowDate:0
            }
            return{content:item.projectName,deadline:time,currentPrice:item.price,priceUnit:item.unit}
          }else {
            return{content:item.projectName,deadline:0,currentPrice:item.price,priceUnit:item.unit}
          }

        })
      });
    },
    clickNav(index){

    },
    clickItem(data){
      if(data.text==this.value2){
        this.activeId=1
        this.value2='标的物位置'
      }else{
        this.value2=data.text
      }
      this.getList()
    },
    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].content.indexOf(val)>-1){
            newList.push(this.infoList[j]);
          }
        }
        this.infoList = newList
      }
      if(val==""){
        this.getList()
      }
      this.loading = false;
    },
    onL() {
      this.refreshing = true;
      this.loading = false;
      this.getList()
      this.refreshing = false;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onL();
    },
  },
}
</script>

<style scoped>
.van-search__content{
  border:1px solid #007E72;
}
>>> .van-dropdown-menu__title{
  font-size: 0.2rem;
}
.biddingProcess {
  width:0.55rem;
  height:0.55rem;
  margin: 0 auto;
}
.biddingProcess_img{
  width:100%;
  height:100%;
}
.biddingProcessTitle{
  background-color:#007E72;
  color:#fff;
  text-align: center;
  line-height: 0.8rem;
  font-size: 14px;
}
.biddingProcess_text{
  font-size: 0.2rem;
}
.biddingProcessContent{
  padding:0.4rem 0;
  background-color: #efefef;
  text-align: center;
}
.biddingProcessListLeftCol{
  padding:10px 0.25rem 10px 0.3rem;
}
.biddingProcessListLeftCol span{
  font-size: 0.38rem;
}
.biddingProcessListRightCol
{
  padding:10px 0.3rem 10px 0.25rem;

}
.biddingProcessListRightCol span{
  color: #c21F3a;
  font-size: 10px;
}
</style>