talk_appAmin/pages/mine/index.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="handleToUserInfo">
          <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)
	 
	 const info = ()=> {
		 console.log(avatar);
	 }
	 info();

     const handleToUserInfo = ()=> {
      proxy.$tab.navigateTo('/pages/mine/info/userInfo')
     }

   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>