wx_oms/oilAccount/components/accountListItem.vue

<template>
	<view class="listCard">
		<view class="listCard_header">
			<view class="flexOne textOverflow mr">
				<view class="listCard_header_Name textOverflow ">{{item.accountName ||'--'}}</view>
				<view class="listCard_header_Order textOverflow"> {{item.siteChannelAccountId||'--'}} </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(item)}}</text>
			</view>
		</view>
		<view class="listCard_footer flex jb an">
			<view style="margin-right: 20rpx;" class="  flexOne   ">
				<view>{{item.companyName||'--'}}</view>
				<text class="hui samlltext">{{item.createTime||'--'}}</text>
			</view>
			<view style="text-align: center;">
				<view style="width: 180rpx;display: flex;justify-content: flex-end;">
					<view
						:style="{color: transactionType(item.transactionType).color,background:transactionType(item.transactionType).bg}"
						class="genres">{{ transactionType(item.transactionType).text}}</view>
				</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() {},
		filters: {
			state: function(e) {
				switch (Number(e)) {
					case 0:
						return '即时'
					case 1:
						return '预约'
					default:
						return '---'
				}
			},
			typeText: (e, item) => {
				switch (Number(e)) {
					case 0:
						return ['RECHARGE_REBETE', 'CONSUME_REBATE', 'CALIBRATION_BALANCE'].includes(item
							.transactionType) ? '待运营组长审核' : '等待审核'

					case 1:
						return '审核通过'
					case -1:
						return '审核失败'
					case 2:
						return '等待付款'
					case 3:
						return '付款完成'
					case 4:
						return '取消充值'
					case 5:
						return '待数据中心审核'
					default:
						return '---'
				}
			},

		},
		methods: {
			transactionType(e) {
				switch (e) {
					case 'RECHARGE':
						return {
							text: '充值',
								color: '#666666',
								bg: 'rgba(102, 102, 102, 0.1)'
						}
						case 'RECHARGE_REBETE':
							return {
								text: '充返',
									color: '#9F43CC',
									bg: 'rgba(159, 67, 204, 0.1)'
							}
							case 'CONSUME_REBATE':
								return {
									text: '消返',
										color: '#9F43CC',
										bg: 'rgba(159, 67, 204, 0.1)'
								}
								case 'DISPATCH':
									return {
										text: '调拨',
											color: '#2866FF',
											bg: 'rgba(40, 102, 255, 0.1)'
									}
									case 'CALLBACK':
										return {
											text: '回拨',
												color: '#FF6700',
												bg: 'rgba(255, 103, 0, 0.1)'
										}
										case 'TURN':
											return {
												text: '圈回',
													color: '#EC4545',
													bg: 'rgba(236, 69, 69, 0.1)'
											}
											case 'CALIBRATION_BALANCE':
												return {
													text: '结算校准',
														color: '#2866FF',
														bg: 'rgba(40, 102, 255, 0.1)'
												}
												default:
													return {
														text: '---',
															color: '#666666',
															bg: 'rgba(102, 102, 102, 0.1)'
													}
				}
			},
			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) {
				// console.log(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'
					case 5:
						return '#E8CD3026'
					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'
					case 5:
						return '#E8CD30'
					default:
						return ''
				}
			},
			scrolltolower() {
				this.$emit('scrolltolower')
			}
		}
	}
</script>

<style scoped>
	.genres {
		/* width: 88rpx; */
		height: 40rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 0 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: 12rpx;
	}

	.listCard_header_Type {
		background: rgba(232, 205, 48, 0.15);
		border-radius: 40rpx;
		color: #E8CD30;
		padding: 0 25rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		/* Width:
			240rpx; */
		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;
		width: 670rpx;
	}
</style>