deepChartVueApp/pages/home/member.vue

<template>
  <view class="main">
    <view class="top">
      <view class="bell">
        <image class="image-bell" src="/static/my/bell.png"></image>
      </view>
      <view class="msg">
        <view class="msg-left">
          <view class="avatar"></view>
        </view>
        <view class="msg-center">
          <view style="display: flex;">
            <view class="userInfo">{{ username }}</view>
            <image class="image-editName" src="/static/my/editName.png"></image>
          </view>
          <view class="userId">ID:{{ dccode }}</view>
        </view>
        <view class="msg-right">
          <image class="image-attendance" src="/static/my/Check-in.png"/>
          <span style="font-size:10px;">签到</span>
        </view>
      </view>

      <view class="settings-buttons">
        <view class="setting-btn" @click="goToMarket">
          <image src="/static/my/MarketSettings.png" class="setting-icon"/>
          <text>行情设置</text>
        </view>
        <view class="setting-btn" @click="goToGeneral">
          <image src="/static/my/Settings.png" class="setting-icon"/>
          <text>通用设置</text>
        </view>
      </view>

      <view class="share" @click="goToShare">
        <image class="img-share" src="/static/my/share.png" mode="widthFix"/>
      </view>
    </view>
    <view class="bottom">
      <view class="list-item" @click="goToAccount">
        <image src="/static/my/security.png" class="list-icon"/>
        <text>账号与安全</text>
        <uni-icons type="arrowright" size="16" class="arrow"/>
      </view>
      <view class="list-item">
        <image src="/static/my/connection.png" class="list-icon"/>
        <text>联系我们</text>
        <uni-icons type="arrowright" size="16" class="arrow"/>
      </view>
      <view class="list-item" @click="goToNewVersion">
        <image src="/static/my/update.png" class="list-icon"/>
        <text>新版本更新</text>
        <view class="update-tip">有新版本可更新
          <view class="circle"></view>
        </view>
        <uni-icons type="arrowright" size="16" class="arrow"/>
      </view>
      <view class="list-item">
        <image src="/static/my/opinion.png" class="list-icon"/>
        <text>意见反馈</text>
        <uni-icons type="arrowright" size="16" class="arrow"/>
      </view>
      <view class="list-item" @click="goToAbout">
        <image src="/static/my/about.png" class="list-icon"/>
        <text>关于DeepChart</text>
        <uni-icons type="arrowright" size="16" class="arrow"/>
      </view>
    </view>
    <footerBar class="static-footer" :type="type"></footerBar>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted
} from 'vue'
import {
  ArrowRight
} from '@element-plus/icons-vue'
import footerBar from '../../components/footerBar.vue'
import {getUserInfo} from "@/api/member"

const type = ref('member')
const iSMT = ref(0)
const username = ref('')
const dccode = ref('')

const userInfoRes = ref()// 用户身份信息
userInfoRes.value = getUserInfo()
userInfoRes.value.then(res => {
  username.value = res.data.username
  dccode.value = res.data.dccode
  console.log('用户信息', userInfoRes.value)
})


const goToGeneral = () => {
  uni.navigateTo({
    url: '/pages/setting/general'
  })
}

const goToMarket = () => {
  uni.navigateTo({
    url: '../setting/market'
  })
}

const goToAccount = () => {
  uni.navigateTo({
    url: '../setting/account'
  })
}

const goToNewVersion = () => {
  uni.navigateTo({
    url: '../setting/newVersion'
  })
}

const goToAbout = () => {
  uni.navigateTo({
    url: '../setting/about'
  })
}

const goToShare = () => {
  uni.navigateTo({
    url: '../setting/share'
  })
}

onMounted(() => {
  // 状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight
  console.log('??????????????', iSMT.value)
})
</script>

<style scoped>
.static-footer {
  position: fixed;
  bottom: 0;
}

.top {
  height: 47vh;
  background-color: white;
}

.bell {
  height: 9.6vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 50rpx;
}

.image-bell {
  width: 13px;
  height: 16px;
}

.msg {
  height: 10.7vh;
  display: flex;
  margin-top: 3vh;
  margin-bottom: 3vh;
}

.msg-left {
  width: 33.6vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 175rpx;
  height: 175rpx;
  border-radius: 50%;
  background-color: black;
}

.msg-center {
  width: 51.7vw;
  padding-left: 2.5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.userInfo {
  font-size: 20px;
}

.userId {
  font-size: 14px;
  margin-top: 1vh;
}

.image-editName {
  width: 40rpx;
  height: 40rpx;
  margin-left: 2vw;
}

.msg-right {
  width: 14.7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-attendance {
  width: 43rpx;
  height: 43rpx;
}

.settings-buttons {
  display: flex;
  justify-content: space-around;
}

.setting-btn {
  width: 349rpx;
  height: 135rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(243, 243, 243);
  border-radius: 8%;
}

.setting-icon {
  width: 64.7rpx;
  height: 64.7rpx;
  margin-right: 25rpx;
}

.setting-btn text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.share {
  height: 12.6vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-share {
  width: 720rpx;
  height: 160rpx;
}

.bottom {
  height: 44.5vh;
  margin-top: 1vh;
  background-color: rgb(255, 255, 255);
}

.list-item {
  width: 670rpx;
  height: 7vh;
  display: flex;
  align-items: center;
  margin: 0rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.list-item:last-child {
  border-bottom: none;
}

.list-icon {
  width: 42rpx;
  height: 42rpx;
  margin-right: 18rpx;
}

.arrow {
  margin-left: auto;
}

.update-tip {
  display: flex;
  color: #999;
  font-size: 24rpx;
  align-items: center;
  margin-left: 200rpx;
  justify-content: center;
}

.circle {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: red;
  margin-left: 10rpx;
}
</style>