Compare commits
10 Commits
b7b43c0b42
...
ee57ac7568
Author | SHA1 | Date | |
---|---|---|---|
![]() |
ee57ac7568 | ||
![]() |
7d2faa6c1b | ||
![]() |
07b2aa5f80 | ||
![]() |
58c36c01a0 | ||
![]() |
ea04387b58 | ||
![]() |
ec2dc5f659 | ||
![]() |
645c2552f6 | ||
![]() |
36798d3054 | ||
![]() |
857dedad01 | ||
![]() |
d97a712fd1 |
48
App.vue
@@ -4,15 +4,14 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
|
||||
import useUserStore from './stores/useUserStore';
|
||||
import useDictStore from './stores/useDictStore';
|
||||
const { $api, navTo, appendScriptTagElement } = inject('globalFunction');
|
||||
import config from '@/config.js';
|
||||
|
||||
onLaunch((options) => {
|
||||
useUserStore().initSeesionId(); //更新
|
||||
useDictStore().getDictData();
|
||||
// uni.onTabBarMidButtonTap(() => {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/chat/chat',
|
||||
// });
|
||||
// });
|
||||
// uni.hideTabBar();
|
||||
|
||||
// 登录
|
||||
let token = uni.getStorageSync('token') || ''; // 同步获取 缓存信息
|
||||
if (token) {
|
||||
useUserStore()
|
||||
@@ -29,15 +28,10 @@ onLaunch((options) => {
|
||||
|
||||
onMounted(() => {
|
||||
// #ifndef MP-WEIXIN
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
appendScriptTagElement('./static/js/jweixin-1.4.0.js').then(() => {
|
||||
console.log('✅ 微信 JSSDK 加载完成');
|
||||
});
|
||||
} else {
|
||||
appendScriptTagElement('/static/js/jweixin-1.4.0.js').then(() => {
|
||||
console.log('✅ 微信 JSSDK 加载完成');
|
||||
});
|
||||
}
|
||||
appendScriptTagElement('https://qd.zhaopinzao8dian.com/file/csn/jweixin-1.4.0.js').then(() => {
|
||||
console.log('✅ 微信 JSSDK 加载完成');
|
||||
// signatureFn();
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
|
||||
@@ -52,6 +46,7 @@ onHide(() => {
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
@import '@/common/animation.css';
|
||||
@import '@/common/common.css';
|
||||
/* 修改pages tabbar样式 H5有效 */
|
||||
.uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
|
||||
@@ -77,6 +72,29 @@ uni-modal,
|
||||
|
||||
@font-face {
|
||||
font-family: DingTalk JinBuTi;
|
||||
src: url('@/static/font/DingTalk JinBuTi_min.ttf');
|
||||
src: url('/static/font/DingTalk JinBuTi_min.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PingFangSC-Regular;
|
||||
src: url('https://qd.zhaopinzao8dian.com/file/csn/PingFangSC-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PingFangSC-Medium;
|
||||
src: url('https://qd.zhaopinzao8dian.com/file/csn/PingFangSC-Medium.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: DIN-Medium;
|
||||
src: url('https://qd.zhaopinzao8dian.com/file/csn/DIN-Medium.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
193
common/animation.css
Normal file
@@ -0,0 +1,193 @@
|
||||
/*base code*/
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
/*the animation definition*/
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
.tada {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
||||
|
||||
|
||||
.btn-tada:active {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
||||
|
||||
/*the animation definition*/
|
||||
@-webkit-keyframes rubberBand {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale3d(1.25, .75, 1);
|
||||
transform: scale3d(1.25, .75, 1)
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale3d(1.15, .85, 1);
|
||||
transform: scale3d(1.15, .85, 1)
|
||||
}
|
||||
|
||||
65% {
|
||||
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||
transform: scale3d(.95, 1.05, 1)
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale3d(1.05, .95, 1);
|
||||
transform: scale3d(1.05, .95, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rubberBand {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale3d(1.25, .75, 1);
|
||||
-ms-transform: scale3d(1.25, .75, 1);
|
||||
transform: scale3d(1.25, .75, 1)
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
-ms-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1)
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale3d(1.15, .85, 1);
|
||||
-ms-transform: scale3d(1.15, .85, 1);
|
||||
transform: scale3d(1.15, .85, 1)
|
||||
}
|
||||
|
||||
65% {
|
||||
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||
-ms-transform: scale3d(.95, 1.05, 1);
|
||||
transform: scale3d(.95, 1.05, 1)
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: scale3d(1.05, .95, 1);
|
||||
-ms-transform: scale3d(1.05, .95, 1);
|
||||
transform: scale3d(1.05, .95, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
-ms-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
.rubberBand {
|
||||
-webkit-animation-name: rubberBand;
|
||||
animation-name: rubberBand
|
||||
}
|
||||
|
||||
|
||||
.btn-rubberBand:active {
|
||||
-webkit-animation-name: tada;
|
||||
animation-name: tada
|
||||
}
|
@@ -56,6 +56,7 @@ html {
|
||||
background-color: rgba(189, 197, 254, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.btn-incline {
|
||||
transition: transform 0.2s ease;
|
||||
transform-style: preserve-3d;
|
||||
@@ -74,6 +75,23 @@ html {
|
||||
transform: perspective(600px) rotateX(6deg) scale(0.98);
|
||||
}
|
||||
|
||||
.press-button {
|
||||
padding: 10px 20px;
|
||||
background: #3A4750;
|
||||
/* 深灰蓝 */
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
/* box-shadow: 0 4px 0 #2C3E50; */
|
||||
}
|
||||
|
||||
.press-button:active {
|
||||
transform: scale(0.95) translateY(2px);
|
||||
/* box-shadow: 0 2px 0 #1C2833; */
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.btn-shaky:active {
|
||||
|
@@ -543,6 +543,7 @@ function isEmptyObject(obj) {
|
||||
return obj && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length === 0;
|
||||
}
|
||||
|
||||
|
||||
export const $api = {
|
||||
msg,
|
||||
prePage,
|
||||
@@ -584,5 +585,5 @@ export default {
|
||||
appendScriptTagElement,
|
||||
insertSortData,
|
||||
isInWechatMiniProgramWebview,
|
||||
isEmptyObject
|
||||
isEmptyObject,
|
||||
}
|
@@ -110,9 +110,11 @@ const handleScrollToLower = () => {
|
||||
align-items: center;
|
||||
padding: 7rpx 3rpx;
|
||||
.header-title {
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
.subtitle-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
312
components/TikTok/TikTok.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<swiper
|
||||
class="m-tiktok-video-swiper"
|
||||
circular
|
||||
@change="swiperChange"
|
||||
:current="state.current"
|
||||
:vertical="true"
|
||||
duration="300"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in state.displaySwiperList" :key="index">
|
||||
<view class="swiper-item" @click="(e) => handleClick(index, e)">
|
||||
<video
|
||||
:id="`video__${index}`"
|
||||
:controls="controls"
|
||||
:autoplay="false"
|
||||
:loop="loop"
|
||||
@ended="ended"
|
||||
@controlstoggle="controlstoggle"
|
||||
@play="onPlay"
|
||||
@error="emits('error')"
|
||||
class="m-tiktok-video-player"
|
||||
:src="item.src || item.explainUrl"
|
||||
v-if="index === 0 || !state.isFirstLoad"
|
||||
></video>
|
||||
<view class="cover-triangle" v-if="pause"></view>
|
||||
<image
|
||||
v-if="item.poster && state.displayIndex != index"
|
||||
:src="item.poster"
|
||||
class="m-tiktok-video-poster"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<slot :item="item"></slot>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance, watch, nextTick } from 'vue';
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||||
const _this = getCurrentInstance();
|
||||
const emits = defineEmits(['play', 'error', 'loadMore', 'change', 'controlstoggle', 'click', 'ended']);
|
||||
|
||||
const lastTapTime = ref(0);
|
||||
const pause = ref(false);
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 视频列表
|
||||
*/
|
||||
videoList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
/**
|
||||
* 是否循环播放一个视频
|
||||
*/
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 显示原生控制栏
|
||||
*/
|
||||
controls: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否自动播放
|
||||
*/
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* 是否自动滚动播放
|
||||
*/
|
||||
autoChange: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 滚动加载阈值(即播放到剩余多少个之后触发加载更多
|
||||
*/
|
||||
loadMoreOffsetCount: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
/**
|
||||
* 暂停 1 单机暂停; 2 双击暂停; 0关闭
|
||||
*/
|
||||
pauseType: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
originList: [], // 源数据
|
||||
displaySwiperList: [], // swiper需要的数据
|
||||
displayIndex: 0, // 用于显示swiper的真正的下标数值只有:0,1,2。
|
||||
originIndex: 0, // 记录源数据的下标
|
||||
current: 0,
|
||||
oid: 0,
|
||||
showControls: '',
|
||||
toggleShow: true, // 显示面板
|
||||
videoContexts: [],
|
||||
isFirstLoad: true,
|
||||
});
|
||||
|
||||
const initVideoContexts = () => {
|
||||
state.videoContexts = [
|
||||
uni.createVideoContext('video__0', _this),
|
||||
uni.createVideoContext('video__1', _this),
|
||||
uni.createVideoContext('video__2', _this),
|
||||
];
|
||||
};
|
||||
|
||||
const onPlay = (e) => {
|
||||
emits('play', e);
|
||||
};
|
||||
|
||||
const setVideoRef = (el, index) => {
|
||||
if (el) {
|
||||
videoRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
|
||||
function handleClick(index, e) {
|
||||
const now = Date.now();
|
||||
switch (props.pauseType) {
|
||||
case 1:
|
||||
if (pause.value) {
|
||||
state.videoContexts[index].play();
|
||||
pause.value = false;
|
||||
} else {
|
||||
state.videoContexts[index].pause();
|
||||
pause.value = true;
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (now - lastTapTime.value < 300) {
|
||||
if (pause.value) {
|
||||
state.videoContexts[index].play();
|
||||
pause.value = false;
|
||||
} else {
|
||||
state.videoContexts[index].pause();
|
||||
pause.value = true;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
lastTapTime.value = now;
|
||||
state.toggleShow = !state.toggleShow;
|
||||
emits('click', e);
|
||||
}
|
||||
function ended() {
|
||||
// 自动切换下一个视频
|
||||
if (props.autoChange) {
|
||||
if (state.displayIndex < 2) {
|
||||
state.current = state.displayIndex + 1;
|
||||
} else {
|
||||
state.current = 0;
|
||||
}
|
||||
}
|
||||
emits('ended');
|
||||
}
|
||||
/**
|
||||
* 初始一个显示的swiper数据
|
||||
* @originIndex 从源数据的哪个开始显示默认0,如从其他页面跳转进来,要显示第n个,这个参数就是他的下标
|
||||
*/
|
||||
function initSwiperData(originIndex = state.originIndex) {
|
||||
const originListLength = state.originList.length; // 源数据长度
|
||||
const displayList = [];
|
||||
displayList[state.displayIndex] = state.originList[originIndex];
|
||||
displayList[state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1] =
|
||||
state.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];
|
||||
displayList[state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1] =
|
||||
state.originList[originIndex + 1 == originListLength ? 0 : originIndex + 1];
|
||||
state.displaySwiperList = displayList;
|
||||
|
||||
if (state.oid >= state.originList.length) {
|
||||
state.oid = 0;
|
||||
}
|
||||
if (state.oid < 0) {
|
||||
state.oid = state.originList.length - 1;
|
||||
}
|
||||
// 暂停所有视频
|
||||
state.videoContexts.map((item) => item?.stop());
|
||||
setTimeout(() => {
|
||||
// 当前视频
|
||||
if (props.autoplay) {
|
||||
uni.createVideoContext(`video__${state.displayIndex}`, _this).play();
|
||||
}
|
||||
}, 500);
|
||||
// 数据改变
|
||||
emits('change', {
|
||||
index: originIndex,
|
||||
detail: state.originList[originIndex],
|
||||
});
|
||||
// 加载更多
|
||||
var pCount = state.originList.length - props.loadMoreOffsetCount;
|
||||
if (originIndex == pCount) {
|
||||
emits('loadMore');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* swiper滑动时候
|
||||
*/
|
||||
function swiperChange(event) {
|
||||
const { current } = event.detail;
|
||||
state.isFirstLoad = false;
|
||||
const originListLength = state.originList.length; // 源数据长度
|
||||
// 向后滚动
|
||||
if (state.displayIndex - current == 2 || state.displayIndex - current == -1) {
|
||||
state.originIndex = state.originIndex + 1 == originListLength ? 0 : state.originIndex + 1;
|
||||
state.displayIndex = state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1;
|
||||
state.oid = state.originIndex - 1;
|
||||
initSwiperData(state.originIndex);
|
||||
}
|
||||
// 如果两者的差为-2或者1则是向前滑动
|
||||
else if (state.displayIndex - current == -2 || state.displayIndex - current == 1) {
|
||||
state.originIndex = state.originIndex - 1 == -1 ? originListLength - 1 : state.originIndex - 1;
|
||||
state.displayIndex = state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1;
|
||||
state.oid = state.originIndex + 1;
|
||||
initSwiperData(state.originIndex);
|
||||
}
|
||||
state.toggleShow = true;
|
||||
}
|
||||
|
||||
function controlstoggle(e) {
|
||||
state.showControls = e.detail.show;
|
||||
emits('controlstoggle', e);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.videoList,
|
||||
() => {
|
||||
if (props.videoList?.length) {
|
||||
state.originList = props.videoList;
|
||||
if (state.isFirstLoad || !state.videoContexts?.length) {
|
||||
initSwiperData();
|
||||
initVideoContexts();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
let loadTimer = null;
|
||||
onLoad(() => {
|
||||
// 为了首次只加载一条视频(提高首次加载性能),延迟加载后续视频
|
||||
loadTimer = setTimeout(() => {
|
||||
state.isFirstLoad = false;
|
||||
clearTimeout(loadTimer);
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
onUnload(() => {
|
||||
clearTimeout(loadTimer);
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
initSwiperData,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.m-tiktok-video-swiper,
|
||||
.m-tiktok-video-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
.m-tiktok-video-swiper {
|
||||
.swiper-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.m-tiktok-video-poster {
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-triangle{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
width: 132rpx
|
||||
height: 132rpx
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,0.3)
|
||||
}
|
||||
.cover-triangle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-40%, -50%) rotate(90deg);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 40rpx solid transparent;
|
||||
border-right: 40rpx solid transparent;
|
||||
border-bottom: 60rpx solid #fff;
|
||||
}
|
||||
</style>
|
@@ -24,11 +24,13 @@ const renderedHtml = computed(() => parseMarkdown(props.content));
|
||||
|
||||
const handleItemClick = (e) => {
|
||||
let { attrs } = e.detail.node;
|
||||
console.log(attrs);
|
||||
let { 'data-copy-index': codeDataIndex, 'data-job-id': jobId, class: className } = attrs;
|
||||
switch (className) {
|
||||
case 'custom-card':
|
||||
navTo('/packageA/pages/post/post?jobId=' + jobId);
|
||||
return;
|
||||
return navTo('/packageA/pages/post/post?jobId=' + jobId);
|
||||
case 'custom-more':
|
||||
return navTo('/packageA/pages/moreJobs/moreJobs?jobId=' + jobId);
|
||||
case 'copy-btn':
|
||||
uni.setClipboardData({
|
||||
data: codeDataList[codeDataIndex],
|
||||
@@ -40,6 +42,7 @@ const handleItemClick = (e) => {
|
||||
});
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -258,6 +261,19 @@ ol {
|
||||
</style>
|
||||
|
||||
<style lang="stylus">
|
||||
.custom-more{
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
color: #256BFA
|
||||
padding-top: 5rpx
|
||||
padding-bottom: 14rpx
|
||||
.more-icon{
|
||||
width: 60rpx;
|
||||
height: 40rpx;
|
||||
background: url('@/static/svg/seemore.svg') center center no-repeat;
|
||||
background-size: 100% 100%
|
||||
}
|
||||
}
|
||||
.custom-card
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
@@ -276,11 +292,13 @@ ol {
|
||||
align-items: center;
|
||||
justify-content: space-between
|
||||
.title-text
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
max-width: calc(100% - 160rpx);
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
font-size: 30rpx
|
||||
.card-salary
|
||||
font-family: DIN-Medium;
|
||||
font-size: 28rpx;
|
||||
color: #FF6E1C;
|
||||
|
||||
|
@@ -9,8 +9,12 @@
|
||||
<dict-tree-Label class="mar_ri10" dictType="industry" :value="job.industry"></dict-tree-Label>
|
||||
<dict-Label dictType="scale" :value="job.scale"></dict-Label>
|
||||
</view>
|
||||
<view>
|
||||
<text class="color_256BFA fs_14">在招职位·{{ job.totalRecruitment || '-' }}个</text>
|
||||
<view class="ris">
|
||||
<text class="fs_14">
|
||||
在招职位·
|
||||
<text class="color_256BFA">{{ job.totalRecruitment || '-' }}</text>
|
||||
个
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-tags">
|
||||
@@ -76,6 +80,7 @@ function nextDetail(company) {
|
||||
justify-content: space-between
|
||||
align-items: flex-start
|
||||
.company{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
@@ -97,6 +102,7 @@ function nextDetail(company) {
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
.tag{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
width: fit-content;
|
||||
height: 30rpx;
|
||||
background: #F4F4F4;
|
||||
@@ -121,4 +127,7 @@ function nextDetail(company) {
|
||||
color: #6C7282;
|
||||
}
|
||||
}
|
||||
.ris{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
@@ -99,11 +99,13 @@ function nextDetail(job) {
|
||||
justify-content: space-between
|
||||
align-items: flex-start
|
||||
.company{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.salary{
|
||||
font-family: DIN-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #4C6EFB;
|
||||
@@ -120,6 +122,7 @@ function nextDetail(job) {
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
.tag{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
width: fit-content;
|
||||
height: 30rpx;
|
||||
background: #F4F4F4;
|
||||
|
@@ -6,6 +6,7 @@
|
||||
background-color="#FFFFFF"
|
||||
@maskClick="maskClickFn"
|
||||
:mask-click="maskClick"
|
||||
class="popup-fix"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
@@ -183,6 +184,15 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-fix {
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
.popup-content {
|
||||
color: #000000;
|
||||
height: 80vh;
|
||||
@@ -320,7 +330,7 @@ defineExpose({
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 15rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
.content-item:first-child {
|
||||
@@ -329,8 +339,8 @@ defineExpose({
|
||||
|
||||
.check-content {
|
||||
display: grid;
|
||||
gap:16rpx;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
||||
gap: 16rpx;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
||||
place-items: stretch;
|
||||
|
||||
.checkbox-item {
|
||||
@@ -338,9 +348,9 @@ defineExpose({
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #d9d9d9;
|
||||
|
||||
min-width: 0;
|
||||
padding: 0 10rpx;
|
||||
|
||||
min-width: 0;
|
||||
padding: 0 10rpx;
|
||||
height: 80rpx;
|
||||
background: #e8eaee;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
@@ -348,12 +358,11 @@ defineExpose({
|
||||
.option-label {
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.checkedstyle {
|
||||
|
||||
height: 76rpx;
|
||||
background: rgba(37, 107, 250, 0.06);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
@@ -362,4 +371,4 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@@ -58,9 +58,9 @@ const state = reactive({
|
||||
visible: false,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
serchforIt();
|
||||
});
|
||||
// onMounted(() => {
|
||||
// serchforIt();
|
||||
// });
|
||||
|
||||
// 统一处理二维数组格式
|
||||
const processedListData = computed(() => {
|
||||
@@ -82,11 +82,11 @@ const open = (newConfig = {}) => {
|
||||
rowLabel: configRowLabel = 'label',
|
||||
rowKey: configRowKey = 'value',
|
||||
maskClick: configMaskClick = false,
|
||||
defaultIndex = [],
|
||||
defaultId = '',
|
||||
} = newConfig;
|
||||
|
||||
reset();
|
||||
serchforIt();
|
||||
serchforIt(defaultId);
|
||||
|
||||
if (configTitle) title.value = configTitle;
|
||||
if (typeof success === 'function') confirmCallback.value = success;
|
||||
@@ -143,11 +143,13 @@ const handleClick = async (callback) => {
|
||||
console.error('confirmCallback 执行出错:', error);
|
||||
}
|
||||
};
|
||||
function serchforIt() {
|
||||
function serchforIt(defaultId) {
|
||||
if (state.stations.length) {
|
||||
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
|
||||
const ids = defaultId
|
||||
? defaultId.split(',').map((id) => Number(id))
|
||||
: userInfo.value.jobTitleId.split(',').map((id) => Number(id));
|
||||
count.value = ids.length;
|
||||
state.jobTitleId = userInfo.value.jobTitleId;
|
||||
state.jobTitleId = defaultId ? defaultId : userInfo.value.jobTitleId;
|
||||
setCheckedNodes(state.stations, ids);
|
||||
state.visible = true;
|
||||
return;
|
||||
@@ -166,14 +168,14 @@ function serchforIt() {
|
||||
|
||||
const reset = () => {
|
||||
maskClick.value = false;
|
||||
confirmCallback.value = null;
|
||||
cancelCallback.value = null;
|
||||
changeCallback.value = null;
|
||||
listData.value = [];
|
||||
selectedIndex.value = [0, 0, 0];
|
||||
rowLabel.value = 'label';
|
||||
rowKey.value = 'value';
|
||||
selectedItems.value = [];
|
||||
JobsIdsValue.value = '';
|
||||
JobsLabelValue.value = '';
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
|
@@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<view class="tabbar_container">
|
||||
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
||||
<view class="item-top" :class="[item.centerItem ? 'center-item-img' : '']">
|
||||
<view
|
||||
class="item-top"
|
||||
:class="[
|
||||
item.centerItem ? 'center-item-img ' : '',
|
||||
item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
|
||||
]"
|
||||
>
|
||||
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
|
||||
</view>
|
||||
<view class="badge" v-if="item.badge">{{ item.badge }}</view>
|
||||
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
||||
<text>{{ item.text }}</text>
|
||||
</view>
|
||||
@@ -11,90 +18,107 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentItem: 0,
|
||||
tabbarList: [
|
||||
{
|
||||
id: 0,
|
||||
text: '首页',
|
||||
path: '/pages/index/index',
|
||||
iconPath: '../../static/tabbar/calendar.png',
|
||||
selectedIconPath: '../../static/tabbar/calendared.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: '招聘会',
|
||||
path: '/pages/careerfair/careerfair',
|
||||
iconPath: '../../static/tabbar/post.png',
|
||||
selectedIconPath: '../../static/tabbar/posted.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: '',
|
||||
path: '/pages/chat/chat',
|
||||
iconPath: '../../static/tabbar/logo2copy.png',
|
||||
selectedIconPath: '../../static/tabbar/logo2copy.png',
|
||||
centerItem: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: '消息',
|
||||
path: '/pages/msglog/msglog',
|
||||
iconPath: '../../static/tabbar/chat4.png',
|
||||
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
||||
centerItem: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: '我的',
|
||||
path: '/pages/mine/mine',
|
||||
iconPath: '../../static/tabbar/mine.png',
|
||||
selectedIconPath: '../../static/tabbar/mined.png',
|
||||
centerItem: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted, computed } from 'vue';
|
||||
import { useReadMsg } from '@/stores/useReadMsg';
|
||||
const props = defineProps({
|
||||
currentpage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
props: {
|
||||
currentpage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
const readMsg = useReadMsg();
|
||||
const currentItem = ref(0);
|
||||
const tabbarList = computed(() => [
|
||||
{
|
||||
id: 0,
|
||||
text: '首页',
|
||||
path: '/pages/index/index',
|
||||
iconPath: '../../static/tabbar/calendar.png',
|
||||
selectedIconPath: '../../static/tabbar/calendared.png',
|
||||
centerItem: false,
|
||||
badge: readMsg.badges[0].count,
|
||||
},
|
||||
mounted() {
|
||||
this.currentItem = this.currentpage;
|
||||
uni.hideTabBar();
|
||||
{
|
||||
id: 1,
|
||||
text: '招聘会',
|
||||
path: '/pages/careerfair/careerfair',
|
||||
iconPath: '../../static/tabbar/post.png',
|
||||
selectedIconPath: '../../static/tabbar/posted.png',
|
||||
centerItem: false,
|
||||
badge: readMsg.badges[1].count,
|
||||
},
|
||||
methods: {
|
||||
changeItem(item) {
|
||||
uni.switchTab({
|
||||
url: item.path,
|
||||
});
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: '',
|
||||
path: '/pages/chat/chat',
|
||||
iconPath: '../../static/tabbar/logo3.png',
|
||||
selectedIconPath: '../../static/tabbar/logo3.png',
|
||||
centerItem: true,
|
||||
badge: readMsg.badges[2].count,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: '消息',
|
||||
path: '/pages/msglog/msglog',
|
||||
iconPath: '../../static/tabbar/chat4.png',
|
||||
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
||||
centerItem: false,
|
||||
badge: readMsg.badges[3].count,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: '我的',
|
||||
path: '/pages/mine/mine',
|
||||
iconPath: '../../static/tabbar/mine.png',
|
||||
selectedIconPath: '../../static/tabbar/mined.png',
|
||||
centerItem: false,
|
||||
badge: readMsg.badges[4].count,
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
uni.hideTabBar();
|
||||
currentItem.value = props.currentpage;
|
||||
});
|
||||
|
||||
const changeItem = (item) => {
|
||||
uni.switchTab({
|
||||
url: item.path,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 20rpx;
|
||||
min-width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.tabbar_container {
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
width: 100%;
|
||||
height: 126rpx;
|
||||
// box-shadow: 0 0 5px #999;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rpx 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
z-index: 998;
|
||||
overflow: hidden;
|
||||
// position: fixed;
|
||||
// bottom: 0rpx;
|
||||
// left: 0rpx;
|
||||
// box-shadow: 0 0 5px #999;
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
// z-index: 998;
|
||||
.tabbar_item {
|
||||
width: 33.33%;
|
||||
height: 100rpx;
|
||||
@@ -120,12 +144,12 @@ export default {
|
||||
}
|
||||
}
|
||||
.center-item-img {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 96rpx !important;
|
||||
height: 96rpx !important;
|
||||
// position: absolute;
|
||||
// top: 0rpx;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, 0);
|
||||
width: 108rpx !important;
|
||||
height: 98rpx !important;
|
||||
}
|
||||
.item-active {
|
||||
color: #256bfa;
|
||||
|
21
config.js
@@ -1,6 +1,6 @@
|
||||
export default {
|
||||
// baseUrl: 'http://39.98.44.136:8080', // 测试
|
||||
baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
|
||||
baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
|
||||
// sseAI+
|
||||
// StreamBaseURl: 'http://39.98.44.136:8000',
|
||||
StreamBaseURl: 'https://qd.zhaopinzao8dian.com/ai',
|
||||
@@ -14,6 +14,8 @@ export default {
|
||||
DBversion: 2,
|
||||
// 只使用本地缓寸的数据
|
||||
OnlyUseCachedDB: true,
|
||||
// 使用模拟定位
|
||||
UsingSimulatedPositioning: true,
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
@@ -39,7 +41,9 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
// AI -> 上传文件数量
|
||||
allowedFileNumber: 2,
|
||||
// AI -> 上传文件类型
|
||||
allowedFileTypes: [
|
||||
"text/plain", // .txt
|
||||
"text/markdown", // .md
|
||||
@@ -52,5 +56,18 @@ export default {
|
||||
"text/csv", // .csv
|
||||
"application/vnd.ms-excel", // .xls
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
|
||||
]
|
||||
],
|
||||
// 首页询问 -> 推荐权重
|
||||
weights: {
|
||||
categories: 1, //岗位
|
||||
experience: 0.3, //经验
|
||||
salary: 0.5, // 薪资
|
||||
areas: 0.5 // 区域
|
||||
},
|
||||
shareConfig: {
|
||||
baseUrl: 'https://qd.zhaopinzao8dian.com',
|
||||
title: '找工作,用 AI 更高效|青岛市智能求职平台',
|
||||
desc: '融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!',
|
||||
imgUrl: 'https://qd.zhaopinzao8dian.com/file/csn/qd_shareLogo.jpg',
|
||||
}
|
||||
}
|
173
hook/usePagination.js
Normal file
@@ -0,0 +1,173 @@
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
isRef,
|
||||
nextTick
|
||||
} from 'vue'
|
||||
|
||||
export function usePagination(
|
||||
requestFn,
|
||||
transformFn,
|
||||
options = {}
|
||||
) {
|
||||
const list = ref([])
|
||||
const loading = ref(false)
|
||||
const error = ref(false)
|
||||
const finished = ref(false)
|
||||
const firstLoading = ref(true)
|
||||
const empty = ref(false)
|
||||
|
||||
const {
|
||||
pageSize = 10,
|
||||
search = {},
|
||||
autoWatchSearch = false,
|
||||
debounceTime = 300,
|
||||
autoFetch = false,
|
||||
|
||||
// 字段映射
|
||||
dataKey = 'rows',
|
||||
totalKey = 'total',
|
||||
|
||||
// 分页字段名映射
|
||||
pageField = 'current',
|
||||
sizeField = 'pageSize',
|
||||
|
||||
onBeforeRequest,
|
||||
onAfterRequest
|
||||
} = options
|
||||
|
||||
const pageState = reactive({
|
||||
page: 1,
|
||||
pageSize: isRef(pageSize) ? pageSize.value : pageSize,
|
||||
total: 0,
|
||||
maxPage: 1,
|
||||
search: isRef(search) ? search.value : search
|
||||
})
|
||||
|
||||
let debounceTimer = null
|
||||
|
||||
const fetchData = async (type = 'refresh') => {
|
||||
if (loading.value) return Promise.resolve()
|
||||
console.log(type)
|
||||
loading.value = true
|
||||
error.value = false
|
||||
|
||||
if (typeof onBeforeRequest === 'function') {
|
||||
try {
|
||||
onBeforeRequest(type, pageState)
|
||||
} catch (err) {
|
||||
console.warn('onBeforeRequest 执行异常:', err)
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'refresh') {
|
||||
pageState.page = 1
|
||||
finished.value = false
|
||||
if (list.value.length === 0) {
|
||||
firstLoading.value = true
|
||||
}
|
||||
} else if (type === 'loadMore') {
|
||||
if (pageState.page >= pageState.maxPage) {
|
||||
loading.value = false
|
||||
finished.value = true
|
||||
return Promise.resolve('no more')
|
||||
}
|
||||
pageState.page += 1
|
||||
}
|
||||
|
||||
const params = {
|
||||
...pageState.search,
|
||||
[pageField]: pageState.page,
|
||||
[sizeField]: pageState.pageSize,
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await requestFn(params)
|
||||
|
||||
const rawData = res[dataKey]
|
||||
const total = res[totalKey] || 99999999
|
||||
console.log(total, rawData)
|
||||
const data = typeof transformFn === 'function' ? transformFn(rawData) : rawData
|
||||
|
||||
if (type === 'refresh') {
|
||||
list.value = data
|
||||
} else {
|
||||
list.value.push(...data)
|
||||
}
|
||||
|
||||
pageState.total = total
|
||||
pageState.maxPage = Math.ceil(total / pageState.pageSize)
|
||||
|
||||
finished.value = list.value.length >= total
|
||||
empty.value = list.value.length === 0
|
||||
} catch (err) {
|
||||
console.error('分页请求失败:', err)
|
||||
error.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
firstLoading.value = false
|
||||
|
||||
if (typeof onAfterRequest === 'function') {
|
||||
try {
|
||||
onAfterRequest(type, pageState, {
|
||||
error: error.value
|
||||
})
|
||||
} catch (err) {
|
||||
console.warn('onAfterRequest 执行异常:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = () => fetchData('refresh')
|
||||
const loadMore = () => fetchData('loadMore')
|
||||
|
||||
const resetPagination = () => {
|
||||
list.value = []
|
||||
pageState.page = 1
|
||||
pageState.total = 0
|
||||
pageState.maxPage = 1
|
||||
finished.value = false
|
||||
error.value = false
|
||||
firstLoading.value = true
|
||||
empty.value = false
|
||||
}
|
||||
|
||||
if (autoWatchSearch && isRef(search)) {
|
||||
watch(search, (newVal) => {
|
||||
pageState.search = newVal
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
refresh()
|
||||
}, debounceTime)
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
}
|
||||
|
||||
watch(pageSize, (newVal) => {
|
||||
pageState.pageSize = newVal
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
if (autoFetch) {
|
||||
nextTick(() => {
|
||||
refresh()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
list,
|
||||
loading,
|
||||
error,
|
||||
finished,
|
||||
firstLoading,
|
||||
empty,
|
||||
pageState,
|
||||
refresh,
|
||||
loadMore,
|
||||
resetPagination
|
||||
}
|
||||
}
|
@@ -1,387 +1,246 @@
|
||||
import {
|
||||
ref,
|
||||
onUnmounted
|
||||
} from 'vue';
|
||||
} from 'vue'
|
||||
import {
|
||||
$api,
|
||||
|
||||
function mergeText(prevText, newText) {
|
||||
if (newText.startsWith(prevText)) {
|
||||
return newText; // 直接替换,避免重复拼接
|
||||
} from '../common/globalFunction';
|
||||
|
||||
import config from '@/config'
|
||||
|
||||
export function useAudioRecorder() {
|
||||
const isRecording = ref(false)
|
||||
const isStopping = ref(false)
|
||||
const isSocketConnected = ref(false)
|
||||
const recordingDuration = ref(0)
|
||||
|
||||
const audioDataForDisplay = ref(new Array(16).fill(0))
|
||||
const volumeLevel = ref(0)
|
||||
|
||||
const recognizedText = ref('')
|
||||
const lastFinalText = ref('')
|
||||
|
||||
let audioStream = null
|
||||
let audioContext = null
|
||||
let audioInput = null
|
||||
let scriptProcessor = null
|
||||
let websocket = null
|
||||
let durationTimer = null
|
||||
|
||||
const generateUUID = () => {
|
||||
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
|
||||
.replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
).replace(/-/g, '')
|
||||
}
|
||||
return prevText + newText; // 兼容意外情况
|
||||
}
|
||||
|
||||
export function useAudioRecorder(wsUrl) {
|
||||
// 状态变量
|
||||
const isRecording = ref(false);
|
||||
const isStopping = ref(false);
|
||||
const isSocketConnected = ref(false);
|
||||
const recordingDuration = ref(0);
|
||||
const audioDataForDisplay = ref(new Array(16).fill(0.01));
|
||||
const volumeLevel = ref(0);
|
||||
const fetchWsUrl = async () => {
|
||||
const res = await $api.createRequest('/app/speech/getToken')
|
||||
if (res.code !== 200) throw new Error('无法获取语音识别 wsUrl')
|
||||
const wsUrl = res.msg
|
||||
return wsUrl
|
||||
}
|
||||
|
||||
// 音频相关
|
||||
const audioContext = ref(null);
|
||||
const mediaStream = ref(null);
|
||||
const workletNode = ref(null);
|
||||
const analyser = ref(null);
|
||||
|
||||
// 网络相关
|
||||
const socket = ref(null);
|
||||
|
||||
// 配置常量
|
||||
const SAMPLE_RATE = 16000;
|
||||
const SILENCE_THRESHOLD = 0.02; // 静音阈值 (0-1)
|
||||
const SILENCE_DURATION = 100; // 静音持续时间(ms)后切片
|
||||
const MIN_SOUND_DURATION = 200; // 最小有效声音持续时间(ms)
|
||||
|
||||
// 音频处理变量
|
||||
const lastSoundTime = ref(0);
|
||||
const audioChunks = ref([]);
|
||||
const currentChunkStartTime = ref(0);
|
||||
const silenceStartTime = ref(0);
|
||||
|
||||
// 语音识别结果
|
||||
const recognizedText = ref('');
|
||||
const lastFinalText = ref(''); // 保存最终确认的文本
|
||||
|
||||
// AudioWorklet处理器代码
|
||||
const workletProcessorCode = `
|
||||
class AudioProcessor extends AudioWorkletProcessor {
|
||||
constructor(options) {
|
||||
super();
|
||||
this.silenceThreshold = options.processorOptions.silenceThreshold;
|
||||
this.sampleRate = options.processorOptions.sampleRate;
|
||||
this.samplesPerChunk = Math.floor(this.sampleRate * 0.05); // 50ms的块
|
||||
this.buffer = new Int16Array(this.samplesPerChunk);
|
||||
this.index = 0;
|
||||
this.lastUpdate = 0;
|
||||
}
|
||||
|
||||
calculateVolume(inputs) {
|
||||
const input = inputs[0];
|
||||
if (!input || input.length === 0) return 0;
|
||||
|
||||
let sum = 0;
|
||||
const inputChannel = input[0];
|
||||
for (let i = 0; i < inputChannel.length; i++) {
|
||||
sum += inputChannel[i] * inputChannel[i];
|
||||
}
|
||||
return Math.sqrt(sum / inputChannel.length);
|
||||
}
|
||||
|
||||
process(inputs) {
|
||||
const now = currentTime;
|
||||
const volume = this.calculateVolume(inputs);
|
||||
|
||||
// 每50ms发送一次分析数据
|
||||
if (now - this.lastUpdate > 0.05) {
|
||||
this.lastUpdate = now;
|
||||
|
||||
// 简单的频率分析 (模拟16个频段)
|
||||
const simulatedFreqData = [];
|
||||
for (let i = 0; i < 16; i++) {
|
||||
simulatedFreqData.push(
|
||||
Math.min(1, volume * 10 + (Math.random() * 0.2 - 0.1))
|
||||
);
|
||||
}
|
||||
|
||||
this.port.postMessage({
|
||||
type: 'analysis',
|
||||
volume: volume,
|
||||
frequencyData: simulatedFreqData,
|
||||
isSilent: volume < this.silenceThreshold,
|
||||
timestamp: now
|
||||
});
|
||||
}
|
||||
|
||||
// 原始音频处理
|
||||
const input = inputs[0];
|
||||
if (input && input.length > 0) {
|
||||
const inputChannel = input[0];
|
||||
for (let i = 0; i < inputChannel.length; i++) {
|
||||
this.buffer[this.index++] = Math.max(-32768, Math.min(32767, inputChannel[i] * 32767));
|
||||
|
||||
if (this.index >= this.samplesPerChunk) {
|
||||
this.port.postMessage({
|
||||
type: 'audio',
|
||||
audioData: this.buffer.buffer,
|
||||
timestamp: now
|
||||
}, [this.buffer.buffer]);
|
||||
|
||||
this.buffer = new Int16Array(this.samplesPerChunk);
|
||||
this.index = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
function extractWsParams(wsUrl) {
|
||||
const url = new URL(wsUrl)
|
||||
const appkey = url.searchParams.get('appkey')
|
||||
const token = url.searchParams.get('token')
|
||||
return {
|
||||
appkey,
|
||||
token
|
||||
}
|
||||
}
|
||||
registerProcessor('audio-processor', AudioProcessor);
|
||||
`;
|
||||
|
||||
// 初始化WebSocket连接
|
||||
const initSocket = (wsUrl) => {
|
||||
|
||||
const connectWebSocket = async () => {
|
||||
const wsUrl = await fetchWsUrl()
|
||||
const {
|
||||
appkey,
|
||||
token
|
||||
} = extractWsParams(wsUrl)
|
||||
return new Promise((resolve, reject) => {
|
||||
socket.value = new WebSocket(wsUrl);
|
||||
websocket = new WebSocket(wsUrl)
|
||||
websocket.binaryType = 'arraybuffer'
|
||||
|
||||
socket.value.onopen = () => {
|
||||
console.log('open')
|
||||
isSocketConnected.value = true;
|
||||
resolve();
|
||||
};
|
||||
websocket.onopen = () => {
|
||||
isSocketConnected.value = true
|
||||
|
||||
socket.value.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
// 发送 StartTranscription 消息(参考 demo.html)
|
||||
const startTranscriptionMessage = {
|
||||
header: {
|
||||
appkey: appkey, // 不影响使用,可留空或由 wsUrl 带入
|
||||
namespace: 'SpeechTranscriber',
|
||||
name: 'StartTranscription',
|
||||
task_id: generateUUID(),
|
||||
message_id: generateUUID()
|
||||
},
|
||||
payload: {
|
||||
format: 'pcm',
|
||||
sample_rate: 16000,
|
||||
enable_intermediate_result: true,
|
||||
enable_punctuation_prediction: true,
|
||||
enable_inverse_text_normalization: true
|
||||
}
|
||||
}
|
||||
websocket.send(JSON.stringify(startTranscriptionMessage))
|
||||
resolve()
|
||||
}
|
||||
|
||||
socket.value.onclose = () => {
|
||||
isSocketConnected.value = false;
|
||||
};
|
||||
websocket.onerror = (e) => {
|
||||
isSocketConnected.value = false
|
||||
reject(e)
|
||||
}
|
||||
|
||||
socket.value.onmessage = handleMessage;
|
||||
});
|
||||
};
|
||||
websocket.onclose = () => {
|
||||
isSocketConnected.value = false
|
||||
}
|
||||
|
||||
const handleMessage = (values) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.text) {
|
||||
const {
|
||||
asrEnd,
|
||||
text
|
||||
} = data
|
||||
if (asrEnd === 'true') {
|
||||
recognizedText.value += data.text;
|
||||
} else {
|
||||
lastFinalText.value = '';
|
||||
websocket.onmessage = (e) => {
|
||||
const msg = JSON.parse(e.data)
|
||||
const name = msg?.header?.name
|
||||
const payload = msg?.payload
|
||||
|
||||
switch (name) {
|
||||
case 'TranscriptionResultChanged': {
|
||||
// 中间识别文本(可选:使用 stash_result.unfixedText 更精确)
|
||||
const text = payload?.unfixed_result || payload?.result || ''
|
||||
lastFinalText.value = text
|
||||
break
|
||||
}
|
||||
case 'SentenceBegin': {
|
||||
// 可选:开始新的一句,重置状态
|
||||
// console.log('开始新的句子识别')
|
||||
break
|
||||
}
|
||||
case 'SentenceEnd': {
|
||||
const text = payload?.result || ''
|
||||
const confidence = payload?.confidence || 0
|
||||
if (text && confidence > 0.5) {
|
||||
recognizedText.value += text
|
||||
lastFinalText.value = ''
|
||||
// console.log('识别完成:', {
|
||||
// text,
|
||||
// confidence
|
||||
// })
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'TranscriptionStarted': {
|
||||
// console.log('识别任务已开始')
|
||||
break
|
||||
}
|
||||
case 'TranscriptionCompleted': {
|
||||
lastFinalText.value = ''
|
||||
// console.log('识别全部完成')
|
||||
break
|
||||
}
|
||||
case 'TaskFailed': {
|
||||
console.error('识别失败:', msg?.header?.status_text)
|
||||
break
|
||||
}
|
||||
default:
|
||||
console.log('未知消息类型:', name, msg)
|
||||
break
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析识别结果失败:', error);
|
||||
})
|
||||
}
|
||||
|
||||
const startRecording = async () => {
|
||||
if (isRecording.value) return
|
||||
try {
|
||||
recognizedText.value = ''
|
||||
lastFinalText.value = ''
|
||||
await connectWebSocket()
|
||||
|
||||
audioStream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: true
|
||||
})
|
||||
audioContext = new(window.AudioContext || window.webkitAudioContext)({
|
||||
sampleRate: 16000
|
||||
})
|
||||
audioInput = audioContext.createMediaStreamSource(audioStream)
|
||||
scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1)
|
||||
|
||||
scriptProcessor.onaudioprocess = (event) => {
|
||||
const input = event.inputBuffer.getChannelData(0)
|
||||
const pcm = new Int16Array(input.length)
|
||||
let sum = 0
|
||||
for (let i = 0; i < input.length; ++i) {
|
||||
const s = Math.max(-1, Math.min(1, input[i]))
|
||||
pcm[i] = s * 0x7FFF
|
||||
sum += s * s
|
||||
}
|
||||
|
||||
volumeLevel.value = Math.sqrt(sum / input.length)
|
||||
audioDataForDisplay.value = Array(16).fill(volumeLevel.value)
|
||||
|
||||
if (websocket?.readyState === WebSocket.OPEN) {
|
||||
websocket.send(pcm.buffer)
|
||||
}
|
||||
}
|
||||
|
||||
audioInput.connect(scriptProcessor)
|
||||
scriptProcessor.connect(audioContext.destination)
|
||||
|
||||
isRecording.value = true
|
||||
recordingDuration.value = 0
|
||||
durationTimer = setInterval(() => recordingDuration.value++, 1000)
|
||||
} catch (err) {
|
||||
console.error('启动失败:', err)
|
||||
cleanup()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理音频切片
|
||||
const processAudioChunk = (isSilent) => {
|
||||
const now = Date.now();
|
||||
const stopRecording = () => {
|
||||
if (!isRecording.value || isStopping.value) return
|
||||
isStopping.value = true
|
||||
|
||||
if (!isSilent) {
|
||||
// 检测到声音
|
||||
lastSoundTime.value = now;
|
||||
|
||||
if (silenceStartTime.value > 0) {
|
||||
// 从静音恢复到有声音
|
||||
silenceStartTime.value = 0;
|
||||
}
|
||||
} else {
|
||||
// 静音状态
|
||||
if (silenceStartTime.value === 0) {
|
||||
silenceStartTime.value = now;
|
||||
}
|
||||
|
||||
// 检查是否达到静音切片条件
|
||||
if (now - silenceStartTime.value >= SILENCE_DURATION &&
|
||||
now - currentChunkStartTime.value >= MIN_SOUND_DURATION) {
|
||||
sendCurrentChunk();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 发送当前音频块
|
||||
const sendCurrentChunk = () => {
|
||||
if (audioChunks.value.length === 0 || !socket.value || socket.value.readyState !== WebSocket.OPEN) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 合并所有块
|
||||
const totalBytes = audioChunks.value.reduce((total, chunk) => total + chunk.byteLength, 0);
|
||||
const combined = new Int16Array(totalBytes / 2);
|
||||
let offset = 0;
|
||||
|
||||
audioChunks.value.forEach(chunk => {
|
||||
const samples = new Int16Array(chunk);
|
||||
combined.set(samples, offset);
|
||||
offset += samples.length;
|
||||
});
|
||||
|
||||
// 发送合并后的数据
|
||||
socket.value.send(combined.buffer);
|
||||
audioChunks.value = [];
|
||||
|
||||
// 记录新块的开始时间
|
||||
currentChunkStartTime.value = Date.now();
|
||||
silenceStartTime.value = 0;
|
||||
} catch (error) {
|
||||
console.error('发送音频数据时出错:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 开始录音
|
||||
const startRecording = async () => {
|
||||
if (isRecording.value) return;
|
||||
|
||||
try {
|
||||
// 重置状态
|
||||
recognizedText.value = '';
|
||||
lastFinalText.value = '';
|
||||
// 重置状态
|
||||
recordingDuration.value = 0;
|
||||
audioChunks.value = [];
|
||||
lastSoundTime.value = 0;
|
||||
currentChunkStartTime.value = Date.now();
|
||||
silenceStartTime.value = 0;
|
||||
|
||||
// 初始化WebSocket
|
||||
await initSocket(wsUrl);
|
||||
|
||||
// 获取音频流
|
||||
mediaStream.value = await navigator.mediaDevices.getUserMedia({
|
||||
audio: {
|
||||
sampleRate: SAMPLE_RATE,
|
||||
channelCount: 1,
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: false
|
||||
},
|
||||
video: false
|
||||
});
|
||||
|
||||
// 创建音频上下文
|
||||
audioContext.value = new(window.AudioContext || window.webkitAudioContext)({
|
||||
sampleRate: SAMPLE_RATE
|
||||
});
|
||||
|
||||
// 注册AudioWorklet
|
||||
const blob = new Blob([workletProcessorCode], {
|
||||
type: 'application/javascript'
|
||||
});
|
||||
const workletUrl = URL.createObjectURL(blob);
|
||||
await audioContext.value.audioWorklet.addModule(workletUrl);
|
||||
URL.revokeObjectURL(workletUrl);
|
||||
|
||||
// 创建AudioWorkletNode
|
||||
workletNode.value = new AudioWorkletNode(audioContext.value, 'audio-processor', {
|
||||
processorOptions: {
|
||||
silenceThreshold: SILENCE_THRESHOLD,
|
||||
sampleRate: SAMPLE_RATE
|
||||
if (websocket?.readyState === WebSocket.OPEN) {
|
||||
websocket.send(JSON.stringify({
|
||||
header: {
|
||||
namespace: 'SpeechTranscriber',
|
||||
name: 'StopTranscription',
|
||||
message_id: generateUUID()
|
||||
}
|
||||
});
|
||||
|
||||
// 处理音频数据
|
||||
workletNode.value.port.onmessage = (e) => {
|
||||
if (e.data.type === 'audio') {
|
||||
audioChunks.value.push(e.data.audioData);
|
||||
} else if (e.data.type === 'analysis') {
|
||||
audioDataForDisplay.value = e.data.frequencyData;
|
||||
volumeLevel.value = e.data.volume;
|
||||
processAudioChunk(e.data.isSilent);
|
||||
}
|
||||
};
|
||||
|
||||
// 连接音频节点
|
||||
const source = audioContext.value.createMediaStreamSource(mediaStream.value);
|
||||
source.connect(workletNode.value);
|
||||
workletNode.value.connect(audioContext.value.destination);
|
||||
|
||||
isRecording.value = true;
|
||||
|
||||
} catch (error) {
|
||||
console.error('启动录音失败:', error);
|
||||
cleanup();
|
||||
throw error;
|
||||
}))
|
||||
websocket.close()
|
||||
}
|
||||
};
|
||||
|
||||
// 停止录音
|
||||
const stopRecording = async () => {
|
||||
if (!isRecording.value || isStopping.value) return;
|
||||
cleanup()
|
||||
isStopping.value = false
|
||||
}
|
||||
|
||||
isStopping.value = true;
|
||||
const cancelRecording = () => {
|
||||
if (!isRecording.value || isStopping.value) return
|
||||
isStopping.value = true
|
||||
websocket?.close()
|
||||
cleanup()
|
||||
isStopping.value = false
|
||||
}
|
||||
|
||||
try {
|
||||
// 发送最后一个音频块(无论是否静音)
|
||||
sendCurrentChunk();
|
||||
|
||||
// 发送结束标记
|
||||
if (socket.value?.readyState === WebSocket.OPEN) {
|
||||
socket.value.send(JSON.stringify({
|
||||
action: 'end',
|
||||
duration: recordingDuration.value
|
||||
}));
|
||||
|
||||
await new Promise(resolve => {
|
||||
if (socket.value.bufferedAmount === 0) {
|
||||
resolve();
|
||||
} else {
|
||||
const timer = setInterval(() => {
|
||||
if (socket.value.bufferedAmount === 0) {
|
||||
clearInterval(timer);
|
||||
resolve();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
socket.value.close();
|
||||
}
|
||||
|
||||
cleanup();
|
||||
|
||||
} catch (error) {
|
||||
console.error('停止录音时出错:', error);
|
||||
throw error;
|
||||
} finally {
|
||||
isStopping.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 清理资源
|
||||
const cleanup = () => {
|
||||
if (mediaStream.value) {
|
||||
mediaStream.value.getTracks().forEach(track => track.stop());
|
||||
mediaStream.value = null;
|
||||
}
|
||||
clearInterval(durationTimer)
|
||||
|
||||
if (workletNode.value) {
|
||||
workletNode.value.disconnect();
|
||||
workletNode.value = null;
|
||||
}
|
||||
scriptProcessor?.disconnect()
|
||||
audioInput?.disconnect()
|
||||
audioStream?.getTracks().forEach(track => track.stop())
|
||||
audioContext?.close()
|
||||
|
||||
if (audioContext.value && audioContext.value.state !== 'closed') {
|
||||
audioContext.value.close();
|
||||
audioContext.value = null;
|
||||
}
|
||||
audioStream = null
|
||||
audioContext = null
|
||||
audioInput = null
|
||||
scriptProcessor = null
|
||||
websocket = null
|
||||
|
||||
audioChunks.value = [];
|
||||
isRecording.value = false;
|
||||
isSocketConnected.value = false;
|
||||
};
|
||||
|
||||
/// 取消录音
|
||||
const cancelRecording = async () => {
|
||||
if (!isRecording.value || isStopping.value) return;
|
||||
isStopping.value = true;
|
||||
try {
|
||||
if (socket.value?.readyState === WebSocket.OPEN) {
|
||||
console.log('发送结束标记...');
|
||||
socket.value.send(JSON.stringify({
|
||||
action: 'cancel'
|
||||
}));
|
||||
socket.value.close();
|
||||
}
|
||||
cleanup()
|
||||
} catch (error) {
|
||||
console.error('取消录音时出错:', error);
|
||||
throw error;
|
||||
} finally {
|
||||
isStopping.value = false;
|
||||
}
|
||||
};
|
||||
isRecording.value = false
|
||||
isSocketConnected.value = false
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (isRecording.value) {
|
||||
stopRecording();
|
||||
}
|
||||
});
|
||||
if (isRecording.value) stopRecording()
|
||||
})
|
||||
|
||||
return {
|
||||
isRecording,
|
||||
@@ -390,10 +249,10 @@ export function useAudioRecorder(wsUrl) {
|
||||
recordingDuration,
|
||||
audioDataForDisplay,
|
||||
volumeLevel,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
recognizedText,
|
||||
lastFinalText,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
cancelRecording
|
||||
};
|
||||
}
|
||||
}
|
@@ -18,14 +18,14 @@
|
||||
</script>
|
||||
<title></title>
|
||||
<!-- vconsole -->
|
||||
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
|
||||
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
|
||||
<script>
|
||||
var vConsole = new window.VConsole();
|
||||
vConsole.destroy();
|
||||
</script> -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<!-- <body> -->
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
@@ -80,7 +80,7 @@
|
||||
"locale": "zh-Hans",
|
||||
"h5": {
|
||||
"router": {
|
||||
"base": "/app/",
|
||||
"base": "/ks_app/",
|
||||
"mode": "hash"
|
||||
},
|
||||
"title": "青岛智慧就业服务",
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AppLayout title="" :use-scroll-view="false">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
@@ -143,12 +143,16 @@ function expand() {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
@@ -152,12 +152,16 @@ function getPreviousDay(dateStr) {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
|
@@ -88,6 +88,7 @@ function seeDetail(item) {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.card-text{
|
||||
margin-top: 16rpx
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
@@ -101,12 +101,16 @@ function getDataList(type = 'add') {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AppLayout title="" :use-scroll-view="false">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
@@ -219,12 +219,16 @@ function getHoursBetween(startTimeStr, endTimeStr) {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
@@ -251,6 +255,7 @@ image {
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.row2{
|
||||
font-weight: 400;
|
||||
|
@@ -145,10 +145,17 @@ function changeArea() {
|
||||
function changeJobs() {
|
||||
selectJobsModel.value?.open({
|
||||
title: '添加岗位',
|
||||
defaultId: fromValue.jobTitleId,
|
||||
success: (ids, labels) => {
|
||||
console.log(ids, labels);
|
||||
fromValue.jobTitleId = ids;
|
||||
state.jobsText = labels.split(',');
|
||||
},
|
||||
cancel: (ids, labels) => {
|
||||
console.log(ids, labels);
|
||||
// fromValue.jobTitleId = ids;
|
||||
// state.jobsText = labels.split(',');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
73
packageA/pages/moreJobs/moreJobs.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="collection-content">
|
||||
<renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
const { $api, navTo, navBack, vacanciesTo } = inject('globalFunction');
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import { usePagination } from '@/hook/usePagination';
|
||||
import { jobMoreMap } from '@/utils/markdownParser';
|
||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||
const loadmoreRef = ref(null);
|
||||
|
||||
// 响应式搜索条件(可以被修改)
|
||||
const searchParams = ref({});
|
||||
const pageSize = ref(10);
|
||||
const { list, loading, refresh, loadMore } = usePagination(
|
||||
(params) => $api.createRequest('/app/job/list', params, 'GET', true),
|
||||
null, // 转换函数
|
||||
{
|
||||
pageSize: pageSize,
|
||||
search: searchParams,
|
||||
autoWatchSearch: true,
|
||||
onBeforeRequest: () => {
|
||||
loadmoreRef.value?.change('loading');
|
||||
},
|
||||
onAfterRequest: () => {
|
||||
loadmoreRef.value?.change('more');
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
onLoad((options) => {
|
||||
let params = jobMoreMap.get(options.jobId);
|
||||
if (params) {
|
||||
uni.setStorageSync('jobMoreMap', params);
|
||||
} else {
|
||||
params = uni.getStorageSync('jobMoreMap');
|
||||
}
|
||||
const objs = removeNullProperties(params);
|
||||
searchParams.value = objs;
|
||||
refresh();
|
||||
});
|
||||
|
||||
function removeNullProperties(obj) {
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key] === null) {
|
||||
delete obj[key]; // 删除值为 null 的属性
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.collection-content{
|
||||
padding: 1rpx 28rpx 20rpx 28rpx;
|
||||
background: #F4F4F4;
|
||||
height: 100%
|
||||
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
}
|
||||
</style>
|
@@ -54,7 +54,7 @@
|
||||
<text>{{ userInfo.salaryMin / 1000 }}k-{{ userInfo.salaryMax / 1000 }}k</text>
|
||||
</view>
|
||||
<view class="mys-text">
|
||||
<text>期望工资地:</text>
|
||||
<text>期望工作地:</text>
|
||||
<text>青岛市-</text>
|
||||
<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
|
||||
</view>
|
||||
@@ -91,6 +91,7 @@ image{
|
||||
padding: 52rpx 48rpx
|
||||
.tops-left{
|
||||
.name{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 44rpx;
|
||||
color: #333333;
|
||||
@@ -140,6 +141,7 @@ image{
|
||||
.mys-info{
|
||||
padding: 28rpx
|
||||
.mys-h4{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
|
@@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<AppLayout title="" backGorundColor="#F4F4F4">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
<template #headerright>
|
||||
<!-- <view class="btnshare">
|
||||
<image src="@/static/icon/share.png" @click="shareJob"></image>
|
||||
</view> -->
|
||||
<view class="btn mar_ri10">
|
||||
<image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
|
||||
<image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
|
||||
@@ -13,7 +16,13 @@
|
||||
</template>
|
||||
<view class="content" v-show="!isEmptyObject(jobInfo)">
|
||||
<view class="content-top btn-feel">
|
||||
<view class="top-salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</view>
|
||||
<view class="top-salary">
|
||||
<Salary-Expectation
|
||||
:max-salary="jobInfo.maxSalary"
|
||||
:min-salary="jobInfo.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
</view>
|
||||
<view class="top-name">{{ jobInfo.jobTitle }}</view>
|
||||
<view class="top-info">
|
||||
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
|
||||
@@ -107,10 +116,7 @@
|
||||
v-for="(item, index) in matchingDegree"
|
||||
:key="index"
|
||||
class="progress-item"
|
||||
:class="{
|
||||
active: index < currentStep - 1,
|
||||
half: index < currentStep && currentStep < index + 1, // 半条
|
||||
}"
|
||||
:class="getClass(index)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@@ -134,10 +140,11 @@
|
||||
import point from '@/static/icon/point.png';
|
||||
import VideoPlayer from './component/videoPlayer.vue';
|
||||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
|
||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
const { $api, navTo, getLenPx, parseQueryParams, navBack, isEmptyObject } = inject('globalFunction');
|
||||
import RadarMap from './component/radarMap.vue';
|
||||
const { $api, navTo, getLenPx, parseQueryParams, navBack, isEmptyObject } = inject('globalFunction');
|
||||
import config from '@/config.js';
|
||||
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
|
||||
const currentStep = ref(1);
|
||||
const companyCount = ref(0);
|
||||
@@ -179,30 +186,33 @@ function seeExplain() {
|
||||
}
|
||||
|
||||
function getDetail(jobId) {
|
||||
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
||||
const { latitude, longitude, companyName, companyId } = resData.data;
|
||||
jobInfo.value = resData.data;
|
||||
getCompanyIsAJobs(companyId);
|
||||
getCompetivetuveness(jobId);
|
||||
if (latitude && longitude) {
|
||||
mapCovers.value = [
|
||||
{
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
iconPath: point,
|
||||
label: {
|
||||
content: companyName,
|
||||
textAlign: 'center',
|
||||
padding: 3,
|
||||
fontSize: 12,
|
||||
bgColor: '#FFFFFF',
|
||||
anchorX: getTextWidth(companyName), // X 轴调整,负数向左
|
||||
borderRadius: 5,
|
||||
return new Promise((reslove, reject) => {
|
||||
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
||||
const { latitude, longitude, companyName, companyId } = resData.data;
|
||||
jobInfo.value = resData.data;
|
||||
reslove(resData.data);
|
||||
getCompanyIsAJobs(companyId);
|
||||
getCompetivetuveness(jobId);
|
||||
if (latitude && longitude) {
|
||||
mapCovers.value = [
|
||||
{
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
iconPath: point,
|
||||
label: {
|
||||
content: companyName,
|
||||
textAlign: 'center',
|
||||
padding: 3,
|
||||
fontSize: 12,
|
||||
bgColor: '#FFFFFF',
|
||||
anchorX: getTextWidth(companyName), // X 轴调整,负数向左
|
||||
borderRadius: 5,
|
||||
},
|
||||
width: 34,
|
||||
},
|
||||
width: 34,
|
||||
},
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -257,15 +267,39 @@ function jobCollection() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getClass(index) {
|
||||
const current = currentStep.value;
|
||||
const floorIndex = Math.floor(current);
|
||||
|
||||
if (index < floorIndex) {
|
||||
return 'active';
|
||||
} else if (index === floorIndex) {
|
||||
const decimal = current % 1;
|
||||
const percent = Math.round(decimal * 100);
|
||||
return `half${percent}`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
.btnshare {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 46rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
@@ -307,17 +341,19 @@ image {
|
||||
}
|
||||
|
||||
/* 当前进度进行中的格子 */
|
||||
.progress-item.half::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%; /* 根据 currentStep 小数动态控制 */
|
||||
// background: linear-gradient(to right, #256bfa, #8c68ff);
|
||||
background: linear-gradient(to right, #256bfa 50%, #eaeaea 50%);
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
for i in 0..100
|
||||
.progress-item.half{i}::before
|
||||
content ''
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
bottom 0
|
||||
width 100%
|
||||
background linear-gradient(to right, #256bfa (i)%, #eaeaea (i)%)
|
||||
border-radius 24rpx
|
||||
|
||||
|
||||
|
||||
.card-footer{
|
||||
.footer-title{
|
||||
font-weight: 600;
|
||||
|
@@ -125,6 +125,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.time-block {
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
|
@@ -141,6 +141,7 @@ function getList(type = 'add', loading = true) {
|
||||
color: #666D7F;
|
||||
}
|
||||
.active{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
@@ -167,6 +168,7 @@ function getList(type = 'add', loading = true) {
|
||||
}
|
||||
}
|
||||
.card-Title{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 70rpx
|
||||
|
136
packageA/pages/tiktok/tiktok.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="video-container">
|
||||
<view class="back-box">
|
||||
<view class="btn">
|
||||
<uni-icons type="left" size="26" color="#FFFFFF" @click="navBack"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<mTikTok :video-list="state.videoList" :pause-type="1" :controls="false" @loadMore="loadMore" @change="change">
|
||||
<template v-slot="data">
|
||||
<view class="video-layer">
|
||||
<view class="title line_1">{{ currentItem.companyName }}</view>
|
||||
<view class="discription">
|
||||
<text class="line_1">
|
||||
{{ currentItem.jobTitle }}
|
||||
</text>
|
||||
<view class="seedetail" @click="nextDetail">
|
||||
查看详情
|
||||
<uni-icons type="right" color="#FFFFFF" size="14"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</mTikTok>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const { $api, navBack, navTo } = inject('globalFunction');
|
||||
import mTikTok from '@/components/TikTok/TikTok.vue';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
const state = reactive({
|
||||
videoList: [],
|
||||
});
|
||||
const currentItem = ref(null);
|
||||
|
||||
onLoad(() => {
|
||||
const jobInfo = uni.getStorageSync(`job-Info`);
|
||||
if (jobInfo) {
|
||||
currentItem.value = jobInfo;
|
||||
state.videoList.push(jobInfo);
|
||||
}
|
||||
getNextVideoSrc(2);
|
||||
});
|
||||
|
||||
function nextDetail() {
|
||||
const job = currentItem.value;
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
console.log(job.jobId);
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function getNextVideoSrc(num) {
|
||||
let params = {
|
||||
uuid: useUserStore().seesionId,
|
||||
count: num || 1,
|
||||
};
|
||||
$api.createRequest('/app/job/littleVideo/random', params).then((resData) => {
|
||||
const { data, code } = resData;
|
||||
state.videoList.push(...data);
|
||||
});
|
||||
}
|
||||
|
||||
const loadMore = () => {
|
||||
// 触发加载更多
|
||||
console.log('加载更多');
|
||||
getNextVideoSrc();
|
||||
};
|
||||
|
||||
const change = (e) => {
|
||||
currentItem.value = e.detail;
|
||||
console.log('🚀 ~ file: index.vue:53 ~ change ~ data:', e);
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.video-container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative
|
||||
.back-box{
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 20rpx
|
||||
color: #FFFFFF
|
||||
z-index: 2
|
||||
}
|
||||
}
|
||||
.video-layer {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
bottom: 30rpx;
|
||||
color: #fff;
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
}
|
||||
.discription{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 0%;
|
||||
margin-top: 20rpx
|
||||
display: flex
|
||||
align-items: center
|
||||
.seedetail{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
white-space: nowrap
|
||||
padding-left: 20rpx
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
|
||||
image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
17
pages.json
@@ -186,10 +186,27 @@
|
||||
"navigationBarTitleText": "系统通知",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/tiktok/tiktok",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/moreJobs/moreJobs",
|
||||
"style": {
|
||||
"navigationBarTitleText": "更多岗位",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
]
|
||||
}],
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"display": "none",
|
||||
"color": "#5E5F60",
|
||||
"selectedColor": "#256BFA",
|
||||
"borderStyle": "black",
|
||||
|
@@ -39,7 +39,7 @@
|
||||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||||
<view class="cards" v-if="fairList.length">
|
||||
<view
|
||||
class="card btn-incline"
|
||||
class="card press-button"
|
||||
v-for="(item, index) in fairList"
|
||||
:key="index"
|
||||
@click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
|
||||
@@ -83,6 +83,7 @@
|
||||
<empty v-else pdTop="200"></empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<Tabbar :currentpage="1"></Tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -90,6 +91,7 @@
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import { storeToRefs } from 'pinia';
|
||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||
@@ -371,6 +373,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
||||
flex-wrap: nowrap
|
||||
overflow: hidden
|
||||
.weel-days{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
@@ -424,6 +427,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
.card-title{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
@@ -448,6 +452,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
||||
font-weight: 500;
|
||||
font-size: 48rpx;
|
||||
color: #333333;
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
.left-dateDay{
|
||||
font-weight: 400;
|
||||
|
@@ -62,10 +62,11 @@
|
||||
<view class="chatmain-warpper">
|
||||
<ai-paging ref="paging"></ai-paging>
|
||||
</view>
|
||||
<!-- 自定义tabbar -->
|
||||
<view class="chatmain-footer" v-show="!isDrawerOpen">
|
||||
<Tabbar :currentpage="2"></Tabbar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自定义tabbar -->
|
||||
<!-- <tabbar-custom :currentpage="2"></tabbar-custom> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -73,6 +74,7 @@
|
||||
import { ref, inject, nextTick, computed } from 'vue';
|
||||
const { $api, navTo, insertSortData } = inject('globalFunction');
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
|
||||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
import aiPaging from './components/ai-paging.vue';
|
||||
@@ -88,6 +90,7 @@ const paging = ref(null);
|
||||
|
||||
// 实时过滤
|
||||
const filteredList = computed(() => {
|
||||
// console.log(tabeList.value);
|
||||
if (!searchText.value) return tabeList.value;
|
||||
const list = tabeList.value.filter((item) => !item.isTitle && item.title.includes(searchText.value));
|
||||
const [result, lastData] = $api.insertSortData(list);
|
||||
@@ -108,16 +111,16 @@ onHide(() => {
|
||||
paging.value?.handleTouchCancel();
|
||||
if (isDrawerOpen.value) {
|
||||
isDrawerOpen.value = false;
|
||||
uni.showTabBar();
|
||||
// uni.showTabBar();
|
||||
}
|
||||
});
|
||||
|
||||
const toggleDrawer = () => {
|
||||
isDrawerOpen.value = !isDrawerOpen.value;
|
||||
if (isDrawerOpen.value) {
|
||||
uni.hideTabBar();
|
||||
// uni.hideTabBar();
|
||||
} else {
|
||||
uni.showTabBar();
|
||||
// uni.showTabBar();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -144,6 +147,7 @@ function updateSetting() {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
header-height = 88rpx
|
||||
footer-height = 98rpx
|
||||
|
||||
/* 页面容器 */
|
||||
.container {
|
||||
@@ -277,6 +281,8 @@ header-height = 88rpx
|
||||
transition: margin-left 0.3s ease-in-out;
|
||||
position: relative
|
||||
background: #FFFFFF
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.head
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
@@ -304,15 +310,20 @@ header-height = 88rpx
|
||||
height: 37rpx;
|
||||
|
||||
.chatmain-warpper
|
||||
height: 'calc(100% - %s)' % header-height
|
||||
height: 'calc(100% - %s)' %( header-height + footer-height)
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border-top: 2rpx solid #F4F4F4;
|
||||
flex: 1
|
||||
|
||||
/* 页面被挤压时向右移动 */
|
||||
.main-content.shift {
|
||||
margin-left: 500rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
.chatmain-footer{
|
||||
height: footer-height;
|
||||
}
|
||||
</style>
|
||||
|
@@ -285,9 +285,9 @@ const {
|
||||
volumeLevel,
|
||||
recognizedText,
|
||||
lastFinalText,
|
||||
} = useAudioRecorder(config.vioceBaseURl);
|
||||
} = useAudioRecorder();
|
||||
|
||||
const { speak, pause, resume, isSpeaking, isPaused, cancelAudio, audioUrl } = useTTSPlayer(config.speechSynthesis);
|
||||
const { speak, pause, resume, isSpeaking, isPaused, cancelAudio } = useTTSPlayer(config.speechSynthesis);
|
||||
|
||||
// state
|
||||
const queries = ref([]);
|
||||
|
895
pages/index/components/index-one.vue
Normal file
@@ -0,0 +1,895 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
|
||||
<view class="container-search">
|
||||
<view class="search-input button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
||||
<text class="inpute">职位名称、薪资要求等</text>
|
||||
</view>
|
||||
<view class="chart button-click">职业图谱</view>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<view class="card press-button" @click="navTo('/pages/nearby/nearby')">
|
||||
<view class="card-title">附近工作</view>
|
||||
<view class="card-text">好岗职等你来</view>
|
||||
</view>
|
||||
<view class="card press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
|
||||
<view class="card-title">精选企业</view>
|
||||
<view class="card-text">优选职得信赖</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-filter">
|
||||
<view class="filter-top" @touchmove.stop.prevent>
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="jobs-left">
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === 'all' }"
|
||||
@click="choosePosition('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === index }"
|
||||
v-for="(item, index) in userInfo.jobTitle"
|
||||
:key="index"
|
||||
@click="choosePosition(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
|
||||
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
|
||||
<text>添加</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-bottom">
|
||||
<view class="btm-left">
|
||||
<view
|
||||
class="button-click filterbtm"
|
||||
:class="{ active: pageState.search.order === item.value }"
|
||||
v-for="item in rangeOptions"
|
||||
@click="handelHostestSearch(item)"
|
||||
:key="item.value"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm-right button-click" @click="openFilter">
|
||||
筛选
|
||||
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-list">
|
||||
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
|
||||
<view class="falls" v-if="list.length">
|
||||
<custom-waterfalls-flow
|
||||
:column="columnCount"
|
||||
:columnSpace="columnSpace"
|
||||
ref="waterfallsFlowRef"
|
||||
:value="list"
|
||||
>
|
||||
<template v-slot:default="job">
|
||||
<view class="item btn-feel" v-if="!job.recommend">
|
||||
<view class="falls-card" @click="nextDetail(job)">
|
||||
<view class="falls-card-pay">
|
||||
<view class="pay-text">
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
</view>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="falls-card-title">{{ job.jobTitle }}</view>
|
||||
<view class="fl_box fl_warp">
|
||||
<view class="falls-card-education mar_ri10" v-if="job.education">
|
||||
<dict-Label dictType="education" :value="job.education"></dict-Label>
|
||||
</view>
|
||||
<view class="falls-card-experience" v-if="job.experience">
|
||||
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="falls-card-company">
|
||||
青岛
|
||||
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
|
||||
</view>
|
||||
<view class="falls-card-pepleNumber">
|
||||
<view>
|
||||
<image class="point2" src="/static/icon/pintDate.png"></image>
|
||||
<view class="fl_1">
|
||||
{{ job.postingDate || '发布日期' }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<image class="point3" src="/static/icon/pointpeople.png"></image>
|
||||
<view class="fl_1">
|
||||
{{ vacanciesTo(job.vacancies) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="falls-card-company2">
|
||||
<image class="point3" src="/static/icon/point3.png"></image>
|
||||
<view class="fl_1">
|
||||
{{ job.companyName }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="falls-card-matchingrate">
|
||||
<view class=""><matchingDegree :job="job"></matchingDegree></view>
|
||||
<uni-icons type="star" size="30"></uni-icons>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" :class="{ isBut: job.isBut }" v-else>
|
||||
<view class="recommend-card">
|
||||
<view class="card-content">
|
||||
<view class="recommend-card-title">在找「{{ job.jobCategory }}」工作吗?</view>
|
||||
<view class="recommend-card-tip">{{ job.tip }}</view>
|
||||
<view class="recommend-card-line"></view>
|
||||
<view class="recommend-card-controll">
|
||||
<view class="controll-no" @click="clearfindJob(job)">不是</view>
|
||||
<view class="controll-yes" @click="findJob(job)">是的</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
<empty v-else pdTop="200"></empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 筛选 -->
|
||||
<select-filter ref="selectFilterModel"></select-filter>
|
||||
|
||||
<!-- <view class="maskFristEntry" v-if="maskFristEntry">
|
||||
<view class="entry-content">
|
||||
<text class="text1">左滑查看视频</text>
|
||||
<text class="text2">左滑查看视频</text>
|
||||
<view class="goExperience">去体验</view>
|
||||
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
import img from '@/static/icon/filter.png';
|
||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
const { userInfo } = storeToRefs(useUserStore());
|
||||
import useDictStore from '@/stores/useDictStore';
|
||||
const { getTransformChildren, oneDictData } = useDictStore();
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
||||
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||
import { useScrollDirection } from '@/hook/useScrollDirection';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
const { isScrollingDown, handleScroll } = useScrollDirection();
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
const emits = defineEmits(['onShowTabbar']);
|
||||
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const loadmoreRef = ref(null);
|
||||
const conditionSearch = ref({});
|
||||
const waterfallcolumn = ref(2);
|
||||
const maskFristEntry = ref(false);
|
||||
const state = reactive({
|
||||
tabIndex: 'all',
|
||||
});
|
||||
const list = ref([]);
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
total: 0,
|
||||
maxPage: 2,
|
||||
pageSize: 10,
|
||||
search: {
|
||||
order: 0,
|
||||
},
|
||||
});
|
||||
const inputText = ref('');
|
||||
const showFilter = ref(false);
|
||||
const selectFilterModel = ref(null);
|
||||
const showModel = ref(false);
|
||||
const rangeOptions = ref([
|
||||
{ value: 0, text: '推荐' },
|
||||
{ value: 1, text: '最热' },
|
||||
{ value: 2, text: '最新发布' },
|
||||
]);
|
||||
const isLoaded = ref(false);
|
||||
|
||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||
pageState.pageSize = 10 * (columnCount.value - 1);
|
||||
getJobRecommend('refresh');
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
if (isLoaded.value) return;
|
||||
isLoaded.value = true;
|
||||
} catch (err) {
|
||||
isLoaded.value = false; // 重置状态允许重试
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollBottom() {
|
||||
loadmoreRef.value.change('loading');
|
||||
if (state.tabIndex === 'all') {
|
||||
getJobRecommend();
|
||||
} else {
|
||||
getJobList();
|
||||
}
|
||||
}
|
||||
|
||||
function findJob(job) {
|
||||
if (job.isBut) {
|
||||
$api.msg('已确认');
|
||||
} else {
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||
return {
|
||||
...item,
|
||||
isBut: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
const jobstr = job.jobCategory;
|
||||
const jobsObj = {
|
||||
地区: 'area',
|
||||
岗位: 'jobTitle',
|
||||
经验: 'experience',
|
||||
};
|
||||
const [name, value] = jobstr.split(':');
|
||||
const nameAttr = jobsObj[name];
|
||||
if (name === '岗位') {
|
||||
conditionSearch.value[nameAttr] = value;
|
||||
} else {
|
||||
const valueAttr = oneDictData(nameAttr).filter((item) => item.label === value);
|
||||
if (valueAttr.length) {
|
||||
const val = valueAttr[0].value;
|
||||
conditionSearch.value[nameAttr] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearfindJob(job) {
|
||||
if (job.isBut) {
|
||||
$api.msg('已确认');
|
||||
} else {
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||
return {
|
||||
...item,
|
||||
isBut: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
recommedIndexDb.deleteRecords(job);
|
||||
}
|
||||
}
|
||||
|
||||
function nextDetail(job) {
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function openFilter() {
|
||||
showFilter.value = true;
|
||||
emits('onShowTabbar', false);
|
||||
selectFilterModel.value?.open({
|
||||
title: '筛选',
|
||||
maskClick: true,
|
||||
success: (values) => {
|
||||
pageState.search = {
|
||||
...pageState.search,
|
||||
};
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
pageState.search[key] = value.join(',');
|
||||
}
|
||||
showFilter.value = false;
|
||||
getJobList('refresh');
|
||||
},
|
||||
cancel: () => {
|
||||
showFilter.value = false;
|
||||
emits('onShowTabbar', true);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleFilterConfirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function choosePosition(index) {
|
||||
state.tabIndex = index;
|
||||
list.value = [];
|
||||
if (index === 'all') {
|
||||
pageState.search = {
|
||||
order: pageState.search.order,
|
||||
};
|
||||
inputText.value = '';
|
||||
getJobRecommend('refresh');
|
||||
} else {
|
||||
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
|
||||
pageState.search.jobTitle = userInfo.value.jobTitle[index];
|
||||
inputText.value = '';
|
||||
getJobList('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
function handelHostestSearch(val) {
|
||||
pageState.search.order = val.value;
|
||||
if (state.tabIndex === 'all') {
|
||||
getJobRecommend('refresh');
|
||||
} else {
|
||||
getJobList('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
function getJobRecommend(type = 'add') {
|
||||
if (type === 'refresh') {
|
||||
list.value = [];
|
||||
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
let params = {
|
||||
pageSize: pageState.pageSize,
|
||||
sessionId: useUserStore().seesionId,
|
||||
...pageState.search,
|
||||
...conditionSearch.value,
|
||||
};
|
||||
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣,为您推荐更多合适的岗位' };
|
||||
$api.createRequest('/app/job/recommend', params).then((resData) => {
|
||||
const { data, total } = resData;
|
||||
pageState.total = 0;
|
||||
if (type === 'add') {
|
||||
// 记录系统
|
||||
recommedIndexDb.getRecord().then((res) => {
|
||||
if (res.length) {
|
||||
// 数据分析系统
|
||||
const resultData = recommedIndexDb.analyzer(res);
|
||||
const { sort, result } = resultData;
|
||||
// 岗位询问系统
|
||||
const conditionCounts = Object.fromEntries(
|
||||
sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
|
||||
);
|
||||
jobRecommender.updateConditions(conditionCounts);
|
||||
|
||||
const question = jobRecommender.getNextQuestion();
|
||||
|
||||
if (question) {
|
||||
comd.jobCategory = question;
|
||||
data.unshift(comd);
|
||||
}
|
||||
}
|
||||
const reslist = dataToImg(data);
|
||||
list.value.push(...reslist);
|
||||
});
|
||||
} else {
|
||||
list.value = dataToImg(data);
|
||||
}
|
||||
// 切换状态
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (data.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
}
|
||||
// 当没有岗位,刷新sessionId重新啦
|
||||
if (!data.length) {
|
||||
useUserStore().initSeesionId();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getJobList(type = 'add') {
|
||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||
pageState.page += 1;
|
||||
}
|
||||
if (type === 'refresh') {
|
||||
list.value = [];
|
||||
pageState.page = 1;
|
||||
pageState.maxPage = 2;
|
||||
// waterfallsFlowRef.value.refresh();
|
||||
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
let params = {
|
||||
current: pageState.page,
|
||||
pageSize: pageState.pageSize,
|
||||
...pageState.search,
|
||||
// ...conditionSearch.value,
|
||||
};
|
||||
|
||||
$api.createRequest('/app/job/list', params).then((resData) => {
|
||||
const { rows, total } = resData;
|
||||
if (type === 'add') {
|
||||
const str = pageState.pageSize * (pageState.page - 1);
|
||||
const end = list.value.length;
|
||||
const reslist = dataToImg(rows);
|
||||
list.value.splice(str, end, ...reslist);
|
||||
} else {
|
||||
list.value = dataToImg(rows);
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
// 切换状态
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value?.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value?.change('more');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dataToImg(data) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
}
|
||||
|
||||
defineExpose({ loadData });
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
// .maskFristEntry
|
||||
// position: fixed;
|
||||
// // right: 20rpx;
|
||||
// // bottom: calc(50% - 200rpx);
|
||||
// height: 100vh
|
||||
// width: 100vw
|
||||
// background: rgba(0,0,0,0.3)
|
||||
// .entry-content
|
||||
// display: flex;
|
||||
// align-items: center
|
||||
// position: absolute
|
||||
// left: 50%
|
||||
// top: 40%
|
||||
// transform: translate(-50%, -50%)
|
||||
// flex-direction: column
|
||||
// background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// width: 480rpx
|
||||
// height: 584rpx
|
||||
// // padding-left: 80rpx
|
||||
// .text1
|
||||
// margin-top: 370rpx
|
||||
// font-size: 36rpx
|
||||
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// background-clip: text; /* 有些浏览器兼容用 */
|
||||
// text-fill-color: transparent;
|
||||
// padding-left: 28rpx
|
||||
// .text2
|
||||
// padding-left: 28rpx
|
||||
// margin-top: 8rpx
|
||||
// font-size: 20rpx;
|
||||
// color: #666666;
|
||||
// text-align: center;
|
||||
// .indicateArrow
|
||||
// height: 76rpx
|
||||
// width: 68rpx
|
||||
// .indicatefristEntry
|
||||
// width: 244rpx
|
||||
// height: 244rpx
|
||||
// .goExperience
|
||||
// margin-left: 28rpx
|
||||
// margin-top: 28rpx
|
||||
// width: 160rpx;
|
||||
// height: 60rpx;
|
||||
// background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
|
||||
// border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
// font-size: 28rpx;
|
||||
// color: #FFFFFF;
|
||||
// text-align: center;
|
||||
// line-height: 60rpx
|
||||
// .maskFristEntry-Close
|
||||
// position: absolute;
|
||||
// left: calc(50% - 10rpx);
|
||||
// bottom: -130rpx
|
||||
// width: 42rpx
|
||||
// height: 42rpx
|
||||
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||
// border-radius: 50%;
|
||||
// .maskFristEntry-Close::before
|
||||
// position: absolute;
|
||||
// left: calc( 50% - 2rpx)
|
||||
// top: calc( 50% - 10rpx)
|
||||
// transform: rotate(45deg);
|
||||
// content: ''
|
||||
// background: #FFFFFF
|
||||
// width: 4rpx
|
||||
// height: 20rpx
|
||||
// .maskFristEntry-Close::after
|
||||
// position: absolute;
|
||||
// left: calc( 50% - 2rpx)
|
||||
// top: calc( 50% - 10rpx)
|
||||
// transform: rotate(-45deg);
|
||||
// content: ''
|
||||
// background: #FFFFFF
|
||||
// width: 4rpx
|
||||
// height: 20rpx
|
||||
|
||||
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||
background-size: 100% 728rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
.hidden-animation
|
||||
max-height: 1000px;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
.hidden-height
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.container-search
|
||||
padding: 16rpx 24rpx
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
.search-input
|
||||
display: flex
|
||||
align-items: center;
|
||||
width: 100%
|
||||
height: 80rpx;
|
||||
line-height: 80rpx
|
||||
margin-right: 24rpx
|
||||
background: #FFFFFF;
|
||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||||
.iconsearch
|
||||
padding-left: 36rpx
|
||||
.inpute
|
||||
margin-left: 20rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B5B5B5;
|
||||
width: 100%
|
||||
.chart
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
width: 170rpx;
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||
border-radius: 80rpx 80rpx 80rpx 80rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
text-align: center
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
height: 36rpx;
|
||||
color: #000000;
|
||||
padding: 20rpx 30rpx
|
||||
.cards
|
||||
padding: 10rpx 28rpx
|
||||
display: grid
|
||||
grid-gap: 38rpx;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.card
|
||||
height: calc(158rpx - 40rpx);
|
||||
padding: 22rpx 26rpx
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
.card-title
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
.card-text
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
margin-top: 4rpx
|
||||
.card:first-child
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||
url('@/static/icon/fujin.png');
|
||||
background-size: 100%, 100%
|
||||
.card:last-child
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||
url('@/static/icon/jinxuan.png');
|
||||
background-size: 100%, 100%
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
.nav-filter
|
||||
padding: 16rpx 28rpx 0 28rpx
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
.filter-top
|
||||
display: flex
|
||||
justify-content: space-between;
|
||||
.tab-scroll
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
.jobs-left
|
||||
display: flex
|
||||
flex-wrap: nowrap
|
||||
.job
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
.jobs-add
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
display: flex
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666D7F;
|
||||
line-height: 38rpx;
|
||||
.filter-bottom
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 24rpx 0
|
||||
.btm-left
|
||||
display: flex
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
.filterbtm
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 24rpx
|
||||
padding: 0rpx 16rpx
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #256BFA;
|
||||
.btm-right
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #6C7282;
|
||||
.right-sx
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
.active
|
||||
transform: rotate(180deg)
|
||||
.table-list
|
||||
background: #F4F4F4
|
||||
flex: 1
|
||||
overflow: hidden
|
||||
.falls-scroll
|
||||
width: 100%
|
||||
height: 100%
|
||||
.falls
|
||||
padding: 28rpx 28rpx;
|
||||
.item
|
||||
position: relative;
|
||||
// background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
|
||||
.falls-card
|
||||
padding: 30rpx;
|
||||
.falls-card-title
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
color: #606060;
|
||||
text-align: left;
|
||||
word-break:break-all
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-top: 10rpx
|
||||
.falls-card-pay
|
||||
// height: 50rpx;
|
||||
word-break:break-all
|
||||
color: #002979;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
position: relative
|
||||
.pay-text
|
||||
font-family: DIN-Medium;
|
||||
color: #4C6EFB;
|
||||
padding-right: 10rpx
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #4C6EFB;
|
||||
line-height: 45rpx;
|
||||
text-align: left;
|
||||
.flame
|
||||
position: absolute
|
||||
bottom: 0
|
||||
right: -10rpx
|
||||
transform: translate(0, -30%)
|
||||
width: 24rpx
|
||||
height: 31rpx
|
||||
.falls-card-education,.falls-card-experience
|
||||
width: fit-content;
|
||||
height: 30rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 4rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #6C7282;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap
|
||||
|
||||
.falls-card-company,.falls-card-pepleNumber
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 25rpx;
|
||||
text-align: left;
|
||||
.falls-card-pepleNumber
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap
|
||||
margin-top: 10rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 46rpx
|
||||
view
|
||||
display:flex
|
||||
align-items: center
|
||||
white-space: nowrap;
|
||||
.point2
|
||||
margin: 0rpx 6rpx 0 2rpx
|
||||
height: 22rpx
|
||||
width: 22rpx
|
||||
.point3
|
||||
margin: 0rpx 4rpx 0 0
|
||||
height: 28rpx
|
||||
width: 28rpx
|
||||
.falls-card-matchingrate
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 21rpx;
|
||||
color: #4778EC;
|
||||
text-align: left;
|
||||
.falls-card-company2
|
||||
margin-top: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
display: flex
|
||||
.point3
|
||||
margin: 4rpx 4rpx 0 0
|
||||
height: 26rpx
|
||||
width: 26rpx
|
||||
// 推荐卡片
|
||||
.recommend-card::before
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
content: ''
|
||||
height: 60rpx
|
||||
width: 100%
|
||||
height: 8rpx;
|
||||
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,54,170,0.15);
|
||||
.recommend-card::after
|
||||
content ''
|
||||
position absolute
|
||||
z-index 0
|
||||
left 50%
|
||||
top 40%
|
||||
transform: translate(-50%, -50%)
|
||||
width 250rpx
|
||||
height 250rpx
|
||||
background url('@/static/icon/backAI.png') no-repeat center center
|
||||
opacity 0.6
|
||||
background-size contain
|
||||
pointer-events none
|
||||
filter: blur(3rpx)
|
||||
.recommend-card
|
||||
padding 36rpx 24rpx
|
||||
background: linear-gradient( 360deg, #DFE9FF 0%, #FFFFFF 52%, #FFFFFF 100%);
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
position relative
|
||||
box-shadow 0rpx 4rpx 8rpx 0rpx rgba(72, 89, 123, 0.3)
|
||||
.card-content
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.recommend-card-title
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
.recommend-card-tip
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
margin-top: 28rpx
|
||||
.recommend-card-line
|
||||
width: calc(100%);
|
||||
height: 0rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border: 2rpx dashed rgba(0,0,0,0.14);
|
||||
margin-top: 50rpx
|
||||
position: relative
|
||||
// .recommend-card-line::before
|
||||
// position: absolute
|
||||
// content: ''
|
||||
// left: 0
|
||||
// top: 0
|
||||
// transform: translate(-50% - 90rpx, -50%)
|
||||
// width: 28rpx;
|
||||
// height: 28rpx;
|
||||
// background: #F4F4F4;
|
||||
// border-radius: 50%;
|
||||
// .recommend-card-line::after
|
||||
// position: absolute
|
||||
// content: ''
|
||||
// right: 0
|
||||
// top: 0
|
||||
// transform: translate(50% + 90rpx, -50%)
|
||||
// width: 28rpx;
|
||||
// height: 28rpx;
|
||||
// background: #F4F4F4;
|
||||
// border-radius: 50%;
|
||||
.recommend-card-controll
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
margin-top: 40rpx
|
||||
padding: 0 6rpx;
|
||||
.controll-yes
|
||||
width: 124rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(37,107,250,0.1);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx
|
||||
color: #256BFA
|
||||
.controll-no
|
||||
width: 124rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 2rpx solid #DEDEDE;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
.controll-yes:active, .controll-no:active
|
||||
width: 120rpx;
|
||||
height: 66rpx;
|
||||
line-height: 66rpx
|
||||
background: #e8e8e8
|
||||
border: 2rpx solid #e8e8e8
|
||||
.isBut{
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
</style>
|
333
pages/index/components/index-two.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view class="nav-filter">
|
||||
<view class="filter-top" @touchmove.stop.prevent>
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="jobs-left">
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === 'all' }"
|
||||
@click="choosePosition('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === index }"
|
||||
v-for="(item, index) in userInfo.jobTitle"
|
||||
:key="index"
|
||||
@click="choosePosition(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="jobs-add button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666D7F" type="search" size="18"></uni-icons>
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<scroll-view :scroll-y="true" class="tab-scroll" @scrolltolower="scrollBottom">
|
||||
<view class="scroll-content">
|
||||
<custom-waterfalls-flow
|
||||
ref="waterfallsFlowRef"
|
||||
:column="columnCount"
|
||||
:columnSpace="columnSpace"
|
||||
@loaded="imageloaded"
|
||||
:value="list"
|
||||
>
|
||||
<template v-slot:default="job">
|
||||
<view class="slot-item">
|
||||
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||
<view class="cover-triangle"></view>
|
||||
</view>
|
||||
<view class="job-info" @click="nextDetail(job)">
|
||||
<view class="salary">
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="title">{{ job.jobTitle }}</view>
|
||||
<view class="desc">
|
||||
<image class="point3" src="/static/icon/point3.png"></image>
|
||||
<!-- <uni-icons type="location" size="14"></uni-icons> -->
|
||||
<view class="descText">{{ job.companyName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
import { usePagination } from '@/hook/usePagination';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
import img from '@/static/icon/filter.png';
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
// status
|
||||
const { userInfo } = storeToRefs(useUserStore());
|
||||
const isLoaded = ref(false);
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const loadmoreRef = ref(null);
|
||||
const state = reactive({
|
||||
tabIndex: 'all',
|
||||
});
|
||||
|
||||
// 响应式搜索条件(可以被修改)
|
||||
const searchParams = ref({});
|
||||
const pageSize = ref(10);
|
||||
const { list, loading, refresh, loadMore } = usePagination(
|
||||
(params) => $api.createRequest('/app/job/littleVideo', params),
|
||||
dataToImg, // 转换函数
|
||||
{
|
||||
pageSize: pageSize,
|
||||
search: searchParams,
|
||||
dataKey: 'data',
|
||||
onBeforeRequest: () => {
|
||||
loadmoreRef.value?.change('loading');
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
function imageloaded() {
|
||||
loadmoreRef.value?.change('more');
|
||||
}
|
||||
|
||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||
pageSize.value = 10 * (columnCount.value - 1);
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
if (isLoaded.value) return;
|
||||
isLoaded.value = true;
|
||||
refresh();
|
||||
} catch (err) {
|
||||
isLoaded.value = false; // 重置状态允许重试
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async function choosePosition(index) {
|
||||
state.tabIndex = index;
|
||||
if (index === 'all') {
|
||||
searchParams.value.jobTitle = '';
|
||||
} else {
|
||||
searchParams.value.jobTitle = userInfo.value.jobTitle[index];
|
||||
}
|
||||
console.log(searchParams.value);
|
||||
refresh('refresh');
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
|
||||
function scrollBottom() {
|
||||
loadMore();
|
||||
}
|
||||
|
||||
function nextDetail(job) {
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function nextVideo(job) {
|
||||
uni.setStorageSync(`job-Info`, job);
|
||||
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||
}
|
||||
|
||||
function dataToImg(data) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
// image: item.cover,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
}
|
||||
|
||||
defineExpose({ loadData });
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||
background-size: 100% 728rpx;
|
||||
// background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
.cards
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.tab-scroll
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: clip;
|
||||
.scroll-content{
|
||||
padding: 24rpx
|
||||
}
|
||||
|
||||
.nav-filter
|
||||
padding: 16rpx 28rpx 30rpx 28rpx
|
||||
.filter-top
|
||||
display: flex
|
||||
justify-content: space-between;
|
||||
.tab-scroll
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
.jobs-left
|
||||
display: flex
|
||||
flex-wrap: nowrap
|
||||
align-items: center
|
||||
.job
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
.jobs-add
|
||||
display: flex
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666D7F;
|
||||
line-height: 38rpx;
|
||||
.iconsearch
|
||||
margin-right: 6rpx
|
||||
.filter-bottom
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 24rpx 0
|
||||
.btm-left
|
||||
display: flex
|
||||
.filterbtm
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 24rpx
|
||||
padding: 0rpx 16rpx
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #256BFA;
|
||||
.btm-right
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #6C7282;
|
||||
.right-sx
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
.active
|
||||
transform: rotate(180deg)
|
||||
|
||||
.slot-item
|
||||
background: #f4f4f4;
|
||||
// background: #f6f8fa;
|
||||
.job-image{
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
position: relative;
|
||||
.cover-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cover-triangle{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx
|
||||
width: 36rpx
|
||||
height: 36rpx
|
||||
border-radius: 50%
|
||||
background: rgba(0,0,0,0.3)
|
||||
}
|
||||
.cover-triangle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-40%, -50%) rotate(90deg);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-bottom: 12rpx solid #fff;
|
||||
}
|
||||
}
|
||||
.job-info{
|
||||
padding: 10rpx 10rpx 24rpx 24rpx
|
||||
}
|
||||
.salary
|
||||
color: #4C6EFB;
|
||||
font-size: 28rpx
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
justify-content: space-between
|
||||
font-family: DIN-Medium;
|
||||
.flame
|
||||
margin-top: 4rpx
|
||||
margin-right: 4rpx
|
||||
width: 24rpx
|
||||
height: 31rpx
|
||||
.title
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-top: 6rpx;
|
||||
white-space: pre-wrap
|
||||
.desc
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #6C7282;
|
||||
margin-top: 6rpx;
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
.descText{
|
||||
flex: 1
|
||||
white-space: pre-wrap
|
||||
}
|
||||
.point3{
|
||||
margin: 4rpx 4rpx 0 0
|
||||
height: 26rpx
|
||||
width: 26rpx
|
||||
}
|
||||
</style>
|
@@ -1,734 +1,284 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
|
||||
<view class="container-search">
|
||||
<view class="search-input button-click" @click="navTo('/pages/search/search')">
|
||||
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
||||
<text class="inpute">职位名称、薪资要求等</text>
|
||||
</view>
|
||||
<view class="chart button-click">职业图谱</view>
|
||||
<view class="app-custom-root">
|
||||
<view class="app-container">
|
||||
<!-- 主体内容区域 -->
|
||||
<view class="container-main">
|
||||
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
|
||||
<swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<component
|
||||
:is="components[index]"
|
||||
@onShowTabbar="changeShowTabbar"
|
||||
:ref="(el) => handelComponentsRef(el, index)"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<IndexOne
|
||||
v-show="currentIndex === 0"
|
||||
@onShowTabbar="changeShowTabbar"
|
||||
:ref="(el) => handelComponentsRef(el, index)"
|
||||
/>
|
||||
<IndexTwo
|
||||
v-show="currentIndex === 1"
|
||||
@onShowTabbar="changeShowTabbar"
|
||||
:ref="(el) => handelComponentsRef(el, index)"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="cards">
|
||||
<view class="card btn-feel" @click="navTo('/pages/nearby/nearby')">
|
||||
<view class="card-title">附近工作</view>
|
||||
<view class="card-text">好岗职等你来</view>
|
||||
</view>
|
||||
<view class="card btn-feel" @click="navTo('/packageA/pages/choiceness/choiceness')">
|
||||
<view class="card-title">精选企业</view>
|
||||
<view class="card-text">优选职得信赖</view>
|
||||
|
||||
<Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
|
||||
|
||||
<!-- maskFristEntry -->
|
||||
<view class="maskFristEntry" v-if="maskFristEntry">
|
||||
<view class="entry-content">
|
||||
<text class="text1">左滑查看视频</text>
|
||||
<text class="text2">快去体验吧~</text>
|
||||
<view class="goExperience" @click="goExperience">去体验</view>
|
||||
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-filter">
|
||||
<view class="filter-top">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||
<view class="jobs-left">
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === 'all' }"
|
||||
@click="choosePosition('all')"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="job button-click"
|
||||
:class="{ active: state.tabIndex === index }"
|
||||
v-for="(item, index) in userInfo.jobTitle"
|
||||
:key="index"
|
||||
@click="choosePosition(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
|
||||
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
|
||||
<text>添加</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-bottom">
|
||||
<view class="btm-left">
|
||||
<view
|
||||
class="button-click filterbtm"
|
||||
:class="{ active: pageState.search.order === item.value }"
|
||||
v-for="item in rangeOptions"
|
||||
@click="handelHostestSearch(item)"
|
||||
:key="item.value"
|
||||
>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm-right button-click" @click="openFilter">
|
||||
筛选
|
||||
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-list">
|
||||
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
|
||||
<view class="falls" v-if="list.length">
|
||||
<custom-waterfalls-flow
|
||||
:column="columnCount"
|
||||
:columnSpace="columnSpace"
|
||||
ref="waterfallsFlowRef"
|
||||
:value="list"
|
||||
>
|
||||
<template v-slot:default="job">
|
||||
<view class="item btn-feel" v-if="!job.recommend">
|
||||
<view class="falls-card" @click="nextDetail(job)">
|
||||
<view class="falls-card-pay">
|
||||
<view class="pay-text">
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
</view>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="falls-card-title">{{ job.jobTitle }}</view>
|
||||
<view class="fl_box fl_warp">
|
||||
<view class="falls-card-education mar_ri10" v-if="job.education">
|
||||
<dict-Label dictType="education" :value="job.education"></dict-Label>
|
||||
</view>
|
||||
<view class="falls-card-experience" v-if="job.experience">
|
||||
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="falls-card-company">{{ job.companyName }}</view>
|
||||
<view class="falls-card-company">
|
||||
青岛
|
||||
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
|
||||
</view>
|
||||
<view class="falls-card-pepleNumber">
|
||||
<view>{{ job.postingDate || '发布日期' }}</view>
|
||||
<view>{{ vacanciesTo(job.vacancies) }}</view>
|
||||
</view>
|
||||
<!-- <view class="falls-card-matchingrate">
|
||||
<view class=""><matchingDegree :job="job"></matchingDegree></view>
|
||||
<uni-icons type="star" size="30"></uni-icons>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" :class="{ isBut: job.isBut }" v-else>
|
||||
<view class="recommend-card">
|
||||
<view class="card-content">
|
||||
<view class="recommend-card-title">在找「{{ job.jobCategory }}」工作吗?</view>
|
||||
<view class="recommend-card-tip">{{ job.tip }}</view>
|
||||
<view class="recommend-card-line"></view>
|
||||
<view class="recommend-card-controll">
|
||||
<view class="controll-no" @click="clearfindJob(job)">不是</view>
|
||||
<view class="controll-yes" @click="findJob(job)">是的</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
<empty v-else pdTop="200"></empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 筛选 -->
|
||||
<select-filter ref="selectFilterModel"></select-filter>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||
import img from '@/static/icon/filter.png';
|
||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import IndexOne from './components/index-one.vue';
|
||||
import IndexTwo from './components/index-two.vue';
|
||||
const loadedMap = reactive([false, false]);
|
||||
const swiperRefs = [ref(null), ref(null)];
|
||||
const components = [IndexOne, IndexTwo];
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
const { userInfo } = storeToRefs(useUserStore());
|
||||
import useDictStore from '@/stores/useDictStore';
|
||||
const { getTransformChildren, oneDictData } = useDictStore();
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
||||
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||
import { useScrollDirection } from '@/hook/useScrollDirection';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
const { isScrollingDown, handleScroll } = useScrollDirection();
|
||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||
import { useReadMsg } from '@/stores/useReadMsg';
|
||||
const { unreadCount } = storeToRefs(useReadMsg());
|
||||
const showTabbar = ref(true);
|
||||
const maskFristEntry = ref(false);
|
||||
|
||||
onLoad(() => {
|
||||
// 判断浏览器是否有 fristEntry 第一次进入
|
||||
let fristEntry = uni.getStorageSync('fristEntry') === false ? false : true; // 默认未读
|
||||
maskFristEntry.value = fristEntry;
|
||||
// maskFristEntry.value = true;
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// 获取消息列表
|
||||
useReadMsg().fetchMessages();
|
||||
});
|
||||
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const loadmoreRef = ref(null);
|
||||
const conditionSearch = ref({});
|
||||
const waterfallcolumn = ref(2);
|
||||
const state = reactive({
|
||||
tabIndex: 'all',
|
||||
});
|
||||
const list = ref([]);
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
total: 0,
|
||||
maxPage: 2,
|
||||
pageSize: 10,
|
||||
search: {
|
||||
order: 0,
|
||||
},
|
||||
});
|
||||
const inputText = ref('');
|
||||
const showFilter = ref(false);
|
||||
const selectFilterModel = ref(null);
|
||||
const showModel = ref(false);
|
||||
const rangeOptions = ref([
|
||||
{ value: 0, text: '推荐' },
|
||||
{ value: 1, text: '最热' },
|
||||
{ value: 2, text: '最新发布' },
|
||||
]);
|
||||
// const jobList = ref([
|
||||
// { name: '销售顾问', highlight: true },
|
||||
// { name: '销售管理', highlight: true },
|
||||
// { name: '销售工程师', highlight: true },
|
||||
// { name: '算法工程师', highlight: false },
|
||||
// { name: '生产经理', highlight: false },
|
||||
// { name: '市场策划', highlight: false },
|
||||
// { name: '商务服务', highlight: false },
|
||||
// { name: '客服', highlight: false },
|
||||
// { name: '创意总监', highlight: false },
|
||||
// ]);
|
||||
|
||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||
pageState.pageSize = 10 * (columnCount.value - 1);
|
||||
getJobRecommend('refresh');
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
current: 0,
|
||||
all: [{}],
|
||||
});
|
||||
|
||||
// onLoad(() => {
|
||||
// getJobRecommend('refresh');
|
||||
// });
|
||||
onMounted(() => {
|
||||
handleTabChange(state.current);
|
||||
});
|
||||
|
||||
function scrollBottom() {
|
||||
loadmoreRef.value.change('loading');
|
||||
if (state.tabIndex === 'all') {
|
||||
getJobRecommend();
|
||||
} else {
|
||||
getJobList();
|
||||
const handelComponentsRef = (el, index) => {
|
||||
if (el) {
|
||||
swiperRefs[index].value = el;
|
||||
}
|
||||
};
|
||||
|
||||
function changeShowTabbar(val) {
|
||||
showTabbar.value = val;
|
||||
}
|
||||
|
||||
//1 查看消息类型
|
||||
function changeSwiperType(e) {
|
||||
const index = e.detail.current;
|
||||
state.current = index;
|
||||
handleTabChange(index);
|
||||
}
|
||||
function changeType(index) {
|
||||
state.current = index;
|
||||
handleTabChange(index);
|
||||
}
|
||||
|
||||
function handleTabChange(index) {
|
||||
if (!loadedMap[index]) {
|
||||
swiperRefs[index].value?.loadData();
|
||||
loadedMap[index] = true;
|
||||
}
|
||||
}
|
||||
|
||||
function findJob(job) {
|
||||
if (job.isBut) {
|
||||
$api.msg('已确认');
|
||||
} else {
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||
return {
|
||||
...item,
|
||||
isBut: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
const jobstr = job.jobCategory;
|
||||
const jobsObj = {
|
||||
地区: 'area',
|
||||
岗位: 'jobTitle',
|
||||
经验: 'experience',
|
||||
};
|
||||
const [name, value] = jobstr.split(':');
|
||||
const nameAttr = jobsObj[name];
|
||||
if (name === '岗位') {
|
||||
conditionSearch.value[nameAttr] = value;
|
||||
} else {
|
||||
const valueAttr = oneDictData(nameAttr).filter((item) => item.label === value);
|
||||
if (valueAttr.length) {
|
||||
const val = valueAttr[0].value;
|
||||
conditionSearch.value[nameAttr] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
function changeSwiperMsgType(e) {
|
||||
const currented = e.detail.current;
|
||||
state.current = currented;
|
||||
}
|
||||
// mask
|
||||
function closeFristEntry() {
|
||||
uni.setStorageSync('fristEntry', false);
|
||||
maskFristEntry.value = false;
|
||||
}
|
||||
|
||||
function clearfindJob(job) {
|
||||
if (job.isBut) {
|
||||
$api.msg('已确认');
|
||||
} else {
|
||||
list.value = list.value.map((item) => {
|
||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||
return {
|
||||
...item,
|
||||
isBut: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
recommedIndexDb.deleteRecords(job);
|
||||
}
|
||||
}
|
||||
|
||||
function nextDetail(job) {
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function openFilter() {
|
||||
showFilter.value = true;
|
||||
selectFilterModel.value?.open({
|
||||
title: '筛选',
|
||||
maskClick: true,
|
||||
success: (values) => {
|
||||
pageState.search = {
|
||||
...pageState.search,
|
||||
};
|
||||
for (const [key, value] of Object.entries(values)) {
|
||||
pageState.search[key] = value.join(',');
|
||||
}
|
||||
showFilter.value = false;
|
||||
getJobList('refresh');
|
||||
},
|
||||
cancel: () => {
|
||||
showFilter.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleFilterConfirm(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function choosePosition(index) {
|
||||
state.tabIndex = index;
|
||||
list.value = [];
|
||||
if (index === 'all') {
|
||||
pageState.search = {
|
||||
order: pageState.search.order,
|
||||
};
|
||||
inputText.value = '';
|
||||
getJobRecommend('refresh');
|
||||
} else {
|
||||
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
|
||||
pageState.search.jobTitle = userInfo.value.jobTitle[index];
|
||||
inputText.value = '';
|
||||
getJobList('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
function handelHostestSearch(val) {
|
||||
pageState.search.order = val.value;
|
||||
if (state.tabIndex === 'all') {
|
||||
getJobRecommend('refresh');
|
||||
} else {
|
||||
getJobList('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
function getJobRecommend(type = 'add') {
|
||||
if (type === 'refresh') {
|
||||
list.value = [];
|
||||
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
let params = {
|
||||
pageSize: pageState.pageSize,
|
||||
sessionId: useUserStore().seesionId,
|
||||
...pageState.search,
|
||||
...conditionSearch.value,
|
||||
};
|
||||
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣,为您推荐更多合适的岗位' };
|
||||
$api.createRequest('/app/job/recommend', params).then((resData) => {
|
||||
const { data, total } = resData;
|
||||
pageState.total = 0;
|
||||
if (type === 'add') {
|
||||
// 记录系统
|
||||
recommedIndexDb.getRecord().then((res) => {
|
||||
if (res.length) {
|
||||
// 数据分析系统
|
||||
const resultData = recommedIndexDb.analyzer(res);
|
||||
const { sort, result } = resultData;
|
||||
// 岗位询问系统
|
||||
const conditionCounts = Object.fromEntries(
|
||||
sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
|
||||
);
|
||||
jobRecommender.updateConditions(conditionCounts);
|
||||
|
||||
const question = jobRecommender.getNextQuestion();
|
||||
|
||||
if (question) {
|
||||
comd.jobCategory = question;
|
||||
data.unshift(comd);
|
||||
}
|
||||
}
|
||||
const reslist = dataToImg(data);
|
||||
list.value.push(...reslist);
|
||||
});
|
||||
} else {
|
||||
list.value = dataToImg(data);
|
||||
}
|
||||
// 切换状态
|
||||
if (data.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
// 当没有岗位,刷新sessionId重新啦
|
||||
if (!data.length) {
|
||||
useUserStore().initSeesionId();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getJobList(type = 'add') {
|
||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||
pageState.page += 1;
|
||||
}
|
||||
if (type === 'refresh') {
|
||||
list.value = [];
|
||||
pageState.page = 1;
|
||||
pageState.maxPage = 2;
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
let params = {
|
||||
current: pageState.page,
|
||||
pageSize: pageState.pageSize,
|
||||
...pageState.search,
|
||||
};
|
||||
|
||||
$api.createRequest('/app/job/list', params).then((resData) => {
|
||||
const { rows, total } = resData;
|
||||
if (type === 'add') {
|
||||
const str = pageState.pageSize * (pageState.page - 1);
|
||||
const end = list.value.length;
|
||||
const reslist = dataToImg(rows);
|
||||
list.value.splice(str, end, ...reslist);
|
||||
} else {
|
||||
list.value = dataToImg(rows);
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value?.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value?.change('more');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dataToImg(data) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
function goExperience() {
|
||||
closeFristEntry();
|
||||
state.current = 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
.app-container
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||
background-size: 100% 728rpx;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
.hidden-animation
|
||||
max-height: 1000px;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
.hidden-height
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
.container-search
|
||||
padding: 16rpx 24rpx
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
.search-input
|
||||
display: flex
|
||||
align-items: center;
|
||||
width: 100%
|
||||
height: 80rpx;
|
||||
line-height: 80rpx
|
||||
margin-right: 24rpx
|
||||
background: #FFFFFF;
|
||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||||
.iconsearch
|
||||
padding-left: 36rpx
|
||||
.inpute
|
||||
margin-left: 20rpx
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #B5B5B5;
|
||||
width: 100%
|
||||
.chart
|
||||
width: 170rpx;
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||
border-radius: 80rpx 80rpx 80rpx 80rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
text-align: center
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
height: 36rpx;
|
||||
color: #000000;
|
||||
padding: 20rpx 30rpx
|
||||
.cards
|
||||
padding: 10rpx 28rpx
|
||||
display: grid
|
||||
grid-gap: 38rpx;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.card
|
||||
height: calc(158rpx - 40rpx);
|
||||
padding: 22rpx 26rpx
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
.card-title
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
.card-text
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
margin-top: 4rpx
|
||||
.card:first-child
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||
url('@/static/icon/fujin.png');
|
||||
background-size: 100%, 100%
|
||||
.card:last-child
|
||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||
url('@/static/icon/jinxuan.png');
|
||||
background-size: 100%, 100%
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
.nav-filter
|
||||
padding: 16rpx 28rpx 0 28rpx
|
||||
.filter-top
|
||||
display: flex
|
||||
justify-content: space-between;
|
||||
.tab-scroll
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
mask-image: linear-gradient(to right, black 60%, transparent);
|
||||
.jobs-left
|
||||
display: flex
|
||||
flex-wrap: nowrap
|
||||
.job
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
.jobs-add
|
||||
display: flex
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666D7F;
|
||||
line-height: 38rpx;
|
||||
.filter-bottom
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 24rpx 0
|
||||
.btm-left
|
||||
display: flex
|
||||
.filterbtm
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #666D7F;
|
||||
margin-right: 24rpx
|
||||
padding: 0rpx 16rpx
|
||||
.active
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #256BFA;
|
||||
.btm-right
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #6C7282;
|
||||
.right-sx
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
.active
|
||||
transform: rotate(180deg)
|
||||
.table-list
|
||||
background: #F4F4F4
|
||||
flex: 1
|
||||
overflow: hidden
|
||||
.falls-scroll
|
||||
width: 100%
|
||||
height: 100%
|
||||
.falls
|
||||
padding: 28rpx 28rpx;
|
||||
.item
|
||||
position: relative;
|
||||
// background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
|
||||
.falls-card
|
||||
padding: 30rpx;
|
||||
.falls-card-title
|
||||
color: #606060;
|
||||
line-height: 49rpx;
|
||||
text-align: left;
|
||||
word-break:break-all
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
.falls-card-pay
|
||||
// height: 50rpx;
|
||||
word-break:break-all
|
||||
color: #002979;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
position: relative
|
||||
.pay-text
|
||||
color: #4C6EFB;
|
||||
padding-right: 10rpx
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #4C6EFB;
|
||||
line-height: 45rpx;
|
||||
text-align: left;
|
||||
.flame
|
||||
position: absolute
|
||||
bottom: 0
|
||||
right: -10rpx
|
||||
transform: translate(0, -30%)
|
||||
width: 24rpx
|
||||
height: 31rpx
|
||||
.falls-card-education,.falls-card-experience
|
||||
width: fit-content;
|
||||
height: 30rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 4rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #6C7282;
|
||||
text-align: center;
|
||||
margin-top: 14rpx;
|
||||
white-space: nowrap
|
||||
|
||||
.falls-card-company,.falls-card-pepleNumber
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #606060;
|
||||
line-height: 25rpx;
|
||||
text-align: left;
|
||||
.falls-card-pepleNumber
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 38rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
.falls-card-matchingrate
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 21rpx;
|
||||
color: #4778EC;
|
||||
text-align: left;
|
||||
// 推荐卡片
|
||||
.recommend-card::before
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
content: ''
|
||||
height: 60rpx
|
||||
width: 100%
|
||||
height: 8rpx;
|
||||
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
|
||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,54,170,0.15);
|
||||
.recommend-card
|
||||
padding: 24rpx
|
||||
.card-content
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.recommend-card-title
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
.recommend-card-tip
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #6C7282;
|
||||
margin-top: 20rpx
|
||||
.recommend-card-line
|
||||
width: calc(100%);
|
||||
height: 0rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border: 2rpx dashed rgba(0,0,0,0.14);
|
||||
margin-top: 50rpx
|
||||
position: relative
|
||||
.recommend-card-line::before
|
||||
position: absolute
|
||||
content: ''
|
||||
left: 0
|
||||
top: 0
|
||||
transform: translate(-50% - 90rpx, -50%)
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 50%;
|
||||
.recommend-card-line::after
|
||||
position: absolute
|
||||
content: ''
|
||||
right: 0
|
||||
top: 0
|
||||
transform: translate(50% + 90rpx, -50%)
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 50%;
|
||||
.recommend-card-controll
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
margin-top: 40rpx
|
||||
padding: 0 6rpx;
|
||||
.controll-yes
|
||||
width: 124rpx;
|
||||
height: 70rpx;
|
||||
background: rgba(37,107,250,0.1);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
text-align: center;
|
||||
line-height:70rpx
|
||||
color: #256BFA
|
||||
.controll-no
|
||||
width: 124rpx;
|
||||
height: 66rpx;
|
||||
line-height: 66rpx
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
border: 2rpx solid #DEDEDE;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
.controll-yes:active, .controll-no:active
|
||||
width: 120rpx;
|
||||
height: 66rpx;
|
||||
line-height: 66rpx
|
||||
background: #e8e8e8
|
||||
border: 2rpx solid #e8e8e8
|
||||
.isBut{
|
||||
filter: grayscale(100%);
|
||||
.app-custom-root {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100vw;
|
||||
height: calc(100% - var(--window-bottom));
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.container-header {
|
||||
height: calc(88rpx - 14rpx);
|
||||
text-align: center;
|
||||
line-height: calc(88rpx - 14rpx);
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16rpx 44rpx 36rpx 44rpx;
|
||||
background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.header-title {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-btnLf {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: calc(60rpx * 3);
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #696969;
|
||||
margin-right: 44rpx;
|
||||
position: relative;
|
||||
.btns-wd{
|
||||
position: absolute
|
||||
top: 2rpx;
|
||||
right: 2rpx
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #F73636;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #EEEEFF;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.main-scroll {
|
||||
width: 100%
|
||||
height: 100%;
|
||||
}
|
||||
.scrollmain{
|
||||
padding: 28rpx
|
||||
}
|
||||
.swiper
|
||||
height: 100%;
|
||||
width: 100%
|
||||
.list
|
||||
width: 100%
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// mask:
|
||||
.maskFristEntry
|
||||
position: fixed;
|
||||
// right: 20rpx;
|
||||
// bottom: calc(50% - 200rpx);
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
background: rgba(0,0,0,0.3)
|
||||
.entry-content
|
||||
display: flex;
|
||||
align-items: center
|
||||
position: absolute
|
||||
left: 50%
|
||||
top: 35%
|
||||
transform: translate(-50%, -50%)
|
||||
flex-direction: column
|
||||
background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 480rpx
|
||||
height: 584rpx
|
||||
// padding-left: 80rpx
|
||||
.text1
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
margin-top: 370rpx
|
||||
font-size: 36rpx
|
||||
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text; /* 有些浏览器兼容用 */
|
||||
text-fill-color: transparent;
|
||||
padding-left: 28rpx
|
||||
.text2
|
||||
padding-left: 28rpx
|
||||
margin-top: 8rpx
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
.indicateArrow
|
||||
height: 76rpx
|
||||
width: 68rpx
|
||||
.indicatefristEntry
|
||||
width: 244rpx
|
||||
height: 244rpx
|
||||
.goExperience
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
margin-left: 28rpx
|
||||
margin-top: 28rpx
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 60rpx
|
||||
.maskFristEntry-Close
|
||||
position: absolute;
|
||||
left: calc(50% - 10rpx);
|
||||
bottom: -130rpx
|
||||
width: 42rpx
|
||||
height: 42rpx
|
||||
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||
border-radius: 50%;
|
||||
.maskFristEntry-Close::before
|
||||
position: absolute;
|
||||
left: calc( 50% - 2rpx)
|
||||
top: calc( 50% - 10rpx)
|
||||
transform: rotate(45deg);
|
||||
content: ''
|
||||
background: #FFFFFF
|
||||
width: 4rpx
|
||||
height: 20rpx
|
||||
.maskFristEntry-Close::after
|
||||
position: absolute;
|
||||
left: calc( 50% - 2rpx)
|
||||
top: calc( 50% - 10rpx)
|
||||
transform: rotate(-45deg);
|
||||
content: ''
|
||||
background: #FFFFFF
|
||||
width: 4rpx
|
||||
height: 20rpx
|
||||
</style>
|
||||
|
@@ -3,7 +3,7 @@
|
||||
<tabcontrolVue :current="tabCurrent">
|
||||
<template v-slot:tab0>
|
||||
<view class="login-content">
|
||||
<image class="logo" src="../../static/logo.png"></image>
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="logo-title">就业</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
@@ -245,6 +245,18 @@ function getTreeselect() {
|
||||
|
||||
// 登录
|
||||
function loginTest() {
|
||||
// uni.share({
|
||||
// provider: 'weixin',
|
||||
// scene: 'WXSceneSession',
|
||||
// type: 2,
|
||||
// imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
|
||||
// success: function (res) {
|
||||
// console.log('success:' + JSON.stringify(res));
|
||||
// },
|
||||
// fail: function (err) {
|
||||
// console.log('fail:' + JSON.stringify(err));
|
||||
// },
|
||||
// });
|
||||
const params = {
|
||||
username: 'test',
|
||||
password: 'test',
|
||||
|
@@ -96,12 +96,16 @@
|
||||
></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<template #footer>
|
||||
<Tabbar :currentpage="4"></Tabbar>
|
||||
</template>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
const { $api, navTo } = inject('globalFunction');
|
||||
import useUserStore from '@/stores/useUserStore';
|
||||
@@ -153,6 +157,7 @@ function getUserstatistics() {
|
||||
padding: 36rpx 36rpx 64rpx 36rpx
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
position: relative
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
.top-title{
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
@@ -170,7 +175,7 @@ function getUserstatistics() {
|
||||
width: auto;
|
||||
max-width: 60%;
|
||||
white-space: nowrap
|
||||
overflow:hidden;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.top-btn{
|
||||
@@ -214,6 +219,7 @@ function getUserstatistics() {
|
||||
margin: 32rpx 16rpx 32rpx 10rpx
|
||||
}
|
||||
.left-text{
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
@@ -248,8 +254,9 @@ function getUserstatistics() {
|
||||
justify-content: center
|
||||
align-items: center
|
||||
.mini-num{
|
||||
font-family: DIN-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 44rpx;
|
||||
font-size: 46rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.mini-text{
|
||||
@@ -279,6 +286,7 @@ function getUserstatistics() {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.userinfo-ls-name
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
@@ -307,4 +315,4 @@ function getUserstatistics() {
|
||||
border-radius: 2rpx
|
||||
background: #A2A2A2;
|
||||
transform: rotate(45deg)
|
||||
</style>
|
||||
</style>
|
||||
|
@@ -27,6 +27,8 @@
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<Tabbar :currentpage="3"></Tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -34,6 +36,7 @@
|
||||
<script setup>
|
||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||
import ReadComponent from './read.vue';
|
||||
import UnreadComponent from './unread.vue';
|
||||
const loadedMap = reactive([false, false]);
|
||||
@@ -115,6 +118,7 @@ function changeSwiperMsgType(e) {
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-btnLf {
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<scroll-view scroll-y class="main-scroll">
|
||||
<view class="scrollmain">
|
||||
<view
|
||||
class="list-card btn-feel"
|
||||
class="list-card press-button"
|
||||
v-for="(item, index) in msgList"
|
||||
:key="index"
|
||||
@click="seeDetail(item, index)"
|
||||
@@ -133,6 +133,8 @@ defineExpose({ loadData });
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%
|
||||
text
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
.card-time
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<scroll-view scroll-y class="main-scroll">
|
||||
<view class="scrollmain">
|
||||
<view
|
||||
class="list-card btn-feel"
|
||||
class="list-card press-button"
|
||||
v-for="(item, index) in unreadMsgList"
|
||||
:key="index"
|
||||
@click="seeDetail(item)"
|
||||
@@ -119,6 +119,8 @@ defineExpose({ loadData });
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%
|
||||
text
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
.card-time
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
|
@@ -241,10 +241,12 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -294,6 +296,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
background: #F6F6F6;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
color: #256BFA;
|
||||
background: #E9F0FF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
@@ -330,6 +333,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
|
@@ -292,10 +292,12 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -398,6 +400,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
|
@@ -33,7 +33,14 @@
|
||||
donted: index === state.dont,
|
||||
}"
|
||||
></view>
|
||||
<view class="item-text">{{ item.stationName }}</view>
|
||||
<view
|
||||
class="item-text"
|
||||
:class="{
|
||||
textActive: index === state.dont,
|
||||
}"
|
||||
>
|
||||
{{ item.stationName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -185,7 +192,6 @@ function openFilter() {
|
||||
pageState.search[key] = value.join(',');
|
||||
}
|
||||
showFilter.value = false;
|
||||
console.log(pageState.search);
|
||||
getJobList('refresh');
|
||||
},
|
||||
cancel: () => {
|
||||
@@ -311,10 +317,12 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -408,44 +416,43 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-bottom: 20rpx;
|
||||
.donted::after
|
||||
.item-dont::before
|
||||
position: absolute;
|
||||
content: '';
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
top: -5rpx;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
line-height: 28rpx;
|
||||
background: blue !important;
|
||||
background: #F7B000;
|
||||
border-radius: 50%;
|
||||
.dontstart::after
|
||||
.item-dont::after
|
||||
position: absolute;
|
||||
content: '始';
|
||||
color: #FFFFFF;
|
||||
// content: '始';
|
||||
content: '';
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
top: -5rpx;
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
line-height: 28rpx;
|
||||
background: #666666;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
// .dontend::after
|
||||
// .donted::after
|
||||
// position: absolute;
|
||||
// content: '终';
|
||||
// color: #FFFFFF;
|
||||
// content: '';
|
||||
// font-size: 20rpx;
|
||||
// text-align: center;
|
||||
// left: 0;
|
||||
// top: -5rpx;
|
||||
// width: 27rpx;
|
||||
// height: 27rpx;
|
||||
// line-height: 28rpx;
|
||||
// background: #666666;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// transform: translate(-50%, -50%)
|
||||
// width: 14rpx;
|
||||
// height: 14rpx;
|
||||
// background: #F7B000 !important;
|
||||
// border-radius: 50%;
|
||||
.item-text
|
||||
position: absolute
|
||||
@@ -458,6 +465,8 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
text-align: center;
|
||||
white-space: nowrap
|
||||
transform: translate(-50% + 8rpx, 0)
|
||||
.textActive
|
||||
color: #F7B000
|
||||
.three-item:nth-child(2n)
|
||||
.item-text
|
||||
margin-top: -90rpx;
|
||||
@@ -468,7 +477,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
top: -17rpx;
|
||||
width: 100%;
|
||||
height: 17rpx;
|
||||
background: #FFCB47;
|
||||
background: #F7B000;
|
||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||
z-index: 1;
|
||||
.nearby-list
|
||||
@@ -503,6 +512,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
|
@@ -222,10 +222,12 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||
if (rows.length < pageState.pageSize) {
|
||||
loadmoreRef.value.change('noMore');
|
||||
} else {
|
||||
loadmoreRef.value.change('more');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -276,6 +278,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
background: #F6F6F6;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
color: #256BFA;
|
||||
background: #E9F0FF;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
@@ -311,6 +314,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
||||
margin-right: 32rpx;
|
||||
white-space: nowrap
|
||||
.active
|
||||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #000000;
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AppLayout title="附近" :use-scroll-view="false">
|
||||
<template #headerleft>
|
||||
<view class="btn">
|
||||
<view class="btnback">
|
||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||
</view>
|
||||
</template>
|
||||
@@ -83,12 +83,16 @@ function handleTabChange(index) {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.btnback{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
image {
|
||||
height: 100%;
|
||||
|
@@ -1,33 +1,70 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="top">
|
||||
<image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
|
||||
<view class="search-box">
|
||||
<uni-icons
|
||||
class="iconsearch"
|
||||
color="#666666"
|
||||
type="search"
|
||||
size="18"
|
||||
@confirm="searchCollection"
|
||||
></uni-icons>
|
||||
<input
|
||||
class="inputed"
|
||||
type="text"
|
||||
focus
|
||||
v-model="searchValue"
|
||||
placeholder="搜索职位名称"
|
||||
placeholder-class="placeholder"
|
||||
@confirm="searchBtn"
|
||||
/>
|
||||
<view>
|
||||
<view class="top">
|
||||
<image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
|
||||
<view class="search-box">
|
||||
<uni-icons
|
||||
class="iconsearch"
|
||||
color="#666666"
|
||||
type="search"
|
||||
size="18"
|
||||
@confirm="searchCollection"
|
||||
></uni-icons>
|
||||
<input
|
||||
class="inputed"
|
||||
type="text"
|
||||
focus
|
||||
v-model="searchValue"
|
||||
placeholder="搜索职位名称"
|
||||
placeholder-class="placeholder"
|
||||
@confirm="searchBtn"
|
||||
/>
|
||||
</view>
|
||||
<view class="search-btn button-click" @click="searchBtn">搜索</view>
|
||||
</view>
|
||||
<view class="view-top" v-show="listCom.length || list.length">
|
||||
<view class="top-item" @click="changeType(0)" :class="{ active: currentTab === 0 }">综合</view>
|
||||
<view class="top-item" @click="changeType(1)" :class="{ active: currentTab === 1 }">视频</view>
|
||||
</view>
|
||||
<view class="search-btn button-click" @click="searchBtn">搜索</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="Detailscroll-view" v-show="list.length" @scrolltolower="getJobList('add')">
|
||||
<view class="cards-box">
|
||||
<renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
||||
<scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
|
||||
<view class="cards-box" v-show="currentTab === 0">
|
||||
<renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
||||
</view>
|
||||
<view class="cards-box" style="padding-top: 24rpx" v-show="currentTab === 1">
|
||||
<custom-waterfalls-flow
|
||||
ref="waterfallsFlowRef"
|
||||
:column="columnCount"
|
||||
:columnSpace="columnSpace"
|
||||
@loaded="imageloaded"
|
||||
:value="list"
|
||||
>
|
||||
<template v-slot:default="job">
|
||||
<view class="slot-item">
|
||||
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||
<view class="cover-triangle"></view>
|
||||
</view>
|
||||
<view class="job-info" @click="nextDetail(job)">
|
||||
<view class="salary">
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||
</view>
|
||||
<view class="title">{{ job.jobTitle }}</view>
|
||||
<view class="desc">{{ job.companyName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
<loadmore ref="loadmoreRef"></loadmore>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="main-content" v-show="!list.length">
|
||||
<view class="main-content" v-show="!listCom.length">
|
||||
<view class="content-top">
|
||||
<view class="top-left">历史搜索</view>
|
||||
<view class="top-right button-click" @click="remove">
|
||||
@@ -44,16 +81,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { inject, ref, reactive, nextTick } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
|
||||
const { $api, navBack } = inject('globalFunction');
|
||||
const { $api, navBack, navTo } = inject('globalFunction');
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useColumnCount } from '@/hook/useColumnCount';
|
||||
import { usePagination } from '@/hook/usePagination';
|
||||
import img from '@/static/icon/filter.png';
|
||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||
const searchValue = ref('');
|
||||
const historyList = ref([]);
|
||||
const list = ref([]);
|
||||
const listCom = ref([]);
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
total: 0,
|
||||
@@ -63,6 +103,50 @@ const pageState = reactive({
|
||||
order: 0,
|
||||
},
|
||||
});
|
||||
const isLoaded = ref(false);
|
||||
const waterfallsFlowRef = ref(null);
|
||||
const loadmoreRef = ref(null);
|
||||
const currentTab = ref(0);
|
||||
// 响应式搜索条件(可以被修改)
|
||||
const searchParams = ref({});
|
||||
const pageSize = ref(10);
|
||||
|
||||
const { list, loading, refresh, loadMore } = usePagination(
|
||||
(params) => $api.createRequest('/app/job/littleVideo', params, 'GET', true),
|
||||
dataToImg, // 转换函数
|
||||
{
|
||||
pageSize: pageSize,
|
||||
search: searchParams,
|
||||
dataKey: 'data',
|
||||
autoWatchSearch: true,
|
||||
onBeforeRequest: () => {
|
||||
loadmoreRef.value?.change('loading');
|
||||
},
|
||||
onAfterRequest: () => {
|
||||
loadmoreRef.value?.change('more');
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
async function choosePosition(index) {
|
||||
if (currentTab.value === 0) {
|
||||
getJobList('add');
|
||||
} else {
|
||||
loadMore();
|
||||
}
|
||||
}
|
||||
|
||||
function imageloaded() {
|
||||
loadmoreRef.value?.change('more');
|
||||
}
|
||||
|
||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||
pageSize.value = 10 * (columnCount.value - 1);
|
||||
nextTick(() => {
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
useLocationStore().getLocation();
|
||||
});
|
||||
});
|
||||
|
||||
onLoad(() => {
|
||||
let arr = uni.getStorageSync('searchList');
|
||||
@@ -71,6 +155,20 @@ onLoad(() => {
|
||||
}
|
||||
});
|
||||
|
||||
function changeType(type) {
|
||||
if (currentTab.value === type) return;
|
||||
switch (type) {
|
||||
case 0:
|
||||
currentTab.value = 0;
|
||||
getJobList('refresh');
|
||||
break;
|
||||
case 1:
|
||||
currentTab.value = 1;
|
||||
refresh();
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
break;
|
||||
}
|
||||
}
|
||||
function searchFn(item) {
|
||||
searchValue.value = item;
|
||||
searchBtn();
|
||||
@@ -83,7 +181,15 @@ function searchBtn() {
|
||||
historyList.value.unshift(searchValue.value);
|
||||
historyList.value = unique(historyList.value);
|
||||
uni.setStorageSync('searchList', historyList.value);
|
||||
getJobList('refresh');
|
||||
searchParams.value = {
|
||||
jobTitle: searchValue,
|
||||
};
|
||||
if (currentTab.value === 0) {
|
||||
getJobList('refresh');
|
||||
} else {
|
||||
refresh();
|
||||
waterfallsFlowRef.value?.refresh?.();
|
||||
}
|
||||
}
|
||||
|
||||
function searchCollection(e) {
|
||||
@@ -112,12 +218,25 @@ function remove() {
|
||||
historyList.value = [];
|
||||
}
|
||||
|
||||
function nextDetail(job) {
|
||||
// 记录岗位类型,用作数据分析
|
||||
if (job.jobCategory) {
|
||||
const recordData = recommedIndexDb.JobParameter(job);
|
||||
recommedIndexDb.addRecord(recordData);
|
||||
}
|
||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||
}
|
||||
|
||||
function nextVideo(job) {
|
||||
uni.setStorageSync(`job-Info`, job);
|
||||
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||
}
|
||||
|
||||
function getJobList(type = 'add') {
|
||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||
pageState.page += 1;
|
||||
}
|
||||
if (type === 'refresh') {
|
||||
list.value = [];
|
||||
pageState.page = 1;
|
||||
pageState.maxPage = 2;
|
||||
}
|
||||
@@ -128,15 +247,15 @@ function getJobList(type = 'add') {
|
||||
jobTitle: searchValue.value,
|
||||
};
|
||||
|
||||
$api.createRequest('/app/job/list', params).then((resData) => {
|
||||
$api.createRequest('/app/job/list', params, 'GET', true).then((resData) => {
|
||||
const { rows, total } = resData;
|
||||
if (type === 'add') {
|
||||
const str = pageState.pageSize * (pageState.page - 1);
|
||||
const end = list.value.length;
|
||||
const end = listCom.value.length;
|
||||
const reslist = rows;
|
||||
list.value.splice(str, end, ...reslist);
|
||||
listCom.value.splice(str, end, ...reslist);
|
||||
} else {
|
||||
list.value = rows;
|
||||
listCom.value = rows;
|
||||
}
|
||||
pageState.total = resData.total;
|
||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||
@@ -147,6 +266,15 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dataToImg(data) {
|
||||
return data.map((item) => ({
|
||||
...item,
|
||||
// image: item.cover,
|
||||
image: img,
|
||||
hide: true,
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@@ -156,12 +284,35 @@ function getJobList(type = 'add') {
|
||||
.Detailscroll-view{
|
||||
flex: 1
|
||||
overflow: hidden
|
||||
|
||||
}
|
||||
.container{
|
||||
display: flex
|
||||
flex-direction: column
|
||||
background: #F4f4f4
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||
.view-top{
|
||||
display: flex;
|
||||
justify-content: space-around
|
||||
background: #FFFFFF;
|
||||
.top-item{
|
||||
padding: 6rpx 0 18rpx 0
|
||||
}
|
||||
.active{
|
||||
color: #256BFA;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
.active::after{
|
||||
position: absolute;
|
||||
content: ''
|
||||
left: calc(50% - 12rpx)
|
||||
bottom: 10rpx
|
||||
width: 24rpx
|
||||
height: 6rpx
|
||||
background: #256BFA
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
background: #FFFFFF
|
||||
height: 100%
|
||||
@@ -244,4 +395,67 @@ function getJobList(type = 'add') {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slot-item
|
||||
// background: #f4f4f4;
|
||||
background: #FFFFFF;
|
||||
.job-info{
|
||||
padding: 10rpx 24rpx 24rpx 24rpx
|
||||
}
|
||||
.job-image{
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
position: relative;
|
||||
.cover-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cover-triangle{
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx
|
||||
width: 36rpx
|
||||
height: 36rpx
|
||||
border-radius: 50%
|
||||
background: rgba(0,0,0,0.3)
|
||||
}
|
||||
.cover-triangle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-40%, -50%) rotate(90deg);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-bottom: 12rpx solid #fff;
|
||||
}
|
||||
}
|
||||
.salary
|
||||
color: #4C6EFB;
|
||||
font-size: 28rpx
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
justify-content: space-between
|
||||
.flame
|
||||
margin-top: 4rpx
|
||||
margin-right: 4rpx
|
||||
width: 24rpx
|
||||
height: 31rpx
|
||||
.title
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-top: 6rpx;
|
||||
white-space: pre-wrap
|
||||
.desc
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #6C7282;
|
||||
margin-top: 6rpx;
|
||||
</style>
|
||||
|
BIN
static/.DS_Store
vendored
BIN
static/font/.DS_Store
vendored
BIN
static/font/DingTalk JinBuTi_min.woff2
Normal file
BIN
static/gif/.DS_Store
vendored
Normal file
BIN
static/gif/logo.gif
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
static/icon/pintDate.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
static/icon/point3.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
static/icon/pointpeople.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
static/icon/share.png
Normal file
After Width: | Height: | Size: 350 B |
BIN
static/imgs/fristEntry.png
Normal file
After Width: | Height: | Size: 42 KiB |
36
static/share.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>找工作,用 AI 更高效|青岛市智能求职平台</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- 微信分享卡片标签(动态填充) -->
|
||||
<meta property="og:title" content="找工作,用 AI 更高效|青岛市智能求职平台" />
|
||||
<meta property="og:description" content="融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!" />
|
||||
<meta property="og:image" content="https://qd.zhaopinzao8dian.com/file/csn/qd_shareLogo.jpg" />
|
||||
<meta property="og:url" content="https://qd.zhaopinzao8dian.com" />
|
||||
<meta name="description" content="融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!">
|
||||
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search)
|
||||
const jobId = params.get('jobId')
|
||||
// document.querySelector('meta[property="og:url"]').setAttribute('content', location.href)
|
||||
|
||||
// 延迟跳转到 Vue 页面
|
||||
setTimeout(() => {
|
||||
if (jobId) {
|
||||
window.location.href = `/#/packageA/pages/post/post?jobId=${jobId}`
|
||||
} else {
|
||||
window.location.href = '/#/'
|
||||
}
|
||||
}, 300)
|
||||
// 测试使用 分享等形式打开
|
||||
// http://localhost:5173/app/static/share.html?jobId=MTE4MzQ4NTE4
|
||||
// http://localhost:5173/app/static/share.html?jobId=MTE4MzQ4NTE4&_t=1752221704007#/
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>正在加载中...</p>
|
||||
</body>
|
||||
</html>
|
1
static/svg/seemore.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753846081356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M256 384c38.272 0 72.576 16.768 96 43.392C332.16 449.92 320 479.552 320 512c0 32.448 12.096 62.08 32 84.608A128 128 0 1 1 256 384zM512 384c38.272 0 72.576 16.768 96 43.392C588.16 449.92 576 479.552 576 512c0 32.448 12.096 62.08 32 84.608A128 128 0 1 1 512 384z" fill="#256BFA" p-id="1009"></path><path d="M768 512m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z" fill="#256BFA" p-id="1010"></path></svg>
|
After Width: | Height: | Size: 736 B |
@@ -7,6 +7,8 @@ import {
|
||||
import {
|
||||
msg
|
||||
} from '@/common/globalFunction.js'
|
||||
import config from '../config';
|
||||
|
||||
const useLocationStore = defineStore("location", () => {
|
||||
// 定义状态
|
||||
const longitudeVal = ref(null) // 经度
|
||||
@@ -25,10 +27,17 @@ const useLocationStore = defineStore("location", () => {
|
||||
longitude: 120.382665,
|
||||
latitude: 36.066938
|
||||
}
|
||||
longitudeVal.value = resd.longitude
|
||||
latitudeVal.value = resd.latitude
|
||||
msg('用户位置获取成功')
|
||||
resole(resd)
|
||||
if (config.UsingSimulatedPositioning) { // 使用模拟定位
|
||||
longitudeVal.value = resd.longitude
|
||||
latitudeVal.value = resd.latitude
|
||||
msg('用户位置获取成功')
|
||||
resole(resd)
|
||||
} else {
|
||||
longitudeVal.value = res.longitude
|
||||
latitudeVal.value = res.latitude
|
||||
msg('用户位置获取成功')
|
||||
resole(res)
|
||||
}
|
||||
},
|
||||
fail: function(err) {
|
||||
// longitudeVal.value = ''
|
||||
|
@@ -15,6 +15,22 @@ import {
|
||||
// 控制消息
|
||||
export const useReadMsg = defineStore('readMsg', () => {
|
||||
const msgList = ref([])
|
||||
const badges = ref([{
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
count: 0
|
||||
},
|
||||
])
|
||||
|
||||
// 计算总未读数量,基于 notReadCount 字段
|
||||
const unreadCount = computed(() =>
|
||||
@@ -30,14 +46,22 @@ export const useReadMsg = defineStore('readMsg', () => {
|
||||
// 设置 TabBar 角标
|
||||
function updateTabBarBadge() {
|
||||
const count = unreadCount.value
|
||||
const index = 3
|
||||
const countVal = count > 99 ? '99+' : String(count)
|
||||
if (count === 0) {
|
||||
uni.removeTabBarBadge({
|
||||
index: 3
|
||||
index
|
||||
}) // 替换为你消息页面的 TabBar index
|
||||
badges.value[index] = {
|
||||
count: 0
|
||||
}
|
||||
} else {
|
||||
badges.value[index] = {
|
||||
count: countVal
|
||||
}
|
||||
uni.setTabBarBadge({
|
||||
index: 3,
|
||||
text: count > 99 ? '99+' : String(count)
|
||||
index,
|
||||
text: countVal
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -76,6 +100,7 @@ export const useReadMsg = defineStore('readMsg', () => {
|
||||
}
|
||||
|
||||
return {
|
||||
badges,
|
||||
msgList,
|
||||
unreadMsgList,
|
||||
unreadCount,
|
||||
|
@@ -10,7 +10,7 @@ import {
|
||||
msg
|
||||
} from '@/common/globalFunction.js'
|
||||
import baseDB from './BaseDBStore';
|
||||
|
||||
import config from '../config';
|
||||
|
||||
class JobRecommendation {
|
||||
constructor() {
|
||||
@@ -62,6 +62,30 @@ class JobRecommendation {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算加权用户行为偏好
|
||||
* @param {Object} data - 用户行为数据,包括 categories、experience、areas、salary 等
|
||||
* @param {Object} weights - 每一类行为的权重
|
||||
* @returns {Object} 加权合并后的结果(key 为行为项,value 为权重后的分值)
|
||||
*/
|
||||
function applyWeightsToUserData(data, weights) {
|
||||
const result = {}
|
||||
|
||||
for (const key in data) {
|
||||
if (key === 'salary') {
|
||||
result.salary = weights.salary
|
||||
} else if (typeof data[key] === 'object') {
|
||||
result[key] = {}
|
||||
for (const itemKey in data[key]) {
|
||||
const rawValue = data[key][itemKey]
|
||||
result[key][itemKey] = parseFloat((rawValue * weights[key]).toFixed(2))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// **🔹 创建推荐系统**
|
||||
export const jobRecommender = new JobRecommendation();
|
||||
|
||||
@@ -121,8 +145,9 @@ export const useRecommedIndexedDBStore = defineStore("indexedDB", () => {
|
||||
}
|
||||
|
||||
function analyzer(jobsData) {
|
||||
const result = jobAnalyzer.analyze(jobsData)
|
||||
const sort = jobAnalyzer.printUnifiedResults(result)
|
||||
const result = jobAnalyzer.analyze(jobsData) // 转换格式化
|
||||
const result2 = applyWeightsToUserData(result, config.weights) // 添加权重
|
||||
const sort = jobAnalyzer.printUnifiedResults(result2) // 转换格式化
|
||||
return {
|
||||
result,
|
||||
sort
|
||||
|
@@ -57,7 +57,7 @@ const useUserStore = defineStore("user", () => {
|
||||
hasLogin.value = true;
|
||||
userInfo.value = value;
|
||||
openId.value = value.wxOpenId;
|
||||
token.value = value.token
|
||||
token.value = value.token;
|
||||
uni.setStorage({
|
||||
key: 'token',
|
||||
data: value.token
|
||||
|
@@ -18,6 +18,9 @@ import {
|
||||
UUID
|
||||
} from '../lib/uuid-min';
|
||||
import config from '../config';
|
||||
import {
|
||||
clearJobMoreMap
|
||||
} from '@/utils/markdownParser';
|
||||
|
||||
const useChatGroupDBStore = defineStore("messageGroup", () => {
|
||||
const tableName = ref('messageGroup')
|
||||
@@ -57,6 +60,7 @@ const useChatGroupDBStore = defineStore("messageGroup", () => {
|
||||
if (!baseDB.isDBReady) await baseDB.initDB();
|
||||
chatSessionID.value = sessionId
|
||||
const list = await baseDB.db.queryByField(massageName.value, 'parentGroupId', sessionId);
|
||||
clearJobMoreMap() // 清空对话 加载更多参数
|
||||
if (list.length) {
|
||||
console.log('本地数据库存在该对话数据', list)
|
||||
messages.value = list
|
||||
|
BIN
unpackage/.DS_Store
vendored
BIN
unpackage/dist/.DS_Store
vendored
BIN
unpackage/dist/build/.DS_Store
vendored
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "ab0eb594",
|
||||
"configHash": "554cced5",
|
||||
"hash": "64b0126f",
|
||||
"configHash": "c3ada311",
|
||||
"lockfileHash": "5d26acb0",
|
||||
"browserHash": "86a09ddc",
|
||||
"browserHash": "6c46b053",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
@@ -4,6 +4,7 @@ import parseHtml from '@/lib/html-parser.js';
|
||||
// import DOMPurify from '@/lib/dompurify@3.2.4es.js';
|
||||
|
||||
export let codeDataList = []
|
||||
export let jobMoreMap = new Map()
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true, // 允许 HTML 标签
|
||||
@@ -16,23 +17,31 @@ const md = new MarkdownIt({
|
||||
highlight: function(str, lang) {
|
||||
if (lang === 'job-json') {
|
||||
const result = safeExtractJson(str);
|
||||
const jobId = result.appJobUrl.split('jobId=')[1]
|
||||
return `
|
||||
<a class="custom-card" data-job-id="${jobId}">
|
||||
<div class="card-title">
|
||||
<span class="title-text" >${result.jobTitle}</span>
|
||||
<div class="card-salary">${result.salary}</div>
|
||||
</div>
|
||||
<div class="card-company">${result.location}·${result.companyName}</div>
|
||||
<div class="card-info">
|
||||
<div class="info-item">
|
||||
<div class="card-tag">${result.education}</div>
|
||||
<div class="card-tag">${result.experience}</div>
|
||||
if (result) { // json解析成功
|
||||
const jobId = result.appJobUrl.split('jobId=')[1]
|
||||
let domContext = `
|
||||
<a class="custom-card" data-job-id="${jobId}">
|
||||
<div class="card-title">
|
||||
<span class="title-text" >${result.jobTitle}</span>
|
||||
<div class="card-salary">${result.salary}</div>
|
||||
</div>
|
||||
<div class="info-item">查看详情<div class="position-nav"></div></div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
<div class="card-company">${result.location}·${result.companyName}</div>
|
||||
<div class="card-info">
|
||||
<div class="info-item">
|
||||
<div class="card-tag">${result.education}</div>
|
||||
<div class="card-tag">${result.experience}</div>
|
||||
</div>
|
||||
<div class="info-item">查看详情<div class="position-nav"></div></div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
if (result.data) {
|
||||
jobMoreMap.set(jobId, result.data)
|
||||
domContext +=
|
||||
`<a class="custom-more" data-job-id="${jobId}">查看更多岗位<div class="more-icon"></div></a>`
|
||||
}
|
||||
return domContext
|
||||
}
|
||||
}
|
||||
// <div class="card-tag">${result.location}</div>
|
||||
// <div class="info-item">${result.salary}</div>
|
||||
@@ -68,18 +77,54 @@ const md = new MarkdownIt({
|
||||
}
|
||||
})
|
||||
|
||||
function extractFirstJson(text) {
|
||||
let stack = [];
|
||||
let startIndex = -1;
|
||||
let endIndex = -1;
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text[i];
|
||||
|
||||
if (char === '{') {
|
||||
if (stack.length === 0) startIndex = i; // 记录第一个 '{' 的位置
|
||||
stack.push(char);
|
||||
} else if (char === '}') {
|
||||
stack.pop();
|
||||
if (stack.length === 0) {
|
||||
endIndex = i; // 找到配对的 '}'
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (startIndex !== -1 && endIndex !== -1) {
|
||||
const jsonString = text.slice(startIndex, endIndex + 1);
|
||||
try {
|
||||
const jsonObject = JSON.parse(jsonString);
|
||||
return jsonObject;
|
||||
} catch (e) {
|
||||
return null; // 如果不是有效的 JSON
|
||||
}
|
||||
}
|
||||
|
||||
return null; // 如果没有找到有效的 JSON 对象
|
||||
}
|
||||
|
||||
|
||||
function safeExtractJson(text) {
|
||||
try {
|
||||
const match = text.match(/\{[\s\S]*?\}/); // 提取第一个完整的 JSON 块
|
||||
if (match) {
|
||||
return JSON.parse(match[0]);
|
||||
}
|
||||
const jsonObject = extractFirstJson(text);
|
||||
return jsonObject
|
||||
} catch (e) {
|
||||
console.error('JSON 解析失败:', e);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function clearJobMoreMap() { // 切换对话清空
|
||||
jobMoreMap.clear()
|
||||
}
|
||||
|
||||
export function parseMarkdown(content) {
|
||||
if (!content) {
|
||||
return //处理特殊情况,比如网络异常导致的响应的 content 的值为空
|
||||
|