jje_uniapp/components/pay/pay.vue

<template>
	<!--支付组件-->
	<view>
		<uni-popup ref="popup" type="bottom" @maskClick="maskClick()" :catchtouchmove="true">
			<view class=" payView">
				<view class="flex-row justify-between">
					<text class="payType">请选择支付方式</text>
					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
				</view>
<!--				<view class="payTitle">-->
<!--					<text>选择微信支付或余额支付</text>-->
<!--				</view>-->

				<view class=" payItemView">

					<view v-if="lovePay && loveCardList.length>0" class="payItem flex-row" >
							<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center  flex-grow">
								<text>亲情卡支付</text>
								<scroll-view scroll-y class="loveCard">
									<view class="flex-row justify-between loveCardItem " v-for="(item,index) in loveCardList" :key="index" @click="payLoveItem(0,index,item)">
										<view class="select flex-col" >
											<text>{{item.presentUserName}}</text>
											<text class="balance">本月剩余额度：{{item.totalBalance}}</text>
										</view>
										<view class="flex-col justify-center">
											<u-icon v-if="curServiceTab === 0 && item.select" name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
											<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
										</view>
									</view>
								</scroll-view>

							</view>
					</view>

					<view v-if="blPay" class="payItem  flex-row justify-between" @click="payItem(1)">
						<view class="flex-row">
							<u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center ">
								<text>余额支付</text>
								<text class="balance">可用余额{{balance}}</text>
							</view>
						</view>
						<view class="flex-col justify-center">
							<u-icon v-if="curServiceTab === 1" name="checkmark-circle-fill" color="#38db38"
									size="25"></u-icon>
							<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>
					</view>

					<view v-if="wxPay" class="payItem  flex-row justify-between" @click="payItem(2)">
						<view class="flex-row">
							<u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center">
								<text class="payName">微信支付</text>
							</view>
						</view>
						<view class="flex-col justify-center">
							<u-icon v-if="curServiceTab === 2" name="checkmark-circle-fill" color="#38db38"
									size="25"></u-icon>
							<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>
					</view>
				</view>
				<view class="commitBtn" @click="payment">
					<text>确定</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="passwordPopup">
			<view class="passwordView flex-col">
				<view class="h-pay-title flex-row justify-center">
					<text>请输入交易密码</text>
				</view>
				<view class="h-tab-bar flex-row justify-center">
					<u-code-input v-model="password" mode="box" dot></u-code-input>
				</view>
				<view class="flex-row justify-center">
					<view class="h-operate-btn flex-row justify-center" @click="balancePay">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	/**
	 *   props参数
	 *1，needPassword：Boolean类型 是否需要输入密码。true,使用余额支付时开启密码输入框，false，使用余额支付时不弹出密码输入框直接支付。默认false。
	 *2，wxPay：Boolean类型，是否显示微信支付选项。true--显示，false--不显示。默认true。
	 *3，blPay：Boolean类型，是否显示余额支付选项。true--显示，false--不显示。默认true。
	 *4，selectBlPay：Boolean类型，余额支付选项是否能够选中。使用时请根据用户的余额进行判断。true--能，false--不能。默认true。
	 *5，orderNo：String类型，支付的订单号。
	 *6，openType：Number类型，1--支付预约费用，2---支付子订单费用。
	 *7，balance：用户余额
	 *8.totalAmount 需要支付的金额
	 *   function 回调函数
	 * 1，payResult(e),支付结果回调。
	 * 2,improperClose 点击遮罩层和关闭按钮x 关闭弹窗时的回调
	 */
	export default {
		name: "myPay",
		props: {
			needPassword: {
				type: Boolean,
				default () {
					return false
				}
			},
			wxPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			lovePay: {
				type: Boolean,
				default () {
					return true
				}
			},
			blPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			selectBlPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			orderNo: {
				type: String,
				default () {
					return ''
				}
			},
			openType: {
				type: Number,
				default () {
					return 1
				}
			},
			balance: {
				type: Number,
				default () {
					return 0
				}
			},
			totalAmount: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				curServiceTab: 2,
				userInfo: {},
				password: '',
				loveCardId:'',
				loveCardList:[],
			};
		},
		created(){
			this.getMyReceiveList()
		},
		methods: {

			change(e){
				console.log(this.loveCardId)
				console.log(e)
				this.loveCardId = e
			},
			closePayPopup() {
				this.$refs.popup.close()
				this.$emit('improperClose')
			},
			openPopup() {
				this.password = ''
				this.$refs.popup.open()
			},

			payLoveItem(num,index,loveCard){
				console.log(loveCard.totalBalance*1, this.totalAmount*1)
				if (loveCard.totalBalance*1 < this.totalAmount*1 && num == 0){
					console.log(this.totalAmount)
					uni.$u.toast('余额不足')
					return
				}
				this.curServiceTab = num
				this.loveCardList.forEach(item=>{
					item.select = false
				})
				loveCard.select=true
				this.loveCardId = loveCard.id
				this.$set(this.loveCardList,index,loveCard)
			},
			payItem(num) {
				if (!this.selectBlPay && num == 1) {
					console.log(this.selectBlPay)
					uni.$u.toast('余额不足')
					return
				}
				this.curServiceTab = num
			},
			maskClick(){
				this.$emit('improperClose')
			},

			payment() {
				this.$refs.popup.close()
				if (this.curServiceTab === 0) {
					this.familyCardPay()
				}
				if (this.curServiceTab === 1) {
					if (this.needPassword) {
						this.$refs.passwordPopup.open()
					} else {
						//余额支付
						this.balancePay()
					}
				}
				if (this.curServiceTab === 2) {
						//微信支付
					if (this.openType == 1){
						this.wechatPay()     //支付预约费用
					}else {
						this.wechatPayTradeNo()   //支付子订单费用
					}
				}
			},



			//支付子订单的统一下单接口
			wechatPayTradeNo(){
				this.$api.wechatPayTradeNo({
					tradeNo: this.orderNo
				}).then((res) => {
					this.requestPayment(res.data.data)
				}).catch((err) => {
					this.$emit('payResult',{
						payResult:false,
						res:err
					})
				});
			},

			//支付预约费用的统一下单接口
			wechatPay() {
				this.$api.wechatPay({
					orderNo: this.orderNo
				}).then((res) => {
					this.requestPayment(res.data.data)
				}).catch((err) => {
					this.$emit('payResult',{
						payResult:false,
						res:err
					})
				});
			},


			familyCardPay(){
				//亲情卡支付预约费用
				this.$api.familyCardPay({
					orderNo: this.orderNo,
					loveCardId: this.loveCardId
				}).then(res=>{
					this.$emit('payResult',{
						payResult:true,
						res:res
					})
				}).catch((res) => {
					this.$emit('payResult',{
						payResult:false,
						res:res
					})
				});
			},

			//调起微信支付
			requestPayment(param){
				uni.requestPayment({
					appId: param.appid,
					timeStamp: param.timestamp + "",
					nonceStr: param.noncestr,
					package: "prepay_id=" + param.prepayid,
					signType: "RSA",
					paySign: param.sign,
					success: res => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					},
					fail: res => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					}
				});
			},

			//余额支付
			balancePay() {
				if (this.password.length < 6 && this.needPassword) {
					uni.showToast({
						title: "交易密码不能小于6位"
					})
					return;
				}
				this.$refs.passwordPopup.close()

				if (this.openType == 1){    // 支付预约费用
					this.$api.balancePay({
						orderNo: this.orderNo,
						password: this.password
					}).then((res) => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					}).catch((res) => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					});
				}else {  //支付子订单费用
					this.$api.trade({
						tradeNo: this.orderNo,
						password: this.password
					}).then((res) => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					}).catch((res) => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					});
				}

			},

			//查询我的亲情卡
			getMyReceiveList(){
				this.$api.getMyReceiveList().then(res=>{
					this.loveCardList = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payView {
		/*height: 638rpx;*/
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 24rpx 32rpx;
	}

	.payType {
		font-size: 32rpx;
		font-weight: bord;
		color: #111111;
		line-height: 48rpx;
	}

	.x {
		width: 35rpx;
		height: 35rpx;
		border-radius: 18rpx;
	}

	.payTitle {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin-top: 8rpx;
	}
	.payItemView{
		min-height: 345rpx;
	}

	.payItem {
		background: #FAFAFA;
		border-radius: 20rpx;
		padding: 34rpx 32rpx;
		margin-top: 32rpx;
	}

	.payName {
		margin-left: 24rpx;
	}

	.balance {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}

	.commitBtn {
		width: 686rpx;
		height: 108rpx;
		background: #FFE05C;
		border-radius: 60rpx;
		margin-top: 32rpx;

		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #111111;
		line-height: 108rpx;
		text-align: center;
	}

	.passwordView {
		background: #FFFFFF;
		width: 686rpx;
		height: 400rpx;
		border-radius: 20rpx;
		padding: 34rpx 0;
	}

	.h-tab-bar {
		margin-top: 80rpx;
	}

	.h-operate-btn {
		width: 550rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFE05C;
		line-height: 80rpx;
		text-align: center;
		margin-top: 80rpx;
	}
	.select{
		width: 400rpx;
	}

	.loveCard{
		flex-grow: 1;
		max-height: 300rpx;
	}
	.loveCardItem{
		margin-top: 15rpx;
		background: #FFFFFF;
	}
</style>