commit 快捷支付

pages.json

@@ -281,7 +281,7 @@
 					"style": {
 						"navigationBarTitleText": "采美豆明细",
 						"enablePullDownRefresh": true,
-						"navigationStyle": "custom"
+						"navigationStyle": "custom" 
 					}
 				},
 				{
@@ -510,6 +510,30 @@
 						"navigationBarTitleText": "专享价商品",
 						"enablePullDownRefresh": true
 					}
+				},
+				{
+					"path": "pay/card-list",
+					"style": {
+						"navigationBarTitleText": "银行卡"
+					}
+				},
+				{
+					"path": "pay/card-sus-list",
+					"style": {
+						"navigationBarTitleText": "支持银行"
+					}
+				},
+				{
+					"path": "pay/card-add",
+					"style": {
+						"navigationBarTitleText": "添加银行卡"
+					}
+				},
+				{
+					"path": "pay/card-comfirm",
+					"style": {
+						"navigationBarTitleText": "确认信息"
+					}
 				}
 				
 			]

pages/tabBar/user/user.vue

@@ -91,39 +91,43 @@
 					</view>
 					<view class="main-account">
 						<view class="main-cell">
-							<view class="main-account-le">
-								<view class="main-account-icon"> <text class="iconfont icon-zichan"></text> </view>
-								<view class="main-account-text">我的资产</view>
+							<view
+								class="main-account-ri-view account"
+								@click="navigator('/pages/user/account/account')"
+							>
+								<view class="main-account-icon" v-if="hasLogin">{{ userMoney }}</view>
+								<view class="main-account-icon none" v-else>-</view>
+								<view class="main-account-text">账户余额</view>
 							</view>
-							<view class="main-account-ri">
-								<view
-									class="main-account-ri-view account"
-									@click="navigator('/pages/user/account/account')"
-								>
-									<view class="main-account-icon" v-if="hasLogin">{{ userMoney }}</view>
-									<view class="main-account-icon none" v-else>-</view>
-									<view class="main-account-text">账户余额</view>
-								</view>
-								<view
-									class="main-account-ri-view beans"
-									@click="navigator('/pages/user/account/account-bean')"
-								>
-									<view class="main-account-icon" v-if="hasLogin">{{
-										userBeans ? userBeans : 0
-									}}</view>
-									<view class="main-account-icon none" v-else>-</view>
-									<view class="main-account-text">采美豆</view>
-								</view>
-								<view
-									class="main-account-ri-view coupon"
-									@click="navigator('/pages/user/coupon/coupon')"
-								>
-									<view class="main-account-icon" v-if="hasLogin">{{
-										couponNum ? couponNum : 0
-									}}</view>
-									<view class="main-account-icon none" v-else>-</view>
-									<view class="main-account-text">优惠券</view>
-								</view>
+							<view
+								class="main-account-ri-view beans"
+								@click="navigator('/pages/user/account/account-bean')"
+							>
+								<view class="main-account-icon" v-if="hasLogin">{{
+									userBeans ? userBeans : 0
+								}}</view>
+								<view class="main-account-icon none" v-else>-</view>
+								<view class="main-account-text">采美豆</view>
+							</view>
+							<view
+								class="main-account-ri-view coupon"
+								@click="navigator('/pages/user/coupon/coupon')"
+							>
+								<view class="main-account-icon" v-if="hasLogin">{{
+									couponNum ? couponNum : 0
+								}}</view>
+								<view class="main-account-icon none" v-else>-</view>
+								<view class="main-account-text">优惠券</view>
+							</view>
+							<view
+								class="main-account-ri-view coupon"
+								@click="navigator('/pages/user/coupon/coupon')"
+							>
+								<view class="main-account-icon" v-if="hasLogin">{{
+									couponNum ? couponNum : 0
+								}}</view>
+								<view class="main-account-icon none" v-else>-</view>
+								<view class="main-account-text">银行卡</view>
 							</view>
 						</view>
 					</view>
