wx_oms/priceAdjustmentTask/components/listItem.vue

<template>
	<view class="listCard">
		<view class="listCard_header">
			<view class="flexOne textOverflow mr">
				<view class="listCard_header_Name textOverflow ">{{item.siteName||'暂无'}}</view>
				<view class="listCard_header_Order textOverflow"> {{item.siteId||'暂无'}} </view>
			</view>
			<view :style="{background:typeBackground(item.taskExecutStatus),color:typeColor(item.taskExecutStatus)}" class="listCard_header_Type">
				<view  :style="{background:typeColor(item.taskExecutStatus)}" class="garden"></view>
				<text>{{item.taskExecutStatus|typeText}}</text>
			</view>
		</view>
		<view class="listCard_content flex jc">
			<view class="listCard_content_code flex jc ac">{{item.oilProductCode||'暂无'}}</view>
			<view class="listCard_content_fg flex">
				<view class="flex an hui">发改委价</view>
				<view>
					<view class="hui samlltext de">{{item.oldMarketPrice.toFixed(2)}}</view>
					<view>
					{{item.marketPrice.toFixed(2)}}
					<uni-icons
						:color="iconFn(Number(item.marketPrice),Number(item.oldMarketPrice))"
						 custom-prefix="iconfont"
						:type="icontype(Number(item.marketPrice),Number(item.oldMarketPrice))"
						size="15"></uni-icons>
					</view>
				</view>
			</view>
			<view class="listCard_content_yz flex">
				<view class="flex an hui ">油站价</view>
				<view >
					<view class="hui samlltext de">{{item.oldSitePrice.toFixed(2)}}</view>
					<view>
					{{item.sitePrice.toFixed(2)}}
					<uni-icons
						:color="iconFn(Number(item.sitePrice),Number(item.oldSitePrice))"
						custom-prefix="iconfont"
						:type="icontype(Number(item.sitePrice),Number(item.oldSitePrice))"
						size="15">
						</uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="listCard_footer flex jb an">
			<view style="margin-right: 20rpx;" class=" flex flexOne hui samlltext jb">
			<text>{{item.createTime}}</text>
			<text v-if="item.effectiveMode==1">{{item.subEntryTime}}</text>
			</view>
			<view :style="{background:stateBackground(item.effectiveMode),color:stateColor(item.effectiveMode)}" class="listCard_footer_Type flex jc ac">{{item.effectiveMode|state}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"listItem",
		props:{
			item:{
				type:Object,
				default:()=> null
			}
		},
		data() {
			return {
				
			};
		},
		mounted() {
			setTimeout(()=>{
				console.log(this.item,'//')
			},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 '---'
				}
			},
		
		},
		methods:{
			icontype(a,b){
				return a > b?'icona-shangzhang1':  a < b? 'icona-xiadie2':'iconchiping'
			},
			iconFn(a,b){
				return a > b?'#ff5555': a < b?'#2CE308':'#f9d06f' 
			},
			stateColor(e){
				switch(Number(e)){
					case  0:
					return '#00AAFF'
					case  1:
					return '#9F43CC'
					default:
					return ''
				}
			},
			stateBackground(e){
				switch(Number(e)){
					case  0:
					return 'rgba(0, 170, 255, 0.1)'
					case  1:
					return 'rgba(159, 67, 204, 0.1)'
					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 ''
				}
			},
			typeColor:function(e){
				switch(Number(e)){
					case  0:
					return '#E8CD30'
					case  1:
					return '#17A00E'
					case  -1:
					return '#EC4545'
					case  -2:
					return '#bbbbbb'
					default:
					return ''
				}
			},
			scrolltolower(){
				this.$emit('scrolltolower')
			}
		}
	}
</script>

<style scoped>
	.listCard_footer_Type{
		background: rgba(0, 170, 255, 0.1);
		color: #00AAFF;
		Width:88rpx;
		Height:40rpx
	}
	.jb{
		justify-content: space-between;
	}
	.listCard_footer{
		margin-top: 15rpx;
		font-size: 24rpx;
	}
	.listCard_content_yz view {
		margin-right: 10rpx !important;
	}
	.listCard_content_fg view {
		margin-right: 10rpx !important;
	}
	.de{
		text-decoration: line-through;
		
	}
	.samlltext{
		font-size: 20rpx;
	}
	.hui{
		color: #BBBBBB;
	}
	.an{
		align-items: flex-end;
	}
	.listCard_content view{
		margin-right: 20rpx;
	}
	.listCard_content :last-child{
		margin-right: 0;
	}
	.listCard_content_code{
		width: 100rpx;
		height: 60rpx;
		background: #F0F0F0;
		color: #666666;
		font-size: 28rpx;
	}
	.jc{
		justify-content: center;
	}
	.ac{
		align-items: center;
	}
	.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;
	}
	.listCard_header_Order{
		width: 100%;
	}
	.listCard_header_Name{
		width: 100%;
	}
	.mr{
		margin-right: 40rpx;
	}
	.textOverflow{
		overflow: hidden;/*超出部分隐藏*/
		white-space: nowrap;/*不换行*/
		text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	.listCard_header_Order{
		color: #BBBBBB;
		font-size: 20rpx;
	}
	.flex{
		display: flex;
	}
	.flexOne{
		flex: 1;
	}
	.listCard_footer{}
	.listCard_content{
		margin-top: 15rpx;
		font-size: 24rpx;
	}
	.listCard_header{
		display: flex;
		align-items: center;
	}
.listCard{
	background: #FFFFFF;
	border-radius: 20rpx;
	width: 670rpx;
	margin: 10rpx auto;
	padding: 28rpx 34rpx;
	color: #666666;
	font-size: 28rpx;
}
</style>