zhengnaiwen_citu
/
menduner


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>分享职位</title>
  </head>
  <style type="text/css">
    #app {
      height: 100vh; /* 占据整个视口高度 */
      width: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
      background-color: #fff;
    }
    #app .loadingCss {
      display: flex;  
      justify-content: center;  
      align-items: center;  
      height: 100%;
      background-color: #f0f0f0;
    }
    #app .content {
      padding: 10px 15px;
      display: flex;  
      flex-direction: column;
      /* justify-content: center;   */
      align-items: center;  
      height: 100%;
      width: 100%;
      overflow: auto;
      margin-top: 50px;
    }
    body {
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <body>
  <div id="app" v-cloak>
    <div v-if="loading && !loadFail" class="loadingCss">加载中...</div>
    <div v-else-if="loading && loadFail" class="loadingCss">加载失败...</div>
    <div v-else class="content">
      <div class="banner-title">
        <h1 class="ellipsis">{{ info?.name || '数据错误' }}</h1>
        <span class="salary">{{ info?.payFrom || '数据错误' }}-{{ info?.payTo || '数据错误' }}/月</span>
      </div>
      <div class="banner-tags mt-4">
        <span v-for="k in desc" :key="k.mdi" style="margin-right: 15px;">
          <span class="ml-1">{{ k.value }}</span>
        </span>
      </div>
      <div class="banner-tools my-4">
      </div>
      <div class="">
        <div class="">
          <span style="margin-right: 15px;">立即沟通</span>
          <span>投递简历</span>
        </div>
      </div>
    </div>
  </div>
  </body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    const { nextTick, createApp, ref } = Vue
    const loading = ref(true)
    const loadFail = ref(false)
    const app = createApp({
      setup() {
        const url = window.location.href
        // const urlTest = 'http://menduner.citupro.com:7878/app-api/detail?id=1802541269864042498&name=2&phone=3&file=4'
        const queryStr = url.split('?') && url.split('?')[1] // 提取URL的查询字符串部分
        const query = { id: '', name: '', phone: '', file: '' }
        
        if (queryStr) queryStr.split('&').forEach(function (pair) { // 分割查询字符串为键值对数组
          const parts = pair.split('=') // 分割每个键值对
          query[parts[0]] = parts[1] || '' // 赋值到对象上，注意处理undefined情况
        })

        // 请求分享的详情数据
        let info = ref(null)
        const fetchData = async () => {
          function alertFun (val) {
            loadFail.value = true
            // alert('获取详情失败，' + val)
          }
          try {
            const url = 'http://menduner.citupro.com:7878/app-api/menduner/system/job/advertised/get/detail'
            const params = { id: query.id }
            const res = await axios.get(url, { params })
            if (res && res.status !== 200) return alertFun(res.statusText)
            // 处理数据
            const { data } = res.data
            if (data) {
              info.value = data
              loading.value = false
            } else {
              alertFun(res.data.msg)
            }
          } catch (error) {
            console.error(error)
          }
        }
        // 设置请求头
        axios.defaults.headers.common['tenant-id'] = '155'
        fetchData()
        const desc = [
          { mdi: 'mdi-map-marker-outline', value: '越秀区' }, // areaName
          { mdi: 'mdi-school-outline', value: '高中' }, // eduName
          { mdi: 'mdi-clock-time-ten-outline', value: '经验不限' } // expName
        ]
        return {
          loading,
          loadFail,
          info,
          desc
        }
      }
    })
    app.mount('#app')
  </script>
</html>