增加我的界面的样式
26947
parent
51471dc567
commit
bd53f1f1bd
|
|
@ -1,64 +1,134 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="h-full w-full" :style="{ height: `${windowHeight}px` }">
|
<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 padding justify-between">
|
||||||
<view class="flex items-center">
|
<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 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 class="iconfont icon-people text-gray text-[40px]"></view>
|
||||||
</view>
|
</view>
|
||||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar"
|
<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>
|
</image>
|
||||||
<view v-if="!name" @click="handleToLogin" class="text-lg ml-2.5">
|
<view v-if="!name" @click="handleToLogin" class="text-lg ml-2.5">
|
||||||
点击登录
|
点击登录
|
||||||
</view>
|
</view>
|
||||||
<view v-if="name" @click="handleToInfo" class="ml-4">
|
<view v-if="name" @click="handleToInfo" class="ml-4">
|
||||||
<view class="text-lg">
|
<view class="text-lg">
|
||||||
用户名：{{ name }}
|
用户昵称：{{ nickName }}
|
||||||
|
</view>
|
||||||
|
<view class="text-lg">
|
||||||
|
ID：{{ name }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view @click="handleToInfo" class="flex items-center">
|
|
||||||
<text>个人信息</text>
|
|
||||||
<view class="iconfont icon-right"></view>
|
|
||||||
</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>
|
||||||
|
|
||||||
<view class="content-section relative top-[-50px]">
|
<view class="zinfo">
|
||||||
<view class="m-4 py-5 bg-white rounded-md grid grid-cols-4 text-center [&_.icon]:text-[28px]">
|
|
||||||
|
<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 @click="handleJiaoLiuQun">
|
||||||
<view class="iconfont icon-friendfill text-pink-600 icon"></view>
|
<view class="iconfont icon-caogao text-pink-600 icon"></view>
|
||||||
<view class="my-2 text-xs">交流群</view>
|
<view class="my-2 text-xs">草稿箱</view>
|
||||||
</view>
|
</view>
|
||||||
<view @click="handleBuilding">
|
<view @click="handleBuilding">
|
||||||
<view class="iconfont icon-service text-blue-600 icon"></view>
|
<view class="iconfont icon-lishixinxi text-blue-600 icon"></view>
|
||||||
<view class="my-2 text-xs">在线客服</view>
|
<view class="my-2 text-xs">历史投稿</view>
|
||||||
</view>
|
</view>
|
||||||
<view @click="handleBuilding">
|
<view @click="handleBuilding" style="justify-content: center;">
|
||||||
<view class="iconfont icon-community text-yellow-600 icon"></view>
|
<view class="iconfont icon-lanqi text-blue-600 icon"></view>
|
||||||
<view class="my-2 text-xs">反馈社区</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<view class="menu-list">
|
<view class="menu-list">
|
||||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||||
<view class="menu-item-box">
|
<view class="menu-item-box">
|
||||||
<view class="iconfont icon-user menu-icon"></view>
|
<view class="iconfont icon-user menu-icon"></view>
|
||||||
<view>编辑资料</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="menu-item-box">
|
||||||
<view class="iconfont icon-help menu-icon"></view>
|
<view class="iconfont icon-user menu-icon"></view>
|
||||||
<view>常见问题</view>
|
<view>个人信息</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="list-cell list-cell-arrow" @click="handleAbout">
|
||||||
<view class="menu-item-box">
|
<view class="menu-item-box">
|
||||||
<view class="iconfont icon-aixin menu-icon"></view>
|
<view class="iconfont icon-aixin menu-icon"></view>
|
||||||
|
|
@ -77,65 +147,100 @@
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import storage from '@/utils/storage'
|
import { useStore } from 'vuex'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ref, getCurrentInstance } from 'vue';
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
const name = ref(proxy.$store.state.user.name)
|
||||||
return {
|
const nickName = ref(proxy.$store.state.user.nickName)
|
||||||
name: this.$store.state.user.name,
|
const sex = ref(proxy.$store.state.user.sex)
|
||||||
version: getApp().globalData.config.appInfo.version
|
const version = ref(getApp().globalData.config.appInfo.version)
|
||||||
}
|
const avatar = ref(proxy.$store.state.user.avatar)
|
||||||
},
|
|
||||||
computed: {
|
function windowHeight() {
|
||||||
avatar() {
|
|
||||||
return this.$store.state.user.avatar
|
|
||||||
},
|
|
||||||
windowHeight() {
|
|
||||||
return uni.getSystemInfoSync().windowHeight - 50
|
return uni.getSystemInfoSync().windowHeight - 50
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
function handleToInfo() {
|
||||||
handleToInfo() {
|
proxy.$tab.navigateTo('/pages/mine/info/index')
|
||||||
this.$tab.navigateTo('/pages/mine/info/index')
|
}
|
||||||
},
|
function handleToEditInfo() {
|
||||||
handleToEditInfo() {
|
proxy.$tab.navigateTo('/pages/mine/info/edit')
|
||||||
this.$tab.navigateTo('/pages/mine/info/edit')
|
}
|
||||||
},
|
function handleToSetting() {
|
||||||
handleToSetting() {
|
proxy.$tab.navigateTo('/pages/mine/setting/index')
|
||||||
this.$tab.navigateTo('/pages/mine/setting/index')
|
}
|
||||||
},
|
function handleToLogin() {
|
||||||
handleToLogin() {
|
proxy.$tab.reLaunch('/pages/login')
|
||||||
this.$tab.reLaunch('/pages/login')
|
}
|
||||||
},
|
function handleToAvatar() {
|
||||||
handleToAvatar() {
|
proxy.$tab.navigateTo('/pages/mine/avatar/index')
|
||||||
this.$tab.navigateTo('/pages/mine/avatar/index')
|
}
|
||||||
},
|
function handleLogout() {
|
||||||
handleLogout() {
|
proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
proxy.$store.dispatch('LogOut').then(() => {
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
proxy.$tab.reLaunch('/pages/index')
|
||||||
this.$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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: #f5f6f7;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -12,79 +12,31 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-user:before {
|
.icon-lishixinxi:before {
|
||||||
content: "\e7ae";
|
content: "\e67d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-password:before {
|
.icon-caogao1:before {
|
||||||
content: "\e8b2";
|
content: "\e600";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-code:before {
|
.icon-caogao:before {
|
||||||
content: "\e699";
|
content: "\e653";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-setting:before {
|
.icon-dianhua:before {
|
||||||
content: "\e6cc";
|
content: "\e614";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-share:before {
|
.icon-weixin:before {
|
||||||
content: "\e739";
|
content: "\e637";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-edit:before {
|
.icon-qq:before {
|
||||||
content: "\e60c";
|
content: "\e6ca";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-version:before {
|
.icon-lanqi:before {
|
||||||
content: "\e63f";
|
content: "\e63b";
|
||||||
}
|
|
||||||
|
|
||||||
.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";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -11,6 +11,8 @@ const user = {
|
||||||
state: {
|
state: {
|
||||||
token: getToken(),
|
token: getToken(),
|
||||||
name: storage.get(constant.name),
|
name: storage.get(constant.name),
|
||||||
|
nickName: storage.get(constant.nickName),
|
||||||
|
sex: storage.get(constant.sex),
|
||||||
avatar: storage.get(constant.avatar),
|
avatar: storage.get(constant.avatar),
|
||||||
roles: storage.get(constant.roles),
|
roles: storage.get(constant.roles),
|
||||||
permissions: storage.get(constant.permissions),
|
permissions: storage.get(constant.permissions),
|
||||||
|
|
@ -24,6 +26,14 @@ const user = {
|
||||||
state.name = name;
|
state.name = name;
|
||||||
storage.set(constant.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) => {
|
SET_AVATAR: (state, avatar) => {
|
||||||
state.avatar = avatar;
|
state.avatar = avatar;
|
||||||
storage.set(constant.avatar, avatar);
|
storage.set(constant.avatar, avatar);
|
||||||
|
|
@ -128,7 +138,9 @@ const user = {
|
||||||
commit("SET_ROLES", ["ROLE_DEFAULT"]);
|
commit("SET_ROLES", ["ROLE_DEFAULT"]);
|
||||||
}
|
}
|
||||||
commit("SET_NAME", username);
|
commit("SET_NAME", username);
|
||||||
|
commit("SET_NICKNAME", user.nickName);
|
||||||
commit("SET_AVATAR", avatar);
|
commit("SET_AVATAR", avatar);
|
||||||
|
commit("SET_SEX", user.sex);
|
||||||
resolve(res);
|
resolve(res);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue