caimei-applets-caimei/pages/user/order/order-payment.vue

<template>
	<view class="container cashier">
		<cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
		<view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
			<view class="container-wrapper">
				<view class="pay-title" v-show="isConfirm">
					<text>订单提交成功，请支付订单</text>
				</view>
				<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.toFixed(2)}}</text>
					</view>
				</view>
				<view class="pay-check">
					<view class="check-title">
						<view class="text">选择支付方式</view>
						<view class="icon" @click="showTips">i</view>
					</view>
					<view class="pay-checked">
						<view  class="pay-item" :class="{ 'current' : tabCurrentIndex === 0}"   @click="tabClick(0)" >
							<view class="item-l">
								<view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
								<view class="item-texts"><text>微信支付</text></view>
							</view>
							<view class="item-r">
								<text class="iconfont icon-gougou"></text>
							</view>
						</view>
						<view  class="pay-item" :class="{ 'current' : tabCurrentIndex === 1}"   @click="tabClick(1)" >
							<view class="item-l">
								<view class="item-icon"><text class="iconfont icon-yinlianzhifu"></text></view>
								<view class="item-text">
									<view class="txt-p">企业网银支付</view>
									<view class="txt-t">需要在电脑端汇款</view>
								</view>
							</view>
							<view class="item-r">
								<text class="iconfont icon-gougou"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-button">
				<view class="btn" @click.stop="goOrderCash" :style="{'background':btnColor}">{{buttonText}}</view>
			</view>
		</view>
		<view class="alert spec" :class="specClass" v-if="isShowTip">
			<!-- 选择支付弹窗说明 -->
			<view class="freight-alert"  @tap="hideTips">
				<view class="content">
					<view class="title">
						<text>提示</text>
						<text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
					</view>
					<view class="text-content">
						<view class="text">除了以下两种支付方式，您还可以通过线下直接转账的方式付款。获取转账信息请联系您的采美销售人员或直接拨打客服热线。</view>
						<view class="text-p">客服热线：</view>
						<view class="text-p">0755-22907771 / 15338851365</view>
						<view class="text-p">（周一至周五 09:00-18:00）</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { PayOrderCheckoutCounter } from "@/api/order.js"
	export default{
		data(){
			return{
				orderID:'',
				payableAmount:0,
				emptyWrapperH: '',
				nvabarData: {		//顶部自定义导航
					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '选择支付方式',  // 导航栏 中间的标题
					haveBack:false,
					textLeft:true
				},
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				tabCurrentIndex:0,
				isShowTip:false,
				isConfirm:false,
				buttonText:'使用微信支付',
				btnColor:'#09BB07'
			}
		},
		onLoad(option) {
			this.initData(option)
		},
		methods:{
			initData(e){
				console.log(this.orderID)
				switch(e.type){
					case 'confirm':
						this.isConfirm = true
						this.nvabarData.haveBack = false
						break;
					case 'payfirm':
						this.isConfirm = false
						this.nvabarData.haveBack = true
						break;
				}
				this.orderID = e.orderID
				PayOrderCheckoutCounter({orderId:this.orderID}).then(response =>{
					console.log(response)
					this.payableAmount = response.data.order.payableAmount - response.data.order.receiptAmount  //待付金额
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			goOrderCash(){
				switch(this.tabCurrentIndex){
					case 0:
						this.$api.navigateTo(`/pages/user/order/order-pay?type=0&orderID=${this.orderID}`)
						break;
					case 1:
						this.$api.navigateTo(`/pages/user/order/order-pay?type=1&orderID=${this.orderID}`)
						break;
				}
			},
			tabClick(index) {//tab切换
				this.tabCurrentIndex = index;
				switch(index){
					case 0:
						this.btnColor="#09BB07"
						this.buttonText='使用微信支付';
						break;
					case 1:
						this.btnColor="#034582"
						this.buttonText='使用网银支付';
						break;
				}
			},
			hanldNavigateBack(){//页面返回
				uni.navigateBack({
					delta: 1
				});
			},
			showTips(){
				this.isShowTip=true
			},
			hideTips(){
				this.isShowTip=false
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
		height: auto !important;
	}
	.container-cash{
		width: 100%;
		.container-wrapper{
			width:662rpx;
			margin: 0 auto;
			.pay-title{
				font-size: $font-size-32;
				line-height: 44rpx;
				text-align: center;
				color: #2A86FF;
				margin: 54rpx 0;
				width: 100%;
				float: left;
			}
			.pay-content{
				width: 574rpx;
				height: 136rpx;
				padding: 52rpx 44rpx;
				background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E4%BB%A3%E4%BB%98%E9%87%91%E9%A2%9Dbg%402x.png) no-repeat;
				background-size: cover;
				float: left;
				margin-top: 54rpx;
				margin-bottom: 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;
						&.current{
							border-color:$color-system;
							.item-r{
								.icon-gougou{
									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-yinlianzhifu{
									color: #034582;
								}
							}
							.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{
									color: #999999;
								}
							}
						}
						.item-r{
							flex: 2;
							text-align: right;
							line-height: 96rpx;
							.icon-gougou{
								font-size: 66rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
		.pay-button{
			width: 100%;
			float: left;
			margin-top: 200rpx;
			.btn{
				width: 662rpx;
				height: 88rpx;
				border-radius: 14rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #FFFFFF;
				margin: 0 auto;
				text-align: center;
				background:$btn-confirm;
			}
		}
	}
	.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>