<template>
	<view class="towcontentitem">
		<view class="towcontentitemone flex-start">
			<image class="towcontentitemoneimage" :src="userInfo.logo" mode="aspectFill"></image>
			<view class="towcontentitemonetext flex-colum-start">
				<text class="towcontentitemonetextone">{{userInfo.chainName || '暂无昵称'}}</text>
			</view>
		</view>
		<view class="towcontentitemthere flex-start">
			余额：<text class="towcontentitemtheretext">{{userInfo.amount || '0.00'}}</text>
		</view>
		<view class="towcontentitemtow flex-between">
			<text class="towcontentitemtowetext">VIP{{userInfo.code || '无'}}</text>
		</view>
		<view class="towcontentitevip">
			VIP{{userInfo.is_vip}}
		</view>
		<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/erweima.png" class="imgStyle" mode=""
			@click="clickEvent"></image>
	</view>
</template>

<script>
	export default {
		props: ['userInfo'],
		data() {
			return {}
		},
		methods: {
			clickEvent() {
				uni.navigateTo({
					url: '/pages/pay_code/pay_code?shopInfo='+JSON.stringify(this.userInfo)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
			display: flex;
			align-items: center;
			
			.towcontentitemtheretext {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}

	.imgStyle {
		width: 54rpx;
		height: 52rpx;
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
		// border: 2px solid #fff;
		z-index: 666;
	}
</style>