wx_oms/bankEnterpriseConnection/payment/components/listItem.vue

<template>
	<view :style="{background:ifUrgent(item)}" class="card_bg">
		<view class="listCard">
			<!-- 		<view class="listCard_header">
	
			</view> -->
			<view class="flexOne textOverflow mr">
				<view class="listCard_header_Name textOverflow" style="font-size: 24rpx;">转出账号 {{item.accountNo}}
				</view>
				<view class="listCard_header_Order textOverflow" style="margin-top:10rpx;font-size: 24rpx">
					汇入账号 {{item.toAccountNo}} </view>
			</view>

			<view :style="{background:typeBackground(item.auditStatus),color:typeColor(item.auditStatus)}"
				class="listCard_header_Type" @click.stop="examine(item)">
				<view :style="{background:typeColor(item.auditStatus)}" class="garden"></view>
				<text>{{item.auditStatus|typeText}}</text>
			</view>
			<view class="listCard_content flex ">
				<view class="hui">汇入账号名称</view>
				<view class=" flexGrow textOverflow">
					{{item.toAccountName||'暂无'}}
				</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"> ￥{{item.amount}}</view>
			</view>

			<view v-if="item.auditStatus == 2 && item.status == 2" style="margin-top: 15rpx;">
				<view class="verify" @click.stop="verify(item)">查证</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 1:
						return '待审核'
					case 2:
						return '审核通过'
					default:
						return '---'
				}
			},
		},
		methods: {
			verify(item) {
				this.$emit('verify', item.id)
			},
			examine(item) {
				this.$emit('examine', item.id,item.auditStatus)
			},
			ifUrgent(item) {
				if (item.status) {
					return item.status == 1 ? 'rgba(0, 199, 119, 0.6)' : '#ff4949'
				} else {
					// return '#ff4949'
					return '#fff'
				}

			},
			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 1:
						return '#ffba0026'
					case 2:
						return '#17A00E26'
					default:
						return ''
				}
			},
			typeColor: function(e) {

				switch (Number(e)) {

					case 1:
						return '#ffba00'

					case 2:
						return '#17A00E'

					default:
						return ''
				}
			},
			scrolltolower() {
				this.$emit('scrolltolower')
			}
		}
	}
</script>

<style scoped>
	.verify {
		float: right;
		width: 165rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #1890ff;
		background: #1890ff50;
		border-radius: 10rpx;
	}

	.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;
	}

	.status-frame {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}

	.listCard_header_Type {
		position: absolute;
		right: 24rpx;
		top: 45rpx;
		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>