482 lines
11 KiB
Vue
482 lines
11 KiB
Vue
<template>
|
|
<view class="view-page" v-if="levelActiveData">
|
|
<view class="top-view">
|
|
<view class="navbar" :style="{'margin-top' : `${statusBarHeight || 0}px`}">
|
|
<view class="">
|
|
<img @click="closeWeb" class="icon-image" src="@/static/image/grade/back.png" alt="" />
|
|
<!-- <img v-else class="icon-image" src="@/static/image/grade/back1.png" alt="" /> -->
|
|
</view>
|
|
<view class="tab">
|
|
<view @click="cutTabPage(0)" :class="currentIndex == 0 ? 'active' : ''">
|
|
财富等级
|
|
</view>
|
|
<view @click="cutTabPage(1)" :class="currentIndex == 1 ? 'active' : ''">
|
|
魅力等级
|
|
</view>
|
|
</view>
|
|
<view class="" @click="jumpGradeRule">
|
|
<img class="icon-image" src="@/static/image/grade/Question.png" alt="" />
|
|
</view>
|
|
</view>
|
|
<view class="swiper-view" v-if="levelActiveData.length">
|
|
<view class="swiper-image" :style="{ 'background-image' : `url(${levelActiveData[0].bg_image})`}">
|
|
<view class="view-level">
|
|
<view class="">
|
|
<view class="level-str" :style="{textShadow : `0px 0px 5px ${levelActiveData[0].color}`}">
|
|
{{levelActiveData[0].name}}
|
|
</view>
|
|
<view class="color-9 flex-line" style="font-size: 20rpx;">
|
|
<span
|
|
style="white-space: nowrap">{{levelActiveData[0].level_str || levelActiveData[0].name}}</span><progress
|
|
style="width: 200rpx;margin: 0 24rpx;" :border-radius="52" :percent="3"
|
|
:activeColor="levelActiveData[0].color" stroke-width="3" />
|
|
<span
|
|
style="white-space: nowrap">{{nextLevelData[0].level_str || nextLevelData[0].name }}</span>
|
|
</view>
|
|
<view class="color-9 mt-24" style="font-size: 20rpx;">
|
|
距离下一个段位还差{{detailData.user.next_exp}}经验值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 0 -->
|
|
<view class="LevelProgress-view">
|
|
<LevelProgress :currentIndex="levelCurrent" :lvList="levelList" />
|
|
</view>
|
|
<!-- -->
|
|
<view class="w-fill flex-line business-card">
|
|
<view class="">
|
|
<view class="font-36 color-0D">
|
|
{{detailData.user.exp || 0}}
|
|
</view>
|
|
<view class="font-24 color-f">
|
|
当前经验
|
|
</view>
|
|
</view>
|
|
<view class="head-sculpture">
|
|
<img :src="detailData.user.user_avatar || logo" alt="" />
|
|
</view>
|
|
<view class="">
|
|
<view class="font-36 color-0D">
|
|
{{detailData.user.next_exp}}
|
|
</view>
|
|
<view class="font-24 color-f">
|
|
下个等级
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 每日奖励等 -->
|
|
<view class="content-view">
|
|
<template v-if="!currentIndex">
|
|
<!-- <view class="card-view">
|
|
<view class="card-title color-3 font-32 font-w500">
|
|
每日奖励
|
|
</view>
|
|
<view class="card-body flex-line">
|
|
<view class="coin">
|
|
<img src="@/static/image/grade/coin.png" alt="" />
|
|
</view>
|
|
<view class="flex-line w-fill" style="justify-content: space-around;">
|
|
<view class="font-28 color-3">
|
|
<view class="">
|
|
段位达到富豪8
|
|
</view>
|
|
<view class="">
|
|
可每日领取金币
|
|
</view>
|
|
</view>
|
|
<view class="receive-button flex-line color-3 font-24">
|
|
立即领取
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- <Canvans /> -->
|
|
<view class="card-view" v-if="detailData.privilege">
|
|
<view class="card-title color-3 font-32 font-w500">
|
|
财富特权
|
|
</view>
|
|
<!-- 容器使用 Flex 布局并允许换行 -->
|
|
<view class="flex-container" v-if="detailData.privilege && detailData.privilege.length">
|
|
<!-- 循环生成子元素 -->
|
|
<view v-for="(item, index) in detailData.privilege" :key="index" class="flex-item">
|
|
<view class="image">
|
|
<img :src="item.base_image || logo" alt="" />
|
|
</view>
|
|
<view class="color-3 font-28">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="font-24 color-9">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="card-view" v-if="detailData.privilege">
|
|
<view class="card-title color-3 font-32 font-w500">
|
|
等级特权
|
|
</view>
|
|
<!-- 容器使用 Flex 布局并允许换行 -->
|
|
<view class="flex-container" v-if="detailData.privilege && detailData.privilege.length">
|
|
<!-- 循环生成子元素 -->
|
|
<view v-for="(item, index) in detailData.privilege" :key="index" class="flex-item">
|
|
<view class="image">
|
|
<img :src="item.rights_icon || logo" alt="" />
|
|
</view>
|
|
<view class="font-24 color-9">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import http from '@/until/http.js';
|
|
import logo from '@/static/image/logo.png';
|
|
import SwiperView from '@/component/swiper.vue';
|
|
import headerHeight from '@/component/headerHeight.vue';
|
|
import LevelProgress from '@/component/LevelProgress.vue'
|
|
export default {
|
|
components: {
|
|
headerHeight,
|
|
SwiperView,
|
|
LevelProgress
|
|
},
|
|
data() {
|
|
return {
|
|
logo,
|
|
detailData: null,
|
|
statusBarHeight: 0,
|
|
errorPage: true,
|
|
tabs: [],
|
|
listData: [],
|
|
currentIndex: 0,
|
|
levelActiveData: null,
|
|
levelList: [],
|
|
levelCurrent: 0,
|
|
nextLevelData: null,
|
|
currentSelectedLevel: 2,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.errorPage = true
|
|
const {
|
|
id,
|
|
type,
|
|
h
|
|
} = options
|
|
this.currentIndex = type !== undefined ? +type : 0
|
|
uni.setStorageSync('token', id)
|
|
this.statusBarHeight = h
|
|
uni.setStorageSync('BarHeight', h)
|
|
if (uni.getStorageSync('token')) this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.levelActiveData = []
|
|
if (this.currentIndex) {
|
|
// 魅力等级
|
|
this.getCharmLevel()
|
|
} else {
|
|
// 财富等级
|
|
this.getWealthLevel()
|
|
}
|
|
},
|
|
jumpGradeRule() {
|
|
uni.navigateTo({
|
|
url: `/pages/other/gradeRule?flag=${this.currentIndex}&h=${this.statusBarHeight}`
|
|
});
|
|
},
|
|
cutTabPage(index) {
|
|
this.currentIndex = index
|
|
this.getData()
|
|
},
|
|
async getCharmLevel() {
|
|
http.get('/api/Level/get_level_rule', {
|
|
token: uni.getStorageSync('token') ?? ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
// console.log(data)
|
|
this.detailData = data
|
|
this.levelList = data.level.map(ele => {
|
|
return {
|
|
...ele,
|
|
title: ele.name
|
|
}
|
|
})
|
|
this.levelCurrent = data.user.level
|
|
this.nextLevelData = data.level.filter(ele => {
|
|
return ele.level === data.user.level + 1
|
|
})
|
|
this.levelActiveData = data.level.filter(ele => {
|
|
return ele.level === data.user.level
|
|
})
|
|
}
|
|
|
|
this.errorPage = false
|
|
}).catch(error => {
|
|
this.errorPage = true
|
|
});
|
|
},
|
|
closeWeb() {
|
|
// 关闭页面
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'closeWeb'
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.closeWeb();
|
|
|
|
}
|
|
},
|
|
async getWealthLevel() {
|
|
http.get('/api/Level/get_wealth_rule', {
|
|
token: uni.getStorageSync('token') ?? ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
this.detailData = data
|
|
this.levelList = data.level.map(ele => {
|
|
return {
|
|
...ele,
|
|
title: ele.name
|
|
}
|
|
})
|
|
this.levelCurrent = data.user.level
|
|
this.nextLevelData = data.level.filter(ele => {
|
|
return ele.level === data.user.level + 1
|
|
})
|
|
this.levelActiveData = data.level.filter(ele => {
|
|
return ele.level === data.user.level
|
|
})
|
|
}
|
|
this.errorPage = false
|
|
}).catch(error => {
|
|
this.errorPage = true
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@font-face {
|
|
font-family: 'MyCustomFont';
|
|
src: url('@/static/youshe.ttf') format('truetype');
|
|
}
|
|
|
|
.level-str {
|
|
font-family: 'MyCustomFont', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 60rpx;
|
|
color: #FFFFFF;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.view-page {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
background: #F3F5F9;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
|
|
.LevelProgress-view {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: #fff;
|
|
/* 整体字体颜色 */
|
|
// margin-top: 60px;
|
|
// background-color: #000; /* 模拟背景 */
|
|
// min-height: 100vh;
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.top-view {
|
|
width: 100vw;
|
|
min-height: 50vh;
|
|
background-image: url('@/static/image/grade/Maskgroupx.png');
|
|
background-repeat: no-repeat;
|
|
|
|
.navbar {
|
|
display: inline-flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 96rpx;
|
|
width: 100%;
|
|
|
|
.icon-image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
view {
|
|
padding: 0 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.active {
|
|
font-weight: 500;
|
|
// font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.swiper-view {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
|
|
.swiper-image {
|
|
width: 80%;
|
|
height: 266rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
margin-top: 24rpx;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
|
|
.view-level {
|
|
width: 93%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.icon {
|
|
width: 220rpx;
|
|
height: 156rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.business-card {
|
|
justify-content: space-around;
|
|
align-items: flex-end;
|
|
margin: 50rpx 0;
|
|
|
|
view {
|
|
text-align: center;
|
|
}
|
|
|
|
.head-sculpture {
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
border-radius: 50%;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.content-view {
|
|
min-height: 46vh;
|
|
width: 100%;
|
|
padding: 0 32rpx;
|
|
|
|
.card-view {
|
|
|
|
// padding: 24rpx 0;
|
|
.card-title {
|
|
padding: 24rpx 0;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
}
|
|
|
|
.card-body {
|
|
width: 100%;
|
|
min-height: 154rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
.coin {
|
|
height: 134rpx;
|
|
width: 180rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.receive-button {
|
|
width: 172rpx;
|
|
height: 56rpx;
|
|
background: #0DFFB9;
|
|
border-radius: 106rpx 106rpx 106rpx 106rpx;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.flex-container {
|
|
display: flex;
|
|
/* 启用 Flex 布局 */
|
|
flex-wrap: wrap;
|
|
/* 允许换行 */
|
|
}
|
|
|
|
.flex-item {
|
|
flex: 0 0 calc(25% - 10px);
|
|
/* 基础宽度25% 减去间隔 */
|
|
margin: 5px;
|
|
min-height: 220rpx;
|
|
padding: 20rpx 0;
|
|
/* 元素间距 */
|
|
box-sizing: border-box;
|
|
/* 包含内边距和边框 */
|
|
border-radius: 14rpx;
|
|
/* 样式美化（可选） */
|
|
background-color: #fff;
|
|
// padding: 20rpx;
|
|
text-align: center;
|
|
.image{
|
|
width: 100%;
|
|
height: 60%;
|
|
margin-bottom: 24rpx;
|
|
img{
|
|
width: 80%;
|
|
}
|
|
}
|
|
// .image {
|
|
// width: 80%;
|
|
// height: 120rpx;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |