sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 暂存

Browse Source
This commit is contained in:
史典卓
2025-05-13 11:10:38 +08:00
parent 582e432e6a
commit fd74b7d4df
109 changed files with 8644 additions and 5205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

10
App.vue
View File

@@ -42,6 +42,7 @@ onMounted(() => {
onShow(() => {
console.log('App Show');
});
onHide(() => {
console.log('App Hide');
});
@@ -52,8 +53,8 @@ onHide(() => {
@import '@/common/common.css';
/* 修改pages tabbar样式 H5有效 */
.uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
height: 78rpx !important;
width: 78rpx !important;
height: 39px !important;
width: 39px !important;
margin-top: -1rpx;
}
.uni-tabbar-border {
@@ -70,4 +71,9 @@ uni-modal,
.uni-mask {
z-index: 998;
}
@font-face {
font-family: DingTalk JinBuTi;
src: url('@/static/font/DingTalk JinBuTi_min.ttf');
}
</style>

40
common/IndexedDBHelper.js
View File

@@ -250,6 +250,46 @@ class IndexedDBHelper {
request.onerror = (event) => reject(`Delete Error: ${event.target.error}`);
});
}
/**
* 根据条件删除所有匹配的数据
* @param {string} storeName - 数据仓库名
* @param {function} conditionFn - 判断是否删除 (record) => boolean
* @returns {Promise}
*/
deleteByCondition(storeName, conditionFn) {
return new Promise((resolve, reject) => {
if (!this.db) {
reject('Database not initialized');
return;
}
const transaction = this.db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const request = store.openCursor();
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor && cursor.value) {
try {
// console.log(cursor.value)
const shouldDelete = conditionFn(cursor.value);
if (shouldDelete) {
cursor.delete();
}
} catch (err) {
console.error('Condition function error:', err);
}
cursor.continue();
} else {
resolve('All matching records deleted successfully');
}
};
request.onerror = (event) => {
reject(`Delete by condition failed: ${event.target.error}`);
};
});
}
/**
* 通过索引查询数据

100
common/common.css
View File

@@ -13,7 +13,6 @@ body,
page {
overscroll-behavior: none;
overflow: hidden;
height: 100%;
} */
image {
@@ -23,6 +22,8 @@ image {
.page-body {
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
/* width: 100%; */
/* height: 100%; */
}
body,
@@ -52,7 +53,77 @@ html {
}
.btn-light:active {
background-color: #2980b9;
background-color: rgba(189, 197, 254, 0.15);
}
.btn-incline {
transition: transform 0.2s ease;
transform-style: preserve-3d;
}
.btn-incline:active {
transform: perspective(600px) rotateY(6deg) rotateX(3deg);
}
.btn-feel {
transition: transform 0.2s ease;
transform-style: preserve-3d;
}
.btn-feel:active {
transform: perspective(600px) rotateX(6deg) scale(0.98);
}
/* 动画效果 */
.btn-shaky:active {
animation: shakeScale 0.6s;
}
@keyframes shakeScale {
0% {
transform: scale(1);
}
10% {
transform: scale(0.9) rotate(-3deg);
}
20% {
transform: scale(1.05) rotate(3deg);
}
30% {
transform: scale(0.95) rotate(-3deg);
}
40% {
transform: scale(1.02) rotate(3deg);
}
50% {
transform: scale(0.98) rotate(-2deg);
}
60% {
transform: scale(1.01) rotate(2deg);
}
70% {
transform: scale(0.99) rotate(-1deg);
}
80% {
transform: scale(1.005) rotate(1deg);
}
90% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/* 控制hover */
@@ -191,8 +262,8 @@ html {
color: #FB7307 !important;
}
.color_4873D9 {
color: #4873D9 !important;
.color_256BFA {
color: #256BFA !important;
}
.color_4E8ADE {
@@ -343,6 +414,14 @@ html {
flex: 1;
}
.fl_warp {
flex-wrap: wrap
}
.fl_nowarp {
flex-wrap: nowrap
}
.line_2 {
display: -webkit-box;
/* 让文本内容成为弹性盒 */
@@ -354,4 +433,17 @@ html {
/* 隐藏超出的文本 */
text-overflow: ellipsis;
/* 使用省略号 */
}
.line_1 {
display: -webkit-box;
/* 让文本内容成为弹性盒 */
-webkit-box-orient: vertical;
/* 设置盒子的方向为垂直 */
-webkit-line-clamp: 1;
/* 限制最多显示两行 */
overflow: hidden;
/* 隐藏超出的文本 */
text-overflow: ellipsis;
/* 使用省略号 */
}

97
common/globalFunction.js
View File

@@ -51,18 +51,77 @@ const prePage = () => {
/**
* 页面跳转封装，支持 query 参数传递和返回回调
* @param {string} url - 跳转路径
* @param {object} options
* @param {boolean} options.needLogin - 是否需要登录
* @param {object} options.query - 携带参数
* @param {function} options.onBack - 页面返回时的回调（目标页调用 uni.navigateBack 时传递数据）
*/
export const navTo = function(url, {
needLogin = false,
query = {},
onBack = null
} = {}) {
const userStore = useUserStore();
const navTo = function(url, needLogin) {
if (needLogin && useUserStore().hasLogin) {
if (needLogin && !userStore.hasLogin) {
uni.navigateTo({
url: '/pages/login/login'
});
return
return;
}
const queryStr = Object.entries(query)
.map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
.join('&');
const finalUrl = queryStr ? `${url}?${queryStr}` : url;
if (onBack) {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
currentPage.__onBackCallback__ = onBack;
}
uni.navigateTo({
url
url: finalUrl
});
}
};
export const navBack = function({
delta = 1,
data = null,
fallbackUrl = '/pages/index/index'
} = {}) {
const pages = getCurrentPages();
if (pages.length > 1) {
const prevPage = pages[pages.length - 1 - delta];
// 如果上一页存在回调函数，调用
if (data && prevPage?.__onBackCallback__) {
prevPage.__onBackCallback__(data);
}
uni.navigateBack({
delta
});
} else {
// 没有可返回的页面，直接跳转 fallback 页面
uni.reLaunch({
url: fallbackUrl
});
}
};
// // 默认返回上一页
// navBack();
// // 返回上两层
// navBack(2);
// // 没有历史页面时跳转首页
// navBack(1, '/pages/home/home');
function getdeviceInfo() {
const globalData = {
@@ -247,33 +306,33 @@ class CustomSystem {
const customSystem = new CustomSystem()
function setCheckedNodes(nodes, ids) {
// 处理每个第一层节点
const isClear = ids.length === 0;
nodes.forEach((firstLayer) => {
// 初始化或重置计数器
// 每次处理都先重置
firstLayer.checkednumber = 0;
// 递归处理子树
const traverse = (node) => {
// 设置当前节点选中状态
const shouldCheck = ids.includes(node.id);
if (shouldCheck) node.checked = true;
if (isClear) {
node.checked = false;
} else {
node.checked = ids.includes(node.id);
}
// 统计后代节点（排除首层自身）
if (node !== firstLayer && node.checked) {
firstLayer.checkednumber++;
}
// 递归子节点
if (node.children) {
node.children.forEach((child) => traverse(child));
if (node.children && node.children.length) {
node.children.forEach(child => traverse(child));
}
};
// 启动当前首层节点的遍历
traverse(firstLayer);
});
}
return nodes;
}
const formatTotal = (total) => {
if (total < 10) return total.toString(); // 直接返回小于 10 的数
@@ -496,6 +555,7 @@ export const $api = {
export default {
$api,
navTo,
navBack,
cloneDeep,
formatDate,
getdeviceInfo,
@@ -513,5 +573,6 @@ export default {
getWeeksOfMonth,
isFutureDate,
parseQueryParams,
appendScriptTagElement
appendScriptTagElement,
insertSortData
}

BIN
components/.DS_Store vendored
View File

Binary file not shown.

146
components/AppLayout/AppLayout.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<view class="app-custom-root">
<view
class="app-container"
:style="{ backgroundColor: backGorundColor, backgroundImage: showBgImage && `url(${img})` }"
>
<!-- 顶部头部区域 -->
<view
class="container-header"
:style="border ? { borderBottom: `2rpx solid ${borderColor}` } : { borderBottom: 'none' }"
>
<view class="header-btnLf">
<slot name="headerleft"></slot>
</view>
<view class="header-title">
<view>{{ title }}</view>
<view v-show="subTitle" class="subtitle-text">{{ subTitle }}</view>
</view>
<view class="header-btnRi">
<slot name="headerright"></slot>
</view>
</view>
<!-- 主体不可滚动 headContent -->
<view class="container-headContent">
<slot name="headContent"></slot>
</view>
<!-- 主体内容区域 -->
<view class="container-main">
<scroll-view v-if="useScrollView" scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<slot></slot>
</scroll-view>
<view class="main-scroll" v-else><slot></slot></view>
</view>
<!-- 底部 footer -->
<view class="container-footer">
<slot name="footer"></slot>
</view>
</view>
</view>
</template>
<script setup>
import img from '@/static/icon/background2.png';
const emit = defineEmits(['onScrollBottom']);
defineProps({
title: {
type: String,
default: '标题',
},
border: {
type: Boolean,
default: false,
},
borderColor: {
type: String,
default: '#F4F4F4',
},
subTitle: {
type: String,
default: '',
},
backGorundColor: {
type: String,
default: '#ffffff',
},
useScrollView: {
type: Boolean,
default: true,
},
showBgImage: {
type: Boolean,
default: true,
},
});
const handleScrollToLower = () => {
emit('onScrollBottom');
};
</script>
<style lang="scss" scoped>
.app-custom-root {
position: fixed;
z-index: 10;
width: 100vw;
height: calc(100% - var(--window-bottom));
overflow: hidden;
}
.app-container {
// background-image: url('@/static/icon/background2.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 728rpx;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.container-header {
min-height: calc(88rpx - 14rpx);
text-align: center;
line-height: calc(88rpx - 14rpx);
font-size: 32rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 7rpx 3rpx;
.header-title {
color: #000000;
font-weight: bold;
.subtitle-text {
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 45rpx;
margin-top: -16rpx;
margin-bottom: 6rpx;
}
}
.header-btnLf,
.header-btnRi {
display: flex;
justify-content: flex-start;
align-items: center;
width: calc(60rpx * 3);
}
.header-btnRi {
justify-content: flex-end;
}
}
}
.container-main {
flex: 1;
overflow: hidden;
}
.main-scroll {
width: 100%;
height: 100%;
}
</style>

67
components/bing-progress/bing-progress.css
View File

@@ -1,67 +0,0 @@
.bing-progress {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.bp-marea {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
position: absolute;
left: 0;
top: 0;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-around;
background-color: rgba(0,0,0,0);
z-index: 6;
}
.bp-mview,
.bp-handle {
position: absolute;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
text-align: center;
justify-content: center;
z-index: 5;
}
.bp-handle-text {
text-align: center;
z-index: 5;
}
.bp-bar_max {
position: absolute;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
margin: 0;
padding: 0;
z-index: 1;
overflow: hidden;
}
.bp-bar_active {
position: absolute;
z-index: 3;
}
.bp-bar_sub_active {
position: absolute;
z-index: 2;
}
.bp-value {
position: absolute;
text-align: center;
z-index: 4;
}
.bp-handle-widget {
position: absolute;
z-index: 99;
}

868
components/bing-progress/bing-progress.vue
View File

@@ -1,868 +0,0 @@
<template>
<view class="bing-progress" :style="{width:bpWidth,height:bpHeight,borderRadius:borderRadius,
backgroundColor:backgroundColor,flexDirection:direction!='vertical'?'row':'column'}">
<!-- 进度 -->
<!-- #ifdef APP-NVUE -->
<div class="bp-bar_max"
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft,borderRadius:barBorderRadius}">
<div class="bp-bar_sub_active"
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
<div class="bp-bar_active"
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></div>
</div>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view class="bp-bar_max"
:style="{width:barMaxWidth,height:barMaxHeight,backgroundColor:noActiveColor,borderRadius:barBorderRadius,
flexDirection:direction!='vertical'?'row':'column',left:barMaxLeft}">
<view class="bp-bar_sub_active"
:style="{width:barSubActiveWidth,height:barSubActiveHeight,backgroundColor:subActiveColor,
top:subActiveTop,bottom:subActiveBottom,left:subActiveLeft,right:subActiveRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
<view class="bp-bar_active"
:style="{width:barActiveWidth,height:barActiveHeight,backgroundColor:activeColor,
top:activeTop,bottom:activeBottom,left:activeLeft,right:activeRight,borderRadius:isActiveCircular?barBorderRadius:0}"></view>
</view>
<!-- #endif -->
<movable-area id="bp-marea" class="bp-marea" @touchmove.stop.prevent="touchmove" @touchstart.stop.prevent="touchstart" @touchcancel="touchend" @touchend="touchend"
:style="{width:mareaWidth,height:mareaHeight,left:mareaLeft}">
<!-- 拖柄 -->
<movable-view id="bp-mview" class="bp-mview" :direction="direction=='vertical'?'vertical':'horizontal'" :animation="false"
:disabled="true" :x="handleX" :y="handleY" friction="10" damping="100"
:style="{width:mhandleWidth,height:mhandleHeight,backgroundColor:handleColor,
borderRadius:handleBorderRadius,fontSize:infoFontSize,top:mhandleTop}">
<view id="bp-handle" class="bp-handle" :style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}">
<image class="bp-handle-img" :src="handleImgUrl" v-if="handleImgUrl"
:style="{fontSize:infoFontSize,width:mhandleWidth,height:mhandleHeight,borderRadius:handleBorderRadius}"></image>
<!-- 进度值 -->
<text class="bp-handle-text" v-if="handleImgUrl=='' && infoAlign=='handle' && showInfo"
:style="{fontSize:infoFontSize,color:infoColor,width:mhandleWidth,height:textHeight,borderRadius:'20px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
<!-- 挂件 -->
<!-- #ifndef APP-NVUE -->
<!-- 图片挂件 -->
<image v-if="widgetPos=='top' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius, bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
<image v-if="widgetPos=='right' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
<image v-if="widgetPos=='bottom' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
<image v-if="widgetPos=='left' && widgetUrl" class="bp-handle-widget" :src="widgetUrl" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}"></image>
<!-- 自定义元素挂件 -->
<view v-if="widgetPos=='top' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,bottom: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
<slot/>
</view>
<view v-if="widgetPos=='right' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,left: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
<slot/>
</view>
<view v-if="widgetPos=='bottom' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'column',borderRadius:mwidgetBorderRadius,top: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
<slot/>
</view>
<view v-if="widgetPos=='left' && widgetUrl==''" class="bp-handle-widget" :style="{flexDirection: 'row',borderRadius:mwidgetBorderRadius,right: moffset,width:mwidgetWidth,height:mwidgetHeight,opacity:widgetOpacity,transform: mwidgetAngle}">
<slot/>
</view>
<!-- #endif -->
</view>
</movable-view>
</movable-area>
<!-- 进度值 -->
<text class="bp-value" v-if="showValueState() || (infoAlign=='center'&&direction!='vertical' && showInfo)"
:style="{color:infoColor,fontSize:infoFontSize,left:valueLeft,width:valueWidth()+'px'}">{{ infoContent=='subValue'?msubValue:showValue }}{{ infoEndText }}</text>
</view>
</template>
<script>
/**
* 进度条，副进度条
*/
export default {
created() {
/**
* 获取系统屏幕信息，用于后续单位换算
*/
const systemInfo = uni.getSystemInfoSync()
this.px2rpx = 750 / systemInfo.screenWidth
this.screenWidth = systemInfo.screenWidth
this.screenHeight = systemInfo.screenHeight
},
mounted() {
// #ifndef APP-NVUE
/**
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
*/
this.updateRect()
// #endif
this.mmax = this.valueFormat(this.max,false)
this.percent = Math.abs((this.valueFormat(this.value) - this.min) / (this.mmax - this.min))
this.subPercent = Math.abs((this.valueFormat(this.subValue,true) - this.min) / (this.mmax - this.min))
if(this.reverse) {
if(this.direction!='vertical') {
this.handleX = (1 - this.percent) * this.barMaxLength
}
else {
this.handleY = this.percent * this.barMaxLength
}
}
else {
if(this.direction!='vertical') {
this.handleX = this.percent * this.barMaxLength
}
else {
this.handleY = (1 - this.percent) * this.barMaxLength
}
}
if(this.bpname=='test') {
console.log(this.mainInfo)
}
},
/**
* sub表示副进度条属性
*/
props: {
// 组件名字
bpname: {
type: String,
default: ''
},
width: {
type: String,
default: '300px'
},
strokeWidth: {
type: String,
default: '30px'
},
backgroundColor: {
type: String,
default: 'rgba(0,0,0,0)'
},
noActiveColor: {
type: String,
default: "#00ffff"
},
activeColor: {
type: String,
default: "#0000ff"
},
subActiveColor: {
type: String,
default: "#ffaaaa"
},
handleColor: {
type: String,
default: "#ffff00"
},
infoColor: {
type: String,
default: "#000000"
},
// 整个进度条的外边界圆角半径
borderRadius: {
type: String,
default: '5px'
},
// 进度条内部滑轨圆角半径
barBorderRadius: {
type: String,
default: '5px'
},
// active and subActive 是否显示圆角 NVUE默认true，其他默认false
// #ifdef APP-NVUE
isActiveCircular: {
type: Boolean,
default: true
},
// #endif
// #ifndef APP-NVUE
isActiveCircular: {
type: Boolean,
default: false
},
// #endif
handleWidth: {
type: String,
default: '50px'
},
handleHeight: {
type: String,
default: '40px'
},
handleBorderRadius: {
type: String,
default: '5px'
},
handleImgUrl: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
direction: {
type: String,
default: 'horizontal'
},
infoEndText: {
type: String,
default: ""
},
infoFontSize: {
type: String,
default: '18px'
},
showInfo: {
type: Boolean,
default: true
},
// 进度值显示value还是subValue
infoContent: {
type: String,
default: 'value'
},
// 进度值显示位置 left, right, center, handle
infoAlign: {
type: String,
default: 'right'
},
max: {
type: Number,
default: 100
},
min: {
type: Number,
default: 0
},
value: {
type: Number,
default: 0
},
subValue: {
type: Number,
default: 0
},
step: {
type: Number,
default: 1
},
// 副进度条步长
subStep: {
type: Number,
default: 1
},
// true连续滑动，false步进，即以step的间隔变化
continuous: {
type: Boolean,
default: true
},
// 副进度条continuous
subContinuous: {
type: Boolean,
default: true
},
reverse: {
type: Boolean,
default: false
},
// 挂件位置 top, right, bottom, left
widgetPos: {
type: String,
default: "top"
},
widgetHeight: {
type: [String,Number],
default: '40px'
},
widgetWidth: {
type: [String,Number],
default: '50px'
},
widgetBorderRadius: {
type: [String,Number],
default: '5px'
},
// 挂件不透明度 0完全透明 1不透明
widgetOpacity: {
type: [String,Number],
default: 1
},
// 挂件距离组件的偏移量，正数原理组件，负数靠近组件
widgetOffset: {
type: [String,Number],
default: '0px'
},
// 挂件图片
widgetUrl: {
type: String,
default: ''
},
// 挂件旋转角度
widgetAngle: {
type: [String,Number],
default: 0
}
},
data() {
return {
handleX: 50,
handleY: 0,
px2rpx: 1,
percent: 0, // 0-1
subPercent: 0, // 0-1
mainInfo: {
left: 0,
top: 0,
bottom: 0,
right: 0
},
touchState: false,
screenHeight: 0,
screenWidth: 0,
msubValue: 0,
moveable: true,
lastTouchTime: 0,
mmax: 100
}
},
watch: {
/**
* @param {Object} newValue
* @param {Object} oldValue
*/
value(newValue, oldValue) {
if(!this.touchState) {
newValue = this.valueSetBoundary(newValue)
this.percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
}
},
showValue(newValue, oldValue) {
// 步进
if(!this.continuous) {
let percent
if(this.reverse) {
if(this.direction!='vertical') {
percent = Math.abs(1 - (newValue - this.min) / (this.mmax - this.min))
this.handleX = percent * this.barMaxLength
}
else {
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
this.handleY = percent * this.barMaxLength
}
}
else {
if(this.direction!='vertical') {
percent = Math.abs((newValue - this.min) / (this.mmax - this.min))
this.handleX = percent * this.barMaxLength
}
else {
percent = (1 - Math.abs((newValue - this.min) / (this.mmax - this.min)))
this.handleY = percent * this.barMaxLength
}
}
}
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
this.$emit("valuechange", {bpname: this.bpname,type: 'valuechange',value:this.showValue,subValue:this.msubValue})
},
percent(newValue, oldValue) {
// 连续
if(this.continuous) {
if(this.reverse) {
if(this.direction!='vertical') {
this.handleX = (1 - newValue) * this.barMaxLength
}
else {
this.handleY = newValue * this.barMaxLength
}
}
else {
if(this.direction!='vertical') {
this.handleX = newValue * this.barMaxLength
}
else {
this.handleY = (1 - newValue) * this.barMaxLength
}
}
}
},
subValue(newValue, oldValue) {
newValue = this.valueSetBoundary(newValue)
if(this.subContinuous) {
this.msubValue = newValue
}
else {
this.msubValue = this.valueFormat(newValue, true)
}
this.subPercent = Math.abs((newValue - this.min) / (this.mmax - this.min))
this.$emit("change", {bpname: this.bpname,type: 'change',value:this.showValue,subValue:this.msubValue})
this.$emit("subvaluechange", {bpname: this.bpname,type: 'subvaluechange',value:this.showValue,subValue:this.msubValue})
},
max(newValue,oldValue) {
this.mmax = this.valueFormat(newValue,false)
}
},
computed: {
bpWidth() {
if(this.direction=="vertical") {
return this.maxHeight()[2]
}
return this.sizeDeal(this.width)[2]
},
bpHeight() {
if(this.direction=="vertical") {
return this.sizeDeal(this.width)[2]
}
return this.maxHeight()[2]
},
mareaWidth() {
if(this.direction=="vertical") {
return this.maxHeight()[2]
}
let width = this.sizeDeal(this.width)[0]
return (width - this.textWidth()) + 'px'
},
mareaHeight() {
if(this.direction=="vertical") {
let width = this.sizeDeal(this.width)[0]
return (width - this.textWidth()) + 'px'
}
return this.maxHeight()[2]
},
mareaLeft() {
if(this.showValueState()) {
if(this.infoAlign == 'left') {
return this.textWidth() + 'px'
}
}
return 0
},
barMaxHeight() {
if(this.direction=="vertical") {
let width = this.sizeDeal(this.width)[0]
let handleWidth = this.sizeDeal(this.handleWidth)
return (width - this.textWidth() - handleWidth[0]) + 'px'
}
return this.sizeDeal(this.strokeWidth)[2]
},
barMaxWidth() {
if(this.direction=="vertical") {
return this.sizeDeal(this.strokeWidth)[2]
}
let width = this.sizeDeal(this.width)[0]
let handleWidth = this.sizeDeal(this.handleWidth)
return (width - this.textWidth() - handleWidth[0]) + 'px'
},
barMaxLeft() {
if(this.showValueState()) {
if(this.infoAlign == 'left') {
return this.textWidth() + this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
}
}
if(this.direction != 'vertical') {
return this.sizeDeal(this.handleWidth)[0] / 2 + 'px'
}
// vertical
return (this.maxHeight()[0] - this.sizeDeal(this.strokeWidth)[0]) / 2 + 'px'
},
activeRight() {
if(this.reverse) {
return 0
}
return 'unset'
},
activeLeft() {
if(this.reverse) {
return 'unset'
}
return 0
},
activeTop() {
if(this.reverse) {
return 0
}
return 'unset'
},
activeBottom() {
if(this.reverse) {
return 'unset'
}
return 0
},
barActiveWidth() {
if(this.direction=="vertical") {
return this.sizeDeal(this.strokeWidth)[2]
}
let percent
if(this.continuous) {
percent = this.percent
}
else {
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
}
return this.barMaxLength * percent + 'px'
},
barActiveHeight() {
if(this.direction=="vertical") {
let percent
if(this.continuous) {
percent = this.percent
}
else {
percent = Math.abs((this.showValue - this.min) / (this.mmax - this.min))
}
return this.barMaxLength * percent + 'px'
}
return this.sizeDeal(this.strokeWidth)[2]
},
subActiveTop() {
if(this.reverse) {
return 0
}
return 'unset'
},
subActiveBottom() {
if(this.reverse) {
return 'unset'
}
return 0
},
subActiveRight() {
if(this.reverse) {
return 0
}
return 'unset'
},
subActiveLeft() {
if(this.reverse) {
return 'unset'
}
return 0
},
barSubActiveWidth() {
if(this.direction == "vertical") {
return this.sizeDeal(this.strokeWidth)[2]
}
if(this.subContinuous) {
return this.barMaxLength * this.subPercent + 'px'
}
else {
return this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
}
},
barSubActiveHeight() {
if(this.direction == "vertical") {
if(this.subContinuous) {
return this.barMaxLength * this.subPercent + 'px'
}
else {
this.barMaxLength * Math.abs((this.msubValue - this.min) / (this.mmax - this.min)) + 'px'
}
}
return this.sizeDeal(this.strokeWidth)[2]
},
mhandleWidth() {
if(this.direction == "vertical") {
return this.sizeDeal(this.handleHeight)[2]
}
return this.sizeDeal(this.handleWidth)[2]
},
mhandleHeight() {
if(this.direction == "vertical") {
return this.sizeDeal(this.handleWidth)[2]
}
return this.sizeDeal(this.handleHeight)[2]
},
mhandleTop() {
if(this.direction == 'vertical') {
return 0
}
else {
// 拖柄垂直居中
let handle = this.sizeDeal(this.handleHeight)[0]
let top = this.maxHeight()[0] / 2 - handle / 2 + 'px'
return top
}
},
showValue() {
return this.valueFormat(this.percent * (this.mmax - this.min) + this.min)
},
textHeight() {
let infoSize = this.sizeDeal(this.infoFontSize)
return infoSize[0]*1.2 + infoSize[1]
},
valueLeft() {
if(this.infoAlign=='left') {
return 0
}
else if(this.infoAlign == 'center') {
let width = this.sizeDeal(this.width)
return width[0]/2 - this.valueWidth()/2 + 'px'
}
else if(this.infoAlign=='right'){
let width = this.sizeDeal(this.width)
return width[0] - this.textWidth() + 'px'
}
return 0
},
barMaxLength() {
let width = this.sizeDeal(this.width)[0]
let handleWidth = this.sizeDeal(this.handleWidth)
return width - this.textWidth() - handleWidth[0]
},
mwidgetWidth() {
return this.sizeDeal(this.widgetWidth)[2];
},
mwidgetHeight() {
return this.sizeDeal(this.widgetHeight)[2];
},
moffset() {
let off = this.sizeDeal(this.widgetOffset);
// console.log(off)
switch(this.widgetPos) {
case 'top':
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
case 'right':
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
case 'bottom':
return this.sizeDeal(this.mhandleHeight)[0] + off[0] + 'px'
case 'left':
return this.sizeDeal(this.mhandleWidth)[0] + off[0] + 'px'
}
return 0
},
mwidgetBorderRadius() {
return this.sizeDeal(this.widgetBorderRadius)[2];
},
mwidgetAngle() {
return "rotate("+Number(this.widgetAngle)+"deg)"
}
},
methods: {
prevent(e) {
console.log(1)
},
updateRect() {
// #ifndef APP-NVUE
/**
* 非NVUE movable-area 滑动事件获取到的位置是相对于文档的，获取组件位置，用于计算滑块位置
*/
let query = uni.createSelectorQuery().in(this)
query.select('.bing-progress').boundingClientRect(data => {
this.mainInfo.top = data.top
this.mainInfo.left = data.left
this.mainInfo.bottom = data.bottom
this.mainInfo.right = data.right
}).exec()
// #endif
},
touchstart(e) {
if(!this.disabled) {
// #ifdef APP-NVUE
e.stopPropagation()
e.target.attr.preventGesture = true
if(this.direction == 'vertical' && e.target.attr.id != 'bp-mview' && (e.timestamp - this.lastTouchTime > 100)) {
this.moveable = false
}
this.lastTouchTime = e.timestamp
// #endif
// #ifndef APP-NVUE
/**
* 防止组件在文档流中的位置被修改，导致组件进度值异常
*/
this.updateRect()
// #endif
// 阻止组件信息异常情况下的进度值修改
if(this.mainInfo.top > this.screenHeight) {
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
return
}
this.touchState = true
let detail = e.changedTouches[0]
this.handleMove(detail)
this.$emit("dragstart", {bpname: this.bpname,type: 'dragstart',value:this.showValue,subValue:this.msubValue})
}
},
touchmove(e) {
if(!this.disabled) {
let detail = e.changedTouches[0]
this.handleMove(detail)
this.$emit("dragging", {bpname: this.bpname,type: 'dragging',value:this.showValue,subValue:this.msubValue})
}
},
touchend(e) {
if(!this.disabled) {
// #ifdef APP-NVUE
if(!this.moveable) {
this.moveable = true
return
}
// #endif
let detail = e.changedTouches[0]
this.handleMove(detail)
this.touchState = false
this.$emit("dragend", {bpname: this.bpname,type: 'dragend',value:this.showValue,subValue:this.msubValue})
}
},
handleMove(detail) {
let width = this.sizeDeal(this.width)[0]
let handleWidth = this.sizeDeal(this.handleWidth)
let percent
if(this.direction!='vertical') {
if(this.infoAlign=='left') {
// #ifndef APP-NVUE
percent = (detail.pageX - this.mainInfo.left - this.textWidth() - handleWidth[0]/2)/ this.barMaxLength
// #endif
// #ifdef APP-NVUE
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
// #endif
}
else {
// #ifndef APP-NVUE
percent = (detail.pageX - this.mainInfo.left - handleWidth[0]/2)/ this.barMaxLength
// #endif
// #ifdef APP-NVUE
percent = (detail.pageX - handleWidth[0]/2)/ this.barMaxLength
// #endif
}
}
else {
// #ifdef APP-NVUE
percent = 1 - (detail.pageY - handleWidth[0]/2- 1) / this.barMaxLength
// #endif
// #ifndef APP-NVUE
percent = 1 - (detail.clientY - this.mainInfo.top - handleWidth[0]/2)/ this.barMaxLength
// #endif
}
percent = percent > 0 ? percent : 0
percent = percent < 1 ? percent : 1
if(this.reverse) {
this.percent = 1 - percent
}
else {
this.percent = percent
}
},
showValueState() {
if(this.direction != 'vertical' && this.showInfo && (this.infoAlign=='left' || this.infoAlign=='right')) {
return true
}
return false
},
valueSetBoundary(value) {
// 控制value在合法范围内
if(this.mmax > this.min) {
value = value < this.mmax ? value : this.mmax
value = value > this.min ? value : this.min
}
else {
value = value > this.mmax ? value : this.mmax
value = value < this.min ? value : this.min
}
return value
},
/**
* @param {Object} v
* @param {Object} isSub 是否是副副进度条
*/
valueFormat (v,isSub){
// set step
v = this.valueSetBoundary(v)
let stepInfo = this.stepInfo(isSub)
v = Number(v - this.min).toFixed(stepInfo[1])
let step = stepInfo[0] * 10 ** stepInfo[1]
let valueE = v * 10 ** stepInfo[1]
let remainder = valueE % step
let remainderInt = Math.floor(remainder)
// 对余数四舍五入0-1
let sub = Math.round(remainder / step)
let value = (Math.floor(valueE) - remainderInt + sub*step) / (10 ** stepInfo[1])
value = Number((value + this.min).toFixed(stepInfo[1]))
return value
},
/**
* @param {Object} v
* @param {Object} isSub 是否是副副进度条
*/
stepInfo(isSub) {
// return step, decimal位数
let step
if(isSub) {
step = Number(this.subStep)
}
else {
step = Number(this.step)
}
if (step <= 0 || !step){
return [1, 0]
}
else{
let steps = step.toString().split('.')
if (steps.length == 1){
return [step,0]
}
else {
return [step,steps[1].length]
}
}
},
textWidth() {
if(this.showValueState()) {
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
return Number(textWidth.toFixed(2))
}
return 0
},
valueWidth() {
let numWidth = this.mmax.toString().length> this.min.toString().length? this.mmax.toString().length: this.min.toString().length
let textWidth = ((numWidth + this.stepInfo()[1]) * 0.7 + this.infoEndText.length) * this.sizeDeal(this.infoFontSize)[0]
return Number(textWidth.toFixed(2))
},
maxHeight() {
let h = []
if (this.direction!='vertical'){ // direction 为 vertical 时不显示info
let subt = this.infoEndText.match(/[^\x00-\xff]/g)
if (subt){
h.push(this.sizeDeal(this.infoFontSize)[0] * 1.1)
}
else{
h.push(this.sizeDeal(this.infoFontSize)[0])
}
}
h.push(this.sizeDeal(this.strokeWidth)[0])
h.push(this.sizeDeal(this.handleHeight)[0])
h.sort(function(a, b) {
return b - a
}) // 降序
return [h[0], 'px', h[0] + 'px']
},
sizeDeal(size) {
// 分离字体大小和单位,rpx 转 px
let s = Number.isNaN(parseFloat(size)) ? 0 : parseFloat(size)
let u = size.toString().replace(/[0-9\.]/g, '')
if (u == 'rpx') {
s /= this.px2rpx
u = 'px'
}else if (u == 'vw') {
u = 'px'
s = s / 100 * this.screenWidth
} else if(u == 'vh') {
u = 'px'
s = s / 100 * this.screenHeight
} else{
u = 'px'
}
return [s, u, s + u]
},
}
}
</script>
<style scoped>
@import "bing-progress.css"
</style>

19
components/convert-distance/convert-distance.vue
View File

@@ -1,15 +1,17 @@
<template>
<span style="padding-left: 16rpx">{{ tofixedAndKmM(distance) }}</span>
<span style="padding-left: 16rpx">{{ distance }}</span>
</template>
<script setup>
import { inject } from 'vue';
import { inject, computed, watch } from 'vue';
const { haversine, getDistanceFromLatLonInKm } = inject('globalFunction');
const { alat, along, blat, blong } = defineProps(['alat', 'along', 'blat', 'blong']);
const distance = getDistanceFromLatLonInKm(alat, along, blat, blong);
function tofixedAndKmM(data) {
const { km, m } = data;
if (!alat && !along) {
const props = defineProps(['alat', 'along', 'blat', 'blong']);
const distance = computed(() => {
const distance2 = getDistanceFromLatLonInKm(props.alat, props.along, props.blat, props.blong);
// console.log(distance2, props.alat, props.along, props.blat, props.blong);
const { km, m } = distance2;
if (!props.alat && !props.along) {
return '--km';
}
if (km > 1) {
@@ -17,7 +19,8 @@ function tofixedAndKmM(data) {
} else {
return m.toFixed(2) + 'm';
}
}
return '';
});
</script>
<style></style>

134
components/custom-popup/custom-popup.vue
View File

@@ -1,134 +0,0 @@
<template>
<view
v-if="visible"
class="tianditu-popop"
:style="{ height: winHeight + 'px', width: winWidth + 'px', top: winTop + 'px' }"
>
<view v-if="header" class="popup-header" @click="close">
<slot name="header"></slot>
</view>
<view :style="{ minHeight: contentHeight + 'vh' }" class="popup-content fadeInUp animated">
<slot></slot>
</view>
</view>
</template>
<script>
export default {
name: 'custom-popup',
data() {
return {
winWidth: 0,
winHeight: 0,
winTop: 0,
contentHeight: 30,
};
},
props: {
visible: {
type: Boolean,
require: true,
default: false,
},
hide: {
type: Number,
default: 0,
},
header: {
type: Boolean,
default: true,
},
contentH: {
type: Number,
default: 30,
},
},
created() {
var that = this;
if (this.contentH) {
this.contentHeight = this.contentH;
}
uni.getSystemInfo({
success: function (res) {
if (that.hide === 0) {
that.winWidth = res.screenWidth;
that.winHeight = res.screenHeight;
that.winTop = 0;
} else {
that.winWidth = res.windowWidth;
that.winHeight = res.windowHeight;
that.winTop = res.windowTop;
}
},
});
},
methods: {
close(e) {
this.$emit('onClose');
},
},
};
</script>
<style scoped>
.tianditu-popop {
position: fixed;
left: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
}
.popup-header {
flex: 1;
}
.popup-content {
background-color: #ffffff;
min-height: 300px;
width: 100%;
/* position: absolute;
bottom: 0;
left: 0; */
}
/*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;
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
</style>

84
components/empty/empty.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
<view class="content_top btn-shaky">
<image v-if="pictrue" :src="pictrue" mode=""></image>
<image v-else src="@/static/icon/empty.png" mode=""></image>
</view>
<view class="content_c">{{ content }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
content: {
type: String,
required: false,
default: '暂时没有结果，下一秒也许就有惊喜',
},
bgcolor: {
type: String,
required: false,
default: 'transparent',
},
pdTop: {
type: String,
required: false,
default: '80',
},
mrTop: {
type: String,
required: false,
default: '20',
},
pictrue: {
type: String,
required: false,
default: '',
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
image {
width: 100%;
height: 100%;
}
.empty {
width: 100%;
min-height: 100vh;
position: relative;
.ty_content {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.content_top {
width: 450rpx;
height: 322rpx;
}
.content_c {
margin-top: 32rpx;
color: #6a707c;
font-size: 28rpx;
width: 512rpx;
height: 44rpx;
font-weight: 400;
font-size: 32rpx;
color: #000000;
text-align: center;
}
}
}
</style>

100
components/expected-station/expected-station.vue
View File

@@ -14,12 +14,18 @@
@click="changeStationLog(item)"
>
{{ item.label }}
<view class="positionNum" v-show="item.checkednumber">
<!-- <view class="positionNum" v-show="item.checkednumber">
{{ item.checkednumber }}
</view>
</view> -->
</view>
</scroll-view>
<scroll-view :show-scrollbar="false" :scroll-y="true" class="sex-content-right">
<scroll-view
:show-scrollbar="false"
:scroll-top="scrollTop"
@scroll="scrollTopBack"
:scroll-y="true"
class="sex-content-right"
>
<view v-for="item in rightValue" :key="item.id">
<view class="secondary-title">{{ item.label }}</view>
<view class="grid-sex">
@@ -50,6 +56,7 @@ export default {
rightValue: [],
stationCateLog: 0,
copyTree: [],
scrollTop: 0,
};
},
props: {
@@ -86,9 +93,14 @@ export default {
changeStationLog(item) {
this.leftValue = item;
this.rightValue = item.children;
this.scrollTop = 0;
},
scrollTopBack(e) {
this.scrollTop = e.detail.scrollTop;
},
addItem(item) {
let titiles = [];
let labels = [];
let count = 0;
// 先统计已选中的职位数量
@@ -121,13 +133,18 @@ export default {
// 统计被选中的第三层节点
if (thirdLayer.checked) {
titiles.push(`${thirdLayer.id}`);
labels.push(`${thirdLayer.label}`);
firstLayer.checkednumber++; // 累加计数器
}
}
}
}
titiles = titiles.join(',');
this.$emit('onChange', titiles);
labels = labels.join(',');
this.$emit('onChange', {
ids: titiles,
labels,
});
},
},
};
@@ -135,7 +152,8 @@ export default {
<style lang="stylus" scoped>
.secondary-title{
font-weight: bold;
color: #333333
font-size: 28rpx
padding: 40rpx 0 10rpx 30rpx;
}
.expected-station{
@@ -143,6 +161,7 @@ export default {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%
}
.sex-search
width: calc(100% - 28rpx - 28rpx);
@@ -160,15 +179,16 @@ export default {
padding: 10rpx 0 10rpx 58rpx;
.sex-content
background: #FFFFFF;
border-radius: 20rpx;
// border-radius: 20rpx;
width: 100%;
margin-top: 20rpx;
display: flex;
border-bottom: 2px solid #D9D9D9;
overflow: hidden;
height: 100%
height: 100%;
.sex-content-left
width: 250rpx;
width: 198rpx;
padding: 20rpx 0 0 0;
.left-list-btn
padding: 0 40rpx 0 24rpx;
display: grid;
@@ -178,49 +198,57 @@ export default {
color: #606060;
font-size: 28rpx;
position: relative
.positionNum
position: absolute
right: 0
top: 50%;
transform: translate(0, -50%)
color: #FFFFFF
background: #4778EC
border-radius: 50%
width: 36rpx;
height: 36rpx;
margin-top: 60rpx
.left-list-btn:first-child
margin-top: 0
// .positionNum
// position: absolute
// right: 0
// top: 50%;
// transform: translate(0, -50%)
// color: #FFFFFF
// background: #4778EC
// border-radius: 50%
// width: 36rpx;
// height: 36rpx;
.left-list-btned
color: #4778EC;
position: relative;
.left-list-btned::after
position: absolute;
left: 20rpx;
content: '';
width: 7rpx;
height: 38rpx;
background: #4778EC;
border-radius: 0rpx 0rpx 0rpx 0rpx;
// .left-list-btned::after
// position: absolute;
// left: 20rpx;
// content: '';
// width: 7rpx;
// height: 38rpx;
// background: #4778EC;
// border-radius: 0rpx 0rpx 0rpx 0rpx;
.sex-content-right
border-left: 2px solid #D9D9D9;
// border-left: 2px solid #D9D9D9;
background: #F6F6F6;
flex: 1;
.grid-sex
display: grid;
grid-template-columns: 50% 50%;
place-items: center;
padding: 0 0 40rpx 0;
padding: 0 20rpx 40rpx 20rpx;
.sex-right-btn
width: 211rpx;
height: 84rpx;
font-size: 32rpx;
width: 228rpx;
height: 80rpx;
font-size: 28rpx;
line-height: 41rpx;
text-align: center;
display: grid;
place-items: center;
background: #D9D9D9;
border-radius: 20rpx;
margin-top:30rpx;
border-radius: 12rpx;
margin-top: 30rpx;
background: #E8EAEE;
color: #606060;
.sex-right-btned
color: #FFFFFF;
background: #4778EC;
font-weight: 500
width: 224rpx;
height: 76rpx;
background: rgba(37,107,250,0.06);
border: 2rpx solid #256BFA;
color: #256BFA
</style>

27
components/latestHotestStatus/latestHotestStatus.vue
View File

@@ -1,27 +0,0 @@
<template>
<view>
<picker range-key="text" @change="changeLatestHotestStatus" :value="rangeVal" :range="rangeOptions">
<view class="uni-input">{{ rangeOptions[rangeVal].text }}</view>
</picker>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, getCurrentInstance } from 'vue';
const rangeVal = ref(0);
const emit = defineEmits(['confirm', 'close']);
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
]);
function changeLatestHotestStatus(e) {
const id = e.detail.value;
rangeVal.value = id;
const obj = rangeOptions.value.filter((item) => item.value === id)[0];
emit('confirm', obj);
}
</script>
<style lang="stylus"></style>

1
components/matchingDegree/matchingDegree.vue
View File

@@ -3,6 +3,7 @@
</template>
<script setup>
// 匹配度
import { inject, computed } from 'vue';
const { job } = defineProps(['job']);
const { similarityJobs, throttle } = inject('globalFunction');

323
components/modifyExpectedPosition/modifyExpectedPosition.vue
View File

@@ -1,323 +0,0 @@
<template>
<view v-if="show" class="popup-container">
<view class="popup-content">
<!-- 标题 -->
<view class="title">岗位推荐</view>
<!-- 圆环 -->
<view class="circle-content" :style="{ height: contentHeight * 2 + 'rpx' }">
<!-- 渲染岗位标签 -->
<view class="tabs">
<!-- 动画 -->
<view
class="circle"
:style="{ height: circleDiameter * 2 + 'rpx', width: circleDiameter * 2 + 'rpx' }"
@click="serchforIt"
>
搜一搜
</view>
<view
v-for="(item, index) in jobList"
:key="index"
class="tab"
:style="getLabelStyle(index)"
@click="selectTab(item)"
>
{{ item.name }}
</view>
</view>
</view>
<!-- 关闭按钮 -->
<button class="close-btn" @click="closePopup">完成</button>
</view>
<!-- piker -->
<custom-popup :content-h="100" :visible="state.visible" :header="false">
<view class="popContent">
<view class="s-header">
<view class="heade-lf" @click="state.visible = false">取消</view>
<view class="heade-ri" @click="confimPopup">确认</view>
</view>
<view class="sex-content fl_1">
<expected-station
:search="false"
@onChange="changeJobTitleId"
:station="state.stations"
:max="5"
></expected-station>
</view>
</view>
</custom-popup>
</view>
</template>
<script setup>
import { ref, inject, computed, onMounted, defineProps, defineEmits, reactive } from 'vue';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, setCheckedNodes } = inject('globalFunction');
const { getUserResume } = useUserStore();
const props = defineProps({
show: Boolean, // 是否显示弹窗
jobList: Array, // 职位列表
});
const contentHeight = ref(373);
const circleDiameter = ref(113);
const screenWidth = ref(375); // 默认值，避免初始化报错
const screenHeight = ref(667);
const centerX = ref(187.5); // 圆心X
const centerY = ref(333.5); // 圆心Y
const radius = ref(120); // 圆半径
const tabPositions = ref([]); // 存储计算好的随机坐标
const emit = defineEmits(['update:show']);
const userInfo = ref({});
const state = reactive({
jobTitleId: '',
stations: [],
visible: false,
});
const closePopup = () => {
emit('update:show', false);
};
const updateScreenSize = () => {
const systemInfo = uni.getSystemInfoSync();
screenWidth.value = systemInfo.windowWidth;
screenHeight.value = systemInfo.windowHeight;
centerX.value = screenWidth.value / 2;
centerY.value = screenHeight.value / 2 - contentHeight.value / 2; // 让圆心稍微上移
};
function serchforIt() {
if (state.stations.length) {
state.visible = true;
return;
}
$api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
if (userInfo.value.jobTitleId) {
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
setCheckedNodes(resData.data, ids);
}
state.jobTitleId = userInfo.value.jobTitleId;
state.stations = resData.data;
state.visible = true;
});
}
function confimPopup() {
$api.createRequest('/app/user/resume', { jobTitleId: state.jobTitleId }, 'post').then((resData) => {
$api.msg('完成');
state.visible = false;
getUserResume().then(() => {
initload();
});
});
}
function selectTab(item) {
console.log(item);
}
function changeJobTitleId(ids) {
state.jobTitleId = ids;
}
function getLabelStyle(index) {
// 基础半径（根据标签数量动态调整）
const baseRadius = Math.min(Math.max(props.jobList.length * 15, 130), screenWidth.value * 0.4);
// 基础角度间隔
const angleStep = 360 / props.jobList.length;
// 随机扰动参数
const randomRadius = baseRadius + Math.random() * 60 - 50;
const randomAngle = angleStep * index + Math.random() * 20 - 10;
// 极坐标转笛卡尔坐标
const radians = (randomAngle * Math.PI) / 180;
const x = Math.cos(radians) * randomRadius;
const y = Math.sin(radians) * randomRadius;
return {
left: `calc(50% + ${x}px)`,
top: `calc(50% + ${y}px)`,
transform: 'translate(-50%, -50%)',
};
}
onMounted(() => {
userInfo.value = useUserStore().userInfo;
updateScreenSize();
});
</script>
<style scoped>
/* 全屏弹窗 */
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
z-index: 999;
}
/* 弹窗内容 */
.popup-content {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #007aff, #005bbb);
text-align: center;
flex-direction: column;
display: flex;
justify-content: space-around;
align-items: center;
}
.title {
padding-left: 20rpx;
width: calc(100% - 20rpx);
height: 68rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 56rpx;
color: #ffffff;
line-height: 65rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.circle-content {
width: 731rpx;
height: 747rpx;
position: relative;
}
.circle {
width: 225rpx;
height: 225rpx;
background: linear-gradient(145deg, #13c57c 0%, #8dc5ae 100%);
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 400;
font-size: 35rpx;
color: #ffffff;
text-align: center;
line-height: 225rpx;
}
.circle::before,
.circle::after {
width: 225rpx;
height: 225rpx;
background: linear-gradient(145deg, #13c57c 0%, #8dc5ae 100%);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
content: '';
}
@keyframes larger2 {
0% {
transform: scale(1);
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.circle::after {
animation: larger1 2s infinite;
}
@keyframes larger1 {
0% {
transform: scale(1);
}
100% {
transform: scale(3.5);
opacity: 0;
}
}
.circle::before {
animation: larger2 2s infinite;
}
/* 岗位标签 */
.tabs {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 3;
}
.tab {
position: absolute;
white-space: nowrap;
padding: 8rpx 16rpx;
background: #fff;
border-radius: 40rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
transition: all 0.5s ease;
}
/* 关闭按钮 */
.close-btn {
width: 549rpx;
line-height: 85rpx;
height: 85rpx;
background: #2ecc71;
color: #ffffff;
}
/* popup */
.popContent {
padding: 24rpx;
background: #4778ec;
height: calc(100% - 49rpx);
.sex-content {
border-radius: 20rpx;
width: 100%;
margin-top: 20rpx;
margin-bottom: 40rpx;
display: flex;
overflow: hidden;
height: calc(100% - 100rpx);
border: 1px solid #4778ec;
}
.s-header {
display: flex;
justify-content: space-between;
text-align: center;
font-size: 16px;
.heade-lf {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #666666;
color: #666666;
background: #ffffff;
}
.heade-ri {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #1b66ff;
background-color: #1b66ff;
color: #ffffff;
}
}
}
</style>

124
components/renderCompanys/renderCompanys.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<view v-for="job in listData" :key="job.id">
<view class="cards" @click="nextDetail(job)">
<view class="card-company">
<text class="company line_1">{{ job.name }}</text>
</view>
<view class="card-bottom">
<view class="fl_box fs_14">
<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>
</view>
<view class="card-tags">
<view class="tag" v-if="job.nature">
<dict-Label dictType="nature" :value="job.nature"></dict-Label>
</view>
<view class="tag">
{{ vacanciesTo(job.vacancies) }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import { inject, computed, toRaw } from 'vue';
const { insertSortData, navTo, vacanciesTo } = inject('globalFunction');
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
const recommedIndexDb = useRecommedIndexedDBStore();
const props = defineProps({
list: {
type: Array,
default: '标题',
},
longitude: {
type: Number,
default: 120.382665,
},
latitude: {
type: Number,
default: 36.066938,
},
seeDate: {
type: String,
default: '',
},
});
const listData = computed(() => {
return props.list;
});
function nextDetail(company) {
navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${company.companyId}`);
}
</script>
<style lang="stylus" scoped>
.date-jobTitle{
font-weight: 400;
font-size: 28rpx;
color: #495265;
padding: 28rpx 0 0 20rpx
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
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
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 4rpx
margin-bottom: 10rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
</style>

148
components/renderJobs/renderJobs.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<view v-for="job in listData" :key="job.id">
<view v-if="!job.isTitle" class="cards" @click="nextDetail(job)">
<view class="card-company">
<text class="company">{{ job.jobTitle }}</text>
<view class="salary">
<Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary"></Salary-Expectation>
</view>
</view>
<view class="card-companyName">{{ job.companyName }}</view>
<view class="card-tags">
<view class="tag">
<dict-Label dictType="education" :value="job.education"></dict-Label>
</view>
<view class="tag">
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view>
<view class="tag">
{{ vacanciesTo(job.vacancies) }}
</view>
</view>
<view class="card-bottom">
<view>{{ job.postingDate }}</view>
<view>
<convert-distance
:alat="job.latitude"
:along="job.longitude"
:blat="latitude"
:blong="longitude"
></convert-distance>
<dict-Label class="mar_le10" dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
</view>
</view>
</view>
<view class="date-jobTitle" v-else>
{{ job.title }}
</view>
</view>
</template>
<script setup>
import { inject, computed, toRaw } from 'vue';
const { insertSortData, navTo, vacanciesTo } = inject('globalFunction');
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
const recommedIndexDb = useRecommedIndexedDBStore();
const props = defineProps({
list: {
type: Array,
default: '标题',
},
longitude: {
type: Number,
default: 120.382665,
},
latitude: {
type: Number,
default: 36.066938,
},
seeDate: {
type: String,
default: '',
},
});
const listData = computed(() => {
if (props.seeDate && props.list.length) {
const ulist = toRaw(props.list);
const [reslist, lastDate] = insertSortData(ulist, props.seeDate);
return reslist;
}
console.log(props.list);
return props.list;
});
function nextDetail(job) {
// 记录岗位类型，用作数据分析
if (job.jobCategory) {
const recordData = recommedIndexDb.JobParameter(job);
recommedIndexDb.addRecord(recordData);
}
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}
</script>
<style lang="stylus" scoped>
.date-jobTitle{
font-weight: 400;
font-size: 28rpx;
color: #495265;
padding: 28rpx 0 0 20rpx
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
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
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 32rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
</style>

360
components/selectFilter/selectFilter.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<uni-popup
ref="popup"
type="bottom"
borderRadius="10px 10px 0 0"
background-color="#FFFFFF"
@maskClick="maskClickFn"
:mask-click="maskClick"
>
<view class="popup-content">
<view class="popup-header">
<view class="btn-cancel" @click="cancel">取消</view>
<view class="title">
<text>{{ title }}</text>
<text style="color: #256bfa">·{{ count }}</text>
</view>
<view class="btn-confirm" @click="confirm">&nbsp;&nbsp;</view>
</view>
<view class="popup-list">
<view class="content-wrapper">
<!-- 左侧筛选类别 -->
<scroll-view class="filter-nav" scroll-y>
<view
v-for="(item, index) in filterOptions"
:key="index"
class="nav-item button-click"
:class="{ active: activeTab === item.key }"
@click="scrollTo(item.key)"
>
{{ item.label }}
</view>
</scroll-view>
<!-- 右侧筛选内容 -->
<scroll-view class="filter-content" :scroll-into-view="activeTab" scroll-y>
<template v-for="(item, index) in filterOptions" :key="index">
<view class="content-item">
<view class="item-title" :id="item.key">{{ item.label }}</view>
<checkbox-group class="check-content" @change="(e) => handleSelect(item.key, e)">
<label
v-for="option in item.options"
:key="option.value"
class="checkbox-item button-click"
:class="{
checkedstyle: selectedValues[item.key]?.includes(String(option.value)),
}"
>
<checkbox
style="display: none"
:value="String(option.value)"
:checked="selectedValues[item.key]?.includes(String(option.value))"
/>
<text class="option-label">{{ option.label }}</text>
</label>
</checkbox-group>
</view>
</template>
</scroll-view>
</view>
</view>
<view class="popup-bottom">
<view class="btn-cancel btn-feel" @click="cleanup">清除</view>
<view class="btn-confirm btn-feel" @click="confirm">确认</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref, reactive, nextTick, onBeforeMount } from 'vue';
import useDictStore from '@/stores/useDictStore';
const { getTransformChildren } = useDictStore();
const area = ref(true);
const maskClick = ref(false);
const maskClickFn = ref(null);
const title = ref('标题');
const confirmCallback = ref(null);
const cancelCallback = ref(null);
const changeCallback = ref(null);
const popup = ref(null);
const selectedValues = reactive({});
const count = ref(0);
// 当前激活的筛选类别
const activeTab = ref('');
const filterOptions = ref([]);
const open = (newConfig = {}) => {
const { title: configTitle, success, cancel, change, data, maskClick: configMaskClick = false } = newConfig;
// reset();
if (configTitle) title.value = configTitle;
if (typeof success === 'function') confirmCallback.value = success;
if (typeof cancel === 'function') cancelCallback.value = cancel;
if (typeof change === 'function') changeCallback.value = change;
if (configMaskClick) {
maskClick.value = configMaskClick;
maskClickFn.value = cancel;
}
getoptions();
nextTick(() => {
popup.value?.open();
});
};
const close = () => {
popup.value?.close();
};
const cancel = () => {
handleClick(cancelCallback.value);
};
const confirm = () => {
handleClick(confirmCallback.value);
};
const handleClick = async (callback) => {
if (typeof callback !== 'function') {
close();
return;
}
try {
const result = await callback(selectedValues);
if (result !== false) close();
} catch (error) {
console.error('confirmCallback 执行出错:', error);
}
};
// 处理选项选择
const handleSelect = (key, e) => {
selectedValues[key] = e.detail.value.map(String);
let va = 0;
for (const [key, value] of Object.entries(selectedValues)) {
va += value.length;
}
count.value = va;
};
const cleanup = () => {
Object.keys(selectedValues).forEach((key) => {
delete selectedValues[key];
});
};
const scrollTo = (key) => {
activeTab.value = key;
};
function getoptions() {
const arr = [
getTransformChildren('education', '学历要求'),
getTransformChildren('experience', '工作经验'),
getTransformChildren('scale', '公司规模'),
];
if (area.value) {
arr.push(getTransformChildren('area', '区域'));
}
filterOptions.value = arr;
activeTab.value = 'education';
}
const reset = () => {
maskClick.value = false;
confirmCallback.value = null;
cancelCallback.value = null;
changeCallback.value = null;
Object.keys(selectedValues).forEach((key) => delete selectedValues[key]);
};
// 暴露方法给父组件
defineExpose({
open,
close,
});
</script>
<style lang="scss" scoped>
.popup-content {
color: #000000;
height: 80vh;
}
.popup-bottom {
padding: 40rpx 28rpx 20rpx 28rpx;
display: flex;
justify-content: space-between;
.btn-cancel {
font-weight: 400;
font-size: 32rpx;
color: #666d7f;
line-height: 90rpx;
width: 33%;
min-width: 222rpx;
height: 90rpx;
background: #f5f5f5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
text-align: center;
}
.btn-confirm {
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
text-align: center;
width: 67%;
height: 90rpx;
margin-left: 28rpx;
line-height: 90rpx;
background: #256bfa;
min-width: 444rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
}
.popup-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
height: calc(80vh - 100rpx - 150rpx);
overflow: hidden;
.picker-view {
width: 100%;
height: 500rpx;
margin-top: 20rpx;
.uni-picker-view-mask {
background: rgba(0, 0, 0, 0);
}
.item {
line-height: 84rpx;
height: 84rpx;
text-align: center;
font-weight: 400;
font-size: 32rpx;
color: #cccccc;
}
.item-active {
color: #333333;
}
.uni-picker-view-indicator:after {
border-color: #e3e3e3;
}
.uni-picker-view-indicator:before {
border-color: #e3e3e3;
}
}
// .list {
// .row {
// font-weight: 400;
// font-size: 32rpx;
// color: #333333;
// line-height: 84rpx;
// text-align: center;
// }
// }
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 40rpx 10rpx 40rpx;
.title {
font-weight: 500;
font-size: 36rpx;
color: #333333;
text-align: center;
}
.btn-cancel {
font-weight: 400;
font-size: 32rpx;
color: #666d7f;
line-height: 38rpx;
}
.btn-confirm {
font-weight: 400;
font-size: 32rpx;
color: #256bfa;
}
}
.content-wrapper {
flex: 1;
display: flex;
overflow: hidden;
height: 100%;
}
.filter-nav {
width: 200rpx;
background-color: #ffffff;
.nav-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-weight: 400;
font-size: 28rpx;
color: #666d7f;
&.active {
font-weight: 500;
font-size: 28rpx;
color: #256bfa;
}
}
}
.filter-content {
flex: 1;
padding: 20rpx;
background-color: #f6f6f6;
.content-item {
margin-top: 40rpx;
.item-title {
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.content-item:first-child {
margin-top: 0rpx;
}
.check-content {
display: grid;
grid-template-columns: 50% 50%;
place-items: center;
.checkbox-item {
display: flex;
align-items: center;
margin: 20rpx 20rpx 0 0;
text-align: center;
background-color: #d9d9d9;
width: 228rpx;
height: 80rpx;
background: #e8eaee;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.option-label {
font-size: 28rpx;
width: 100%;
}
}
.checkedstyle {
width: 224rpx;
height: 76rpx;
background: rgba(37, 107, 250, 0.06);
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #256bfa;
color: #256bfa;
}
}
}
</style>

287
components/selectJobs/selectJobs.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<uni-popup
ref="popup"
type="bottom"
borderRadius="10px 10px 0 0"
background-color="#FFFFFF"
:mask-click="maskClick"
>
<view class="popup-content">
<view class="popup-header">
<view class="btn-cancel" @click="cancel">取消</view>
<view class="title">
<text>{{ title }}</text>
<text style="color: #256bfa">·{{ count }}</text>
</view>
<view class="btn-confirm" @click="confirm">&nbsp;&nbsp;</view>
</view>
<view class="popup-list">
<expected-station
:search="false"
@onChange="changeJobTitleId"
:station="state.stations"
:max="5"
></expected-station>
</view>
<view class="popup-bottom">
<view class="btn-cancel" @click="cleanup">清除</view>
<view class="btn-confirm" @click="confirm">确认</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref, reactive, computed, inject, nextTick, defineExpose, onMounted } from 'vue';
const { $api, navTo, setCheckedNodes, cloneDeep } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import { storeToRefs } from 'pinia';
const { userInfo } = storeToRefs(useUserStore());
const maskClick = ref(false);
const title = ref('标题');
const confirmCallback = ref(null);
const cancelCallback = ref(null);
const changeCallback = ref(null);
const listData = ref([]);
const selectedIndex = ref([0, 0, 0]);
const rowLabel = ref('label');
const rowKey = ref('value');
const selectedItems = ref([]);
const popup = ref(null);
const count = ref(0);
const JobsIdsValue = ref('');
const JobsLabelValue = ref('');
const state = reactive({
jobTitleId: '',
stations: [],
visible: false,
});
onMounted(() => {
serchforIt();
});
// 统一处理二维数组格式
const processedListData = computed(() => {
return listData.value.map((column) => {
if (!Array.isArray(column)) return [];
return column.map((item) => {
return typeof item === 'object' ? item : { [rowLabel.value]: item, [rowKey.value]: item };
});
});
});
const open = (newConfig = {}) => {
const {
title: configTitle,
success,
cancel,
change,
data,
rowLabel: configRowLabel = 'label',
rowKey: configRowKey = 'value',
maskClick: configMaskClick = false,
defaultIndex = [],
} = newConfig;
reset();
serchforIt();
if (configTitle) title.value = configTitle;
if (typeof success === 'function') confirmCallback.value = success;
if (typeof cancel === 'function') cancelCallback.value = cancel;
if (typeof change === 'function') changeCallback.value = change;
if (Array.isArray(data)) listData.value = data;
rowLabel.value = configRowLabel;
rowKey.value = configRowKey;
maskClick.value = configMaskClick;
nextTick(() => {
popup.value?.open();
});
};
const close = () => {
popup.value?.close();
};
const cancel = () => {
handleClick(cancelCallback.value);
};
const confirm = () => {
if (JobsIdsValue.value) {
handleClick(confirmCallback.value);
} else {
$api.msg('请选择期望岗位');
}
};
const cleanup = () => {
setCheckedNodes(state.stations, []);
count.value = 0;
reset();
};
const changeJobTitleId = (e) => {
const ids = e.ids.split(',').map((id) => Number(id));
count.value = ids.length;
JobsIdsValue.value = e.ids;
JobsLabelValue.value = e.labels;
};
const handleClick = async (callback) => {
if (typeof callback !== 'function') {
close();
return;
}
try {
const result = await callback(JobsIdsValue.value, JobsLabelValue.value);
if (result !== false) close();
} catch (error) {
console.error('confirmCallback 执行出错:', error);
}
};
function serchforIt() {
if (state.stations.length) {
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
count.value = ids.length;
state.jobTitleId = userInfo.value.jobTitleId;
setCheckedNodes(state.stations, ids);
state.visible = true;
return;
}
$api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
if (userInfo.value.jobTitleId) {
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
count.value = ids.length;
setCheckedNodes(resData.data, ids);
}
state.jobTitleId = userInfo.value.jobTitleId;
state.stations = resData.data;
state.visible = true;
});
}
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 = [];
};
// 暴露方法给父组件
defineExpose({
open,
close,
});
</script>
<style lang="scss" scoped>
.popup-content {
color: #000000;
height: 80vh;
}
.popup-bottom {
padding: 40rpx 28rpx 20rpx 28rpx;
display: flex;
justify-content: space-between;
.btn-cancel {
font-weight: 400;
font-size: 32rpx;
color: #666d7f;
line-height: 90rpx;
width: 33%;
min-width: 222rpx;
height: 90rpx;
background: #f5f5f5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
text-align: center;
}
.btn-confirm {
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
text-align: center;
width: 67%;
height: 90rpx;
margin-left: 28rpx;
line-height: 90rpx;
background: #256bfa;
min-width: 444rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
}
.popup-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
height: calc(80vh - 100rpx - 150rpx);
overflow: hidden;
.picker-view {
width: 100%;
height: 500rpx;
margin-top: 20rpx;
.uni-picker-view-mask {
background: rgba(0, 0, 0, 0);
}
.item {
line-height: 84rpx;
height: 84rpx;
text-align: center;
font-weight: 400;
font-size: 32rpx;
color: #cccccc;
}
.item-active {
color: #333333;
}
.uni-picker-view-indicator:after {
border-color: #e3e3e3;
}
.uni-picker-view-indicator:before {
border-color: #e3e3e3;
}
}
// .list {
// .row {
// font-weight: 400;
// font-size: 32rpx;
// color: #333333;
// line-height: 84rpx;
// text-align: center;
// }
// }
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 40rpx 10rpx 40rpx;
.title {
font-weight: 500;
font-size: 36rpx;
color: #333333;
text-align: center;
}
.btn-cancel {
font-weight: 400;
font-size: 32rpx;
color: #666d7f;
line-height: 38rpx;
}
.btn-confirm {
font-weight: 400;
font-size: 32rpx;
color: #256bfa;
}
}
</style>

233
components/selectPopup/selectPopup.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<uni-popup
ref="popup"
type="bottom"
borderRadius="10px 10px 0 0"
background-color="#FFFFFF"
:mask-click="maskClick"
>
<view class="popup-content">
<view class="popup-header">
<view class="btn-cancel" @click="cancel">取消</view>
<view class="title">{{ title }}</view>
<view class="btn-confirm" @click="confirm">确认</view>
</view>
<view class="popup-list">
<picker-view
indicator-style="height: 84rpx;"
:value="selectedIndex"
@change="bindChange"
class="picker-view"
>
<template v-for="(list, lsIndex) in processedListData" :key="lsIndex">
<picker-view-column>
<view
v-for="(item, index) in list"
:key="index"
class="item"
:class="{ 'item-active': selectedIndex[lsIndex] === index }"
>
<text>{{ getLabel(item) }}</text>
<text>{{ unit }}</text>
</view>
</picker-view-column>
</template>
</picker-view>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
name: 'selectPopup',
data() {
return {
maskClick: false,
title: '标题',
confirmCallback: null,
cancelCallback: null,
changeCallback: null,
listData: [],
selectedIndex: [0, 0, 0],
rowLabel: 'label',
rowKey: 'value',
selectedItems: [],
unit: '',
};
},
computed: {
// 统一处理二维数组格式
processedListData() {
return this.listData.map((column) => {
if (!Array.isArray(column)) return [];
return column.map((item) => {
return typeof item === 'object' ? item : { [this.rowLabel]: item, [this.rowKey]: item };
});
});
},
},
methods: {
open(newConfig = {}) {
const {
title,
success,
cancel,
change,
data,
unit = '',
rowLabel = 'label',
rowKey = 'value',
maskClick = false,
defaultIndex = [],
} = newConfig;
this.reset();
if (title) this.title = title;
if (typeof success === 'function') this.confirmCallback = success;
if (typeof cancel === 'function') this.cancelCallback = cancel;
if (typeof change === 'function') this.changeCallback = change;
if (Array.isArray(data)) this.listData = data;
this.rowLabel = rowLabel;
this.rowKey = rowKey;
this.maskClick = maskClick;
this.unit = unit;
this.selectedIndex =
defaultIndex.length === this.listData.length ? defaultIndex : new Array(this.listData.length).fill(0);
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
this.$nextTick(() => {
this.$refs.popup.open();
});
},
close() {
this.$refs.popup.close();
},
bindChange(e) {
this.selectedIndex = e.detail.value;
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
this.changeCallback && this.changeCallback(e, this.selectedIndex, this.selectedItems);
},
cancel() {
this.clickCallback(this.cancelCallback);
},
confirm() {
this.clickCallback(this.confirmCallback);
},
getLabel(item) {
return item?.[this.rowLabel] ?? '';
},
setColunm(index, list) {
if (index > this.listData.length) {
return console.warn('最长' + this.listData.length);
}
if (!list.length) {
return console.warn(list + '不能为空');
}
this.listData[index] = list;
this.selectedIndex[index] = 0;
this.selectedItems = this.selectedIndex.map((val, index) => this.processedListData[index][val]);
},
async clickCallback(callback) {
if (typeof callback !== 'function') {
this.$refs.popup.close();
return;
}
try {
const result = await callback(this.selectedIndex, this.selectedItems); // 无论是 async 还是返回 Promise 的函数都可以 await
if (result !== false) {
this.$refs.popup.close();
}
} catch (error) {
console.error('confirmCallback 执行出错:', error);
}
},
reset() {
this.maskClick = false;
this.confirmCallback = null;
this.cancelCallback = null;
this.changeCallback = null;
this.listData = [];
this.selectedIndex = [0, 0, 0];
this.rowLabel = 'label';
this.rowKey = 'value';
this.selectedItems = [];
this.unit = '';
},
},
};
</script>
<style lang="scss" scoped>
.popup-content {
color: #000000;
height: 50vh;
}
.popup-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-evenly;
flex: 1;
overflow: hidden;
.picker-view {
width: 100%;
height: calc(50vh - 100rpx);
margin-top: 20rpx;
.uni-picker-view-mask {
background: rgba(0, 0, 0, 0);
}
.item {
line-height: 84rpx;
height: 84rpx;
text-align: center;
font-weight: 400;
font-size: 32rpx;
color: #cccccc;
}
.item-active {
color: #333333;
}
.uni-picker-view-indicator:after {
border-color: #e3e3e3;
}
.uni-picker-view-indicator:before {
border-color: #e3e3e3;
}
}
// .list {
// .row {
// font-weight: 400;
// font-size: 32rpx;
// color: #333333;
// line-height: 84rpx;
// text-align: center;
// }
// }
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 40rpx 10rpx 40rpx;
.title {
font-weight: 500;
font-size: 36rpx;
color: #333333;
text-align: center;
}
.btn-cancel {
font-weight: 400;
font-size: 32rpx;
color: #666d7f;
line-height: 38rpx;
}
.btn-confirm {
font-weight: 400;
font-size: 32rpx;
color: #256bfa;
}
}
</style>

21
components/selectPopup/selectPopupPlugin.js Normal file
View File

@@ -0,0 +1,21 @@
// plugins/selectPopup.js
import {
createApp
} from 'vue';
import SelectPopup from './selectPopup.vue';
export default {
install(app) {
const popupApp = createApp(SelectPopup);
const popupInstance = popupApp.mount(document.createElement('div'));
document.body.appendChild(popupInstance.$el);
// 提供 open 方法
const openPopup = (config) => {
popupInstance.open(config);
};
// 提供给所有组件使用
app.provide('openSelectPopup', openPopup);
}
};

BIN
hook/.DS_Store vendored
View File

Binary file not shown.

44
hook/useColumnCount.js Normal file
View File

@@ -0,0 +1,44 @@
// composables/useColumnCount.js
import {
ref,
onMounted,
onUnmounted,
watch
} from 'vue'
export function useColumnCount(onChange = () => {}) {
const columnCount = ref(0)
const calcColumn = () => {
const width = uni.getSystemInfoSync().windowWidth
const count = Math.min(5, Math.floor(width / 375) + 1)
if (count !== columnCount.value) {
columnCount.value = count
}
}
onMounted(() => {
columnCount.value = 2
calcColumn()
if (process.client) {
window.addEventListener('resize', calcColumn)
}
})
onUnmounted(() => {
if (process.client) {
window.removeEventListener('resize', calcColumn)
}
})
// 列数变化时执行回调
watch(columnCount, (newVal, oldVal) => {
if (newVal !== oldVal) {
onChange(newVal)
}
})
return {
columnCount,
}
}

49
hook/useScrollDirection.js Normal file
View File

@@ -0,0 +1,49 @@
import {
ref
} from 'vue'
export function useScrollDirection(options = {}) {
const {
threshold = 200, // 滚动偏移阈值
throttleTime = 100, // 节流时间（毫秒）
onChange = null // 滚动方向变化的回调
} = options
const lastScrollTop = ref(0)
const accumulatedScroll = ref(0)
const isScrollingDown = ref(false)
let lastInvoke = 0
function handleScroll(e) {
const now = Date.now()
if (now - lastInvoke < throttleTime) return
lastInvoke = now
const scrollTop = e.detail.scrollTop
const delta = scrollTop - lastScrollTop.value
accumulatedScroll.value += delta
if (accumulatedScroll.value > threshold) {
if (!isScrollingDown.value) {
isScrollingDown.value = true
onChange?.(true) // 通知变更为向下
}
accumulatedScroll.value = 0
}
if (accumulatedScroll.value < -threshold) {
if (isScrollingDown.value) {
isScrollingDown.value = false
onChange?.(false) // 通知变更为向上
}
accumulatedScroll.value = 0
}
lastScrollTop.value = scrollTop
}
return {
isScrollingDown,
handleScroll
}
}

8
lib/lunar-javascript@1.7.2.js Normal file
View File

File diff suppressed because one or more lines are too long

14
main.js
View File

@@ -3,8 +3,15 @@ import * as Pinia from 'pinia'
import globalFunction from '@/common/globalFunction'
import '@/lib/string-similarity.min.js'
import similarityJobs from '@/utils/similarity_Job.js';
// 组件
import AppLayout from './components/AppLayout/AppLayout.vue';
import Empty from './components/empty/empty.vue';
import NoBouncePage from '@/components/NoBouncePage/NoBouncePage.vue'
import MsgTips from '@/components/MsgTips/MsgTips.vue'
import SelectPopup from '@/components/selectPopup/selectPopup.vue'
import SelectPopupPlugin from '@/components/selectPopup/selectPopupPlugin';
import RenderJobs from '@/components/renderJobs/renderJobs.vue';
import RenderCompanys from '@/components/renderCompanys/renderCompanys.vue';
// import Tabbar from '@/components/tabbar/midell-box.vue'
// 自动导入 directives 目录下所有指令
const directives = import.meta.glob('./directives/*.js', {
@@ -19,8 +26,13 @@ import {
export function createApp() {
const app = createSSRApp(App)
app.component('AppLayout', AppLayout)
app.component('Empty', Empty)
app.component('NoBouncePage', NoBouncePage)
app.component('MsgTips', MsgTips)
app.component('SelectPopup', SelectPopup)
app.component('RenderJobs', RenderJobs)
app.component('RenderCompanys', RenderCompanys)
// app.component('tabbar-custom', Tabbar)
for (const path in directives) {
@@ -36,7 +48,9 @@ export function createApp() {
});
app.provide('deviceInfo', globalFunction.getdeviceInfo());
app.use(SelectPopupPlugin);
app.use(Pinia.createPinia());
return {
app,
Pinia

98
packageA/pages/Intendedposition/Intendedposition.vue
View File

@@ -1,45 +1,13 @@
<template>
<view class="collection-content">
<view class="one-cards">
<view class="card-box" v-for="(item, index) in pageState.list" :key="index" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.educatio">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<!-- <uni-icons type="star" size="28"></uni-icons> -->
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<!-- 550m -->
</view>
</view>
</view>
</view>
<renderJobs
seeDate="applyTime"
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</template>
@@ -49,6 +17,9 @@ import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, vacanciesTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const userStore = useUserStore();
const state = reactive({});
const pageState = reactive({
@@ -99,47 +70,16 @@ function getJobList(type = 'add') {
// pageState.list = resData.rows;
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
console.log(pageState.list);
});
}
</script>
<style lang="stylus">
.collection-content
padding: 20rpx 0 20rpx 0;
.one-cards
display: flex;
flex-direction: column;
padding: 0 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
align-items: center;
.mineText
font-weight: 400;
font-size: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: 6rpx;
<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>

405
packageA/pages/UnitDetails/UnitDetails.vue
View File

@@ -1,68 +1,79 @@
<template>
<view class="container">
<!-- 单位基本信息 -->
<view class="company-header">
<text class="company-name">{{ companyInfo.name }}</text>
<view class="company-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 {{ companyInfo.location }}
</view>
<view class="industry" style="display: inline-block">
{{ companyInfo.industry }}
<dict-Label dictType="scale" :value="companyInfo.scale"></dict-Label>
</view>
<AppLayout title="" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</view>
<view class="hr"></view>
<!-- 单位介绍 -->
<view class="company-description">
<view class="section-title">单位介绍</view>
<text class="description">
{{ companyInfo.description }}
</text>
</view>
<!-- 在招职位 -->
<view class="job-list">
<text class="section-title">在招职位</text>
<view
class="job-row"
v-for="job in pageState.list"
:key="job.id"
@click="navTo(`/packageA/pages/post/post?jobId=${job.jobId}`)"
>
<view class="left">
<text class="job-title">{{ job.jobTitle }}</text>
<view class="job-tags">
<!-- <view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view> -->
<view class="tag">
<dict-Label dictType="education" :value="job.education"></dict-Label>
</view>
<view class="tag">
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view>
<view class="tag">{{ job.vacancies }}人</view>
</template>
<template #headerright>
<view class="btn mar_ri10">
<image
src="@/static/icon/collect3.png"
v-if="!companyInfo.isCollection"
@click="companyCollection"
></image>
<image src="@/static/icon/collect2.png" v-else @click="companyCollection"></image>
</view>
</template>
<view class="content">
<view class="content-top">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1">{{ companyInfo?.name }}</view>
<view class="row2">
<dict-tree-Label
v-if="companyInfo?.industry"
dictType="industry"
:value="companyInfo?.industry"
></dict-tree-Label>
<span v-if="companyInfo?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="companyInfo?.scale"></dict-Label>
</view>
<text class="location">
青岛
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
</text>
</view>
<view class="right">
<text class="salary">{{ job.minSalary }}-{{ job.maxSalary }}/月</text>
<text class="hot" v-if="job.isHot">🔥</text>
</view>
</view>
<view class="conetent-info" :class="{ expanded: isExpanded }">
<view class="info-title">公司介绍</view>
<view class="info-desirption">{{ companyInfo.description }}</view>
<!-- <view class="info-title title2">公司地址</view>
<view class="locationCompany"></view> -->
</view>
<view class="expand" @click="expand">
<text>{{ isExpanded ? '收起' : '展开' }}</text>
<image
class="expand-img"
:class="{ 'expand-img-active': !isExpanded }"
src="@/static/icon/downs.png"
></image>
</view>
<scroll-view scroll-y class="Detailscroll-view" @scrolltolower="getJobsList('add')">
<view class="views">
<view class="Detail-title"><text class="title">在招职位</text></view>
<renderJobs
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import point from '@/static/icon/point.png';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');
const isExpanded = ref(false);
const pageState = reactive({
page: 0,
list: [],
@@ -71,11 +82,27 @@ const pageState = reactive({
pageSize: 10,
});
const companyInfo = ref({});
onLoad((options) => {
console.log(options);
getCompanyInfo(options.companyId);
});
function companyCollection() {
const companyId = companyInfo.value.companyId;
if (companyInfo.value.isCollection) {
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'DELETE').then((resData) => {
getCompanyInfo(companyId);
$api.msg('取消收藏成功');
});
} else {
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'POST').then((resData) => {
getCompanyInfo(companyId);
$api.msg('收藏成功');
});
}
}
function getCompanyInfo(id) {
$api.createRequest(`/app/company/${id}`).then((resData) => {
companyInfo.value = resData.data;
@@ -97,99 +124,193 @@ function getJobsList(type = 'add') {
};
$api.createRequest(`/app/company/job/${companyInfo.value.companyId}`, params).then((resData) => {
const { rows, total } = resData;
pageState.list = resData.rows;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
function expand() {
isExpanded.value = !isExpanded.value;
}
</script>
<style lang="stylus">
.container
display flex
flex-direction column
background-color #f8f8f8
.hr
height: 10rpx;
.company-header
padding 20rpx 40rpx
background-color #fff
.company-name
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.company-info
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.content{
height: 100%
display: flex;
flex-direction: column
.content-top{
padding: 28rpx
padding-top: 50rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
.company-description
padding 20rpx 40rpx
background-color #fff
margin-bottom 10rpx
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.description
font-size 24rpx
color #333
line-height 36rpx
.job-list
padding 20rpx 40rpx
background-color #fff
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.job-row
display flex
justify-content space-between
align-items flex-start
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
flex-direction column
flex-grow 1
.job-title
font-size 28rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-tags
display flex
gap 10rpx
margin-bottom 10rpx
.tag
background-color #22c55e
color #fff
padding 5rpx 10rpx
border-radius 12rpx
font-size 20rpx
.location
font-size 24rpx
color #666
.right
display flex
flex-direction column
align-items flex-end
.salary
font-size 28rpx
color #3b82f6
font-weight bold
.hot
color #ff6b6b
font-size 24rpx
margin-top 5rpx
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
}
}
}
.conetent-info{
padding: 0 28rpx
overflow: hidden;
max-height: 0rpx;
transition: max-height 0.3s ease;
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.info-desirption{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
text-align: justified;
}
.title2{
margin-top: 48rpx
}
}
.expanded {
max-height: 1000rpx; // 足够显示完整内容
}
.expand{
display: flex
flex-wrap: nowrap
white-space: nowrap
justify-content: center
margin-top: 20rpx
margin-bottom: 28rpx
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
.expand-img{
width: 40rpx;
height: 40rpx;
}
.expand-img-active{
transform: rotate(180deg)
}
}
}
.Detailscroll-view{
flex: 1;
overflow: hidden;
background: #F4F4F4;
.views{
padding: 28rpx
.Detail-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
}
.Detail-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
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
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 32rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
}
}
</style>

133
packageA/pages/addPosition/addPosition.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<AppLayout title="添加岗位">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="main">
<view class="content-title">
<view class="title-lf">
<view class="lf-h1">想找什么工作？</view>
<view class="lf-text">选择想找的工作，我的将在首页为你推荐</view>
</view>
<view class="title-ri">
<!-- <text style="color: #256bfa">2</text>
<text>/2</text> -->
</view>
</view>
<view class="content-list">
<view class="list-row" v-for="(item, index) in userInfo.jobTitle" :key="index">
<text>{{ item }}</text>
<image
class="row-image button-click"
@click="deleteItem(item, index)"
src="@/static/icon/delete1.png"
mode=""
></image>
</view>
<view class="list-row-add button-click" @click="changeJobs">添加求职岗位</view>
</view>
</view>
<SelectJobs ref="selectJobsModel"></SelectJobs>
</AppLayout>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const selectJobsModel = ref(null);
function deleteItem(item, index) {
const ids = userInfo.value.jobTitleId
.split(',')
.filter((_, vIndex) => vIndex !== index)
.join(',');
complete({ jobTitleId: ids });
}
function changeJobs() {
selectJobsModel.value?.open({
title: '添加岗位',
maskClick: true,
success: (ids, labels) => {
complete({ jobTitleId: ids });
},
});
}
function complete(values) {
if (!values.jobTitleId.length) {
return $api.msg('至少添加一份期望岗位');
}
$api.createRequest('/app/user/resume', values, 'post').then((resData) => {
$api.msg('完成');
getUserResume();
});
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.main{
padding: 54rpx 28rpx 28rpx 28rpx
.content-list{
.list-row{
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #DCDCDC;
padding: 30rpx 28rpx
display: flex;
align-items: center
justify-content: space-between
margin-bottom: 28rpx;
.row-image{
width: 36rpx;
height: 36rpx;
}
}
.list-row-add{
background: #FFFFFF;
color: #256BFA
font-size: 28rpx
font-weight: 500
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx dashed #256BFA;
padding: 30rpx 28rpx
text-align: center
}
}
}
.content-title
display: flex
justify-content: space-between;
align-items: center
margin-bottom: 50rpx
.title-lf
font-size: 44rpx;
color: #000000;
font-weight: 600;
.lf-text
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
.title-ri
font-size: 36rpx;
color: #000000;
font-weight: 600;
</style>

483
packageA/pages/browseJob/browseJob.vue
View File

@@ -1,114 +1,60 @@
<template>
<view class="collection-content">
<view class="collection-search">
<view class="search-content">
<input class="uni-input collInput" type="text" @confirm="searchCollection" >
<uni-icons class="iconsearch" color="#616161" type="search" size="20"></uni-icons>
</input>
<AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
<view class="search-date">
<view class="date-7days AllDay" v-if="state.isAll">
<view class="day" v-for="item in weekday" :key="item.weekday">
{{item.weekday}}
</template>
<view class="collection-content">
<view class="collection-search">
<view class="search-content">
<view class="header-input button-click">
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
<input
class="input"
@confirm="searchCollection"
placeholder="招聘会"
placeholder-class="inputplace"
/>
</view>
<!-- 日期 -->
<view class="day" v-for="(item, index) in monthDay" :key="index" :class="{active: item.fullDate === currentDay, nothemonth: !item.isCurrent, optional: findBrowseData(item.fullDate)}" @click="selectDay(item)">
{{item.day}}
<view class="data-all">
<image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
</view>
<view class="monthSelect">
<uni-icons size="14" class="monthIcon"
:color="state.lastDisable ? '#e8e8e8' : '#333333'" type="left"
@click="changeMonth('lastmonth')"></uni-icons>
{{state.currentMonth}}
<uni-icons size="14" class="monthIcon"
:color="state.nextDisable ? '#e8e8e8' : '#333333'" type="right"
@click="changeMonth('nextmonth')"></uni-icons>
</view>
</view>
<view class="date-7days" v-else>
<view class="day" v-for="item in weekday" :key="item.weekday">
{{item.weekday}}
</view>
<!-- 日期 -->
<view class="day" v-for="(item, index) in weekday" :key="index" :class="{active: item.fullDate === currentDay, optional: findBrowseData(item.fullDate)}" @click="selectDay(item)">
{{item.day}}
</view>
</view>
<view class="downDate">
<uni-icons class="downIcon" v-if="state.isAll" type="up" color="#FFFFFF" size="17" @click="upDateList"></uni-icons>
<uni-icons class="downIcon" v-else type="down" color="#FFFFFF" size="18" @click="downDateList"></uni-icons>
</view>
</view>
<scroll-view scroll-y class="main-scroll" @scrolltolower="getJobList('add')">
<view class="one-cards">
<view class="mian">
<renderJobs
:list="pageState.list"
v-if="pageState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
<!-- <loadmore ref="loadmoreRef"></loadmore> -->
</view>
</view>
</scroll-view>
</view>
<view class="one-cards">
<view
class="card-box "
v-for="(item, index) in pageState.list"
:key="index"
:class="{'card-transprent': item.isTitle}"
@click="navToPost(item.jobId)"
>
<view class="card-title" v-if="item.isTitle">{{item.title}}</view>
<view v-else>
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right"><Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation></view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.educatio">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<!-- <uni-icons type="star" size="28"></uni-icons> -->
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<!-- 550m -->
</view>
</view>
</view>
</view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, vacanciesTo, getWeeksOfMonth, isFutureDate } = inject('globalFunction');
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const userStore = useUserStore();
const state = reactive({
isAll: false,
fiveMonth: [],
currentMonth: '',
currentMonthNumber: 0,
lastDisable: false,
nextDisable: true,
});
const browseDate = ref('')
const weekday = ref([])
const monthDay = ref([])
const currentDay = ref('')
const browseDate = ref('');
const weekday = ref([]);
const monthDay = ref([]);
const currentDay = ref('');
const pageState = reactive({
page: 0,
list: [],
@@ -116,104 +62,47 @@ const pageState = reactive({
maxPage: 1,
pageSize: 10,
search: {},
lastDate: ''
lastDate: '',
});
const currentDate = ref('');
onLoad(() => {
getBrowseDate()
const five = getLastFiveMonths()
state.fiveMonth = five
state.currentMonth = five[0]
state.nextDisable = true
const today = new Date().toISOString().split('T')[0]
// currentDay.value = new Date().toISOString().split('T')[0]
state.currentMonthNumber = new Date().getMonth() + 1
weekday.value = getWeekFromDate(today)
getBrowseDate();
const today = new Date().toISOString().split('T')[0];
getJobList('refresh');
currentDate.value = today;
});
onReachBottom(() => {
getJobList();
});
function toSelectDate() {
navTo('/packageA/pages/selectDate/selectDate', {
query: {
date: currentDate.value,
},
onBack: (res) => {
currentDate.value = res.date;
pageState.search.startDate = getPreviousDay(res.date);
pageState.search.endDate = res.date;
getJobList('refresh');
},
});
}
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
}
function findBrowseData(date) {
const reg = new RegExp(date, 'g')
return reg.test(browseDate.value)
}
function searchCollection(e) {
const value = e.detail.value
pageState.search.jobTitle = value
getJobList('refresh')
}
function selectDay(item) {
if(isFutureDate(item.fullDate) || !findBrowseData(item.fullDate)) {
$api.msg("这一天没有浏览记录")
} else {
pageState.search.startDate = getPreviousDay(item.fullDate)
pageState.search.endDate = item.fullDate
currentDay.value = item.fullDate
getJobList('refresh')
if(item.month !== state.currentMonthNumber) {
const today = new Date(item.fullDate);
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
if(item.month > state.currentMonthNumber) {
changeMonth('nextmonth')
} else {
changeMonth('lastmonth')
}
state.currentMonthNumber = item.month
}
}
}
function changeMonth(type) {
const currentIndex = state.fiveMonth.findIndex((item) => item === state.currentMonth)
switch(type) {
case 'lastmonth':
if(currentIndex === state.fiveMonth.length - 2) state.lastDisable = true
if(currentIndex === state.fiveMonth.length - 1) return
state.currentMonth = state.fiveMonth[currentIndex + 1]
state.nextDisable = false
$api.msg("上一月")
break
case 'nextmonth':
if(currentIndex === 1) state.nextDisable = true
if(currentIndex === 0) return
state.currentMonth = state.fiveMonth[currentIndex - 1]
state.lastDisable = false
$api.msg("下一月")
break
}
const today = new Date(state.currentMonth);
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
}
function downDateList(str) {
const today = new Date();
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
state.isAll = true
const value = e.detail.value;
pageState.search.jobTitle = value;
getJobList('refresh');
}
function getBrowseDate() {
$api.createRequest('/app/user/review/array').then((res) => {
browseDate.value = res.data.join(',')
})
browseDate.value = res.data.join(',');
});
}
function upDateList() {
if(currentDay.value) {
weekday.value = getWeekFromDate(currentDay.value)
}
state.isAll = false
}
function getJobList(type = 'add', loading = true) {
if (type === 'refresh') {
pageState.page = 1;
@@ -225,25 +114,26 @@ function getJobList(type = 'add', loading = true) {
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
...pageState.search
...pageState.search,
};
$api.createRequest('/app/user/review', params, 'GET', loading).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate')
if(reslist.length) { // 日期监测是否一致
if (reslist[0].title === pageState.lastDate) {
reslist.shift()
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate');
if (reslist.length) {
// 日期监测是否一致
if (reslist[0].title === pageState.lastDate) {
reslist.shift();
}
}
pageState.list.splice(str, end, ...reslist);
pageState.lastDate = lastDate
pageState.lastDate = lastDate;
} else {
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate')
pageState.list = reslist
pageState.lastDate = lastDate
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate');
pageState.list = reslist;
pageState.lastDate = lastDate;
}
// pageState.list = resData.rows;
pageState.total = resData.total;
@@ -251,28 +141,6 @@ function getJobList(type = 'add', loading = true) {
});
}
function getWeekFromDate(dateStr) {
const days = [];
const targetDate = new Date(dateStr);
const currentDay = targetDate.getDay(); // 获取星期几（0 表示星期日）
const sundayIndex = currentDay === 0 ? 7 : currentDay; // 让星期日变为 7
// 计算本周的起始和结束日期
for (let i = 1; i <= 7; i++) {
const date = new Date(targetDate);
date.setDate(targetDate.getDate() - (sundayIndex - i)); // 计算日期
days.push({
weekday: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i - 1],
fullDate: date.toISOString().split('T')[0], // YYYY-MM-DD 格式
day: date.getDate(),
month: date.getMonth() + 1,
year: date.getFullYear(),
});
}
return days;
}
function getPreviousDay(dateStr) {
const date = new Date(dateStr);
date.setDate(date.getDate() - 1); // 减去一天
@@ -280,155 +148,72 @@ function getPreviousDay(dateStr) {
// 格式化成 YYYY-MM-DD
return date.toISOString().split('T')[0];
}
function getLastFiveMonths() {
const result = [];
const today = new Date();
for (let i = 0; i < 5; i++) {
const date = new Date(today);
date.setMonth(today.getMonth() - i); // 往前推 i 个月
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
result.push(`${year}-${month}`);
}
return result;
}
</script>
<style lang="stylus">
.card-title
color: #5d5d5d;
font-weight: bold;
font-size: 24rpx
.nothemonth
color: #bfbfbf
.downDate
display: flex
align-items: center
justify-content: center
width: 100%
margin-top: 20rpx
.downIcon
background: #e8e8e8
border-radius: 50%
width: 40rpx
height: 40rpx
.AllDay
position: relative
padding-top: 70rpx
.monthSelect
position: absolute;
top: 0
left: 50%
transform: translate(-50%, 0)
text-align: center;
line-height: 50rpx
display: flex
align-items: center
justify-content: center
font-size: 28rpx
.monthIcon
padding: 0 10rpx
.date-7days
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center
margin-top: 10rpx
font-size: 24rpx
grid-gap: 26rpx
.day
position: relative
z-index: 2
.active
color: #FFFFFF
.active::before
position: absolute
content: ''
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 40rpx
height: 40rpx
background: #4679ef
border-radius: 7rpx
z-index: -1
.optional::after
border 2rpx solid #4679ef
position: absolute
content: ''
top: 50%
left: 50%
border-radius: 10rpx
transform: translate(-50%, -50%)
width: 40rpx
height: 40rpx
z-index: -1
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.collection-content
padding: 0 0 20rpx 0;
height: 100%
display: flex
flex-direction: column
.collection-search
padding: 10rpx 20rpx;
.search-content
position: relative
.collInput
padding: 6rpx 10rpx 6rpx 50rpx;
background: #e8e8e8
border-radius: 10rpx
.iconsearch
position: absolute
left: 10rpx
top: 50%
transform: translate(0, -50%)
.one-cards
display: flex;
flex-direction: column;
padding: 0 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
align-items: center;
.mineText
display: flex
align-items: center
padding: 14rpx 0
.header-input{
padding: 0
width: calc(100% - 48rpx);
position: relative
.iconsearch{
position: absolute
left: 30rpx;
top: 50%
transform: translate(0, -50%)
}
.input{
padding: 0 30rpx 0 80rpx
height: 80rpx;
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
border: 2rpx solid #ECECEC
font-size: 28rpx;
}
.inputplace{
font-weight: 400;
font-size: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: 6rpx;
.card-transprent
background: transparent !important;
font-size: 28rpx;
color: #B5B5B5;
}
}
.data-all{
width: 66rpx;
height: 66rpx;
margin-left: 18rpx
.allimg{
width: 100%;
height: 100%
}
}
.main-scroll{
flex: 1
overflow: hidden
}
.one-cards{
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
.card-transprent:first-child
margin: 0 !important;
padding: 0 !important
}
</style>

229
packageA/pages/choiceness/choiceness.vue
View File

@@ -1,128 +1,151 @@
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="search-bar">精选企业</view>
<!-- 格子布局 -->
<view class="grid-container">
<view
class="grid-item"
:style="{ backgroundColor: item.backgroudColor }"
v-for="item in list"
:key="item.companyCardId"
>
<text class="title">{{ item.name }}</text>
<view class="status" v-if="item.isCollection" @click="delCollectionCard(item)">已关注 ✓</view>
<view class="status" v-else @click="CollectionCard(item)">特别关注</view>
</view>
<!-- <view class="grid-item green">
<text class="title">银行招聘</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item orange">
<text class="title">世界500强</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item red">
<text class="title">中国500强</text>
<view class="status">特别关注</view>
</view> -->
</view>
</view>
<AppLayout title="精选企业">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="main">
<view class="main-header">
<view class="header-title btn-feel">企业推荐站</view>
<view class="header-text btn-feel">AI智联青岛，岗位触手可“职”！</view>
<image class="header-img btn-shaky" src="/static/icon/companyBG.png"></image>
</view>
<view class="main-content">
<view class="cards btn-feel" v-for="item in list" :key="item.companyCardId" @click="seeDetail(item)">
<view class="card-title">{{ item.name }}</view>
<view class="card-text">{{ item.description }}</view>
</view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navBack, navTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo } = inject('globalFunction');
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const list = ref([]);
onLoad(() => {
getPremiumList();
getPremiumList();
});
function CollectionCard(item) {
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
getPremiumList();
$api.msg('关注成功');
});
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
getPremiumList();
$api.msg('关注成功');
});
}
function delCollectionCard(item) {
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
getPremiumList();
$api.msg('取消关注');
});
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
getPremiumList();
$api.msg('取消关注');
});
}
function getPremiumList() {
$api.createRequest('/app/company/card').then((resData) => {
const { rows, total } = resData;
list.value = rows;
});
$api.createRequest('/app/company/card').then((resData) => {
const { rows, total } = resData;
list.value = rows;
});
}
function seeDetail(item) {
uni.setStorageSync('jinxuan', item);
navTo('/packageA/pages/choicenessList/choicenessList');
}
</script>
<style lang="stylus" scoped>
/* 页面整体样式 */
.container
background-color #edf4ff
height 100%
display flex
flex-direction column
padding 20rpx
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.main{
.main-content{
padding: 28rpx
.cards{
padding: 32rpx
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #DCDCDC;
margin-bottom: 36rpx;
position: relative;
.card-title{
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
.card-text{
margin-top: 16rpx
width: 502rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
}
.cards::before{
position: absolute;
right: 40rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #6C7282;
transform: translate(0, -50%) rotate(-45deg) ;
}
/* 搜索栏样式 */
.search-bar
font-size 32rpx
font-weight bold
color #333
margin-bottom 20rpx
.cards::after{
position: absolute;
right: 40rpx;
top: calc(50% + 1rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #6C7282;
transform: rotate(45deg)
}
/* 格子布局样式 */
.grid-container
display flex
flex-wrap wrap
justify-content space-between
gap 20rpx
.grid-item
width 48%
height 200rpx
border-radius 20rpx
display flex
flex-direction column
justify-content center
align-items center
color #fff
font-size 28rpx
font-weight bold
position relative
.status
position absolute
bottom 20rpx
font-size 24rpx
background-color rgba(255, 255, 255, 0.9)
color #333
padding 5rpx 15rpx
border-radius 15rpx
/* 每种格子对应的颜色 */
.blue
background-color #3b82f6
.green
background-color #22c55e
.orange
background-color #f59e0b
.red
background-color #ef4444
}
.main-header{
padding: 80rpx 40rpx
position: relative
.header-title{
font-weight: 400;
font-size: 56rpx;
color: #333333;
font-family: DingTalk JinBuTi;
}
.header-text{
font-weight: 400;
font-size: 32rpx;
color: rgba(3,3,3,0.5);
margin-top: 10rpx
}
.header-img{
position: absolute
right: 0
bottom: 0
// transform: translate(0, -50%)
width: 280rpx;
height: 272rpx;
}
}
}
</style>

152
packageA/pages/choicenessList/choicenessList.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<template #headContent>
<view class="collection-search">
<view class="search-content">
<view class="header-input button-click">
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
<input
class="input"
@confirm="searchCollection"
placeholder="输入企业名称"
placeholder-class="inputplace"
/>
</view>
</view>
</view>
</template>
<view class="main-list">
<renderCompanys
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</AppLayout>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
// state
const title = ref('事业单位');
const cardInfo = ref({});
const pageState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
search: {},
});
onLoad(() => {
const options = uni.getStorageSync('jinxuan');
if (options) {
cardInfo.value = options;
title.value = options.name;
} else {
$api.msg('请传入精选企业参数');
}
getDataList('refresh');
});
// search
function searchCollection(e) {
const value = e.detail.value;
pageState.search.companyName = value;
getDataList('refresh');
}
// list
function getDataList(type = 'add') {
if (type === 'refresh') {
pageState.page = 0;
pageState.maxPage = 1;
}
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
cardId: cardInfo.value.companyCardId,
...pageState.search,
};
$api.createRequest('/app/company/label', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.collection-search{
padding: 10rpx 20rpx;
.search-content{
position: relative
display: flex
align-items: center
padding: 14rpx 0
.header-input{
padding: 0
width: calc(100%);
position: relative
.iconsearch{
position: absolute
left: 30rpx;
top: 50%
transform: translate(0, -50%)
}
.input{
padding: 0 30rpx 0 80rpx
height: 80rpx;
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
border: 2rpx solid #ECECEC
font-size: 28rpx;
}
.inputplace{
font-weight: 400;
font-size: 28rpx;
color: #B5B5B5;
}
}
}
}
.main-list{
background-color: #F4F4F4;
padding: 1rpx 28rpx 28rpx 28rpx
}
</style>

234
packageA/pages/collection/collection.vue
View File

@@ -1,57 +1,58 @@
<template>
<view class="collection-content">
<view class="one-cards">
<view class="card-box" v-for="(item, index) in pageState.list" :key="index" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.educatio">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<!-- <uni-icons type="star" size="28"></uni-icons> -->
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<!-- 550m -->
</view>
</view>
<AppLayout title="我的收藏" :show-bg-image="false" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="collection-content">
<view class="header">
<view class="button-click" :class="{ active: type === 0 }" @click="changeType(0)">工作职位</view>
<view class="button-click" :class="{ active: type === 1 }" @click="changeType(1)">公司企业</view>
</view>
<view class="coll-main">
<swiper class="swiper" :current="type" @change="changeSwiperType">
<swiper-item class="list">
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<view class="mian">
<renderJobs
:list="pageState.list"
v-if="pageState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="list">
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLowerCompany">
<view class="mian">
<renderCompanys
:list="pageCompanyState.list"
v-if="pageCompanyState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import img from '/static/icon/filter.png';
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, vacanciesTo } = inject('globalFunction');
const userStore = useUserStore();
const state = reactive({});
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navBack } = inject('globalFunction');
const type = ref(0);
const pageState = reactive({
page: 0,
list: [],
@@ -59,15 +60,35 @@ const pageState = reactive({
maxPage: 1,
pageSize: 10,
});
onLoad(() => {
getJobList();
const pageCompanyState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
});
onReachBottom(() => {
onShow(() => {
getJobList();
getCompanyList();
});
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
function changeSwiperType(e) {
const current = e.detail.current;
type.value = current;
}
function changeType(e) {
type.value = e;
}
function handleScrollToLower() {
getJobList();
}
function handleScrollToLowerCompany() {
getCompanyList();
}
function getJobList(type = 'add') {
@@ -97,45 +118,78 @@ function getJobList(type = 'add') {
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
function getCompanyList(type = 'add') {
if (type === 'refresh') {
pageCompanyState.page = 0;
pageCompanyState.maxPage = 1;
}
if (type === 'add' && pageCompanyState.page < pageCompanyState.maxPage) {
pageCompanyState.page += 1;
}
let params = {
current: pageCompanyState.page,
pageSize: pageCompanyState.pageSize,
};
$api.createRequest('/app/user/collection/company', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageCompanyState.pageSize * (pageCompanyState.page - 1);
const end = pageCompanyState.list.length;
const reslist = rows;
pageCompanyState.list.splice(str, end, ...reslist);
} else {
pageCompanyState.list = rows;
}
// pageCompanyState.list = resData.rows;
pageCompanyState.total = resData.total;
pageCompanyState.maxPage = Math.ceil(pageCompanyState.total / pageCompanyState.pageSize);
});
}
</script>
<style lang="stylus">
.collection-content
padding: 20rpx 0 20rpx 0;
.one-cards
<style lang="stylus" scoped>
.btn {
display: flex;
flex-direction: column;
padding: 0 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.collection-content{
background: #F4F4F4;
height: 100%
display: flex
flex-direction: column
.header{
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
align-items: center;
.mineText
font-weight: 400;
font-size: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: 6rpx;
display: flex
justify-content: space-evenly;
align-items: center
padding: 28rpx 100rpx
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
.active {
font-weight: 500;
font-size: 32rpx;
color: #000000;
}
}
.coll-main{
flex: 1
overflow: hidden
.main-scroll,
.swiper{
height: 100%
.mian{
padding: 0 28rpx 28rpx 28rpx
}
}
}
}
</style>

655
packageA/pages/exhibitors/exhibitors.vue
View File

@@ -1,147 +1,536 @@
<template>
<view class="container">
<!-- 招聘会详情标题 -->
<view class="header">
<text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
<view class="header-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 市南区延安三路105号
</view>
<text class="date">2024年7月31日 周三</text>
<AppLayout title="" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</view>
<!-- 参会单位列表 -->
<view class="company-list">
<text class="section-title">参会单位</text>
<view class="company-row" v-for="company in companies" :key="company.id">
<view class="left">
<view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
<view class="company-info">
<text class="company-name line_2">{{ company.name }}</text>
<text class="industry">{{ company.industry }}</text>
<view class="details">
<text>查看详情</text>
<uni-icons type="star" size="26"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
</template>
<view class="content">
<view class="content-top">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1 line_2">{{ fairInfo?.name }}</view>
<view class="row2">
<text>{{ fairInfo.location }}</text>
<convert-distance
:alat="fairInfo.latitude"
:along="fairInfo.longitude"
:blat="latitudeVal"
:blong="longitudeVal"
></convert-distance>
</view>
</view>
</view>
<view class="locations">
<image class="location-img" src="/static/icon/mapLine.png"></image>
<view class="location-info">
<view class="info">
<text class="info-title">{{ fairInfo.address }}</text>
<text class="info-text">位置</text>
</view>
</view>
</view>
<view class="conetent-info" :class="{ expanded: isExpanded }">
<view class="info-title">内容描述</view>
<view class="info-desirption">{{ fairInfo.description }}</view>
<!-- <view class="info-title title2">公司地址</view>
<view class="locationCompany"></view> -->
<view class="company-times">
<view class="info-title">内容描述</view>
<view class="card-times">
<view class="time-left">
<view class="left-date">{{ parseDateTime(fairInfo.startTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(fairInfo.startTime).date }}</view>
</view>
<view class="line"></view>
<view class="time-center">
<view class="center-date">
{{ getTimeStatus(fairInfo.startTime, fairInfo.endTime).statusText }}
</view>
<view class="center-dateDay">
{{ getHoursBetween(fairInfo.startTime, fairInfo.endTime) }}小时
</view>
</view>
<view class="line"></view>
<view class="time-right">
<view class="left-date">{{ parseDateTime(fairInfo.endTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(fairInfo.endTime).date }}</view>
</view>
</view>
</view>
</view>
<view class="expand" @click="expand">
<text>{{ isExpanded ? '收起' : '展开' }}</text>
<image
class="expand-img"
:class="{ 'expand-img-active': !isExpanded }"
src="@/static/icon/downs.png"
></image>
</view>
<scroll-view scroll-y class="Detailscroll-view">
<view class="views">
<view class="Detail-title">
<text class="title">参会单位（{{ companyList.length }}）</text>
</view>
<renderCompanys
v-if="companyList.length"
:list="companyList"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</view>
</view>
<template #footer>
<view class="footer" v-if="hasnext">
<view
class="btn-wq button-click"
:class="{ 'btn-desbel': fairInfo.isCollection }"
@click="applyExhibitors"
>
{{ fairInfo.isCollection ? '已预约招聘会' : '预约招聘会' }}
</view>
</view>
</template>
</AppLayout>
</template>
<script>
export default {
data() {
return {
companies: [
{
id: 1,
name: '湖南沃森电器科技有限公司',
industry: '制造业 100-299人',
},
{
id: 2,
name: '青岛成达汽车销售集团',
industry: '制造业 100-299人',
},
{
id: 3,
name: '青岛日森电器有限公司',
industry: '制造业 100-299人',
},
{
id: 4,
name: '青岛融合网络通信有限公司',
industry: '制造业 100-299人',
},
],
};
},
<script setup>
import point from '@/static/icon/point.png';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import useLocationStore from '@/stores/useLocationStore';
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const isExpanded = ref(false);
const fairInfo = ref({});
const companyList = ref([]);
const hasnext = ref(true);
onLoad((options) => {
getCompanyInfo(options.jobFairId);
});
function getCompanyInfo(id) {
$api.createRequest(`/app/fair/${id}`).then((resData) => {
fairInfo.value = resData.data;
companyList.value = resData.data.companyList;
hasAppointment();
});
}
const hasAppointment = () => {
const isTimePassed = (timeStr) => {
const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
const now = Date.now();
return now < targetTime;
};
hasnext.value = isTimePassed(fairInfo.value.startTime);
};
function openMap(lat, lng, name = '位置') {
const isConfirmed = window.confirm('是否打开地图查看位置？');
if (!isConfirmed) return;
// 使用高德地图或百度地图的 H5 链接打开
const url = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(name)}`;
window.location.href = url;
}
function expand() {
isExpanded.value = !isExpanded.value;
}
// 取消/收藏岗位
function applyExhibitors() {
const fairId = fairInfo.value.jobFairId;
if (fairInfo.value.isCollection) {
// $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
// getCompanyInfo(fairId);
// $api.msg('取消预约成功');
// });
$api.msg('已预约成功');
} else {
$api.createRequest(`/app/fair/collection/${fairId}`, {}, 'POST').then((resData) => {
getCompanyInfo(fairId);
$api.msg('预约成功');
});
}
}
function parseDateTime(datetimeStr) {
if (!datetimeStr) return { time: '', date: '' };
const dateObj = new Date(datetimeStr);
if (isNaN(dateObj.getTime())) return { time: '', date: '' }; // 无效时间
const year = dateObj.getFullYear();
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
const hours = String(dateObj.getHours()).padStart(2, '0');
const minutes = String(dateObj.getMinutes()).padStart(2, '0');
return {
time: `${hours}:${minutes}`,
date: `${year}年${month}月${day}日`,
};
}
function getTimeStatus(startTimeStr, endTimeStr) {
const now = new Date();
const startTime = new Date(startTimeStr);
const endTime = new Date(endTimeStr);
// 判断状态：0 开始中，1 过期，2 待开始
let status = 0;
let statusText = '开始中';
if (now < startTime) {
status = 2; // 待开始
statusText = '待开始';
} else if (now > endTime) {
status = 1; // 已过期
statusText = '已过期';
} else {
status = 0; // 进行中
statusText = '进行中';
}
return {
status, // 0: 进行中，1: 已过期，2: 待开始
statusText,
};
}
function getHoursBetween(startTimeStr, endTimeStr) {
const start = new Date(startTimeStr);
const end = new Date(endTimeStr);
const diffMs = end - start;
const diffHours = diffMs / (1000 * 60 * 60);
return +diffHours.toFixed(2); // 保留 2 位小数
}
</script>
<style lang="stylus" scoped>
.container
display flex
flex-direction column
background-color #f8f8f8
.header
padding 20rpx 40rpx
background-color #fff
.header-title
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.header-info
margin-top: 20rpx
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
.date
flex-shrink 0
.company-list
padding 20rpx
background-color #fff
margin-top 10rpx
.section-title
padding 20rpx
font-size 40rpx
font-weight bold
margin-bottom 10rpx
.company-row
display flex
justify-content space-between
align-items center
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
align-items center
width: 100%
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.content{
height: 100%
.logo
background-color #22c55e
color #fff
font-size 24rpx
font-weight bold
width: 235rpx;
height: 164rpx;
display flex
align-items center
justify-content center
border-radius 12rpx
margin-right 20rpx
.company-info
min-height 164rpx
flex 1
display flex
flex-direction column
justify-content space-between
.company-name
font-size 28rpx
color #333
font-weight bold
.industry
font-size 24rpx
color #666
.details
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
display: flex;
flex-direction: column
.content-top{
padding: 28rpx
padding-top: 50rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
flex: 1
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
display: flex
justify-content: space-between
}
}
}
.locations{
padding: 0 28rpx
height: 86rpx;
position: relative
margin-bottom: 36rpx
.location-img{
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #EFEFEF;
}
.location-info{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.info{
padding: 0 60rpx
height: 100%
display: flex
align-items: center
justify-content: space-between
white-space: nowrap
padding-top: rpx
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.info-text{
font-weight: 400;
font-size: 28rpx;
color: #9B9B9B;
position: relative;
padding-right: 20rpx
}
.info-text::before{
position: absolute;
right: 0;
top: 50%;
content: '';
width: 4rpx;
height: 16rpx;
border-radius: 2rpx
background: #9B9B9B;
transform: translate(0, -75%) rotate(-45deg)
}
.info-text::after {
position: absolute;
right: 0;
top: 50%;
content: '';
width: 4rpx;
height: 16rpx;
border-radius: 2rpx
background: #9B9B9B;
transform: translate(0, -25%) rotate(45deg)
}
}
}
}
.conetent-info{
padding: 0 28rpx
overflow: hidden;
max-height: 0rpx;
transition: max-height 0.3s ease;
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.info-desirption{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
text-align: justified;
}
.title2{
margin-top: 48rpx
}
}
.company-times{
padding-top: 40rpx
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
}
.expanded {
max-height: 1000rpx; // 足够显示完整内容
}
.expand{
display: flex
flex-wrap: nowrap
white-space: nowrap
justify-content: center
margin-bottom: 46rpx
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
.expand-img{
width: 40rpx;
height: 40rpx;
}
.expand-img-active{
transform: rotate(180deg)
}
}
}
.Detailscroll-view{
flex: 1;
overflow: hidden;
background: #F4F4F4;
.views{
padding: 28rpx
.Detail-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
}
.Detail-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
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
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 32rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
}
}
.card-times{
display: flex;
justify-content: space-between
align-items: center
padding: 24rpx 30rpx 10rpx 30rpx
.time-left,
.time-right{
text-align: center
.left-date{
font-weight: 500;
font-size: 48rpx;
color: #333333;
}
.left-dateDay{
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-top: 12rpx
}
}
.line{
width: 40rpx;
height: 0rpx;
border: 2rpx solid #D4D4D4;
margin-top: 64rpx
}
.time-center{
text-align: center;
display: flex
flex-direction: column
justify-content: center
align-items: center
.center-date{
font-weight: 400;
font-size: 28rpx;
color: #FF881A;
padding-top: 10rpx
}
.center-dateDay{
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-top: 6rpx
line-height: 48rpx;
width: 104rpx;
height: 48rpx;
background: #F9F9F9;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
}
.footer{
background: #FFFFFF;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx
.btn-wq{
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
}
.btn-desbel{
background: #6697FB;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
}
}
</style>

271
packageA/pages/jobExpect/jobExpect.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<AppLayout
title="求职期望"
:sub-title="`完成度${percent}`"
border
back-gorund-color="#ffffff"
:show-bg-image="false"
>
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-input" @click="changeSalary">
<view class="input-titile">期望薪资</view>
<input class="input-con triangle" v-model="state.salayText" disabled placeholder="请选择您的期望薪资" />
</view>
<view class="content-input" @click="changeArea">
<view class="input-titile">期望工作地</view>
<input
class="input-con triangle"
v-model="state.areaText"
disabled
placeholder="请选择您的期望工作地"
/>
</view>
<view class="content-input" @click="changeJobs">
<view class="input-titile">求职岗位</view>
<input
class="input-con triangle"
disabled
v-if="!state.jobsText.length"
placeholder="请选择您的求职岗位"
/>
<view class="input-nx" @click="changeJobs" v-else>
<view class="nx-item button-click" v-for="item in state.jobsText">{{ item }}</view>
</view>
</view>
</view>
<SelectJobs ref="selectJobsModel"></SelectJobs>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navTo, navBack } = inject('globalFunction');
const openSelectPopup = inject('openSelectPopup');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();
const selectJobsModel = ref();
const percent = ref('0%');
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
risalay: JSON.parse(JSON.stringify(salay)),
salayText: '',
areaText: '',
jobsText: [],
});
const fromValue = reactive({
salaryMin: 0,
salaryMax: 0,
area: '',
jobTitleId: [],
});
onLoad(() => {
initLoad();
});
const confirm = () => {
if (!fromValue.jobTitleId) {
return $api.msg('请选择您的求职岗位');
}
$api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
});
};
watch(userInfo, (newValue, oldValue) => {
initLoad();
});
function initLoad() {
fromValue.salaryMin = userInfo.value.salaryMin;
fromValue.salaryMax = userInfo.value.salaryMax;
fromValue.area = userInfo.value.area;
fromValue.jobTitleId = userInfo.value.jobTitleId;
// 回显
state.areaText = dictLabel('area', Number(userInfo.value.area));
state.salayText = `${userInfo.value.salaryMin}-${userInfo.value.salaryMax}`;
state.jobsText = userInfo.value.jobTitle;
const result = getFormCompletionPercent(fromValue);
percent.value = result;
}
const changeSalary = () => {
let leftIndex = 0;
openSelectPopup({
title: '薪资',
maskClick: true,
data: [state.lfsalay, state.risalay],
unit: 'k',
success: (_, [min, max]) => {
fromValue.salaryMin = min.value * 1000;
fromValue.salaryMax = max.value * 1000;
state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
},
change(e) {
const salayData = e.detail.value;
if (leftIndex !== salayData[0]) {
const copyri = JSON.parse(JSON.stringify(salay));
const [lf, ri] = e.detail.value;
const risalay = copyri.slice(lf, copyri.length);
this.setColunm(1, risalay);
leftIndex = salayData[0];
}
},
});
};
function changeArea() {
openSelectPopup({
title: '区域',
maskClick: true,
data: [oneDictData('area')],
success: (_, [value]) => {
fromValue.area = value.value;
state.areaText = '青岛市-' + value.label;
},
});
}
function changeJobs() {
selectJobsModel.value?.open({
title: '添加岗位',
success: (ids, labels) => {
fromValue.jobTitleId = ids;
state.jobsText = labels.split(',');
},
});
}
function getFormCompletionPercent(form) {
let total = Object.keys(form).length;
let filled = 0;
for (const key in form) {
const value = form[key];
if (value !== '' && value !== null && value !== undefined) {
if (typeof value === 'number') {
filled += 1;
} else if (typeof value === 'string' && value.trim() !== '') {
filled += 1;
}
}
}
if (total === 0) return '0%';
const percent = (filled / total) * 100;
return percent.toFixed(0) + '%'; // 取整，不要小数点
}
</script>
<style lang="stylus" scoped>
.btn{
margin-top: -30rpx
}
.content{
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: flex-start
height: calc(100% - 120rpx)
}
.content-input
margin-bottom: 52rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
position: relative;
.triangle::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.triangle::after
position: absolute;
right: 20rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
.sex-titile
line-height: 80rpx;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
font-weight: 400;
font-size: 28rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
.next-btn
width: 100%;
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
.input-nx
position: relative
border-bottom: 2rpx solid #EBEBEB
padding-bottom: 30rpx
display: flex
flex-wrap: wrap
.nx-item
padding: 20rpx 28rpx
width: fit-content
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-right: 24rpx
margin-top: 24rpx
</style>

750
packageA/pages/myResume/myResume.vue
View File

@@ -1,631 +1,179 @@
<template>
<view class="container">
<!-- 头部信息 -->
<view class="header">
<view class="avatar"></view>
<view class="info">
<view class="name-row">
<text class="name" v-if="state.disbleName">{{ state.name || '编辑用户名' }}</text>
<input
class="uni-input name"
style="padding-top: 6px"
v-else
v-model="state.name"
placeholder-class="name"
type="text"
placeholder="输入用户名"
/>
<view class="edit-icon">
<view class="mys-container">
<!-- 个人信息 -->
<view class="mys-tops btn-feel">
<view class="tops-left">
<view class="name">
<text>{{ userInfo.name || '编辑用户名' }}</text>
<view class="edit-icon mar_le10">
<image
class="img"
v-if="state.disbleName"
src="../../../static/icon/edit.png"
@click="editName"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeUserName"></image>
</view>
</view>
<text class="details">
<dict-Label dictType="sex" :value="userInfo.sex"></dict-Label>
{{ state.age }}岁
</text>
</view>
</view>
<!-- 简历信息 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">出生年月：</text>
<!-- <text class="value">2001/01/01</text> -->
<picker
mode="date"
:disabled="state.disbleDate"
:value="state.date"
:start="startDate"
:end="endDate"
@change="bindDateChange"
>
<view class="uni-input">{{ state.date }}</view>
</picker>
<view class="edit-icon">
<image
v-if="state.disbleDate"
class="img"
src="../../../static/icon/edit.png"
@click="editResume"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeResume"></image>
</view>
</view>
<view class="card-content">
<text class="label">学历：</text>
<!-- <text class="value">
<dict-Label dictType="education" :value="userInfo.education"></dict-Label>
</text> -->
<picker
@change="bindEducationChange"
range-key="label"
:disabled="state.disbleDate"
:value="state.education"
:range="state.educationList"
>
<view class="uni-input">{{ state.educationList[state.education].label }}</view>
</picker>
</view>
<view class="card-content">
<text class="label">政治面貌：</text>
<!-- <text class="value">2001/01/01</text> -->
<picker
@change="bindPoliticalAffiliationChange"
range-key="label"
:disabled="state.disbleDate"
:value="state.politicalAffiliation"
:range="state.affiliationList"
>
<view class="uni-input">{{ state.affiliationList[state.politicalAffiliation].label }}</view>
</picker>
</view>
<view class="card-content" style="padding-bottom: 3px">
<text class="label">联系方式：</text>
<!-- <text class="value">2001/01/01</text> -->
<input
class="uni-input"
style="padding-top: 6px"
:disabled="state.disbleDate"
v-model="state.phone"
placeholder-class="value"
type="number"
placeholder="输入手机号"
/>
</view>
</view>
</view>
<!-- 期望职位 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望职位：</text>
<view class="value">
<view v-for="item in userInfo.jobTitle" :key="item">{{ item }}</view>
</view>
<view class="edit-icon">
<image class="img" @click="editJobs" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
</view>
<!-- 期望薪资 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望薪资：</text>
<view class="value">
<picker
@change="changeSalary"
@columnchange="changeColumeSalary"
range-key="label"
:disabled="state.disbleSalary"
:value="state.salary"
:range="state.salayList"
mode="multiSelector"
>
<view class="uni-input">{{ state.salaryMin / 1000 }}k-{{ state.salaryMax / 1000 }}k</view>
</picker>
</view>
<view class="edit-icon">
<image
v-if="state.disbleSalary"
class="img"
src="../../../static/icon/edit.png"
@click="salaryExpectation"
></image>
<image
v-else
class="img"
src="../../../static/icon/save.png"
@click="completesalaryExpectation"
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/personalInfo/personalInfo')"
></image>
</view>
</view>
<view class="subName">
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
<text class="mar_ri10">{{ userInfo.age }}岁</text>
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
<dict-Label
class="mar_ri10"
dictType="affiliation"
:value="userInfo.politicalAffiliation"
></dict-Label>
</view>
<view class="subName">{{ userInfo.phone }}</view>
</view>
</view>
<!-- 期望工作地 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label long">期望工作地：</text>
<view class="value">
<view v-if="state.disaleArea">
青岛 -
<dict-Label dictType="area" :value="Number(state.area)"></dict-Label>
</view>
<view v-else>
<picker
@change="bindAreaChange"
range-key="label"
:disabled="state.disaleArea"
:value="state.area"
:range="state.areaList"
>
<view class="uni-input">
青岛 -
{{ state.areaList[state.area].label }}
</view>
</picker>
</view>
</view>
<view class="edit-icon">
<image
v-if="state.disaleArea"
class="img"
src="../../../static/icon/edit.png"
@click="state.disaleArea = false"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeArea"></image>
</view>
<view class="tops-right">
<view class="right-imghead">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
<image v-else src="@/static/icon/girl.png"></image>
</view>
<view class="right-sex">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy1.png"></image>
<image v-else src="@/static/icon/girl1.png"></image>
</view>
</view>
</view>
<!-- 上传按钮 -->
<view class="upload-btn">
<button class="btn">
<uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
上传简历
</button>
</view>
<!-- piker -->
<custom-popup :content-h="100" :visible="state.visible" :header="false">
<view class="popContent">
<view class="s-header">
<view class="heade-lf" @click="state.visible = false">取消</view>
<view class="heade-ri" @click="confimPopup">确认</view>
</view>
<view class="sex-content fl_1">
<expected-station
:search="false"
@onChange="changeJobTitleId"
:station="state.stations"
:max="5"
></expected-station>
<!-- 求职期望 -->
<view class="mys-line"></view>
<view class="mys-info">
<view class="mys-h4">
<text>求职期望</text>
<view class="mys-edit-icon">
<image
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/jobExpect/jobExpect')"
></image>
</view>
</view>
</custom-popup>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog
mode="base"
title="确定退出登录吗？"
type="info"
:duration="2000"
:before-close="true"
@confirm="confirm"
@close="close"
></uni-popup-dialog>
</uni-popup>
<view class="mys-text">
<text>期望薪资：</text>
<text>{{ userInfo.salaryMin / 1000 }}k-{{ userInfo.salaryMax / 1000 }}k</text>
</view>
<view class="mys-text">
<text>期望工资地：</text>
<text>青岛市-</text>
<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
</view>
<view class="mys-list">
<view class="cards button-click" v-for="(title, index) in userInfo.jobTitle" :key="index">
{{ title }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
const { $api, navTo } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo, checkingPhoneRegExp, salaryGlobal, setCheckedNodes } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { getDictData, oneDictData } = useDictStore();
const userInfo = ref({});
const salay = salaryGlobal();
const state = reactive({
date: getDate(),
education: 0,
politicalAffiliation: 0,
phone: '',
name: '',
jobTitleId: '',
salaryMin: 2000,
salaryMax: 2000,
area: 0,
salary: [0, 0],
disbleDate: true,
disbleName: true,
disbleSalary: true,
disaleArea: true,
visible: false,
educationList: oneDictData('education'),
affiliationList: oneDictData('affiliation'),
areaList: oneDictData('area'),
stations: [],
copyData: {},
salayList: [salay, salay[0].children],
});
const startDate = computed(() => {
return getDate('start');
});
const endDate = computed(() => {
return getDate('end');
});
onShow(() => {
initload();
});
onLoad(() => {
setTimeout(() => {
const { age, birthDate } = useUserStore().userInfo;
const newAge = calculateAge(birthDate);
// 计算年龄是否对等
if (age != newAge) {
console.log(age, newAge);
completeResume();
}
}, 1000);
});
const calculateAge = (birthDate) => {
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
// 如果生日的月份还没到，或者刚到生日月份但当天还没过，则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
return age;
};
function initload() {
userInfo.value = useUserStore().userInfo;
state.name = userInfo.value.name;
state.date = userInfo.value.birthDate;
state.age = userInfo.value.age;
state.phone = userInfo.value.phone;
state.salaryMax = userInfo.value.salaryMax;
state.salaryMin = userInfo.value.salaryMin;
state.area = userInfo.value.area;
state.educationList.map((iv, index) => {
if (iv.value === userInfo.value.education) state.education = index;
});
state.affiliationList.map((iv, index) => {
if (iv.value === userInfo.value.politicalAffiliation) state.politicalAffiliation = index;
});
$api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
if (userInfo.value.jobTitleId) {
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
setCheckedNodes(resData.data, ids);
}
state.jobTitleId = userInfo.value.jobTitleId;
state.stations = resData.data;
});
}
function bindAreaChange(val) {
state.area = val.detail.value;
}
function bindDateChange(val) {
state.date = val.detail.value;
}
function bindEducationChange(val) {
state.education = val.detail.value;
}
function bindPoliticalAffiliationChange(val) {
state.politicalAffiliation = val.detail.value;
}
function completeArea() {
let params = {
area: state.area,
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disaleArea = true;
getUserResume().then(() => {
initload();
});
});
}
function completesalaryExpectation() {
let params = {
salaryMin: state.salaryMin,
salaryMax: state.salaryMax,
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleSalary = true;
getUserResume().then(() => {
initload();
});
});
}
function completeResume() {
let params = {
birthDate: state.date,
age: calculateAge(state.date),
education: state.educationList[state.education].value,
politicalAffiliation: state.affiliationList[state.politicalAffiliation].value,
phone: state.phone,
};
if (!params.birthDate) {
return $api.msg('请选择出生年月');
}
if (!params.education) {
return $api.msg('请选择学历');
}
if (!params.politicalAffiliation) {
return $api.msg('请选择政治面貌');
}
if (!checkingPhoneRegExp(params.phone)) {
return $api.msg('请输入正确手机号');
}
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
initload();
});
});
}
function completeUserName() {
if (!state.name) {
return $api.msg('请输入用户名称');
}
$api.createRequest('/app/user/resume', { name: state.name }, 'post').then((resData) => {
$api.msg('完成');
state.disbleName = true;
getUserResume().then(() => {
initload();
});
});
}
function confimPopup() {
$api.createRequest('/app/user/resume', { jobTitleId: state.jobTitleId }, 'post').then((resData) => {
$api.msg('完成');
state.visible = false;
getUserResume().then(() => {
initload();
});
});
}
function editResume() {
state.copyData.date = state.date;
state.copyData.education = state.education;
state.copyData.politicalAffiliation = state.politicalAffiliation;
state.copyData.phone = state.phone;
state.disbleDate = false;
}
function salaryExpectation() {
state.disbleSalary = false;
}
function editName() {
state.name = userInfo.value.name;
state.disbleName = false;
}
function changeJobTitleId(ids) {
state.jobTitleId = ids;
}
function editJobs() {
state.visible = true;
}
function changeColumeSalary(e) {
const { column, value } = e.detail;
if (column === 0) {
state.salary[1] = 0;
state.salayList[1] = salay[value].children;
}
}
function changeSalary(e) {
const [minIndex, maxIndex] = e.detail.value;
const min = state.salayList[0][minIndex];
const max = state.salayList[0][minIndex].children[maxIndex];
state.salaryMin = min.value;
state.salaryMax = max.value;
}
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
</script>
<style lang="stylus" scoped>
.container
image{
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
display: flex;
flex-direction: column;
align-items center
height: 100%
}
.mys-container{
.mys-tops{
display: flex
justify-content: space-between
padding: 52rpx 48rpx
.tops-left{
.name{
font-weight: 600;
font-size: 44rpx;
color: #333333;
display: flex
align-items: center
justify-content: flex-start
.edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
padding-bottom: 10rpx
}
}
.subName{
margin-top: 12rpx
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.header
display flex
align-items center
padding 30rpx 60rpx
width calc(100% - 120rpx)
border-radius 0 0 20rpx 20rpx
.avatar
width 100rpx
height 100rpx
background-color #ccc
border-radius 50%
margin-right 20rpx
.info
display flex
flex-direction column
.name-row
display flex
align-items center
position relative
.name
font-size 36rpx
font-weight bold
color #fff
.edit-icon
width 40rpx
height 40rpx
border-radius 50%
position: absolute
right: -60rpx
top: 6rpx
.img
width: 100%
height: 100%
.details
font-size 24rpx
color #dbeafe
.resume-info
padding: 0 26rpx
width calc(100% - 52rpx)
margin-top 20rpx
.info-card
display flex
flex-direction: column
justify-content space-between
align-items center
color #fff
padding 10rpx 24rpx
border-radius 12rpx
margin-bottom 10rpx
background: #4778EC;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
border-radius: 17rpx 17rpx 17rpx 17rpx;
position: relative
.card-content
width: 100%
display flex
line-height: 58rpx
margin-top 16rpx
position: relative
.label
width 160rpx
height: 32rpx
font-size 28rpx
color #FFFFFF
text-align:justify;
margin-right: 20rpx
.long
width 180rpx
margin-right: 0rpx
.label:after
content: '';
display: inline-block;
width: 100%;
.value
font-size: 28rpx;
color: #FFFFFF;
.card-content:first-child
margin-top 0
.edit-icon
position: absolute
right: 10rpx
top: 10rpx
width 40rpx
height 40rpx
.img
width: 100%
height: 100%
.upload-btn
margin-top 20rpx
.btn
display: flex
align-items: center
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
height 80rpx
background-color #22c55e
color #fff
font-size 28rpx
font-weight bold
border-radius 20rpx
/* popup */
.popContent {
padding: 24rpx;
background: #4778ec;
height: calc(100% - 49rpx);
.sex-content {
border-radius: 20rpx;
width: 100%;
margin-top: 20rpx;
margin-bottom: 40rpx;
display: flex;
overflow: hidden;
height: calc(100% - 100rpx);
border: 1px solid #4778ec;
}
.s-header {
display: flex;
justify-content: space-between;
text-align: center;
font-size: 16px;
.heade-lf {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #666666;
color: #666666;
background: #ffffff;
}
.heade-ri {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #1b66ff;
background-color: #1b66ff;
color: #ffffff;
.tops-right{
position: relative
.right-imghead{
width: 136rpx;
height: 136rpx;
border-radius: 50%;
background: #e8e8e8
overflow: hidden
}
.right-sex{
position: absolute
right: -10rpx
top: -10rpx
width: 50rpx
height: 50rpx
}
}
}
.mys-line{
margin: 0 28rpx
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx dashed #000000;
opacity: 0.16;
}
.mys-info{
padding: 28rpx
.mys-h4{
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin-bottom: 8rpx
display: flex;
justify-content: space-between
align-items: center
.mys-edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
}
}
.mys-text{
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-top: 16rpx
}
.mys-list{
display: flex
align-items: center
flex-wrap: wrap;
.cards{
margin: 28rpx 28rpx 0 0
height: 80rpx;
padding: 0 38rpx;
width: fit-content
display: flex
align-items: center
justify-content: center
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
}
}
}
}

340
packageA/pages/personalInfo/personalInfo.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<AppLayout
title="个人信息"
:sub-title="`完成度${percent}`"
border
back-gorund-color="#ffffff"
:show-bg-image="false"
>
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-input">
<view class="input-titile">姓名</view>
<input class="input-con" v-model="fromValue.name" placeholder="请输入您的姓名" />
</view>
<view class="content-sex">
<view class="sex-titile">性别</view>
<view class="sext-ri">
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 0 }" @click="changeSex(0)">
男
</view>
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 1 }" @click="changeSex(1)">
女
</view>
</view>
</view>
<view class="content-input" @click="changeDateBirt">
<view class="input-titile">出生年月</view>
<input
class="input-con triangle"
v-model="fromValue.birthDate"
disabled
placeholder="请选择您的出生年月"
/>
</view>
<view class="content-input" @click="changeEducation">
<view class="input-titile">学历</view>
<input class="input-con triangle" v-model="state.educationText" disabled placeholder="请选择您的学历" />
</view>
<view class="content-input" @click="changePoliticalAffiliation">
<view class="input-titile">政治面貌</view>
<input
class="input-con triangle"
v-model="state.politicalAffiliationText"
disabled
placeholder="请选择您的政治面貌"
/>
</view>
<view class="content-input">
<view class="input-titile">手机号码</view>
<input class="input-con" v-model="fromValue.phone" placeholder="请输入您的手机号码" />
</view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack, checkingPhoneRegExp } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
const percent = ref('0%');
const state = reactive({
educationText: '',
politicalAffiliationText: '',
});
const fromValue = reactive({
name: '',
sex: 0,
birthDate: '',
education: '',
politicalAffiliation: '',
});
onLoad(() => {
initLoad();
// setTimeout(() => {
// const { age, birthDate } = useUserStore().userInfo;
// const newAge = calculateAge(birthDate);
// // 计算年龄是否对等
// if (age != newAge) {
// completeResume();
// }
// }, 1000);
});
function initLoad() {
fromValue.name = userInfo.value.name;
fromValue.sex = Number(userInfo.value.sex);
fromValue.phone = userInfo.value.phone;
fromValue.birthDate = userInfo.value.birthDate;
fromValue.education = userInfo.value.education;
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
// 回显
state.educationText = dictLabel('education', userInfo.value.education);
state.politicalAffiliationText = dictLabel('affiliation', userInfo.value.politicalAffiliation);
const result = getFormCompletionPercent(fromValue);
percent.value = result;
}
const confirm = () => {
if (!fromValue.name) {
return $api.msg('请输入姓名');
}
if (!fromValue.birthDate) {
return $api.msg('请选择出生年月');
}
if (!fromValue.education) {
return $api.msg('请选择学历');
}
if (!fromValue.politicalAffiliation) {
return $api.msg('请选择政治面貌');
}
if (!checkingPhoneRegExp(fromValue.phone)) {
return $api.msg('请输入正确手机号');
}
const params = {
...fromValue,
age: calculateAge(fromValue.birthDate),
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
});
};
const changeDateBirt = () => {
const datearray = generateDatePickerArrays();
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
openSelectPopup({
title: '年龄段',
maskClick: true,
data: datearray,
defaultIndex,
success: (_, value) => {
const [year, month, day] = value;
const dateStr = `${year.value}-${month.value}-${day.value}`;
if (isValidDate(dateStr)) {
fromValue.birthDate = dateStr;
} else {
$api.msg('没有这一天');
}
},
});
};
const changeEducation = () => {
openSelectPopup({
title: '学历',
maskClick: true,
data: [oneDictData('education')],
success: (_, [value]) => {
fromValue.education = value.value;
state.educationText = value.label;
},
});
};
const changeSex = (sex) => {
fromValue.sex = sex;
};
const changePoliticalAffiliation = () => {
openSelectPopup({
title: '政治面貌',
maskClick: true,
data: [oneDictData('affiliation')],
success: (_, [value]) => {
fromValue.politicalAffiliation = value.value;
state.politicalAffiliationText = value.label;
},
});
};
function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) {
const years = [];
const months = [];
const days = [];
for (let y = startYear; y <= endYear; y++) {
years.push(y.toString());
}
for (let m = 1; m <= 12; m++) {
months.push(m.toString().padStart(2, '0'));
}
for (let d = 1; d <= 31; d++) {
days.push(d.toString().padStart(2, '0'));
}
return [years, months, days];
}
function isValidDate(dateString) {
const [year, month, day] = dateString.split('-').map(Number);
const date = new Date(year, month - 1, day); // 月份从0开始
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
}
const calculateAge = (birthDate) => {
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
// 如果生日的月份还没到，或者刚到生日月份但当天还没过，则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
return age;
};
function getFormCompletionPercent(form) {
let total = Object.keys(form).length;
let filled = 0;
for (const key in form) {
const value = form[key];
if (value !== '' && value !== null && value !== undefined) {
if (typeof value === 'number') {
filled += 1;
} else if (typeof value === 'string' && value.trim() !== '') {
filled += 1;
}
}
}
if (total === 0) return '0%';
const percent = (filled / total) * 100;
return percent.toFixed(0) + '%'; // 取整，不要小数点
}
// 主函数
function getDatePickerIndexes(dateStr) {
const [year, month, day] = dateStr.split('-');
const [years, months, days] = generateDatePickerArrays();
const yearIndex = years.indexOf(year);
const monthIndex = months.indexOf(month);
const dayIndex = days.indexOf(day);
return [yearIndex, monthIndex, dayIndex];
}
</script>
<style lang="stylus" scoped>
.btn{
margin-top: -30rpx
}
.content{
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: flex-start
height: calc(100% - 120rpx)
}
.content-input
margin-bottom: 52rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
position: relative;
.triangle::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.triangle::after
position: absolute;
right: 20rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
.sex-titile
line-height: 80rpx;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
font-weight: 400;
font-size: 28rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
.next-btn
width: 100%;
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
</style>

