JiangningUrbanManageApp/pages/public-mine/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-02-17 14:35:18
 * @LastEditors: 张涛
 * @LastEditTime: 2023-03-03 17:12:18
 * @FilePath: \liaoning-uniapp\pages\company-mine\index.vue
-->
<template>
  <view class="container-main">
    <view class="nav-title">
      <text>我的</text>
    </view>
    <view class="header-bg">
      <view class="header-logo"></view>
      <view class="user-data">
        <text class="user-company">张三</text>
      </view>
    </view>
    <view class="main">
      <view class="list">
        <view
          class="items"
          v-for="(item, index) in list"
          :key="index"
          @click="clickMineCell(item)"
        >
          <view class="item">
            <view class="item-left">
              <!-- <image class="item-icon" :src="baseImgUrl + item.icon" alt="" /> -->
              <text class="item-title">{{ item.title }}</text>
            </view>
            <uni-icons type="right" size="20" color="#D5D5D5"></uni-icons>
          </view>

          <view
            :style="
              index != list.length - 1
                ? 'width:86%; height:0.5px; background:#dce3ec;margin: 0 auto;'
                : ''
            "
          />
        </view>
      </view>
    </view>
    <view class="change-role" @click="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      list: [
        {
          id: 1,
          title: "个人信息",
          icon: "liao-ning/icon_xxsz.png",
          path: "/selfInfo/selfInfo",
        },
        {
          id: 2,
          title: "关于系统",
          icon: "liao-ning/icon_sysc.png",
          path: "/system/system",
        },
      ],
    };
  },
  onShow() {
    uni.getStorage({
      key: "USER_DATA",
      success: (res) => {
        this.userName = res.data.userDto.realName;
      },
    });
  },
  methods: {
    clickMineCell(item) {
      uni.navigateTo({
        url: `/sub-interaction${item.path}`,
      });
    },
    handleLogout() {
      this.$modal.confirm("确定注销并退出系统吗？").then(() => {
        this.$store.dispatch("LogOut").then(() => {
          uni.removeStorageSync("USER_DATA");
          uni.removeStorageSync("App-Token");
          uni.removeStorageSync("roleId");
          this.$tab.reLaunch("/pages/index");
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container-main {
  position: relative;
  height: 100%;
}

.nav-title {
  position: absolute;
  z-index: 11;
  top: 116rpx;
  width: 100%;
  text-align: center;

  text {
    color: #ffffff;
    font-size: 40rpx;
    font-family: "PingFang SC-中粗体, PingFang SC";
  }
}

.header-bg {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 416rpx;
  background: url("https://yth.scjg.ln.gov.cn/sgfs-enterprise/liaoning-app-file/file/liao-ning/home-header.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .header-logo {
    position: absolute;
    left: 25rpx;
    top: 114rpx;
    width: 370rpx;
    height: 63rpx;
    // background: url("static/images/liao-ning/home-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .user-data {
    position: absolute;
    left: 25rpx;
    top: 200rpx;

    .user-company {
      letter-spacing: 2rpx;
      font-size: 34rpx;
      font-family: "PingFang SC-中黑体, PingFang SC";
      font-weight: 500;
      color: #ffffff;
    }

    .user-name {
      font-size: 28rpx;
      font-family: "PingFang SC-常规体, PingFang SC";
      color: #ffffff;
    }

    .user-tag {
      margin-left: 17rpx;
      padding: 3rpx 17rpx;
      background-color: #ffffff;
      font-size: 20rpx;
      font-family: "PingFang SC-常规体, PingFang SC";
      color: #3976f1;
      border-radius: 90rpx 90rpx 90rpx 90rpx;
    }
  }
}

.main {
  position: absolute;
  left: 0;
  z-index: 20;
  top: 326rpx;
  min-height: 100rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;

  .list {
    border-radius: 10rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(57, 118, 241, 0.102);
    background: #ffffff;
    border: 2px solid #dce3ec;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 34rpx 46rpx;

      .item-left {
        display: flex;
        align-items: center;

        .item-icon {
          width: 36rpx;
          height: 36rpx;
        }

        .item-title {
          margin-left: 15rpx;
          font-size: 34rpx;
          font-family: "PingFang SC-常规体, PingFang SC";
          font-weight: 400;
          color: #34373b;
        }
      }
    }
  }
}

.change-role {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  width: 90%;
  background: #ffffff;
  box-shadow: 0 0 20rpx 0 rgba(57, 118, 241, 0.102);
  border-radius: 10rpx;
  border: 2rpx solid #dce3ec;
  padding: 39rpx 0;
  text-align: center;

  text {
    font-size: 30rpx;
    font-family: "PingFang SC-中黑体, PingFang SC";
    font-weight: 500;
    color: #eb5b47;
  }
}
</style>