You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
233 lines
6.8 KiB
Vue
233 lines
6.8 KiB
Vue
2 months ago
|
<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_flex_row_start flex_center" @click="goBack">
|
||
|
|
<view class="iconfont icon-leftArrows"></view>
|
||
|
|
<view class="g_fs_16 g_ml_8 g_mr_8 g_fs_18">{{ userInfo.tel }}</view>
|
||
|
|
</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,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
goBack(){
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|