yuepay.vue

<template>
	<view class="content">
		<view class="nav-content">
			<uni-icons color="#212121" class="search-icon-arrowleft" size="24" type="arrowleft" @click="goBack" />
			<view class="title">余额支付</view>
		</view>
		<view class="order_info">
			<view class="info_content">
				<view class="order_price">
					<text>订单总价：</text>
					<text style="color: #8F99A7;">￥{{order_price}}</text>
				</view>
				<view class="money">
					<text>账户余额：</text>
					<text style="color: #8F99A7;">￥{{money}}</text>
				</view>
			</view>
			<view class="password_content">
				<view class="title">
					支付密码
				</view>
				<input type="password" class="password" v-model="password" placeholder="默认支付密码:123456" />
			</view>
		</view>
		<button type="primary" class="submit-btn" :loading="loading" @click="handleSumit">立即支付</button>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import md5 from '../../common/md5.js';
	export default{
		components: {
			uniIcons
		},
		data(){
			return {
				money: '',
				order_price: '',
				order_id: '',
				password: '',
				loading: false
			}
		},
		onLoad(option){
			const {amount, money, order_id} = option;
			this.money = money || '0.00';
			this.order_price = amount || '0.00';
			this.order_id = order_id || '';
		},
		methods: {
			handleSumit(){
				this.loading = true;
				uni.request({
					url: `/uni/api/repayment/GoPay`,
					method: 'post',
					dataType: 'json',
					data: {
						amount: parseFloat(this.order_price),
						order_id: this.order_id,
						payment_code: "tbopay",
						payment_name: "余额支付",
						password: md5(this.password)
					},
					success: (res) => {
						const {data} = res;
						this.loading = false;
						if(data.code === 0){
							uni.navigateTo({
								url: '/pages/payresult/payresult'
							})
						}else{
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
						}
					}
				})
			},
			goBack(){
				this.$backup();
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #F8F8F8;
		min-height: 100vh;
		.order_info{
			background-color: #fff;
			margin: 0 24rpx;
			min-height: 228rpx;
			background: rgba(255,255,255,1);
			border-radius: 20rpx;
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 24rpx;
			.info_content{
				border-bottom: 1rpx solid #ececec;
				.order_price,.money{
					color: #212121;
					font-size: 28rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					height: 40rpx;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.password_content{
			padding-top: 20rpx;
			.title{
				font-size: 28rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				margin-bottom: 20rpx;
			}
			.password{
				height: 96rpx;
				line-height: 96rpx;
				padding-bottom: 8rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #ECECEC;
				font-size: 30rpx;
				padding-left: 20rpx;
			}
		}
	}
	.nav-content{
		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		position: relative;
		background-color: #fff;
		.search-icon-arrowleft{
			width: 40rpx;
			position: absolute;
			left: 20rpx;
		}
		.title{
			text-align: center;
			width: 100%;
			font-size: 30rpx;
		}
	}
	.price{
		text-align: center;
		margin-top: 150rpx;
		font-size: 60rpx;
	}
	.submit-btn{
		margin: 0 48rpx;
		margin-top: 80rpx;
		font-size: 34rpx;
	}
	uni-button[type=primary]{
		background-color: #FFCF59; 
		color: rgba(0,0,0,1);
	}
	uni-button[loading][type=primary]{
		background-color: #dcb14d;
	}
	.button-hover[type=primary]{
		color: rgba(0,0,0,.5);
		background-color: #dcb14d;
	}
</style>