EmploymentSite/h5app/src/views/sapp/tabUser.vue

<template>
  <ion-page>
<!--    <ion-header>
      <ion-toolbar color="secondary">
        <ion-title>我的</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-list>
        <ion-item @click="router.push('myInfo')"><ion-label>个人信息</ion-label></ion-item>
        <ion-item>
          <ion-button slot="end" size="default" fill="outline"
          @click="presentAlert">
            <ion-icon :icon="walkOutline" size="large" slot="start"></ion-icon>
            退出
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-content>-->
    <ion-content>
<!--      <div class="mine-toolbar">
        <div class="mine-body">
          <div class="info-img">
            <img class="img-user" src="@/assets/icon/icon-user-2x.png" onerror="this.src='@/assets/icon/icon-user-2x.png'" />
          </div>
          <div class="info-text">
            <div class="info-text-name" style="color: #fff;">
              <h3>{{user?.name}}</h3>
            </div>
          </div>
        </div>
      </div>
      <ion-list>
        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;">
          <img src="@/assets/icon/grxx.png" >
          <ion-label @click="router.push('/tabs/tabUser/myInfo')">个人信息</ion-label>
        </ion-item>
        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;" v-if="isDev">
          <img src="@/assets/icon/tysz.png">
          <ion-label @click="router.push('/tabs/tabUser/updatePassword')">密码修改</ion-label>
        </ion-item>
        <ion-item class="item-menu" detail mode="md" style="&#45;&#45;border-style: none;">
          <img src="@/assets/icon/gywm.png">
          <ion-label>关于我们</ion-label>
        </ion-item>
      </ion-list>
      <div class="login-out" @click="presentAlert" v-if="isDev">
        退出登录
      </div>-->
      <div class="tab-user-content">
         <div class="user_info">
           <div class="user_img">
             <b-image v-if="loadImage" :file-ref-id="user.userID" :readonly="true" :is-single="true"></b-image>
           </div>
           <div class="user_text">
             <h2>{{user.name}}</h2>
             <p>驿站工作人员</p>
           </div>
           <div class="qr_img">
             <img :src="infoQrcodeUrl" :style="imgStyle">
           </div>
         </div>
        <div class="user_panel">
          <div class="panel_title">
            我的设置
          </div>
          <div class="panel_list">
            <ion-item class="item-menu" detail mode="md">
              <img src="@/assets/icon/grxx.png" >
              <ion-label @click="router.push('/tabs/tabUser/myInfo')">个人信息</ion-label>
            </ion-item>
            <ion-item class="item-menu" detail mode="md" v-if="isDev">
              <img src="@/assets/icon/tysz.png">
              <ion-label @click="router.push('/tabs/tabUser/updatePassword')">密码修改</ion-label>
            </ion-item>
            <ion-item class="item-menu" detail mode="md">
              <img src="@/assets/icon/gywm.png">
              <ion-label @click="router.push('/tabs/tabUser/about')">关于我们</ion-label>
            </ion-item>
            <ion-item class="item-menu" detail mode="md">
              <img src="@/assets/icon/tc.png">
              <ion-label @click="presentAlert">退出登录</ion-label>
            </ion-item>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { alertController } from '@ionic/vue';
import { useUserStore } from '@/store/modules/user';
import router from '@/router';
import {getCurrentInstance, onMounted, onUpdated, ref, watch} from "vue";
import {getConfig} from "@/utils/config";
import {getQRCodeUrlToBase64} from "@/api/wechat";
import {base64ToBlob} from "@/utils/imageUtils";
import BImage from "@/components/bImage.vue";
import {useRouter} from "vue-router";

const $router = useRouter();

const infoQrcodeUrl = ref("");
const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const userStore = useUserStore();

