更新羽声语音h5
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="view-page" v-if="levelActiveData">
|
||||
<view class="view-page" v-if="levelActiveData && detailData">
|
||||
<view class="top-view">
|
||||
<view class="navbar" :style="{'margin-top' : `${statusBarHeight || 0}px`}">
|
||||
<view class="">
|
||||
@@ -14,12 +14,11 @@
|
||||
魅力等级
|
||||
</view>
|
||||
</view>
|
||||
<view class="" @click="jumpGradeRule">
|
||||
<img class="icon-image" src="@/static/image/grade/Question.png" alt="" />
|
||||
<view class="icon-image">
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-view" v-if="levelActiveData.length">
|
||||
<view class="swiper-image" :style="{ 'background-image' : `url(${levelActiveData[0].bg_image})`}">
|
||||
<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}`}">
|
||||
@@ -27,15 +26,19 @@
|
||||
</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="white-space: nowrap">{{`lv.${levelActiveData[0].level}`}}</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>
|
||||
style="white-space: nowrap">{{`lv.${nextLevelData[0].level}`}}</span>
|
||||
</view>
|
||||
<view class="color-9 mt-24" style="font-size: 20rpx;">
|
||||
距离下一个段位还差{{detailData.user.next_exp}}经验值
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="currentIndex == 1" style="width: 196rpx;height: 196rpx;">
|
||||
<img :src="levelActiveData[0].rights_icon" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -66,75 +69,27 @@
|
||||
</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 class="content-view" v-if="detailData">
|
||||
<view class="font-32 color-3 font-w500">
|
||||
{{`如何获得${currentIndex ? '魅力' : '财富'}值?`}}
|
||||
</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 class="mt-24 color-3 font-w400" style="font-size: 28rpx;">
|
||||
{{`${currentIndex ? `在平台收到的所有打赏均可转化为魅力值,具体比例为1金币=${detailData.coin_charm_exp}魅力值。` : `在平台的所有打赏均可转化为财富值,具体比例为1金币=${detailData.coin_wealth_exp}财富值。`}`}}
|
||||
</view>
|
||||
</template>
|
||||
<!-- 财富等级 -->
|
||||
<view class="mt-24">
|
||||
<template v-if="!currentIndex" class="mt-24">
|
||||
<img :src="$config.wealth_url" alt="" />
|
||||
</template>
|
||||
<template v-else class="mt-24">
|
||||
<img :src="$config.charm_url" alt="" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -190,18 +145,13 @@
|
||||
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') ?? ''
|
||||
token: uni.getStorageSync('token') || ''
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
@@ -244,7 +194,7 @@
|
||||
},
|
||||
async getWealthLevel() {
|
||||
http.get('/api/Level/get_wealth_rule', {
|
||||
token: uni.getStorageSync('token') ?? ''
|
||||
token: uni.getStorageSync('token') || ''
|
||||
}).then(response => {
|
||||
const {
|
||||
data,
|
||||
@@ -321,7 +271,7 @@
|
||||
min-height: 50vh;
|
||||
background-image: url('@/static/image/grade/Maskgroupx.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
position: relative;
|
||||
.navbar {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
@@ -409,9 +359,13 @@
|
||||
|
||||
.content-view {
|
||||
min-height: 46vh;
|
||||
width: 100%;
|
||||
padding: 0 32rpx;
|
||||
|
||||
// width: 100%;
|
||||
width: calc(100% - 64rpx);
|
||||
padding:32rpx;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
background-color: #fff;
|
||||
.card-view {
|
||||
|
||||
// padding: 24rpx 0;
|
||||
@@ -452,7 +406,7 @@
|
||||
flex: 0 0 calc(25% - 10px);
|
||||
/* 基础宽度25% 减去间隔 */
|
||||
margin: 5px;
|
||||
min-height: 220rpx;
|
||||
min-height: 260rpx;
|
||||
padding: 20rpx 0;
|
||||
/* 元素间距 */
|
||||
box-sizing: border-box;
|
||||
@@ -465,15 +419,14 @@
|
||||
.image{
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
margin-bottom: 24rpx;
|
||||
margin-bottom: 14rpx;
|
||||
img{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
// .image {
|
||||
// width: 80%;
|
||||
// height: 120rpx;
|
||||
// }
|
||||
.title{
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user