PixelAI-mobile/pages/mobile_web/my/my.vue

<template>
	<!-- #ifdef APP -->
	<view class="mobile-my" :style="{ backgroundImage: `url(${fileUrl+background})`,paddingTop: CustomBar+'rpx' }">
	<view class="app-top" :style="{ height: CustomBar+'rpx',
	background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
	<!-- #endif -->
	<!-- #ifndef APP -->
	<view class="mobile-my" :style="{ backgroundImage: `url(${fileUrl+background})` }">
	<!-- #endif -->
		<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
			<image :src="fileUrl+logo"></image>
		</view>
		<view class="mm-identity">
			<u-icon @click="handleClickAvatar" :name="fileUrl+getAvatar" :label="getTopTip" size="102"
			labelSize="42" labelColor="#bd8dfa" marginLeft="30"></u-icon>
		</view>
		<view class="mm-member">
			<view class="mmm-time" :style="{backgroundImage:`url(${fileUrl+timeBox})`}">
				<view class="mmmt-top">
					我的余额
				</view>
				<view class="mmmt-bottom">
					<view class="mmmtb-single">
						<image :src="fileUrl+diamond"></image>
						<view class="single-text">
							<view class="st-title">
								{{ diamondForm.name }}
							</view>
							<view class="st-time">
								{{ diamondForm.time }}
							</view>
						</view>
					</view>
					
					<!-- <view class="mmmtb-item" v-for="(item,index) in timeList" :key="index">
						<image :src="fileUrl+item.icon"></image>
						<view class="time-right">
							<view class="mmmtb-title">
								{{ item.name }}
							</view>
							<view class="mmmtb-time">
								{{ item.time }}
							</view>
						</view>
					</view> -->
				</view>
				<image class="mmmt-card" :src="fileUrl+card"></image>
			</view>
			<!-- <view class="mmm-recharge" :style="{backgroundImage:`url(${fileUrl+memberBox})`}">
				<view class="mmmr-content">
					<image :src="fileUrl+member" class="mrc-icon"></image>
					<view class="mrc-text">
						会员到期：2024/10/20
					</view>
					<image :src="fileUrl+memberShip" class="mrc-btn"></image>
				</view>
			</view> -->
			<view style="height: 30rpx;"></view>
			<view class="mmm-control">
				<view class="mmmc-item" @click="toControl(item)" v-for="(item,index) in controlList" :key="item.name">
					<u-icon class="icon-text" :name="fileUrl+item.icon" size="35" :label="item.name"
					labelSize="30" labelColor="rgba(255,255,255,0.9)" marginLeft="60"></u-icon>
					<image class="arrow" :src="fileUrl+arrow"></image>
				</view>
			</view>
			<view style="margin-bottom: 160rpx;"></view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import configService from '@/common/config.service.js';
export default {
	props: {
		topLevel:{
			type: Number,
			default: 0
		},
		isLogin: {
			type: String,
			default: ''
		}
	},
	data(){
		return{
			// 基础路径
			fileUrl: configService.fileUrl + 'pixel/my/',
			// logo图标
			logo: 'logo.png',
			// 我的页面背景
			background: 'background.png',
			// 头像
			avatar: 'avatar.png',
			// 默认登录头像
			defaultLoginAvatar: 'login-avatar.png',
			// 次数背景
			timeBox: 'time-box.png',
			// 钻石
			diamond: 'diamond.png',
			// 钻石余额
			diamondForm: {
				name: '剩余钻石量',
				time: 0
			},
			// 卡片
			card: 'card.png',
			// 次数列表
			timeList:[
				// 银
				{
					icon: 'silver.png',
					name: '剩余钻石量',
					time: 0
				},
				// 蓝
				{
					icon: 'blue.png',
					name: '不限时次数包',
					time: 0
				},
				// 金
				{
					icon: 'gold.png',
					name: '今日次数包',
					time: 0
				},
			],
			// 会员充值
			memberBox: 'member-box.png',
			// 会员图标
			member: 'member.png',
			// 续费会员
			memberShip: 'paying-membership.png',
			// 箭头
			arrow: 'arrow.png',
			// 控制列表
			controlList: [
				// {
				// 	icon: 'reward.png',
				// 	name: '邀请奖励',
				// 	path: '',
				// },
				{
					icon: 'recharge.png',
					name: '充值记录',
					path: '/pages/mobile_web/my/child_pages/recharge',
				},
				{
					icon: 'customer.png',
					name: '联系客服',
					path: '/pages/mobile_web/my/child_pages/contact',
				},
				{
					icon: 'agreement.png',
					name: '用户协议',
					path: '/pages/index/rich-detail?name=用户协议',
				},
				{
					icon: 'private.png',
					name: '隐私协议',
					path: '/pages/index/rich-detail?name=隐私协议',
				},
				{
					icon: 'activation-code.png',
					name: '生成记录',
					path: '/pages/mobile_web/my/child_pages/create',
				},
				// {
				// 	icon: 'activation-code.png',
				// 	name: '激活码',
				// 	path: '',
				// },
				{
					icon: 'share.png',
					name: '发布记录',
					path: '/pages/mobile_web/my/child_pages/share',
				},
			],
			// 用户信息
			userMessage:{}
			// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
		}
	},
	computed:{
		// 获取登录头像
		getAvatar(){
			return this.isLogin ? this.defaultLoginAvatar : this.avatar;
		},
		// 获取头像旁tip
		getTopTip(){
			// return this.isLogin ? `你好, PIXEL.AI!` : '请登录pixel.ai！';
			return this.isLogin ? `你好, ${this.userMessage?.realname||('用户'+this.userMessage?.username)}!` : '请登录pixel.ai！';
		}
	},
	methods:{
		// 初始化
		init(){
			if(this.isLogin !== ''){
				this.userMessage = JSON.parse(this.$store.state.user_message);
				this.myCurrency();
			}else{
				this.userMessage = {};
				this.diamondForm.time = 0;
			}
		},
		// 获取我的余额
		async myCurrency(){
			let res = await this.$api.getCurrency();
			if(res?.success){
				// this.timeList[0].time = res.data.numerical;
				this.diamondForm.time = res.data.numerical;
			} else {
				this.$refs.uToast.show({type:'error',title: "余额数据拉取失败！"});
			}
		},
		// 操作栏
		toControl(item){
			if(item.path) uni.navigateTo({ url: item.path });
		},
		// 点击头像
		handleClickAvatar(){
			if(this.isLogin){
				uni.navigateTo({
					url: '/pages/mobile_web/my/child_pages/setting'
				})
			}else{
				uni.navigateTo({
					url: '/pages/mobile_web/my/child_pages/login'
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.mobile-my{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-size: cover;
	// #ifdef APP
	.app-top{
		width: 100%;
		position: fixed;
		z-index: 81;
		top: 0;
	}
	// #endif
	.mobile-logo{
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		z-index: 81;
		padding: 15rpx 0;
		image{
			width: 200rpx;
			height: 45rpx;
		}
	}
	.mm-identity{
		display: flex;
		align-items: center;
		margin: 125rpx 70rpx 45rpx;
		font-weight: bold;
		word-spacing: 3px;
		width: calc(100% - 150rpx);
		.u-icon{
			overflow: hidden;
		}
		/deep/.u-icon__label{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		/deep/.u-icon__img{
			min-width: 102rpx;
			min-height: 102rpx;
			border-radius: 100%;
		}
	}
	.mm-member{
		display: flex;
		flex-direction: column;
		.mmm-time{
			margin: 0 35rpx;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			background-size: cover;
			position: relative;
			overflow: hidden;
			.mmmt-top{
				margin-top: 35rpx;
				margin-left: 35rpx;
				font-size: 35rpx;
				font-weight: bold;
			}
			.mmmt-bottom{
				margin: 34rpx 25rpx;
				height: 144rpx;
				border-radius: 15rpx;
				padding: 0 25rpx 0 15rpx;
				// column-count:3;
				// -moz-column-count:3; /* Firefox */
				// -webkit-column-count:3; /* Safari 和 Chrome */
				.mmmtb-single{
					display: flex;
					height: 100%;
					padding: 0 10rpx;
					image{
						margin: 15rpx 0;
						height: 115rpx;
						width: 115rpx;
					}
					.single-text{
						margin: 20rpx 0 10rpx 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						.st-title{
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.8);
							font-weight: bold;
						}
						.st-time{
							text-align: center;
							font-size: 65rpx;
							color: #000;
							font-weight: bold;
						}
					}
				}
				.mmmtb-item{
					display: flex;
					height: 100%;
					width: 105%;
					image{
						margin-top: 13%;
						max-width: 75rpx;
						height: 75rpx;
						margin-right: 10rpx;
					}
					.time-right{
						margin-top: 8%;
						display: flex;
						flex-direction: column;
						.mmmtb-title{
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.8);
							flex: 1;
							font-weight: bold;
						}
						.mmmtb-time{
							text-align: center;
							font-size: 60rpx;
							flex: 1;
							color: #000;
							// font-weight: bold;
						}
					}
				}
			}
			.mmmt-card{
				position: absolute;
				height: 320rpx;
				width: 290rpx;
				right: 45rpx;
				bottom: -58rpx;
			}
		}
		.mmm-recharge{
			height: 140rpx;
			margin: 0 50rpx;
			background-size: cover;
			.mmmr-content{
				margin-top: 35rpx;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.mrc-icon{
					width: 72rpx;
					height: 72rpx;
				}
				.mrc-text{
					color: #e9d39b;
					font-size: 32rpx;
					margin: 0 25rpx;
				}
				.mrc-btn{
					width: 155rpx;
					height: 72rpx;
					&:active{
						filter: opacity(0.8);
					}
				}
			}
		}
		.mmm-control{
			margin: 30rpx 100rpx 0;
			display: flex;
			flex-direction: column;
			.mmmc-item{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 25rpx;
				padding: 0 0 20rpx;
				border-bottom: 2rpx solid #484571;
				&:active{
					filter: opacity(0.8);
				}
				.icon-text{
					display: flex;
					align-items: flex-end;
				}
				.arrow{
					width: 14rpx;
					height: 27rpx;
				}
			}
		}
	}
}
</style>