yuanlei
/
udemo-im
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
袁磊 8 months ago
parent
4e5086a763
commit
d15f48da20
1 changed files with 213 additions and 211 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 424
      pages/home/user.vue

424
pages/home/user.vue
View File

@ -1,222 +1,224 @@
<template>
<view class="nine-content-002">
<view class="user-header">
<view class="user-header-top">
<view class="user-header-top-info">
<view class="user-header-top-info-logo">
<image class="user-header-top-info-logo-image" :src="userInfo.avatar || '/static/image/user/yy.png'"></image>
</view>
<view class="user-header-top-info-name">
<view v-if="userInfo.userId" class="user-header-top-info-name-username">
{{userInfo.userName}}
</view>
<view v-else class="user-header-top-info-name-username"
@click="openUrl('/pages/user/login')">未登录</view>
</view>
</view>
<view v-if="userInfo.userId" class="user-header-top-message">
<image class="user-header-top-message-image" src="/static/image/user/message.png"></image>
</view>
</view>
<view class="user-header-recommend">
<span v-if="userInfo.userId">昵称：{{userInfo.nickName}}</span>
<span v-else>昵称：无</span>
<span class="pr10">普通用户</span>
</view>
<view class="user-header-member">
<view v-if="userInfo.userId" class="user-header-member-rank">
等级：{{array[1]}}
</view>
<view v-else class="user-header-member-rank">
等级：无
</view>
<view class="user-header-member-note">
会员等级越高权益越高
</view>
</view>
</view>
<view class="nine-nav-001-item mt10">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/admin.png"></image>
<text class="nine-nav-001-item-left-text">后台管理</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c5.png"></image>
<text class="nine-nav-001-item-left-text">我的钱包</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c1.png"></image>
<text class="nine-nav-001-item-left-text">我的订单</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c8.png"></image>
<text class="nine-nav-001-item-left-text">我的卡券</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c7.png"></image>
<text class="nine-nav-001-item-left-text">购物车</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c6.png"></image>
<text class="nine-nav-001-item-left-text">邀请好友</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001 pa5">
<view class="nine-nav-001-item mt10" @click="openUrl('/pages/setting/setting')">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/uset.png"></image>
<text class="nine-nav-001-item-left-text">设置</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
</view>
</view>
<view class="nine-content-002">
<view class="user-header">
<view class="user-header-top">
<view class="user-header-top-info">
<view class="user-header-top-info-logo">
<image class="user-header-top-info-logo-image" :src="userInfo.avatar || defaultAvatar"></image>
</view>
<view class="user-header-top-info-name">
<view v-if="userInfo.userId" class="user-header-top-info-name-username">
{{userInfo.userName}}
</view>
<view v-else class="user-header-top-info-name-username"
@click="openUrl('/pages/user/login')">未登录</view>
</view>
</view>
<view v-if="userInfo.userId" class="user-header-top-message">
<image class="user-header-top-message-image" src="/static/image/user/message.png"></image>
</view>
</view>
<view class="user-header-recommend">
<span v-if="userInfo.userId">昵称：{{userInfo.nickName}}</span>
<span v-else>昵称：无</span>
<span class="pr10">普通用户</span>
</view>
<view class="user-header-member">
<view v-if="userInfo.userId" class="user-header-member-rank">
等级：{{array[1]}}
</view>
<view v-else class="user-header-member-rank">
等级：无
</view>
<view class="user-header-member-note">
会员等级越高权益越高
</view>
</view>
</view>
<!-- 功能列表 -->
<view class="nine-nav-001 pa5">
<view class="nine-nav-001-item mt10">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/admin.png"></image>
<text class="nine-nav-001-item-left-text">后台管理</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view v-if="userInfo.userId" class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c5.png"></image>
<text class="nine-nav-001-item-left-text">我的钱包</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view v-if="userInfo.userId" class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c1.png"></image>
<text class="nine-nav-001-item-left-text">我的订单</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view v-if="userInfo.userId" class="nine-nav-001-item">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c8.png"></image>
<text class="nine-nav-001-item-left-text">我的卡券</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<view class="nine-nav-001-item">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c7.png"></image>
<text class="nine-nav-001-item-left-text">购物车</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<!--#ifndef MP-ALIPAY-->
<view class="nine-nav-001-item mt15">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/c6.png"></image>
<text class="nine-nav-001-item-left-text">邀请好友</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
<!--#endif-->
<view class="nine-nav-001-item mt15" @click="openUrl('/pages/setting/setting')">
<view class="nine-nav-001-item-left">
<image class="image35" mode="scaleToFill" src="/static/image/user/uset.png"></image>
<text class="nine-nav-001-item-left-text">设置</text>
</view>
<view class="nine-nav-001-item-right">
<image class="nine-nav-001-item-right-image" mode="scaleToFill" src="/static/image/user/cc.png">
</image>
</view>
</view>
</view>
</view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import constant from '@/utils/constant'
import { getToken } from '@/utils/token'
export default {
data() {
return {
array: [
"普通会员",
"高级会员",
"超级会员"
],
userInfo: {},
}
},
onLoad(options){
this.userInfo = store.state.user.userInfo;
}
data() {
return {
defaultAvatar: import.meta.env.VITE_APP_DEFAULT_AVATAR,
array: [
"普通会员",
"高级会员",
"超级会员"
],
userInfo: {},
}
},
onLoad(options){
this.userInfo = store.state.user.userInfo;
}
}
</script>
<style scoped>
.user{
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f1f1f1;
}
.user-header {
width: 100%;
background-color: #00aaff;
position: relative;
}
.user-header-top {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.user-header-top-info{
display: flex;
flex-direction: row;
padding: 20rpx 40rpx 10rpx 40rpx;
}
.user-header-top-info-logo{
}
.user-header-top-info-logo-image{
width: 165rpx;
height: 165rpx;
border-radius: 50%;
will-change: transform;
}
.user-header-top-info-name{
padding: 20rpx;
}
.user-header-top-info-name-username{
font-size: 20px;
}
.user-header-top-message{
}
.user-header-top-message-image{
padding-right: 40rpx;
padding-top: 40rpx;
width: 45rpx;
height: 55rpx;
}
.user-header-recommend{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx 30rpx 70rpx 40rpx;
font-size: 12px;
}
.user-header-member{
position: absolute;
height: 40rpx;
bottom: 0rpx;
left: 40rpx;
right: 40rpx;
padding: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #474747;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.user-header-member-rank{
padding: 10rpx 10rpx;
font-size: 10px;
color: #ffaa00;
}
.user-header-member-note{
font-size: 10px;
padding: 8rpx 20rpx;
color: #919191;
background-color: #2e2e2e;
border-radius: 80rpx;
}
.user{
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f1f1f1;
}
.user-header {
width: 100%;
background-color: #00aaff;
position: relative;
}
.user-header-top {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.user-header-top-info{
display: flex;
flex-direction: row;
padding: 20rpx 40rpx 10rpx 40rpx;
}
.user-header-top-info-logo{
}
.user-header-top-info-logo-image{
width: 165rpx;
height: 165rpx;
border-radius: 50%;
will-change: transform;
}
.user-header-top-info-name{
padding: 20rpx;
}
.user-header-top-info-name-username{
font-size: 20px;
}
.user-header-top-message{
}
.user-header-top-message-image{
padding-right: 40rpx;
padding-top: 40rpx;
width: 45rpx;
height: 55rpx;
}
.user-header-recommend{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10rpx 30rpx 70rpx 40rpx;
font-size: 12px;
}
.user-header-member{
position: absolute;
height: 40rpx;
bottom: 0rpx;
left: 40rpx;
right: 40rpx;
padding: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #474747;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.user-header-member-rank{
padding: 10rpx 10rpx;
font-size: 10px;
color: #ffaa00;
}
.user-header-member-note{
font-size: 10px;
padding: 8rpx 20rpx;
color: #919191;
background-color: #2e2e2e;
border-radius: 80rpx;
}
</style>
Write Preview
Loading…
Cancel
Save