<template>
	<div class="container g_bg_page">
		<div class="g_bg_0 g_pl_12 g_pr_12 g_c_f" style="border-radius: 0 0 12px 12px; background: linear-gradient(220deg, #372728, #232232, #232232, #202221)">
			<u-navbar :is-back="false" :is-fixed="false" :borderBottom="false" background="transparent" :title-bold="false">
				<view class="g_fs_16 g_ml_8 g_mr_8 g_fs_18">{{ userInfo.tel }}</view>
			</u-navbar>
			<div class="g_radius_8 g_pl_12 g_pr_12 g_pt_24 g_pb_12 g_mt_12 g_ml_8 g_mr_8 g_position_rela" style="background: linear-gradient(90deg, #e5f3fc, #9dd1e9); color: #175580">
				<div>
					<div class="g_fs_20 g_mb_12 g_fw_600">V1/青铜会员</div>
					<div class="g_flex_row_start g_mb_24">
						<div class="g_fs_14">
							星辉值 <span class="g_fw_600">{{ 1 }}/{{ 100 }}</span>
						</div>
						<div class="g_fs_12">去升级</div>
					</div>
					<div>我的成就</div>
				</div>
				<div class="g_position_abso g_bg_f" style="top: -16px; right: 0; width: 96px; height: 108px"></div>
			</div>
			<div class="g_mt_12 g_fs_14">
				<div class="g_flex_row_between g_mb_12">
					<div>V{{ 1 }}专享{{ 2 }}项等级权益</div>
					<div @click="showMore = !showMore">{{ showMore ? "收起" : "展开" }} <span class="iconfont g_fsi_12" :class="showMore ? 'icon-zhankai' : 'icon-gengduo11'"></span></div>
				</div>
				<div class="g_flex_row_start" :style="{ height: showMore ? '290px' : '92px', overflow: 'hidden' }">
					<template v-for="item in privilegeList">
						<div class="g_mb_24 g_text_c g_flex_column_center flex_center" style="width: 25%" @click="goPage(item)">
							<div class="g_w_48 g_h_48 g_bg_f g_radius_20 g_mb_8"></div>
							<div class="g_fs_12">{{ item.title }}</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="g_pl_12 g_pr_12">
			<div class="g_mt_12 g_bg_f g_radius_6 g_pt_16" style="background: linear-gradient(180deg, #feede0 5%, #fefefc, #fefefc)">
				<div class="g_flex_row_between flex_center g_mb_12 g_pl_12 g_pr_12">
					<div>
						可用星辉值<span class="g_fs_18 g_c_f40 g_fw_600">{{ 1 }}</span>
					</div>
					<div class="g_fs_14 g_c_9" @click="goPage({ path: '/root/vip/task' })">更多会员任务<span class="iconfont icon-gengduo11 g_fsi_12"></span></div>
				</div>
				<div>
					<swiper class="banner u-skeleton-fillet" :circular="true" :indicator-dots="true">
						<swiper-item class="" item-id v-for="(item, index) in bannerList" :key="index">
							<div v-for="(innerItme, index) in item" :class="index == 0 ? 'g_mb_16' : ''" class="g_flex_row_start flex_center g_pl_12 g_pr_12">
								<div class="g_flex_row_start flex_center g_flex_1">
									<div class="g_w_36 g_h_36 g_bg_0 g_radius_8 g_mr_8"></div>
									<div class="g_flex_column_between g_h_42">
										<div class="g_fs_14 g_fw_600">{{ innerItme.title }} <span class="g_c_f40 g_fs_12">+1</span></div>
										<div class="g_fs_12 g_c_9">{{ innerItme.content }}</div>
									</div>
								</div>
								<div>
									<div class="g_w_72 g_fw_600">
										<g-button size="small_auto" gradual="linear-gradient(50deg, #f98342, #fc4866)" type="gradual" height="32" :fontSize="12" btnText="去完成" @clickBtn="getCoze"></g-button>
									</div>
								</div>
							</div>
						</swiper-item>
					</swiper>
				</div>
			</div>
			<div class="g_mt_12 g_radius_6 g_pl_12 g_pr_12 g_pt_16 g_pb_16" style="background: linear-gradient(180deg, #feede0 5%, #fefefc, #fefefc)">
				<div class="g_flex_row_between flex_center g_mb_12">
					<div>星辉值兑好礼</div>
					<div class="g_fs_14 g_c_9">更多好礼<span class="iconfont icon-gengduo11 g_fsi_12"></span></div>
				</div>
				<div class="g_flex_row_between" style="column-gap: 10px">
					<div v-for="item in commodityList" class="g_p_8 g_bg_f g_flex_1 g_radius_4">
						<div class="g_bg_f40" style="width: 100%; aspect-ratio: 1 / 1"></div>
						<div>
							<div class="g_ell_1 g_w_all g_fs_16 g_mt_6 g_mb_6">{{ item.title }}</div>
							<div class="g_fs_12" style="color: #a66936">
								<span class="g_fs_16">{{ item.price }}</span
								>星辉值
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 128px"></div>
	</div>
	<!-- <g-tabbar class="tabbar" :isShow="tabbarShow"></g-tabbar> -->
