talk_appAmin/pages/mine/index.vue

<template>
  <view class="container">
    <view>
      <!-- 顶部导航栏 -->
	  <u-navbar :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
	    <template #left>
	      <view class="text1">个人信息</view>
	    </template>
	    
	    <template #right>
	      <image 
	        src="@/static/settingIcon.png" 
	        class="icon" 
	        @click="gotoSetting"></image>
	    </template>
	  </u-navbar>

    </view>
    <view class="bj"></view>
    <view class="cardss">
		<!-- 圆形头像 -->
      <up-avatar :src="avatar" size="150rpx"></up-avatar>
      <view class="userinfo">
        <view class="utext1 move-down">{{ nickInfo(nickName) }}</view>
        <view class="utext2 move-up2">账号：{{ name }}</view>
        <view class="utext2 move-up">管理地区：{{ deptManageName }}</view>
      </view>
    </view>
  </view>
  <image :src="wave" class="wave"></image>
  <view class="btn " @click="handleLogout">
    <view class="textbtn">退出登录</view>
  </view>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, getCurrentInstance } from 'vue';
import { getDicts } from "@/api/system/dict/data";
import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import image from 'uview-plus/libs/config/props/image';
const { proxy } = getCurrentInstance();
const QNDomain = proxy.$store.state.user.QNDomain
const bgColor = ref('rgba(170, 0, 0, 0)');
const isOfficial = ref(true)
const kfopen = ref(false)
const iconConfig = proxy.iconConfig;
const wave = iconConfig.wave;
const settingIcon = iconConfig.settingIcon


const auditInfo = ref(proxy.$store.state.userInfo.auditInfo)//审核状态
const name = ref(proxy.$store.state.user.name)
const deptManage = ref(proxy.$store.state.user.deptManage)
const deptManageName = ref(proxy.$store.state.user.deptManageName)
const nickName = ref(proxy.$store.state.user.nickName)
const sex = ref(uni.getStorageSync("SET_SEX"))

const infoSchool = ref(proxy.$store.state.userInfo.infoSchool)//学校
const area = ref(proxy.$store.state.userInfo.area)//学校
const backgroundImage = ref(proxy.$store.state.userInfo.backgroundImage)//背景
const infoRank = ref(proxy.$store.state.userInfo.infoRank)
const remark = ref(proxy.$store.state.userInfo.remark)//签名
const infoAssist = ref(proxy.$store.state.userInfo.infoAssist)//获赞
const followCount = ref(proxy.$store.state.userInfo.followCount)//关注
const fanCount = ref(proxy.$store.state.userInfo.fanCount)//粉丝
const qm = (e) => {
  if (e === "" | e === null) {
    return "这个人很懒什么都没有留下……"
  } else {
    return e
  }
}
const dictSexInfo = ref('')
const nickInfo = (nickName) => {
  if (nickName.length > 10) {
    return nickName.substring(0, 10) + "...";
  } else {
    return nickName;
  }
}
onLoad((options) => {
  proxy.$store.dispatch('GetUserInfo');
  console.log("xinxi1:", deptManageName);
  getDicts('sys_user_sex').then(e => {
    dictSexInfo.value = e.data
  })

})
onShow(() => {
  deptManageName.value = proxy.$store.state.user.deptManageName
})
const dictSex = (state) => {
  const dict = dictSexInfo.value.find((dict) => dict.dictValue == state);
  return dict ? dict.dictLabel : '未知状态';
}

const version = ref(getApp().globalData.config.appInfo.version)
const avatar = ref(proxy.$store.state.user.avatar)
function handleLogout() {
  proxy.$modal.confirm('确定注销并退出系统吗？').then(() => {
    proxy.$store.dispatch('LogOut').then(() => {
      proxy.$tab.reLaunch('/pages/index')
    })
  })
}

onPullDownRefresh((options) => {
  proxy.$router.go(0)
})


const gotoSetting = () => {
  proxy.$tab.navigateTo('/pages/mine/setting/index')
}






const imageInfo = () => {
  let info = QNDomain + backgroundImage.value
  return info
}

</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.text1 {
  font-weight: 00;
  font-size: 36rpx;
  color: #FFFFFF;
}

.container {
  position: relative;
}

.bj {
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  width: 750rpx;
  height: 390rpx;
  background-color: #6aa2ff;
}

.cardss {
  position: relative;
  margin-top: 64rpx;
  margin-left: 32rpx;
  display: flex;
  align-items: center;

  .userinfo {
    margin-left: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .utext1 {
	
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
	  font-weight: 580;
	  margin-bottom: 14rpx; /* 添加底部间距 */
    }
	.move-down {
	  position: relative;
	  top: 11rpx; /* 根据需要调整数值 */
	}

    .utext2 {
      margin-top: 30rpx;
      font-weight: 600;
      font-size: 24rpx;
      color: #FFFFFF;
    }
	.move-up {
	  position: relative;
	  top: -14rpx; /* 根据需要调整数值 */
	}
	.move-up2 {
	  position: relative;
	  top: -9rpx; /* 根据需要调整数值 */
	}
	
  }
}

.wave {
  width: 750rpx;
  height: 200rpx;
}

.btn {
  margin: 110rpx auto;
  width: 686rpx;
  height: 88rpx;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  background: #6aa2ff;
  display: flex;
  justify-content: center;
  align-items: center;

  .textbtn {
    font-weight: 600;
    font-size: 30rpx;
    color: #FFFFFF;
	font-weight: 580;
  }
}
.text1 {
  /* 根据需要调整文本样式 */
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  padding-left: 20rpx;
  padding-top: 16px;
}

.icon {
  width: 36px; /* 图标宽度 */
  height: 44px; /* 图标高度 */
  padding-right: 8px;
  padding-top: 16px;
}


</style>