wx_oms/bankEnterpriseConnection/balanceInquiry/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.AcName||'暂无'}}</view>
					<view class="listCard_header_Order textOverflow" style="margin-top:10rpx"> {{item.AcNo||'暂无'}} </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.accountBalance || '暂无'}}</view>
			</view>
			<view class="listCard_footer flex jb">
				<view class="flex">
					<view class="hui" style="margin-right: 20rpx;">昨日账户余额</view>
					<view class=" flexGrow textOverflow">{{item.SRZ1YE || '暂无'}}</view>
				</view>
				<view class="flex">
					<view class="hui" style="margin-right: 20rpx;">可用账户余额</view>
					<view class=" flexGrow textOverflow">{{item.availableBalance ||'暂无'}}</view>
				</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) {
				return 'rgba(0, 199, 119, 0.6)'
				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>