</template>

<script>
export default {
	data() {
		return {
			showMore: false,
			userInfo: uni.getStorageSync("apply-userinfo"),
			commodityList: [
				{
					title: "1商品商品商品商品商品商品",
					price: "100",
					img: "",
				},
				{
					title: "2商品商品商品商品商品商品",
					price: "200",
					img: "",
				},
				{
					title: "3商品商品商品商品商品商品",
					price: "300",
					img: "",
				},
			],
			bannerList: [
				[
					{
						title: "每日签到1",
						content: "每日签到轻松赚星辉值",
						logo: "",
						type: 1,
					},
					{
						title: "浏览招聘岗位15s",
						content: "浏览单个岗位详情页15s",
						logo: "",
						type: 2,
					},
				],
				[
					{
						title: "每日签到2",
						content: "每日签到轻松赚星辉值",
						logo: "",
						type: 1,
					},
					{
						title: "浏览招聘岗位15s",
						content: "浏览单个岗位详情页15s",
						logo: "",
						type: 2,
					},
				],
				[
					{
						title: "每日签到3",
						content: "每日签到轻松赚星辉值",
						logo: "",
						type: 1,
					},
					{
						title: "浏览招聘岗位15s",
						content: "浏览单个岗位详情页15s",
						logo: "",
						type: 2,
					},
				],
			],
			privilegeList: [
				{
					title: "入职福利",
					logo: "",
					path: "/root/vip/privilege?type=0",
				},
				{
					title: "专属勋章",
					logo: "",
					path: "/root/vip/privilege?type=1",
				},
				{
					title: "生日福利",
					logo: "",
					path: "/root/vip/privilege?type=2",
				},
				{
					title: "节日关怀",
					logo: "",
					path: "/root/vip/privilege?type=3",
				},
				{
					title: "记工时",
					logo: "",
					path: "/root/vip/privilege?type=4",
				},
				{
					title: "直播间礼物解锁",
					logo: "",
					path: "/root/vip/privilege?type=5",
				},
				{
					title: "直播间进房座驾",
					logo: "",
					path: "/root/vip/privilege?type=6",
				},
				{
					title: "会员日特权",
					logo: "",
					path: "/root/vip/privilege?type=7",
				},
				{
					title: "会员专属活动",
					logo: "",
					path: "/root/vip/privilege?type=8",
				},
				{
					title: "预支提额",
					logo: "",
					path: "/root/vip/privilege?type=9",
				},
				{
					title: "优先报名",
					logo: "",
					path: "/root/vip/privilege?type=10",
				},
			],
		};
	},
	created() {},

	methods: {
		goPage(_item) {
			uni.navigateTo({
				url: _item.path,
			});
		},
	},
};
</script>

<style></style>
