EmploymentSite/h5app/src/views/pages/jobUserInfo/index.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2 header-theme3">
      <ion-toolbar>
        <ion-title>信息登记</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="bw-vue-form">
        <div class="form-detail">
          <ion-label>姓名</ion-label>
          <ion-text>{{ user.name }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>工号</ion-label>
          <ion-text>{{ user.userNo }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>身份证号</ion-label>
          <ion-text>{{ user.IDCard }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>身份</ion-label>
          <ion-text>驿站工作人员</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>所属驿站</ion-label>
          <ion-text>{{ user.siteName }}</ion-text>
        </div>
      </div>
      <div class="page_button">
        <ion-button shape="round" expand="block" @click="onCompany">我是企业</ion-button>
        <ion-button shape="round" expand="block" @click="onJobUser">我是求职者</ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>
<script>
import {defineComponent, ref} from "vue";
import {getUrlParams} from "@/utils/urlUtils";
import {alertController} from "@ionic/vue";
import {getUserByID} from "@/api/siteUserInfo";
import {useRouter} from "vue-router";
import {getWxOpenId} from "@/api/wechat";
import {useUserStore} from "@/store/modules/user";


const presentAlert = async (message) => {
  const alert = await alertController.create({
    header: '错误！',
    message: message,
    buttons: [
      '确定'
    ],
  });

  await alert.present();
}

export default defineComponent({
  name: "jobUserInfoIndex",
  setup() {
    const router = useRouter();
    const user = ref({userNo: '', name: '', IDCard: '', siteName: ''});
    const urlParams = getUrlParams();
    const userId = urlParams["userId"];
    const userStore = useUserStore();

    const getUser = async function () {
      const reqData = await getUserByID(userId);
      user.value = reqData;
    };

    const onCompany = function () {
      router.push({path: '/jobUserInfo/companyedit', query: {reload: 1, openId: userStore.getOpenId}});
    };

    const onJobUser = function () {
      router.push({path: '/jobUserInfo/useredit', query: {reload: 1, openId: userStore.getOpenId}});
    };


    if (!userId) {
      presentAlert("驿站工作者信息获取失败");
    } else {
      getUser();
    }

    return {
      user,
      onCompany,
      onJobUser
    }
  }
});
</script>
<style lang="less">
.bw-vue-form{
  padding: 20px 10px;
}

.page_button {
  display: flex;
  justify-content: space-around;
  padding: 20px;

  ion-button {
    width: 150px;
  }
}
.header-theme3{
  ion-title{
    margin-left: 0px !important;
  }
}

</style>