yusheng-h5/pages/other/grade.vue

<template>
	<view class="view-page" v-if="levelActiveData && detailData">
		<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 v-if="userSinger" @click="cutTabPage(2)" :class="currentIndex == 2 ? 'active' : ''">
						歌手等级
					</view>
				</view>
				<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="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">{{`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">{{`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="[1,2].includes(currentIndex)" style="width: 196rpx;height: 196rpx;">
							<img :src="levelActiveData[0].rights_icon" alt="" />
						</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 class="content-view" v-if="detailData">
				<view class="font-32 color-3 font-w500">
					{{`如何获得${currentIndex === 1  ? '魅力' : currentIndex === 2  ? '歌手经验' : '财富'}值？`}}
				</view>
				<view class="mt-24  color-3 font-w400" style="font-size: 28rpx;">
					{{`${currentIndex === 1 ? `在平台收到的所有打赏均可转化为魅力值,具体比例为1金币=${detailData.coin_charm_exp}魅力值。` : currentIndex === 2 ? `在平台的所有打赏均可转化为歌手经验值，具体比例为1金币=${detailData.singer_coin_exp}经验值` :  `在平台的所有打赏均可转化为财富值，具体比例为1金币=${detailData.coin_wealth_exp}财富值。`}`}}
				</view>
				<!-- 财富等级 -->
				<view class="mt-24">
					<template v-if="!currentIndex" class="mt-24">
						<img :src="$config.wealth_url" alt="" />
					</template>
					<template v-if="currentIndex == 1" class="mt-24">
						<img :src="$config.charm_url" alt="" />
					</template>
					<template v-if="currentIndex == 2" class="mt-24">
						<img :src="$config.singer_url" alt="" />
					</template>
				</view>
			
			</view>
		</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,
				userSinger:false,
				currentSelectedLevel: 2,
				userSingerLevel:0
			}
		},
		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()
				this.getSingInfo()
			}
		},
		methods: {
			getData() {
				this.levelActiveData = []
				if (this.currentIndex === 1) {
					// 魅力等级
					this.getCharmLevel()
				} else if (this.currentIndex === 0) {
					// 财富等级
					this.getWealthLevel()
				} else if(this.currentIndex === 2) {
					console.log('歌手等级')
					this.getSingerLevel()
				} 
			},
			cutTabPage(index) {
				this.currentIndex = index
				this.getData()
			},
			async getSingInfo() {
				http.get('/api/Level/is_singer', {
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code
					} = response
					this.userSinger = data.status ? true : false
					this.userSingerLevel = Number(data.level)
				}).catch(error => {
					this.userSinger = false
				});
			},
			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
				});
			},
			async getSingerLevel() {
				http.get('/api/Level/get_singer_level', {
					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 = Number(data.user.level)
						this.nextLevelData = data.level.filter(ele => {
							return ele.level ===  Number(data.user.level) + 1
						})
						this.levelActiveData = data.level.filter(ele => {
							return ele.level ===  Number(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;
			position: relative;
			.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%;
			width: calc(100% - 64rpx);
			padding:32rpx;
			// position: absolute;
			// top: 50%;
			border-radius: 32rpx 32rpx 0 0;
			background-color: #fff;
			.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: 260rpx;
					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: 14rpx;
						img{
							width: 80%;
						}
					}
					.title{
						max-width: 60px;
					}
				}
			}
		}

	}
</style>