Преглед изворни кода

竞价大厅数据对接。

wulanhaote
nsgkyjk пре 3 година
родитељ
комит
496d213c41
10 измењених фајлова са 317 додато и 251 уклоњено
  1. +18
    -0
      src/api/biddingHall/index.js
  2. +0
    -241
      src/components/biddingHall/biddingHallApply.vue
  3. +299
    -10
      src/views/biddingHall/index.vue
  4. BIN
      static/images/11.png
  5. BIN
      static/images/22.png
  6. BIN
      static/images/33.png
  7. BIN
      static/images/44.png
  8. BIN
      static/images/55.png
  9. BIN
      static/images/66.png
  10. BIN
      static/images/77.png

+ 18
- 0
src/api/biddingHall/index.js Прегледај датотеку

@@ -0,0 +1,18 @@
import request from '@/utils/request'

//字典 标的物所在地
export function getDeptList(id) {
return request({
url: '/transaction/website/deptList' ,
method: 'get',
params: {deptId:id}
})
}
//竞价大厅列表
export function getBiddingList(data){
return request({
url:'/transaction/website/biddinglist',
method:'get',
params:data
})
}

+ 0
- 241
src/components/biddingHall/biddingHallApply.vue Прегледај датотеку

@@ -1,241 +0,0 @@
<template>
<div>
<van-search
v-model="value"
shape="round"
background="#fff"
placeholder="请输入搜索关键词"
/>
<van-row>
<van-dropdown-menu >
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
<van-dropdown-item v-model="value3" :options="option3" />
</van-dropdown-menu>
</van-row>
<van-row type="flex" justify="center" class="biddingPorcessTitle">
<van-col span="24">竞价流程</van-col>
</van-row>
<van-row type="flex" justify="space-around" class="biddingPorcessContent">
<van-col span="1">
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第一步</p>
<p class="biddingPorcess_text">查看项目</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第二步</p>
<p class="biddingPorcess_text">注册报名</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第三步</p>
<p class="biddingPorcess_text">交保证金</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第四步</p>
<p class="biddingPorcess_text">资质审核</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第五步</p>
<p class="biddingPorcess_text">参与竞价</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第六步</p>
<p class="biddingPorcess_text">成家确认</p>
</van-col>
<van-col span="3">
<div class="biddingPorcess">
<van-image
class="biddingPorcess_img"
:src="iconList.bjd"
/>
</div>
<p class="biddingPorcess_text">第七步</p>
<p class="biddingPorcess_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="biddingPorcessListLeftCol">
<span >{{item.content}}</span>
</van-col>
<van-col span="11" class="biddingPorcessListRightCol">
<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>
export default {
name: "biddingHallApply",
data() {
return {
input: '',
iconList: {
bjd: "../../static/images/bidding_bjd.png",
bzj:"../../static/images/bidding_bzj.png",
cj:"../../static/images/bidding_cj.png",
jcxx:"../../static/images/bidding_jcxx.png",
k:"../../static/images/bidding_k.png",
xmjflc:"../../static/images/bidding_xmjflc.png",
zj:"../../static/images/bidding_zj.png",
},
iconWidthHeight:"0.4rem",
infoList:[],
value1: 0,
value2: 0,
value3: 0,
value:"",
info:{content:"管家堡乡张春张三丰500亩水田出租",deadline:"2222222222",currentPrice:"500",priceUnit:"元/亩/年"},
option1: [
{ text: '标的物类型', value: 0 },
{ text: '类型一', value: 1 },
{ text: '类型二', value: 2 },
],
option2: [
{ text: '标的物所在地', value: 0 },
{ text: '地址1', value: 1 },
{ text: '地址2', value: 2 },
],
option3: [
{ text: '项目状态', value: 0 },
{ text: '状态1', value: 1 },
{ text: '状态2', value: 2 },
],
loading: false,
finished: false,
refreshing: false,
}
},
methods:{
onL() {
setTimeout(() => {
if (this.refreshing) {
this.infoList = [];
this.refreshing = false;
}

for (let i = 0; i < 10; i++) {
this.infoList.push(this.info);
}
this.loading = false;

if (this.infoList.length >= 40) {
this.finished = true;
}
}, 1000);
},
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;
}
.biddingPorcess {
width:0.55rem;
height:0.55rem;
border-radius:0.275rem;
border:1px solid #007E72;
margin: 0 auto;
padding: 0.085rem;
}
.biddingPorcess_img{
width:0.32rem;
height:0.32rem;
}
.biddingPorcessTitle{
background-color:#007E72;
color:#fff;
text-align: center;
line-height: 0.8rem;
font-size: 14px;
}
.biddingPorcess_text{
font-size: 0.2rem;
}
.biddingPorcessContent{
padding:0.4rem 0;
background-color: #efefef;
text-align: center;
}
.biddingPorcessListLeftCol{
padding:10px 0.25rem 10px 0.3rem;
}
.biddingPorcessListLeftCol span{
font-size: 0.38rem;
}
.biddingPorcessListRightCol
{
padding:10px 0.3rem 10px 0.25rem;

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

+ 299
- 10
src/views/biddingHall/index.vue Прегледај датотеку

@@ -1,21 +1,310 @@
<template>
<biddingHallApply></biddingHallApply>
<div>
<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 biddingHallApply from "../../components/biddingHall/biddingHallApply";
export default {
name: "biddingHall",
components:{biddingHallApply},
data() {
return {
input: ''
}
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>

BIN
static/images/11.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 13 KiB

BIN
static/images/22.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 16 KiB

BIN
static/images/33.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 18 KiB

BIN
static/images/44.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 14 KiB

BIN
static/images/55.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 13 KiB

BIN
static/images/66.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 20 KiB

BIN
static/images/77.png Прегледај датотеку

Before After
Width: 375  |  Height: 373  |  Size: 12 KiB

Loading…
Откажи
Сачувај