freight-web/src/pages/profile/index.vue

<template>
  <view class="profile">
    <view>
      <image class="bg" :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/profile/bg.png`" />
    </view>
    <view class="baseinfo">
      <view class="head">
        <image :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/profile/user.png`" class="user"></image>
        <view>
          <view>
            <text class="name">{{ profile.userName || "-" }}</text>
          </view>
          <view>
            <text class="company">{{ profile.factory_name || "-" }}</text>
          </view>
        </view>
      </view>
      <view class="content">
        <u-list :height="'130px'">
          <u-list-item v-for="(item, index) in list" :key="index">
            <u-cell
              :title="item.name"
              arrow-direction="right"
              isLink
              :url="item.path"
              :border="false"
              @click="hanldeClick(item)"
            >
              <template #icon>
                <view style="width: 40rpx">
                  <image :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/profile/${item.icon}`" />
                </view>
              </template>
            </u-cell>
          </u-list-item>
        </u-list>
      </view>
    </view>
  </view>
  <TabBar></TabBar>
</template>
<script setup lang="ts">
import { ProfileApi } from "@/services/index";
import { reactive } from "vue";
import { useMemberStore } from "@/store/index";
import TabBar from '@/components/TabBar/index.vue'
const store = useMemberStore();
const profile = store.profile.userInfo;
const list = reactive([
  {
    name: "基本信息",
    icon: "baseinfo.png",
    path: "/pages/profile/baseinfo",
  },
  {
    name: "修改密码",
    icon: "modifyPwd.png",
    path: "/pages/profile/modifyPwd",
  },
  {
    name: "退出登录",
    icon: "logout.png",
    path: "",
  },
]);

const hanldeClick = (item: any) => {
  if (item.name === "退出登录") {
    uni.navigateTo({
      url: "/pages/login/index", // 要跳转到的页面路径
    });
    ProfileApi.logOut().then((res: any) => {
      if (res.code === 200) {
        uni.navigateTo({
          url: "/pages/login/index", // 要跳转到的页面路径
        });
      }
    });
  }
};
</script>
<style lang="scss">
.profile {
  .bg {
    width: 100%;
    position: absolute;
    top: -60rpx;
    z-index: -1;
  }
  .baseinfo {
    padding: 25.64rpx;
    .head {
      display: flex;
      align-items: center;
      margin-left: 41rpx;
      .user {
        width: 110.9rpx;
        height: 110.9rpx;
        margin-right: 20.51rpx;
      }
      .name {
        font-size: 27rpx;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #000000;
      }
      .company {
        font-size: 21rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
    }
    .content {
      background: #ffffff;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
      border-radius: 13rpx;
      padding: 28.21rpx 21.15rpx;
      margin-top: 24.36rpx;
      image:nth-child(1) {
        width: 28.85rpx;
        height: 24.36rpx;
      }
      image:nth-child(2) {
        width: 25rpx;
        height: 32.69rpx;
      }
      image:nth-child(3) {
        width: 30.13rpx;
        height: 30.13rpx;
      }
    }
  }
}
</style>