wx_oms/oilAccount/components/listItem.vue

<template>
	<view :style="{background:ifUrgent(item)}" class="card_bg">
		<view class="listCard">
			<view class="listCard_header">
				<view class="flexOne textOverflow mr">
					<view class="listCard_header_Name textOverflow ">{{item.companyName||'暂无'}}</view>
					<view class="listCard_header_Order textOverflow"> {{item.companyId||'暂无'}} </view>
				</view>
				<view :style="{background:typeBackground(item.auditMark),color:typeColor(item.auditMark)}" class="listCard_header_Type">
					<view  :style="{background:typeColor(item.auditMark)}" class="garden"></view>
					<text>{{item.auditMark|typeText}}</text>
				</view>
			</view>
			<view class="listCard_content flex ">
				 <view class="hui">付款</view> 
				 <view class=" flexGrow textOverflow">{{item.paymentCompany?`${item.paymentCompany.split('/')[0]}(${item.paymentCompany.slice(-5,-1)})`:'暂无'}}</view>
			</view>
			<view class="listCard_footer flex jb an">
				<view style="margin-right: 20rpx;" class=" flex flexOne hui samlltext jb">
				<text>{{item.createTime}}</text>
				</view>
				<view class="price"> {{Number(item.transactionAmount).toFixed(2)}}</view>
			</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() {
			// console.log(this.item.operationCode,this.item.createSource,'================================')
		},
		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 '等待付款'
					case  3:
					return '付款完成'
					case  4:
					return '取消充值'
					default:
					return '---'
				}
			},
		
		},
		methods:{
			ifUrgent(e){ 
				if(e.operationCode!==null&&e.operationCode!==undefined){
					return '#ff4949'
				}else{
					if(e.createSource=='WECHAT_COMPANY'){
						return 'rgba(0, 199, 119, 0.6)'
					}else{
						return '#ffffff'
					}
				}
				
			},
			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 '#ffba00'
					case  3:
					return '#13ce66'
					case  4:
					return '#ff4949'
					default:
					return ''
				}
			},
			typeColor:function(e){
				console.log(e,'-----')
				switch(Number(e)){
					case  0:
					return '#E8CD30'
					case  1:
					return '#17A00E'
					case  -1:
					return '#EC4545'
					case  2:
					return '#ffffff'
					case  3:
					return '#ffffff'
					case  4:
					return '#ffffff'
					default:
					return ''
				}
			},
			scrolltolower(){
				this.$emit('scrolltolower')
			}
		}
	}
</script>

<style scoped>
	.flexGrow{
	flex: 1;	
	}
	.price{
		font-size: 26rpx;
	}
	.card_bg{
		width: 670rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-left: 10rpx;
		margin-top: 20rpx;
		color: #666666;
	}
	.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;
	/* margin: 10rpx auto; */
	padding: 28rpx 34rpx 28rpx 24rpx ;
	color: #666666;
	font-size: 28rpx;
	position: relative;
	overflow: hidden;
}
</style>