<template>
	<!-- 会员详情 -->
	<view class="content">
		<card :userInfo="userInfo"></card>
		<view class="memberdetailsStyle">
			<text>会员详情</text>
			<view @click="goUrl('member/billDetails')">
				<text>账单明细</text>
				<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
			</view>
			<view @click="goUrl('member/index')">
				<text>会员充值</text>
				<uni-icons type="right" style="color: #333;" size="20"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	import card from './components/card.vue'
	export default {
		components:{card},
		data() {
			return {
				info:null,
				inputshow: 0,
				memberlist: {},
				listdata: [],
				amount: '',
				shopUser: {},
				userInfo: {},
				
			}
		},
		onLoad(e) {
			this.info = e
			if (e.type == 'list') { //从列表进来的
				this.paygetShopByMember(e.shopId_id)
			} else {
				this.paygetShopByMember(e.shopId_id)
			}
			
			// this.paygetActive() //列表
		},
		onShow() {
			this.paygetShopByMember(this.info.shopId_id)
		},
		methods: {
			async paygetShopByMember(w) {
				let res = await this.api.paygetShopByMember({
					page: 1,
					pageSize: 10,
					userId: uni.cache.get('userInfo').id,
					shopId: w
				})
				this.userInfo = res.data.list[0]
			},
			async paygetActive() {
				let res = await this.api.paygetActive({
					shopId: uni.cache.get('shopUser'),
					page: 1,
					pageSize: 10
				})
				try {
					this.listdata = res.data.list
					this.amount = res.data.list[0].minNum
				} catch (e) {
					//TODO handle the exception
				}
			},
			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'), // 判断显示哪家的作品,
					amount: this.amount // 判断显示哪家的作品,
				})
				if (res) {
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.appId, // 微信支付商户号
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						paySign: res.data.paySign, //签名
						success: (res) => {
							uni.showToast({
								title: "支付成功"
							})
							setTimeout(res => {
								uni.navigateBack()
							}, 1000)
						},
						fail: (err) => {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							setTimeout(res => {
								uni.hideLoading()
							}, 1000)
						}
					});
					// #endif	
				}
			},
			clickinput(a, b) {
				console.log(a, b)
				this.inputshow = b
				this.amount = a.minNum
			},
			goUrl(url){
				uni.pro.navigateTo(url,this.userInfo)
			},
			 
		}
	}
</script>

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

	.content {
		padding: 0 28rpx;

		.towcontentitem {
			width: 100%;
			position: relative;
			padding: 32rpx;
			border-radius: 12rpx;
			background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			&::after {
				position: absolute;
				bottom: 0;
				right: 68rpx;
				content: '';
				display: inline-block;
				width: 240rpx;
				height: 232rpx;
				background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
				background-size: 100% 100%;
			}

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

			.towcontentitemone {
				width: 100%;
				position: relative;
				z-index: 9;

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



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

					.towcontentitemonetextone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
					}

					.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;
			}

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

			.towcontentitevip {
				position: absolute;
				right: 0;
				top: 0;
				width: 92rpx;
				height: 40rpx;
				font-size: 20rpx;
				background: #F4C380;
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				font-family: Source Han Sans CN-Medium;
				font-weight: Medium;

			}

			.towcontentitemthere {
				margin-left: 92rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: Medium;
				font-size: 24rpx;
				color: #333333;

				.towcontentitemtheretext {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}

		.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 {
			position: relative;
			bottom: 44rpx;
			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;
		}

		// 会员详情
		.memberdetailsStyle {
			margin-top: 32rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #fff;
			padding: 32rpx;
			height: 252rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			>text {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			>view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
</style>