commit -m 快捷支付

common/config/common.js

@@ -20,6 +20,10 @@ const utils = {
         //是否为手机号
         return RegExp(/^1[1-9][0-9]{9}$/).test(value)
     },
+    isIdCard: function(value) {
+        //是否为手机号
+        return RegExp(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value)
+    },
     isFloat: function(value) {
         //金额，只允许保留两位小数
         return RegExp(/^([0-9]*[.]?[0-9])[0-9]{0,1}$/).test(value)
@@ -185,6 +189,7 @@ module.exports = {
     isMobile: utils.isMobile,
     isEmail: utils.isEmail,
     isWebsite:utils.isWebsite,
+    isIdCard:utils.isIdCard,
     isFloat: utils.isFloat,
     isNum: utils.isNum,
     isEmailCode:utils.isEmailCode,

pages/goods/components/cm-unit-price.vue

@@ -108,7 +108,7 @@
 							{{ skuProduct.promotions.name
 							}}<text v-if="hasLogin"
 								>:￥{{
-									skuProduct.promotions == null ? '0.00' : skuProduct.promotions.touchPrice | NumFormat
+									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
 								}}</text
 							>
 						</view>
@@ -130,7 +130,7 @@
 							{{ skuProduct.promotions.name
 							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
 								>:￥{{
-									skuProduct.promotions == null ? '0.00' : skuProduct.promotions.touchPrice | NumFormat
+									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
 								}}</text
 							>
 						</view>
@@ -153,7 +153,7 @@
 							{{ skuProduct.promotions.name
 							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
 								>:￥{{
-									skuProduct.promotions == null ? '0.00' : skuProduct.promotions.touchPrice | NumFormat
+									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
 								}}</text
 							>
 						</view>
@@ -178,7 +178,7 @@
 							{{ skuProduct.promotions.name
 							}}<text v-if="hasLogin && skuProduct.priceFlag != 1"
 								>:￥{{
-									skuProduct.promotions == null ? '0.00' : skuProduct.promotions.touchPrice | NumFormat
+									skuProduct.promotions == null ? '0.00' : skuProduct.price | NumFormat
 								}}</text
 							>
 						</view>

pages/tabBar/user/user.vue

@@ -121,10 +121,10 @@
 							</view>
 							<view
 								class="main-account-ri-view coupon"
-								@click="navigator('/pages/user/coupon/coupon')"
+								@click="navigator('/pages/user/pay/card-list')"
 							>
 								<view class="main-account-icon" v-if="hasLogin">{{
-									couponNum ? couponNum : 0
+									bankNum ? bankNum : 0
 								}}</view>
 								<view class="main-account-icon none" v-else>-</view>
 								<view class="main-account-text">银行卡</view>
@@ -415,6 +415,7 @@ export default {
 			userBeans: 0,
 			userMoney: '0.00',
 			couponNum: 0,
+			bankNum:0,
 			contactNumber: '',
 			openid: '',
 			aboutHtml: '',
@@ -484,6 +485,7 @@ export default {
 					this.bindMobile = data.user.bindMobile // 登录手机号
 					this.clubStatus = data.user.clubStatus // 机构审核状态
 					this.couponNum = data.couponNum // 优惠券数量
+					this.bankNum = data.bankNum // 银行卡数量
 					this.isModify = data.isModify // 是否显示采美豆
 					this.contactNumber = data.contactNumber // 联系电话
 					let clubInfo = { name: this.name, image: this.headpic, userId: data.user.userId }

pages/user/member/member-pay.vue

@@ -10,44 +10,87 @@
 					<view class="pay-mouth">套餐：{{ handelPayMsg.duration }}个月</view>
 				</view>
 				<view class="pay-check">
-					<view class="check-title"><view class="text">选择支付方式</view></view>
 					<view class="pay-checked">
-						<view class="pay-item" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
-							<view class="item-l">
+						<view class="pay-card-main" v-if="cardsList.length > 0">
+							<view class="pay-item-cell" @click="tabClick(3)">
+								<view class="item-icon">
+									<image
+										:src="
+											'https://static.caimei365.com/app/img/pay/icon_' +
+												defaultCards.bankCode +
+												'_@2x.png'
+										"
+									></image>
+								</view>
+								<view class="item-texts"
+									>{{ defaultCards.bankName }}(
+									{{ defaultCards.quickPayBankNumber | bankNumeberFilter }} )</view
+								>
+								<view class="item-checked">
+									<text
+										class="iconfont"
+										:class="[tabCurrentIndex === 3 ? 'icon-yixuanze3' : 'icon-weixuanze']"
+									></text>
+								</view>
+							</view>
+							<view class="pay-item-cell add" @click="hanldeShowPopup(1)">
+								<view class="item-texts add"><text>查看全部银行卡 / 添加新卡支付</text></view>
+								<view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
+							</view>
+						</view>
+						<view class="pay-item" @click="handleAddCard(2)" v-else>
+							<view class="pay-item-cell">
+								<view class="item-texts add"><text>添加银行卡快捷付款</text></view>
+								<view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
+							</view>
+						</view>
+						<view class="pay-item" @click="tabClick(0)">
+							<view class="pay-item-cell">
 								<view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
 								<view class="item-texts"><text>微信支付</text></view>
+								<view class="item-checked">
+									<text
+										class="iconfont"
+										:class="[tabCurrentIndex === 0 ? 'icon-yixuanze3' : 'icon-weixuanze']"
+									></text>
+								</view>
 							</view>
-							<view class="item-r"> <text class="iconfont icon-duigou"></text> </view>
 						</view>
-						<view class="pay-item" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
-							<view class="item-l">
+						<view class="pay-item" @click="tabClick(1)">
+							<view class="pay-item-cell">
 								<view class="item-icon"><text class="iconfont icon-qiyewangyinzhifu"></text></view>
-								<view class="item-text">
-									<view class="txt-p">企业网银支付</view> <view class="txt-t">需要在电脑端汇款</view>
+								<view class="item-texts"><text>企业网银支付</text></view>
+								<view class="item-checked">
+									<text
+										class="iconfont"
+										:class="[tabCurrentIndex === 1 ? 'icon-yixuanze3' : 'icon-weixuanze']"
+									></text>
 								</view>
 							</view>
-							<view class="item-r"> <text class="iconfont icon-duigou"></text> </view>
 						</view>
-						<view class="pay-item" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
-							<view class="item-l">
+						<view class="pay-item" @click="tabClick(2)">
+							<view class="pay-item-cell">
 								<view class="item-icon"><text class="iconfont icon-gerenwangyinzhifu"></text></view>
-								<view class="item-text">
-									<view class="txt-p">个人网银支付</view> <view class="txt-t">需要在电脑端汇款</view>
+								<view class="item-texts"><text>个人网银支付</text></view>
+								<view class="item-checked">
+									<text
+										class="iconfont"
+										:class="[tabCurrentIndex === 2 ? 'icon-yixuanze3' : 'icon-weixuanze']"
+									></text>
 								</view>
 							</view>
-							<view class="item-r"> <text class="iconfont icon-duigou"></text> </view>
 						</view>
 					</view>
 				</view>
 			</view>
-			<view class="pay-button">
-				<view class="btn" @click.stop="payConfirmClick" :style="{ background: btnColor }">{{
-					buttonText
-				}}</view>
+			<view class="pay-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
+				<view class="btn" @click.stop="buttonSubMit" :style="{ background: btnColor }">{{ buttonText }}</view>
 			</view>
 		</view>
+		<!-- 选择快捷支付银行 -->
+		<cm-cards :show="popupShow1" :list="cardsList" @handleChoiceaCards="handleChoiceaCards" v-if="popupShow1"></cm-cards>
+		<!-- 网银链接说明弹窗 -->
 		<view class="alert spec" :class="specClass" v-if="isShowTip">
-			<!-- 选择支付弹窗说明 -->
 			<view class="payun-alert" @tap="hideTips">
 				<view class="content">
 					<view class="title">
@@ -70,25 +113,39 @@
 import authorize from '@/common/config/authorize.js'
 const thorui = require('@/components/clipboard/clipboard.thorui.js')
 import payMixins from '@/mixins/payMixins.js'
+import cardMixins from '../pay/mixins/cardMixins.js'
+import cmCards from '../pay/components/cm-cards-popup'
 export default {
-	mixins: [payMixins],
+	mixins: [payMixins, cardMixins],
+	components: {
+		cmCards
+	},
 	data() {
 		return {
 			isIphoneX: this.$store.state.isIphoneX,
 			CustomBar: this.CustomBar, // 顶部导航栏高度
-			tabCurrentIndex: 0,
 			isShowTip: false,
-			buttonText: '使用微信支付',
-			btnColor: '#09BB07',
 			handelPayMsg: {},
 			payType: 0,
 			isPaySwitch: true,
 			payParams: {
-				payType:'XCX',
+				payType: 'XCX',
 				code: 0,
 				vipRecordId: 0
 			},
-			payHttpUrl: 'https://www.caimei365.com'
+			payHttpUrl: 'https://www.caimei365.com',
+			popupShow1: false,
+			quickParams: {
+			    userId: 0, 					//机构UserId
+			    quickPayBankNumber: '', 	//快捷支付用户银行卡号/信用卡号
+			    quickPayMobile: '', 		//快捷支付银行卡绑定手机号
+			    quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
+			    quickPayUserName: '', 		//快捷支付用户姓名
+			    idCard: '', 				//身份证号
+			    cvvCode: '',				//信用卡安全码
+			    quickPayFlag: 2,
+			    vipRecordId: 0,
+			},
 		}
 	},
 	onLoad(option) {
@@ -121,14 +178,15 @@ export default {
 	methods: {
 		async initGetStotage(option) {
 			let data = JSON.parse(option.data)
-			this.payParams.vipRecordId = data.vipRecordId
+			this.payParams.vipRecordId = this.quickParams.vipRecordId = data.vipRecordId
 			this.handelPayMsg = data
 			this.PayOrderOnLineSwitch()
+			this.GetUserClubBanks()
 			console.log(this.handelPayMsg)
 		},
 		PayOrderOnLineSwitch() {
 			// 线上支付开关
-			this.PayService.PayOrderOnLineSwitch()  
+			this.PayService.PayOrderOnLineSwitch()
 				.then(response => {
 					if (response.data === 0) {
 						this.isPaySwitch = true
@@ -140,14 +198,44 @@ export default {
 					console.log('线上支付开关异常')
 				})
 		},
-		payConfirmClick() {
+		async GetUserClubBanks() {
+		    //获取列表
+		    try {
+		        const user = await this.$api.getStorage()
+		        const res = await this.UserService.userClubBanks({ userId:user.userId })
+		        this.cardsList = res.data
+		        this.defaultCards = this.cardsList[0]
+		        this.quickParams.userId = user.userId 
+		        this.quickParams.quickPayBankNumber = this.defaultCards.quickPayBankNumber 
+		        this.quickParams.quickPayMobile = this.defaultCards.quickPayMobile 
+		        this.quickParams.quickPayBankExpireTime = this.defaultCards.quickPayBankExpireTime ? this.defaultCards.quickPayBankExpireTime : ''
+		        this.quickParams.quickPayUserName = this.defaultCards.quickPayUserName 
+		        this.quickParams.idCard = this.defaultCards.idCard 
+		        this.quickParams.cvvCode = this.defaultCards.cvvCode ? this.defaultCards.cvvCode : '' 
+		    } catch (error) {
+		        console.log(error)
+		    }
+		},
+		handleAddCard(index) {
+			//跳转添加卡号支付
+			//quickPayFlag 2超级会员,vipRecordId :会员购买记录Id
+			const data = {
+				payData: {
+					quickPayFlag: 2,
+					vipRecordId: this.payParams.vipRecordId
+				},
+				payAmount: this.handelPayMsg.price
+			}
+			this.$api.navigateTo(`/pages/user/pay/card-comfirm?type=${index}&data=${JSON.stringify(data)}`)
+		},
+		buttonSubMit() {
 			// 友盟埋点收集选择支付方式
-			if(process.env.NODE_ENV != 'development'){
+			if (process.env.NODE_ENV != 'development') {
 				this.$uma.trackEvent('Um_Event_userClubMemberChooseWechatPay', {
 					Um_Key_PageName: '支付超级会员',
 					Um_Key_SourcePage: '支付超级会员',
-					Um_Key_PayName:`${this.buttonText}`,
-					Um_Key_Month: `${this.handelPayMsg.duration}个月`,
+					Um_Key_PayName: `${this.buttonText}`,
+					Um_Key_Month: `${this.handelPayMsg.duration}个月`
 				})
 			}
 			if (this.isPaySwitch) {
@@ -159,30 +247,57 @@ export default {
 					this.MiniWxPayFor()
 					break
 				case 1: // 生成企业网银链接
-					this.BuildCatenate()
+					this.handlePayOrderPayLink()
 					break
 				case 2: // 生成个人网银链接
-					this.BuildCatenate()
+					this.handlePayOrderPayLink()
+					break
+				case 3: // 快捷支付
+					this.orderPayQuickPay()
 					break
 			}
 		},
+		async orderPayQuickPay() {
+			//快捷支付
+			try {
+				const res = await this.PayService.orderPayQuickPay(this.quickParams)
+				console.log('res', res.data)
+				const data = {
+					params: this.quickParams,
+					payData: res.data,
+					payAmount: this.handelPayMsg.price
+				}
+				this.$api.navigateTo(
+					`/pages/user/pay/card-comfirm-sub?type=3&data=${JSON.stringify(data)}`
+				)
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		async handlePayOrderPayLink() {
+			// 生成网银支付链接
+			try {
+				const linkParams = {
+					vipRecordId: this.payParams.vipRecordId,
+					payType: this.payType
+				}
+			    const res = await this.PayService.PayOrderPayLink(linkParams)
+				this.payHttpUrl = res.data
+				this.isShowTip = true
+				console.log('isShowTip',this.isShowTip)
+			} catch (error) {
+			    console.log(error)
+			}
+		},
 		async MiniWxPayFor() {
 			// 使用微信支付
 			this.payParams.code = await authorize.getCode('weixin')
 			this.weChatMiniVipWxPay(this.payParams)
-			// this.PayService.PayOrderVipWechat(this.payParams)
-			// 	.then(response => {
-			// 		let PayInfo = JSON.parse(response.data.rt10_payInfo)
-			// 		this.WxRequestPayment(PayInfo)
-			// 	})
-			// 	.catch(error => {
-			// 		this.$util.msg(error.msg, 2000)
-			// 	})
 		},
 		WxRequestPayment(data) {
 			// 微信支付Api
 			let self = this
-			console.log('data',data)
+			console.log('data', data)
 			wx.requestPayment({
 				timeStamp: data.timeStamp,
 				nonceStr: data.nonceStr,
@@ -198,34 +313,6 @@ export default {
 				complete: function(res) {}
 			})
 		},
-		BuildCatenate() {
-			// 生成网银支付链接
-			this.PayService.PayOrderPayLink({
-				vipRecordId: this.payParams.vipRecordId,
-				payType: this.payType
-			}).then(response => {
-				this.payHttpUrl = response.data
-				this.isShowTip = true
-			})
-		},
-		tabClick(index) {
-			//tab切换
-			this.tabCurrentIndex = this.payType = index
-			switch (index) {
-				case 0:
-					this.btnColor = '#09BB07'
-					this.buttonText = '使用微信支付'
-					break
-				case 1:
-					this.btnColor = '#034582'
-					this.buttonText = '生成企业网银链接'
-					break
-				case 2:
-					this.btnColor = '#034582'
-					this.buttonText = '生成个人网银链接'
-					break
-			}
-		},
 		hideTips() {
 			//隐藏弹窗
 			this.isShowTip = false
@@ -304,6 +391,7 @@ page {
 			width: 100%;
 			height: auto;
 			float: left;
+			margin-top: 40rpx;
 			.check-title {
 				width: 622rpx;
 				height: 40rpx;
@@ -336,69 +424,122 @@ page {
 			.pay-checked {
 				width: 100%;
 				height: auto;
-				.pay-item {
+				.pay-card-main {
 					width: 100%;
-					height: 120rpx;
+					height: auto;
+					float: left;
+					border-top: 12px solid #f7f7f7;
+					border-bottom: 12px solid #f7f7f7;
 					box-sizing: border-box;
-					border: 1px solid #e1e1e1;
-					border-radius: 8rpx;
-					padding: 20rpx;
-					margin: 24rpx 0;
-					display: flex;
-					background-color: #ffffff;
-					&.current {
-						border-color: #e4aa43;
-						.item-r {
-							.icon-duigou {
-								color: #e4aa43;
+					padding: 0 32rpx;
+					.pay-item-cell {
+						height: 100rpx;
+						box-sizing: border-box;
+						padding: 26rpx 0;
+						background-color: #ffffff;
+						border-bottom: 1px solid #e1e1e1;
+						&.add {
+							border-bottom: none;
+							padding-left: 66rpx;
+						}
+						.item-icon {
+							width: 48rpx;
+							height: 48rpx;
+							margin-right: 20rpx;
+							float: left;
+							image {
+								width: 48rpx;
+								height: 48rpx;
+								display: block;
+							}
+						}
+						.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;
 							}
 						}
 					}
-					.item-l {
-						flex: 8;
+				}
+				.pay-item {
+					width: 100%;
+					height: auto;
+					box-sizing: border-box;
+					float: left;
+					padding: 0 32rpx;
+					.pay-item-cell {
+						height: 100rpx;
+						box-sizing: border-box;
+						padding: 26rpx 0;
+						background-color: #ffffff;
+						border-bottom: 1px solid #e1e1e1;
 						.item-icon {
-							width: 72rpx;
-							height: 72rpx;
+							width: 48rpx;
+							height: 48rpx;
 							float: left;
 							text-align: center;
-							line-height: 72rpx;
+							line-height: 48rpx;
 							margin-right: 20rpx;
 							.iconfont {
-								font-size: 78rpx;
+								font-size: 48rpx;
 							}
 							.icon-weixinzhifu {
-								color: #09bb07;
+								color: #0abc64;
 							}
 							.icon-gerenwangyinzhifu {
-								color: #034582;
+								color: #16afe8;
 							}
 							.icon-qiyewangyinzhifu {
-								color: #004889;
+								color: #007acc;
 							}
 						}
 						.item-texts {
-							line-height: 66rpx;
-							font-size: $font-size-26;
+							line-height: 48rpx;
+							font-size: $font-size-28;
 							color: $text-color;
-						}
-						.item-text {
-							line-height: 36rpx;
-							font-size: $font-size-26;
-							.txt-p {
-								color: $text-color;
-							}
-							.txt-t {
-								color: #999999;
+							float: left;
+							&.add {
+								font-weight: bold;
 							}
 						}
-					}
-					.item-r {
-						flex: 2;
-						text-align: center;
-						line-height: 72rpx;
-						.icon-duigou {
-							font-size: 54rpx;
+						.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;
+							}
 						}
 					}
 				}
@@ -406,11 +547,14 @@ page {
 		}
 	}
 	.pay-button {
-		width: 100%;
-		float: left;
-		margin-top: 30rpx;
+		width: 600rpx;
+		background-color: #ffffff;
+		position: fixed;
+		height: 88rpx;
+		padding: 24rpx 75rpx 0 75rpx;
+		bottom: 0;
 		.btn {
-			width: 662rpx;
+			width: 100%;
 			height: 88rpx;
 			border-radius: 44rpx;
 			font-size: $font-size-28;

pages/user/pay/card-add.vue

@@ -16,7 +16,7 @@
 				></view>
 			</view>
 		</view>
-		<view class="card-mains-text">查看支持银行 ></view>
+		<view class="card-mains-text" @click="handleGoSusList">查看支持银行 ></view>
 		<view class="card-mains-btn">
 			<button class="add-btn" :disabled="disabled" :class="[disabled ? 'disabled' : '']" @click="handleAddCard">
 				提交卡号

pages/user/pay/card-comfirm-sub.vue

@@ -1,173 +1,198 @@
 <template>
 	<view class="container card clearfix">
-		<view class="card-content">
-			<view class="card-title" v-if="subType === 2">
-				<view class="card-pay-text">￥{{ payMoney }}</view>
-			</view>
-			<view class="card-mains">
-				<view class="card-form-text">已发送至手机号 {{ phoneNumbe }}</view>
-				<view class="card-form">
-					<input
-						class="card-input"
-						v-model="params.code"
-						@input="handleInput"
-						type="number"
-						maxlength="6"
-						placeholder="请输入短信验证码"
-					/>
-					<view class="card-form-code" @click.stop="handleMobileCode"> {{ mobileCodeText }} </view>
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		></tui-skeleton>
+		<template v-else>
+			<view class="card-content">
+				<view class="card-title" v-if="subType === 2 || subType === 3">
+					<view class="card-pay-text">￥{{ payAmount }}</view>
+				</view>
+				<view class="card-mains">
+					<view class="card-form-text">已发送至手机号 {{ phoneNumbe }}</view>
+					<view class="card-form">
+						<input
+							class="card-input"
+							v-model="codeParams.bindCode"
+							@input="handleInput"
+							type="number"
+							maxlength="6"
+							placeholder="请输入短信验证码"
+						/>
+						<view
+							class="card-form-code"
+							:class="isMobileDisabled ? 'disabled' : ''"
+							@click.stop="handleMobileCode"
+						>
+							<text>{{ mobileCodeText }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="card-mains-btn">
+					<button
+						class="add-btn"
+						:disabled="disabled"
+						:class="[disabled ? 'disabled' : '']"
+						@click="handleAddCard"
+					>
+						{{ suBbtnText }}
+					</button>
 				</view>
 			</view>
-			<view class="card-mains-btn">
-				<button
-					class="add-btn"
-					:disabled="disabled"
-					:class="[disabled ? 'disabled' : '']"
-					@click="handleAddCard"
-				>
-					{{ suBbtnText }}
-				</button>
-			</view>
-		</view>
+		</template>
 	</view>
 </template>
 <script>
 export default {
 	data() {
 		return {
-			params: {
-				code: '',
-				mobile: '15817887257',
-				payMoney: '1000'
-			},
-			payMoney: '1000',
-			subType: 2, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
-			isMobileDisabled: false, //手机验证码按钮控制
+			orderId: 0,
+			params: {},
+			payAmount: '',
+			subType: 1, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
+			isMobileDisabled: true, //手机验证码按钮控制
 			mobilCount: '', //倒计时
-			mobileCodeText: '获取验证码',
-			mobilTime: null
+			mobileCodeText: '重新发送',
+			mobilTime: null,
+			codeParams: {
+				orderId: '',
+				infoId: '',
+				bindCode: '',
+				flag: 1 // 1绑卡 2 付款
+			},
+			skeletonShow: true,
+			suBbtnText: '确认绑定'
 		}
 	},
-	onLoad() {
-		// this.GetAccountInitData()
-	},
-	filters: {
-		NumFormat(value) {
-			//处理金额
-			if (value) {
-				return Number(value).toFixed(2)
-			} else {
-				return '0.00'
-			}
-		}
+	onLoad(option) {
+		this.initOption(option)
 	},
+	filters: {},
 	computed: {
 		phoneNumbe() {
 			// 手机号仅显示前三位及后四位数字，隐藏信息用*代替
-			return this.params.mobile.substr(0, 3) + '****' + this.params.mobile.substring(7)
+			return this.params.quickPayMobile.substr(0, 3) + '****' + this.params.quickPayMobile.substring(7)
 		},
 		disabled() {
-			if (this.params.code.length > 6) {
-				return false
+			return !(this.codeParams.bindCode.length > 4)
+		}
+	},
+	methods: {
+		initOption(option) {
+			console.log('option', option)
+			const data = JSON.parse(option.data)
+			this.subType = Number(option.type)
+			this.params = data.params
+			this.codeParams = Object.assign(this.codeParams, data.payData)
+			if (this.subType === 1) {
+				this.codeParams.flag = 1
 			} else {
-				return true
+				this.codeParams.flag = 2
+				this.orderId = data.orderId
+				this.payAmount = this.params.quickPayFlag === 2 ? data.payAmount : this.params.payAmount
 			}
+			this.handleCodeTime()
+			this.handleBbtnText(this.subType)
+			setTimeout(() => {
+				this.skeletonShow = false
+			}, 500)
+			console.log('params', this.params)
+			console.log('codeParams', this.codeParams)
+			console.log('orderId', this.orderId)
 		},
-		suBbtnText() {
+		handleCodeTime() {
+			// 倒计时
+			const TIME_COUNT = 60
+			if (!this.mobilTime) {
+				this.mobilCount = TIME_COUNT
+				this.isMobileDisabled = true
+				this.mobilTime = setInterval(() => {
+					if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
+						this.mobilCount--
+						this.mobileCodeText = this.mobilCount + '秒后重发'
+					} else {
+						this.isMobileDisabled = false
+						clearInterval(this.mobilTime)
+						this.mobilTime = null
+						this.mobileCodeText = '获取验证码'
+					}
+				}, 1000)
+			}
+		},
+		handleBbtnText(value) {
 			const textMap = {
 				1: '确认绑定',
 				2: '确认绑定支付',
 				3: '确认支付'
 			}
-			return textMap[this.subType]
-		}
-	},
-	methods: {
-		handleAddCard() {
-			//提交卡号
+			this.suBbtnText = textMap[value]
 		},
-		handleClearInput() {
-			//清空银行卡
-			this.params.cardNumber = this.showCardNumber = ''
+		async handleAddCard() {
+			//提交绑定或支付
+			try {
+				const loadText = this.subType === 1 ? '绑定中...' : '支付中...'
+				const successMsg = this.subType === 1 ? '绑定成功' : '支付成功'
+				const res = await this.PayService.orderPayQuickBindCode(this.codeParams, loadText)
+				this.$util.msg(successMsg, 2000, true, 'success')
+				setTimeout(() => {
+					this.handleSuccessHref()
+				}, 2000)
+			} catch (error) {
+				console.log(error)
+				this.$util.msg(error.msg, 2000)
+			}
 		},
-		handleInput(e) {
-			this.params.cardNumber = e.detail.value
-			this.showCardNumber = this.formatAccNo(e.detail.value)
+		handleSuccessHref() {
+			//  tiaozhuan
+			if (this.subType === 1) {
+				this.$api.navigateBack(2)
+			} else {
+				if (this.params.quickPayFlag === 1) {
+					const linkData = {
+						payAmount: this.params.payAmount,
+						orderId: this.orderId,
+						type: 'success'
+					}
+					this.$api.redirectTo(`/pages/user/order/order-success?data=${JSON.stringify({ data: linkData })}`)
+				} else {
+					this.$api.redirectTo(`/pages/user/member/member`)
+				}
+			}
 		},
 		handleMobileCode() {
 			// 获取短信验证码
-			if (this.smsCodeParams.mobile == '') {
-				this.$util.msg('请输入手机号', 2000)
-				return
-			}
-			if (!this.$reg.isMobile(this.smsCodeParams.mobile)) {
-				this.$util.msg('请输入正确的手机号', 2000)
-				return
-			}
 			this.isMobileDisabled = true
-			this.userLoginCode(this.smsCodeParams)
-		},
-		userLoginCode(params) {
-			// 获取登录短息验证码
-			this.UserService.userLoginCode(params)
-				.then(response => {
-					this.$util.msg('获取验证码成功', 2000)
-					const TIME_COUNT = 60
-					if (!this.mobilTime) {
-						this.mobilCount = TIME_COUNT
-						this.isMobileDisabled = true
-						this.mobilTime = setInterval(() => {
-							if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
-								this.mobilCount--
-								this.mobileCodeText = this.mobilCount + 's'
-							} else {
-								this.isMobileDisabled = false
-								clearInterval(this.mobilTime)
-								this.mobilTime = null
-								this.mobileCodeText = '获取验证码'
-							}
-						}, 1000)
-					}
-				})
-				.catch(error => {
-					this.$util.msg(error.msg, 2000)
-					this.isMobileDisabled = false
-				})
-		},
-		handleGoSusList() {
-			// 跳转支持银行
-			this.$api.navigateTo(`/pages/user/pay/card-sus-list`)
+			if (this.subType === 1) {
+				this.orderPayQuickBindCard()
+			} else {
+				this.orderPayQuickPay()
+			}
 		},
-		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
+		async orderPayQuickBindCard() {
+			//直只绑卡
+			try {
+				const res = await this.PayService.orderPayQuickBindCard(this.params)
+				this.handleCodeTime()
+			} catch (error) {
+				this.isMobileDisabled = false
 			}
-
-			// 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('')
+		async orderPayQuickPay() {
+			//绑卡并支付
+			try {
+				const res = await this.PayService.orderPayQuickPay(this.params)
+				this.handleCodeTime()
+			} catch (error) {
+				console.log(error)
+				this.isMobileDisabled = false
+			}
 		}
 	},
 	onShow() {
-		// this.beansList = []
 	}
 }
 </script>
@@ -195,7 +220,7 @@ page,
 		line-height: 90rpx;
 		text-align: center;
 		font-size: 56rpx;
-		color: #333;
+		color: #ff5b00;
 		font-weight: bold;
 		box-sizing: border-box;
 	}
@@ -242,6 +267,9 @@ page,
 			color: $color-system;
 			font-size: $font-size-26;
 			float: left;
+			&.disabled {
+				color: #999;
+			}
 		}
 	}
 }

pages/user/pay/card-comfirm.vue

@@ -1,153 +1,253 @@
 <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">
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		></tui-skeleton>
+		<template v-else>
+			<view class="card-content">
+				<view class="card-row">
+					<view class="form-label">卡号</view>
+					<view class="form-input">
 						<input
-							class="form-input"
-							:class="cardTytpeText === '请选择卡类型' ? 'none' : ''"
-							type="text"
-							disabled="false"
-							v-model="cardTytpeText"
-							value=""
-							placeholder="请选择"
+							class="card-input"
+							v-model="showCardNumber"
+							@input="handleInput"
+							type="number"
+							:maxlength="maxLen"
+							placeholder="请输入本人的银行卡号"
 						/>
-					</picker>
+						<view class="card-clear" v-if="!showClear" @click="handleClearInput"
+							><text class="iconfont icon-shanchu1"></text
+						></view>
+					</view>
 				</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 class="card-row picker">
+					<view class="form-label">卡类型</view>
+					<view class="form-input">
+						<picker @change="handleBindPicker($event)" :value="index" :range="stateActions" range-key="name">
+							<input
+								class="form-input"
+								type="text"
+								disabled="false"
+								v-model="cardTytpeText"
+								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.quickPayUserName"
+						placeholder="请输入您的姓名"
+						maxlength="10"
+					/>
+				</view>
+				<view class="card-row">
+					<view class="form-label">身份证</view>
+					<input
+						class="form-input"
+						type="number"
+						name="input"
+						v-model="params.idCard"
+						placeholder="请输入您的身份证号"
+						maxlength="18"
+					/>
+				</view>
+				<view class="card-row">
+					<view class="form-label">预留手机号</view>
+					<input
+						class="form-input"
+						type="number"
+						name="input"
+						v-model="params.quickPayMobile"
+						placeholder="请输入您的银行预留手机号"
+						maxlength="11"
+					/>
+				</view>
+				<view class="card-row" v-if="pickerIndex === 2">
+					<view class="form-label">有效期</view>
+					<input
+						class="form-input"
+						type="number"
+						name="input"
+						v-model="params.quickPayBankExpireTime"
+						placeholder="请输入贷记卡有效期(示例：23/04)"
+						maxlength="5"
+					/>
+				</view>
+				<view class="card-row" v-if="pickerIndex === 2">
+					<view class="form-label">CVV2</view>
+					<input
+						class="form-input"
+						type="number"
+						name="input"
+						v-model="params.cvvCode"
+						placeholder="请输入贷记卡背面的安全码"
+						maxlength="3"
+					/>
+				</view>
+				<view class="card-mains-btn">
+					<button
+						class="add-btn"
+						:disabled="disabled"
+						:class="[disabled ? 'disabled' : '']"
+						@click="handleAddCard"
+					>
+						{{ subButtonText }}
+					</button>
+				</view>
+				<view class="card-mains-text" @click="handleGoSusList">查看支持银行 ></view>
 			</view>
-		</view>
+		</template>		
 	</view>
 </template>
 <script>
 export default {
 	data() {
 		return {
+			skeletonShow:true,
+			pickerIndex: 1,
+			orderId: 0,
+			payAmount: '',
 			params: {
-				type:1,
-				name:'',
-				number:'',
-				bindMobile:'',
-				clubId: 0,
-				time:'',
-				cvv:'',
-				cardNumber: '6228481456743154778'
+				userId: 0, //机构UserId
+				quickPayBankNumber: '', //快捷支付用户银行卡号/信用卡号
+				quickPayMobile: '', //快捷支付银行卡绑定手机号
+				quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
+				quickPayUserName: '', //快捷支付用户姓名
+				idCard: '', //身份证号
+				cvvCode: '' //信用卡安全码
 			},
 			showCardNumber: '',
-			maxLen: 30,
-			subType: 1 ,// 1直接绑卡  2//
-			cardTytpeText:'请选择卡类型',
-			subButtonText:'确认绑卡',
-			stateActions: [
-				{ name: '借记卡', value: 1 },
-				{ name: '贷记卡', value: 2 },
-			]
+			maxLen: 26,
+			subType: 0, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
+			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
-		}
+	onLoad(option) {
+		this.subType = Number(option.type)
+		this.initGetStotage(option)
 	},
+	filters: {},
 	computed: {
+		showClear() {
+			return this.params.quickPayBankNumber.length <= 12
+		},
 		disabled() {
-			if (this.params.cardNumber.length > 12) {
-				return false
+			if (this.pickerIndex === 1) {
+				return !(
+					this.params.quickPayBankNumber.length > 12 &&
+					this.params.quickPayUserName != '' &&
+					this.params.idCard != '' &&
+					this.params.quickPayMobile != ''
+				)
 			} else {
-				return true
+				return !(
+					this.params.quickPayBankNumber.length > 12 &&
+					this.params.quickPayUserName != '' &&
+					this.params.idCard != '' &&
+					this.params.quickPayMobile != '' &&
+					this.params.quickPayBankExpireTime != '' &&
+					this.params.cvvCode != ''
+				)
 			}
 		}
 	},
 	methods: {
+		async initGetStotage(option) {
+			const userInfo = await this.$api.getStorage()
+			this.params.userId = userInfo.userId ? userInfo.userId : 0
+			if (this.subType != 1) {
+				const data = JSON.parse(option.data)
+				this.params = { ...this.params, ...data.payData }
+				this.orderId = data.orderId ? data.orderId : 0
+				this.payAmount = data.payAmount ? data.payAmount :0
+			}
+			console.log('params', this.params)
+			setTimeout(()=>{
+				this.skeletonShow = false
+			},500)
+		},
 		handleAddCard() {
 			//提交卡号
+			if (!this.$reg.isIdCard(this.params.idCard)) {
+				this.$util.msg('请输入正确的身份证号', 2000)
+				return
+			}
+			if (!this.$reg.isMobile(this.params.quickPayMobile)) {
+				this.$util.msg('请输入正确的手机号', 2000)
+				return
+			}
+			if (this.subType === 1) {
+				this.orderPayQuickBindCard()
+			} else {
+				this.orderPayQuickPay()
+			}
+		},
+		async orderPayQuickBindCard() {
+			//直接绑卡
+			try {
+				const res = await this.PayService.orderPayQuickBindCard(this.params)
+				console.log('res', res.data)
+				const data = JSON.stringify({ params: this.params, payData: res.data })
+				this.$api.navigateTo(`/pages/user/pay/card-comfirm-sub?type=${this.subType}&data=${data}`)
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		async orderPayQuickPay() {
+			//绑卡并支付
+			try {
+				const res = await this.PayService.orderPayQuickPay(this.params)
+				console.log('res', res.data)
+				const data = {
+					params: this.params,
+					payData: res.data,
+					orderId: this.orderId,
+					payAmount: this.payAmount
+				}
+				this.$api.navigateTo(`/pages/user/pay/card-comfirm-sub?type=${this.subType}&data=${JSON.stringify(data)}`)
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		handleBindPicker(e) {
+			//选择联系人身份
+			this.cardTytpeText = this.stateActions[e.target.value].name
+			this.pickerIndex = this.stateActions[e.target.value].value
 		},
 		handleClearInput() {
 			//清空银行卡
-			this.params.cardNumber = this.showCardNumber = ''
+			this.params.quickPayBankNumber = this.showCardNumber = ''
 		},
 		handleInput(e) {
-			this.params.cardNumber = e.detail.value
 			this.showCardNumber = this.formatAccNo(e.detail.value)
+			this.params.quickPayBankNumber = this.showCardNumber.split(/[\t\r\f\n\s]*/g).join('')
 		},
 		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
+		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) {
+				// 如果输入的字符大于最大输入长度则禁止继续输入
+				return
+			}
+			return formatValue
 		},
 		getOriginValue() {
 			//获取input的原始值
@@ -166,19 +266,19 @@ page,
 	background: #ffffff;
 	height: 100%;
 }
-.card-content{
+.card-content {
 	width: 100%;
 	height: auto;
 	box-sizing: border-box;
 	padding: 32rpx;
-	.card-row{
+	.card-row {
 		width: 100%;
 		height: 100rpx;
 		box-sizing: border-box;
 		border-bottom: 1px solid #e1e1e1;
 		position: relative;
 		float: left;
-		&.picker{
+		&.picker {
 			padding-right: 60rpx;
 		}
 		.form-label {
@@ -197,6 +297,30 @@ page,
 			text-align: right;
 			color: #333333;
 			float: right;
+			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;
+				padding-right: 60rpx;
+			}
+			.card-clear {
+				width: 60rpx;
+				height: 96rpx;
+				position: absolute;
+				right: 0;
+				top: 0;
+				line-height: 96rpx;
+				text-align: center;
+				.icon-shanchu1 {
+					font-size: $font-size-32;
+					color: #d5d5d5;
+				}
+			}
 		}
 		.icon-xiayibu {
 			width: 60rpx;
@@ -233,6 +357,14 @@ page,
 			}
 		}
 	}
+	.card-mains-text {
+		width: 100%;
+		line-height: 88rpx;
+		box-sizing: border-box;
+		padding: 0 56rpx;
+		font-size: $font-size-28;
+		color: #1890f9;
+		text-align: center;
+	}
 }
-
 </style>

pages/user/pay/card-list.vue

@@ -1,27 +1,41 @@
 <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 }}
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		></tui-skeleton>
+		<template v-else>
+			<view class="card-title">我的银行卡 <text>{{ list.length }}张</text></view>
+			<view class="card-content">
+				<template  v-if="list.length > 0">
+					<view class="list" v-for="(card, index) in list" :key="index" :style="{ backgroundImage: handleStyle(card.bankCode) }">
+						<view class="list-logo"> 
+							<view class="logo"><image :src="'https://static.caimei365.com/app/img/pay/icon_'+ card.bankCode+'_@2x.png'"></image></view>
+						</view> 
+						<view class="list-main">  
+							<view class="list-main-name">{{ card.bankName }}</view>
+							<view class="list-main-tag"> <text class="tag"> {{ card.bankType === 1 ? '借记卡' : '贷记卡' }} </text> </view>
+							<view class="list-main-code">
+								{{ card.quickPayBankNumber | cardsFormat }}
+							</view>
+						</view> 
+						<view class="list-btn" @click="handleUnbind(card)">解绑</view>
 					</view>
-				</view> 
-				<view class="list-btn" @click="handleUnbind">解绑</view>
+				</template>
+				<view class="list-none" v-else>
+					<text>暂无银行卡~</text>
+				</view>
 			</view>
-		</view>
+		</template>
 		<!-- 取消收藏操作 -->
 		<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 class="tui-button" @click="handleAddCard(1)">添加银行卡</view>
 					</view>
 				</view>
 			</view>
@@ -47,18 +61,7 @@ export default {
 		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: '上拉显示更多',
+			skeletonShow:true,
 			popupShow:true,
 			contentModalText: '', //操作文字提示语句
 			modal: false,
@@ -77,147 +80,93 @@ export default {
 					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'
-				}
-			]
+			list: []
 		}
 	},
 	onLoad() {
-		// this.GetAccountInitData()
+		this.GetUserClubBanks()
 	},
-	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)
-				})
+	filters: {
+		cardsFormat(valus) {
+			// 银行卡只显示最后四位数 ,隐藏信息用*代替
+			return  valus.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2")
 		},
-		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)
-				})
+	},
+	methods: {
+		async GetUserClubBanks() {
+			//获取列表
+			try {
+				const user = await this.$api.getStorage()
+				const res = await this.UserService.userClubBanks({ userId:user.userId })
+				this.list = res.data
+				this.skeletonShow = false
+			} catch (error) {
+				console.log(error)
+			}
 		},
-		handleAddCard(){
+		handleAddCard(index){
 			// 跳转添加银行卡页面
-			this.$api.navigateTo(`/pages/user/pay/card-add`)
+			this.$api.navigateTo(`/pages/user/pay/card-comfirm?type=${index}`)
 		},
-		handleUnbind(){
-			//解绑
+		handleUnbind(card){
+			//点击解绑
+			this.handleCardId = card.id
 			this.modal = true
 			this.contentModalText = '解绑后此卡需要重新绑定才能继续使用'
 		},
-		async handleClick(e) {
-			//确认删除
+		handleClick(e) {
+			//确认解绑
 			if (e.index == 1) {
-				this.handleDeleteUserLike()
+				this.orderPayUnboundCard()
 			}
 			this.modal = false
 		},
+		async orderPayUnboundCard(){
+			//请求
+			try {
+				const res = await this.PayService.orderPayUnboundCard({ cardId : this.handleCardId })
+				console.log('res', res.data)
+				this.$util.msg('解绑成功',2000,true,'success')
+				this.GetUserClubBanks()
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
 		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 = {
+				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);',
+				'BCCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
+				'BOC':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
+				'BOCO':'linear-gradient(90deg, #7275BE 0%, #434492 100%);',
 				'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
+				'CEB':'linear-gradient(90deg, #B673CB 0%, #843C9A 100%);',
+				'CGB':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
+				'CIB':'linear-gradient(90deg, #457EBC 0%, #1B518A 100%);',
+				'CMBC':'linear-gradient(90deg, #3C9EC2 0%, #0584B4 100%);',
+				'CMBCHINA':'linear-gradient(90deg, #FB6965 0%, #CE4343 100%);',
+				'ECITIC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
+				'HXB':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
 				'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
-				'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
+				'PINGAN':'linear-gradient(90deg, #F5A15A 0%, #E47F29 100%);',
+				'POST':'linear-gradient(90deg, #3EB97B 0%, #11874B 100%);',
+				'SHB':'linear-gradient(90deg, #6479C8 0%, #314693 100%);',
+				'SPDB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
 			}
 			return styleMap[type]
 		},
 	},
-	onReachBottom() {
-		if (this.hasNextPage) {
-			this.loadding = true
-			this.pullUpOn = true
-			this.GetOnReachBottomData()
-		}
-	},
 	onPullDownRefresh() {
 		//下拉刷新
-		this.listQuery.pageNum = 1
-		this.GetAccountInitData()
+		this.GetUserClubBanks()
 		uni.stopPullDownRefresh()
 	},
 	onShow() {
-		// this.beansList = []
+		
 	}
 }
 </script>
@@ -249,6 +198,14 @@ page,
 	height: auto;
 	box-sizing: border-box;
 	padding: 0 40rpx;
+	.list-none{
+		width: 100%;
+		height: 900rpx;
+		line-height: 900rpx;
+		font-size: $font-size-28;
+		text-align: center;
+		color: #999;
+	}
 	.list {
 		width: 100%;
 		height: 240rpx;
@@ -257,6 +214,8 @@ page,
 		padding: 32rpx;
 		position: relative;
 		margin-bottom: 32rpx;
+		background: url(https://static.caimei365.com/app/img/pay/icon_bg_cards@2x.png);
+		background-size: cover;
 		&:last-child{
 			margin-bottom: 0;
 		}
@@ -268,13 +227,11 @@ page,
 				width: 80rpx;
 				height: 80rpx;
 				border-radius: 50%;
-				padding: 10rpx;
 				box-sizing: border-box;
-				background-color: #ffffff;
 				float: left;
 				image{
-					width: 60rpx;
-					height: 60rpx;
+					width: 80rpx;
+					height: 80rpx;
 					border-radius: 50%;
 					display: block;
 				}

pages/user/pay/card-order.vue

@@ -51,10 +51,21 @@
 						</view>
 					</view>
 					<view class="pay-checked">
-						<view class="pay-card-main"> 
+						<view class="pay-card-main" v-if="cardsList.length > 0">
 							<view class="pay-item-cell" @click="tabClick(3)">
-								<view class="item-icon"><image :src="handleLogo(cards.B2B)"></image></view>
-								<view class="item-texts"><text>{{ cards.name }}</text></view>
+								<view class="item-icon">
+									<image
+										:src="
+											'https://static.caimei365.com/app/img/pay/icon_' +
+												defaultCards.bankCode +
+												'_@2x.png'
+										"
+									></image>
+								</view>
+								<view class="item-texts"
+									>{{ defaultCards.bankName }}(
+									{{ defaultCards.quickPayBankNumber | bankNumeberFilter }} )</view
+								>
 								<view class="item-checked">
 									<text
 										class="iconfont"
@@ -63,17 +74,17 @@
 								</view>
 							</view>
 							<view class="pay-item-cell add" @click="hanldeShowPopup(1)">
-								<view class="item-texts add" ><text>查看全部银行卡 / 添加新卡支付</text></view>
+								<view class="item-texts add"><text>查看全部银行卡 / 添加新卡支付</text></view>
 								<view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
 							</view>
 						</view>
-						<view class="pay-item" @click="handleAddCard(2)">
+						<view class="pay-item" @click="handleAddCard(2)" v-else>
 							<view class="pay-item-cell">
 								<view class="item-texts add"><text>添加银行卡快捷付款</text></view>
 								<view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
 							</view>
 						</view>
-						<view class="pay-item" @click="tabClick(0)">
+						<view class="pay-item" @click="tabClick(0)" v-if="showWeChatPayMode">
 							<view class="pay-item-cell">
 								<view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
 								<view class="item-texts"><text>微信支付</text></view>
@@ -85,7 +96,7 @@
 								</view>
 							</view>
 						</view>
-						<view class="pay-item" @click="tabClick(1)">
+						<view class="pay-item" @click="tabClick(1)" v-if="showB2BpayMode">
 							<view class="pay-item-cell">
 								<view class="item-icon"><text class="iconfont icon-qiyewangyinzhifu"></text></view>
 								<view class="item-texts"><text>企业网银支付</text></view>
@@ -110,6 +121,16 @@
 							</view>
 						</view>
 					</view>
+					<view class="pay-statustext">
+						<view class="pay-statustext-inner">
+							<view class="pay-icon"> <text class="iconfont icon-gantanhao-yuankuang"></text> </view>
+							<view class="pay-text">
+								<view
+									>使用任何一种线上支付方式支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。</view
+								>
+							</view>
+						</view>
+					</view>
 				</view>
 				<view class="pay-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
 					<view class="btn" @click.stop="buttonSubMit" :style="{ background: btnColor }">{{
@@ -119,7 +140,7 @@
 			</view>
 		</template>
 		<!-- 支付链接弹窗 -->
-		<view class="alert spec" :class="specClass" v-if="isShowTip">
+		<view class="alert spec" v-if="isShowTip">
 			<!-- 选择支付弹窗说明 -->
 			<view class="freight-alert" @tap="hideTips">
 				<view class="content">
@@ -137,9 +158,15 @@
 			</view>
 		</view>
 		<!-- 支付记录 -->
-		<cm-record :show="popupShow" :list="discernReceipt"></cm-record>
+		<cm-record :show="popupShow" :list="discernReceipt" v-if="popupShow"></cm-record>
 		<!-- 选择快捷支付银行 -->
-		<cm-cards :show="popupShow1" :list="cardsList" @handleChoiceaCards="handleChoiceaCards"></cm-cards>
+		<cm-cards
+			:show="popupShow1"
+			:list="cardsList"
+			@handleChoiceaCards="handleChoiceaCards"
+			@addCards="handleAddCard"
+			v-if="popupShow1"
+		></cm-cards>
 		<!-- 弹窗提示 -->
 		<tui-modal
 			:show="modal"
@@ -209,7 +236,18 @@ export default {
 					plain: false
 				}
 			],
-			cardsList:[]//查看银行列表
+			quickParams: {
+			    userId: 0, 					//机构UserId
+			    quickPayBankNumber: '', 	//快捷支付用户银行卡号/信用卡号
+			    quickPayMobile: '', 		//快捷支付银行卡绑定手机号
+			    quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
+			    quickPayUserName: '', 		//快捷支付用户姓名
+			    idCard: '', 				//身份证号
+			    cvvCode: '',				//信用卡安全码
+			    quickPayFlag: 1,
+			    payAmount: 0,
+			    shopOrderId: 0
+			},
 		}
 	},
 	onLoad(option) {
@@ -240,10 +278,9 @@ export default {
 	},
 	methods: {
 		initData(e) {
-			this.payType = e.type
-			console.log(this.payType)
 			this.shopOrderId = e.shopOrderId
 			this.GetPayOrderInfo()
+			this.GetUserClubBanks()
 		},
 		GetPayOrderInfo() {
 			//初始化支付信息
@@ -259,7 +296,9 @@ export default {
 					this.payAmount = this.toFixedFn(this.obligation) // 自定义金额
 					this.balanceAmount = this.obligation - this.payAmount // 计算剩余支付金额
 					// 支付方式配置
-					// this.checkPayMode(data.onlinePayWays)
+					if(data.onlinePayWays){
+						this.checkPayMode(data.onlinePayWays)
+					}
 					setTimeout(() => {
 						this.skeletonShow = false
 					}, 500)
@@ -268,26 +307,62 @@ export default {
 					this.$util.msg(error.msg, 2000)
 				})
 		},
+		async GetUserClubBanks() {
+		    //获取列表
+		    try {
+		        const user = await this.$api.getStorage()
+		        const res = await this.UserService.userClubBanks({ userId:user.userId })
+		        this.cardsList = res.data
+		        this.defaultCards = this.cardsList[0]
+		        this.quickParams.userId = user.userId 
+				this.quickParams.payAmount = this.payAmount
+		        this.quickParams.shopOrderId = Number(this.shopOrderId)
+		        this.quickParams.quickPayBankNumber = this.defaultCards.quickPayBankNumber 
+		        this.quickParams.quickPayMobile = this.defaultCards.quickPayMobile 
+		        this.quickParams.quickPayBankExpireTime = this.defaultCards.quickPayBankExpireTime ? this.defaultCards.quickPayBankExpireTime : ''
+		        this.quickParams.quickPayUserName = this.defaultCards.quickPayUserName 
+		        this.quickParams.idCard = this.defaultCards.idCard 
+		        this.quickParams.cvvCode = this.defaultCards.cvvCode ? this.defaultCards.cvvCode : '' 
+		    } catch (error) {
+		        console.log(error)
+		    }
+		},
+		handleAddCard(index) {
+			//跳转添加卡号支付
+			//quickPayFlag 1普通订单 ,payAmount 支付金额，单位元,shopOrderId 子订单Id
+			const data = {
+				payData: {
+					quickPayFlag: 1,
+					payAmount: this.payAmount,
+					shopOrderId: Number(this.shopOrderId)
+				},
+				orderId: this.orderId
+			}
+			this.$api.navigateTo(`/pages/user/pay/card-comfirm?type=${index}&data=${JSON.stringify(data)}`)
+		},
 		buttonSubMit() {
 			switch (this.tabCurrentIndex) {
 				case 0: // 微信支付
-					this.handleUmTrackEvent('Um_Event_ConfirmWechatPay','微信支付')
+					this.handleUmTrackEvent('Um_Event_ConfirmWechatPay', '微信支付')
 					this.MiniWxPayFor()
 					break
 				case 1: // 企业网银
-					this.handleUmTrackEvent('Um_Event_ConfirmEbankPay','企业网银')
-					this.BuildCatenate()
+					this.payType = '1'
+					this.handleUmTrackEvent('Um_Event_ConfirmEbankPay', '企业网银')
+					this.handlePayOrderPayLink()
 					break
 				case 2: // 个人网银
-					this.handleUmTrackEvent('Um_Event_ConfirmAbankPay','个人网银')
-					this.BuildCatenate()
+					this.payType = '2'
+					this.handleUmTrackEvent('Um_Event_ConfirmAbankPay', '个人网银')
+					this.handlePayOrderPayLink()
 					break
 				case 3: // 快捷支付
-					this.handleUmTrackEvent('Um_Event_ConfirmAbankPay','快捷支付')
+					this.handleUmTrackEvent('Um_Event_ConfirmAbankPay', '快捷支付')
+					this.orderPayQuickPay()
 					break
 			}
 		},
-		handleUmTrackEvent(UmName,UmPageName){
+		handleUmTrackEvent(UmName, UmPageName) {
 			// 友盟埋点收集
 			if (process.env.NODE_ENV != 'development') {
 				this.$uma.trackEvent(UmName, {
@@ -298,7 +373,25 @@ export default {
 				})
 			}
 		},
-		BuildCatenate() {
+		async orderPayQuickPay() {
+			//快捷支付
+			try {
+				
+				const res = await this.PayService.orderPayQuickPay(this.quickParams)
+				const data = {
+					params: this.quickParams,
+					payData: res.data,
+					orderId: this.orderId,
+					payAmount: this.payAmount
+				}
+				this.$api.navigateTo(
+					`/pages/user/pay/card-comfirm-sub?type=3&data=${JSON.stringify(data)}`
+				)
+			} catch (error) {
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		async handlePayOrderPayLink() {
 			// 企业网银  个人网银
 			if (this.payAmount == 0) {
 				this.$util.msg('请输入本次支付的金额', 2000)
@@ -315,14 +408,19 @@ export default {
 					return
 				}
 			}
-			this.PayService.PayOrderPayLink({
-				unpaidAmount: this.payAmount,
-				shopOrderId: this.shopOrderId,
-				payType: this.payType
-			}).then(response => {
-				this.payHttpUrl = response.data
+			try {
+				const linkParams = {
+					unpaidAmount: this.payAmount,
+					shopOrderId: this.shopOrderId,
+					payType: this.payType
+				}
+			    const res = await this.PayService.PayOrderPayLink(linkParams)
+				this.payHttpUrl = res.data
 				this.isShowTip = true
-			})
+				console.log('isShowTip',this.isShowTip)
+			} catch (error) {
+			    console.log(error)
+			}
 		},
 		async MiniWxPayFor() {
 			// 微信支付
@@ -371,13 +469,13 @@ export default {
 				value = patern.exec(value)
 			}
 			if (value == '' || value < 0) {
-				this.payAmount = ''
+				this.payAmount = this.quickParams.payAmount =  ''
 				this.balanceAmount = this.obligation
 			} else if (value > this.obligation) {
-				this.payAmount = this.toFixedFn(this.obligation)
+				this.payAmount = this.quickParams.payAmount = this.toFixedFn(this.obligation)
 				this.balanceAmount = this.toFixedFn(this.obligation - this.payAmount)
 			} else {
-				this.payAmount = this.toFixedFn(value)
+				this.payAmount = this.quickParams.payAmount = this.toFixedFn(value)
 				this.balanceAmount = this.toFixedFn(this.obligation - this.payAmount)
 			}
 		},
@@ -582,12 +680,12 @@ page {
 			padding: 0 0 32rpx 0;
 			border-top: 1px solid #e1e1e1;
 			margin-top: 180rpx;
-			.pay-card-main{
+			.pay-card-main {
 				width: 100%;
 				height: auto;
 				float: left;
-				border-top: 12px solid #F7F7F7;
-				border-bottom: 12px solid #F7F7F7;
+				border-top: 12px solid #f7f7f7;
+				border-bottom: 12px solid #f7f7f7;
 				box-sizing: border-box;
 				padding: 0 32rpx;
 				.pay-item-cell {
@@ -596,7 +694,7 @@ page {
 					padding: 26rpx 0;
 					background-color: #ffffff;
 					border-bottom: 1px solid #e1e1e1;
-					&.add{
+					&.add {
 						border-bottom: none;
 						padding-left: 66rpx;
 					}
@@ -605,7 +703,7 @@ page {
 						height: 48rpx;
 						margin-right: 20rpx;
 						float: left;
-						image{
+						image {
 							width: 48rpx;
 							height: 48rpx;
 							display: block;
@@ -618,7 +716,7 @@ page {
 						float: left;
 						&.add {
 							font-weight: bold;
-						} 
+						}
 					}
 					.item-checked {
 						width: 48rpx;
@@ -663,7 +761,7 @@ page {
 							font-size: 48rpx;
 						}
 						.icon-weixinzhifu {
-							color: #0ABC64;
+							color: #0abc64;
 						}
 						.icon-gerenwangyinzhifu {
 							color: #16afe8;
@@ -702,6 +800,41 @@ page {
 				}
 			}
 		}
+		.pay-statustext {
+			width: 100%;
+			height: auto;
+			float: left;
+			margin-top: 40rpx;
+			padding-bottom: 160rpx;
+			.pay-statustext-inner {
+				width: 662rpx;
+				height: 80rpx;
+				margin: 0 auto;
+				border: 1px solid #cccccc;
+				padding: 20rpx;
+				border-radius: 8rpx;
+				.pay-icon {
+					width: 62rpx;
+					height: 100%;
+					float: left;
+					text-align: center;
+					.iconfont {
+						color: #999999;
+						font-size: $font-size-36;
+						line-height: 20rpx;
+					}
+				}
+				.pay-text {
+					width: 560rpx;
+					height: 100%;
+					float: left;
+					line-height: 40rpx;
+					font-size: $font-size-24;
+					color: #999999;
+					text-align: justify;
+				}
+			}
+		}
 	}
 	.pay-button {
 		width: 600rpx;

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

@@ -1,26 +1,35 @@
 <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>
+		<tui-skeleton
+			v-if="skeletonShow"
+			backgroundColor="#fafafa"
+			borderRadius="10rpx"
+			:isLoading="true"
+			:loadingType="5"
+		></tui-skeleton>
+		<template v-else>
+			<view class="card-title">
+				<view class="card-tabs" @click="handleCurrent(1)">
+					<view class="card-tabs-text" :class="{ current : current === 1 }">借记卡</view>
+				</view>
+				<view class="card-tabs" @click="handleCurrent(2)">
+					<view class="card-tabs-text" :class="{ current : current === 2 }">贷记卡</view>
+				</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 class="card-content">
+				<view class="list" v-for="(item, index) in list" :key="index">
+					<view class="list-pin">{{ item.initial }}</view>
+					<view class="list-card">
+						<view class="list-card-item" v-for="(card, index) in item.banks" :key="index">
+							<view class="logo"><image :src="'https://static.caimei365.com/app/img/pay/icon_'+card.bankCode+'_@2x.png'"></image></view>
+							<view class="name">
+								<text>{{ card.bankName }}</text>
+							</view>
 						</view>
 					</view>
 				</view>
 			</view>
-		</view>
+		</template>
 	</view>
 </template>
 <script>
@@ -29,146 +38,37 @@ export default {
 		return {
 			StaticUrl: this.$Static,
 			isIphoneX:this.$store.state.isIphoneX,
-			current:0,
+			skeletonShow:true,
+			current:1,
 			listQuery: {
-				userId: '', // 用户ID
-				pageNum: 1, // 页数
-				pageSize: 10, // 加载条数
-				type: 0 // 查询余额类型
+				cardType: 1, // 页数
 			},
-			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: '农业银行',
-						}
-					]
-				}
-			]
+			list: []
 		}
 	},
 	onLoad() {
-		// this.GetAccountInitData()
+		this.getQuickBankInfos()
 	},
 	filters: {},
 	methods: {
-		async GetAccountInitData(index) {
+		async getQuickBankInfos() {
 			//获取余额明细数据列表
-			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)
-				})
+			try {
+				const res = await this.PayService.getQuickBankInfos(this.listQuery)
+				console.log('res',res)
+				this.list =  res.data
+				setTimeout(() => {
+					this.skeletonShow = false
+				}, 1000)
+			} catch (error) {
+				console.log(error)
+			}
 		},
 		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]
-		},
+			this.current = this.listQuery.cardType = index
+			this.getQuickBankInfos()
+		}
 	},
 	onReachBottom() {
 		if (this.hasNextPage) {
@@ -248,26 +148,26 @@ page,
 				width: 100%;
 				height: 100rpx;
 				box-sizing: border-box;
-				padding: 26rpx 0;
+				padding: 20rpx 0;
 				border-bottom: 1px solid #E1E1E1;
 				&:last-child{
 					border-bottom: none;
 				}
 				.logo{
-					width: 48rpx;
-					height: 48rpx;
+					width: 60rpx;
+					height: 60rpx;
 					margin-right: 34rpx;
 					float: left;
 					border-radius: 50%;
 					image{
-						width: 48rpx;
-						height: 48rpx;
+						width: 60rpx;
+						height: 60rpx;
 						border-radius: 50%;
 						display: block;
 					}
 				}
 				.name{
-					line-height: 48rpx;
+					line-height: 60rpx;
 					font-size: 28rpx;
 					color: #333;
 				}

pages/user/pay/components/cm-cards-popup.vue

@@ -18,9 +18,19 @@
 								:key="index"
 								@click="handleChoose(index, cards)"
 							>
-								<view class="item-icon"><image :src="handleLogo(cards.B2B)"></image></view>
+								<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.name }}</text></view
+									><text
+										>{{ cards.bankName }}( {{ cards.quickPayBankNumber | bankNumeberFilter }} )</text
+									></view
 								>
 								<view class="item-checked">
 									<text
@@ -29,7 +39,7 @@
 									></text>
 								</view>
 							</view>
-							<view class="pay-item-cell add" @click="handleAddCard(3)">
+							<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-xiayibu"></text> </view>
@@ -58,75 +68,41 @@ export 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'
-				}
-			]
+			checkedIndex: '',
+			dataList: []
 		}
 	},
 	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]
+		bankNumeberFilter(value) {
+			return value.substring(value.length - 4, value.length)
 		}
 	},
 	created() {
-		// this.dataList = this.list
+		this.initDataList(this.list)
 	},
 	methods: {
-		handleChoose(index,cards) {
+		initDataList(list){
+			// 初始化
+			this.dataList = list
+			console.log('list',this.dataList)
+		},
+		handleChoose(index, cards) {
 			//选择银行卡
 			this.checkedIndex = index
-			this.$emit('handleChoiceaCards', cards)
+			const data = {
+				quickPayBankNumber:cards.quickPayBankNumber,
+				quickPayMobile:cards.quickPayMobile,
+				quickPayBankExpireTime:cards.quickPayBankExpireTime,
+				quickPayUserName:cards.quickPayUserName,
+				idCard:cards.idCard,
+				cvvCode:cards.cvvCode
+			}
+			this.$emit('handleChoiceaCards', data)
 			this.hidePopup()
 		},
-		handleAddCard(index) { 
+		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]
+			this.$emit('addCards', index)
 		},
 		hidePopup() {
 			this.$parent.popupShow1 = false

pages/user/pay/components/cm-record-popup.vue

@@ -15,14 +15,21 @@
 							<view class="list-item" v-for="(record, index) in dataList" :key="index">
 								<view class="list-item-cell">
 									<text class="text row-1">￥{{ record.receiptAmount | NumFormat }}</text>
-									<text class="text row-2">{{ record.payType | payTypeText }}</text>
+									<text class="text row-2">{{ payTypeText(record) }}</text>
 								</view>
 								<view class="list-item-cell">
 									<text class="text row-3">{{ record.receiptDate }}</text>
 								</view>
 							</view>
 						</view>
-						<view class="list-none" v-else>暂无支付记录</view>
+						<view class="list-main-none" v-else>
+							<image
+								class="none-image"
+								src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
+								mode=""
+							></image>
+							<view class="none-text">暂无支付记录</view>
+						</view>
 					</scroll-view>
 				</view>
 			</view>
@@ -46,28 +53,7 @@ export default {
 	data() {
 		return {
 			isIphoneX: this.$store.state.isIphoneX,
-			dataList: [
-				{
-					receiptAmount: '1000',
-					payType: 12,
-					receiptDate: '2022-10-31 17:24:35'
-				},
-				{
-					receiptAmount: '1000',
-					payType: 13,
-					receiptDate: '2022-10-31 17:24:35'
-				},
-				{
-					receiptAmount: '1000',
-					payType: 15,
-					receiptDate: '2022-10-31 17:24:35'
-				},
-				{
-					receiptAmount: '1000',
-					payType: 17,
-					receiptDate: '2022-10-31 17:24:35'
-				}
-			]
+			dataList: []
 		}
 	},
 	filters: {
@@ -79,7 +65,16 @@ export default {
 				return '0.00'
 			}
 		},
-		payTypeText(vaule) {
+		
+	},
+	created() {
+		this.dataList = this.list
+	},
+	methods: {
+		hidePopup() {
+			this.$parent.popupShow = false
+		},
+		payTypeText(record) {
 			//处理支付记录文字
 			const map = {
 				12: '企业网银',
@@ -87,17 +82,12 @@ export default {
 				14: '支付宝',
 				15: '微信支付',
 				16: '余额抵扣',
-				17: '建设银行借记卡（0053）'
 			}
-			return map[vaule]
-		}
-	},
-	created() {
-		// this.dataList = this.list
-	},
-	methods: {
-		hidePopup() {
-			this.$parent.popupShow = false
+			if(record.payType === 28 || record.payType === 29 ){
+				return record.quickPayStr
+			}else{
+				return map[record.payType]
+			}
 		}
 	}
 }
@@ -149,11 +139,23 @@ export default {
 		.tui-popup-scroll {
 			width: 100%;
 			height: 600rpx;
-			.list-none {
-				line-height: 80rpx;
-				font-size: $font-size-26;
-				color: #999999;
-				text-align: left;
+			.list-main-none{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				.none-image {
+					width: 220rpx;
+					height: 220rpx;
+					margin-bottom: 20rpx;
+				}
+				.none-text {
+					font-size: $font-size-28;
+					color: #999999;
+					line-height: 44rpx;
+				}
 			}
 			.list-main {
 				height: auto;

pages/user/pay/mixins/cardMixins.js

@@ -3,43 +3,20 @@ import Vue from 'vue'
 const cardMixins = {
     data() {
         return {
-            popupShow: false,// 控制支付记录弹窗
-            popupShow1: false,// 控制快捷支付银行弹窗
+            popupShow: false, // 控制支付记录弹窗
+            popupShow1: false, // 控制快捷支付银行弹窗
             tabCurrentIndex: 0,
-            weChatFlag:false, // 微信支付开关
-            B2BpayFlag: false,//企业网银支付开关
-            buttonText:'微信支付',
-            btnColor:'#0ABC64',
-            cards:{
-                type: 1,
-                flag: 0,
-                B2B: 'CCB',
-                name: '建设银行借记卡（0023）',
-                code:'45454545454521212'
-            },
-            list: [
-                {
-                    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'
-                }
-            ]
+            weChatFlag: false, // 微信支付开关
+            B2BpayFlag: false, //企业网银支付开关
+            buttonText: '微信支付',
+            btnColor: '#0ABC64',
+            cardsList:[],//查看银行列表
+            defaultCards: null,
+        }
+    },
+    filters:{
+        bankNumeberFilter(value){
+            return value.substring(value.length-4,value.length)
         }
     },
     computed: {
@@ -51,10 +28,10 @@ const cardMixins = {
         }
     },
     methods: {
-        handleChoiceaCards(data){
+        handleChoiceaCards(data) {
             //选择的银行
-            console.log('选择的银行',data)
-            this.cards = data
+            console.log('选择的银行', data)
+            this.quickParams = { ...this.quickParams , ...data }
             this.tabClick(3)
         },
         hanldeShowPopup(index) {
@@ -69,31 +46,27 @@ const cardMixins = {
                 break
             }
         },
-        tabClick(index) {//tab切换
+        tabClick(index) { //tab切换
             this.tabCurrentIndex = index
-            switch(index){
+            switch (index) {
             case 0:
-                this.btnColor='#0ABC64'
-                this.buttonText='微信支付'
+                this.btnColor = '#0ABC64'
+                this.buttonText = '微信支付'
                 break
             case 1:
-                this.btnColor='#007ACC'
-                this.buttonText='企业网银支付'
+                this.btnColor = '#007ACC'
+                this.buttonText = '企业网银支付'
                 break
             case 2:
-                this.btnColor='#16AFE8'
-                this.buttonText='个人网银支付'
+                this.btnColor = '#16AFE8'
+                this.buttonText = '个人网银支付'
                 break
             case 3:
-                this.btnColor='linear-gradient(90deg, #FF9300 0%, #FF5B00 100%)'
-                this.buttonText='使用银行卡快捷支付'
+                this.btnColor = 'linear-gradient(90deg, #FF9300 0%, #FF5B00 100%)'
+                this.buttonText = '使用银行卡快捷支付'
                 break
             }
         },
-        handleAddCard(index){
-            //跳转添加卡号
-            this.$api.navigateTo(`/pages/user/pay/card-add?type=${index}`)
-        },
         checkPayMode(range) {
             // 校验支付模式
             // test range = '4'
@@ -102,15 +75,8 @@ const cardMixins = {
             this.B2BpayFlag = range.indexOf('4') > -1
             // 设置默认支付方式
             this.tabCurrentIndex = this.weChatFlag ? 0 : this.B2BpayFlag ? 1 : 2
-        },
-        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]
-        },
+            this.tabClick(this.tabCurrentIndex)
+        }
     }
 }
 

services/pay.service.js

@@ -213,4 +213,79 @@ export default class PayService {
             isLoading: false ,
         }) 
     } 
+    /**
+	 *@param 获取快捷支付银行信息
+	 */
+    getQuickBankInfos (data = {}) {
+        return this.AjaxService.get({
+            url:'/order/pay/quick/bank/infos', 
+            data, 
+            isLoading: false ,
+        }) 
+    } 
+    /**
+	 *@param 银行卡绑定信息提交
+	 Int userId  									机构用户Id
+	 String quickPayBankNumber  				快捷支付用户银行卡号/信用卡号  
+	 String quickPayMobile  					快捷支付银行卡绑定手机号  
+	 String quickPayBankExpireTime  			快捷支付信用卡过期时间,只包含年月，格式yy-MM
+	 String quickPayUserName  					快捷支付用户姓名
+	 String idCard  							身份证号
+	 String cvvCode  							信用卡安全码
+	 */
+    orderPayQuickBindCard (data = {}) {
+        return this.AjaxService.post({
+            url:'/order/pay/quick/bind/card', 
+            data, 
+            isLoading: false ,
+        }) 
+    } 
+    /**
+	 *@param 银行卡绑定信息校验
+	 String orderId  							订单
+	 String infoId  							记录Id
+	 String bindCode  							短信验证码
+	 */
+    orderPayQuickBindCode (data = {},loadText) {
+        return this.AjaxService.get({
+            url:'/order/pay/quick/bind/code', 
+            data, 
+            isLoading: true ,
+            loadText: loadText
+        }) 
+    } 
+    /**
+	 *@param 银行卡绑定信息校验
+	 Int userId  								机构用户Id
+	 String quickPayBankNumber  				快捷支付用户银行卡号/信用卡号  
+	 String quickPayMobile  					快捷支付银行卡绑定手机号  
+	 String quickPayBankExpireTime  			快捷支付信用卡过期时间,只包含年月，格式yy-MM
+	 String quickPayUserName  					快捷支付用户姓名
+	 String idCard  							身份证号
+	 String cvvCode  							信用卡安全码
+	 Int quickPayFlag     						快捷支付类型标记1订单2超级会员3认证通会员4优惠券
+	 quickPayFlag=1普通订单  String payAmount 支付金额，单位元 int shopOrderId	子订单Id
+	 quickPayFlag=2 超级会员 vipRecordId会员购买记录Id
+	 quickPayFlag=3 认证通会员 vipRecordId会员购买记录Id
+	 quickPayFlag=4 优惠券购买 couponRecordId 优惠券购买记录id couponId购买优惠券Id
+	 source领取渠道1小程序 2网站
+	 */
+    orderPayQuickPay (data = {}) {
+        return this.AjaxService.post({
+            url:'/order/pay/quick/pay', 
+            data, 
+            isLoading: false ,
+        }) 
+    } 
+    /**
+	 *@param 快捷支付解绑银行卡
+	 cardId 银行卡绑定Id
+	 */
+    orderPayUnboundCard (data = {}) {
+        return this.AjaxService.get({
+            url:'/order/pay/quick/unbound/card', 
+            data, 
+            isLoading: false ,
+        }) 
+    } 
 }

services/user.service.js

@@ -940,5 +940,16 @@ export default class UserService {
 	        isLoading: false,
 	    }) 
     }
+    /**
+	 *@param 我的银行卡
+	 userId 用户
+	 */
+    userClubBanks (data = {}) {
+	    return this.AjaxService.get({
+	        url:'/user/club/banks', 
+	        data, 
+	        isLoading: false ,
+	    }) 
+    } 
 	 
 }