2024-12-03 09:34:24 +08:00
|
|
|
|
<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">
|
2024-12-05 11:46:54 +08:00
|
|
|
|
<u-icon @click="handleClickAvatar" :name="fileUrl+getAvatar" :label="getTopTip" size="107"
|
2024-12-03 09:34:24 +08:00
|
|
|
|
labelSize="45" 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-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>
|
|
|
|
|
|
</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 class="mmm-control">
|
|
|
|
|
|
<view class="mmmc-item" @click="toControl(item)" v-for="(item,index) in controlList" :key="item.name">
|
2024-12-11 19:36:51 +08:00
|
|
|
|
<u-icon class="icon-text" :name="fileUrl+item.icon" size="35" :label="item.name"
|
2024-12-03 09:34:24 +08:00
|
|
|
|
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>
|
2024-12-11 19:36:51 +08:00
|
|
|
|
<u-toast ref="uToast"></u-toast>
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import configService from '@/common/config.service.js';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
topLevel:{
|
|
|
|
|
|
type: Number,
|
|
|
|
|
|
default: 0
|
|
|
|
|
|
},
|
2024-12-11 19:36:51 +08:00
|
|
|
|
isLogin: {
|
|
|
|
|
|
type: String,
|
|
|
|
|
|
default: ''
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
},
|
|
|
|
|
|
data(){
|
|
|
|
|
|
return{
|
|
|
|
|
|
// 基础路径
|
|
|
|
|
|
fileUrl: configService.fileUrl + 'pixel/my/',
|
|
|
|
|
|
// logo图标
|
|
|
|
|
|
logo: 'logo.png',
|
|
|
|
|
|
// 我的页面背景
|
|
|
|
|
|
background: 'background.png',
|
|
|
|
|
|
// 头像
|
|
|
|
|
|
avatar: 'avatar.png',
|
2024-12-05 11:46:54 +08:00
|
|
|
|
// 默认登录头像
|
|
|
|
|
|
defaultLoginAvatar: 'login-avatar.png',
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 次数背景
|
|
|
|
|
|
timeBox: 'time-box.png',
|
|
|
|
|
|
// 次数列表
|
|
|
|
|
|
timeList:[
|
|
|
|
|
|
// 银
|
|
|
|
|
|
{
|
|
|
|
|
|
icon: 'silver.png',
|
|
|
|
|
|
name: '当日会员剩余次数',
|
|
|
|
|
|
time: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
// 蓝
|
|
|
|
|
|
{
|
|
|
|
|
|
icon: 'blue.png',
|
|
|
|
|
|
name: '不限时次数包',
|
|
|
|
|
|
time: 2
|
|
|
|
|
|
},
|
|
|
|
|
|
// 金
|
|
|
|
|
|
{
|
|
|
|
|
|
icon: 'gold.png',
|
|
|
|
|
|
name: '今日次数包',
|
|
|
|
|
|
time: 2
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
// 会员充值
|
|
|
|
|
|
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: '',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
icon: 'customer.png',
|
|
|
|
|
|
name: '联系客服',
|
2024-12-05 11:46:54 +08:00
|
|
|
|
path: '/pages/mobile_web/my/child_pages/contact',
|
2024-12-03 09:34:24 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: '',
|
|
|
|
|
|
},
|
|
|
|
|
|
// {
|
|
|
|
|
|
// icon: 'activation-code.png',
|
|
|
|
|
|
// name: '激活码',
|
|
|
|
|
|
// path: '',
|
|
|
|
|
|
// }
|
2024-12-05 11:46:54 +08:00
|
|
|
|
],
|
2024-12-06 17:27:53 +08:00
|
|
|
|
// 用户信息
|
2024-12-11 19:36:51 +08:00
|
|
|
|
userMessage:{}
|
2024-12-06 17:27:53 +08:00
|
|
|
|
// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
2024-12-05 11:46:54 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed:{
|
|
|
|
|
|
// 获取登录头像
|
|
|
|
|
|
getAvatar(){
|
|
|
|
|
|
return this.isLogin ? this.defaultLoginAvatar : this.avatar;
|
|
|
|
|
|
},
|
|
|
|
|
|
// 获取头像旁tip
|
|
|
|
|
|
getTopTip(){
|
2024-12-11 19:36:51 +08:00
|
|
|
|
// return this.isLogin ? `你好, PIXEL.AI!` : '请登录pixel.ai！';
|
|
|
|
|
|
return this.isLogin ? `你好, ${this.userMessage?.nickName||this.userMessage?.username}!` : '请登录pixel.ai！';
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods:{
|
2024-12-06 23:58:58 +08:00
|
|
|
|
// 初始化
|
|
|
|
|
|
init(){
|
2024-12-11 19:36:51 +08:00
|
|
|
|
this.userMessage = this.isLogin === ''?{}:JSON.parse(this.$store.state.user_message);
|
2024-12-06 23:58:58 +08:00
|
|
|
|
},
|
2024-12-03 09:34:24 +08:00
|
|
|
|
// 操作栏
|
|
|
|
|
|
toControl(item){
|
|
|
|
|
|
if(item.path) uni.navigateTo({ url: item.path });
|
2024-12-05 11:46:54 +08:00
|
|
|
|
},
|
|
|
|
|
|
// 点击头像
|
|
|
|
|
|
handleClickAvatar(){
|
2024-12-11 19:36:51 +08:00
|
|
|
|
if(this.isLogin){
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '注销',
|
|
|
|
|
|
content: '是否确认退出登录？',
|
|
|
|
|
|
confirmColor: '#94d500',
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
|
that.$api.logOut();
|
|
|
|
|
|
that.$u.vuex('vuex_token', '');
|
|
|
|
|
|
that.$u.vuex('user_message', {});
|
|
|
|
|
|
// that.isLogin = '';
|
|
|
|
|
|
that.$emit('userLogOut');
|
|
|
|
|
|
that.userMessage = {};
|
|
|
|
|
|
that.$refs.uToast.show({type:'success',title: "退出登录成功!"});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/mobile_web/my/child_pages/login'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</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;
|
2024-12-11 19:36:51 +08:00
|
|
|
|
width: calc(100% - 150rpx);
|
|
|
|
|
|
.u-icon{
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
/deep/.u-icon__label{
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
2024-12-05 11:46:54 +08:00
|
|
|
|
/deep/.u-icon__img{
|
2024-12-11 19:36:51 +08:00
|
|
|
|
min-width: 107rpx;
|
|
|
|
|
|
min-height: 107rpx;
|
2024-12-05 11:46:54 +08:00
|
|
|
|
border-radius: 100%;
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
.mm-member{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
.mmm-time{
|
|
|
|
|
|
margin: 0 35rpx;
|
|
|
|
|
|
height: 300rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
.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-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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.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>
|
