<template>
	<view class="page flex-col" style="position: fixed;">
		<view class="group_1 flex-col">
			<view class="box_1 flex-col" style="margin-top: 240rpx;">
				<view class="box_2 flex-col">
					<view class="block_1 flex-row">
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_1" referrerpolicy="no-referrer"
								src="/static/lanhu_goumaihuiyuan/3d2d1ecbc6385f826ce4387e6a8c6435.png" />
							<text class="text-group_1">会员专享权益</text>
						</view>


					</view>
					<view class="block_2 flex-row justify-between">
						<view class="image-text_2 flex-col justify-between" style="margin-left: 100rpx;">
							<image class="icon_2" referrerpolicy="no-referrer"
								src="/static/lanhu_goumaihuiyuan/3d4c8663833052862964d153148147bb.png" />
							<text class="text-group_2">会员优惠券</text>
						</view>
						
						<view class="image-text_2 flex-col justify-between" style="margin-right: 100rpx;">
							<image class="icon_2" referrerpolicy="no-referrer"
								src="/static/lanhu_goumaihuiyuan/710781c750ee86d68a96f7daf5de4eb6.png" />
							<text class="text-group_2" style="margin-left: 15rpx;">更多权益</text>
						</view>
						
						
					</view>
					<view class="text-wrapper_1 flex-row">
						<text class="text_1" style="margin-left: 80rpx;">购买课程/商品享优惠</text>
						<!-- <text class="text_2">部分课程会员免费</text> -->
						<text class="text_3" style="margin-left: 110rpx;">更多权益增加中</text>
					</view>
				</view>
				<view class="box_3 flex-col">
					<view class="image-text_4 flex-row justify-between">
						<image class="icon_4" referrerpolicy="no-referrer"
							src="/static/lanhu_goumaihuiyuan/3d2d1ecbc6385f826ce4387e6a8c6435.png" />
						<text class="text-group_4">会员专享权益</text>
					</view>
					<text class="paragraph_1">
						1、会员购买部分课程可享受优惠价
						2、会员到期后权益即失效，需继承享受请及时续费
					</text>
				</view>


				<picker class="button_1 flex-col" mode="selector" :range="options" @cancel="cancelPicker"
					@change="confirmPicker"> <text class="text_4" style="line-height: 100rpx;">开通会员</text></picker>



			</view>
			<view class="box_4 flex-col">

				<view class="nav-bar_1 flex-row" style="">
					<!--    <image
            class="icon_5"
            referrerpolicy="no-referrer"
            src="/static/lanhu_goumaihuiyuan/cb145de49027380678f87f629c0207bc.png"
          /> -->
					<!-- <text class="text_5">购买会员</text> -->
					<!--    <image
            class="applet-top-bar_1"
            referrerpolicy="no-referrer"
            src="/static/lanhu_goumaihuiyuan/727bbb8905129211285da11f3fb719d2.png"
          /> -->
				</view>
				<view class="box_5 flex-col" style="top:190rpx">
					<view class="section_1 flex-row">
						<image class="single-avatar_1 flex-col" :src=" $wanlshop.oss(user.avatar, 52, 52, 2, 'avatar')">
						</image>
						<text class="text_6">{{user.nickname}}</text>
						<button class="button_2 flex-col">
							<text class="text_7">未开通会员</text>
						</button>
					</view>
					<view class="text-wrapper_2 flex-row">
						<text class="text_8">VIP</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showPicker: false, // 控制下拉选择器的显示与隐藏
				selectedOption: '', // 选中的值
				options: ['初级会员', '中级会员', '高级会员'], // 下拉选择器的选项列表
				loopData0: [
					// {
					// 	lanhuimage0: '/static/lanhu_goumaihuiyuan/845f2c13f312b4d507fe4c1b1104ee1b.png',
					// 	lanhutext0: '免费课程'
					// },
					{
						lanhuimage0: '/static/lanhu_goumaihuiyuan/710781c750ee86d68a96f7daf5de4eb6.png',
						lanhutext0: '更多权益'
					}
				],
				constants: {}
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		methods: {

			confirmPicker(event) {
				// 选中的值发生变化时触发该方法，更新选中的值并关闭下拉选择器
				const index = event.detail.value;
				this.selectedOption = this.options[index];
				this.showPicker = false;
				
				uni.navigateTo({
					url: '/pages/user/money/pay?groups=vip&order_id=1&type2='+this.selectedOption
				});
				
			},
			
		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';
</style>