<template>
	<view class="content">
		<!-- <swiper-bar :banner="banner"></swiper-bar> -->
		<view class="home">
			<view class="home-title">
				充值金额
			</view>
			<view class="home-content box-pack-between wrap">
				<view class="home-item" @click="choise" :class="index==indexAct?'home-item-active':''" 
				:data-index='index' :data-id='item.id' :data-name='item.name'
				 v-for="(item,index) of list" :key='index'>
					<view class="flex-center hg100">
						<view class="">
							<view class="color-ffa ft28">
								<text class="ft48"> {{item.money}} </text> 元
							</view>
							<view class="ft24">
								{{item.name}}
							</view>
						</view>
					</view>
					<!-- <image v-if="pay_type==1" class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image> -->
				</view>
			</view>

			<view class="home-title">
				支付方式
			</view>

			<view class=" box-pack-between ">
				<view @click="bindtype" data-index="1" class="flex-center home-pay ft28 pr">
					<image class="icon-pay" src="../../static/images/wx.png" mode=""></image>
					<text>微信</text>
					<image class="icon-pay-jiao" src="../../static/images/jiao.png" mode=""></image>
				</view>
			</view>

		  <view class="recharge_desc" v-if="recharge_desc">
			 充值提示:{{recharge_desc}}
		  </view>


			<view class="hg100px"></view>

			<view class="login-btn flex-center" @click="pay">
				立即充值
			</view>


			<view class="hg50px"></view>
		</view>


	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				// banner: [],
				list: [],
				indexAct: null,
				pay_type: 2,
				id: null,
				is_pay: false,
				showBottom: false,
				isnav: false,recharge_desc:"",name:'',
			}
		},
		onLoad(e) {
			this.request({
				url: "recharge/lists",
				data: {
					token: uni.getStorageSync("token"),
				},
			}).then(res => {
				console.log(res, "res")
				if (res.code === '200') {
					this.recharge_desc=res.recharge_desc;
					this.list = res.data;
				}
			});
		},
		onShareAppMessage(e) {

		},
		methods: {

			choise(e) {
				this.id = e.currentTarget.dataset.id;
				this.indexAct = e.currentTarget.dataset.index;
				this.name= e.currentTarget.dataset.name;
			},

			pay(e) {
				var pay_type = 13;
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					var pay_type = 12;
				}
				// #endif
				this.request({
					url: "recharge/create",
					data: {
						
						token: uni.getStorageSync("token"),
						package_id: this.id,
						pay_type,
						name:this.name,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						let autoinfo = res.data;
						// #ifdef H5
						getWXSign().then(res => {
							console.log('wx_getLocation');
							this.$wx.chooseWXPay({
								'appId': autoinfo.appid,
								'timestamp': autoinfo.time + "",
								'nonceStr': autoinfo.nonce_str + "",
								'package': 'prepay_id=' + autoinfo.prepay_id,
								'signType': 'MD5',
								'paySign': autoinfo.sign1,
								success: (t) => {
									if (t.errMsg == 'chooseWXPay:ok') {
										uni.showModal({
											title: '提示',
											showCancel: false,
											content: "支付成功",
											success: (e) => {
												if (e.confirm) {
													// this.payorder();
													uni.navigateTo({
														url:"./recharge_log"
													})
												}
											}
										});
									}
								},
								// 支付取消回调函数
								cencel: function(res) {
									// Toast('用户取消支付~')
									uni.showToast({
										title: "用户取消支付",
										icon: "none",
									})
								},
								// 支付失败回调函数
								fail: function(res) {
									uni.showToast({
										title: "支付失败",
										icon: "none",
									})
									// Toast('支付失败~')
								}
							})
						})
						// #endif

						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: autoinfo.time + "",
							nonceStr: autoinfo.nonce_str,
							package: "prepay_id=" + autoinfo.prepay_id,
							signType: "MD5",
							paySign: autoinfo.sign1,
							//微信、支付宝订单数据
							success: (res) => {
								console.log('success:', res);
								uni.showModal({
									title: "提示",
									content: "支付成功",
									showCancel: false,
									success: (res) => {
										uni.navigateTo({
											url:"./recharge_log"
										})
									}
								})
							},
							fail: (err) => {
								console.log(err, "err")
								uni.showModal({
									title: "提示",
									content: "支付失败",
									showCancel: false,
									success: (res) => {
										return
									}
								})
							}
						});
						// #endif	
					}
				}).catch(res=>{
					if (res.code == "4004") {
						uni.showModal({
							title: "提示",
							content: "请先进行账号绑定",
							confirmText: "去绑定",
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../personal/weixin",
									})
								}
							}
						})
					}else{
						uni.showToast({
							title:res.message,
							icon: "none",
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 690rpx;
		margin: 0 auto;

	}

	.home-title {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		opacity: 1;
		padding: 31rpx 0;
	}

	.home-item {
		width: 48%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
		opacity: 1;
		border-radius: 4rpx;
		text-align: center;
		display: inline-block;
		margin: 0 0rpx 30rpx 0;
		color: #3387ff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.home-content .home-item:nth-child(3n) {
		margin-right: 0rpx;
	}

	.home-content .home-item-active {
		background: #3387ff;
		color: #FFFFFF;
	}

	.home-content .home-item-active .color-ffa {
		color: #FFFFFF;
	}


	.ft48 {
		font-weight: bold;
	}


	.home-pay {
		width: 330rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 10rpx rgba(168, 168, 168, 0.16);
		border-radius: 4rpx;
		position: relative;
	}

	.icon-pay {
		width: 48rpx;
		height: 48rpx;
		margin-right: 20rpx;
	}

	.icon-pay-jiao {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 38rpx;
		height: 38rpx;
	}

	.login-btn {
		width: 630rpx;
		height: 90rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		// box-shadow: 0px 2rpx 12rpx rgba(252, 219, 178, 1);
		opacity: 1;
		border-radius: 45rpx;
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		opacity: 1;
	}

	.login-btns {
		width: 630rpx;
		height: 90rpx;

		background: #ccc;
		box-shadow: 0px 2rpx 12rpx #FFFFFF;
		opacity: 1;
		border-radius: 45rpx;
		margin: 0 auto;
		color: #fff;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		opacity: 1;
		margin-top: 30rpx;
	}

	.hg100px {
		height: 100rpx;
	}
	.recharge_desc{
		padding: 20rpx 0;
		font-size:24rpx;
		color: #999;
	}
</style>