167
packageA/pages/post/component/radarMap.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view style="display: flex; justify-content: center; padding: 0px 0">
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// const src = ref('');
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
// 监听页面初始化
onMounted(() => {
if (Object.keys(props.value).length > 0) {
rawRadarChart();
}
});
// 监听 props.value 变化
watch(
() => props.value,
(newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
const { skill, experience, education, salary, age, location } = newVal.radarChart;
const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
rawRadarChart(labels, data);
}
},
{ deep: true, immediate: false } // deep 递归监听对象内部变化
);
function rawRadarChart(labels, data) {
const ctx = uni.createCanvasContext('radarCanvas');
const width = 80;
const height = 80;
const centerX = 150;
const centerY = 125;
// const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
// const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
const maxScore = 5; // 数据最大值
const angleStep = (2 * Math.PI) / labels.length;
// 绘制背景多边形
ctx.setLineWidth(1);
ctx.setStrokeStyle('#F6F6F6');
//底部圆盘
ctx.beginPath();
ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
ctx.setFillStyle('#FFFFFF');
ctx.closePath();
ctx.fill();
//多边形圈
// 多边形圈
for (let i = 5; i > 0; i--) {
ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
ctx.beginPath();
labels.forEach((label, index) => {
const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.stroke(); // 只描边，不填充
}
// //竖线
labels.forEach((label, index) => {
ctx.setStrokeStyle('#F5F5F5');
ctx.setFillStyle('#F5F5F5');
ctx.beginPath();
const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
const x = centerX + width * Math.sin(angleStep * index);
const y = centerY + height * Math.cos(angleStep * index);
ctx.moveTo(x1, y1);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
});
// 绘制雷达图数据
ctx.setStrokeStyle('#256BFA');
ctx.setFillStyle('rgba(37,107,250, 0.24)');
ctx.setLineWidth(2);
ctx.beginPath();
const pointList = []; // 记录每个点的位置，等会画小圆点
data.forEach((score, index) => {
const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
pointList.push({ x, y }); // 保存位置
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.fill();
ctx.stroke();
// 绘制每个小圆点
ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
pointList.forEach((point) => {
ctx.beginPath();
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
ctx.fill();
});
// 绘制标签
ctx.setTextAlign('center');
labels.forEach((label, index) => {
const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
//标题
ctx.setFillStyle('#000');
ctx.setFontSize(12);
ctx.font = 'bold 12px sans-serif';
ctx.fillText(label, x, y);
// ctx.setFillStyle('#A2A4A2');
// ctx.font = '12px sans-serif';
// ctx.setFontSize(12);
// ctx.fillText(data[index], x, y + 16);
});
ctx.draw();
//转图片
// uni.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: 320,
// height: 320,
// destWidth: 840,
// destHeight: 840,
// canvasId: 'radarCanvas',
// success: (res) => {
// // 在H5平台下，tempFilePath 为 base64
// src = res.tempFilePath;
// },
// });
}
</script>
<style></style>

158
packageA/pages/post/component/videoPlayer.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<!-- 小窗播放容器 -->
<view
v-if="visible"
class="mini-player"
:style="{
left: position.x + 'px',
top: position.y + 'px',
width: isFullScreen ? '100%' : '300rpx',
height: isFullScreen ? '100vh' : '200rpx',
}"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@touchmove.stop.prevent
>
<!-- 视频组件 -->
<video
:src="videoUrl"
:controls="true"
:show-progress="isFullScreen"
:style="{
width: '100%',
height: '100%',
}"
id="myVideo"
@play="onPlay"
@pause="onPause"
></video>
<!-- 控制栏 -->
<view class="controls">
<!-- <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
<text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
<text @click="close">关闭</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { nextTick } from 'vue';
const visible = ref(false);
const isPlaying = ref(false);
const isFullScreen = ref(false);
const videoUrl = ref('');
const position = reactive({ x: 20, y: 100 });
const videoContext = ref(null);
const startPos = reactive({ x: 0, y: 0 });
const moving = ref(false);
// 初始化视频上下文
onMounted(() => {
videoContext.value = uni.createVideoContext('myVideo');
});
// 触摸开始
const handleTouchStart = (e) => {
if (isFullScreen.value) return;
startPos.x = e.touches[0].clientX - position.x;
startPos.y = e.touches[0].clientY - position.y;
moving.value = true;
};
// 触摸移动
const handleTouchMove = (e) => {
if (!moving.value || isFullScreen.value) return;
const newX = e.touches[0].clientX - startPos.x;
const newY = e.touches[0].clientY - startPos.y;
// 边界检测
const maxX = window.innerWidth - 150; // 300rpx换算后的值
const maxY = 50 + window.innerHeight - 200;
position.x = Math.max(0, Math.min(newX, maxX));
position.y = Math.max(0, Math.min(newY, maxY));
};
// 触摸结束
const handleTouchEnd = () => {
moving.value = false;
};
// 播放状态变化
const onPlay = () => {
isPlaying.value = true;
};
const onPause = () => {
isPlaying.value = false;
};
// 切换播放状态
const togglePlay = () => {
isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
};
// 切换全屏
const toggleFullScreen = () => {
isFullScreen.value = !isFullScreen.value;
if (!isFullScreen.value) {
// 退出全屏时恢复原位
position.x = 20;
position.y = 100;
}
};
// 关闭播放器
const close = () => {
visible.value = false;
videoContext.value.stop();
isPlaying.value = false;
isFullScreen.value = false;
};
// 打开播放器方法
const open = (url) => {
videoUrl.value = url;
visible.value = true;
nextTick(() => {
videoContext.value.play();
});
};
// 暴露方法
defineExpose({ open });
</script>
<style scoped>
.mini-player {
position: fixed;
z-index: 999;
background: #000;
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
}
.controls {
position: absolute;
top: 0;
right: 0;
/* background: rgba(0, 0, 0, 0.7); */
padding: 10rpx;
display: flex;
justify-content: space-around;
}
.controls text {
color: #fff;
font-size: 24rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
}
</style>

574
packageA/pages/post/post.vue
View File

@@ -1,80 +1,153 @@
<template>
<view class="container">
<view class="job-header">
<view class="job-title">{{ jobInfo.jobTitle }}</view>
<view class="job-info">
<text class="salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</text>
<text class="views">{{ jobInfo.view }}浏览</text>
<AppLayout title="" backGorundColor="#F4F4F4">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
<view class="location-info">
<view class="location" style="display: inline-block">
📍 青岛
<dict-Label dictType="area" :value="jobInfo.jobLocationAreaCode"></dict-Label>
</template>
<template #headerright>
<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>
</view>
</template>
<view class="content">
<view class="content-top btn-feel">
<view class="top-salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</view>
<view class="top-name">{{ jobInfo.jobTitle }}</view>
<view class="top-info">
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
<view class="info-text">
<dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label>
</view>
<view class="info-img mar_le20"><image src="/static/icon/post13.png"></image></view>
<view class="info-text">
<dict-Label dictType="education" :value="jobInfo.education"></dict-Label>
</view>
</view>
<view class="position-source">
<text>来源&nbsp;</text>
{{ jobInfo.dataSource }}
</view>
<text class="date">{{ jobInfo.postingDate || '发布日期' }}</text>
<view class="source">来源 智联招聘</view>
</view>
</view>
<view class="ai-explain" v-if="jobInfo.isExplain">
<view class="exbg">
<view class="explain-left btn-shaky">
<view class="leftText">AI+智能讲解，职位一听就懂</view>
<view class="leftdownText">懒得看文字？我用AI讲给你听</view>
</view>
<view class="explain-right button-click" @click="seeExplain">点击查看</view>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">职位描述</text>
</view>
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
{{ jobInfo.description }}
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">公司信息</text>
<text
class="btntext button-click"
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
>
单位详情
</text>
</view>
<view class="company-info">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1">{{ jobInfo.company?.name }}</view>
<view class="row2">
<dict-tree-Label
v-if="jobInfo.company?.industry"
dictType="industry"
:value="jobInfo.company?.industry"
></dict-tree-Label>
<span v-if="jobInfo.company?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
</view>
<view class="row2">
<text>在招</text>
<text style="color: #256bfa">{{ companyCount }}</text>
<text>个职位</text>
</view>
</view>
</view>
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
<map
style="width: 100%; height: 100%"
:latitude="jobInfo.latitude"
:longitude="jobInfo.longitude"
:markers="mapCovers"
></map>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">竞争力分析</text>
</view>
<view class="description">
三个月内共15位求职者申请，你的简历匹配度为{{ raderData.matchScore }}分，排名位于第{{
raderData.rank
}}位，超过{{ raderData.percentile }}%的竞争者，处在优秀位置。
</view>
<RadarMap :value="raderData"></RadarMap>
<view class="job-details">
<text class="details-title">职位详情</text>
<view class="tags">
<view class="tag"><dict-Label dictType="education" :value="jobInfo.education"></dict-Label></view>
<view class="tag"><dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label></view>
</view>
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
{{ jobInfo.description }}
<view class="card-footer">
<view class="footer-title">你与职位的匹配度</view>
<view class="footer-content">
<view class="progress-container">
<view
v-for="(item, index) in matchingDegree"
:key="index"
class="progress-item"
:class="{
active: index < currentStep - 1,
half: index < currentStep && currentStep < index + 1, // 半条
}"
/>
</view>
</view>
<view class="progress-text">
<view class="text-rpx" v-for="(item, index) in matchingDegree" :key="index">{{ item }}</view>
</view>
</view>
</view>
<view style="height: 24px"></view>
</view>
<view
class="company-info"
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
>
<view class="company-name">{{ jobInfo.company?.name }}</view>
<view class="company-details">
<dict-tree-Label
v-if="jobInfo.company?.industry"
dictType="industry"
:value="jobInfo.company?.industry"
></dict-tree-Label>
<span v-if="jobInfo.company?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
单位详情
<template #footer>
<view class="footer">
<view class="btn-wq button-click" @click="jobApply">立即前往</view>
</view>
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
<map
style="width: 100%; height: 100%"
:latitude="jobInfo.latitude"
:longitude="jobInfo.longitude"
:markers="mapCovers"
></map>
</view>
</view>
<view class="footer">
<!-- <button class="apply-btn" v-if="!jobInfo.isApply" @click="jobApply">立即申请</button> -->
<button class="apply-btn" @click="jobApply">立即申请</button>
<!-- <button class="apply-btn btned" v-else>已申请</button> -->
<view class="falls-card-matchingrate" @click="jobCollection">
<uni-icons v-if="!jobInfo.isCollection" type="star" size="40"></uni-icons>
<uni-icons v-else type="star-filled" color="#FFCB47" size="40"></uni-icons>
</view>
</view>
</view>
</template>
<VideoPlayer ref="videoPalyerRef" />
</AppLayout>
</template>
<script setup>
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 dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo, getLenPx, parseQueryParams } = inject('globalFunction');
const { $api, navTo, getLenPx, parseQueryParams, navBack } = inject('globalFunction');
import RadarMap from './component/radarMap.vue';
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
const currentStep = ref(1);
const companyCount = ref(0);
const jobInfo = ref({});
const state = reactive({});
const mapCovers = ref([]);
const jobIdRef = ref();
const raderData = ref({});
const videoPalyerRef = ref(null);
const explainUrlRef = ref('');
onLoad((option) => {
if (option.jobId) {
@@ -94,13 +167,23 @@ function initLoad(option) {
if (jobId !== jobIdRef.value) {
jobIdRef.value = jobId;
getDetail(jobId);
getCompetivetuveness(jobId);
}
}
function seeExplain() {
if (jobInfo.value.explainUrl) {
videoPalyerRef.value?.open(jobInfo.value.explainUrl);
// console.log(jobInfo.value.explainUrl);
// explainUrlRef.value = jobInfo.value.explainUrl;
}
}
function getDetail(jobId) {
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
const { latitude, longitude, companyName } = resData.data;
const { latitude, longitude, companyName, companyId } = resData.data;
jobInfo.value = resData.data;
getCompanyIsAJobs(companyId);
if (latitude && longitude) {
mapCovers.value = [
{
@@ -123,6 +206,12 @@ function getDetail(jobId) {
});
}
function getCompanyIsAJobs(companyId) {
$api.createRequest(`/app/company/count/${companyId}`).then((resData) => {
companyCount.value = resData.data;
});
}
function getTextWidth(text, size = 12) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
@@ -130,6 +219,13 @@ function getTextWidth(text, size = 12) {
return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
}
function getCompetivetuveness(jobId) {
$api.createRequest(`/app/job/competitiveness/${jobId}`, {}, 'GET').then((resData) => {
raderData.value = resData.data;
currentStep.value = resData.data.matchScore * 0.04;
});
}
// 申请岗位
function jobApply() {
const jobId = jobInfo.value.jobId;
@@ -164,105 +260,273 @@ function jobCollection() {
</script>
<style lang="stylus" scoped>
::v-deep .amap-logo {
opacity: 0 !important;
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
::v-deep .amap-copyright {
opacity: 0 !important;
image {
height: 100%;
width: 100%;
}
.container
display flex
flex-direction column
background-color #f8f8f8
.job-header
padding 20rpx 40rpx
background-color #ffffff
margin-bottom 10rpx
.job-title
font-size 55rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-info
display flex
justify-content space-between
margin-bottom 10rpx
.salary
color #3b82f6
font-size 42rpx
font-weight bold
.views
font-size 24rpx
color #999
.location-info
font-size 24rpx
color #666
.location, .source, .date
margin-right 10rpx
margin-top: 20rpx
.source
margin-left: 30rpx;
.progress-container {
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
margin-top: 24rpx
.job-details
background-color #fff
padding 20rpx 40rpx
margin-bottom 10rpx
.details-title
font-size 41rpx
font-weight bold
margin-bottom 15rpx
.tags
display flex
gap 10rpx
margin 15rpx 0
.tag
background-color #3b82f6
color #fff
padding 5rpx 15rpx
border-radius 15rpx
font-size 22rpx
.description
font-size 24rpx
line-height 36rpx
color #333
.company-info
background-color #fff
padding 20rpx 40rpx
margin-bottom 300rpx
.company-name
font-size 28rpx
font-weight bold
margin-bottom 10rpx
.company-details
font-size 24rpx
color #666
.company-map
height: 340rpx
}
.progress-text{
margin-top: 8rpx
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
justify-content: space-around
width: 100%
background: #e8e8e8
margin-top: 10rpx
border-radius: 16rpx
overflow: hidden
font-weight: 400;
font-size: 20rpx;
color: #999999;
text-align: center;
}
.footer
position fixed
bottom calc(var(--status-bar-height) + var(--window-bottom))
left 0
width calc(100% - 40rpx)
padding 20rpx
background-color #fff
text-align center
display flex
align-items: center
.apply-btn
flex: 1
background-color #22c55e
color #fff
border-radius 30rpx
font-size 32rpx
margin-right: 30rpx
.btned
background-color #666666
.progress-item {
width: 25%;
height: 24rpx;
background-color: #eee;
border-radius: 24rpx;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
}
/* 完整激活格子 */
.progress-item.active {
background: linear-gradient(to right, #256bfa, #8c68ff);
}
/* 当前进度进行中的格子 */
.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;
}
.card-footer{
.footer-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.footer-content{
.content-line{
display: grid
grid-template-columns: repeat(4, 1fr)
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
border-radius: 10rpx
.line-pargrah{
height: 20rpx;
position: relative
}
.line-pargrah::after{
position: absolute;
content: '';
right: 10
top: 0
width: 6rpx
height: 20rpx
background: #FFFFFF
}
}
}
}
// ai
.ai-explain{
margin-top: 28rpx
background-color: #FFFFFF
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
.exbg{
padding: 28rpx 40rpx;
display: flex
align-items: center
justify-content: space-between
background: url('@/static/icon/aibg.png') center center no-repeat;
background-size: 100% 100%
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.explain-left{
.leftText{
font-weight: 600;
font-size: 32rpx;
}
.leftdownText{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
}
.explain-right{
width: 168rpx;
height: 72rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
border: 2rpx solid #E7E9ED;
text-align: center;
line-height: 72rpx
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.content{
padding: 0 28rpx
height: 100%
.content-top{
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 52rpx 32rpx 34rpx 32rpx
position: relative
overflow: hidden
.top-salary{
font-weight: 500;
font-size: 32rpx;
color: #4C6EFB;
}
.top-name{
font-weight: 600;
font-size: 36rpx;
color: #000000;
margin-top: 8rpx
}
.top-info{
margin-top: 22rpx
display: flex;
align-items: center
.info-img{
width: 40rpx;
height: 40rpx
}
.info-text{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-left: 10rpx
}
}
.position-source{
position: absolute
top: 0
right: 0
width: fit-content;
height: 76rpx;
padding: 0 24rpx
background: rgba(37,107,250,0.1);
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
text-align: center
line-height: 76rpx
font-weight: 400;
font-size: 28rpx;
color: #64779F;
border-bottom-left-radius: 20rpx
}
}
.content-card{
padding: 24rpx
margin-top: 28rpx
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.card-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
.btntext{
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
}
}
.card-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.description{
margin-top: 30rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
.company-info{
padding-top: 30rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
}
}
}
.company-map{
margin-top: 28rpx
height: 416rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
}
}
}
.footer{
background: #FFFFFF;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx
.btn-wq{
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
}
}
</style>

161
packageA/pages/reservation/component/countdown.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="countdown-wrapper" style="width: 100%">
<template v-if="isNotStarted">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离开始还剩</span>
<div class="time-block">{{ days }}</div>
<span class="colon">天</span>
</view>
<view style="color: #ff881a">待开始</view>
</view>
</template>
<template v-else-if="isEnd">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon hui">距离结束还剩</span>
<div class="time-block huibg">00</div>
<span class="colon hui">:</span>
<div class="time-block huibg">00</div>
<span class="colon hui">:</span>
<div class="time-block huibg">00</div>
</view>
<view class="hui">已结束</view>
</view>
</template>
<template v-else>
<template v-if="showDays">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离结束还剩</span>
<div class="time-block">{{ days }}</div>
<span class="colon">天</span>
</view>
<view style="color: #18a14f">进行中</view>
</view>
</template>
<template v-else>
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离结束还剩</span>
<div class="time-block">{{ hours }}</div>
<span class="colon">:</span>
<div class="time-block">{{ minutes }}</div>
<span class="colon">:</span>
<div class="time-block">{{ seconds }}</div>
</view>
<view style="color: #18a14f">进行中</view>
</view>
</template>
</template>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
const props = defineProps({
startTime: { type: [String, Number, Date], required: true },
endTime: { type: [String, Number, Date], required: true },
interval: { type: Number, default: 1000 },
});
const now = ref(Date.now());
let timer = null;
const startTimestamp = computed(() => new Date(props.startTime).getTime());
const endTimestamp = computed(() => new Date(props.endTime).getTime());
const isEnd = computed(() => now.value >= endTimestamp.value);
const isNotStarted = computed(() => now.value < startTimestamp.value);
const targetTimestamp = computed(() => {
if (isNotStarted.value) return startTimestamp.value;
if (!isEnd.value) return endTimestamp.value;
return now.value;
});
const remainingMs = computed(() => Math.max(0, targetTimestamp.value - now.value));
const secondsTotal = computed(() => Math.floor(remainingMs.value / 1000));
const showDays = computed(() => secondsTotal.value >= 86400);
const days = computed(() => Math.ceil(secondsTotal.value / 86400));
const hours = computed(() => {
const h = Math.floor(secondsTotal.value / 3600) % 24;
return h.toString().padStart(2, '0');
});
const minutes = computed(() => {
const m = Math.floor((secondsTotal.value % 3600) / 60);
return m.toString().padStart(2, '0');
});
const seconds = computed(() => {
const s = secondsTotal.value % 60;
return s.toString().padStart(2, '0');
});
const startTimer = () => {
timer = setInterval(() => {
now.value = Date.now();
}, props.interval);
};
const stopTimer = () => {
if (timer) {
clearInterval(timer);
timer = null;
}
};
onMounted(() => {
startTimer();
});
onUnmounted(() => {
stopTimer();
});
</script>
<style scoped>
.countdown-wrapper {
display: flex;
align-items: center;
}
.time-block {
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #ffffff;
height: 44rpx;
line-height: 44rpx;
padding: 0 14rpx;
background: #256bfa;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin: 0 10rpx;
}
.colon {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #256bfa;
}
.day-text {
font-size: 18px;
color: #333;
}
.hui {
color: #b6b6b6;
}
.huibg {
background-color: #b6b6b6;
}
.lan {
color: #256bfa;
}
</style>

193
packageA/pages/reservation/reservation.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<view class="reser-content">
<view class="content-top">
<view
class="top-item"
:class="{ active: ranItem.value === item.value }"
v-for="(item, index) in ranOptions"
:key="index"
@click="chnageRanOption(item)"
>
{{ item.label }}
</view>
</view>
<view class="main">
<scroll-view scroll-y>
<view v-if="pageState.list.length">
<view class="card" v-for="(item, index) in pageState.list" :key="index">
<view @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)">
<view class="card-row">
<Countdown startTime="item.startTime" :endTime="item.endTime" />
</view>
<view class="card-Title">{{ item.name }}</view>
<view class="card-row">
<view class="rowleft">{{ item.location }}</view>
<view class="rowright">
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitudeVal"
:blong="longitudeVal"
></convert-distance>
</view>
</view>
</view>
<view class="footer" v-if="isTimePassed(item.startTime)">
<view class="card_cancel" @click="updateCancel(item)">取消预约</view>
</view>
</view>
</view>
<empty v-else pdTop="200"></empty>
</scroll-view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import Countdown from './component/countdown.vue';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const pageState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
search: {},
lastDate: '',
});
const ranItem = ref({});
const ranOptions = ref([
{ label: '全部', value: 0 },
{ label: '待开始', value: 1 },
{ label: '进行中', value: 2 },
{ label: '已结束', value: 3 },
]);
function isTimePassed(timeStr) {
const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
const now = Date.now();
return now < targetTime;
}
onLoad(() => {
ranItem.value = ranOptions.value[0];
getList();
});
function chnageRanOption(item) {
ranItem.value = item;
getList();
}
function updateCancel(item) {
const fairId = item.jobFairId;
$api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
getList('refresh');
$api.msg('取消预约成功');
});
}
function getList(type = 'add', loading = true) {
if (type === 'refresh') {
pageState.page = 0;
pageState.maxPage = 1;
}
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
type: ranItem.value.value,
};
$api.createRequest('/app/user/collection/fair', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
// pageState.list = resData.rows;
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
</script>
<style lang="stylus" scoped>
.reser-content{
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
display: flex;
flex-direction: column;
.content-top{
display: flex
padding: 28rpx
.top-item{
font-weight: 400;
font-size: 32rpx;
margin-right: 48rpx
color: #666D7F;
}
.active{
font-weight: 500;
font-size: 32rpx;
color: #000000;
}
}
.main{
flex: 1
overflow: hidden
background: #F4F4F4
padding: 28rpx
.card{
padding: 30rpx
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
color: #495264
margin-bottom: 28rpx
.card-row{
display: flex
justify-content: space-between
.rowleft{
display: flex
align-items: center
}
}
.card-Title{
font-weight: 500;
font-size: 32rpx;
line-height: 70rpx
color: #333333;
}
.footer{
display: flex
align-items: center
justify-content: flex-end
}
.card_cancel{
width: 228rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-top: 32rpx
}
}
}
}
</style>

290
packageA/pages/selectDate/selectDate.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<AppLayout title="选择日期" :use-scroll-view="false" back-gorund-color="#FAFAFA">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<template #headerright>
<view class="btn mar_ri10 button-click" @click="backParams">确认</view>
</template>
<view class="content">
<view class="top-date">
<view
class="weekText"
:class="{ color_256BFA: item === '日' || item === '六' }"
v-for="(item, index) in weekMap"
:key="index"
>
{{ item }}
</view>
</view>
<scroll-view scroll-y class="main-scroll" @scrolltolower="onScrollBottom">
<view class="date-list" v-for="(vItem, vIndex) in calendarData" :key="vIndex">
<view class="list-title">{{ vItem.title }}</view>
<view class="list-item">
<view
class="item button-click"
:class="{
noOptional: !item.isThisMonth,
active: current.date === item.date && item.isThisMonth,
}"
v-for="(item, index) in vItem.list"
:key="index"
@click="selectDay(item)"
>
<view class="item-top">{{ item.day }}</view>
<view class="item-nong">{{ item.nl }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
const calendarData = ref([]);
const current = ref({});
import { Solar, Lunar } from '@/lib/lunar-javascript@1.7.2.js';
const pages = reactive({
year: 0,
month: 0,
});
onLoad((options) => {
if (options.date) {
current.value = {
date: options?.date || null,
};
}
console.log(options);
initPagesDate();
addMonth();
addMonth();
addMonth();
});
function backParams() {
console.log(isValidDateString(current.value.date));
if (isValidDateString(current.value.date)) {
navBack({
data: current.value,
});
} else {
$api.msg('请选择日期');
}
}
function isValidDateString(dateStr) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
if (!regex.test(dateStr)) return false;
const date = new Date(dateStr);
if (isNaN(date.getTime())) return false;
// 检查日期部分是否一致（防止 "2020-02-31" 这种被 Date 自动修正）
const [year, month, day] = dateStr.split('-').map(Number);
return date.getFullYear() === year && date.getMonth() + 1 === month && date.getDate() === day;
}
function onScrollBottom() {
addMonth();
}
function selectDay(item) {
current.value = item;
}
function initPagesDate() {
const d = new Date();
pages.year = d.getFullYear();
pages.month = d.getMonth();
}
function addMonth() {
if (pages.month >= 12) {
pages.year += 1;
pages.month = 1;
} else {
pages.month += 1;
}
const month = getMonthCalendarData(pages);
calendarData.value.push(month);
}
/**
*
* @param {Array<string>} selectedDates - 选中的日期数组 ['2025-04-21', ...]
* @returns {Array<Object>} 六个月日历数据
*/
function getMonthCalendarData({ year, month, selectableDates = [] }) {
const todayStr = new Date().toISOString().split('T')[0];
const isSelected = (y, m, d) =>
selectableDates.includes(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
const list = [];
const firstDay = new Date(year, month - 1, 1);
const firstWeekday = firstDay.getDay(); // 0 是周日
const lastDate = new Date(year, month, 0).getDate();
// 补全前一月天数（上月最后几天）
if (firstWeekday !== 0) {
const prevLastDate = new Date(year, month - 1, 0).getDate();
for (let i = firstWeekday - 1; i >= 0; i--) {
const d = prevLastDate - i;
const prevMonth = month - 1 <= 0 ? 12 : month - 1;
const prevYear = month - 1 <= 0 ? year - 1 : year;
const solar = Solar.fromYmd(prevYear, prevMonth, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: false,
isToday: dateStr === todayStr,
isSelectable: isSelected(prevYear, prevMonth, d),
week: weekMap[new Date(prevYear, prevMonth - 1, d).getDay()],
date: dateStr,
});
}
}
// 当前月天数
for (let d = 1; d <= lastDate; d++) {
const solar = Solar.fromYmd(year, month, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: true,
isToday: dateStr === todayStr,
isSelectable: isSelected(year, month, d),
week: weekMap[new Date(year, month - 1, d).getDay()],
date: dateStr,
});
}
// 补全下个月天数（让最后一行完整 7 个）
const remaining = 7 - (list.length % 7);
if (remaining < 7) {
for (let d = 1; d <= remaining; d++) {
const nextMonth = month + 1 > 12 ? 1 : month + 1;
const nextYear = month + 1 > 12 ? year + 1 : year;
const solar = Solar.fromYmd(nextYear, nextMonth, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: false,
isToday: dateStr === todayStr,
isSelectable: isSelected(nextYear, nextMonth, d),
week: weekMap[new Date(nextYear, nextMonth - 1, d).getDay()],
date: dateStr,
});
}
}
return {
title: `${year}年${month}月`,
list,
};
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.content{
height: 100%
display: flex
flex-direction: column
border-radius: 40rpx 40rpx 0 0
background: #FFFFFF;
overflow: hidden
margin-top: 20rpx
.top-date{
display: flex
justify-content: space-between
padding: 28rpx
.weekText{
text-align: center
width: 99rpx;
}
}
.main-scroll{
flex: 1
overflow: hidden
}
.date-list{
.list-title{
height: 84rpx;
line-height: 84rpx
background: #FAFAFA;
font-weight: 600;
font-size: 32rpx;
color: #1A1A1A;
padding: 0 28rpx;
box-sizing: border-box
}
.list-item{
padding: 16rpx 28rpx 20rpx 28rpx;
display: grid
grid-template-columns: repeat(7, 1fr)
grid-gap: 0rpx
.item{
display: flex
flex-direction: column
align-items: center
justify-content: center
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 16rpx 0
margin-bottom: 20rpx
.item-top{
font-weight: 600;
font-size: 32rpx;
}
.item-nong{
font-size: 16rpx;
color: #666666
margin-top: 2rpx
}
}
.optional{
// height: 96rpx;
border: 2rpx solid #92B5FC;
}
.noOptional{
color: #B8B8B8;
}
.active{
background: linear-gradient( 225deg, #9E74FD 0%, #256BFA 100%);
color: #FFFFFF
.item-nong{
font-size: 16rpx;
color: #FFFFFF
margin-top: 2rpx
}
}
}
}
}
</style>

90
pages.json
View File

@@ -5,6 +5,7 @@
"style": {
"navigationBarTitleText": "青岛智慧就业平台",
"navigationStyle": "custom"
}
},
{
@@ -32,7 +33,7 @@
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"navigationBarTitleText": "AI+就业服务程序",
"navigationStyle": "custom"
}
},
@@ -41,7 +42,8 @@
"style": {
"navigationBarTitleText": "附近",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
}
},
{
@@ -55,7 +57,15 @@
"navigationStyle": "custom"
//#endif
}
},
{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
}
],
"subpackages": [{
"root": "packageA",
@@ -64,57 +74,102 @@
"style": {
"navigationBarTitleText": "精选",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
}
}, {
"path": "pages/post/post",
"style": {
"navigationBarTitleText": "职位详情",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
}
}, {
"path": "pages/UnitDetails/UnitDetails",
"style": {
"navigationBarTitleText": "单位详情",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
}
}, {
"path": "pages/exhibitors/exhibitors",
"style": {
"navigationBarTitleText": "参展单位",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
}
}, {
"path": "pages/myResume/myResume",
"style": {
"navigationBarTitleText": "我的简历",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarBackgroundColor": "#FFFFFF"
}
}, {
"path": "pages/Intendedposition/Intendedposition",
"style": {
"navigationBarTitleText": "意向岗位",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarTitleText": "投递记录",
"navigationBarBackgroundColor": "#FFFFFF"
}
}, {
"path": "pages/collection/collection",
"style": {
"navigationBarTitleText": "我的收藏",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarBackgroundColor": "#FFFFFF",
"navigationStyle": "custom"
}
},
{
"path": "pages/browseJob/browseJob",
"style": {
"navigationBarTitleText": "我的浏览",
"navigationBarBackgroundColor": "#4778EC",
"navigationBarTextStyle": "white"
"navigationBarBackgroundColor": "#FFFFFF",
"navigationStyle": "custom"
}
},
{
"path": "pages/addPosition/addPosition",
"style": {
"navigationBarTitleText": "添加岗位",
"navigationStyle": "custom"
}
},
{
"path": "pages/selectDate/selectDate",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "pages/personalInfo/personalInfo",
"style": {
"navigationBarTitleText": "个人信息",
"navigationStyle": "custom"
}
},
{
"path": "pages/jobExpect/jobExpect",
"style": {
"navigationBarTitleText": "求职期望",
"navigationStyle": "custom"
}
},
{
"path": "pages/reservation/reservation",
"style": {
"navigationBarTitleText": "我的预约",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
{
"path": "pages/choicenessList/choicenessList",
"style": {
"navigationBarTitleText": "精选企业",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationStyle": "custom"
}
}
]
@@ -165,6 +220,11 @@
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
// "enablePullDownRefresh": false,
// "navigationStyle": "custom",
// "rpxCalcBaseDeviceWidth": 3840,
// "rpxCalcMaxDeviceWidth": 3840,
// "rpxCalcIncludeWidth": 750
},
"uniIdRouter": {}
}

652
pages/careerfair/careerfair.vue
View File

@@ -1,199 +1,521 @@
<template>
<view class="app-container">
<view class="careerfair-AI">AI+就业服务程序</view>
<view class="careerfair-tab">
<view class="careerfair-tab-options actived">现场招聘</view>
<view class="careerfair-tab-options" @click="textXcx">VR虚拟招聘会</view>
<view class="app-custom-root">
<view class="app-container">
<!-- 顶部头部区域 -->
<view class="container-header">
<view class="header-top">
<view class="header-btnLf button-click" @click="seemsg(0)" :class="{ active: state.current === 0 }">
现场招聘
</view>
<view class="header-btnLf button-click" @click="seemsg(1)" :class="{ active: state.current === 1 }">
VR虚拟招聘会
</view>
</view>
<view class="header-input btn-feel">
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
<input class="input" placeholder="招聘会" placeholder-class="inputplace" />
</view>
<view class="header-date">
<view class="data-week">
<view
class="weel-days button-click"
:class="{ active: currentDay.fullDate === item.fullDate }"
v-for="(item, index) in weekList"
:key="index"
@click="selectDate(item)"
>
<view class="label">{{ item.day }}</view>
<view class="day">{{ item.date }}</view>
</view>
</view>
<view class="data-all">
<image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
</view>
</view>
</view>
<!-- 主体内容区域 -->
<view class="container-main">
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<view class="cards" v-if="fairList.length">
<view
class="card btn-incline"
v-for="(item, index) in fairList"
:key="index"
@click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
>
<view class="card-title">{{ item.name }}</view>
<view class="card-row">
<text class="">{{ item.location }}</text>
<text class="">
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitudeVal"
:blong="longitudeVal"
></convert-distance>
</text>
</view>
<view class="card-times">
<view class="time-left">
<view class="left-date">{{ parseDateTime(item.startTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(item.startTime).date }}</view>
</view>
<view class="line"></view>
<view class="time-center">
<view class="center-date">
{{ getTimeStatus(item.startTime, item.endTime).statusText }}
</view>
<view class="center-dateDay">
{{ getHoursBetween(item.startTime, item.endTime) }}小时
</view>
</view>
<view class="line"></view>
<view class="time-right">
<view class="left-date">{{ parseDateTime(item.endTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(item.endTime).date }}</view>
</view>
</view>
<view class="recommend-card-line"></view>
<view class="card-footer">内容简介：{{ item.description }}</view>
</view>
</view>
<empty v-else pdTop="200"></empty>
</scroll-view>
</view>
</view>
<scroll-view :scroll-x="true" :show-scrollbar="false" class="careerfair-scroll">
<view class="careerfair-date">
<view class="date-list" v-for="(item, index) in state.dateList" :key="index">
<view class="date-list-item">{{ item.day }}</view>
<view class="date-list-item active">{{ item.date }}</view>
</view>
</view>
</scroll-view>
<scroll-view :scroll-y="true" class="careerfair-list-scroll">
<view class="careerfair-list">
<view class="careerfair-list-card" v-for="(item, index) in 10" :key="index">
<view class="card-title">2024年春季青岛市商贸服务业招聘会</view>
<view class="card-intro">
<view class="line_2">内容简介……</view>
<view class="intro-distance">500m以内</view>
</view>
<view class="card-address">市南区延安三路105号</view>
<view class="card-footer">
<view class="cardfooter-lf">
<view class="card-company">市南区就业人才中心</view>
<view class="card-date">7月31日（周三）14:00-18:00</view>
</view>
<view class="cardfooter-ri" @click="navTo('/packageA/pages/exhibitors/exhibitors')">
查看详情
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 自定义tabbar -->
<!-- <tabbar-custom :currentpage="1"></tabbar-custom> -->
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, cloneDeep } = inject('globalFunction');
const weekList = ref([]);
const fairList = ref([]);
const currentDay = ref({});
const state = reactive({
dateList: [],
current: 0,
all: [{}],
});
const pageState = reactive({
page: 0,
total: 0,
maxPage: 2,
pageSize: 10,
search: {},
});
onLoad(() => {
state.dateList = getNextMonthDates();
const result = getNextDates({
startDate: '2025-04-21',
});
weekList.value = result;
getFair('refresh');
});
function textXcx() {
$api.msg('测试给小程序发送消息');
$api.sendingMiniProgramMessage();
function toSelectDate() {
navTo('/packageA/pages/selectDate/selectDate', {
query: {
date: currentDay.value.fullDate,
},
onBack: (res) => {
const result = getNextDates({
startDate: res.date,
});
weekList.value = result;
getFair('refresh');
},
});
}
// 查看消息类型
function changeSwiperMsgType(e) {
const currented = e.detail.current;
state.current = currented;
}
// 获取往后三十天日期
function getNextMonthDates() {
const today = new Date();
function seemsg(index) {
if (index === 1) {
return $api.msg('功能确定中');
}
state.current = index;
}
const handleScrollToLower = () => {
getFair();
console.log('触底');
};
function getFair(type = 'add') {
if (type === 'refresh') {
pageState.page = 0;
pageState.maxPage = 1;
}
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
let params = {
...pageState.search,
current: pageState.page,
pageSize: pageState.pageSize,
};
if (currentDay.value?.fullDate) {
params.queryDate = currentDay.value.fullDate;
}
$api.createRequest('/app/fair', params).then((resData) => {
const { rows, total } = resData;
console.log(rows);
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = fairList.value.length;
const reslist = rows;
fairList.value.splice(str, end, ...reslist);
} else {
fairList.value = rows;
}
// pageState.list = resData.rows;
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
function parseDateTime(datetimeStr) {
if (!datetimeStr) return { time: '', date: '' };
const dateObj = new Date(datetimeStr);
if (isNaN(dateObj.getTime())) return { time: '', date: '' }; // 无效时间
const year = dateObj.getFullYear();
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
const hours = String(dateObj.getHours()).padStart(2, '0');
const minutes = String(dateObj.getMinutes()).padStart(2, '0');
return {
time: `${hours}:${minutes}`,
date: `${year}年${month}月${day}日`,
};
}
function getTimeStatus(startTimeStr, endTimeStr) {
const now = new Date();
const startTime = new Date(startTimeStr);
const endTime = new Date(endTimeStr);
// 判断状态：0 开始中，1 过期，2 待开始
let status = 0;
let statusText = '开始中';
if (now < startTime) {
status = 2; // 待开始
statusText = '待开始';
} else if (now > endTime) {
status = 1; // 已过期
statusText = '已过期';
} else {
status = 0; // 进行中
statusText = '进行中';
}
return {
status, // 0: 进行中，1: 已过期，2: 待开始
statusText,
};
}
function getHoursBetween(startTimeStr, endTimeStr) {
const start = new Date(startTimeStr);
const end = new Date(endTimeStr);
const diffMs = end - start;
const diffHours = diffMs / (1000 * 60 * 60);
return +diffHours.toFixed(2); // 保留 2 位小数
}
const selectDate = (item) => {
if (currentDay.value?.fullDate === item.fullDate) {
currentDay.value = {};
getFair('refresh');
return;
}
currentDay.value = item;
getFair('refresh');
};
function getNextDates({ startDate = '', count = 6 }) {
const baseDate = startDate ? new Date(startDate) : new Date(); // 指定起点或今天
const dates = [];
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
for (let i = 0; i < 30; i++) {
const date = new Date(today); // 创建当天的副本
date.setDate(today.getDate() + i); // 设置日期为往后第 i 天
const formattedDate = date.toISOString().slice(0, 10).slice(8); // 格式化为 YYYY-MM-DD
const dayOfWeek = dayNames[date.getDay()]; // 获取星期几
for (let i = 0; i < count; i++) {
const date = new Date(baseDate);
date.setDate(baseDate.getDate() + i);
const fullDate = date.toISOString().slice(0, 10); // YYYY-MM-DD
const formattedDate = fullDate.slice(5); // MM-DD
const dayOfWeek = dayNames[date.getDay()];
dates.push({
date: formattedDate,
day: dayOfWeek,
fullDate,
day: '周' + dayOfWeek,
isToday: i === 0,
});
}
dates[0].date = '今天';
dates[1].date = '明天';
// 可选设置默认选中项
// currentDay.value = dates[0];
return dates;
}
</script>
<style lang="stylus" scoped>
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 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;
position: fixed
.careerfair-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.careerfair-tab
margin: 20rpx 0 0 30rpx;
width: fit-content;
display: flex;
flex-wrap: nowrap;
.careerfair-tab-options
background: #4778EC;
padding: 0 20rpx;
height: 63rpx;
line-height: 63rpx;
height: 100%;
width: 100%;
.container-header {
background: url('@/static/icon/background2.png') 0 0 no-repeat;
background-size: 100% 400rpx;
.header-top{
display: flex;
line-height: calc(88rpx - 14rpx);
padding: 16rpx 44rpx 14rpx 44rpx;
.header-btnLf {
display: flex;
width: fit-content;
white-space: nowrap
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;
}
}
.header-input{
padding: 0 24rpx
width: calc(100% - 48rpx);
position: relative
.iconsearch{
position: absolute
left: 50rpx;
top: 50%
transform: translate(0, -50%)
}
.input{
padding: 0 30rpx 0 80rpx
height: 80rpx;
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
font-size: 28rpx;
}
.inputplace{
font-weight: 400;
font-size: 28rpx;
color: #B5B5B5;
}
}
.header-date{
padding: 28rpx
display: flex
justify-content: space-between
align-items: center
.data-week{
flex: 1
display: flex
justify-content: space-between
flex-wrap: nowrap
overflow: hidden
.weel-days{
display: flex
justify-content: center
flex-direction: column
text-align: center
font-weight: 400;
font-size: 24rpx;
color: #333333;
width: 96rpx;
height: 88rpx;
.label{}
.day{
font-weight: 500;
}
}
.active{
background: rgba(37,107,250,0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
color: #256BFA;
}
}
.data-all{
width: 66rpx;
height: 66rpx;
margin-left: 18rpx
.allimg{
width: 100%;
height: 100%
}
}
}
}
}
.container-main {
flex: 1;
overflow: hidden;
background-color: #f4f4f4;
}
.main-scroll {
width: 100%
height: 100%;
}
.cards{
padding: 28rpx 28rpx 28rpx 28rpx;
.card{
margin-top: 28rpx
padding: 32rpx;
background: #FFFFFF
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.card-title{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.card-row{
display: flex
justify-content: space-between
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
.actived
position: relative;
background: #FFAD47;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
.careerfair-tab-options:first-child
border-radius: 17rpx 0rpx 0rpx 0rpx;
.careerfair-tab-options:last-child
border-radius: 0rpx 17rpx 0rpx 0rpx;
.careerfair-scroll
background: #4778EC;
.careerfair-date
height: 119rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
color: #FFFFFF;
width: fit-content;
.date-list
color: #495265;
margin-top: 4rpx
}
.card-times{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(750rpx / 7);
.date-list-item:nth-child(2)
font-size: 19rpx;
margin-top: 10rpx;
.active
width: 52rpx;
height: 52rpx;
background: #FFAD47;
border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.careerfair-list-scroll
overflow: hidden;
background: linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, #FFFFFF 100%);
.careerfair-list
display: flex;
flex-direction: column;
align-items: center;
padding: 25rpx 28rpx;
.careerfair-list-card
margin-top: 36rpx;
width: calc(100% - 40rpx);
background: #FFFFFF;
border-radius: 17rpx 17rpx 17rpx 17rpx;
padding: 20rpx;
.card-title
height: 68rpx;
font-size: 35rpx;
color: #606060;
line-height: 68rpx;
.card-intro,.card-address,.card-company,.card-date
font-weight: 400;
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
margin-top: 13rpx;
.card-footer
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.cardfooter-ri
width: 206rpx;
height: 56rpx;
line-height: 56rpx;
justify-content: space-between
align-items: center
margin-top: 24rpx
.time-left,
.time-right{
text-align: center
.left-date{
font-weight: 500;
font-size: 48rpx;
color: #333333;
}
.left-dateDay{
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-top: 12rpx
}
}
.line{
width: 40rpx;
height: 0rpx;
border: 2rpx solid #D4D4D4;
margin-top: 64rpx
}
.time-center{
text-align: center;
display: flex
flex-direction: column
justify-content: center
align-items: center
.center-date{
font-weight: 400;
font-size: 28rpx;
text-align: center;
color: #FFFFFF;
background: #FFAD47;
border-radius: 17rpx 17rpx 17rpx 17rpx;
.card-intro
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
.intro-distance
height: 30rpx;
background: #13C57C;
padding: 3rpx 8rpx;
line-height: 30rpx;
color: #FFFFFF;
font-size: 21rpx;
border-radius: 17rpx 17rpx 17rpx 17rpx;
.careerfair-list-card:first-child
margin-top: 0;
color: #FF881A;
padding-top: 10rpx
}
.center-dateDay{
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-top: 6rpx
line-height: 48rpx;
width: 104rpx;
height: 48rpx;
background: #F9F9F9;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
}
.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: 32rpx
position: relative
}
.recommend-card-line::before{
position: absolute
content: ''
left: 0
top: 0
transform: translate(-50% - 110rpx, -50%)
width: 28rpx;
height: 28rpx;
background: #F4F4F4;
border-radius: 50%;
}
.recommend-card-line::after{
position: absolute
content: ''
right: 0
top: 0
transform: translate(50% + 100rpx, -50%)
width: 28rpx;
height: 28rpx;
background: #F4F4F4;
border-radius: 50%;
}
.card-footer{
margin-top: 32rpx
min-height: 50rpx;
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
}
.card:first-child{
margin-top: 0
}
}
</style>

6
pages/chat/chat.vue
View File

@@ -40,11 +40,11 @@
<image class="drawer-user-img" v-if="userInfo.age === '0'" src="/static/icon/boy.png"></image>
<image class="drawer-user-img" v-else src="/static/icon/girl.png"></image>
<text>{{ userInfo.name || '暂无用户名' }}</text>
<image
<!-- <image
class="drawer-user-setting button-click"
src="/static/icon/setting.png"
@click="updateSetting"
></image>
></image> -->
</view>
</view>
</view>
@@ -315,4 +315,4 @@ header-height = 88rpx
.main-content.shift {
margin-left: 500rpx;
}
</style>
</style>

9
pages/chat/components/ai-paging.vue
View File

@@ -7,7 +7,12 @@
我可以根据您的简历和求职需求，帮你精准匹配青岛市互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
</view>
<view class="back-rowh3">猜你所想</view>
<view class="back-rowmsg" v-for="item in queries" @click="sendMessageGuess(item)">
<view
class="back-rowmsg button-click"
v-for="(item, index) in queries"
:key="index"
@click="sendMessageGuess(item)"
>
{{ item }}
</view>
<view class="chat-item self" v-if="isRecording">
@@ -738,6 +743,8 @@ image-margin-top = 40rpx
justify-content: flex-start
align-items: center
width: calc(100% - 88rpx)
position: relative
z-index: 1
.backlogo
width: 313rpx;
height: 190rpx;

888
pages/index/index.vue
View File

@@ -1,133 +1,137 @@
<template>
<view class="app-container">
<view class="index-AI">AI+就业服务程序</view>
<view class="index-option">
<view class="option-left">
<view class="left-item" @click="navTo('/pages/nearby/nearby')">附近</view>
<view class="left-item" @click="navTo('/packageA/pages/choiceness/choiceness')">精选</view>
<view class="left-item">职业图谱</view>
<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="option-right">
<input
class="uni-input right-input"
adjust-position="false"
confirm-type="search"
v-model="inputText"
@confirm="searchJobTitle"
/>
<uni-icons
class="iconsearch"
color="#FFFFFF"
type="search"
size="20"
@click="searchJobTitle"
></uni-icons>
<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>
</view>
</view>
</view>
<!-- tab -->
<view class="tab-options">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="tab-op-left">
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
<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="tab-list"
:class="{ tabchecked: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
class="button-click filterbtm"
:class="{ active: pageState.search.order === item.value }"
v-for="item in rangeOptions"
@click="handelHostestSearch(item)"
:key="item.value"
>
{{ item }}
{{ 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" 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 class="tab-op-right">
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20" @click="editojobs"></uni-icons>
<view class="tab-recommend">
<latestHotestStatus @confirm="handelHostestSearch"></latestHotestStatus>
</view>
<view class="tab-filter" @click="showFilter = true">
<view class="tab-number" v-show="pageState.total">{{ formatTotal(pageState.total) }}</view>
<image class="image" src="/static/icon/filter.png"></image>
</view>
</view>
</view>
<!-- waterfalls -->
<scroll-view :scroll-y="true" class="falls-scroll" @scrolltolower="scrollBottom">
<view class="falls">
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="list">
<template v-slot:default="job">
<view class="item" v-if="!job.recommend">
<view class="falls-card" @click="nextDetail(job)">
<view class="falls-card-title">{{ job.jobTitle }}</view>
<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-education" 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 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>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
</view>
<view class="item" 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-controll">
<view class="controll-yes" @click="findJob(job)">是的</view>
<view class="controll-no">不是</view>
</view>
</view>
</view>
</view>
</template>
</custom-waterfalls-flow>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</scroll-view>
<screeningJobRequirementsVue
v-model:show="showFilter"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<!-- 岗位推荐组件 -->
<modify-expected-position-vue v-model:show="showModel" :jobList="jobList" />
<!-- 自定义tabbar -->
<!-- <tabbar-custom :currentpage="0"></tabbar-custom> -->
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, getCurrentInstance } from 'vue';
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');
@@ -136,16 +140,21 @@ import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
import useDictStore from '@/stores/useDictStore';
const { getTransformChildren } = useDictStore();
import screeningJobRequirementsVue from '@/components/screening-job-requirements/screening-job-requirements.vue';
import modifyExpectedPositionVue from '@/components/modifyExpectedPosition/modifyExpectedPosition.vue';
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 waterfallsFlowRef = ref(null);
const loadmoreRef = ref(null);
const conditionSearch = ref({});
const waterfallcolumn = ref(2);
const state = reactive({
tabIndex: 'all',
search: '',
});
const list = ref([]);
const pageState = reactive({
@@ -159,7 +168,13 @@ const pageState = reactive({
});
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 },
@@ -172,41 +187,18 @@ const jobList = ref([
{ name: '创意总监', highlight: false },
]);
onLoad(() => {
const { columnCount } = useColumnCount(() => {
pageState.pageSize = 10 * (columnCount.value - 1);
getJobRecommend('refresh');
nextTick(() => {
waterfallsFlowRef.value?.refresh?.();
useLocationStore().getLocation();
});
});
function nextDetail(job) {
// 记录岗位类型，用作数据分析
if (job.jobCategory) {
const recordData = recommedIndexDb.JobParameter(job);
recommedIndexDb.addRecord(recordData);
}
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}
function handleModelConfirm(val) {
console.log(val);
}
function findJob(item) {
console.log(item);
}
function handleFilterConfirm(val) {
pageState.search = {
order: pageState.search.order,
};
for (const [key, value] of Object.entries(val)) {
pageState.search[key] = value.join(',');
}
getJobList('refresh');
}
function handelHostestSearch(val) {
pageState.search.order = val.value;
getJobList('refresh');
}
// onLoad(() => {
// getJobRecommend('refresh');
// });
function scrollBottom() {
loadmoreRef.value.change('loading');
@@ -217,16 +209,97 @@ function scrollBottom() {
}
}
function editojobs() {
console.log('jobs');
showModel.value = 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 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 = {};
pageState.search = {
order: pageState.search.order,
};
inputText.value = '';
getJobRecommend('refresh');
} else {
@@ -237,18 +310,15 @@ function choosePosition(index) {
}
}
function searchJobTitle() {
state.tabIndex = '-1';
pageState.search = {
jobTitle: inputText.value,
};
getJobList('refresh');
function handelHostestSearch(val) {
pageState.search.order = val.value;
if (state.tabIndex === 'all') {
getJobRecommend('refresh');
} else {
getJobList('refresh');
}
}
function changeRecommend() {}
function changeLatestHotestStatus(e) {}
function getJobRecommend(type = 'add') {
if (type === 'refresh') {
list.value = [];
@@ -258,6 +328,7 @@ function getJobRecommend(type = 'add') {
pageSize: pageState.pageSize,
sessionId: useUserStore().seesionId,
...pageState.search,
...conditionSearch.value,
};
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣，为您推荐更多合适的岗位' };
$api.createRequest('/app/job/recommend', params).then((resData) => {
@@ -277,6 +348,7 @@ function getJobRecommend(type = 'add') {
jobRecommender.updateConditions(conditionCounts);
const question = jobRecommender.getNextQuestion();
if (question) {
comd.jobCategory = question;
data.unshift(comd);
@@ -347,6 +419,228 @@ function dataToImg(data) {
</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
@@ -355,223 +649,81 @@ function dataToImg(data) {
content: ''
height: 60rpx
width: 100%
background: linear-gradient(to bottom, #FFAD47, #FFFFFF)
.recommend-card::after
position: absolute
right: -20rpx
top: 40rpx
content: ''
height: 100rpx
width: 200rpx
background: url('@/static/icon/Group1.png') center center no-repeat
background-size: 100rpx 140rpx
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: 20rpx
padding: 24rpx
.card-content
position: relative;
z-index: 2;
.recommend-card-title
color: #333333
font-size: 32rpx
font-weight: 500;
font-size: 32rpx;
color: #333333;
.recommend-card-tip
font-size: 24rpx;
color: #606060;
margin-top: 10rpx
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-around
justify-content: space-between
margin-top: 40rpx
padding: 0 6rpx;
.controll-yes
border-radius: 39rpx
padding: 0rpx 30rpx
background: rgba(255, 173, 71, 1)
border: 2rpx solid rgba(255, 173, 71, 1)
color: #FFFFFF
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
border-radius: 39rpx
border: 2rpx solid rgba(255, 173, 71, 1)
padding: 0rpx 30rpx
color: rgba(255, 173, 71, 1)
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
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
// background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, #fff 100%);
display: flex;
flex-direction: column;
position: fixed
.index-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.index-option
margin-top: 27rpx;
display: flex;
.option-left
display: flex;
width: 427rpx;
height: 56rpx;
background: #4778EC;
border-radius: 0rpx 17rpx 17rpx 0rpx;
align-items: center;
.left-item
width: 117rpx;
text-align: center;
line-height: 47rpx;
height: 47rpx;
margin-right: 27rpx;
color: #FFFFFF;
.left-item:active
color: blue;
.option-right
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 0 49rpx;
.right-input
width: 100%;
height: 45rpx;
background: rgba(255,255,255,0.5);
border-radius: 17rpx 17rpx 17rpx 17rpx;
border: 3rpx solid #FFFFFF;
padding: 0 50rpx 0 10rpx;
color: #FFFFFF;
.iconsearch
position: absolute;
right: 60rpx;
.tab-options
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 77rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
padding: 0 24rpx;
overflow: hidden;
.tab-scroll
height: 77rpx;
line-height: 77rpx;
flex: 1;
overflow: hidden;
padding-right: 10rpx;
.tab-op-left
display: flex;
align-items: center;
flex-wrap: nowrap;
.tab-list
text-align: center;
white-space: nowrap;
margin-right: 30rpx;
font-size: 28rpx;
color: #606060;
.tab-op-right
display: flex;
align-items: center;
.tab-recommend
white-space: nowrap;
width: fit-content;
padding: 0 10rpx;
height: 42rpx;
background: #4778EC;
border-radius: 17rpx 17rpx 0rpx 17rpx;
text-align: center;
color: #FFFFFF;
font-size: 21rpx;
line-height: 42rpx;
margin-right: 14rpx;
.tab-number
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: center;
.tab-filter
display: flex;
.image
width: 28rpx;
height: 27rpx;
.falls-scroll
flex: 1;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, #fff 100%)
.falls
padding: 20rpx 40rpx;
.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
// height: 49rpx;
font-size: 42rpx;
color: #606060;
line-height: 49rpx;
text-align: left;
word-break:break-all
.falls-card-pay
// height: 50rpx;
word-break:break-all
font-size: 34rpx;
color: #002979;
line-height: 50rpx;
text-align: left;
display: flex;
align-items: end;
position: relative
.pay-text
color: #002979;
padding-right: 10rpx
.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: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
padding: 0 10rpx;
line-height: 30rpx;
font-weight: 400;
font-size: 21rpx;
color: #FFFFFF;
text-align: center;
margin-top: 14rpx;
.falls-card-company,.falls-card-pepleNumber
margin-top: 14rpx;
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: left;
.falls-card-pepleNumber
display: flex;
justify-content: space-between;
align-items: center;
.falls-card-matchingrate
margin-top: 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 21rpx;
color: #4778EC;
text-align: left;
.logo
width: 200rpx;
height: 200rpx;
.tabchecked
color: #4778EC !important
.isBut{
filter: grayscale(100%);
}
</style>

6
pages/login/components/tabcontrol.vue
View File

@@ -21,6 +21,9 @@
<swiper-item @touchmove.stop="false">
<slot name="tab3"></slot>
</swiper-item>
<swiper-item @touchmove.stop="false">
<slot name="tab3"></slot>
</swiper-item>
<swiper-item @touchmove.stop="false">
<slot name="tab4"></slot>
</swiper-item>
@@ -52,8 +55,9 @@ export default {
<style lang="stylus" scoped>
.tab-container
width: 100%
// flex: 1
height: 100%
width: 100%
display: flex
align-items: center
justify-content: center

650
pages/login/login.vue
View File

@@ -1,239 +1,240 @@
<template>
<view class="container">
<view :style="{ height: statusBarHeight + 'px' }"></view>
<AppLayout title="AI+就业服务程序">
<tabcontrolVue :current="tabCurrent">
<!-- tab0 -->
<template v-slot:tab0>
<view class="login-content">
<image class="logo" src="../../static/logo.png"></image>
<view class="logo-title">就业</view>
</view>
<view class="btns">
<button class="wxlogin" @click="loginTest">登录</button>
<!-- <button open-type="getUserInfo" @getuserinfo="getuserinfo" class="wxlogin">登录</button> -->
<button class="wxlogin" @click="loginTest">内测登录</button>
<view class="wxaddress">青岛市公共就业和人才服务中心</view>
</view>
</template>
<!-- tab1 -->
<template v-slot:tab1>
<view class="tabtwo">
<view class="tabtwo-top">
<view class="color_FFFFFF fs_30">选择您的性别1/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="fl_box fl_justmiddle fl_1 fl_alstart">
<view class="tabtwo-sex" @click="changeSex(1)">
<image class="sex-img" src="../../static/icon/woman.png"></image>
<view class="mar_top5">女</view>
<view v-if="fromValue.sex === 1" class="dot doted"></view>
<view v-else class="dot"></view>
<view class="content-one">
<view>
<view class="content-title">
<view class="title-lf">
<view class="lf-h1">请您完善求职名片</view>
<view class="lf-text">个人信息仅用于推送优质内容</view>
</view>
<view class="title-ri">
<text style="color: #256bfa">1</text>
<text>/2</text>
</view>
</view>
<view class="tabtwo-sex" @click="changeSex(0)">
<image class="sex-img" src="../../static/icon/man.png"></image>
<view class="mar_top5">男</view>
<view v-if="fromValue.sex === 0" class="dot doted"></view>
<view v-else class="dot"></view>
<view class="content-input" @click="changeExperience">
<view class="input-titile">工作经验</view>
<input
class="input-con"
v-model="state.experienceText"
disabled
placeholder="请选择您的工作经验"
/>
</view>
<view class="content-sex">
<view class="sex-titile">求职区域</view>
<view class="sext-ri">
<view
class="sext-box"
:class="{ 'sext-boxactive': fromValue.sex === 0 }"
@click="changeSex(0)"
>
男
</view>
<view
class="sext-box"
:class="{ 'sext-boxactive': fromValue.sex === 1 }"
@click="changeSex(1)"
>
女
</view>
</view>
</view>
<view class="content-input" @click="changeEducation">
<view class="input-titile">学历</view>
<input class="input-con" v-model="state.educationText" disabled placeholder="本科" />
</view>
</view>
<view class="nextstep" @tap="nextStep">下一步</view>
<view class="next-btn" @tap="nextStep">下一步</view>
</view>
</template>
<!-- tab2 -->
<template v-slot:tab2>
<view class="tabtwo">
<view class="tabtwo-top">
<view class="color_FFFFFF fs_30">选择您的年龄断段2/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="fl_box fl_deri fl_almiddle">
<!-- <view class="agebtn agebtned">30岁以下</view> -->
<view
class="agebtn"
:class="{ agebtned: item.value === fromValue.age }"
v-for="item in state.ageList"
:key="item.value"
@click="changeAge(item.value)"
>
{{ item.label }}
<view class="content-one">
<view>
<view class="content-title">
<view class="title-lf">
<view class="lf-h1">请您完善求职名片</view>
<view class="lf-text">个人信息仅用于推送优质内容</view>
</view>
<view class="title-ri">
<text style="color: #256bfa">2</text>
<text>/2</text>
</view>
</view>
<view class="content-input" @click="changeArea">
<view class="input-titile">求职区域</view>
<input
class="input-con"
v-model="state.areaText"
disabled
placeholder="请选择您的求职区域"
/>
</view>
<view class="content-input" @click="changeJobs">
<view class="input-titile">求职岗位</view>
<input
class="input-con"
disabled
v-if="!state.jobsText.length"
placeholder="请选择您的求职岗位"
/>
<view class="input-nx" @click="changeJobs" v-else>
<view class="nx-item" v-for="item in state.jobsText">{{ item }}</view>
</view>
</view>
<view class="content-input" @click="changeSalay">
<view class="input-titile">期望薪资</view>
<input
class="input-con"
v-model="state.salayText"
disabled
placeholder="请选择您的期望薪资"
/>
</view>
</view>
<view class="fl_box fl_justmiddle"></view>
<view class="nextstep" @tap="nextStep">下一步</view>
</view>
</template>
<!-- tab3 -->
<template v-slot:tab3>
<view class="tabtwo">
<view class="tabtwo-top">
<view class="color_FFFFFF fs_30">选择您的学历3/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="eduction-content">
<view
class="eductionbtn"
:class="{ eductionbtned: item.value === fromValue.education }"
v-for="item in oneDictData('education')"
@click="changeEducation(item.value)"
:key="item.value"
>
{{ item.label }}
</view>
</view>
<view class="nextstep" @tap="nextStep">下一步</view>
</view>
</template>
<!-- tab4 -->
<template v-slot:tab4>
<view class="tabtwo">
<view class="tabtwo-top">
<view class="color_FFFFFF fs_30">您期望的薪资范围4/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="salary">
<picker-view
indicator-style="height: 140rpx;"
:value="state.salayData"
@change="bindChange"
class="picker-view"
>
<picker-view-column>
<view class="item" v-for="(item, index) in state.lfsalay" :key="index">
<view class="item-child" :class="{ 'item-childed': state.salayData[0] === index }">
{{ item }}k
</view>
</view>
</picker-view-column>
<view class="item-center">至</view>
<picker-view-column>
<view class="item" v-for="(item, index) in state.risalay" :key="index">
<view class="item-child" :class="{ 'item-childed': state.salayData[2] === index }">
{{ item }}k
</view>
</view>
</picker-view-column>
</picker-view>
</view>
<view class="fl_box fl_justmiddle"></view>
<view class="nextstep" @tap="nextStep">下一步</view>
</view>
</template>
<!-- tab5 -->
<template v-slot:tab5>
<view class="tabtwo">
<view class="tabtwo-top">
<view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="eduction-content">
<!-- <view class="eductionbtn eductionbtned">市南区</view> -->
<view
class="eductionbtn"
:class="{ eductionbtned: item.value === fromValue.area }"
v-for="item in oneDictData('area')"
:key="item.value"
@click="changeArea(item.value)"
>
{{ item.label }}
</view>
<!-- <view class="eductionbtn">不限区域</view> -->
</view>
<view class="nextstep" @tap="nextStep">下一步</view>
</view>
</template>
<!-- tab6 -->
<template v-slot:tab6>
<view class="tabtwo sex-two">
<view class="tabtwo-top mar_top25 mar_le25">
<view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
<view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
</view>
<view class="sex-content fl_1">
<expected-station @onChange="changeJobTitleId" :station="state.station"></expected-station>
</view>
<button class="nextstep confirmStep" @click="complete">完成</button>
<!-- <navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
<button class="nextstep confirmStep" @click="complete">完成</button>
</navigator> -->
<view class="next-btn" @tap="complete">开启求职之旅</view>
</view>
</template>
</tabcontrolVue>
</view>
<SelectJobs ref="selectJobsModel"></SelectJobs>
</AppLayout>
</template>
<script setup>
import tabcontrolVue from './components/tabcontrol.vue';
import { reactive, inject, watch, ref } from 'vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { statusBarHeight } = inject('deviceInfo');
const { $api, navTo } = inject('globalFunction');
const { loginSetToken, getUserResume } = useUserStore();
const { getDictSelectOption, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
// status
const selectJobsModel = ref();
const tabCurrent = ref(0);
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
station: [],
stationCateLog: 1,
ageList: [],
lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
risalay: JSON.parse(JSON.stringify(salay)),
salayData: [0, 0, 0],
areaText: '',
educationText: '',
experienceText: '',
salayText: '',
jobsText: [],
});
const fromValue = reactive({
sex: 1,
age: '0',
education: '4',
salaryMin: 2000,
salaryMax: 2000,
area: 0,
jobTitleId: '',
experience: '1',
});
onLoad((parmas) => {
getDictSelectOption('age').then((data) => {
state.ageList = data;
});
getTreeselect();
});
// 选择薪资
function bindChange(val) {
state.salayData = val.detail.value;
const copyri = JSON.parse(JSON.stringify(salay));
const [lf, _, ri] = val.detail.value;
state.risalay = copyri.slice(lf, copyri.length);
fromValue.salaryMin = copyri[lf] * 1000;
fromValue.salaryMax = state.risalay[ri] * 1000;
}
onMounted(() => {});
function changeSex(sex) {
fromValue.sex = sex;
}
function changeAge(age) {
fromValue.age = age;
function changeExperience() {
openSelectPopup({
title: '工作经验',
maskClick: true,
data: [oneDictData('experience')],
success: (_, [value]) => {
fromValue.experience = value.value;
state.experienceText = value.label;
},
change(_, [value]) {
// this.setColunm(1, [123, 123]);
console.log(this);
},
});
}
function changeEducation(education) {
fromValue.education = education;
function changeEducation() {
openSelectPopup({
title: '学历',
maskClick: true,
data: [oneDictData('education')],
success: (_, [value]) => {
fromValue.area = value.value;
state.educationText = value.label;
},
});
}
function changeArea(area) {
fromValue.area = area;
function changeArea() {
openSelectPopup({
title: '区域',
maskClick: true,
data: [oneDictData('area')],
success: (_, [value]) => {
fromValue.area = value.value;
state.areaText = '青岛市-' + value.label;
},
});
}
function changeJobTitleId(jobTitleId) {
fromValue.jobTitleId = jobTitleId;
function changeSalay() {
let leftIndex = 0;
openSelectPopup({
title: '薪资',
maskClick: true,
data: [state.lfsalay, state.risalay],
unit: 'k',
success: (_, [min, max]) => {
fromValue.salaryMin = min.value * 1000;
fromValue.salaryMax = max.value * 1000;
state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
},
change(e) {
const salayData = e.detail.value;
if (leftIndex !== salayData[0]) {
const copyri = JSON.parse(JSON.stringify(salay));
const [lf, ri] = e.detail.value;
const risalay = copyri.slice(lf, copyri.length);
this.setColunm(1, risalay);
leftIndex = salayData[0];
}
},
});
}
// 行为
// function changeStationLog(item) {
// state.stationCateLog = item.value;
// }
function changeJobs() {
selectJobsModel.value?.open({
title: '添加岗位',
success: (ids, labels) => {
fromValue.jobTitleId = ids;
state.jobsText = labels.split(',');
},
});
}
function nextStep() {
tabCurrent.value += 1;
}
// function handleScroll(event) {
// console.log('滚动条滚动', event.detail.scrollTop);
// console.log(Math.round(event.detail.scrollTop / 75));
// // this.activeIndex = Math.round(event.detail.scrollTop / 75);
// }
// 获取职位
function getTreeselect() {
@@ -276,12 +277,55 @@ function complete() {
</script>
<style lang="stylus" scoped>
.input-nx
position: relative
border-bottom: 2rpx solid #EBEBEB
padding-bottom: 30rpx
display: flex
flex-wrap: wrap
.nx-item
padding: 20rpx 28rpx
width: fit-content
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-right: 24rpx
margin-top: 24rpx
.nx-item::before
position: absolute;
right: 20rpx;
top: 60rpx;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.nx-item::after
position: absolute;
right: 20rpx;
top: 61rpx;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.container
background: linear-gradient(#4778EC, #002979);
// background: linear-gradient(#4778EC, #002979);
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
position: fixed;
background: url('@/static/icon/background2.png') 0 0 no-repeat;
background-size: 100% 728rpx;
display: flex;
flex-direction: column
.container-hader
height: 88rpx;
text-align: center;
line-height: 88rpx;
color: #000000;
font-weight: bold
font-size: 32rpx
.login-content
position: absolute;
@@ -296,7 +340,7 @@ function complete() {
height: 182rpx;
.logo-title
font-size: 88rpx;
color: #FFFFFF;
color: #22c984;
width: 180rpx;
.btns
position: absolute;
@@ -316,179 +360,97 @@ function complete() {
color: #BBBBBB;
margin-top: 70rpx;
text-align: center;
// 2
.tabtwo
padding: 40rpx;
.content-one
padding: 60rpx 28rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: calc(100% - 40rpx);
.tabtwo-top
margin: 222rpx 0 0 0;
width: 100%;
.tabtwo-sex
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 40rpx;
margin: 200rpx 60rpx 0 60rpx;
.sex-img
width: 184rpx;
height: 184rpx;
.dot
width: 68rpx;
height: 68rpx;
border-radius: 50%;
background: #d1d1d6;
position: relative;
.dot:before
content: '';
width: 44rpx;
height: 44rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #1e4baa;
.doted
background: #13C57C;
.doted:after{
content: '';
width: 34rpx;
height: 34rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%
background: #13C57C;
}
.agebtn
width: 630rpx;
height: 108rpx;
border-radius: 20rpx;
background: #d9d9d9;
text-align: center;
line-height: 108rpx;
font-size: 40rpx;
margin-top: 50rpx;
color: #606060;
.agebtned
background: #13C57C;
color: #FFFFFF;
.nextstep
width: 630rpx;
height: 98rpx;
border-radius: 20rpx;
background: #13C57C;
text-align: center;
line-height: 98rpx;
font-size: 36rpx;
color: #FFFFFF;
margin-bottom: 150rpx;
.confirmStep
margin-bottom: 50rpx;
.eduction-content
width: fit-content;
display: grid;
grid-template-columns: 300rpx 300rpx;
grid-gap: 20rpx;
margin-top: 50rpx;
.eductionbtn
width: 300rpx;
height: 108rpx;
border-radius: 20rpx;
background: #d9d9d9;
text-align: center;
line-height: 108rpx;
font-size: 36rpx;
color: #606060;
.eductionbtned
background: #13C57C;
color: #FFFFFF;
.salary
width: fit-content;
display: grid;
grid-template-columns: 640rpx;
grid-gap: 20rpx;
margin-top: 50rpx;
.picker-view {
justify-content: space-between
height: calc(100% - 120rpx)
.content-title
display: flex
justify-content: space-between;
align-items: center
margin-bottom: 70rpx
.title-lf
font-size: 44rpx;
color: #000000;
font-weight: 600;
.lf-text
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
.title-ri
font-size: 36rpx;
color: #000000;
font-weight: 600;
.content-input
margin-bottom: 52rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
position: relative;
.input-con::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.input-con::after
position: absolute;
right: 20rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
.sex-titile
line-height: 80rpx;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
font-weight: 400;
font-size: 28rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
.next-btn
width: 100%;
height: 600rpx;
margin-top: 20rpx;
.uni-picker-view-mask{
background: rgba(0,0,0,0);
}
}
.item {
.item-child{
line-height: 90rpx;
font-size: 38rpx;
color: #606060;
text-align: center;
background: #D9D9D9;
border-radius: 20rpx;
margin: 20rpx 10rpx 20rpx 10rpx;
}
.item-childed{
line-height: 105rpx;
margin: 10rpx 5rpx 10rpx 5rpx;
background: #13C57C;
color: #FFFFFF;
}
}
.item-center{
width: 40rpx;
line-height: 600rpx;
width: 51rpx;
height: 47rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 28rpx;
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
}
.uni-picker-view-indicator:after{
border: 0
}
.uni-picker-view-indicator:before{
border: 0
}
.center-text
color: #FFFFFF;
text-align: center;
line-height: 400rpx;
.salary-content
width: 300rpx;
height: 380rpx;
.salary-content-item
height: 104rpx;
line-height: 104rpx;
margin: 20rpx 10rpx 20rpx 10rpx;
border-radius: 20rpx;
background: #d9d9d9;
text-align: center;
font-size: 38rpx;
.salary-content-item-selected
margin: 10rpx 5rpx 10rpx 5rpx;
background: #13C57C;
color: #FFFFFF;
.sex-two
padding-left: 0;
padding-right: 0;
background: #4678ec;
.sex-content
border-radius: 20rpx;
width: 100%;
margin-top: 20rpx;
margin-bottom: 40rpx;
display: flex;
overflow: hidden;
height: 100%
line-height: 90rpx
</style>

402
pages/mine/mine.vue
View File

@@ -1,9 +1,8 @@
<template>
<view class="app-container">
<view class="mine-AI">AI+就业服务程序</view>
<view class="mine-userinfo">
<AppLayout title="我的" back-gorund-color="#F4F4F4">
<view class="mine-userinfo btn-feel" @click="navTo('/packageA/pages/myResume/myResume')">
<view class="userindo-head">
<image class="userindo-head-img" v-if="userInfo.age === '0'" src="/static/icon/boy.png"></image>
<image class="userindo-head-img" v-if="userInfo.sex === '0'" src="/static/icon/boy.png"></image>
<image class="userindo-head-img" v-else src="/static/icon/girl.png"></image>
</view>
<view class="userinfo-ls">
@@ -14,46 +13,90 @@
<view class="userinfo-ls-resume" v-else>简历完成度 {{ Completion }}</view>
</view>
</view>
<view class="mine-tab">
<view class="tab-item" @click="navTo('/packageA/pages/myResume/myResume')">
<image class="item-img" src="/static/icon/resume.png"></image>
<view class="item-text">我的简历</view>
<view class="mini-number">
<view class="numbe-item button-click" @click="navTo('/packageA/pages/Intendedposition/Intendedposition')">
<view class="mini-num">{{ counts.applyCount }}</view>
<view class="mini-text">投递</view>
</view>
<view class="tab-item" @click="navTo('/packageA/pages/collection/collection')">
<image class="item-img" src="/static/icon/collect.png"></image>
<view class="item-text">我的收藏</view>
<view class="numbe-item button-click" @click="navTo('/packageA/pages/collection/collection')">
<view class="mini-num">{{ counts.collectionCount }}</view>
<view class="mini-text">收藏</view>
</view>
<view class="tab-item" @click="navTo('/packageA/pages/browseJob/browseJob')">
<image class="item-img" src="/static/icon/browse.png"></image>
<view class="item-text">我的浏览</view>
<view class="numbe-item button-click" @click="navTo('/packageA/pages/browseJob/browseJob')">
<view class="mini-num">{{ counts.jobReviewCount }}</view>
<view class="mini-text">足迹</view>
</view>
<view class="tab-item" @click="navTo('/packageA/pages/Intendedposition/Intendedposition')">
<image class="item-img" src="/static/icon/quaters.png"></image>
<view class="item-text">意向岗位</view>
<view class="numbe-item button-click" @click="navTo('/packageA/pages/reservation/reservation')">
<view class="mini-num">{{ counts.fairCollecitonCount }}</view>
<view class="mini-text">预约</view>
</view>
</view>
<view class="mine-options">
<view class="mine-options-item">实名认证</view>
<view class="mine-options-item">素质测评</view>
<view class="mine-options-item">AI面试</view>
<!-- <view class="mine-options-item">账号与安全</view> -->
<view class="mine-options-item">通知与提醒</view>
<view class="mine-logout" @click="logOut">退出登录</view>
<view class="mini-cards">
<view class="card-top btn-feel">
<view class="top-title line_1">
<text>{{ userInfo.name || '暂无用户名' }}</text>
&nbsp;|&nbsp;
<dict-Label dictType="education" :value="userInfo.education"></dict-Label>
</view>
<view class="top-subTitle line_1">
<text v-for="(item, index) in userInfo.jobTitle" :key="index">
&nbsp;{{ item }}&nbsp;
<text v-if="userInfo.jobTitle.length - 1 !== index">|</text>
</text>
</view>
<view class="top-btn button-click" @click="navTo('/packageA/pages/personalInfo/personalInfo')">
修改简历
</view>
</view>
<view class="card-main">
<view class="main-title">服务专区</view>
<view class="main-row btn-feel">
<view class="row-left">
<image class="left-img" src="@/static/icon/server1.png"></image>
<text class="left-text">实名认证</text>
</view>
<view class="row-right">已认证</view>
</view>
<view class="main-row btn-feel">
<view class="row-left">
<image class="left-img" src="@/static/icon/server2.png"></image>
<text class="left-text">素质测评</text>
</view>
<view class="row-right">
<uni-icons color="#909090" type="right" size="14"></uni-icons>
</view>
</view>
<view class="main-row btn-feel">
<view class="row-left">
<image class="left-img" src="@/static/icon/server3.png"></image>
<text class="left-text">AI面试</text>
</view>
<view class="row-right">
<uni-icons color="#909090" type="right" size="14"></uni-icons>
</view>
</view>
<view class="main-row btn-feel">
<view class="row-left">
<image class="left-img" src="@/static/icon/server4.png"></image>
<text class="left-text">通知与提醒</text>
</view>
<view class="row-right">已开启</view>
</view>
</view>
<view class="card-back button-click" @click="logOut">退出登录</view>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog
mode="base"
title="确定退出登录吗？"
type="info"
:duration="2000"
:before-close="true"
@confirm="confirm"
@close="close"
></uni-popup-dialog>
</uni-popup>
</view>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog
mode="base"
title="确定退出登录吗？"
type="info"
:duration="2000"
:before-close="true"
@confirm="confirm"
@close="close"
></uni-popup-dialog>
</uni-popup>
<!-- 自定义tabbar -->
<!-- <tabbar-custom :currentpage="4"></tabbar-custom> -->
</view>
</AppLayout>
</template>
<script setup>
@@ -64,10 +107,13 @@ const { $api, navTo } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
const popup = ref(null);
const { userInfo, Completion } = storeToRefs(useUserStore());
const counts = ref({});
function logOut() {
popup.value.open();
}
onShow(() => {
getUserstatistics();
});
function close() {
popup.value.close();
@@ -78,120 +124,180 @@ function confirm() {
}
const isAbove90 = (percent) => parseFloat(percent) < 90;
function getUserstatistics() {
$api.createRequest('/app/user/statistics').then((resData) => {
console.log(resData);
counts.value = resData.data;
});
}
</script>
<style lang="stylus" scoped>
.app-container
width: 100%;
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.card-top {
transition: transform 0.3s ease;
transform-style: preserve-3d;
}
.card-top.tilt {
transform: perspective(600px) rotateY(8deg) rotateX(4deg);
}
.mini-cards{
padding: 28rpx
.card-top{
background-image: url('@/static/icon/backAI2.png'), linear-gradient(to left, #9E74FD 0%, #256BFA 63%, #4180FF 100%);
background-repeat: no-repeat, no-repeat;
background-position: right top, center;
background-size: 396rpx 212rpx, cover;
padding: 36rpx 36rpx 64rpx 36rpx
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: relative
.top-title{
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
width: 452rpx;
}
.top-subTitle{
margin-top: 8rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
width: 400rpx;
}
.top-btn{
width: 164rpx;
height: 64rpx;
background: radial-gradient( 0% 24% at 57% 42%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.27) 100%);
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
border-radius: 80rpx 80rpx 80rpx 80rpx;
border: 2rpx solid #D2D2D2;
text-align: center
line-height: 64rpx
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
position: absolute
right: 44rpx
top: 50rpx
}
}
.card-main{
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
position: relative;
top: -28rpx
padding: 26rpx 60rpx 0 32rpx
.main-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
}
.main-row{
display: flex
align-items: center
justify-content: space-between
.row-left{
display: flex
align-items: center
.left-img{
width: 44rpx;
height: 44rpx;
margin: 32rpx 16rpx 32rpx 10rpx
}
.left-text{
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
.row-right{
color: #6E6E6E;
font-size: 28rpx;
}
}
.main-row:last-child{
margin: 0
}
}
.card-back{
height: 96rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
text-align: center;
line-height: 96rpx
font-size: 28rpx;
color: #256BFA;
}
}
.mini-number{
padding: 24rpx
display: flex
justify-content: space-around
.numbe-item{
display: flex
flex-direction: column
justify-content: center
align-items: center
.mini-num{
font-weight: 500;
font-size: 44rpx;
color: #333333;
}
.mini-text{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
}
}
.mine-userinfo
display: flex;
flex-direction: column;
.mine-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.mine-userinfo
display: flex;
justify-content: flex-start;
align-items: center;
padding: 64rpx;
.userindo-head
width: 101rpx;
height: 101rpx;
background: #D9D9D9;
border-radius: 50%
overflow: hidden
margin-right: 40rpx;
.userindo-head-img
width: 100%;
height: 100%;
.userinfo-ls
display: flex;
flex-direction: column;
align-items: flex-start;
.userinfo-ls-name
font-size: 42rpx;
color: #FFFFFF;
.userinfo-ls-resume
font-size: 21rpx;
color: #D9D9D9;
.mine-tab
margin: 0 30rpx;
height: calc(155rpx - 30rpx);
background: #FFFFFF;
border-radius: 17rpx 17rpx 17rpx 17rpx;
display: flex;
padding: 15rpx;
.tab-item
display: flex;
flex-direction: column;
width: calc(100% / 4);
align-items: center;
justify-content: center;
position: relative;
.item-img
height: 55rpx;
width: 50rpx;
.item-text
font-size: 21rpx;
color: #000000;
line-height: 25rpx;
text-align: center;
margin-top: 10rpx;
.tab-item::after
position: absolute;
right: 0;
content: '';
width: 0rpx;
height: 96rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border-right: 2rpx solid #4778EC;
.tab-item:last-child::after
border-right: 0;
.tab-item:nth-child(2)>.item-img
width: 51rpx;
height: 45rpx;
margin-top: 6rpx;
margin-bottom: 4rpx;
.tab-item:nth-child(3)>.item-img
width: 62rpx;
height: 41rpx;
margin-top: 6rpx
margin-bottom: 10rpx;
.tab-item:nth-child(4)>.item-img
width: 45rpx;
height: 47rpx;
margin-bottom: 8rpx;
.mine-options
margin: 43rpx 30rpx;
min-height: 155rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 17rpx 17rpx;
display: flex;
padding: 24rpx 45rpx;
justify-content: flex-start;
align-items: center;
padding: 30rpx;
position: relative;
.userindo-head
width: 101rpx;
height: 101rpx;
overflow: hidden
border-radius: 50%
margin-right: 22rpx;
.userindo-head-img
width: 100%;
height: 100%;
.userinfo-ls
display: flex;
flex-direction: column;
min-height: min-content;
.mine-options-item
height: 80rpx;
align-items: flex-start;
.userinfo-ls-name
font-weight: 600;
font-size: 40rpx;
color: #333333;
border-radius: 50%
.userinfo-ls-resume
font-weight: 400;
font-size: 28rpx;
color: #000000;
line-height: 80rpx;
border-bottom: 2rpx solid #4778EC;
padding: 0 30rpx;
.mine-logout
margin: 250rpx auto 0 auto;
width: 399rpx;
height: 96rpx;
background: #FFAD47;
border-radius: 17rpx 17rpx 17rpx 17rpx;
text-align: center;
line-height: 96rpx;
color: #FFFFFF;
font-size: 35rpx;
color: #6C7282;
.mine-userinfo::before
position: absolute;
right: 40rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #A2A2A2;
transform: translate(0, -50%) rotate(-45deg);
.mine-userinfo::after
position: absolute;
right: 40rpx;
top: calc(50% + 1rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #A2A2A2;
transform: rotate(45deg)
</style>

230
pages/msglog/msglog.vue
View File

@@ -1,132 +1,152 @@
<template>
<view class="app-container">
<view class="msg-AI">AI+就业服务程序</view>
<view class="msg-tab">
<view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
<view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
<view class="app-custom-root">
<view class="app-container">
<!-- 顶部头部区域 -->
<view class="container-header">
<view class="header-btnLf button-click" @click="changeType(0)" :class="{ active: state.current === 0 }">
已读消息
<view class="btns-wd"></view>
</view>
<view class="header-btnLf button-click" @click="changeType(1)" :class="{ active: state.current === 1 }">
未读消息
<view class="btns-wd"></view>
</view>
</view>
<!-- 主体内容区域 -->
<view class="container-main">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
<component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
</swiper-item>
</swiper>
</view>
</view>
<view class="msg-list">
<swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/recommendday.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/recommendday.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 自定义tabbar -->
<!-- <tabbar-custom :currentpage="3"></tabbar-custom> -->
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import readComponent from './read.vue';
import unreadComponent from './unread.vue';
const loadedMap = reactive([false, false]);
const swiperRefs = [ref(null), ref(null)];
const components = [readComponent, unreadComponent];
const state = reactive({
current: 0,
all: [{}],
});
onLoad(() => {});
onMounted(() => {
handleTabChange(state.current);
});
const handelComponentsRef = (el, index) => {
if (el) {
swiperRefs[index].value = el;
}
};
// 查看消息类型
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 changeSwiperMsgType(e) {
const currented = e.detail.current;
state.current = currented;
}
function seemsg(index) {
state.current = index;
}
</script>
<style lang="stylus" scoped>
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 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;
.msg-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.msg-tab
padding: 85rpx 0 0 30rpx;
height: 100%;
width: 100%;
.container-header {
height: calc(88rpx - 14rpx);
text-align: center;
line-height: calc(88rpx - 14rpx);
font-size: 32rpx;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
color: #D9D9D9;
.msg-tab-item
margin-right: 40rpx;
.actived
font-size: 28rpx;
color: #FFFFFF;
text-shadow: 0rpx 14rpx 14rpx rgba(0,0,0,0.25);
.msg-list
flex: 1;
overflow: hidden;
.swiper
height: 100%;
.list
display: flex;
flex-direction: column;
.list-card
height: calc(119rpx - 26rpx - 26rpx);
width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
background: #FFFFFF;
border-radius: 17rpx;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 26rpx 36rpx;
margin: 36rpx 23rpx;
.card-img
width: 63rpx;
height: 63rpx;
background: #D9D9D9;
border-radius: 50%
display: grid;
place-items: center;
margin-right: 30rpx;
.card-img-flame
width: 100%;
height: 100%
.card-info
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
.info-title
font-weight: 400;
font-size: 28rpx;
color: #000000;
.info-text
font-size: 17rpx;
color: #606060;
.card-time
font-size: 17rpx;
color: #606060;
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;
</style>

86
pages/msglog/read.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<view class="scrollmain">
<view class="list-card btn-feel" v-for="(item, index) in 20" :key="index">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/msgtype.png"></image>
</view>
<view class="card-info">
<view class="info-title">
<text>今日推荐</text>
<view class="card-time">刚才</view>
</view>
<view class="info-text line_2">这里有9个职位很适合你，快来看看吧</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { reactive, inject, ref } from 'vue';
const isLoaded = ref(false);
async function loadData() {
try {
if (isLoaded.value) return;
isLoaded.value = true;
} catch (err) {
isLoaded.value = false; // 重置状态允许重试
throw err;
}
}
function handleScrollToLower() {}
defineExpose({ loadData });
</script>
<style lang="stylus" scoped>
.main-scroll {
width: 100%
height: 100%;
}
.scrollmain{
padding: 28rpx
}
.list-card
background: #FFFFFF;
border-radius: 17rpx;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 26rpx 36rpx;
margin: 0 0 28rpx 0
.card-img
width: 96rpx;
height: 96rpx;
border-radius: 50%
display: grid;
place-items: center;
margin-right: 30rpx;
.card-img-flame
width: 100%;
height: 100%
.card-info
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
.info-title
font-weight: 500;
font-size: 32rpx;
color: #333333;
display: flex;
justify-content: space-between;
width: 100%
.card-time
font-weight: 400;
font-size: 28rpx;
color: #AAAAAA;
height: 100%
margin: 4rpx;
.info-text
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-top: 4rpx;
</style>

86
pages/msglog/unread.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<view class="scrollmain">
<view class="list-card btn-feel" v-for="(item, index) in 20" :key="index">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/msgtype.png"></image>
</view>
<view class="card-info">
<view class="info-title">
<text>今日推荐</text>
<view class="card-time">刚才</view>
</view>
<view class="info-text line_2">这里有9个职位很适合你，快来看看吧</view>
</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import { reactive, inject, ref } from 'vue';
const isLoaded = ref(false);
async function loadData() {
try {
if (isLoaded.value) return;
isLoaded.value = true;
} catch (err) {
isLoaded.value = false; // 重置状态允许重试
throw err;
}
}
function handleScrollToLower() {}
defineExpose({ loadData });
</script>
<style lang="stylus" scoped>
.main-scroll {
width: 100%
height: 100%;
}
.scrollmain{
padding: 28rpx
}
.list-card
background: #FFFFFF;
border-radius: 17rpx;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 26rpx 36rpx;
margin: 0 0 28rpx 0
.card-img
width: 96rpx;
height: 96rpx;
border-radius: 50%
display: grid;
place-items: center;
margin-right: 30rpx;
.card-img-flame
width: 100%;
height: 100%
.card-info
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
.info-title
font-weight: 500;
font-size: 32rpx;
color: #333333;
display: flex;
justify-content: space-between;
width: 100%
.card-time
font-weight: 400;
font-size: 28rpx;
color: #AAAAAA;
height: 100%
margin: 4rpx;
.info-text
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-top: 4rpx;
</style>

417
pages/nearby/components/four.vue
View File

@@ -1,125 +1,108 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="two-head">
<!-- <view class="head-item active">市北区</view> -->
<view
class="head-item"
:class="{ active: state.comId === item.commercialAreaId }"
v-for="(item, index) in state.comlist"
:key="item.commercialAreaId"
:key="item.commercialAreaName"
@click="clickCommercialArea(item)"
>
{{ item.commercialAreaName }}
</view>
</view>
<view class="nearby-list">
<view class="list-head" @touchmove.stop.prevent>
<view class="tab-options">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll" @touchmove.stop>
<view class="tab-op-left">
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left">
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === 'all' }"
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === index }"
@click="choosePosition(index)"
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="tab-op-right">
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
<view class="tab-recommend">
<latestHotestStatus @confirm="handelHostestSearch"></latestHotestStatus>
</view>
<view class="tab-filter" @click="emit('onFilter', 3)">
<view class="tab-number" v-show="pageState.total">{{ formatTotal(pageState.total) }}</view>
<image class="image" src="/static/icon/filter.png"></image>
<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="one-cards">
<view class="card-box" v-for="(item, index) in list" :key="item.jobId" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.education">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<uni-icons type="star" size="28"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitude()"
:blong="longitude()"
></convert-distance>
</view>
</view>
</view>
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
<loadmore ref="loadmoreRef"></loadmore>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useDictStore from '@/stores/useDictStore';
import useUserStore from '@/stores/useUserStore';
const { getDictSelectOption, oneDictData } = useDictStore();
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { getLocation, longitude, latitude } = useLocationStore();
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { oneDictData } = useDictStore();
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
import point2 from '@/static/icon/point2.png';
import LocationPng from '@/static/icon/Location.png';
import selectFilter from '@/components/selectFilter/selectFilter.vue';
const emit = defineEmits(['onFilter']);
const state = reactive({
tabIndex: 'all',
tabBxText: 'buxianquyu',
comlist: [],
comId: 0,
});
const fromValue = reactive({
area: 0,
areaInfo: {},
});
const loadmoreRef = ref(null);
const userInfo = ref({});
const isLoaded = ref(false);
const showFilter = ref(false);
const selectFilterModel = ref();
const fromValue = reactive({
area: 0,
});
const loadmoreRef = ref(null);
const pageState = reactive({
page: 0,
total: 0,
@@ -131,20 +114,59 @@ const pageState = reactive({
});
const list = ref([]);
onShow(() => {
userInfo.value = useUserStore().userInfo;
});
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
]);
function choosePosition(index) {
state.tabIndex = index;
list.value = [];
if (index === 'all') {
pageState.search = {
...pageState.search,
jobTitle: '',
};
getJobList('refresh');
} else {
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
pageState.search.jobTitle = userInfo.value.jobTitle[index];
getJobList('refresh');
}
}
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;
console.log(pageState.search);
getJobList('refresh');
},
cancel: () => {
showFilter.value = false;
},
});
}
onLoad(() => {
getBusinessDistrict();
});
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
}
async function loadData() {
try {
if (isLoaded.value) return;
const area = oneDictData('area')[0];
fromValue.area = area.value;
getJobList('refresh');
isLoaded.value = true;
} catch (err) {
@@ -152,19 +174,6 @@ async function loadData() {
throw err;
}
}
function scrollBottom() {
getJobList();
loadmoreRef.value.change('loading');
}
function choosePosition(index) {
state.tabIndex = index;
if (index === 'all') {
pageState.search.jobTitle = '';
} else {
pageState.search.jobTitle = useUserStore().userInfo.jobTitle[index];
}
getJobList('refresh');
}
function clickCommercialArea(area) {
state.areaInfo = area;
@@ -172,6 +181,25 @@ function clickCommercialArea(area) {
getJobList('refresh');
}
function scrollBottom() {
getJobList();
loadmoreRef.value.change('loading');
}
// function choosePosition(index) {
// state.tabIndex = index;
// if (index === 'all') {
// pageState.search.jobTitle = '';
// } else {
// pageState.search.jobTitle = userInfo.jobTitle[index];
// }
// getJobList('refresh');
// }
function changeArea(area, item) {
fromValue.area = area;
getJobList('refresh');
}
function getBusinessDistrict() {
$api.createRequest(`/app/common/commercialArea`).then((resData) => {
if (resData.data.length) {
@@ -181,6 +209,7 @@ function getBusinessDistrict() {
}
});
}
function getJobList(type = 'add') {
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
@@ -197,7 +226,10 @@ function getJobList(type = 'add') {
radius: 2,
...pageState.search,
};
$api.createRequest('/app/job/commercialArea', params, 'POST').then((resData) => {
if (fromValue.area === state.tabBxText) {
params.countyIds = [];
}
$api.createRequest('/app/job/countyJob', params, 'POST').then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
@@ -241,125 +273,96 @@ defineExpose({ loadData, handleFilterConfirm });
.nearby-scroll
overflow: hidden;
.two-head
margin: 24rpx;
padding: 26rpx;
background: #FFFFFF;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 40rpx;
grid-row-gap: 30rpx;
margin: 22rpx;
display: flex;
flex-wrap: wrap
// grid-template-columns: repeat(4, 1fr);
// grid-column-gap: 10rpx;
// grid-row-gap: 24rpx;
border-radius: 17rpx 17rpx 17rpx 17rpx;
.head-item
min-width: 129rpx;
height: 44rpx;
line-height: 44rpx;
margin: 10rpx
white-space: nowrap
min-width: 156rpx
line-height: 64rpx
text-align: center;
width: fit-content;
background: #D9D9D9;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #606060;
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
background: #F6F6F6;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.active
background: #4778EC;
color: #FFFFFF;
.nearby-list
margin-top: 40rpx;
// background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.list-head
height: 77rpx;
background-color: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
position: relative;
top: -17rpx;
z-index: 9999;
.tab-options
display: flex;
align-items: center;
justify-content: space-between;
height: 77rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
padding: 0 24rpx;
overflow: hidden;
.tab-scroll
height: 77rpx;
line-height: 77rpx;
flex: 1;
overflow: hidden;
padding-right: 10rpx;
.tab-op-left
display: flex;
align-items: center;
flex-wrap: nowrap;
.tab-list
text-align: center;
white-space: nowrap;
margin-right: 30rpx;
font-size: 28rpx;
color: #606060;
.tab-op-right
display: flex;
align-items: center;
.tab-recommend
white-space: nowrap;
width: fit-content;
padding: 0 10rpx;
height: 42rpx;
background: #4778EC;
border-radius: 17rpx 17rpx 0rpx 17rpx;
text-align: center;
color: #FFFFFF;
font-size: 21rpx;
line-height: 42rpx;
margin-right: 12rpx;
.tab-number
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: center;
.tab-filter
display: flex;
.image
width: 28rpx;
height: 27rpx;
.one-cards
color: #256BFA;
background: #E9F0FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.nearby-list
border-top: 2rpx solid #EBEBEB;
height: 100%
.one-cards{
display: flex;
flex-direction: column;
padding: 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
}
.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;
.mineText
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: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-right
min-width: 120rpx
text-align: right
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: -14rpx;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.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)
</style>

492
pages/nearby/components/one.vue
View File

@@ -2,112 +2,111 @@
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="nearby-map" @touchmove.stop.prevent>
<map
style="width: 100%; height: 300px"
:latitude="latitude()"
:longitude="longitude()"
style="width: 100%; height: 400px"
:latitude="latitudeVal"
:longitude="longitudeVal"
:markers="mapCovers"
:circles="mapCircles"
:controls="mapControls"
@controltap="handleControl"
></map>
<view class="nearby-select">
<view class="select-view" @click="changeRangeShow">
<text>{{ pageState.search.radius }}km</text>
<image class="view-sx" :class="{ active: rangeShow }" src="@/static/icon/shaixun.png"></image>
</view>
<transition name="fade-slide">
<view class="select-list" v-if="rangeShow">
<view class="list-item button-click" v-for="(item, index) in range" @click="changeRadius(item)">
{{ item }}km
</view>
</view>
</transition>
<!-- <view class="select-list" v-show="!rangeShow">
<view class="list-item" v-for="(item, index) in range">{{ item }}km</view>
</view> -->
</view>
</view>
<view class="nearby-list">
<view class="list-head" @touchmove.stop.prevent>
<view class="tab-options">
<view class="tab-scroll" ref="progress">
<view class="tab-scr-d" :style="`width: ${state.progressWidth}`">
<view class="">1km</view>
<view class="">5km</view>
<view class="">10km</view>
<view class="nav-filter" @touchmove.stop.prevent>
<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>
<bingProgressComponent
strokeWidth="7px"
:max="10"
activeColor="#13C57C"
handleWidth="10px"
handleHeight="10px"
handleBorderRadius="5px"
handleColor="#4778EC"
@change="progressChange"
:showInfo="false"
:width="state.progressWidth"
></bingProgressComponent>
</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 class="tab-op-right">
<view class="tab-recommend">
<latestHotestStatus @confirm="handelHostestSearch"></latestHotestStatus>
</view>
<view class="tab-filter" @click="emit('onFilter', 0)">
<view class="tab-number" v-show="pageState.total">{{ formatTotal(pageState.total) }}</view>
<image class="image" src="/static/icon/filter.png"></image>
</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="one-cards">
<view class="card-box" v-for="(item, index) in list" :key="item.jobId" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.education">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<uni-icons type="star" size="28"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitude()"
:blong="longitude()"
></convert-distance>
</view>
</view>
</view>
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
<loadmore ref="loadmoreRef"></loadmore>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</template>
<script setup>
import point2 from '@/static/icon/point2.png';
import LocationPng from '@/static/icon/Location.png';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import useLocationStore from '@/stores/useLocationStore';
import bingProgressComponent from '/components/bing-progress/bing-progress.vue';
import screeningJobRequirementsVue from '@/components/screening-job-requirements/screening-job-requirements.vue';
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
const { getLocation, longitude, latitude } = useLocationStore();
import { onLoad, onShow } from '@dcloudio/uni-app';
import { msg } from '../../../common/globalFunction';
const { $api, navTo, debounce, vacanciesTo, customSystem, formatTotal } = inject('globalFunction');
const emit = defineEmits(['onFilter']);
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
import point2 from '@/static/icon/Location1.png';
import LocationPng from '@/static/icon/Location12.png';
import selectFilter from '@/components/selectFilter/selectFilter.vue';
const emit = defineEmits(['onFilter']);
const range = ref([1, 2, 4, 6, 8, 10]);
const rangeShow = ref(false);
const selectFilterModel = ref(null);
const tMap = ref();
const progress = ref();
const mapCovers = ref([]);
@@ -117,10 +116,10 @@ const mapControls = ref([
id: 1,
position: {
// 控件位置
left: customSystem.systemInfo.screenWidth - 50,
top: 180,
width: 30,
height: 30,
left: customSystem.systemInfo.screenWidth - 48 - 14,
top: 320,
width: 48,
height: 48,
},
iconPath: LocationPng, // 控件图标
},
@@ -137,17 +136,67 @@ const pageState = reactive({
},
});
const isLoaded = ref(false);
const showFilter = ref(false);
const list = ref([]);
const state = reactive({
progressWidth: '200px',
});
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
]);
function changeRangeShow() {
rangeShow.value = !rangeShow.value;
}
function changeRadius(item) {
pageState.search.radius = item;
rangeShow.value = false;
progressChange(item);
}
function choosePosition(index) {
state.tabIndex = index;
list.value = [];
if (index === 'all') {
pageState.search = {
...pageState.search,
jobTitle: '',
};
getJobList('refresh');
} else {
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
pageState.search.jobTitle = useUserStore().userInfo.jobTitle[index];
getJobList('refresh');
}
}
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;
console.log(pageState.search);
getJobList('refresh');
},
cancel: () => {
showFilter.value = false;
},
});
}
onLoad(() => {});
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
}
async function loadData() {
try {
if (isLoaded.value) return;
@@ -176,35 +225,39 @@ onMounted(() => {
});
function getInit() {
getLocation().then((res) => {
mapCovers.value = [
{
latitude: res.latitude,
longitude: res.longitude,
iconPath: point2,
},
];
mapCircles.value = [
{
latitude: res.latitude,
longitude: res.longitude,
radius: 1000,
fillColor: '#00b8002e',
},
];
getJobList('refresh');
});
useLocationStore()
.getLocation()
.then((res) => {
mapCovers.value = [
{
latitude: res.latitude,
longitude: res.longitude,
iconPath: point2,
},
];
mapCircles.value = [
{
latitude: res.latitude,
longitude: res.longitude,
radius: 1000,
fillColor: '#1c52fa25',
color: '#256BFA',
},
];
getJobList('refresh');
});
}
function progressChange(e) {
const range = 1 + e.value;
function progressChange(value) {
const range = 1 + value;
pageState.search.radius = range;
mapCircles.value = [
{
latitude: latitude(),
longitude: longitude(),
latitude: latitudeVal.value,
longitude: longitudeVal.value,
radius: range * 1000,
fillColor: '#00b8002e',
fillColor: '#1c52fa25',
color: '#256BFA',
},
];
debounceAjax('refresh');
@@ -222,8 +275,8 @@ function getJobList(type = 'add') {
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
longitude: longitude(),
latitude: latitude(),
longitude: longitudeVal.value,
latitude: latitudeVal.value,
...pageState.search,
};
@@ -267,118 +320,117 @@ defineExpose({ loadData, handleFilterConfirm });
</script>
<style lang="stylus" scoped>
.nearby-select{
width: 184rpx;
height: 64rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
position: absolute
right: 28rpx;
top: 28rpx
.select-view{
display: flex
align-items: center
justify-content: center
height: 100%
.view-sx{
width: 26rpx;
height: 26rpx;
}
.active{
transform: rotate(180deg)
}
}
.select-list{
border-radius: 12rpx 12rpx 12rpx 12rpx;
overflow: hidden
position: absolute
top: 76rpx
left: 0
display: flex
flex-direction: column
background: #FFFFFF;
text-align: center
.list-item{
width: 184rpx;
line-height: 68rpx;
height: 68rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
}
}
.nearby-scroll
overflow: hidden;
.nearby-map
height: 467rpx;
height: 767rpx;
background: #e8e8e8;
overflow: hidden
.nearby-list
// background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.list-head
height: 77rpx;
background-color: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
position: relative;
top: -17rpx;
z-index: 9999;
.tab-options
margin-top: -15rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 77rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
padding: 0 24rpx;
overflow: hidden;
.tab-scroll
height: 77rpx;
flex: 1;
padding-right: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
.tab-scr-d
display: flex;
justify-content: space-between;
font-weight: 400;
font-size: 21rpx;
color: #000000;
.tab-op-left
display: flex;
align-items: center;
flex-wrap: nowrap;
.tab-list
text-align: center;
white-space: nowrap;
margin-right: 30rpx;
font-size: 28rpx;
color: #606060;
.tab-op-right
display: flex;
align-items: center;
.tab-recommend
white-space: nowrap;
width: fit-content;
padding: 0 10rpx;
height: 42rpx;
background: #4778EC;
border-radius: 17rpx 17rpx 0rpx 17rpx;
text-align: center;
color: #FFFFFF;
font-size: 21rpx;
line-height: 42rpx;
margin-right: 12rpx;
.tab-number
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: center;
.tab-filter
display: flex;
.image
width: 28rpx;
height: 27rpx;
.one-cards
.nearby-list
.one-cards{
display: flex;
flex-direction: column;
padding: 0 20rpx 20rpx 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
background: #f4f4f4
height: 100%
}
.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;
.mineText
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: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-right
min-width: 120rpx
text-align: right
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: 6rpx;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.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)
</style>

452
pages/nearby/components/three.vue
View File

@@ -1,26 +1,21 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="three-head" @touchmove.stop.prevent>
<view class="one-picker">
<view class="oneleft button-click" @click="openFilterSubway">
<view class="uni-input">{{ inputText(state.subwayId) }}</view>
<view class="btm-right">
<image
class="right-sx"
:class="{ active: showFiltersubway }"
src="@/static/icon/shaixun.png"
></image>
</view>
</view>
<view class="oneright">{{ state.subwayStart.stationName }}-{{ state.subwayEnd.stationName }}</view>
</view>
<scroll-view class="scroll-head" :scroll-x="true" :show-scrollbar="false">
<view class="metro">
<view class="metro-one">
<picker
class="one-picker"
@change="bindPickerChange"
@cancel="state.downup = true"
@click="state.downup = false"
:value="state.value"
range-key="text"
:range="range"
>
<view class="one-picker">
<view class="uni-input">{{ inputText(state.subwayId) }}</view>
<uni-icons v-if="state.downup" type="down" size="16"></uni-icons>
<uni-icons v-else type="up" size="16"></uni-icons>
</view>
</picker>
</view>
<view class="metro-two">{{ state.subwayStart.stationName }}-{{ state.subwayEnd.stationName }}</view>
<view class="metro-three">
<view class="three-background">
<view class="three-items">
@@ -47,20 +42,20 @@
</scroll-view>
</view>
<view class="nearby-list">
<view class="list-head" @touchmove.stop.prevent>
<view class="tab-options">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll" @touchmove.stop>
<view class="tab-op-left">
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left">
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === 'all' }"
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === index }"
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
@@ -69,82 +64,68 @@
</view>
</view>
</scroll-view>
<view class="tab-op-right">
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
<view class="tab-recommend">
<latestHotestStatus @confirm="handelHostestSearch"></latestHotestStatus>
</view>
<view class="tab-filter" @click="emit('onFilter', 2)">
<view class="tab-number" v-show="pageState.total">{{ formatTotal(pageState.total) }}</view>
<image class="image" src="/static/icon/filter.png"></image>
<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="one-cards">
<view class="card-box" v-for="(item, index) in list" :key="item.jobId" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.education">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<uni-icons type="star" size="28"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitude()"
:blong="longitude()"
></convert-distance>
</view>
</view>
</view>
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
<loadmore ref="loadmoreRef"></loadmore>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
const openSelectPopup = inject('openSelectPopup');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { getLocation, longitude, latitude } = useLocationStore();
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { oneDictData } = useDictStore();
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
import point2 from '@/static/icon/point2.png';
import LocationPng from '@/static/icon/Location.png';
import selectFilter from '@/components/selectFilter/selectFilter.vue';
const emit = defineEmits(['onFilter']);
// status
const showFiltersubway = ref(false);
const showFilter = ref(false);
const selectFilterModel = ref();
const subwayCurrent = ref([]);
const isLoaded = ref(false);
const range = ref([]);
const userInfo = ref({});
const state = reactive({
subwayList: [],
subwayStart: {},
@@ -167,15 +148,15 @@ const pageState = reactive({
});
const list = ref([]);
const loadmoreRef = ref(null);
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
]);
onLoad(() => {
getSubway();
});
onShow(() => {
userInfo.value = useUserStore().userInfo;
});
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
}
@@ -191,6 +172,51 @@ async function loadData() {
}
}
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;
console.log(pageState.search);
getJobList('refresh');
},
cancel: () => {
showFilter.value = false;
},
});
}
function openFilterSubway() {
const diti = state.subwayList.map((item) => ({ ...item, label: item.lineName, value: item.lineId }));
openSelectPopup({
title: '地铁',
maskClick: true,
data: [diti],
success: (_, [value]) => {
subwayCurrent.value = value;
state.subwayId = value.value;
state.value = value.value;
const points = value.subwayStationList;
state.downup = true;
if (points.length) {
state.dont = 0;
state.dontObj = points[0];
state.subwayStart = points[0];
state.subwayEnd = points[points.length - 1];
getJobList('refresh');
}
},
});
}
function scrollBottom() {
getJobList();
loadmoreRef.value.change('loading');
@@ -201,7 +227,7 @@ function choosePosition(index) {
if (index === 'all') {
pageState.search.jobTitle = '';
} else {
pageState.search.jobTitle = useUserStore().userInfo.jobTitle[index];
pageState.search.jobTitle = userInfo.value.jobTitle[index];
}
getJobList('refresh');
}
@@ -312,15 +338,36 @@ defineExpose({ loadData, handleFilterConfirm });
</script>
<style lang="stylus" scoped>
.btm-right
font-weight: 400;
font-size: 32rpx;
color: #6C7282;
.right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
.tabchecked
color: #4778EC !important;
.nearby-scroll
overflow: hidden;
.three-head
margin: 24rpx;
padding: 26rpx;
background: #FFFFFF;
margin: 24rpx 0 0 0;
padding: 26rpx 0 0 0;
border-radius: 17rpx 17rpx 17rpx 17rpx;
.one-picker
height: 100%
padding: 0 28rpx
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between
.oneleft
display: flex;
flex-wrap: nowrap;
.oneright
display: flex;
flex-wrap: nowrap;
.scroll-head
width: 100%;
overflow: hidden;
@@ -330,14 +377,9 @@ defineExpose({ loadData, handleFilterConfirm });
font-size: 28rpx;
color: #000000;
line-height: 33rpx;
width: fit-content;
width: 100%;
min-width: 100rpx;
.one-picker
width: 100%
height: 100%
display: flex;
flex-wrap: nowrap;
align-items: center;
.metro-two
font-size: 21rpx;
color: #606060;
@@ -345,7 +387,8 @@ defineExpose({ loadData, handleFilterConfirm });
margin-top: 6rpx;
.metro-three
width: fit-content;
margin-top: 26rpx;
margin-top: 100rpx;
padding: 0 64rpx;
.three-background
position: relative;
.three-items
@@ -354,15 +397,17 @@ defineExpose({ loadData, handleFilterConfirm });
display: flex;
justify-content: space-between;
z-index: 2;
height: 90rpx
.three-item
margin-right: 70rpx;
margin-right: 124rpx;
position: relative
.item-dont
width: 17rpx;
height: 17rpx;
background: #FFFFFF;
border-radius: 50%;
position: relative;
margin-bottom: 10rpx;
margin-bottom: 20rpx;
.donted::after
position: absolute;
content: '';
@@ -389,27 +434,33 @@ defineExpose({ loadData, handleFilterConfirm });
line-height: 28rpx;
background: #666666;
border-radius: 50%;
.dontend::after
position: absolute;
content: '终点';
color: #FFFFFF;
font-size: 20rpx;
text-align: center;
left: 0;
top: -5rpx;
width: 27rpx;
height: 27rpx;
line-height: 28rpx;
background: #666666;
border-radius: 50%;
// .dontend::after
// position: absolute;
// content: '终';
// color: #FFFFFF;
// font-size: 20rpx;
// text-align: center;
// left: 0;
// top: -5rpx;
// width: 27rpx;
// height: 27rpx;
// line-height: 28rpx;
// background: #666666;
// border-radius: 50%;
.item-text
width: 23rpx;
font-size: 21rpx;
color: #606060;
position: absolute
left: 0
width: fit-content;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 25rpx;
text-align: center;
.three-item:last-child
margin-right: 0;
white-space: nowrap
transform: translate(-50% + 8rpx, 0)
.three-item:nth-child(2n)
.item-text
margin-top: -90rpx;
.three-background::after
position: absolute;
content: '';
@@ -420,104 +471,71 @@ defineExpose({ loadData, handleFilterConfirm });
background: #FFCB47;
border-radius: 17rpx 17rpx 17rpx 17rpx;
z-index: 1;
.nearby-list
margin-top: 40rpx;
// background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.list-head
height: 77rpx;
background-color: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
position: relative;
top: -17rpx;
z-index: 2;
.tab-options
display: flex;
align-items: center;
justify-content: space-between;
height: 77rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
padding: 0 24rpx;
overflow: hidden;
.tab-scroll
height: 77rpx;
line-height: 77rpx;
flex: 1;
overflow: hidden;
padding-right: 10rpx;
.tab-op-left
display: flex;
align-items: center;
flex-wrap: nowrap;
.tab-list
text-align: center;
white-space: nowrap;
margin-right: 30rpx;
font-size: 28rpx;
color: #606060;
.tab-op-right
display: flex;
align-items: center;
.tab-recommend
white-space: nowrap;
width: fit-content;
padding: 0 10rpx;
height: 42rpx;
background: #4778EC;
border-radius: 17rpx 17rpx 0rpx 17rpx;
text-align: center;
color: #FFFFFF;
font-size: 21rpx;
line-height: 42rpx;
margin-right: 12rpx;
.tab-number
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: center;
.tab-filter
display: flex;
.image
width: 28rpx;
height: 27rpx;
.one-cards
.nearby-list
border-top: 2rpx solid #EBEBEB;
.one-cards{
display: flex;
flex-direction: column;
padding: 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
}
.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;
.mineText
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: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-right
min-width: 120rpx
text-align: right
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: -14rpx;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.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)
</style>

378
pages/nearby/components/two.vue
View File

@@ -19,111 +19,94 @@
</view>
</view>
<view class="nearby-list">
<view class="list-head" @touchmove.stop.prevent>
<view class="tab-options">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll" @touchmove.stop>
<view class="tab-op-left">
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left">
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === 'all' }"
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="tab-list"
:class="{ tabchecked: state.tabIndex === index }"
@click="choosePosition(index)"
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="tab-op-right">
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
<view class="tab-recommend">
<latestHotestStatus @confirm="handelHostestSearch"></latestHotestStatus>
</view>
<view class="tab-filter" @click="emit('onFilter', 1)">
<view class="tab-number" v-show="pageState.total">{{ formatTotal(pageState.total) }}</view>
<image class="image" src="/static/icon/filter.png"></image>
<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="one-cards">
<view class="card-box" v-for="(item, index) in list" :key="item.jobId" @click="navToPost(item.jobId)">
<view class="box-row mar_top0">
<view class="row-left">{{ item.jobTitle }}</view>
<view class="row-right">
<Salary-Expectation
:max-salary="item.maxSalary"
:min-salary="item.minSalary"
></Salary-Expectation>
</view>
</view>
<view class="box-row">
<view class="row-left">
<view class="row-tag" v-if="item.education">
<dict-Label dictType="education" :value="item.education"></dict-Label>
</view>
<view class="row-tag" v-if="item.experience">
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
</view>
</view>
</view>
<view class="box-row mar_top0">
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
<view class="row-item">
<uni-icons type="star" size="28"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
</view>
</view>
<view class="box-row">
<view class="row-left mineText">{{ item.companyName }}</view>
<view class="row-right mineText">
青岛
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitude()"
:blong="longitude()"
></convert-distance>
</view>
</view>
</view>
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
<loadmore ref="loadmoreRef"></loadmore>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useDictStore from '@/stores/useDictStore';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { getLocation, longitude, latitude } = useLocationStore();
const { getDictSelectOption, oneDictData } = useDictStore();
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { oneDictData } = useDictStore();
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
import point2 from '@/static/icon/point2.png';
import LocationPng from '@/static/icon/Location.png';
import selectFilter from '@/components/selectFilter/selectFilter.vue';
const emit = defineEmits(['onFilter']);
const state = reactive({
tabIndex: 'all',
tabBxText: 'buxianquyu',
});
const isLoaded = ref(false);
const showFilter = ref(false);
const selectFilterModel = ref();
const fromValue = reactive({
area: 0,
});
const loadmoreRef = ref(null);
const userInfo = ref({});
const pageState = reactive({
page: 0,
total: 0,
@@ -135,12 +118,48 @@ const pageState = reactive({
});
const list = ref([]);
onShow(() => {
userInfo.value = useUserStore().userInfo;
});
const rangeOptions = ref([
{ value: 0, text: '推荐' },
{ value: 1, text: '最热' },
{ value: 2, text: '最新发布' },
]);
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
function choosePosition(index) {
state.tabIndex = index;
list.value = [];
if (index === 'all') {
pageState.search = {
...pageState.search,
jobTitle: '',
};
getJobList('refresh');
} else {
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
pageState.search.jobTitle = userInfo.value.jobTitle[index];
getJobList('refresh');
}
}
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;
console.log(pageState.search);
getJobList('refresh');
},
cancel: () => {
showFilter.value = false;
},
});
}
async function loadData() {
@@ -161,15 +180,15 @@ function scrollBottom() {
loadmoreRef.value.change('loading');
}
function choosePosition(index) {
state.tabIndex = index;
if (index === 'all') {
pageState.search.jobTitle = '';
} else {
pageState.search.jobTitle = useUserStore().userInfo.jobTitle[index];
}
getJobList('refresh');
}
// function choosePosition(index) {
// state.tabIndex = index;
// if (index === 'all') {
// pageState.search.jobTitle = '';
// } else {
// pageState.search.jobTitle = userInfo.jobTitle[index];
// }
// getJobList('refresh');
// }
function changeArea(area, item) {
fromValue.area = area;
getJobList('refresh');
@@ -235,125 +254,96 @@ defineExpose({ loadData, handleFilterConfirm });
.nearby-scroll
overflow: hidden;
.two-head
margin: 24rpx;
padding: 26rpx;
background: #FFFFFF;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 40rpx;
grid-row-gap: 30rpx;
margin: 22rpx;
display: flex;
flex-wrap: wrap
// grid-template-columns: repeat(4, 1fr);
// grid-column-gap: 10rpx;
// grid-row-gap: 24rpx;
border-radius: 17rpx 17rpx 17rpx 17rpx;
.head-item
min-width: 129rpx;
height: 44rpx;
line-height: 44rpx;
margin: 10rpx
white-space: nowrap
min-width: 156rpx
line-height: 64rpx
text-align: center;
width: fit-content;
background: #D9D9D9;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #606060;
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
background: #F6F6F6;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.active
background: #4778EC;
color: #FFFFFF;
.nearby-list
margin-top: 40rpx;
// background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
.list-head
height: 77rpx;
background-color: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
position: relative;
top: -17rpx;
z-index: 9999;
.tab-options
display: flex;
align-items: center;
justify-content: space-between;
height: 77rpx;
background: #FFFFFF;
border-radius: 17rpx 17rpx 0rpx 0rpx;
padding: 0 24rpx;
overflow: hidden;
.tab-scroll
height: 77rpx;
line-height: 77rpx;
flex: 1;
overflow: hidden;
padding-right: 10rpx;
.tab-op-left
display: flex;
align-items: center;
flex-wrap: nowrap;
.tab-list
text-align: center;
white-space: nowrap;
margin-right: 30rpx;
font-size: 28rpx;
color: #606060;
.tab-op-right
display: flex;
align-items: center;
.tab-recommend
white-space: nowrap;
width: fit-content;
padding: 0 10rpx;
height: 42rpx;
background: #4778EC;
border-radius: 17rpx 17rpx 0rpx 17rpx;
text-align: center;
color: #FFFFFF;
font-size: 21rpx;
line-height: 42rpx;
margin-right: 12rpx;
.tab-number
font-size: 21rpx;
color: #606060;
line-height: 25rpx;
text-align: center;
.tab-filter
display: flex;
.image
width: 28rpx;
height: 27rpx;
.one-cards
color: #256BFA;
background: #E9F0FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.nearby-list
border-top: 2rpx solid #EBEBEB;
.one-cards{
display: flex;
flex-direction: column;
padding: 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
background: #FFFFFF;
border-radius: 17rpx;
padding: 15rpx 36rpx;
margin-top: 24rpx;
.box-row
display: flex;
justify-content: space-between;
margin-top: 8rpx;
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
}
.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;
.mineText
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: 21rpx;
color: #606060;
.textblue
color: #4778EC;
.row-right
min-width: 120rpx
text-align: right
.row-left
display: flex;
justify-content: space-between;
.row-tag
background: #13C57C;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-size: 21rpx;
color: #FFFFFF;
line-height: 25rpx;
text-align: center;
padding: 4rpx 8rpx;
margin-right: 23rpx;
.card-box:first-child
margin-top: -14rpx;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.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)
</style>

118
pages/nearby/nearby.vue
View File

@@ -1,56 +1,36 @@
<template>
<view class="app-container">
<view class="nearby-head">
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
<AppLayout title="附近" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="app-container">
<view class="nearby-head">
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
</view>
<view class="nearby-content">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<swiper-item class="swiper-item" v-for="(_, index) in 4" :key="index">
<component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
</swiper-item>
</swiper>
</view>
</view>
<view class="nearby-content">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<!-- 动态绑定ref -->
<swiper-item class="swiper-item" v-for="(_, index) in 4" :key="index">
<component
:is="components[index]"
@onFilter="addfileter"
:ref="(el) => handelComponentsRef(el, index)"
/>
</swiper-item>
</swiper>
</view>
<!-- 弹窗 -->
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter1"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter2"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter3"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
</view>
</AppLayout>
</template>
<script setup>
import screeningJobRequirementsVue from '@/components/screening-job-requirements/screening-job-requirements.vue';
import oneComponent from './components/one.vue';
import twoComponent from './components/two.vue';
import threeComponent from './components/three.vue';
import fourComponent from './components/four.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, debounce, throttle } = inject('globalFunction');
const { $api, debounce, throttle, navBack } = inject('globalFunction');
const loadedMap = reactive([false, false, false, false]);
const swiperRefs = [ref(null), ref(null), ref(null), ref(null)];
const components = [oneComponent, twoComponent, threeComponent, fourComponent];
@@ -66,35 +46,13 @@ const state = reactive({
all: [{}],
});
// filter education aera scale 。。。。
function handleFilterConfirm(e) {
swiperRefs[filterId.value].value?.handleFilterConfirm(e);
}
function addfileter(val) {
filterId.value = val;
switch (val) {
case 0:
showFilter.value = true;
break;
case 1:
showFilter1.value = true;
break;
case 2:
showFilter2.value = true;
break;
case 3:
showFilter3.value = true;
break;
}
}
onMounted(() => {
handleTabChange(state.current);
});
const handelComponentsRef = (el, index) => {
if (el) {
console.log(el);
swiperRefs[index].value = el;
}
};
@@ -118,29 +76,43 @@ function handleTabChange(index) {
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
height: 100%;
display: flex;
flex-direction: column;
.nearby-head
height: 63rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 63rpx;
text-align: center;
display: flex;
align-items: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
.head-item
width: calc(100% / 4);
z-index: 9
.actived
// width: 169rpx;
height: 63rpx;
background: #13C57C;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
// height: 63rpx;
// background: #13C57C;
// box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
// border-radius: 0rpx 0rpx 0rpx 0rpx;
font-weight: 500;
font-size: 32rpx;
color: #000000;
.nearby-content
flex: 1;
overflow: hidden;

247
pages/search/search.vue Normal file
View File

@@ -0,0 +1,247 @@
<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"
/>
</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="longitude" :latitude="latitude"></renderJobs>
</view>
</scroll-view>
<view class="main-content" v-show="!list.length">
<view class="content-top">
<view class="top-left">历史搜索</view>
<view class="top-right button-click" @click="remove">
<uni-icons type="trash" color="#C1C1C1" size="20"></uni-icons>
</view>
</view>
<view class="content-history">
<view class="history-tag" v-for="(item, index) in historyList" :key="index" @click="searchFn(item)">
{{ item }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { getLocation, longitude, latitude } = useLocationStore();
import { storeToRefs } from 'pinia';
const searchValue = ref('');
const historyList = ref([]);
const list = ref([]);
const pageState = reactive({
page: 0,
total: 0,
maxPage: 2,
pageSize: 10,
search: {
order: 0,
},
});
onLoad(() => {
let arr = uni.getStorageSync('searchList');
if (arr) {
historyList.value = uni.getStorageSync('searchList');
}
});
function searchFn(item) {
searchValue.value = item;
searchBtn();
}
function searchBtn() {
if (!searchValue.value) {
return;
}
historyList.value.unshift(searchValue.value);
historyList.value = unique(historyList.value);
uni.setStorageSync('searchList', historyList.value);
getJobList('refresh');
}
function searchCollection(e) {
const value = e.detail.value;
pageState.search.jobTitle = value;
getJobList('refresh');
}
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
//第一个等同于第二个，splice方法删除第二个
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
function remove() {
uni.removeStorage({
key: 'searchList',
});
historyList.value = [];
}
function getJobList(type = 'add') {
console.log(type);
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
if (type === 'refresh') {
list.value = [];
pageState.page = 1;
pageState.maxPage = 2;
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
...pageState.search,
jobTitle: searchValue.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 = rows;
list.value.splice(str, end, ...reslist);
} else {
list.value = 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');
}
});
}
</script>
<style lang="stylus" scoped>
.cards-box{
padding: 0 28rpx 28rpx 28rpx
}
.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));
.main-content{
background: #FFFFFF
height: 100%
.content-top{
padding: 28rpx
display: flex
justify-content: space-between
align-items: center
.top-left{
font-weight: 600;
font-size: 36rpx;
color: #000000;
line-height: 42rpx;
}
}
.content-history{
padding: 0 28rpx;
display: flex
flex-wrap: wrap
.history-tag{
margin-right: 40rpx
margin-bottom: 20rpx
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #333333;
background: #F5F5F5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
width: fit-content;
padding: 12rpx 20rpx
}
}
}
.top {
display: flex;
align-items: center;
justify-content: space-between
background-color: #fff;
padding: 20rpx 20rpx;
position: sticky;
top: 0
.btnback{
width: 60rpx;
height: 60rpx;
}
.search-box{
flex: 1;
padding: 0 24rpx 0 6rpx;
position: relative
.inputed {
padding-left: 30rpx
width: 100%;
background: #F8F8F8;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
line-height: 36rpx;
color: #666666;
padding: 0 30rpx 0 80rpx;
box-sizing: border-box;
height: 80rpx;
background: #F5F5F5;
border-radius: 75rpx 75rpx 75rpx 75rpx;
}
.iconsearch{
position: absolute
top: 50%
left: 36rpx
transform: translate(0, -50%)
}
}
.search-btn {
padding-right: 18rpx;
text-align: center;
height: 64rpx;
line-height: 64rpx;
font-size: 32rpx;
font-weight: 500;
color: #256BFA;
}
}
}
</style>

BIN
static/.DS_Store vendored
View File

Binary file not shown.

BIN
static/font/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
static/font/DingTalk JinBuTi_min.ttf Normal file
View File

Binary file not shown.

BIN
static/icon/.DS_Store vendored
View File

Binary file not shown.

BIN
static/icon/Location1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 B

BIN
static/icon/Location12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 995 B

BIN
static/icon/aibg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/icon/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 B

BIN
static/icon/backAI2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/icon/background2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
static/icon/boy1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

BIN
static/icon/broadcast1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 722 B

After

Width:  |  Height:  |  Size: 702 B

BIN
static/icon/collect2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 843 B

BIN
static/icon/collect3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 B

BIN
static/icon/companyBG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
static/icon/companyIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/icon/companyLocation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/icon/copy1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 508 B

BIN
static/icon/date1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 B

BIN
static/icon/delete1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 B

BIN
static/icon/downs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 B

BIN
static/icon/edit1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 B

BIN
static/icon/empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/icon/feedback1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 667 B

After

Width:  |  Height:  |  Size: 656 B

BIN
static/icon/fujin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/icon/girl1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 740 B

BIN
static/icon/jinxuan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
static/icon/location3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/icon/mapLine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/icon/msgTopbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/icon/msgtyoe2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/icon/msgtype.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/icon/msgtype3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/icon/post12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 339 B

BIN
static/icon/post13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 B

BIN
static/icon/refresh1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 638 B

BIN
static/icon/server1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 B

BIN
static/icon/server2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 B

BIN
static/icon/server3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 B

Some files were not shown because too many files have changed in this diff Show More