front-end/mallApp/src/pages/pay/index.vue

<template>
	<div class="app-content pay-wrap">
		<!-- 我要配送 -->
		<!-- <block v-else> -->
		<div class="delivery-wrap" v-if="!$util.isEmpty(orderShop)">
			<div class="shop-logo-wrap" v-if="!$util.isEmpty(orderShop)">
				<div class="logo-img">
					<img :src="orderShop.merchant.smallLogoUrl | default_img" alt mode="widthFix" />
				</div>
			</div>
			<div class="module-com pay-input-wrap">
				<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
				<div class="balance" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'">
					<span>账户余额 ¥</span>
					<span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
				</div>
			</div>
			<!-- 查看更多 -->
			<div class="view-more" :class="{'open' : tabIndex == 1}" @click="tabIndex = tabIndex == 0 ? 1 : 0">
				<button type="primary" size="mini" plain="true">{{ tabIndex == 0 ? '点我填写收花人' : '收起' }}</button>
			</div>
			<!-- 查看更多 -->
			<block v-if="tabIndex == 1">
				<app-delivery-module ref="appDelivery" :anonymous="true" />
			</block>
			<!-- 可选优惠 -->
			<div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
				<div class="module-tit">可选优惠</div>
				<div class="module-det">
					<app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
				</div>
			</div>
			<!-- 按钮 -->
			<div class="btn-wrap">
				<button v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'" class="button-com red" @click="balancePayFn">余额支付</button>
				<button class="button-com green" v-if="isWxMiniapp()" @click="wexinPayFn">微信支付</button>
				<button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
			</div>
		</div>
		<!-- </block> -->
		<!-- 支付密码弹窗 -->
		<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
			<template v-slot:content>
				<div class="app-modal-input-wrap">
					<div class="inp-list-line">
						<!-- <div class="line-label">支付密码</div> -->
						<div class="line-input">
							<input type="password" v-model="modalForm.payPassword" :adjust-position="false" class="inp-input" />
						</div>
					</div>
				</div>
			</template>
		</modal-module>
		<!-- 阿里支付 -->
		<div class="al-pay" v-html="aliPayHtml" ref="alipayWap"></div>
		<!-- 未设置支付密码弹窗 -->
		<alert-module :show="setPassModal" btnText="去设置" btnColor="#FF2842" padding="66rpx 24rpx 66rpx 24rpx" @click="hideAlert">
			<div class="go-login-module">
				<div>暂未设置密码，去设置密码！</div>
			</div>
		</alert-module>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import AppTabs from '@/components/plugin/tabs'
	import PayInputModule from './components/pay-input'
	import AppDeliveryModule from '@/components/app-delivery'
	import wexinPay from '@/utils/pay/wxPay'
	import ModalModule from '@/components/plugin/modal'
	import AppCouponSel from '@/components/app-coupon-sel'
	import AlertModule from '@/components/plugin/alert'
	import { isWxMiniapp } from '@/utils/common'
	import { share } from '@/mixins'
	import { fastPay } from '@/api/pay'
	import { recharge } from '@/api/member'
	import { getOrderShop } from '@/utils/config'
	export default {
		name: 'pay',
		components: {
			AppTabs,
			PayInputModule,
			AppDeliveryModule,
			ModalModule,
			AppCouponSel,
			AlertModule
		},
		mixins: [share],
		data() {
			return {
				constant: this.$constant,
				inpFocus: false,
				tabIndex: 0,
				tabs: [
					{
						name: '直接付款'
					},
					{
						name: '我要配送'
					}
				],
				amount: '',
				form: {
					payWay: 0 // 0微信 1支付宝 2余额
				},
				aliPayHtml: '',
				passwordModal: false,
				modalForm: {
					payPassword: ''
				},
				appendFrm: {
					sendDistance: '', // 配送距离，根据腾讯js进行计算
					receiveLat: '', // 收花人纬度
					receiveLong: '' // 收花人经度
				},
				payCallData: null,
				// 优惠折扣
				discountArr: false,
				// 未设置密码
				setPassModal: false
			}
		},
		computed: {
			...mapGetters({ orderShop: 'getOrderShop' }),
			...mapGetters({ shopUser: 'getShopUser' })
		},
		onLoad(option) {
            // #ifdef H5
			this.specialInit()
            // #endif
		},
		mounted() {},
		methods: {
			isWxMiniapp(){
        return isWxMiniapp()
      },
      init(){
			  this.specialInit();
      },
			specialInit() {
				// #ifdef H5
				// 微信二次分享
				let href = window.location.href
				if (href.indexOf('from=singlemessage') > 0) {
					location.href = `${this.$constant.formal}/#/pages/pay/index${this.$util.parse(this.option)}`
					return false
				}
				// #endif
				if (this.option.pageType) {
					this.tabIndex = parseInt(this.option.pageType)
				}
				getOrderShop(true).then(res => {
					this.inpFocus = true
					uni.setNavigationBarTitle({
						title: `您正在向【${res.shop.merchantName} ${res.shop.shopName}】付款`
					})

					this.$refs.couponSel._getUserDiscount().then(status => {
						this.discountArr = status
					})

					// 设置分享
					let shareParams = {
						title: `点我付款`, // 分享标题
						desc: '享随机优惠，最高20元', // 分享内容
						imgUrl: `${this.$constant.imgUrl}/retail/pay.jpg`,
						// #ifdef H5
						pagePath: `${this.$constant.formal}/#/pages/pay/index?account=${res.shop.id}&store=0&sourceType=3`,
						// #endif
						// #ifndef H5
						pagePath: `/pages/pay/index?account=${res.shop.id}&store=0&sourceType=3`
						// #endif
					}
					// this.jweixinFn(shareParams)
				})
			},
			_pay() {
				if (!this.amount) {
					this.$msg('请先输入金额！')
					return false
				}
				let params = {}
				let host = null
				if (this.option.pageStatus == 'recharge') {
					params = {
						amount: this.amount
					}
					host = recharge
				} else {
					params = {
						needSend: this.tabIndex == 0 ? '0' : '1',
						prePrice: this.amount,
						payWay: this.form.payWay,
						payPassword:this.modalForm.payPassword
					}
					if (this.tabIndex == 1) {
						let deliveryForm = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {}
						let deliveryRegion = this.$refs.appDelivery.region ? this.$refs.appDelivery.region : {}
						params = {
							...params,
							...deliveryForm,
							...deliveryRegion
						}
					}
					if (this.option.store) {
						params.store = this.option.store
					}
					if (this.option.sourceType) {
						params.sourceType = this.option.sourceType
					}
					if (!this.$util.isEmpty(this.discountArr)) {
						params.couponId = this.$refs.couponSel.couponId
					}
					host = fastPay
				}
				host(params).then(res => {
					this.payCallData = res.data
					//错误返回判断
					if(res.code == 0){
						this.$msg(res.msg)
						return false
					}
					if (this.form.payWay == 0) {
						wexinPay(res.data, this.paySuccess, this.payFail)
					} else if (this.form.payWay == 1) {
						this.aliPayHtml = res
						this.$nextTick(() => {
							this.$refs.alipayWap.children[0].submit()
						})
					} else {
						this.paySuccess()
					}
				})
			},
			// tab切换
			tabChange(e) {
				this.tabIndex = e.index
				this.inpFocus = true
			},
			// 点击输入框
			focusFn() {
				this.inpFocus = true
			},
			// 失焦
			blurFn() {
				this.inpFocus = false
			},
			// 点击键盘
			clickKeyFn(val) {
				this.amount = val
			},
			// 支付宝支付
			aliPayFn() {
				this.form.payWay = 1
				this._pay()
			},
			// 微信支付
			wexinPayFn() {
				this.form.payWay = 0
				this._pay()
			},
			// 暂未设置密码
			hideAlert() {
				this.$util.pageTo('/pages/user/password')
			},
			// 余额支付
			balancePayFn() {
				if (!this.$util.isEmpty(this.shopUser) && this.shopUser.hasPayPwd == 0) {
					this.setPassModal = true
				} else {
					this.form.payWay = 2
					this.passwordModal = true
				}
			},
			passwordModalClick(e) {
				if (e.index === 0) {
					this.modalCancel()
				} else {
					this._pay()
				}
			},
			modalCancel() {
				this.passwordModal = false
				this.modalForm.payPassword = ''
			},
			// 支付成功
			paySuccess() {
				this.$util.pageTo({
					url: '/pages/callback/index',
					type: 2,
					query: {
						pageStatus: 3,
						orderSn:this.payCallData.orderSn,
						totalPrice:this.payCallData.totalPrice,
						id: this.payCallData.orderId,
						...this.params
					}
				})
			},
			payFail() {
			
			}
		}
	}
