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

<template>
  <NavBar :count="0" :title="'个人中心'"></NavBar>
  <Box>
    <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>
  </Box>

  <TabBar :select="'我的'"></TabBar>
  <SmallModal
    :title="'确认退出吗？'"
    :content="'退出后将返回至登陆页'"
    :okText="'确认退出'"
    :isMain="true"
    :show="isShowCancelModal"
    @handleModal="(v:boolean) => {handleModal(v)}"
    @handleOk="handleOk()"
  />
</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";
import SmallModal from "@/components/Modal/smallModal.vue";
import Box from "@/components/Box/index.vue";
import pinia from '@/store'


const isShowCancelModal = ref(false);

const handleModal = (v: boolean) => {
  isShowCancelModal.value = v;
};
const handleOk = () => {
  ProfileApi.logOut().then((res: any) => {
    if (res.code === 200) {
      uni.reLaunch({
        url: "/pagesLogin/login/index", // 要跳转到的页面路径
      });
    }
  });
};
const store = useMemberStore(pinia);
const profile = store.profile.userInfo;
const list = reactive([
  {
    name: "基本信息",
    icon: "baseinfo.png",
    path: "/pagesLogin/profile/baseinfo",
  },
  {
    name: "修改密码",
    icon: "modifyPwd.png",
    path: "/pagesLogin/profile/modifyPwd",
  },
  {
    name: "退出登录",
    icon: "logout.png",
    path: "",
  },
]);

const hanldeClick = (item: any) => {
  if (item.name === "退出登录") {
    handleModal(true);
  }
};
</script>
<style lang="scss">
.profile {
  .bg {
    width: 100%;
    position: absolute;
    top: 0rpx;
    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>