311 lines
6.7 KiB
Vue
311 lines
6.7 KiB
Vue
<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>
|