caimei-applets-mcare/pages/user/pay/components/cm-cards-popup.vue

<template name="record">
	<view class="record-template">
		<!-- 全部银行卡 -->
		<tui-bottom-popup :radius="true" :show="show">
			<view class="tui-popup-box clearfix">
				<view class="title">
					全部银行卡
					<view class="title-close">
						<text class="iconfont icon-iconfontguanbi" @click="hidePopup"></text>
					</view>
				</view>
				<view class="tui-popup-main coupon">
					<scroll-view class="tui-popup-scroll" scroll-y="true">
						<view class="pay-card-main">
							<view
								class="pay-item-cell"
								v-for="(cards, index) in dataList"
								:key="index"
								@click="handleChoose(index, cards)"
							>
								<view class="item-icon"
									><image
										:src="
											'https://static.caimei365.com/app/img/pay/icon_' +
												cards.bankCode +
												'_@2x.png'
										"
									></image
								></view>
								<view class="item-texts"
									><text
										>{{ cards.bankName }}( {{ cards.quickPayBankNumber | bankNumeberFilter }} )</text
									></view
								>
								<view class="item-checked">
									<text
										class="iconfont"
										:class="[checkedIndex === index ? 'icon-yixuanze3' : 'icon-weixuanze']"
									></text>
								</view>
							</view>
							<view class="pay-item-cell add" @click="handleAddCard(2)">
								<view class="item-icon"><text class="iconfont icon-gerenwangyinzhifu"></text></view>
								<view class="item-texts add"><text>添加新卡支付</text></view>
								<view class="item-checked"> <text class="iconfont icon-xiangyou"></text> </view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'record',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			checkedIndex: '',
			dataList: []
		}
	},
	filters: {
		bankNumeberFilter(value) {
			return value.substring(value.length - 4, value.length)
		}
	},
	created() {
		this.initDataList(this.list)
	},
	methods: {
		initDataList(list){
			// 初始化
			this.dataList = list
			console.log('list',this.dataList)
		},
		handleChoose(index, cards) {
			//选择银行卡
			this.checkedIndex = index
			const data = {
				quickPayBankNumber:cards.quickPayBankNumber,
				quickPayMobile:cards.quickPayMobile,
				quickPayBankExpireTime:cards.quickPayBankExpireTime,
				quickPayUserName:cards.quickPayUserName,
				bankName:cards.bankName,
				bankCode:cards.bankCode,
				idCard:cards.idCard,
				cvvCode:cards.cvvCode
			}
			this.$emit('handleChoiceaCards', data)
			this.hidePopup()
		},
		handleAddCard(index) {
			//跳转添加卡号
			this.$emit('addCards', index)
		},
		hidePopup() {
			this.$parent.popupShow1 = false
		}
	}
}
</script>

<style lang="scss">
.record-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 32rpx 0 32rpx;
	.title {
		font-size: $font-size-32;
		color: $text-color;
		line-height: 68rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 68rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		position: relative;
		font-weight: bold;
		.title-close {
			width: 68rpx;
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			position: absolute;
			right: 0;
			top: 0;
			.iconfont {
				color: #b2b2b2;
				font-size: 40rpx;
			}
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 10rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.pay-card-main {
				width: 100%;
				height: auto;
				float: left;
				box-sizing: border-box;
				.pay-item-cell {
					height: 100rpx;
					box-sizing: border-box;
					padding: 26rpx 0;
					background-color: #ffffff;
					border-bottom: 1px solid #e1e1e1;
					.item-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
						float: left;
						image {
							width: 48rpx;
							height: 48rpx;
							display: block;
						}
						.iconfont {
							font-size: 48rpx;
							&.icon-gerenwangyinzhifu {
								color: #004889;
							}
						}
					}
					.item-texts {
						line-height: 48rpx;
						font-size: $font-size-28;
						color: $text-color;
						float: left;
						&.add {
							font-weight: bold;
						}
					}
					.item-checked {
						width: 48rpx;
						height: 48rpx;
						float: right;
						text-align: center;
						line-height: 48rpx;
						font-size: $font-size-40;
						color: #ffffff;
						.icon-weixuanze {
							color: #b2b2b2;
						}
						.icon-yixuanze3 {
							color: #F3B574;
						}
						.icon-xiangyou {
							color: #b2b2b2;
						}
					}
				}
			}
		}
	}
}
</style>