web-app-v1/pages/pay-order/pay-order.vue

<template>
	<view class="pay-order">
		<view class="need">待支付<text>￥{{ money }}</text></view>
		<view class="app-item ">
			<text>账户余额</text>
			<text class="basecolor">￥{{ hadMoney | numDot }}</text>
		</view>
		<view class="app-item">
			<text>还需充值</text>
			<text class="basecolor">￥{{ (money - hadMoney) >= 0 ? (money - hadMoney) : 0 }}</text>
		</view>
		<view class="big-btn bg" @click="pay">确认支付</view>
	</view>
</template>

<script>
	import { _API_OrderPay } from '@/apis/order.js'
	export default {
		data() {
			return {
				order_num: '',
				order_id: '',
				money: '',
				fromS: ''
			}
		},
		computed: {
			hadMoney() {
				return this.$store.state.userinfo.money
			}
		},
		onLoad({ order_id, money, fromS, order_num }) {
			this.order_num = order_num
			this.order_id = order_id
			this.money = money
			this.fromS = fromS
		},
		methods: {
			pay() {
				if (this.money - this.hadMoney > 0) {
					uni.toast('您的余额不足，无法付款')
				} else {
					uni.loading()
					_API_OrderPay({ order_id: this.order_id }).then(({ code, message }) => {
						if (code == 200) {
							this.$store.commit('userinfo/REDUCEMONEY', this.money)
							uni.$emit('INIT')
							uni.$emit('PAYSUCCESS', this.order_num)
							uni.showModal({
								showCancel: false,
								title: '提示',
								content: '付款成功',
								success: () => {
									uni.navigateBack({ delta: this.fromS ? 2 : 1 })
								}
							})
						} else {
							uni.toast(message)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.pay-order {
		height: 100vh;
		background: $app-base-bg;
		.need {
			@include flex();
			height: 120rpx;
			background: #FFFFFF;
			font-size: 42rpx;
			text {
				font-weight: bold;
				margin-left: 57rpx;
			}
		}
		.app-item {
			margin-top: 20rpx;
		}
		.big-btn {
			margin-top: 390rpx;
			width: 400rpx;
		}
	}
</style>