<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-money='item.money' 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 class='input_box flex-y-center'>
					<text class='input_label'>￥</text>
					<input v-model="moneys" type="digit" @focus="getpricefocus" @input="getprice"
						 placeholder="其他充值金额"
						maxlength="5"></input>
				</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="login-btn flex-center login-back" @click="getBack">
				返回
			</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: [{
						name: '',
						money: 50,
					}, {
						name: '',
						money: 100,
					}, {
						name: '',
						money: 200,
					},
					{
						name: '',
						money: 500,
					},
					{
						name: '',
						money: 1000,
					},
					{
						name: '',
						money: 2000,
					},
				],
				indexAct: null,
				pay_type: 2,
				id: null,
				is_pay: false,
				showBottom: false,
				isnav: false,
				recharge_desc: "",
				money: 0,
				moneys: '',
				store_user: {},
				openid: '',
			}
		},
		onLoad(e) {

			this.store_user = uni.getStorageSync("store_user");

			// #ifdef H5
			this.isweb();
			// #endif   

			// #ifdef MP-WEIXIN
			uni.login({
				success: (res) => {
					console.log(res)
					// return
					if (res.code) {
						//发起网络请求 
						this.request({
							url: 'Smdcshop/xcx_openid',
							data: {
								code: res.code,
								super_id: this.store_user.super_id,
								type: 1,
							},
						}).then(res => {
							if (res.code == '200') {
								this.openid = res.data.openid;
							}
						})

					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			// #endif

		},
		onShareAppMessage(e) {

		},

		methods: {
			getBack(e){
				uni.navigateTo({
					url:"../my/my"
				})
			},
			gzhurl(e) {
				this.request({
					url: "user/gzhurl",
					data: {
						type: 4,
					},
				}).then(res => {
					if (res.data.url) {
						window.location.href = res.data.url
					}
				}).catch((res) => {
					console.log("message", res)
				});
			},

			isweb() {
				function GetRequest() {
					var url = location.search; //获取url中"?"符后的字串
					var theRequest = new Object();
					if (url.indexOf("?") != -1) {
						//判断是否有参数
						var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
						var strs = str.split("&");
						console.log(strs)
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
						}
					}
					console.log(theRequest)
					return theRequest;
				}

				if (GetRequest().code) {
					this.request({
						url: "Smdcshop/xcx_openid",
						data: {
							code: GetRequest().code,
							super_id: this.store_user.super_id,
							type: 2,
						},
					}).then(res => {
						console.log(res, "user/gzhurl");
						if (res.code == 200) {
							this.openid = res.data.openid;
						}
					}).catch((res) => {
						console.log("message", res)
					});
				} else {
					this.gzhurl()
				}
			},


			getpricefocus(e) {
				this.paytype = -1;
				this.money = this.money;
			},

			getprice(e) {
				this.money = e.detail.value;
				this.indexAct = null;
			},

			choise(e) {
				this.moneys = '';
				this.money = e.currentTarget.dataset.money;
				this.indexAct = e.currentTarget.dataset.index;
			},

			pay(e) {
				var pay_type = 1;
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					var pay_type = 2;
				}
				// #endif
				this.request({
					url: "Smdcshop/jhwechatcz",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						money: this.money,
						openid: this.openid,
						type: pay_type,
					},
				}).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.timeStamp + "",
								'nonceStr': autoinfo.nonceStr + "",
								'package': autoinfo.package,
								'signType': autoinfo.signType,
								'paySign':autoinfo.paySign,

								success: (t) => {
									if (t.errMsg == 'chooseWXPay:ok') {
										uni.showModal({
											title: '提示',
											showCancel: false,
											content: "支付成功",
											success: (e) => {
												if (e.confirm) {
													uni.navigateTo({
														url: "./rechargeRecord"
													})
												}
											}
										});
									}
								},
								// 支付取消回调函数
								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.timeStamp + "",
							nonceStr: autoinfo.nonceStr,
							package: autoinfo.package,
							signType: autoinfo.signType,
							paySign: autoinfo.paySign,
							//微信、支付宝订单数据
							success: (res) => {
								console.log('success:', res);
								uni.showModal({
									title: "提示",
									content: "支付成功",
									showCancel: false,
									success: (res) => {
										uni.navigateTo({
											url: "./rechargeRecord"
										})
									}
								})
							},
							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;

	}

	.input_box {
		display: flex;
		padding: 20rpx;
		border-bottom: 1px solid #efefef;
		flex: 1;
		font-size: 40rpx;
	}

	.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;
	}
	
	.login-back{
		margin-top: 40rpx;
	}
	
</style>
