| @@ -30,84 +30,74 @@ | |||||
| <van-dropdown-item v-model="value3" :options="option3" @change="tabChange"/> | <van-dropdown-item v-model="value3" :options="option3" @change="tabChange"/> | ||||
| </van-dropdown-menu> | </van-dropdown-menu> | ||||
| </van-row> | </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"> | |||||
| <p class="biddingProcessTitle"> | |||||
| <img src="../../../static/images/title_icon.png" alt=""> | |||||
| 竞价流程 | |||||
| </p> | |||||
| <div class="biddingProcessContent"> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.bjd" | |||||
| /> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第一步</p> | |||||
| <p class="biddingProcess_text">查看项目</p> | <p class="biddingProcess_text">查看项目</p> | ||||
| </van-col> | |||||
| <van-col span="3"> | |||||
| </div> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.bzj" | |||||
| /> | |||||
| <div></div> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第二步</p> | |||||
| <p class="biddingProcess_text">注册报名</p> | <p class="biddingProcess_text">注册报名</p> | ||||
| </van-col> | |||||
| <van-col span="3"> | |||||
| </div> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.cj" | |||||
| /> | |||||
| <div></div> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第三步</p> | |||||
| <p class="biddingProcess_text">交保证金</p> | <p class="biddingProcess_text">交保证金</p> | ||||
| </van-col> | |||||
| <van-col span="3"> | |||||
| </div> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.jcxx" | |||||
| /> | |||||
| <div></div> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第四步</p> | |||||
| <p class="biddingProcess_text">资质审核</p> | <p class="biddingProcess_text">资质审核</p> | ||||
| </van-col> | |||||
| <van-col span="3"> | |||||
| </div> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.k" | |||||
| /> | |||||
| <div></div> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第五步</p> | |||||
| <p class="biddingProcess_text">参与竞价</p> | <p class="biddingProcess_text">参与竞价</p> | ||||
| </van-col> | |||||
| <van-col span="3"> | |||||
| </div> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess"> | <div class="biddingProcess"> | ||||
| <van-image | |||||
| class="biddingProcess_img" | |||||
| :src="iconList.xmjflc" | |||||
| /> | |||||
| <div></div> | |||||
| <i></i> | |||||
| <div></div> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第六步</p> | |||||
| <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> | |||||
| <div class="content_li"> | |||||
| <div class="biddingProcess" style="justify-content: left;"> | |||||
| <div></div> | |||||
| <i></i> | |||||
| </div> | </div> | ||||
| <p class="biddingProcess_text">第七步</p> | |||||
| <p class="biddingProcess_text">结算交割</p> | <p class="biddingProcess_text">结算交割</p> | ||||
| </van-col> | |||||
| <van-col span="1"></van-col> | |||||
| </van-row> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">--> | <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">--> | ||||
| <van-list | <van-list | ||||
| v-model="loading" | v-model="loading" | ||||
| @@ -115,29 +105,78 @@ | |||||
| finished-text="没有更多了" | finished-text="没有更多了" | ||||
| @load="getList" | @load="getList" | ||||
| > | > | ||||
| <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> | |||||
| <span style="color: #666666">当前价 </span> | |||||
| <span style="font-size: 14px" v-if="item.biddingType=='自由竞价'&&item.deadline>0"> | |||||
| * | |||||
| </span> | |||||
| <span style="font-size: 14px" v-else> | |||||
| {{item.money}} | |||||
| </span> | |||||
| <span v-if="item.money">{{item.priceUnit}}</span> | |||||
| <span v-else>暂无出价</span> | |||||
| </van-row> | |||||
| </van-col> | |||||
| </van-row> | |||||
| <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', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}">{{item.timeType}}</p> | |||||
| </div> | |||||
| <div class="list_li_time"> | |||||
| <van-count-down :time="item.deadline"> | |||||
| <template #default="timeData"> | |||||
| <span style="color: #c4c4c4">距竞价结束</span> | |||||
| <span :style="{ | |||||
| color: { | |||||
| '未开始': '#007E72', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}">{{timeData.days}}天{{timeData.hours}}时{{timeData.minutes}}分{{timeData.seconds}}秒</span> | |||||
| </template> | |||||
| </van-count-down> | |||||
| <p> | |||||
| <span style="color: #c4c4c4">当前价 </span> | |||||
| <span :style="{'font-size':'14px', | |||||
| color: { | |||||
| '未开始': '#007E72', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}" v-if="item.biddingType=='自由竞价'&&item.deadline>0"> | |||||
| * | |||||
| </span> | |||||
| <span :style="{'font-size':'14px', | |||||
| color: { | |||||
| '未开始': '#007E72', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}" v-else> | |||||
| {{item.money}} | |||||
| </span> | |||||
| <span v-if="item.money" :style="{ | |||||
| color: { | |||||
| '未开始': '#007E72', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}">{{item.priceUnit}}</span> | |||||
| <span v-else :style="{ | |||||
| color: { | |||||
| '未开始': '#007E72', | |||||
| '已结束': '#c4c4c4', | |||||
| '进行中': '#c21F3a', | |||||
| }[item.timeType]}">暂无出价</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-list> | ||||
| <!-- </van-pull-refresh>--> | <!-- </van-pull-refresh>--> | ||||
| </div> | </div> | ||||
| @@ -224,6 +263,32 @@ export default { | |||||
| this.queryParams.projectShowStatus = this.value3; | this.queryParams.projectShowStatus = this.value3; | ||||
| getBiddingList(this.queryParams).then(response =>{ | getBiddingList(this.queryParams).then(response =>{ | ||||
| response.rows.map(item => { | 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!=""){ | if (item.biddingStopTime!=""){ | ||||
| let time = 0 | let time = 0 | ||||
| let endDate = Date.parse(item.biddingStopTime); | let endDate = Date.parse(item.biddingStopTime); | ||||
| @@ -232,9 +297,9 @@ export default { | |||||
| time = endDate-nowDate>0?endDate-nowDate:0 | time = endDate-nowDate>0?endDate-nowDate:0 | ||||
| } | } | ||||
| console.log(time) | console.log(time) | ||||
| this.infoList.push({content:item.projectName,deadline:time,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money}) | |||||
| this.infoList.push({content:item.projectName,deadline:time,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money,timeType:item.timeType}) | |||||
| }else{ | }else{ | ||||
| this.infoList.push({content:item.projectName,deadline:0,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money}) | |||||
| this.infoList.push({content:item.projectName,deadline:0,currentPrice:item.price,priceUnit:item.unit,id:item.id,money:item.money,timeType:item.timeType}) | |||||
| } | } | ||||
| }) | }) | ||||
| if(this.infoList.length >= response.total){ | if(this.infoList.length >= response.total){ | ||||
| @@ -301,7 +366,47 @@ export default { | |||||
| } | } | ||||
| </script> | </script> | ||||
| <style scoped> | |||||
| <style scoped lang="scss"> | |||||
| .list_li{ | |||||
| width: 94%; | |||||
| background: #ffffff; | |||||
| border-radius: 8PX; | |||||
| margin: 15PX 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: 1; | |||||
| &: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; | |||||
| } | |||||
| } | |||||
| } | |||||
| .list_li_time{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| margin-top: 10PX; | |||||
| } | |||||
| } | |||||
| .van-search__content{ | .van-search__content{ | ||||
| border:1px solid #007E72; | border:1px solid #007E72; | ||||
| } | } | ||||
| @@ -309,9 +414,21 @@ export default { | |||||
| /* font-size: 14PX;*/ | /* font-size: 14PX;*/ | ||||
| /*}*/ | /*}*/ | ||||
| .biddingProcess { | .biddingProcess { | ||||
| width:5vw; | |||||
| height:5vw; | |||||
| margin: 0 auto; | margin: 0 auto; | ||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: right; | |||||
| div{ | |||||
| width: calc(50% - 4PX); | |||||
| border-top: 1PX solid rgb(196,196,196); | |||||
| } | |||||
| i{ | |||||
| width: 8PX; | |||||
| height: 8PX; | |||||
| display: block; | |||||
| background: rgb(196,196,196); | |||||
| border-radius: 50%; | |||||
| } | |||||
| } | } | ||||
| .biddingProcess_img{ | .biddingProcess_img{ | ||||
| width:100%; | width:100%; | ||||
| @@ -323,14 +440,30 @@ export default { | |||||
| text-align: center; | text-align: center; | ||||
| line-height: 0.8rem; | line-height: 0.8rem; | ||||
| font-size: 14PX; | font-size: 14PX; | ||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 5PX 0; | |||||
| img{ | |||||
| margin-right: 5PX; | |||||
| width: 18PX; | |||||
| } | |||||
| } | } | ||||
| .biddingProcess_text{ | .biddingProcess_text{ | ||||
| /*font-size: 1vh;*/ | /*font-size: 1vh;*/ | ||||
| margin-top: 10PX; | |||||
| color: rgb(196,196,196); | |||||
| } | } | ||||
| .biddingProcessContent{ | .biddingProcessContent{ | ||||
| padding:0.4rem 0; | padding:0.4rem 0; | ||||
| background-color: #efefef; | |||||
| background-color: #ffffff; | |||||
| text-align: center; | text-align: center; | ||||
| display: flex; | |||||
| align-items: flex-start; | |||||
| justify-content: center; | |||||
| .content_li{ | |||||
| width: 15%; | |||||
| } | |||||
| } | } | ||||
| .biddingProcessListLeftCol{ | .biddingProcessListLeftCol{ | ||||
| padding:10px 0.25rem 10px 0.3rem; | padding:10px 0.25rem 10px 0.3rem; | ||||