jsh_erp_app/pages/index/components/use-pop.vue

<template>
  <view>
    <u-popup
      :show="meunShow"
      @close="closeClick"
      mode="left"
      zIndex="999999"
      bgColor="#F6F8FA"
    >
      <view class="meun-pop">
        <view class="use-cont">
          <u-avatar :src="userInfo.avatar" size="44"></u-avatar>
          <view class="use-cont-name">{{ userInfo.username }}</view>
          <!-- <image class="edit-img" src="@/static/image/home/edit-icon.png" mode=""></image> -->
        </view>
        <view class="use-msg">
          <view class="use-msg-line">
            <image
              class="label-icon"
              src="@/static/image/home/phone-icon.png"
              mode=""
            ></image>
            <view class="use-msg-line-cont">
              <view>手机号</view>
              <view class="line-value">{{ userInfo.phonenum }}</view>
            </view>
          </view>
          <view class="use-msg-line">
            <image
              class="label-icon"
              src="@/static/image/home/role-icon.png"
              mode=""
            ></image>
            <view class="use-msg-line-cont">
              <view>角色</view>
              <view class="line-value">
                <view>{{ userInfo.position }}</view>
                <!-- <u-icon name="arrow-right" color="#7E838D"></u-icon> -->
              </view>
            </view>
          </view>
          <view class="use-msg-line">
            <image
              class="label-icon"
              src="@/static/image/home/version-icon.png"
              mode=""
            ></image>
            <view class="use-msg-line-cont">
              <view>版本号</view>
              <view class="line-value">
                <view>{{ system_info.appVersion }}</view>
              </view>
            </view>
          </view>
        </view>
        <button class="toLoginBtn" @click="logout">退出登录</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(val) {
      this.meunShow = val;
    },
  },
  data() {
    return {
      meunShow: false,
      system_info: {},
    };
  },
  created() {
    this.system_info = uni.getSystemInfoSync();
    console.log("system_info====", this.system_info);
  },
  methods: {
    closeClick() {
      this.meunShow = false;
      this.$emit("close");
    },
    logout() {
      this.$store.dispatch("userLogout");
    },
  },
};
</script>

<style lang="scss" scoped>
.meun-pop {
  padding: 0 32rpx;
  padding-top: calc(74rpx + var(--status-bar-height));
  width: 80vw;
  .use-cont {
    display: flex;
    align-items: center;
    &-name {
      color: #0f1828;
      font-family: "PingFang SC";
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 20rpx;
      margin-right: 8rpx;
    }
    .edit-img {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .use-msg {
    margin-top: 32rpx;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(207, 223, 232, 0.12);
    padding: 0 32rpx;
    &-line {
      display: flex;
      align-items: center;
      .label-icon {
        width: 48rpx;
        height: 48rpx;
      }
      &-cont {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        border-bottom: 1px solid rgba(191, 200, 219, 0.5);
        margin-left: 24rpx;
        flex: 1;
        color: #0f1828;
        font-family: "PingFang SC";
        font-size: 28rpx;
        font-weight: 400;
        .line-value {
          display: flex;
          align-items: center;
          color: #666;
          .u-icon {
            margin-left: 24rpx;
          }
        }
      }
    }
  }
  .toLoginBtn {
    height: 88rpx;
    background: linear-gradient(90deg, #1a65ff 0%, #4287ff 100%);
    border-radius: 16rpx;
    color: #fff;
    margin-bottom: 32rpx;
    margin-top: 30rpx;
  }
}
</style>