<template>
|
<view class="container">
|
<view class="user-section">
|
<!-- <image class="bg" src="/static/index/beijing.png"></image> -->
|
<view class="user-info-box">
|
<view class="portrait-box">
|
<image class="portrait" src="/static/rrlogo.png"></image>
|
</view>
|
<view class="info-box">
|
<text class="username">{{ userName || '游客' }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="vip-card-box">
|
<view class="vip-content">
|
<view class="vip-title">
|
VIP会员
|
</view>
|
<button class="open-vip-btn" @click="goVip">立即开通</button>
|
</view>
|
<view class="vip-description">
|
领取会员卡，即可享受会员专享特权
|
</view>
|
</view>
|
|
<view class="cover-container">
|
<image class="arc" src="/static/arc.png"></image>
|
<!-- 浏览历史 -->
|
<view class="history-section icon">
|
<list-cell icon="icon-shoucang_xuanzhongzhuangtai" iconColor="#54b4ef" title="收藏记录"
|
@eventClick="navTo('/pages/user/reportCenter')"></list-cell>
|
<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="我的企业"
|
@eventClick="navTo('/pages/user/company')"></list-cell>
|
<list-cell icon="icon-shezhi1" iconColor="#e07472" title="我的设置" border=""
|
@eventClick="navTo('/pages/set/set')"></list-cell>
|
</view>
|
</view>
|
|
<!-- 退出登录按钮 -->
|
<view class="logout-section">
|
<button class="logout-button" @click="logout">退出登录</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import listCell from '@/components/mix-list-cell';
|
import { mapState } from 'vuex';
|
|
export default {
|
components: {
|
listCell
|
},
|
data() {
|
return {
|
avator: uni.getStorageSync('avator'),
|
userName: uni.getStorageSync('userName'),
|
coverTransform: 'translateY(0px)',
|
coverTransition: '0s',
|
moving: false,
|
}
|
},
|
onLoad() { },
|
computed: {
|
...mapState(['hasLogin', 'userInfo'])
|
},
|
methods: {
|
navTo(item) {
|
uni.navigateTo({
|
url: item
|
})
|
},
|
goVip() {
|
uni.navigateTo({
|
url: '/pages/user/vip'
|
})
|
|
},
|
logout() {
|
// 调用退出登录接口
|
this.$http.post('/User/Logout').then(res => {
|
if (res.Check) {
|
// 清除本地存储的用户信息
|
uni.clearStorageSync();
|
// 提示用户已退出登录
|
this.$msg('已退出登录');
|
|
// 跳转到登录页面或其他页面
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/public/quick'
|
});
|
}, 500);
|
} else {
|
// 处理退出登录失败的情况
|
this.$msg('退出登录失败');
|
}
|
}).catch(error => {
|
// 处理网络请求错误
|
console.error('请求失败', error);
|
this.$msg('网络请求失败，请稍后再试');
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
%flex-center {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
%section {
|
display: flex;
|
justify-content: space-around;
|
align-content: center;
|
background: #fff;
|
border-radius: 10upx;
|
}
|
|
.user-section {
|
height: 320upx;
|
padding: 100upx 30upx 0;
|
position: relative;
|
background: url('/static/index/beijing.png') center no-repeat;
|
background-size: cover;
|
/* 背景图片覆盖整个区域 */
|
|
/* .bg {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
filter: blur(1px);
|
opacity: .7;
|
} */
|
}
|
|
.user-info-box {
|
height: 180upx;
|
display: flex;
|
align-items: center;
|
position: relative;
|
z-index: 1;
|
|
.portrait {
|
width: 130upx;
|
height: 130upx;
|
border: 5upx solid #fff;
|
border-radius: 50%;
|
}
|
|
.username {
|
font-size: $font-lg + 6upx;
|
color: $font-color-dark;
|
margin-left: 20upx;
|
}
|
}
|
|
.vip-card-box {
|
display: flex;
|
flex-direction: column;
|
color: #36343c;
|
background: #b6ceff;
|
border-radius: 16upx;
|
overflow: hidden;
|
position: relative;
|
padding: 20upx 24upx;
|
margin: 20upx 30upx;
|
|
.vip-content {
|
align-items: center;
|
margin-bottom: 20upx;
|
|
.vip-title {
|
font-size: $font-base + 2upx;
|
color: #36343c;
|
float: left;
|
line-height: 80upx;
|
}
|
|
.open-vip-btn {
|
float: right;
|
height: 80upx;
|
text-align: center;
|
line-height: 80upx;
|
font-size: 28upx;
|
color: #36343c;
|
border-radius: 20px;
|
background: linear-gradient(left, #f9e6af, #ffd465);
|
}
|
}
|
|
.vip-description {
|
font-size: $font-sm;
|
color: #36343c;
|
}
|
}
|
|
.cover-container {
|
background: $page-color-base;
|
margin-top: 30upx;
|
padding: 0 30upx;
|
position: relative;
|
background: #f5f5f5;
|
padding-bottom: 20upx;
|
|
.arc {
|
position: absolute;
|
left: 0;
|
top: -34upx;
|
width: 100%;
|
height: 36upx;
|
}
|
}
|
|
.logout-section {
|
margin-top: 30upx;
|
padding: 0 30upx;
|
|
.logout-button {
|
width: 100%;
|
background-color: #3D9AFF;
|
color: white;
|
font-size: $font-base + 2upx;
|
border: none;
|
border-radius: 8upx;
|
padding: 10upx 0;
|
line-height: 68upx;
|
}
|
}
|
|
.tj-sction {
|
@extend %section;
|
|
.tj-item {
|
@extend %flex-center;
|
flex-direction: column;
|
height: 140upx;
|
font-size: $font-sm;
|
color: #75787d;
|
}
|
|
.num {
|
font-size: $font-lg;
|
color: $font-color-dark;
|
margin-bottom: 8upx;
|
}
|
}
|
|
.order-section {
|
@extend %section;
|
padding: 28upx 0;
|
margin-top: 20upx;
|
|
.order-item {
|
@extend %flex-center;
|
width: 120upx;
|
height: 120upx;
|
border-radius: 10upx;
|
font-size: $font-sm;
|
color: $font-color-dark;
|
}
|
|
.yticon {
|
font-size: 48upx;
|
margin-bottom: 18upx;
|
color: #fa436a;
|
}
|
|
.icon-shouhoutuikuan {
|
font-size: 44upx;
|
}
|
}
|
|
.history-section {
|
padding: 30upx 0 0;
|
margin-top: 20upx;
|
background: #fff;
|
border-radius: 10upx;
|
|
.sec-header {
|
display: flex;
|
align-items: center;
|
font-size: $font-base;
|
color: $font-color-dark;
|
line-height: 40upx;
|
margin-left: 30upx;
|
|
.yticon {
|
font-size: 44upx;
|
color: #5eba8f;
|
margin-right: 16upx;
|
line-height: 40upx;
|
}
|
}
|
|
.h-list {
|
white-space: nowrap;
|
padding: 30upx 30upx 0;
|
|
image {
|
display: inline-block;
|
width: 160upx;
|
height: 160upx;
|
margin-right: 20upx;
|
border-radius: 10upx;
|
}
|
}
|
}
|
</style>
|
