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