@@ -960,56 +964,10 @@ page {
 			border-radius: 20rpx;
 			box-sizing: border-box;
 			padding: 24rpx 0;
-		}
-		.main-account-le {
-			width: 165rpx;
-			height: 100%;
-			position: relative;
-			float: left;
-			&::before {
-				content: '';
-				width: 2rpx;
-				height: 64rpx;
-				background-color: #c4c4c4;
-				position: absolute;
-				right: 0;
-				top: 30rpx;
-			}
-			.main-account-icon {
-				width: 100%;
-				height: 74rpx;
-				line-height: 74rpx;
-				text-align: center;
-				.icon-zichan {
-					font-size: 50rpx;
-					color: #f94b4b;
-				}
-			}
-			.main-account-text {
-				width: 100%;
-				height: 44rpx;
-				line-height: 44rpx;
-				font-size: $font-size-28;
-				text-align: center;
-				color: #333333;
-			}
-		}
-		.main-account-ri {
-			width: 537rpx;
-			height: 100%;
-			float: right;
 			.main-account-ri-view {
 				height: 100%;
+				width: 25%;
 				float: left;
-				&.account {
-					width: 40%;
-				}
-				&.beans {
-					width: 32%;
-				}
-				&.coupon {
-					width: 28%;
-				}
 				.main-account-icon {
 					width: 100%;
 					height: 74rpx;

pages/user/pay/card-add.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="container card clearfix">
+		<view class="card-title">输入卡号添加</view>
+		<view class="card-mains">
+			<view class="card-form">
+				<input
+					class="card-input"
+					v-model="showCardNumber"
+					@input="handleInput"
+					type="number"
+					:maxlength="maxLen"
+					placeholder="请输入本人的银行卡号"
+				/>
+				<view class="card-clear" v-if="!disabled" @click="handleClearInput"
+					><text class="iconfont icon-shanchu1"></text
+				></view>
+			</view>
+		</view>
+		<view class="card-mains-text">查看支持银行 ></view>
+		<view class="card-mains-btn">
+			<button class="add-btn" :disabled="disabled" :class="[disabled ? 'disabled' : '']" @click="handleAddCard">
+				提交卡号
+			</button>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			params: {
+				clubId: 0,
+				cardNumber: ''
+			},
+			showCardNumber: '',
+			maxLen:30,
+			subType:1 // 1直接绑卡  2// 
+			
+		}
+	},
+	onLoad() {
+		// this.GetAccountInitData()
+	},
+	filters: {},
+	computed: {
+		disabled: function() {
+			if (this.params.cardNumber.length > 12) {
+				return false
+			} else {
+				return true
+			}
+		}
+	},
+	methods: {
+		handleAddCard() {
+			//提交卡号
+		},
+		handleClearInput() {
+			//清空银行卡
+			this.params.cardNumber = this.showCardNumber = ''
+		},
+		handleInput(e) {
+			this.params.cardNumber = e.detail.value
+			this.showCardNumber = this.formatAccNo(e.detail.value)
+		},
+		handleGoSusList(){
+			// 跳转支持银行
+			this.$api.navigateTo(`/pages/user/pay/card-sus-list`)
+		},
+		formatAccNo(value) {
+			const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
+			const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
+			const inputLen = this.getOriginValue().length
+			if (inputLen > this.maxLen) {
+				// 如果输入的字符大于最大输入长度则禁止继续输入
+				// this.inputRef.inputRef.value = this.state.recharge_phone
+				return
+			}
+
+			// const end = () => {
+			// 	setTimeout(() => {
+			// 		this.end()
+			// 	}, 10)
+			// }
+
+			// if (inputLen >= this.minLen) {
+			// 	this.setState({ isValidNo: true, recharge_phone: formatValue }, end)
+			// } else {
+			// 	this.setState({ isValidNo: false, recharge_phone: formatValue, activeItem: -1 }, end)
+			// }
+			return formatValue
+		},
+		getOriginValue() {
+			//获取input的原始值
+			return this.showCardNumber.split(' ').join('');
+		}
+	},
+	onShow() {
+		// this.beansList = []
+	}
+}
+</script>
+
+<style lang="scss">
+page,
+.container {
+	background: #ffffff;
+	height: 100%;
+}
+.card-title {
+	width: 100%;
+	height: 100rpx;
+	line-height: 100rpx;
+	font-size: $font-size-32;
+	color: #333;
+	font-weight: bold;
+	box-sizing: border-box;
+	padding: 0 32rpx;
+}
+.card-mains {
+	width: 100%;
+	height: 100rpx;
+	box-sizing: border-box;
+	padding: 0 50rpx 0 32rpx;
+	.card-form {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		border: 1px solid #cccccc;
+		padding-right: 96rpx;
+		border-radius: 16rpx;
+		position: relative;
+		.card-input {
+			width: 568rpx;
+			height: 100%;
+			line-height: 96rpx;
+			padding-left: 20rpx;
+			box-sizing: border-box;
+			font-size: $font-size-30;
+			color: #333;
+		}
+		.card-clear {
+			width: 96rpx;
+			height: 96rpx;
+			position: absolute;
+			right: 0;
+			top: 0;
+			line-height: 96rpx;
+			text-align: center;
+			.icon-shanchu1 {
+				font-size: $font-size-32;
+				color: #d5d5d5;
+			}
+		}
+	}
+}
+.card-mains-text {
+	width: 100%;
+	line-height: 88rpx;
+	box-sizing: border-box;
+	padding: 0 56rpx;
+	font-size: $font-size-28;
+	color: #1890f9;
+}
+.card-mains-btn {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 75rpx;
+	margin-top: 180rpx;
+	.add-btn {
+		width: 100%;
+		height: 90rpx;
+		font-size: $font-size-30;
+		line-height: 90rpx;
+		color: #ffffff;
+		text-align: center;
+		background: $btn-confirm;
+		border-radius: 45rpx;
+		border-radius: 44rpx;
+		margin-top: 80rpx;
+		&.disabled {
+			background: #e1e1e1;
+			border-radius: 44rpx;
+		}
+	}
+}
+</style>