</script>

<style lang="scss">
	.app-content {
		min-height: calc(100vh - 20px);
		padding-top: 20px;
	}
	.tabs-wrap {
		position: fixed;
		top: 0;
		width: 100%;
		height: 80px;
		line-height: 80px;
		text-align: center;
		background-color: #fff;
		font-size: 30px;
		box-shadow: 4px 4px 10px #eee;
	}

	.pay-wrap {
		.logo-wrap {
			padding-top: 70px;
			padding-bottom: 60px;
			text-align: center;
			.logo-img {
				width: 120px;
				margin: 0 auto 20px;
				border-radius: 50%;
				img {
					border-radius: 50%;
				}
			}
		}
		.pay-input-wrap {
			background-color: #fff;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			padding: 50px 80px 28px;
			margin-bottom: 0 !important;
			.balance {
				margin-top: 30px;
				color: $fontColor2;
			}
			.btn-wrap {
				width: 100%;
				margin-top: 64px;
				.button-com {
					display: block;
					margin-bottom: 20px;
					padding-top: 30px;
					padding-bottom: 30px;
				}
			}
		}
	}

	// 我要配送
	.delivery-wrap {
		.module-com {
			margin-bottom: 20px;
			background-color: #fff;
			.module-tit {
				padding: 20px 18px;
				font-size: 28px;
				font-weight: 600;
				border-bottom: 1px solid $borderColor;
			}
			.module-det {
				padding: 0 30px;
			}
		}
		// 金额
		.pay-input-wrap {
			padding: 50px 36px 38px;
			.balance {
				margin-top: 30px;
				color: $fontColor2;
			}
		}
		.shop-logo-wrap {
			padding-bottom: 20px;
			@include disFlex(center, center);
			.logo-img {
				width: 120px;
				border-radius: 50%;
				margin: 10px auto;
				// margin-right: 20px;
				img {
					border-radius: 50%;
				}
			}
		}
		// 可选优惠
		.discount-wrap {
			.module-det {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
		// 匿名派送
		.none-name-delivery {
			// padding-left: 30px;
			padding: 26px 30px;
			// margin-top: 40px;
			margin-bottom: 20px;
			background-color: #fff;
			.none-name-text {
				margin-left: 14px;
				color: $fontColor2;
			}
		}
		// 按钮
		.btn-wrap {
			width: calc(100% - 60px);
			margin: 64px auto 0;
			padding-bottom: 20px;
			.button-com {
				display: block;
				margin-bottom: 20px;
				padding-top: 30px;
				padding-bottom: 30px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// 查看更多
		.view-more {
			width: 100%;
			// padding-top: 10px;
			padding-bottom: 20px;
			margin-bottom: 20px;
			font-size: 28px;
			@include disFlex(center, center);
			background-color: #fff;
			color: #3385ff;
			.view-more-text {
				margin-right: 14px;
			}
			i {
				font-size: 30px;
				font-weight: 600;
			}
			&.open {
				i {
					transform: rotate(180deg);
				}
			}
		}
	}
</style>