const user = ref(userStore.getUserInfo);
const qrCodeUrl = "/jobUserInfo/index";
getQRCodeUrlToBase64(encodeURIComponent(qrCodeUrl), user.value.userID==undefined?"":user.value.userID).then(base64Str => {
  infoQrcodeUrl.value = URL.createObjectURL(base64ToBlob("data:image/png;base64," + base64Str));
}, () => {
  infoQrcodeUrl.value = "";
});
const imgStyle = ref({
  width: '0px',
  height: '0px',
  margin: '0px 0px 0px 40px'
});
const loadImage = ref(true);

const updateBrowserWidth = () => {
  const browserWidth = window.innerWidth;
  imgStyle.value.width = (browserWidth - 130) / 3 + 'px';
  imgStyle.value.height = (browserWidth - 130) / 3 + 'px';
  imgStyle.value.margin = '0px 0px 0px ' + (browserWidth - 200) / 15 + 'px';
}
// 设置初始浏览器宽度
updateBrowserWidth();
// 监听窗口大小变化
window.addEventListener('resize', updateBrowserWidth);
const isDev = ref(false);

const presentAlert = async () => {
  const alert = await alertController.create({
    header: '是否退出登陆？',
    buttons: [
      {
        text: '取消',
        role: 'cancel'
      },
      {
        text: '确定',
        role: 'confirm',
        handler: () => {
          userStore.logout().then(()=>{
            globalProperties.$routeActive = false;
            router.push("/login");
          });
        },
      },
    ],
  });

  await alert.present();
}

// 监听路由变化
watch(() => $router.currentRoute.value.path, (to, form) => {
  if (form == "/tabs/tabUser/myInfo" && to == "/tabs/tabUser") {
    loadImage.value = false;
    setTimeout(() => {
      loadImage.value = true;
    }, 500)
  }
}, {immediate: true});

onMounted(() => {
  getConfig().then((res: any) => {
    isDev.value = res.isDev;
  }, () => {
    isDev.value = true;
  })
})

</script>

<style lang="less">
/*.tab-user-content{
  --background: #ffffff !important;

  .mine-toolbar {
    background-image: url("@/assets/icon/user-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 220px;
    display: flex;
    //background: linear-gradient(to bottom, #39A9FF  30%, #ffffff);


    .mine-body {
      flex-wrap: wrap;
      flex-direction: row;
      width:100%;
      justify-content:center;
      div {
        text-align: center;
        color: var(--ion-color-primary-contrast);
        margin-top: 20px;
      }

      .info-title {
        color: var(--ion-color-primary-contrast);
      }

      .info-img {
        text-align: center;
        !*margin: 30px 0px;*!

        img {
          height: 60px;
          width: 60px;
          border-radius: 10px;
          margin-top: 10px;
        }
      }

      .info-text {
        flex-direction: column;

        .info-text-dp {
          font-size:12px;
        }
      }
    }
  }

  .item-menu {
    img {
      width: 24px;
      height: 24px;
      margin-left: 20px;
      margin-right: 10px;
    }
  }
  .login-out {
    border: 1px solid rgb(233,233,233);
    text-align:center;
    padding:12px 0px;
    margin-top:30px;
    width:100%;
  }

  ion-item::part(native) {
    padding: 0;
  }

  login-out {
    border: 1px solid rgb(233,233,233);
    text-align:center;
    padding:12px 0px;
    margin-top:45px;
    width:100%;
  }
}*/

.tab-user-content{
  background-image: url("../../assets/icon/user_bg.png");
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #F7F8FC;
  background-attachment: local;
  overflow: hidden;

  .user_info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 90px 10px 10px 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 2;

    .user_text{
      padding-left: 20px;

      p{
        color: #899099;
      }
    }
  }

  .user_info::before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    backdrop-filter: blur(2px);
    border-radius: 10px;
  }

  .user_panel{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;

    .panel_title{
      font-size: 18px;
      padding: 15px;
    }

    .panel_list{
      ion-item{
        --inner-border-width: 0;
        --inner-padding-end:0px;
        ion-label{
          padding-left: 10px;
        }
      }
    }
  }

}

.user_img {
  .img-list {
    padding: 0;
  }

  .img-item {
    width: 100%;
  }
}


</style>