pages/user/pay/card-comfirm.vue

@@ -0,0 +1,238 @@
+<template>
+	<view class="container card clearfix">
+		<view class="card-content">
+			<view class="card-row">
+				<view class="form-label">卡号</view>
+				<view class="form-input">{{ params.cardNumber | formatAccNo }}</view>
+			</view>
+			<view class="card-row picker">
+				<view class="form-label">卡类型</view>
+				<view class="form-input">
+					<picker @change="bindPicker($event)" :value="index" :range="stateActions" range-key="name">
+						<input
+							class="form-input"
+							:class="cardTytpeText === '请选择卡类型' ? 'none' : ''"
+							type="text"
+							disabled="false"
+							v-model="cardTytpeText"
+							value=""
+							placeholder="请选择"
+						/>
+					</picker>
+				</view>
+				<view class="iconfont icon-xiayibu"></view>
+			</view>
+			<view class="card-row">
+				<view class="form-label">姓名</view>
+				<input
+					class="form-input"
+					type="number"
+					name="input"
+					v-model="params.name"
+					placeholder="请输入您的姓名"
+					maxlength="10"
+				/>
+			</view>
+			<view class="card-row">
+				<view class="form-label">身份证</view>
+				<input
+					class="form-input"
+					type="number"
+					name="input"
+					v-model="params.number"
+					placeholder="请输入您的身份证号"
+					maxlength="18"
+				/>
+			</view>
+			<view class="card-row">
+				<view class="form-label">预留手机号</view>
+				<input
+					class="form-input"
+					type="number"
+					name="input"
+					v-model="params.bindMobile"
+					placeholder="请输入您的银行预留手机号"
+					maxlength="11"
+				/>
+			</view>
+			<view class="card-row" v-if="params.type === 2">
+				<view class="form-label">有效期</view>
+				<input
+					class="form-input"
+					type="number"
+					name="input"
+					v-model="params.time"
+					placeholder="请选择贷记卡有效期"
+					maxlength="11"
+				/>
+			</view>
+			<view class="card-row" v-if="params.type === 2">
+				<view class="form-label">CVV2</view>
+				<input
+					class="form-input"
+					type="number"
+					name="input"
+					v-model="params.cvv"
+					placeholder="请输入贷记卡背面的安全码"
+					maxlength="3"
+				/>
+			</view>
+			<view class="card-mains-btn">
+				<button class="add-btn" :disabled="disabled" :class="[disabled ? 'disabled' : '']" @click="handleAddCard">
+					{{ subButtonText }}
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			params: {
+				type:1,
+				name:'',
+				number:'',
+				bindMobile:'',
+				clubId: 0,
+				time:'',
+				cvv:'',
+				cardNumber: '6228481456743154778'
+			},
+			showCardNumber: '',
+			maxLen: 30,
+			subType: 1 ,// 1直接绑卡  2//
+			cardTytpeText:'请选择卡类型',
+			subButtonText:'确认绑卡',
+			stateActions: [
+				{ name: '借记卡', value: 1 },
+				{ name: '贷记卡', value: 2 },
+			]
+		}
+	},
+	onLoad() {
+		// this.GetAccountInitData()
+	},
+	filters: {
+		formatAccNo(value) {
+			const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
+			const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
+			return formatValue
+		}
+	},
+	computed: {
+		disabled() {
+			if (this.params.cardNumber.length > 12) {
+				return false
+			} else {
+				return true
+			}
+		}
+	},
+	methods: {
+		handleAddCard() {
+			//提交卡号
+		},
+		handleClearInput() {
+			//清空银行卡
+			this.params.cardNumber = this.showCardNumber = ''
+		},
+		handleInput(e) {
+			this.params.cardNumber = e.detail.value
+			this.showCardNumber = this.formatAccNo(e.detail.value)
+		},
+		handleGoSusList() {
+			// 跳转支持银行
+			this.$api.navigateTo(`/pages/user/pay/card-sus-list`)
+		},
+		bindPicker(e){//选择联系人身份
+			this.cardTytpeText = this.stateActions[e.target.value].name
+			this.params.type= this.stateActions[e.target.value].value
+		},
+		getOriginValue() {
+			//获取input的原始值
+			return this.showCardNumber.split(' ').join('')
+		}
+	},
+	onShow() {
+		// this.beansList = []
+	}
+}
+</script>
+
+<style lang="scss">
+page,
+.container {
+	background: #ffffff;
+	height: 100%;
+}
+.card-content{
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 32rpx;
+	.card-row{
+		width: 100%;
+		height: 100rpx;
+		box-sizing: border-box;
+		border-bottom: 1px solid #e1e1e1;
+		position: relative;
+		float: left;
+		&.picker{
+			padding-right: 60rpx;
+		}
+		.form-label {
+			float: left;
+			height: 100%;
+			line-height: 98rpx;
+			font-size: $font-size-28;
+			text-align: left;
+			color: #666666;
+		}
+		.form-input {
+			min-width: 500rpx;
+			height: 98rpx;
+			line-height: 98rpx;
+			font-size: $font-size-28;
+			text-align: right;
+			color: #333333;
+			float: right;
+		}
+		.icon-xiayibu {
+			width: 60rpx;
+			height: 100rpx;
+			position: absolute;
+			right: 0;
+			top: 0;
+			line-height: 100rpx;
+			text-align: center;
+			color: #b2b2b2;
+		}
+	}
+	.card-mains-btn {
+		width: 100%;
+		height: auto;
+		box-sizing: border-box;
+		padding: 0 43rpx;
+		margin-top: 180rpx;
+		float: left;
+		.add-btn {
+			width: 100%;
+			height: 90rpx;
+			font-size: $font-size-30;
+			line-height: 90rpx;
+			color: #ffffff;
+			text-align: center;
+			background: $btn-confirm;
+			border-radius: 45rpx;
+			border-radius: 44rpx;
+			margin-top: 80rpx;
+			&.disabled {
+				background: #e1e1e1;
+				border-radius: 44rpx;
+			}
+		}
+	}
+}
+
+</style>

