<template>
	<view class="content">
		<view class="towcontentitem">
			<!-- <image class="towcontentitemimage" src="@/static/recharges.png" mode="widthFix"></image> -->
			<view class="towcontentitemone flex-start">
				<image class="towcontentitemoneimage" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="towcontentitemonetext flex-colum-start">
					<text class="towcontentitemonetextone">{{userInfo.nickName || '暂无昵称'}}</text>
				</view>

			</view>
			<view class="towcontentitemprogress">
				<!-- 可用余额:{{memberlist.money || '0.00'}}
				<text style="font-size: 16rpx; color:#000 ; margin-left: 10rpx;">冻结金额:{{memberlist.freeze_money}}</text>
				<view class="towcontentitemoneabsolute">
					加购
				</view> -->
			</view>
			<view class="towcontentitemtow flex-between">
				<text class="towcontentitemtowetext">{{memberlist.vip_number}}</text>
				<!-- <text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text> -->
			</view>
		</view>
		<view class="therecontent">
			<input type="number" v-model="amount" placeholder="自定义金额">
		</view>
		<view class="fourcontent flex-start">
			<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
				<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
					@click="clickinput(item,index)">
					<text>充{{item.amount}}元</text>
					<!-- <text style="margin-top: 10rpx;">送{{item.deliver}}</text> -->
				</view>
			</view>
		</view>
		<view class="fivecontent" @click="userbalancerechangesub">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputshow: 0,
				memberlist: {},
				listdata: [{
						amount: 100
					},{
						amount: 200
					},{
						amount:300
					},{
						amount:400
					},{
						amount:500
					},{
						amount:1000
					}
				],
				amount: '',
				shopUser: {},
				userInfo: {}
			}
		},
		onLoad(e) {
			this.shopUser = uni.cache.get('shopUser')
			this.userInfo = uni.cache.get('userInfo')
		},
		methods: {
			async userbalancerechangesub() {
				if (this.amount == null || this.amount == '') {
					uni.showToast({
						title: '金额不能为空',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.paymemeberIn({
					shopId: uni.cache.get('shopUser').shopId, // 判断显示哪家的作品,
					amount: this.amount // 判断显示哪家的作品,
				})
				if (res) {
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.payAppId, // 微信支付商户号
						timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.paynonceStr, // 随机字符串
						package: res.data.payPackage, // 固定值
						signType: res.data.paySignType, //固定值
						paySign: res.data.paySign, //签名
						success: (res) => {
							uni.showToast({
								title: "支付成功"
							})
							uni.navigateBack()
						},
						fail: (err) => {
							setTimeout(res => {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								})
								uni.hideLoading()
							}, 2000)
						}
					});
					// #endif	
				}
			},
			clickinput(a, b) {
				console.log(a, b)
				this.inputshow = b
				this.amount = a.amount
			},
			eeInfo(e) {
				uni.pro.navigateTo('my/member/memberinfo', {
					id: e,
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0 28rpx;

		.towcontentitem {
			width: 100%;
			position: relative;
			padding: 32rpx;
			border-radius: 12rpx;

			.fourcontentitemabsolute {
				z-index: 9;
				position: absolute;
				right: 0;
				top: 0;
				padding: 6rpx 28rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
				background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
				border-radius: 0px 12rpx 0px 12rpx;
				opacity: 1;
			}

			.towcontentitemimage {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
				z-index: 5;
			}

			.towcontentitemone {
				margin-top: 42rpx;
				width: 100%;
				position: relative;
				z-index: 9;

				.towcontentitemoneimage {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}



				.towcontentitemonetext {
					height: 76rpx;
					margin-left: 16rpx;

					.towcontentitemonetextone {
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #422A07;
					}

					.towcontentitemonetexttow {
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #422A07;
					}

				}
			}

			.towcontentitemprogressa {
				padding: 8rpx 44rpx;
				z-index: 10;
				position: relative;
				margin-top: 54rpx;
			}

			.towcontentitemprogress {
				z-index: 10;
				position: relative;
				margin-top: 24rpx;
				border-radius: 28rpx;
				font-size: 32rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333;

				.towcontentitemoneabsolute {
					position: absolute;
					padding: 0 44rpx;
					height: 56rpx;
					line-height: 56rpx;
					top: 0;
					right: 0;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
					box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
					border-radius: 28rpx;
				}
			}

			.towcontentitemtow {
				z-index: 10;
				position: relative;
				margin-top: 42rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #422A07;
			}
		}

		.therecontent {
			margin-top: 32rpx;
			position: relative;
			padding: 22rpx 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 8rpx;

			input {
				padding-left: 30rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
			}
		}

		.therecontent::after {
			position: absolute;
			top: 50%;
			left: 32rpx;
			transform: translateY(-50%);
			content: '￥';
			display: inline-block;
			width: 28rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.fourcontent {
			.fourcontentlnage {
				width: 33.33%;

				.fourcontentitem {
					margin: 24rpx 10rpx;
					padding: 16rpx 0;
					text-align: center;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1rpx solid #333333;
					font-size: 28rpx;
					font-family: Roboto-Medium, Roboto;
					font-weight: 500;
					color: #333333;
				}

				.fourcontentitems {
					margin: 24rpx 10rpx;
					padding: 16rpx 0;
					text-align: center;
					border-radius: 8rpx;
					background: #F1CB66;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #F1CB66;
					font-size: 28rpx;
					font-family: Roboto-Medium, Roboto;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

		}

		.fivecontent {
			margin-top: 62rpx;
			padding: 20rpx 0;
			text-align: center;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			border-radius: 8rpx;
			background: #F1CB66;
		}
	}
</style>