You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
6.7 KiB
310 lines
6.7 KiB
<template> |
|
<view class="detailse"> |
|
<view class=" flex detailse_title fontcolor jb"> |
|
调价任务详情 |
|
<view :style="{background:typeBackground(details.taskExecutStatus),color:typeColor(details.taskExecutStatus)}" class="listCard_header_Type"> |
|
<view :style="{background:typeColor(details.taskExecutStatus)}" class="garden"></view> |
|
<text>{{details.taskExecutStatus|typeText}}</text> |
|
</view> |
|
</view> |
|
<view class="detailse_header flex ac"> |
|
<view class="detailse_header_icon"> |
|
<uni-icons color="#2866ff" custom-prefix="iconfont" type="iconjiayou" size="20"></uni-icons> |
|
</view> |
|
<view style="flex: 1;overflow: hidden;"> |
|
<view style="width: 100%;" class="textOverflow">{{details.siteName||'暂无'}}</view> |
|
<view class="samlltext hui ">{{details.siteId||'暂无'}}</view> |
|
</view> |
|
</view> |
|
<view class="detailse_oilType flex"> |
|
<view> |
|
<view class="hui">油号</view> |
|
<view class="mtop">{{details.oilProductCode||'暂无'}}</view> |
|
</view> |
|
<view class="detailse_oilType_price"> |
|
<view class="hui">调价类型</view> |
|
<view class="flex ac mtop"> |
|
<view class="detailse_oilType_lable flex ac jc">{{details.effectiveMode|state}}</view> |
|
<view class="samlltext hui"> |
|
<text v-if="details.effectiveMode==1">{{details.subEntryTime}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="detailse_content hui flex"> |
|
<view v-for="(item,index) in priceData" class="detailse_content_item"> |
|
<view class="hui">{{item.lable}}</view> |
|
<view > |
|
<text>{{Number(details[item.price])?Number(details[item.price]).toFixed(item.lable=='底价'?4:2):'0.00'}}</text> |
|
<uni-icons |
|
:color="iconFn(item) " |
|
custom-prefix="iconfont" |
|
:type="icontype(item) " |
|
size="15"> |
|
</uni-icons> |
|
<text class="samlltext hui de">{{Number(details[item.oldePrice])?Number(details[item.oldePrice]).toFixed(item.lable=='底价'?4:2):'0.00'}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
details:{ |
|
type:Object, |
|
default:null |
|
} |
|
}, |
|
data() { |
|
return { |
|
priceData:[{ |
|
lable:'发改委价格', |
|
price:'marketPrice', |
|
oldePrice:'oldMarketPrice' |
|
},{ |
|
lable:'油站价格', |
|
price:'sitePrice', |
|
oldePrice:'oldSitePrice' |
|
}, |
|
// { |
|
// lable:'个人价', |
|
// price:'personalPrice', |
|
// oldePrice:'oldPersonalPrice' |
|
// }, |
|
{ |
|
lable:'企业价', |
|
price:'enterprisePrice', |
|
oldePrice:'oldEnterprisePrice' |
|
},{ |
|
lable:'底价', |
|
price:'floorPrice', |
|
oldePrice:'oldFloorPrice' |
|
},{ |
|
lable:'结算价', |
|
price:'settlementPrice', |
|
oldePrice:'oldSettlementPrice' |
|
}] |
|
} |
|
}, |
|
watch:{ |
|
details:function(n,o){ |
|
if(n){ |
|
console.log(this.details,'*********************') |
|
// Object.keys(this.details).forEach(item=>{ |
|
// if(item.includes('Price')){ |
|
// if(!item.includes('new')){ |
|
// console.log(item,'******') |
|
// } |
|
// } |
|
// }) |
|
} |
|
} |
|
}, |
|
mounted() { |
|
console.log(this.details,'******/***') |
|
setTimeout(()=>{ |
|
console.log(this.details,'*********') |
|
},1000) |
|
}, |
|
created() { |
|
|
|
}, |
|
filters: { |
|
state:function(e){ |
|
switch(Number(e)){ |
|
case 0: |
|
return '即时' |
|
case 1: |
|
return '预约' |
|
default: |
|
return '---' |
|
} |
|
}, |
|
typeText:function(e){ |
|
switch(Number(e)){ |
|
case 0: |
|
return '等待执行' |
|
case 1: |
|
return '执行成功' |
|
case -1: |
|
return '执行失败' |
|
case -2: |
|
return '任务撤回' |
|
default: |
|
return '---' |
|
} |
|
}, |
|
applyStatus(e) { |
|
/* |
|
-3：执行失败 |
|
-2：已撤回 |
|
-1：审核失败 |
|
0：待审核 |
|
1：审核通过 |
|
2：等待执行 |
|
3：执行成功 |
|
*/ |
|
switch (Number(e)) { |
|
case 1: |
|
return '审核通过' |
|
case 2: |
|
return '等待执行' |
|
case 3: |
|
return '执行成功' |
|
case 0: |
|
return '等待审核' |
|
case -1: |
|
return '审核失败' |
|
case -2: |
|
return '已撤回' |
|
case -3: |
|
return '执行失败' |
|
case -4: |
|
return '已撤销' |
|
} |
|
} |
|
}, |
|
methods: { |
|
icontype(item){ |
|
console.log(this.details[item.price],this.details[item.oldePrice],'////////') |
|
return Number(this.details[item.price])> Number(this.details[item.oldePrice])?'icona-shangzhang1': Number(this.details[item.price]) < Number( this.details[item.oldePrice])? 'icona-xiadie2':'iconchiping' |
|
}, |
|
iconFn(item){ |
|
return Number(this.details[item.price]) > Number(this.details[item.oldePrice])?'#ff5555': Number(this.details[item.price]) < Number(this.details[item.oldePrice])?'#2CE308':'#f9d06f' |
|
}, |
|
typeColor:function(e){ |
|
switch(Number(e)){ |
|
case 0: |
|
return '#E8CD30' |
|
case 1: |
|
return '#17A00E' |
|
case -1: |
|
return '#EC4545' |
|
case -2: |
|
return '#bbbbbb' |
|
default: |
|
return '' |
|
} |
|
}, |
|
typeBackground:function(e){ |
|
switch(Number(e)){ |
|
case 0: |
|
return '#E8CD3026' |
|
case 1: |
|
return '#17A00E26' |
|
case -1: |
|
return '#EC454526' |
|
case -2: |
|
return '#bbbbbb26' |
|
default: |
|
return '' |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.garden{ |
|
background-color: #E8CD30; |
|
border-radius: 50%; |
|
width: 20rpx; |
|
height: 20rpx; |
|
margin-right: 16rpx; |
|
} |
|
.listCard_header_Type{ |
|
background: rgba(232, 205, 48, 0.15); |
|
border-radius: 40rpx; |
|
color: #E8CD30; |
|
/* padding: 10rpx 20rpx; */ |
|
font-size: 24rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
Width : |
|
180rpx; |
|
Height: |
|
54rpx; |
|
} |
|
.de{ |
|
text-decoration: line-through; |
|
|
|
} |
|
.detailse_content_item{ |
|
width: 50% ; |
|
text-align: center; |
|
margin-bottom: 50rpx; |
|
} |
|
.detailse_content{ |
|
margin-top: 50rpx; |
|
flex-wrap: wrap; |
|
} |
|
.mtop{ |
|
margin-top: 15rpx; |
|
} |
|
.detailse_oilType_price{ |
|
margin-left: 78rpx; |
|
} |
|
.detailse_oilType{ |
|
padding-bottom: 56rpx; |
|
border-bottom: 1px dashed #BBBBBB; |
|
} |
|
.detailse_oilType_lable{ |
|
background: rgba(0, 170, 255, 0.1); |
|
color: #00AAFF; |
|
Width:88rpx; |
|
Height:40rpx; |
|
margin-right: 20rpx; |
|
font-size: 24rpx; |
|
} |
|
.detailse_header{ |
|
margin-bottom: 40rpx; |
|
} |
|
.detailse_header_icon{ |
|
margin-right: 24rpx; |
|
} |
|
.hui{ |
|
color: #BBBBBB; |
|
} |
|
.samlltext{ |
|
font-size: 20rpx; |
|
} |
|
.jb{ |
|
justify-content: space-between; |
|
} |
|
.an{ |
|
align-items: flex-end; |
|
} |
|
.jc{ |
|
justify-content: center; |
|
} |
|
.ac{ |
|
align-items: center; |
|
} |
|
.textOverflow{ |
|
overflow: hidden;/*超出部分隐藏*/ |
|
white-space: nowrap;/*不换行*/ |
|
text-overflow:ellipsis;/*超出部分文字以...显示*/ |
|
} |
|
.flex{ |
|
display: flex; |
|
} |
|
.flexOne{ |
|
flex: 1; |
|
} |
|
.detailse{ |
|
padding: 52rpx 62rpx; |
|
} |
|
view { |
|
font-size: 28rpx; |
|
color: #666666; |
|
} |
|
.fontcolor{ |
|
color: #BBBBBB; |
|
} |
|
.detailse_title{ |
|
margin-bottom: 50rpx; |
|
} |
|
</style>
|
|
|