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="user_img">
        <b-image v-if="user.userID" :file-ref-id="user.userID" :readonly="true" :is-single="true"></b-image>
      </div>
      <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 v-if="isDev" class="form-detail">
          <ion-label>openId</ion-label>
          <ion-text>{{ openId }}</ion-text>
        </div>
      </div>
      <div class="page_button" v-if="qrcodeVerifyResult && openId">
        <ion-button shape="round" expand="block" @click="onCompany">我是企业</ion-button>
        <ion-button shape="round" expand="block" @click="onJobUser">我是求职者</ion-button>
      </div>
      <div v-if="!openId" style="color:red;text-align: center;">
        微信授权失败，请重新扫码！
      </div>
    </ion-content>
  </ion-page>
</template>
<script>
import {defineComponent, ref} from "vue";
import {getUrlParams} from "@/utils/urlUtils";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {getUserByID} from "@/api/siteUserInfo";
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/modules/user";
import {getConfig} from "@/utils/config";
import {qrcodeVerify} from "@/api/wechat";
import BImage from "@/components/bImage.vue";

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

  await alert.present();
}

const openId = ref("");
const userId = ref("");
const qrCodeId = ref("");

export default defineComponent({
  name: "jobUserInfoIndex",
  components:{BImage},
  setup() {
    const router = useRouter();
    const user = ref({userNo: '', name: '', IDCard: '', siteName: ''});
    const urlParams = getUrlParams();
    const qrcodeVerifyResult = ref(false);
    const isDev = ref(false);
    /*const userStore = useUserStore();
    openId.value = userStore.getOpenId;*/

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

    const getQrcodeVerify = () => {
      qrcodeVerify(qrCodeId.value, openId.value).then(res => {
        qrcodeVerifyResult.value = res;
        if (!res) {
          presentAlert("二维码无效或已超出扫码次数，请重新打印二维码！");
        }
      });
    };

    const onCompany = function () {
      router.push({
        path: '/jobUserInfo/companyEdit',
        query: {reload: 1, openId: openId.value, loginUserId: userId.value, userId: userId.value}
      });
    };

    const onJobUser = function () {
      router.push({
        path: '/jobUserInfo/userEdit',
        query: {reload: 1, openId: openId.value, status: 1, loginUserId: userId.value, userId: userId.value}
      });
    };

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

    onIonViewDidEnter(() => {
      openId.value = urlParams["openId"];
      userId.value = urlParams["userId"];
      qrCodeId.value = urlParams["qrCodeId"];
    });

    return {
      user,
      onCompany,
      onJobUser,
      openId,
      isDev,
      qrcodeVerifyResult,
      userId,
      qrCodeId,
      getQrcodeVerify,
      getUser
    }
  },
  created() {
    /*const userStore = useUserStore();*/
    const urlParams = getUrlParams();
    openId.value = urlParams["openId"];
    userId.value = urlParams["userId"];
    qrCodeId.value = urlParams["qrCodeId"];
    if (!userId.value) {
      presentAlert("驿站工作者信息获取失败");
      return;
    }
    if (!qrCodeId.value) {
      presentAlert("二维码无效或已超出扫码次数，请重新打印二维码！");
      return;
    }



    this.getUser();

    this.getQrcodeVerify();

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

.user_img {
  .img-list {
    width:100%;
  }

  .img-item:first-child,.img-item:first-child img{
    width: 120px;
    margin:0 auto;
  }

  .img-item:not(:first-child){
      display: none;
  }
}

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

  ion-button {
    width: 150px;
  }
}

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

</style>