增加我的界面的样式
26947
parent
51471dc567
commit
bd53f1f1bd
|
|
@ -1,64 +1,134 @@
|
|||
<template>
|
||||
<view class="h-full w-full" :style="{ height: `${windowHeight}px` }">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="px-4 pt-4 pb-12 bg-[#3c96f3] text-white">
|
||||
<view class="px-4 pt-4 pb-2 bg-[#3c96f3] text-white">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex items-center">
|
||||
<view v-if="!avatar" class="border-2 border-solid border-[#eaeaea] rounded-full w-16 h-16 bg-white">
|
||||
<view class="iconfont icon-people text-gray text-[40px]"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar"
|
||||
class="border-2 border-solid border-[#eaeaea] rounded-full w-16 h-16" mode="widthFix">
|
||||
class="border-2 border-solid border-[#eaeaea] rounded-full w-12 h-13" mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="text-lg ml-2.5">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="ml-4">
|
||||
<view class="text-lg">
|
||||
用户名：{{ name }}
|
||||
用户昵称：{{ nickName }}
|
||||
</view>
|
||||
<view class="text-lg">
|
||||
ID：{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex items-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="name" class="info1" >
|
||||
<view class="info11">
|
||||
<up-icon v-if="sex == '0'"
|
||||
name="man"
|
||||
size="30"
|
||||
color="blue"
|
||||
></up-icon>
|
||||
<up-icon v-else-if="sex == '1'"
|
||||
name="woman"
|
||||
size="30"
|
||||
color="pink"
|
||||
></up-icon>
|
||||
<span >22</span>
|
||||
</view>
|
||||
<view class="info12">
|
||||
<span>LV.</span>
|
||||
<span >2</span>
|
||||
</view>
|
||||
|
||||
<view class="info13">
|
||||
<up-icon
|
||||
name="star"
|
||||
size="30"
|
||||
color="#333333"
|
||||
></up-icon>
|
||||
<span >77</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-section relative top-[-50px]">
|
||||
<view class="m-4 py-5 bg-white rounded-md grid grid-cols-4 text-center [&_.icon]:text-[28px]">
|
||||
<view class="zinfo">
|
||||
|
||||
<view>0关注</view>
|
||||
<view>0赞</view>
|
||||
<view>8浏览</view>
|
||||
<view>8收藏</view>
|
||||
</view>
|
||||
<view class="content-section relative top-[-10px]">
|
||||
<view class="m-4 py-5 bg-white rounded-md grid grid-cols-3 text-center [&_.icon]:text-[28px]">
|
||||
<view @click="handleJiaoLiuQun">
|
||||
<view class="iconfont icon-friendfill text-pink-600 icon"></view>
|
||||
<view class="my-2 text-xs">交流群</view>
|
||||
<view class="iconfont icon-caogao text-pink-600 icon"></view>
|
||||
<view class="my-2 text-xs">草稿箱</view>
|
||||
</view>
|
||||
<view @click="handleBuilding">
|
||||
<view class="iconfont icon-service text-blue-600 icon"></view>
|
||||
<view class="my-2 text-xs">在线客服</view>
|
||||
<view class="iconfont icon-lishixinxi text-blue-600 icon"></view>
|
||||
<view class="my-2 text-xs">历史投稿</view>
|
||||
</view>
|
||||
<view @click="handleBuilding">
|
||||
<view class="iconfont icon-community text-yellow-600 icon"></view>
|
||||
<view class="my-2 text-xs">反馈社区</view>
|
||||
</view>
|
||||
<view @click="handleBuilding">
|
||||
<view class="iconfont icon-dianzan text-green-600 icon"></view>
|
||||
<view class="my-2 text-xs">点赞我们</view>
|
||||
<view @click="handleBuilding" style="justify-content: center;">
|
||||
<view class="iconfont icon-lanqi text-blue-600 icon"></view>
|
||||
<view class="my-2 text-xs">参与活动</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
<view>账号设计</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-help menu-icon"></view>
|
||||
<view>常见问题</view>
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>个人信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>学生专属卡</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>邀请好友</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>地址管理</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>我的订单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>客服中心</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
|
|
@ -77,65 +147,100 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from '@/utils/storage'
|
||||
<script setup>
|
||||
import { useStore } from 'vuex'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ref, getCurrentInstance } from 'vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: this.$store.state.user.name,
|
||||
version: getApp().globalData.config.appInfo.version
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return this.$store.state.user.avatar
|
||||
},
|
||||
windowHeight() {
|
||||
|
||||
const name = ref(proxy.$store.state.user.name)
|
||||
const nickName = ref(proxy.$store.state.user.nickName)
|
||||
const sex = ref(proxy.$store.state.user.sex)
|
||||
const version = ref(getApp().globalData.config.appInfo.version)
|
||||
const avatar = ref(proxy.$store.state.user.avatar)
|
||||
|
||||
function windowHeight() {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/index')
|
||||
},
|
||||
handleToEditInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/edit')
|
||||
},
|
||||
handleToSetting() {
|
||||
this.$tab.navigateTo('/pages/mine/setting/index')
|
||||
},
|
||||
handleToLogin() {
|
||||
this.$tab.reLaunch('/pages/login')
|
||||
},
|
||||
handleToAvatar() {
|
||||
this.$tab.navigateTo('/pages/mine/avatar/index')
|
||||
},
|
||||
handleLogout() {
|
||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
|
||||
function handleToInfo() {
|
||||
proxy.$tab.navigateTo('/pages/mine/info/index')
|
||||
}
|
||||
function handleToEditInfo() {
|
||||
proxy.$tab.navigateTo('/pages/mine/info/edit')
|
||||
}
|
||||
function handleToSetting() {
|
||||
proxy.$tab.navigateTo('/pages/mine/setting/index')
|
||||
}
|
||||
function handleToLogin() {
|
||||
proxy.$tab.reLaunch('/pages/login')
|
||||
}
|
||||
function handleToAvatar() {
|
||||
proxy.$tab.navigateTo('/pages/mine/avatar/index')
|
||||
}
|
||||
function handleLogout() {
|
||||
proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||
proxy.$store.dispatch('LogOut').then(() => {
|
||||
proxy.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
})
|
||||
},
|
||||
handleHelp() {
|
||||
this.$tab.navigateTo('/pages/mine/help/index')
|
||||
},
|
||||
handleAbout() {
|
||||
this.$tab.navigateTo('/pages/mine/about/index')
|
||||
},
|
||||
handleJiaoLiuQun() {
|
||||
this.$modal.showToast('QQ群：①133713780、②146013835')
|
||||
},
|
||||
handleBuilding() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleHelp() {
|
||||
proxy.$tab.navigateTo('/pages/mine/help/index')
|
||||
}
|
||||
function handleAbout() {
|
||||
proxy.$tab.navigateTo('/pages/mine/about/index')
|
||||
}
|
||||
function handleJiaoLiuQun() {
|
||||
proxy.$modal.showToast('QQ群：①133713780、②146013835')
|
||||
}
|
||||
function handleBuilding() {
|
||||
proxy.$modal.showToast('模块建设中~')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
.info1{
|
||||
display: flex;
|
||||
justify-content:space-evenly;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
|
||||
|
||||
.info11{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(174, 235, 96, 1);
|
||||
border-radius: 15px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
|
||||
}
|
||||
.info12{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(242, 132, 102, 1);
|
||||
border-radius: 15px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
}
|
||||
.info13{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(116, 118, 230, 1);
|
||||
border-radius: 15px;
|
||||
padding: 2px 8px 2px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.zinfo{
|
||||
display: flex;
|
||||
justify-content:space-evenly;
|
||||
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,79 +12,31 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: "\e7ae";
|
||||
.icon-lishixinxi:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.icon-password:before {
|
||||
content: "\e8b2";
|
||||
.icon-caogao1:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-code:before {
|
||||
content: "\e699";
|
||||
.icon-caogao:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-setting:before {
|
||||
content: "\e6cc";
|
||||
.icon-dianhua:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.icon-share:before {
|
||||
content: "\e739";
|
||||
.icon-weixin:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-edit:before {
|
||||
content: "\e60c";
|
||||
.icon-qq:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.icon-version:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-service:before {
|
||||
content: "\e6ff";
|
||||
}
|
||||
|
||||
.icon-friendfill:before {
|
||||
content: "\e726";
|
||||
}
|
||||
|
||||
.icon-community:before {
|
||||
content: "\e741";
|
||||
}
|
||||
|
||||
.icon-people:before {
|
||||
content: "\e736";
|
||||
}
|
||||
|
||||
.icon-dianzan:before {
|
||||
content: "\ec7f";
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: "\e7eb";
|
||||
}
|
||||
|
||||
.icon-logout:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-help:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-aixin:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-clean:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-refresh:before {
|
||||
content: "\e604";
|
||||
.icon-lanqi:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -11,6 +11,8 @@ const user = {
|
|||
state: {
|
||||
token: getToken(),
|
||||
name: storage.get(constant.name),
|
||||
nickName: storage.get(constant.nickName),
|
||||
sex: storage.get(constant.sex),
|
||||
avatar: storage.get(constant.avatar),
|
||||
roles: storage.get(constant.roles),
|
||||
permissions: storage.get(constant.permissions),
|
||||
|
|
@ -24,6 +26,14 @@ const user = {
|
|||
state.name = name;
|
||||
storage.set(constant.name, name);
|
||||
},
|
||||
SET_SEX: (state, sex) => {
|
||||
state.sex = sex;
|
||||
storage.set(constant.sex, sex);
|
||||
},
|
||||
SET_NICKNAME: (state, nickName) => {
|
||||
state.nickName = nickName;
|
||||
storage.set(constant.nickName, nickName);
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar;
|
||||
storage.set(constant.avatar, avatar);
|
||||
|
|
@ -128,7 +138,9 @@ const user = {
|
|||
commit("SET_ROLES", ["ROLE_DEFAULT"]);
|
||||
}
|
||||
commit("SET_NAME", username);
|
||||
commit("SET_NICKNAME", user.nickName);
|
||||
commit("SET_AVATAR", avatar);
|
||||
commit("SET_SEX", user.sex);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue