front-end/mobile-code/src/pages/pay/index.vue

<template>
	<div class="app-content">
		<block v-if="option.pageStatus == 'recharge'">
			<div class="tabs-wrap">充值</div>
		</block>
		<block v-else>
			<app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
		</block>
		<!-- 直接付款 -->
		<block v-if="tabIndex == 0">
			<div class="logo-wrap">
				<div class="logo-img">
					<img :src="`${constant.imgUrl}/retail/user/attr-default.png`" alt mode="widthFix" />
				</div>
				<div class="app-size-30">{{ shopUser.userName }}</div>
			</div>
			<div class="pay-input-wrap">
				<pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
				<div class="balance">
					<span>账户余额 ¥</span>
					<span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
				</div>
				<!-- 按钮 -->
				<div class="btn-wrap">
					<button class="button-com red" @click="balancePayFn">余额支付</button>
					<button class="button-com green" @click="wexinPayFn">微信支付</button>
				</div>
			</div>
		</block>
		<!-- 我要配送 -->
		<block v-else>
			<app-delivery-module ref="appDelivery" />
		</block>
		<!-- <button @click="_pay">提交</button> -->
		<!-- 支付密码弹窗 -->
		<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>
</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 { getMiniAppUrl } from '@/utils/common'
import wexinPay from '@/utils/pay/wxPay'
import ModalModule from '@/components/plugin/modal'
// api
import { fastPay } from '@/api/pay'
import { recharge } from '@/api/member'
import { getShopUser } from '@/utils/auth'
export default {
	name: 'pay',
	components: {
		AppTabs,
		PayInputModule,
		AppDeliveryModule,
		ModalModule
	},
	data() {
		return {
			constant: this.$constant,
			inpFocus: false,
			// tab
			tabIndex: 0,
			tabs: [
				{
					name: '直接付款'
				},
				{
					name: '我要配送'
				}
			],
			// 初始form
			amount: '',
			form: {
				payWay: 0 // 0微信 1支付宝 2余额
			},
			// 支付相关 ============
			passwordModal: false,
			modalForm: {
				payPassword: ''
			},
			appendFrm: {
				anonymity: '0', // 是否匿名 0不 1要
				sendDistance: '', // 配送距离，根据腾讯js进行计算
				// goodsId: '', // 【商城下单特有字段】商品id
				// goodsStyleId: '', // 【商城下单特有字段】商品款式id
				// goodsNum: '', // 【商城下单特有字段】商品数量
				// couponId: '0', // 优惠券id，默认0没有使用优惠券
				receiveLat: '', // 收花人纬度
				receiveLong: '' // 收花人经度
			}
		}
	},
	computed: {
		...mapGetters({ shopUser: 'getShopUser' })
	},
	onLoad(option) {
		// this.option = this.$util.isEmpty(option) || {
		// 	account: 12358,
		// 	shopId: 15680
		// }
		this.init()
	},
	methods: {
		init() {
			// this.$util.getCheckLogin().then(res => {})
			getShopUser()
		},
		_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 ? '1' : '0',
					prePrice: this.amount
					// sourceType: 1,
					// shopId: 15680
				}
				host = fastPay
			}
			host(params).then(res => {
				wexinPay(res.data, this.paySuccess, this.payFail)
				// window.location.href = res.data.pay_button.mweb_url
			})
		},
		// tab切换
		tabChange(e) {
			this.tabIndex = e.index
		},
		// 点击输入框
		focusFn() {
			this.inpFocus = true
		},
		// 失焦
		blurFn() {
			this.inpFocus = false
		},
		// 点击键盘
		clickKeyFn(val) {
			this.amount = val
		},
		// 微信支付
		wexinPayFn() {
			this.form.payWay = 0
			this._pay()
		},
		// 余额支付
		balancePayFn() {
			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() {
			alert('支付成功!')
			this.$util.pageTo({
				url: '/pages/callback/index',
				type: 2,
				query: {
					pagestatus: 3
					// orderSn: this.option.orderSn,
					// payDiscountPrice: res.data.discountAmount
				}
			})
		},
		payFail() {
			alert('支付失败!')
		}
	}
}
</script>

<style lang="scss">
	.app-content {
		min-height: 0;
		padding-top: 100px;
		// padding-bottom: 120px;
	}
	.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;
	}

	.logo-wrap {
		padding-top: 70px;
		padding-bottom: 60px;
		text-align: center;
		.logo-img {
			width: 120px;
			margin: 0 auto 20px;
		}
	}
	.pay-input-wrap {
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 50px 80px 28px;
		.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;
			}
		}
	}
</style>