minnan/src/pages/user/index.vue

<template>
  <view class="home-container h-100vh d-flex flex-col bg-base page-user-index">
    <image 
      class="w-100 position-absolute"
      src="/static/images/mine/Banner.png"
      mode="widthFix"
    />
    <image 
      class="position-absolute title"
      src="/static/images/mine/Title.png"
      mode="widthFix"
    />
    <view class="content h-100 d-flex flex-col wing-l">
      <view v-if="userInfo" class="user-info">
        <image :src="userInfo.avatar" mode="aspectFill" class="avatar"></image>
        <view class="info">
          <text class="nickname">{{ userInfo.nickname }}</text>
          <text class="extra"><text class="label">守护编号</text><text>{{ userInfo.id }}</text><text class="label point-label">积分</text><text>{{ userInfo.totalCheckins }}</text></text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view v-else class="user-info" @click="navTo('login')">
        <image :src="UserHead" mode="aspectFill" class="avatar"></image>
        <view class="info">
          <text class="nickname">点击登录</text>
          <text class="extra"> 登录后您将获得更多权益</text>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view class="d-flex bg-base flex-col shadow-l radius-l">
        <view class="list">
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的好友</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/9fb29e8bdb66490034145c90f892773a.png" mode="aspectFill"></image><text class="label">邀请好友</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/1366973c061bf98594036e42c0344593.png" mode="aspectFill"></image><text class="label">积分日志</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/042236758da5aaed21c1010e5b9440ce.png" mode="aspectFill"></image><text class="label">我的收藏</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/07f750b4cf4959654c40171fdae91c3a.png" mode="aspectFill"></image><text class="label">投稿</text><view class="btn">去投稿</view><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/66d4665b1da5075e60148312469b2630.png" mode="aspectFill"></image><text class="label">我的投稿</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/acd97ca7b3f7736942495c7aec1dd65b.png" mode="aspectFill"></image><text class="label">加入我们</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view class="entry">
            <image src="https://mn.wenlvti.net/uploads/20250313/d2e9010323d098aa51e268fc32f14d3d.png" mode="aspectFill"></image><text class="label">我的预约</text><text class="iconfont icon-arrow-right"></text>
          </view>
          <view v-if="userInfo" class="entry" @click="doLogout">
            <image src="https://mn.wenlvti.net/uploads/20250313/cbc47d0b9cad7891e6154359952858c6.png" mode="aspectFill"></image><text class="label">退出登录</text><text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </view>
    <tabbar :current="4"></tabbar>
  </view>
</template>

<script setup lang="ts">
import Tabbar from '@/common/components/tabs/tabbar.vue';
import UserHead from '@/static/images/home/UserHead.png';
import { confirm } from '@/common/utils/DialogAction';
import { navTo } from '@/common/utils/PageAction';
import { useAuthStore } from '@/store/auth';
import { computed } from 'vue';

const authStore = useAuthStore();
const userInfo = computed(() => authStore.userInfo);

function doLogout() {
  confirm({
    content: '您确定要退出登录吗？',
  }).then((res) => {
    if (res)
      authStore.logout();
  });
}
</script>

<style lang="scss" scoped>
.page-user-index {
  > .content {
    margin-top: 10vh;
  }
  > .title {
    width: 100rpx;
  }
}
.list{
  margin-bottom: 34rpx;

  .entry{
    border-bottom: 1rpx solid #dddddd;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    margin: 0 30rpx;
    image{
      width: 32rpx;
      height: 32rpx;
    }
    text.label{
      flex:1;
      margin-left: 12rpx;
    }
    &:last-child{
      border-bottom: none;
    }
    text.iconfont{
      color:#AAAAAA;
      font-size: 20rpx;
    }
  }
}
.user-info{
  display: flex;
  align-items: center;
  padding: 24rpx 8rpx 60rpx 8rpx;
  image.avatar{
    width: 127rpx;
    height: 127rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }
  .info{
    color:#111111;
    flex:1;
    .nickname{
      font-weight: bold;
      display: block;
      font-size: 36rpx;
      color: #333333;
      margin-bottom: 20rpx;
   }
    .extra{
      font-size: 24rpx;
      text{
        color: #333333;
        font-weight: 600;
      }
      text.label{
        display: inline-block;
        margin-right: 10rpx;
        color:#666666;
        &.point-label{
          margin-left: 24rpx;
        }
      }
    }
  }
}
.btn{
  width: 148rpx;
  height: 54rpx;
  background: linear-gradient(0deg, #299365, rgba(41, 147, 101, 0.8));
  border-radius: 27rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 54rpx;
  text-align: center;
  margin-right: 27rpx;
}
</style>