pages/user/pay/card-list.vue

@@ -0,0 +1,355 @@
+<template>
+	<view class="container card clearfix">
+		<view class="card-title">我的银行卡 <text>3张</text></view>
+		<view class="card-content">
+			<view class="list" v-for="(card, index) in list" :key="index" :style="{ background: handleStyle(card.B2B) }">
+				<view class="list-logo"> 
+					<view class="logo"><image :src="handleLogo(card.B2B)"></image></view>
+				</view> 
+				<view class="list-main">  
+					<view class="list-main-name">{{ card.name }}</view>
+					<view class="list-main-tag"> <text class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </text> </view>
+					<view class="list-main-code">
+						{{ card.code }}
+					</view>
+				</view> 
+				<view class="list-btn" @click="handleUnbind">解绑</view>
+			</view>
+		</view>
+		<!-- 取消收藏操作 -->
+		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
+			<view class="tui-popup-box clearfix">
+				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
+					<view class="tui-flex-1">
+						<view class="tui-button" @click="handleAddCard">添加银行卡</view>
+					</view>
+				</view>
+			</view>
+		</tui-bottom-popup>
+		<!-- 弹窗提示 -->
+		<tui-modal
+			:show="modal"
+			@click="handleClick"
+			@cancel="hideMobel"
+			:content="contentModalText"
+			:button="modalButton"
+			color="#333"
+			:size="32"
+			shape="circle"
+			:maskClosable="false"
+		>
+		</tui-modal>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			StaticUrl: this.$Static,
+			isIphoneX:this.$store.state.isIphoneX,
+			listQuery: {
+				userId: '', // 用户ID
+				pageNum: 1, // 页数
+				pageSize: 10, // 加载条数
+				type: 0 // 查询余额类型
+			},
+			isEmpty: false,
+			loadding: false,
+			pullUpOn: true,
+			hasNextPage: false,
+			pullFlag: true,
+			nomoreText: '上拉显示更多',
+			popupShow:true,
+			contentModalText: '', //操作文字提示语句
+			modal: false,
+			modalButton: [
+				{
+					text: '保持绑定',
+					type: 'gray',
+					plain: true //是否空心
+				},
+				{
+					text: '继续解绑',
+					customStyle: {
+						color: '#fff',
+						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
+					},
+					plain: false
+				}
+			],
+			list: [
+				{
+					type: 1,
+					flag: 0,
+					B2B: 'CCB',
+					name: '建设银行',
+					code:'45454545454521212'
+				},
+				{
+					type: 1,
+					flag: 0,
+					B2B: 'ICBC',
+					name: '工商银行',
+					code:'45454545454521212'
+				},
+				{
+					type: 0,
+					flag: 0,
+					B2B: 'ABC',
+					name: '农业银行',
+					code:'45454545454521212'
+				}
+			]
+		}
+	},
+	onLoad() {
+		// this.GetAccountInitData()
+	},
+	filters: {},
+	methods: {
+		async GetAccountInitData(index) {
+			//获取余额明细数据列表
+			const user = await this.$api.getStorage()
+			this.listQuery.userId = user.userId ? user.userId : 0
+			this.UserService.GetUserClubBeansList(this.listQuery)
+				.then(response => {
+					let data = response.data
+					let list = data.pageInfo.list
+					this.userBeans = data.userBeans
+					this.hasNextPage = data.pageInfo.hasNextPage
+					if (list && list.length > 0) {
+						this.isEmpty = false
+						this.beansList = [...list]
+					} else {
+						this.isEmpty = true
+					}
+					if (this.hasNextPage) {
+						this.pullUpOn = false
+						this.nomoreText = '上拉显示更多'
+					} else {
+						if (this.beansList.length < 10) {
+							this.pullUpOn = true
+						} else {
+							this.pullUpOn = false
+							this.nomoreText = '已至底部'
+						}
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		GetOnReachBottomData(index) {
+			//上拉加载
+			this.listQuery.pageNum += 1
+			this.UserService.GetUserClubBeansList(this.listQuery)
+				.then(response => {
+					let data = response.data
+					let list = data.pageInfo.list
+					this.userBeans = data.userBeans
+					this.hasNextPage = data.pageInfo.hasNextPage
+					this.beansList = this.beansList.concat(list)
+					this.pullFlag = false // 防上拉暴滑
+					setTimeout(() => {
+						this.pullFlag = true
+					}, 500)
+					if (this.hasNextPage) {
+						this.pullUpOn = false
+						this.nomoreText = '上拉显示更多'
+					} else {
+						this.loadding = false
+						this.pullUpOn = false
+						this.nomoreText = '已至底部'
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		handleAddCard(){
+			// 跳转添加银行卡页面
+			this.$api.navigateTo(`/pages/user/pay/card-add`)
+		},
+		handleUnbind(){
+			//解绑
+			this.modal = true
+			this.contentModalText = '解绑后此卡需要重新绑定才能继续使用'
+		},
+		async handleClick(e) {
+			//确认删除
+			if (e.index == 1) {
+				this.handleDeleteUserLike()
+			}
+			this.modal = false
+		},
+		hideMobel(){
+			// 取消解绑
+			this.modal = false
+		},
+		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]
+		},
+		handleStyle(type) {
+			const styleMap = {
+				'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
+				'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
+				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
+			}
+			return styleMap[type]
+		},
+	},
+	onReachBottom() {
+		if (this.hasNextPage) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.GetOnReachBottomData()
+		}
+	},
+	onPullDownRefresh() {
+		//下拉刷新
+		this.listQuery.pageNum = 1
+		this.GetAccountInitData()
+		uni.stopPullDownRefresh()
+	},
+	onShow() {
+		// this.beansList = []
+	}
+}
+</script>
+
+<style lang="scss">
+page,
+.container {
+	background: #ffffff;
+	height: 100%;
+}
+.card-title {
+	width: 100%;
+	height: 100rpx;
+	line-height: 100rpx;
+	font-size: $font-size-32;
+	color: #333;
+	font-weight: bold;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+	text {
+		font-size: $font-size-28;
+		color: #999;
+		font-weight: normal;
+		margin-left: 10rpx;
+	}
+}
+.card-content {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 40rpx;
+	.list {
+		width: 100%;
+		height: 240rpx;
+		border-radius: 16rpx;
+		box-sizing: border-box;
+		padding: 32rpx;
+		position: relative;
+		margin-bottom: 32rpx;
+		&:last-child{
+			margin-bottom: 0;
+		}
+		.list-logo{
+			width: 80rpx;
+			height: 100%;
+			float: left;
+			.logo{
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 50%;
+				padding: 10rpx;
+				box-sizing: border-box;
+				background-color: #ffffff;
+				float: left;
+				image{
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					display: block;
+				}
+			}
+		}
+		.list-main{
+			width: 452rpx;
+			float: left;
+			margin-left: 32rpx;
+			.list-main-name{
+				width: 100%;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-size: $font-size-34;
+				color: #ffffff;
+			}
+			.list-main-tag{
+				width: 100%;
+				height: 37rpx;
+				margin: 8rpx 0 36rpx 0;
+				.tag{
+					display: inline-block;
+					line-height: 37rpx;
+					padding: 0 12rpx;
+					border-radius: 19rpx;
+					font-size: $font-size-24;
+					color: #ffffff;
+					background: rgba(255, 255, 255, 0.2);
+					float: left;
+				}
+			}
+			.list-main-code{
+				width: 100%;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-size: $font-size-34;
+				color: #ffffff;
+			}
+		}
+		.list-btn{
+			font-size: $font-size-24;
+			color: #ffffff;
+			height: 30rpx;
+			line-height: 30rpx;
+			position: absolute;
+			right: 32rpx;
+			top: 32rpx;
+		}
+	}
+}
+.tui-popup-box {
+	position: relative;
+	box-sizing: border-box;
+	min-height: 100rpx;
+	padding: 6rpx 24rpx;
+	.tui-popup-content {
+		padding-top: 30rpx;
+	}
+}
+.tui-popup-btn {
+	width: 100%;
+	height: auto;
+	float: left;
+	box-sizing: border-box;
+	margin-top: 30rpx;
+	.tui-button {
+		width: 600rpx;
+		height: 88rpx;
+		background: $btn-confirm;
+		line-height: 88rpx;
+		text-align: center;
+		color: #ffffff;
+		font-size: $font-size-28;
+		border-radius: 44rpx;
+		margin: 0 auto;
+	}
+}
+</style>

pages/user/pay/card-sus-list.vue

@@ -0,0 +1,305 @@
+<template>
+	<view class="container card clearfix">
+		<view class="card-title">
+			<view class="card-tabs" @click="handleCurrent(0)">
+				<view class="card-tabs-text" :class="{ current : current === 0 }">借记卡</view>
+			</view>
+			<view class="card-tabs" @click="handleCurrent(1)">
+				<view class="card-tabs-text" :class="{ current : current === 1 }">贷记卡</view>
+			</view>
+		</view>
+		<view class="card-content">
+			<view class="list" v-for="(item, index) in list" :key="index">
+				<view class="list-pin">{{ item.pin }}</view>
+				<view class="list-card">
+					<view class="list-card-item" v-for="(card, index) in item.data" :key="index">
+						<view class="logo"><image :src="handleLogo(card.B2B)"></image></view>
+						<view class="name">
+							<text>{{ card.name }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			StaticUrl: this.$Static,
+			isIphoneX:this.$store.state.isIphoneX,
+			current:0,
+			listQuery: {
+				userId: '', // 用户ID
+				pageNum: 1, // 页数
+				pageSize: 10, // 加载条数
+				type: 0 // 查询余额类型
+			},
+			isEmpty: false,
+			loadding: false,
+			pullUpOn: true,
+			hasNextPage: false,
+			pullFlag: true,
+			nomoreText: '上拉显示更多',
+			list: [
+				{
+					pin:'G',
+					data:[
+						{
+							type: 1,
+							flag: 0,
+							B2B: 'ICBC',
+							name: '工商银行',
+						}
+					]
+				},
+				{
+					pin:'J',
+					data:[
+						{
+							type: 1,
+							flag: 0,
+							B2B: 'CCB',
+							name: '建设银行',
+						},
+						{
+							type: 1,
+							flag: 0,
+							B2B: 'CCB',
+							name: '交通银行',
+						},
+					]
+				},
+				{
+					pin:'N',
+					data:[
+						{
+							type: 1,
+							flag: 0,
+							B2B: 'ABC',
+							name: '农业银行',
+						}
+					]
+				}
+			]
+		}
+	},
+	onLoad() {
+		// this.GetAccountInitData()
+	},
+	filters: {},
+	methods: {
+		async GetAccountInitData(index) {
+			//获取余额明细数据列表
+			const user = await this.$api.getStorage()
+			this.listQuery.userId = user.userId ? user.userId : 0
+			this.UserService.GetUserClubBeansList(this.listQuery)
+				.then(response => {
+					let data = response.data
+					let list = data.pageInfo.list
+					this.userBeans = data.userBeans
+					this.hasNextPage = data.pageInfo.hasNextPage
+					if (list && list.length > 0) {
+						this.isEmpty = false
+						this.beansList = [...list]
+					} else {
+						this.isEmpty = true
+					}
+					if (this.hasNextPage) {
+						this.pullUpOn = false
+						this.nomoreText = '上拉显示更多'
+					} else {
+						if (this.beansList.length < 10) {
+							this.pullUpOn = true
+						} else {
+							this.pullUpOn = false
+							this.nomoreText = '已至底部'
+						}
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		GetOnReachBottomData(index) {
+			//上拉加载
+			this.listQuery.pageNum += 1
+			this.UserService.GetUserClubBeansList(this.listQuery)
+				.then(response => {
+					let data = response.data
+					let list = data.pageInfo.list
+					this.userBeans = data.userBeans
+					this.hasNextPage = data.pageInfo.hasNextPage
+					this.beansList = this.beansList.concat(list)
+					this.pullFlag = false // 防上拉暴滑
+					setTimeout(() => {
+						this.pullFlag = true
+					}, 500)
+					if (this.hasNextPage) {
+						this.pullUpOn = false
+						this.nomoreText = '上拉显示更多'
+					} else {
+						this.loadding = false
+						this.pullUpOn = false
+						this.nomoreText = '已至底部'
+					}
+				})
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		handleCurrent(index){
+			// tabs 切换
+			this.current = 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]
+		},
+		handleStyle(type) {
+			const styleMap = {
+				'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
+				'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
+				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
+			}
+			return styleMap[type]
+		},
+	},
+	onReachBottom() {
+		if (this.hasNextPage) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.GetOnReachBottomData()
+		}
+	},
+	onPullDownRefresh() {
+		//下拉刷新
+		this.listQuery.pageNum = 1
+		this.GetAccountInitData()
+		uni.stopPullDownRefresh()
+	},
+	onShow() {
+		// this.beansList = []
+	}
+}
+</script>
+
+<style lang="scss">
+page,
+.container {
+	background: #ffffff;
+	height: 100%;
+}
+.card-title {
+	width: 100%;
+	height: 100rpx;
+	.card-tabs{
+		width: 50%;
+		height: 100%;
+		float: left;
+		.card-tabs-text{
+			width: 100rpx;
+			line-height: 96rpx;
+			margin: 0 auto;
+			font-size: $font-size-32;
+			color: #333;
+			font-weight: bold;
+			box-sizing: border-box;
+			border-bottom: 2px solid #ffffff;
+			&.current{
+				color: #FF5B00;
+				border-color: #FF5B00;
+			}
+		}
+	}
+}
+.card-content {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	.list {
+		width: 100%;
+		height: auto;
+		box-sizing: border-box;
+		position: relative;
+		.list-pin{
+			width: 100%;
+			line-height: 48rpx;
+			box-sizing: border-box;
+			padding-left: 47rpx;
+			background-color: #F7F7F7;
+			font-size: 28rpx;
+			color: #333;
+			float: left;
+		}
+		.list-card{
+			width: 100%;
+			height: auto;
+			box-sizing: border-box;
+			position: relative;
+			padding: 0 32rpx;
+			float: left;
+			.list-card-item{
+				width: 100%;
+				height: 100rpx;
+				box-sizing: border-box;
+				padding: 26rpx 0;
+				border-bottom: 1px solid #E1E1E1;
+				&:last-child{
+					border-bottom: none;
+				}
+				.logo{
+					width: 48rpx;
+					height: 48rpx;
+					margin-right: 34rpx;
+					float: left;
+					border-radius: 50%;
+					image{
+						width: 48rpx;
+						height: 48rpx;
+						border-radius: 50%;
+						display: block;
+					}
+				}
+				.name{
+					line-height: 48rpx;
+					font-size: 28rpx;
+					color: #333;
+				}
+			}
+		}
+	}
+}
+.tui-popup-box {
+	position: relative;
+	box-sizing: border-box;
+	min-height: 100rpx;
+	padding: 6rpx 24rpx;
+	.tui-popup-content {
+		padding-top: 30rpx;
+	}
+}
+.tui-popup-btn {
+	width: 100%;
+	height: auto;
+	float: left;
+	box-sizing: border-box;
+	margin-top: 30rpx;
+	.tui-button {
+		width: 600rpx;
+		height: 88rpx;
+		background: $btn-confirm;
+		line-height: 88rpx;
+		text-align: center;
+		color: #ffffff;
+		font-size: $font-size-28;
+		border-radius: 44rpx;
+		margin: 0 auto;
+	}
+}
+</style>