247 lines
7.4 KiB
Vue
247 lines
7.4 KiB
Vue
<template>
|
||
<view class="h-full w-full" :style="{ height: `${windowHeight}px` }">
|
||
<!--顶部个人信息栏-->
|
||
<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-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">
|
||
用户昵称：{{ nickName }}
|
||
</view>
|
||
<view class="text-lg">
|
||
ID：{{ name }}
|
||
</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 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-caogao text-pink-600 icon"></view>
|
||
<view class="my-2 text-xs">草稿箱</view>
|
||
</view>
|
||
<view @click="handleBuilding">
|
||
<view class="iconfont icon-lishixinxi text-blue-600 icon"></view>
|
||
<view class="my-2 text-xs">历史投稿</view>
|
||
</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 class="list-cell list-cell-arrow" @click="handleToInfo">
|
||
<view class="menu-item-box">
|
||
<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>
|
||
<view>关于我们</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||
<view class="menu-item-box">
|
||
<view class="iconfont icon-setting menu-icon"></view>
|
||
<view>应用设置</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useStore } from 'vuex'
|
||
import { useRouter } from 'vue-router'
|
||
import { ref, getCurrentInstance } from 'vue';
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
|
||
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
|
||
}
|
||
|
||
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')
|
||
})
|
||
})
|
||
}
|
||
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>
|