429 lines
9.5 KiB
Vue
429 lines
9.5 KiB
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> |