opms_wechat/pages/my/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-22 15:46:58
 * @Description: file content
 * @FilePath: \oms\pages\my\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" v-if="showBack" @click="$refs.manage.back()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>我的</text>
        </view>
        <view class="user-info flex flex-middle">
          <image class="user-img" :src="avatar || require('@/static/images/user.jpg')" mode="scaleToFill" />
          <view class="info flex1 flex-column flex_1">
            <u-text :lines="1" size="32rpx" color="#fff" :bold="true" :text="nickName"></u-text>
            <u-text :lines="1" size="24rpx" color="#fff" :text="postName"></u-text>
            <!-- <u-text :lines="1" size="24rpx" color="#fff" text="西南地区销售工程师"></u-text> -->
            <u-text :lines="1" size="24rpx" color="#fff" text="登出" @click="logOut()"></u-text>
          </view>
          <!-- <u-icon name="arrow-right" color="#ffffff" size="18"></u-icon> -->
        </view>
      </view>
    </view>
    <view class="main">
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu1.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="我的资料"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu2.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="企业信息"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu3.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="意见反馈"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="12">
          <view class="my-menu-item flex flex-middle">
            <image class="menu-icon" src="@/static/images/my-menu4.png" mode="scaleToFill" />
            <view class="flex_1"><u-text size="28rpx" color="#646464" text="关于应用"></u-text></view>
            <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>
<script>
  import { mapGetters } from 'vuex'
  import to from 'await-to-js'
  import userApi from '../../api/system/user'
  export default {
    name: 'opsIndex',
    data() {
      return {
        height: '',
        paddingTop: '',
      }
    },
    computed: {
      ...mapGetters(['nickName', 'postName', 'avatar']),
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      console.log(navData)
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    mounted() {
      console.log(this.nickName, this.avatar)
    },
    methods: {
      async logOut() {
        const [err, res] = await to(userApi.logout())
        if (err) return
        if (res.code == 200) {
          uni.showToast({
            title: '登出成功',
            icon: 'none',
            complete: async () => {
              uni.removeStorageSync('opms_token')
              uni.reLaunch({
                url: '/pages/login/index',
              })
            },
          })
        }
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 520rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .user-info {
        padding: 40rpx 76rpx 0 66rpx;
        display: flex;
        .user-img {
          width: 116rpx;
          height: 116rpx;
          border-radius: 50%;
          margin-right: 32rpx;
        }
        .info {
          height: 116rpx;
          margin-right: 32rpx;
        }
      }
    }

    .main {
      position: absolute;
      top: 374rpx;
      width: 100%;
      height: calc(100vh - 374rpx);
      background: #ffffff;
      border-radius: 31rpx 31rpx 0 0;
      overflow: auto;
      padding: 18rpx 38rpx 64rpx 26rpx;
      .my-menu-item {
        padding: 28rpx 44rpx;
        border-bottom: 1px solid #cdcdcd;
        .menu-icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          margin-right: 25rpx;
        }
      }
    }
  }
</style>