<template>
	<view class="page">
		<view class="box">
			<view class="title">充值金额</view>
			<view class="money">
				¥
				<input class="fill" @input="emtermoney" type="digit" />
			</view>

			<view class="huiyuanbot">
				<view class="behuiyuanbtn" @click="sureti">确认</view>
			</view>
		</view>
		<view class="cover" v-if="showwrap">
			<view class="coverBox">
				<view class="top">
					<view class="close" @click="hidewrap">
						<image src="../../static/colose.png" mode="widthFix" />
					</view>
					支付
				</view>
				<!-- <view class="monetall">
					<view class="moneyNum">￥2560.00</view>
					<view class="moneyTitle">订单总额</view>
				</view> -->
				<view class="payBox">
					<view class="payItem" @click="zhifubao" :data-id="2">
						<view class="left">
							<image src="../../static/paya.png" mode="widthFix" />
							支付宝
						</view>
						<view class="right">
							<image src="../../static/check.png" mode="widthFix" class="check" v-if="pay_type==2" />
							<image src="../../static/nocheck.png" mode="widthFix" class="check" v-else />
						</view>
					</view>
					<view class="payItem" @click="weixin" :data-id="1">
						<view class="left">
							<image src="../../static/payb.png" mode="widthFix" />
							微信
						</view>
						<view class="right">
							<image src="../../static/check.png" mode="widthFix" class="check" v-if="pay_type==1" />
							<image src="../../static/nocheck.png" mode="widthFix" class="check" v-else />
						</view>
					</view>
				</view>

				<view class="submit" @click="pay">确认支付（￥{{money}}）</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showwrap: false,
				money: '',
				pay_type: ''
			};
		},
		methods: {
			sureti() {
				if (this.money == '') {
					uni.showToast({
						title: '请输入充值金额',
						icon: "none"
					})

					return false
				}
				this.showwrap = true
			},
			weixin(e) {
				this.pay_type = e.currentTarget.dataset.id;
			},
			zhifubao(e) {
				this.pay_type = e.currentTarget.dataset.id;
			},

			// 正则判断输入两位小数

			emtermoney(e) {
				var money;
				if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
					money = e.detail.value;
				} else {
					money = e.detail.value.substring(0, e.detail.value.length - 1);
				}

				this.money = money
			},

			// 隐藏弹出
			hidewrap() {
				this.showwrap = false
			},
			// 支付
			pay() {
				let that = this;
				if (this.pay_type == "") {
					uni.showToast({
						title: "请选择支付方式",
						icon: "none"
					})
					return false
				}

				var url = 'money/create_order';
				var params = {
					pay_type: that.pay_type,
					total: that.money
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.paymoney(res.data.data.order_money_id)

				}).catch((err) => {

				})

			},
			// 支付接口
			paymoney(id) {
				let that = this;

				// if(that.pay_type == 2) {

				// }

				var url = 'money/pay';
				var params = {
					order_money_id: id
				}

				console.log(params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					console.log('支付方式',that.pay_type)
					if (that.pay_type == 2) {
						// 支付宝支付
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.data.result,
							success(r) {
								console.log(r)
							}
						})
					} else if (that.pay_type == 1) {
						console.log(JSON.stringify(res.data.data.result))
						// 微信支付
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: JSON.stringify(res.data.data.result), //微信、支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								if (res.errMsg == 'requestPayment:ok') {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
								}

							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}



				}).catch((err) => {
					console.log(err)

				})
			},


		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
		height: 100%;
	}

	.behuiyuanbtn {
		width: 686rpx;
		height: 88rpx;
		background: #C29445;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 10rpx;

	}

	.huiyuanbot {
		position: fixed;
		background: #fff;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 116rpx;
		padding: 14rpx 32rpx;
	}

	.box {
		margin-top: 20rpx;
		padding: 20rpx 32rpx 16rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eaeaea;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
		margin: 40rpx 0;
	}

	.money {
		display: flex;
		align-items: center;
		font-size: 72rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.fill {
		margin-left: 20rpx;
	}

	.cover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
	}

	.coverBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 566rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.top {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(6, 18, 31, 1);
		border-bottom: 1px solid #eeeeee;
	}

	.close {
		width: 48rpx;
		position: absolute;
		left: 32rpx;
		top: 24rpx;
	}

	.close image {
		width: 100%;
	}

	.monetall {
		margin-top: 70rpx;
	}

	.moneyNum {
		font-size: 68rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(194, 148, 69, 1);
		text-align: center;
	}

	.moneyTitle {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 68, 76, 1);
		text-align: center;
	}

	.payBox {
		margin-bottom: 80rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.payItem {
		margin-top: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(6, 18, 31, 1);
	}

	.left image {
		width: 48rpx;
		margin-right: 32rpx;
	}

	.right {
		width: 48rpx;
	}

	.check {
		width: 100%;
	}

	.submit {
		width: 686rpx;
		height: 88rpx;
		background: #c29445;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(254, 254, 254, 1);
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}
</style>