<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="会员中心" color="#fff" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
		<view class="head justify-center align-end">
			<view class="user-card br20 relative">
				<view class="">
					<view class="">LV.{{ userinfo.vip }}</view>
					<view class="">当前权益：{{ userinfo.notice || '(无)' }}</view>
					<view class="mt30">
						<cmd-progress stroke-shape="round" style="height: 100%;background: rgba(255,255,255,0.45);border-radius: 30rpx;" :percent="userinfo.jin_du || 0" :show-info="false"
							stroke-color="#FFFFFF"
							:strokxxeWidth="5"></cmd-progress>
					</view>
					<view class="">还需消费{{ userinfo.upgrade_money }}可升级至V{{ userinfo.last_vip }}</view>
				</view>
				<view class="flex">
					<image class="img100" :src="$img1('my/zuan1.png')"></image>
					<text>{{userinfo.vip}}</text>
				</view>
			</view>
		</view>
		<view class="quanyi relative">
			<view class="list-title ziti">
				<text>会员权益</text>
			</view>
			<view class="">
				<view class="coupon_item" v-for="(item, index) in config" :key="index">
					<view class="icon common_bg" :style="{
						'background-image': `url(${$img1('my/zuan.png')})`
					  }">{{item.title}}</view>
					<view class="coupon_r">
						<view class="title">{{ item.title }}</view>
						<view class="rule">获得条件：累计消费{{ item.condition }}</view>
						<view class="desc">权益说明：{{ item.notice || '(无)' }}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				z_imgPath: this.$z_img2 + 'mine/vip/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				userinfo: {},
				config: {},
				show: 0,
				type: ''
			}
		},
		onLoad(e) {
			this.getData()
		},
		methods: {
			getData() {
				// 模拟接口
				let that = this
				that.req({
					url: 'vip_list',
					Loading: true,
					success(res) {
						that.userinfo = res.data.userinfo
						that.config = res.data.data
					}
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		width: 702rpx;
		height: 88rpx;
		background: #ff5029;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 32rpx;
		position: fixed;
		bottom: 57rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.wenben>view:nth-of-type(1) {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.wenben {
		font-size: 24rpx;
		color: #999999;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.coupon_head {
		width: 372rpx;
		height: 71rpx;
		margin: 70rpx auto 0;
		display: block;
	}
	.header_user>view:nth-of-type(2)>view:nth-of-type(2) {
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.header_user>view:nth-of-type(2)>view:nth-of-type(1) {
		margin-left: 20rpx;
		font-size: 36rpx;
		text-shadow: 0px 0px 10px rgba(255, 150, 254, 0.7);
	}

	.header_user {
		display: flex;
		align-items: center;
		margin-left: 37rpx;
		margin-bottom: 80rpx;
	}

	.xietiao {
		width: 714rpx;
		height: 274rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffffff;
		margin: 0 auto;
		position: relative;

		.vip-icon {
			position: absolute;
			right: 30rpx;
			top: -10rpx;

			width: 216rpx;
			height: 200rpx;
		}

		.header_bot {
			text-align: center;
			margin-right: 100rpx;
			margin-bottom: -80rpx;

			font-size: 32rpx;
			font-family: zihun147hao-xingyuanhei;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.jifen {
		position: absolute;
		bottom: 66rpx;
		left: 51rpx;
		font-size: 24rpx;
		color: #fff;
		// opacity: 0.6;
	}

	.xian {
		position: absolute;
		bottom: 112rpx;
		left: 51rpx;
		width: 600rpx;
		height: 1px;
		background: linear-gradient(94deg, #ffffff, #ffffff, #ffffff);
		opacity: 0.2;
		border-radius: 1rpx;
	}

	.jp_headimg>image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.content {
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		color: #fff;
		padding-bottom: 40rpx;

		.head {
			width: 686rpx;
			height: 372rpx;
			background: #121317;
			border-radius: 34rpx;
			margin: 0 auto;
		}

		.user-card {
			width: 622rpx;
			height: 330rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 30rpx 50rpx 0;
			position: relative;
			background: linear-gradient(138deg, #fe622b 7%, #ffa246 100%);
			>view:nth-child(1){
				>view:nth-child(1){
					font-size: 68rpx;
					color: #F4C783;
					font-weight: bold;
				}
				>view:nth-child(2){
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				>view:nth-child(3){
					width: 294rpx;
					height: 14rpx;
				}
				>view:nth-child(4){
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				
			}
			>view:nth-child(2){
				width: 216rpx;
				height: 216rpx;
				position: absolute;
				top: -14rpx;
				right: 34rpx;
				>text{
					width: 120rpx;
					height: 74rpx;
					font-weight: 700;
					font-size: 68rpx;
					color: #FFFFFF;
					position: absolute;
					text-align: center;
					line-height: 74rpx;
					right: 30rpx;
					bottom: 60rpx;
				}
			}

			.user-info {
				display: flex;
				align-items: center;

				.avatar {
					width: 98rpx;
					height: 98rpx;
					background: #9d9d9d;
					border: 1px solid #cccccc;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					width: 250rpx;
					margin-left: 20rpx;

					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.cur-desc {
				margin-top: 20rpx;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				text {
					color: #08F6BB;
				}
			}

			.need-lv {
				margin-top: 30rpx;

				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				text {
					color: #08F6BB;
				}
			}

			.lv {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;

				>image {
					width: 174rpx;
					height: 174rpx;
				}
			}
		}
		.quanyi{
			width: 750rpx;
			margin: -100rpx auto 0;
			z-index: 20;
			background: url($imgurl+'my/vipBg.png') no-repeat 0 0 / 100% 1192rpx;
		}

		.list-title {
			margin-top: 20rpx;
			padding-left: 30rpx;
			padding-top: 100rpx;

			text {
				font-size: 40rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.coupon_item {
			position: relative;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx auto 0;
			width: 680rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 108rpx;
				height: 94rpx;
			}

			.coupon_r {
				position: relative;
				padding-left: 60rpx;

				&::before {
					content: '';
					display: block;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 86rpx;
					background: #666;
				}

				.title {
					font-weight: 700;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.rule,
				.desc {
					margin-top: 10rpx;

					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}
			}
		}
	}
</style>