yuepay.vue 3.82 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<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>
王建威's avatar
王建威 committed
16
					<text class="tips">不包含佣金</text>
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
				</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'
							})
						}
					}
				})
郑秀明's avatar
郑秀明 committed
81 82 83
			},
			goBack(){
				this.$backup();
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
			}
		}
	}
</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;
王建威's avatar
王建威 committed
112
					position: relative;
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
				}
			}
		}
		.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;
	}
王建威's avatar
王建威 committed
175 176 177 178 179
	.tips {
		color: #8F99A7;
		position: absolute;
		right: 0;
	}
180
</style>