caimei-applets-caimei/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="handleLogo(cards.B2B)"></image></view>
								<view class="item-texts"
									><text>{{ cards.name }}</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(3)">
								<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-xiayibu"></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: 0,
			dataList: [
				{
					type: 1,
					flag: 0,
					B2B: 'CCB',
					name: '建设银行借记卡（0023）',
					code: '45454545454521212'
				},
				{
					type: 1,
					flag: 0,
					B2B: 'ICBC',
					name: '工商银行借记卡（0023）',
					code: '45454545454521212'
				},
				{
					type: 0,
					flag: 0,
					B2B: 'ABC',
					name: '农业银行借记卡（0023）',
					code: '45454545454521212'
				}
			]
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		},
		payTypeText(vaule) {
			//处理支付记录文字
			const map = {
				12: '企业网银',
				13: '微信支付',
				14: '支付宝',
				15: '微信支付',
				16: '余额抵扣',
				17: '建设银行借记卡（0053）'
			}
			return map[vaule]
		}
	},
	created() {
		// this.dataList = this.list
	},
	methods: {
		handleChoose(index,cards) {
			//选择银行卡
			this.checkedIndex = index
			this.$emit('handleChoiceaCards', cards)
			this.hidePopup()
		},
		handleAddCard(index) { 
			//跳转添加卡号
			this.$api.navigateTo(`/pages/user/pay/card-add?type=${index}`)
		},
		handleLogo(type) {
			const LogoMap = {
				'CCB':'https://img2.baidu.com/it/u=4262210206,1883697020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
				'ICBC':'https://www.weixinyunduan.com/ups/2016/01/309212/edf5a48e69afa569eb31a52fc36de450.jpg',
				'ABC':'https://userfile.yksup.com/userdata/18039/img/brand-20170315232223_e0p18k.jpg'
			}
			return LogoMap[type]
		},
		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: #ff5b00;
						}
						.icon-xiayibu {
							color: #b2b2b2;
						}
					}
				}
			}
		}
	}
}
</style>