367 lines
8.5 KiB
Vue
367 lines
8.5 KiB
Vue
<template>
|
|
<view class="web-header">
|
|
<view class="header-left">
|
|
<image class="header-logo" :src="homeFileUrl+logo"></image>
|
|
<view class="header-function" v-for="(item,index) in functionList" @click="changePage(index)"
|
|
:key="index" :class="judgeSelect(item.path)?'function-select':''">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="header-right" v-if="isLogin">
|
|
<view class="header-function" @click="showMobileDownloadDialog = true">
|
|
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
|
<text class="web-download">移动端下载</text>
|
|
</view>
|
|
<view class="header-function" @click.stop="showIdentityDialog = true">
|
|
<u-icon name="/static/pc-code.png" size="34" class="hfu-icon" />
|
|
<text class="web-diamond">{{ diamond }} 充值</text>
|
|
</view>
|
|
<el-dropdown class="header-avatar" @command="toShow">
|
|
<view class="ha-icon" @click.stop="showIdentityDialog = true;$refs.identityRef.toShowCell(0)">
|
|
<image :src="fileUrl+getAvatar"></image>
|
|
<text>{{ getTopTip }}</text>
|
|
</view>
|
|
<el-dropdown-menu :append-to-body="false" slot="dropdown">
|
|
<el-dropdown-item v-for="(item,index) in dropList" :key="index"
|
|
class="dropdown-item" :command="item.path">
|
|
{{ item.name }}
|
|
</el-dropdown-item>
|
|
<el-dropdown-item command="loginout" class="dropdown-loginout" divided>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</view>
|
|
<view class="header-right" v-else>
|
|
<view class="header-function" @click="showMobileDownloadDialog = true">
|
|
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
|
<text class="web-download">移动端下载</text>
|
|
</view>
|
|
<view class="header-login" @click="showLogin = true">
|
|
<text>登录/注册</text>
|
|
</view>
|
|
</view>
|
|
<u-toast ref="uToast"></u-toast>
|
|
<RecordDrawer :refType="drawerRefType" :showDialog="showRecordDrawer" @toast="showToast" @close="showRecordDrawer = false" />
|
|
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
|
|
@login="login"/>
|
|
<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
|
|
<IdentityDialog ref="identityRef" :userMessage="userMessage" :diamond="diamond" @toast="showToast"
|
|
:showDialog="showIdentityDialog" @close="showIdentityDialog = false;$refs.identityRef.showCell=false" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import LoginDialog from './loginDialog.vue';
|
|
import MobileDownloadDialog from './mobileDownloadDialog.vue';
|
|
import IdentityDialog from './identityDialog.vue';
|
|
import RecordDrawer from './recordDrawer.vue';
|
|
import configService from '@/common/config.service.js';
|
|
export default {
|
|
props: {
|
|
isLogin: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
currentPage: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
},
|
|
components: {
|
|
LoginDialog,
|
|
MobileDownloadDialog,
|
|
IdentityDialog,
|
|
RecordDrawer
|
|
},
|
|
data(){
|
|
return{
|
|
// 基础路径
|
|
fileUrl: configService.fileUrl + 'pixel/my/',
|
|
homeFileUrl: configService.fileUrl + 'pixel/home/',
|
|
// logo图标
|
|
logo: 'logo-new.png',
|
|
// 左侧操作按钮列表
|
|
functionList:[
|
|
{
|
|
name: '首页',
|
|
path: 'home'
|
|
},
|
|
{
|
|
name: '工作台',
|
|
path: 'workshops'
|
|
},
|
|
{
|
|
name: '作品',
|
|
path: 'work'
|
|
},
|
|
],
|
|
// 头像
|
|
avatar: 'avatar.png',
|
|
// 默认登录头像
|
|
defaultLoginAvatar: 'login-avatar.png',
|
|
// 用户信息
|
|
userMessage:{},
|
|
// 钻石余额
|
|
diamond: 0,
|
|
// 登录/注册弹窗显示
|
|
showLogin: false,
|
|
// 移动端下载弹窗显示
|
|
showMobileDownloadDialog: false,
|
|
// 个人信息+充值弹窗显示
|
|
showIdentityDialog: false,
|
|
// 记录抽屉栏显示
|
|
showRecordDrawer: false,
|
|
// 抽屉栏ref组件类型
|
|
drawerRefType: '',
|
|
// 下拉栏列表
|
|
dropList: [
|
|
// {
|
|
// name: '我的作品',
|
|
// path: ''
|
|
// },
|
|
// {
|
|
// name: '我的藏品',
|
|
// path: ''
|
|
// },
|
|
{
|
|
name: '充值记录',
|
|
path: 'recharge'
|
|
},
|
|
{
|
|
name: '生成记录',
|
|
path: 'create'
|
|
},
|
|
{
|
|
name: '发布记录',
|
|
path: 'share'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
computed:{
|
|
// 获取登录头像
|
|
getAvatar(){
|
|
return this.isLogin ? this.defaultLoginAvatar : this.avatar;
|
|
},
|
|
// 获取头像旁tip
|
|
getTopTip(){
|
|
return this.userMessage?.realname||('用户'+this.userMessage?.username);
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
// 页面通信——钻石-1
|
|
uni.$on('deleteDiamond',()=>{
|
|
that.diamond--;
|
|
});
|
|
this.init();
|
|
},
|
|
methods:{
|
|
// 判断当前显示项
|
|
judgeSelect(path){
|
|
return this.currentPage === path;
|
|
},
|
|
// 初始化
|
|
init(){
|
|
if(this.isLogin !== ''){
|
|
this.userMessage = JSON.parse(this.$store.state.user_message);
|
|
this.myCurrency();
|
|
}else{
|
|
this.userMessage = {};
|
|
}
|
|
},
|
|
// 跳转
|
|
toShow(path = ''){
|
|
if(path === 'loginout'){
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '注销',
|
|
content: '是否确认退出登录？',
|
|
confirmColor: '#94d500',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
that.$u.vuex('vuex_token', '');
|
|
that.$u.vuex('user_message', {});
|
|
that.userMessage = {};
|
|
that.diamond = 0;
|
|
that.$api.logOut();
|
|
that.$refs.uToast.show({type:'success',title: "退出登录成功!"});
|
|
}
|
|
}
|
|
})
|
|
} else if(path){
|
|
this.drawerRefType = path;
|
|
this.showRecordDrawer = true;
|
|
}
|
|
},
|
|
// 换页
|
|
changePage(index){
|
|
this.$emit('changePlat',index);
|
|
},
|
|
// 登录
|
|
login(userMessage){
|
|
this.userMessage = userMessage;
|
|
this.myCurrency();
|
|
},
|
|
// 获取我的余额
|
|
async myCurrency(){
|
|
let res = await this.$api.getCurrency();
|
|
if(res?.success){
|
|
// this.timeList[0].time = res.data.numerical;
|
|
this.diamond = res.data.numerical;
|
|
} else {
|
|
this.$refs.uToast.show({type:'error',title: "余额数据拉取失败！"});
|
|
}
|
|
},
|
|
// 提示语弹窗
|
|
showToast({type,title}){
|
|
this.$refs.uToast.show({type: type, title: title});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.web-header{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.header-left{
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 40rpx;
|
|
.header-logo{
|
|
width: 260rpx;
|
|
height: 56rpx;
|
|
}
|
|
.header-function{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
color: #959ba6;
|
|
font-size: 32rpx;
|
|
height: 50rpx;
|
|
margin-left: 100rpx;
|
|
cursor: pointer;
|
|
&:hover{
|
|
opacity: 0.7;
|
|
}
|
|
&:active{
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
.function-select{
|
|
color: #12121f;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.header-right{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin-right: 40rpx;
|
|
.web-download{
|
|
background-image: linear-gradient(to right, #a3d4ff 0%, #bee7df 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.web-diamond{
|
|
background-image: linear-gradient(to right, #a5fe2f 0%, #c9fe76 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.header-function{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
color: #959ba6;
|
|
font-size: 32rpx;
|
|
height: 50rpx;
|
|
margin-left: 100rpx;
|
|
cursor: pointer;
|
|
.hfu-icon{
|
|
margin-right: 10rpx;
|
|
}
|
|
&:hover{
|
|
opacity: 0.7
|
|
}
|
|
&:active{
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
.header-avatar{
|
|
margin-left: 100rpx;
|
|
min-width: 200rpx;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
position: relative;
|
|
.ha-icon{
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 100%;
|
|
}
|
|
text{
|
|
margin-left: 20rpx;
|
|
font-size: 30rpx;
|
|
color: #959ba6;
|
|
|
|
}
|
|
&:hover{
|
|
opacity: 0.8;
|
|
}
|
|
&:active{
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
.header-login{
|
|
margin-left: 100rpx;
|
|
background-color: #d3fd24;
|
|
border-radius: 6rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
&:hover{
|
|
opacity: 0.8;
|
|
}
|
|
&:active{
|
|
opacity: 0.6;
|
|
}
|
|
text{
|
|
font-size: 28rpx;
|
|
color: #12131e;
|
|
margin: 20rpx 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dropdown-item{
|
|
&:hover{
|
|
color: #67C23A !important;
|
|
background-color: rgb(224.6, 242.8, 215.6) !important;
|
|
}
|
|
}
|
|
.dropdown-loginout{
|
|
&:hover{
|
|
color: #F56C6C !important;
|
|
background-color: rgb(253, 225.6, 225.6) !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-dropdown-menu {
|
|
min-width: 200rpx;
|
|
position: absolute !important;
|
|
top: 40rpx !important;
|
|
left: 0rpx !important;
|
|
}
|
|
</style> |