wx_oms/priceAdjustmentTask/components/details.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>