<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="header" :style="{'background-image': 'url('+ imgfixUrls + 'dating/bd_omember_bg.svg' +')'}">
			<view class="user-info">
				<view class="avatar">
					<image :src="memberInfo.avatar" mode=""></image>
				</view>
				<view class="else-info">
					<view class="name">{{memberInfo.nickname}}</view>
					<block v-if="memberInfo.is_vip">
						<view v-if="memberInfo.vip.type == 1">到期时间：{{memberInfo.vip.end_time_text}}</view>
						<view v-else-if="memberInfo.vip.type == 2">剩余次数：{{memberInfo.vip.surplus_number}}</view>
						<view v-else-if="memberInfo.vip.type == 3">已过期</view>
						<view v-else>已失效</view>
					</block>
					<view v-else class="status">未开通</view>
				</view>
			</view>
		</view>
	
		<view class="content">
			<view class="h2-title">购买会员</view>
			<view class="member-info" :class="{'select': index == currentIndex}" v-for="(item,index) in memberInfo.list" :key="item.id" @click="currentIndex = index">
				<view class="left-info">
					<view class="name">{{item.title}}</view>
					<view v-if="item.type == 1" class="date">有效时间：{{item.day}}天</view>
					<view v-else class="date">使用次数：{{item.second}}次</view>
				</view>
				<view class="right-info">
					<view class="unit">¥</view>
					<view class="price">{{item.money}}</view>
				</view>
			</view>
		</view>
	
		<view class="foot-btn" @click="handleOpenClick">立即支付</view>
		<TabBars :tabBarAct="0" pageType="16"></TabBars>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import TabBars from '@/components/template/tabBar.vue';
	export default {
		data() {
			return {
				loadlogo: false,
				memberInfo: {},
				currentIndex: 0,
			}
		},
		components: {
			Loadlogo,
			TabBars
		},
		computed: {
			
		},
		onLoad() {
			this.getMemberInfo()
		},
		methods: {
			// 获取vip信息
			getMemberInfo() {
				let _this = this
				App._post_form(
					 `&p=dating&do=vipList`,
					{},
					res => {
						_this.memberInfo = res.data
						_this.loadlogo = true
					},
					false,
					() => {
					}
				);
			},
			
			// 开通vip
			handleOpenClick() {
				let _this = this
				App._post_form(
					 `&p=dating&do=vipOpen`,
					{
						id: _this.memberInfo.list[_this.currentIndex].id
					},
					res => {
						if(Array.isArray(res.data) || !res.data.orderid) {
							App.navigationTo({
								url: 'pages/subPages2/blindDate/personal'
							})
						}else {
							App.navigationTo({
								url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=dating'
							});
						}
						console.log(res)
					},
					false,
					() => {
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 414rpx;
		background-size: 100% 100%;
		overflow: hidden;
		position: relative;
		.navbar {
			width: 100%;
			display: flex;
			align-items: center;
			color: #333;
			position: relative;
			.iconfont {
				font-size: 32rpx;
				position: absolute;
				left: 30rpx;
			}
			.title {
				font-size: 36rpx;
				font-weight: bold;
				width: 100%;
				margin: auto;
				text-align: center;
			}
		}
		.user-info {
			width: 690rpx;
			height: 168rpx;
			background: linear-gradient(315deg, #FDAE25 0%, #FF8E8A 100%);
			border-radius: 20rpx 20rpx 0 0;
			position: absolute;
			left: 30rpx;
			bottom: 0;
			display: flex;
			align-items: center;
			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				background-color: #fff;
				margin-left: 40rpx;
				position: relative;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					position: absolute;
					left: 4rpx;
					top: 4rpx;
				}
			}
			.else-info {
				height: 108rpx;
				margin-left: 30rpx;
				color: #fff;
				.name {
					height: 50rpx;
					margin-top: 7rpx;
					font-weight: bold;
					font-size: 36rpx;
				}
				.status {
					width: 70rpx;
					height: 34rpx;
					border-radius: 8rpx;
					border: 1rpx solid #fff;
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: center;
					margin-top: 10rpx;
				}
				.date {
					height: 33rpx;
					line-height: 33rpx;
					color: #999;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.content {
		width: 690rpx;
		margin: 40rpx auto 0;
		padding-bottom: 300rpx;
		.h2-title {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
		.member-info {
			width: 610rpx;
			height: 103rpx;
			padding: 30rpx 40rpx;
			margin-top: 30rpx;
			background-color: #FFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border: 1rpx solid #ccc;
			.left-info {
				height: 100%;
				flex: 1;
				.name {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
				.date {
					height: 33rpx;
					line-height: 33rpx;
					color: #999;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
			.right-info {
				height: 60rpx;
				color: #FF4444;
				display: flex;
				font-weight: bold;
				.unit {
					font-size: 24rpx;
					line-height: 74rpx;
				}
				.price {
					font-size: 48rpx;
					
				}
			}
		}
		
		.select {
			background-color: #FFEAE8;
			border: none;
		}
	}

	.foot-btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx;
		position: fixed;
		left: 30rpx;
		bottom: 130rpx;
	}
</style>
