|
@@ -1,127 +0,0 @@
|
|
|
-<!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>
|