vue--支付组价

组件：

<template>
	<div>
		<div class="pay-box" v-if="showItem">
			<img class="close" src="../assets/xcx_img/close.png" @click="showItem = false" alt="">
			<div class="p-title">请选择支付方式</div>
			<div class="money">￥{{money}}</div>
			<div class="m-tip">当前支付金额</div>
			<div class="p-item" v-for="(item, index) in payMode" :key="index" @click="payFunc(item)"> <img :src="item.icon" alt="">{{item.name}}</div>
		</div>
		<div class="mask" @click="showItem = false" v-if="showItem"></div>
		<tip ref="tip" :tip="tip_text"></tip>
	</div>
</template>

<script>
	import tip from 'components/tip'
	export default {
		data() {
			return {
				base_site: this.$img_host,
				payMode: [],
				showItem: false,
				tip_text: ''
			}
		},
		components: {
			tip
		},
		created() {
			this.getPayMode()
		},
		methods: {
			showPayItem() {
				this.showItem = true
			},
			payFunc(item) {
				let apiUrl = ''
				let cbUrl = ''
				let apiData = {}
				if (this.payType == 'order') {
					apiUrl = 'pay/doPay'
					cbUrl = 'pay/callbackPay'
					apiData = {
						url_type: 1,
						order_code: this.orderCode,
						payment_code: item.payment_code
					}
				} else if (this.payType == 'coupon') {
					apiUrl = 'coupon/payCoupon'
					cbUrl = 'coupon/payCallback'
					apiData = this.couponData
					apiData.payment_code = item.payment_code
				}
				this.axios.post(apiUrl, apiData).then(res => {
					let payInfo = ''
					let pay_no = res.data.data.pay_no
					if (item.payment_code == 'wxpay') {
						payInfo = JSON.parse(res.data.data.payInfo)
						let params = {
							appid: payInfo.appid,
							partnerid: payInfo.partnerid, // merchant id
							prepayid: payInfo.prepayid, // prepay id
							noncestr: payInfo.noncestr, // nonce
							timestamp: payInfo.timestamp, // timestamp
							sign: payInfo.sign, // signed string
						}
						this.wechatPayFunc(params, pay_no, cbUrl)
					} else if (item.payment_code == 'alipay') {
						payInfo = res.data.data.payInfo
						this.alipayFunc(payInfo, pay_no, cbUrl)
					}
				})
			},
			wechatPayFunc(params, pay_no , cbUrl) {
				let _this = this
				Wechat.sendPaymentRequest(params, function() {
					_this.axios.post(cbUrl, {
						url_type: 1,
						pay_no: pay_no
					}).then(res => {
						_this.tip_text = '支付成功！'
						_this.$refs.tip.showTipFunc()
						_this.showItem = false
						setTimeout(() => {
							_this.$emit('paySuccess', res.data.data)
						}, 1000)
					})
				}, function(reason) {
					_this.tip_text = '支付失败，请重试！'
					_this.$refs.tip.showTipFunc()
				});
			},
			alipayFunc(payInfo, pay_no, cbUrl) {
				let _this = this
				cordova.plugins.alipay.payment(payInfo, (res) => {
					// 支付成功
					_this.axios.post(cbUrl, {
						url_type: 1,
						pay_no: pay_no
					}).then(res => {
						_this.tip_text = '支付成功！'
						_this.$refs.tip.showTipFunc()
						_this.showItem = false
						setTimeout(() => {
							_this.$emit('paySuccess', res.data.data)
						}, 1000)
					})
				}, (error) => {
					// 支付失败
					///alert("支付失败" + error.resultStatus);
					_this.tip_text = '支付失败，请重试！'
					_this.$refs.tip.showTipFunc()
				})
			},
			getPayMode() {
				this.axios.post('pay/getPayMode', {
					url_type: 1
				}).then(res => {
					this.payMode = res.data.data
				})
			}
		},
		props: {
			orderCode: {
				type: String,
				default: ''
			},
			money: {
				type: String,
				default: ''
			},
			payType: { //支付类型 订单支付，优惠券支付
				type: String,
				default: 'order'
			},
			couponData: { //优惠券参数
				type: Object,
				default: () => {}
			}
		}
	}
</script>

<style scoped>
	.pay-box {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background: #fff;
		border-top: 2px solid #eee;
		padding: 0 30px;
		box-sizing: border-box;
		padding-bottom: 60px;
	}

	.p-item {
		display: flex;
		align-items: center;
		/* padding: 30px 0; */
		font-size: 28px;
		height: 128px;
		border-bottom: 2px solid #EAEAEA;
		position: relative;
		box-sizing: border-box;
	}

	.p-item img {
		width: 63px;
		height: 63px;
		margin-right: 20px;
	}

	.p-item:last-child {
		border: none;
	}

	.p-item::after {
		position: absolute;
		content: '';
		width: 24px;
		height: 24px;
		border: 2px solid #BFBFBF;
		top: 50px;
		right: 30px;
		transform: rotate(45deg);
		border-left: 0;
		border-bottom: 0;

	}

	.p-title {
		color: #666;
		font-size: 28px;
		padding: 30px 0;
		font-weight: 600;
	}

	.money {
		text-align: center;
		color: #000;
		font-size: 42px;
		font-weight: 600;
		margin-top: 60px;
	}

	.m-tip {
		text-align: center;
		font-size: 26px;
		color: #999;
		margin-top: 10px;
		margin-bottom: 30px;
	}

	.close {
		position: absolute;
		right: 30px;
		top: 15px;
		width: 42px;
		height: 42px;
	}
</style>

调用：

<button @click="payFun">去支付<buttom>
//money:支付金额  payType：支付类型（微信，支付宝） paySuccess：支付成功之后执行的方法
	组件快：<pay ref="pay" :money="price" payType="coupon" @paySuccess="paySuccessFunc"></pay>

  import pay from "components/payItem";

return {
        price: "",
      };

    components: {
      pay,
      [Dialog.Component.name]: Dialog.Component
    },

      paySuccessFunc(res) {
        //支付成功之后执行的代码块
      },
    payFun() {
      this.$refs.pay.showPayItem();//出发组件方法
    },