caimei-applets-mcare/pages/user/pay/card-under.vue

<template>
	<view class="container cashier">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="container-cash clearfix" v-else>
			<view class="container-wrapper">
				<view class="pay-content">
					<view class="pay-p"><text>待付金额</text></view>
					<view class="pay-money">
						<text class="pay-sm">￥</text>
						<text class="pay-bg">{{payableAmount | NumFormat}}</text>
					</view>
				</view>
			</view>
			<view class="pay-bring-wrapper clearfix">
				<view class="pay-bring-content">
					<view class="text-v title">转账信息 <text class="clipboard" @click.stop="clipboard(clipboardtEXT)">复制信息</text></view>
					<view class="text-v">开户行：{{ bankInfo.bankOfDeposit }}</view>
					<view class="text-v">银行卡号：{{ bankInfo.bankCardNo }}</view>
					<view class="text-v">户名：{{ bankInfo.bankUserName }}</view>
					<view class="text-content">请将订单款项转账至上述账号，转账完成后截图支付凭证，并在订单页面上传支付凭证。</view>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	const thorui = require('@/components/clipboard/clipboard.thorui.js')
	import bankMixins from './mixins/bankMixins.js'
	export default{
		mixins: [bankMixins],
		data(){
			return{
				bankInfo:{
					bankOfDeposit:'中国农业银行股份有限公司北京康运支行',
					bankCardNo:'11230401040009344',
					bankUserName:'李斌'
				},
				clipboardtEXT:`开户行：中国农业银行股份有限公司北京康运支行，银行卡号：11230401040009344，户名：李斌`,
				orderId:'',
				payableAmount:0,
				payOrderId:'',
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				skeletonShow:true,
				productImage:['https://static.caimei365.com/app/img/icon/icon-vxkecode.png'],
			}
		},
		onLoad(option) {
			this.initData(option)
		},
		filters: {
			NumFormat(value) {
				if(!value) return '0.00'
				/*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
				/*后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
				var intPart = Number(value) - Number(value)%1 //获取整数部分（这里是windy93的方法）
				var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
				var floatPart = '.00' //预定义小数部分
				var value2Array = value.toString().split('.')
				//=2表示数据有小数位
				if(value2Array.length == 2) {
					floatPart = value2Array[1].toString() //拿到小数部分

					if(floatPart.length == 1) { //补0,实际上用不着
						return intPartFormat + '.' + floatPart + '0'
					} else {
						return intPartFormat + '.' + floatPart
					}
				} else {
					return intPartFormat + floatPart
				}
			}
		},
		methods:{
			initData(e){
				console.log(e)
				this.orderId = e.orderId
				this.payOrderId ='#'+e.orderId+'#'
				// this.cmGetBankTypeLists()	
				this.PayOrderCheckoutCounter(this.orderId)
			},
			async PayOrderCheckoutCounter(orderId){
				try{
					const res = await this.PayService.PayOrderCheckoutCounter({orderId:orderId})
					const data = res.data.order
					this.payableAmount = data.payableAmount - data.receiptAmount  //待付金额
					setTimeout(()=>{
						this.skeletonShow = false
					},500)
				}catch(error){
					console.log('error',error)
				}
			},
			clipboard(data) {
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.$util.msg('复制成功',2000,true,'success')
					} else {
						this.$util.msg('复制失败',2000,true,'none')
					}
				})
			},
			previewImg (index) {//顶部商品图片预览
				let previewUrls = this.productImage
				uni.previewImage({
					current: 0, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			}
		},
		onShow() {

		}
	}
</script>

<style lang="scss">
	page{
		height: auto !important;
		background-color: #FFFFFF;
	}
	.container-cash{
		width: 100%;
		padding-bottom: 250rpx;
		.pay-bring-title{
			box-sizing: border-box;
			width: 100%;
			min-height: 96rpx;
			padding: 20rpx 24rpx;
			line-height: 48rpx;
			text-align: left;
			font-size: $font-size-24;
			background:rgba(255,234,221,1);
			color: $color-system;
		}
		.container-wrapper{
			width:662rpx;
			margin: 0 auto;
			.pay-title{
				font-size: $font-size-32;
				line-height: 44rpx;
				text-align: center;
				color: #2A86FF;
				margin: 40rpx 0 0 0;
				width: 100%;
				float: left;
			}
			.pay-content{
				width: 574rpx;
				height: 136rpx;
				padding: 52rpx 44rpx;
				background: url(https://static.caimei365.com/app/mini-mcare/icon/icon_payUnd@2x.png) no-repeat;
				background-size: cover;
				float: left;
				margin-top: 40rpx;
				.pay-p{
					font-size: $font-size-26;
					color: #FFFFFF;
					line-height: 36rpx;
				}
				.pay-money{
					color: #FFFFFF;
					line-height: 84rpx;
					font-weight: bold;
					.pay-sm{
						font-size: $font-size-26;
					}
					.pay-bg{
						font-size: 50rpx;
					}
				}
			}
			.pay-check{
				width: 100%;
				height: auto;
				float: left;
				.check-title{
					width: 622rpx;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 20rpx;
					margin-top: 24rpx;
					.text{
						font-size: $font-size-28;
						color: $text-color;
						text-align: left;
						float: left;
					}
					.icon{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						line-height: 40rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: $font-size-24;
						background: radial-gradient(circle,rgba(225,86,22,1) 0%,rgba(255,170,0,1) 67%,rgba(249,185,156,1) 100%);
						float: right;
					}
				}
				.pay-checked{
					width: 100%;
					height: auto;
					.pay-item{
						width: 618rpx;
						height: 96rpx;
						border: 2px solid #F5F5F5;
						border-radius: 30rpx;
						padding: 20rpx;
						margin: 24rpx 0;
						display: flex;
						background-color: #FFFFFF;
						&.current{
							border-color:$color-system;
							.item-r{
								.icon-duigou{
									color: $color-system;
								}
							}
						}
						.item-l{
							flex: 8;
							.item-icon{
								width: 96rpx;
								height: 96rpx;
								float: left;
								text-align: center;
								line-height: 96rpx;
								margin-right: 20rpx;
								.iconfont{
									font-size:88rpx;
								}
								.icon-weixinzhifu{
									color: #09BB07;
								}
								.icon-gerenwangyinzhifu{
									color: #034582;
								}
								.icon-daewangyinzhuanzhang{
									font-size: 68rpx;
									color: #034582;
								}
								.icon-qiyewangyinzhifu{
									color: #004889;
								}
							}
							.item-texts{
								line-height: 96rpx;
								font-size:$font-size-26;
								color: $text-color;
							}
							.item-text{
								line-height: 48rpx;
								font-size:$font-size-26;
								.txt-p{
									color: $text-color;
								}
								.txt-t{
									font-size: $font-size-24;
									color: #999999;
								}
							}
						}
						.item-r{
							flex: 2;
							text-align: center;
							line-height: 96rpx;
							.icon-duigou{
								font-size: 60rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
		.pay-button{
			width: 100%;
			float: left;
			margin-top:30rpx;
			.btn{
				width: 662rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #FFFFFF;
				margin: 0 auto;
				text-align: center;
				background:$btn-confirm;
			}
		}
		.pay-statustext{
			width: 100%;
			height: auto;
			float: left;
			margin-top:40rpx;
			.pay-statustext-inner{
				width: 662rpx;
				height: 100%;
				margin: 0 auto;
				.pay-icon{
					width: 62rpx;
					height: 100%;
					float: left;
					text-align: center;
					.iconfont{
						color: #FF2A2A;
						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: #FF2A2A;
					text-align: justify;
				}
			}
		}
		.pay-bring{
			width: 100%;
			min-height: 190rpx;
			padding: 24rpx 0;
			background-color: #FFFFFF;
			box-shadow:0px 3px 6px rgba(0,0,0,0.16);
			position: fixed;
			bottom: 0;
			left: 0;
			border-radius: 30rpx 30rpx 0 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			.pay-bring-line{
				display: flex;
				align-items: center;
				.line{
					display: inline-block;
					width: 48rpx;
					height: 2px;
					background-color: #707070;
				}
			}
			.pay-bring-content{
				width: 654rpx;
				height: auto;
				padding: 0 24rpx;
				.text{
					font-size: $font-size-24;
					color: #666;
					line-height: 44rpx;
					text-align: center;
					&.bg-color{
						color: $color-system;
						line-height: 88rpx;
					}
				}
				.text-v{
					font-size: $font-size-28;
					color: #4A4F58;
					line-height: 70rpx;
					text-align: left;
					&.bg-color{
						line-height: 44rpx;
						color: $color-system;
					}
					.clipboard{
						width: 84rpx;
						height: 36rpx;
						background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
						text-align: center;
						font-size: $font-size-24;
						color: #FFFFFF;
						border-radius: 18rpx;
						line-height: 36rpx;
						display: inline-block;
						margin-left: 10rpx;
					}
				}
				
			}
		}
		.pay-bring-wrapper{
			width: 100%;
			padding: 24rpx 0;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			flex-direction: column;
			.pay-bring-content{
				width: 654rpx;
				height: auto;
				padding: 0 24rpx;
				margin-top: 60rpx;
				.text-title{
					width: 100%;
					height: 320rpx;
					margin-bottom: 20rpx;
					image{
						width: 320rpx;
						height: 320rpx;
						display: block;
						margin: 0 auto;
					}
				}
				.text{
					font-size: $font-size-24;
					color: #666;
					line-height: 44rpx;
					text-align: center;
					&.bg-color{
						color: $color-system;
						line-height: 88rpx;
					}
				}
				.text-v{
					font-size: $font-size-28;
					color: #4A4F58;
					line-height: 70rpx;
					text-align: justify;
					margin-bottom: 30rpx;
					&.bg-color{
						line-height: 44rpx;
						color: $color-system;
					}
					.clipboard{
						height: 48rpx;
						background: #E2E2E2;
						text-align: center;
						font-size: $font-size-24;
						color: #999999;
						border-radius: 24rpx;
						line-height: 46rpx;
						display: inline-block;
						margin-left: 24rpx;
						border: 1px solid #f7f7f7;
						box-sizing: border-box;
						padding: 0 10px;
					}
				}
				.text-content{
					width: 100%;
					background-color: #F5F5F5;
					box-sizing: border-box;
					padding: 24rpx;
					line-height: 44rpx;
					font-size: $font-size-28;
					color: $color-system;
					text-align: justify;
					margin-top: 60rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
	.freight-alert{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;
		transition: all 0.4s;
		&.none{
			display: none;
		}
		&.show{
			display: block;
		}
		.content{
			width: 422rpx;
			height:434rpx;
			position: absolute;
			background: $bg-color;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			padding: 20rpx 32rpx;
			border-radius: 12rpx;
			.title{
				width: 100%;
				height: 68rpx;
				line-height: 68rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: center;
				position: relative;
				.icon-iconfontguanbi{
					width: 68rpx;
					height: 68rpx;
					text-align: center;
					line-height: 68rpx;
					position: absolute;
					right: 0;
					top: 0;
					font-size: $font-size-36;
					color: #999999;
				}
			}
			.text-content{
				width: 100%;
				height: auto;
				.text{
					padding: 20rpx 0;
					line-height: 44rpx;
					font-size: $font-size-26;
					color:#666666;
					text-align: justify;
				}
				.text-p{
					line-height: 44rpx;
					font-size: $font-size-26;
					color:$color-system;
					text-align: left;
				}
			}
		}
	}
</style>