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="tabChange"/>
        <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="tabChange"/>
      </van-dropdown-menu>
    </van-row>
    <p class="biddingProcessTitle">
      <img src="../../../static/images/title_icon.png" alt="">
      竞价流程
    </p>
    <div class="biddingProcessContent">

      <div class="content_li">
        <div class="biddingProcess">
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">查看项目</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess">
          <div></div>
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">注册报名</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess">
          <div></div>
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">交保证金</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess">
          <div></div>
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">资质审核</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess">
          <div></div>
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">参与竞价</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess">
          <div></div>
          <i></i>
          <div></div>
        </div>
        <p class="biddingProcess_text">成交确认</p>
      </div>

      <div class="content_li">
        <div class="biddingProcess" style="justify-content: left;">
          <div></div>
          <i></i>
        </div>
        <p class="biddingProcess_text">结算交割</p>
      </div>

    </div>
<!--    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <div class="list_li" v-for="(item,index) in infoList" :key="index" @click="goDetail(item.id)">

          <div class="list_li_tt">
            <p>{{item.content}}</p>
            <p :style="{
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '进行中': '#c21F3a',
                }[item.timeType]}">{{item.timeType}}</p>
          </div>
          <div class="list_li_time">
              <van-count-down :time="item.deadline">
                <template #default="timeData">
                  <span style="color: #848484;font-size: 14PX;">距结束</span>
                  <span :style="{'font-size':'14px',
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '进行中': '#c21F3a',
                }[item.timeType]}">
                    <span style="font-size: 18PX;">{{timeData.days}}</span>天
                    <span style="font-size: 18PX;">{{timeData.hours}}</span>时
                    <span style="font-size: 18PX;">{{timeData.minutes}}</span>分
                    <span style="font-size: 18PX;">{{timeData.seconds}}</span>秒
                  </span>
                </template>
              </van-count-down>
              <p>
                <span style="color: #848484">当前价</span>
                <span :style="{'font-size':'14px',
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '进行中': '#c21F3a',
                }[item.timeType]}" v-if="item.biddingType=='自由竞价'&&item.deadline>0">
                  *
                </span>

                <span :style="{'font-size':'14px',
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '进行中': '#c21F3a',
                }[item.timeType]}" v-if="(item.biddingType!='自由竞价'&&item.money) || item.deadline<=0">
                  {{item.money}}{{item.priceUnit}}
                </span>

                <span :style="{'font-size':'14px',
                color: {
                  '未开始': '#007E72',
                  '已结束': '#848484',
                  '进行中': '#c21F3a',
                }[item.timeType]}" v-if="item.biddingType!='自由竞价'&&!item.money">
                  暂无出价
                </span>


              </p>
          </div>

        </div>
<!--        <van-row v-for="(item,index) in infoList" :key="index" :title="item" @click="goDetail(item.id)">-->
<!--          <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>-->

<!--            </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: null,
      activeIndex: 0,
      value3: '',
      value:"",
      info:[],
      //标的物所在地
      deptListOption: [],
      option3: [
        { text: '竞价状态', value: '' },
        { text: '正在报名', value: '正在报名' },
        { text: '等待竞价', value: '等待竞价' },
        { text: '正在竞价', value: '正在竞价' },
        { text: '等待成交', value: '等待成交' },
        { text: '已经成交', value: '已经成交' },
      ],
      loading: false,
      finished: false,
      refreshing: false,
      queryParams : {
        pageNum:1,
        pageSize:10
      }
    }
  },
  created(){
    this.getDicts("project_type").then(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);
          }
        });
      }
    });
  },
  methods:{
    goDetail(id){
      console.log(id)
      this.$router.push({path:'project/projectDetail',query:{id:id}})
    },
    getList(){
      this.queryParams.deptId = this.activeId;
      this.queryParams.projectNumber = this.value1;
      this.queryParams.projectShowStatus = this.value3;
      getBiddingList(this.queryParams).then(response =>{
        response.rows.map(item => {
          if(item.biddingStopTime != null || item.biddingStartTime != null){
            var endTimes=item.biddingStopTime.substring(0,10).split('-');
            var biddingStopTime=endTimes[1]+'/'+endTimes[2]+'/'+endTimes[0]+' '+item.biddingStopTime.substring(10,19);

            var startTimes=item.biddingStartTime.substring(0,10).split('-');
            var biddingStartTime=startTimes[1]+'/'+startTimes[2]+'/'+startTimes[0]+' '+item.biddingStartTime.substring(10,19);

            var nowTime = Date.parse(new Date());
            var leftTime = Date.parse(biddingStopTime)-nowTime;
            var rightTime = Date.parse(biddingStartTime)-nowTime;
            console.log(biddingStopTime)
            console.log(leftTime)

            if(leftTime>0){
              console.log('进行中')
              item.timeType = '进行中'
            }
            if(leftTime<0){
              console.log('已结束')
              item.timeType = '已结束'
            }
            if(rightTime>0){
              console.log('未开始')
              item.timeType = '未开始'
            }
          }
          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
            }
            console.log(time)
            this.infoList.push({content:item.projectName,biddingType:item.biddingType,deadline:time,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money,timeType:item.timeType})
          }else{
            this.infoList.push({content:item.projectName,biddingType:item.biddingType,deadline:0,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money,timeType:item.timeType})
          }
        })
        if(this.infoList.length >= response.total){
          this.finished = true;
          return;
        }else{
          this.loading = false;
          this.queryParams.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(data)
      this.infoList = [];
      this.queryParams.pageNum = 1;
      if(data.text==this.value2){
        this.activeId=1
        this.value2='标的物位置'
      }else{
        this.value2=data.text
      }
      this.getList()
    },
    tabChange(){
      this.infoList = [];
      this.queryParams.pageNum = 1;
      this.finished = false;
      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 lang="scss">

  .list_li{
    width: 94%;
    background: #ffffff;
    border-radius: 8PX;
    margin: 10PX auto 0;
    padding: 3vw 5%;
    .list_li_tt{
      display: flex;
      justify-content: space-between;
      padding-bottom: 10PX;
      border-bottom: 1PX solid rgb(239,239,239);
      align-items: center;
      p{
        line-height: 22PX;
        &:nth-child(1){
          color: #333333;
          font-weight: bold;
          font-size: 16PX;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;
        }
        &:nth-child(2){
          flex-shrink: 0;
          margin-left: 15PX;
        }
      }
    }

    .list_li_time{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10PX;
    }

  }

.van-search__content{
  border:1px solid #007E72;
}
/*>>> .van-dropdown-menu__title{*/
/*  font-size: 14PX;*/
/*}*/
.biddingProcess {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: right;
  div{
    width: calc(50% - 4PX);
    border-top: 1PX solid #c4c4c4;
  }
  i{
    width: 8PX;
    height: 8PX;
    display: block;
    background: #c4c4c4;
    border-radius: 50%;
  }
}
.biddingProcess_img{
  width:100%;
  height:100%;
}
.biddingProcessTitle{
  background-color:#007E72;
  color:#fff;
  text-align: center;
  line-height: 0.8rem;
  font-size: 14PX;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5PX 0;
  img{
    margin-right: 5PX;
    width: 18PX;
  }
}
.biddingProcess_text{
  /*font-size: 1vh;*/
  margin-top: 10PX;
  color: #848484;
}
.biddingProcessContent{
  padding:0.4rem 0;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .content_li{
    width: 15%;
  }
}
.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: 12PX;
}
</style>