Compare commits
22 Commits
ycode
...
6e09702db5
| Author | SHA1 | Date | |
|---|---|---|---|
| 6e09702db5 | |||
| ec477fe7c1 | |||
| fa267c9796 | |||
|
|
a03b54a406 | ||
|
|
6a3f84c4f4 | ||
|
|
9d4a7f1172 | ||
| e19230dae5 | |||
|
|
544cae7cb1 | ||
|
|
e12241b0e4 | ||
|
|
7d2faa6c1b | ||
|
|
07b2aa5f80 | ||
|
|
58c36c01a0 | ||
|
|
ea04387b58 | ||
|
|
ec2dc5f659 | ||
|
|
645c2552f6 | ||
|
|
36798d3054 | ||
|
|
857dedad01 | ||
|
|
d97a712fd1 | ||
|
|
b7b43c0b42 | ||
|
|
02c3c7366b | ||
|
|
9f47ea0e53 | ||
|
|
6c478a9d0b |
21
.gitignore
vendored
@@ -1 +1,22 @@
|
|||||||
|
# 编译/打包输出目录
|
||||||
/unpackage/
|
/unpackage/
|
||||||
|
|
||||||
|
# 依赖包目录
|
||||||
|
/node_modules/
|
||||||
|
|
||||||
|
# IDE/编辑器配置
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# macOS 系统文件
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Windows 系统文件
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# 日志文件
|
||||||
|
npm-debug.log
|
||||||
|
yarn-debug.log
|
||||||
|
|
||||||
|
# HBuilderX 运行时生成的文件
|
||||||
|
.hbuilderx
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
|
||||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
|
||||||
"version": "0.0",
|
|
||||||
"configurations": [{
|
|
||||||
"default" :
|
|
||||||
{
|
|
||||||
"launchtype" : "local"
|
|
||||||
},
|
|
||||||
"mp-weixin" :
|
|
||||||
{
|
|
||||||
"launchtype" : "local"
|
|
||||||
},
|
|
||||||
"type" : "uniCloud"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
48
App.vue
@@ -4,15 +4,14 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
|
|||||||
import useUserStore from './stores/useUserStore';
|
import useUserStore from './stores/useUserStore';
|
||||||
import useDictStore from './stores/useDictStore';
|
import useDictStore from './stores/useDictStore';
|
||||||
const { $api, navTo, appendScriptTagElement } = inject('globalFunction');
|
const { $api, navTo, appendScriptTagElement } = inject('globalFunction');
|
||||||
|
import config from '@/config.js';
|
||||||
|
|
||||||
onLaunch((options) => {
|
onLaunch((options) => {
|
||||||
|
useUserStore().initSeesionId(); //更新
|
||||||
useDictStore().getDictData();
|
useDictStore().getDictData();
|
||||||
// uni.onTabBarMidButtonTap(() => {
|
// uni.hideTabBar();
|
||||||
// uni.navigateTo({
|
|
||||||
// url: '/pages/chat/chat',
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
|
// 登录
|
||||||
let token = uni.getStorageSync('token') || ''; // 同步获取 缓存信息
|
let token = uni.getStorageSync('token') || ''; // 同步获取 缓存信息
|
||||||
if (token) {
|
if (token) {
|
||||||
useUserStore()
|
useUserStore()
|
||||||
@@ -29,15 +28,10 @@ onLaunch((options) => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// #ifndef MP-WEIXIN
|
// #ifndef MP-WEIXIN
|
||||||
if (process.env.NODE_ENV === 'development') {
|
appendScriptTagElement('https://qd.zhaopinzao8dian.com/file/csn/jweixin-1.4.0.js').then(() => {
|
||||||
appendScriptTagElement('./static/js/jweixin-1.4.0.js').then(() => {
|
console.log('✅ 微信 JSSDK 加载完成');
|
||||||
console.log('✅ 微信 JSSDK 加载完成');
|
// signatureFn();
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
appendScriptTagElement('/static/js/jweixin-1.4.0.js').then(() => {
|
|
||||||
console.log('✅ 微信 JSSDK 加载完成');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// #endif
|
// #endif
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -52,6 +46,7 @@ onHide(() => {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
|
@import '@/common/animation.css';
|
||||||
@import '@/common/common.css';
|
@import '@/common/common.css';
|
||||||
/* 修改pages tabbar样式 H5有效 */
|
/* 修改pages tabbar样式 H5有效 */
|
||||||
.uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
|
.uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon {
|
||||||
@@ -77,6 +72,29 @@ uni-modal,
|
|||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: DingTalk JinBuTi;
|
font-family: DingTalk JinBuTi;
|
||||||
src: url('@/static/font/DingTalk JinBuTi_min.ttf');
|
src: url('/static/font/DingTalk JinBuTi_min.woff2') format('woff2');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
src: url('https://qd.zhaopinzao8dian.com/file/csn/PingFangSC-Regular.woff2') format('woff2');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
src: url('https://qd.zhaopinzao8dian.com/file/csn/PingFangSC-Medium.woff2') format('woff2');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: DIN-Medium;
|
||||||
|
src: url('https://qd.zhaopinzao8dian.com/file/csn/DIN-Medium.woff2') format('woff2');
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
common/.DS_Store
vendored
193
common/animation.css
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
/*base code*/
|
||||||
|
.animated {
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
animation-duration: 1s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.infinite {
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.hinge {
|
||||||
|
-webkit-animation-duration: 2s;
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*the animation definition*/
|
||||||
|
@-webkit-keyframes tada {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
10%,
|
||||||
|
20% {
|
||||||
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tada {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
-ms-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
10%,
|
||||||
|
20% {
|
||||||
|
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||||
|
-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70%,
|
||||||
|
90% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||||
|
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
60%,
|
||||||
|
80% {
|
||||||
|
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||||
|
-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
-ms-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tada {
|
||||||
|
-webkit-animation-name: tada;
|
||||||
|
animation-name: tada
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-tada:active {
|
||||||
|
-webkit-animation-name: tada;
|
||||||
|
animation-name: tada
|
||||||
|
}
|
||||||
|
|
||||||
|
/*the animation definition*/
|
||||||
|
@-webkit-keyframes rubberBand {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
-webkit-transform: scale3d(1.25, .75, 1);
|
||||||
|
transform: scale3d(1.25, .75, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||||
|
transform: scale3d(0.75, 1.25, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale3d(1.15, .85, 1);
|
||||||
|
transform: scale3d(1.15, .85, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||||
|
transform: scale3d(.95, 1.05, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scale3d(1.05, .95, 1);
|
||||||
|
transform: scale3d(1.05, .95, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rubberBand {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
-ms-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
-webkit-transform: scale3d(1.25, .75, 1);
|
||||||
|
-ms-transform: scale3d(1.25, .75, 1);
|
||||||
|
transform: scale3d(1.25, .75, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||||
|
-ms-transform: scale3d(0.75, 1.25, 1);
|
||||||
|
transform: scale3d(0.75, 1.25, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: scale3d(1.15, .85, 1);
|
||||||
|
-ms-transform: scale3d(1.15, .85, 1);
|
||||||
|
transform: scale3d(1.15, .85, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
-webkit-transform: scale3d(.95, 1.05, 1);
|
||||||
|
-ms-transform: scale3d(.95, 1.05, 1);
|
||||||
|
transform: scale3d(.95, 1.05, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scale3d(1.05, .95, 1);
|
||||||
|
-ms-transform: scale3d(1.05, .95, 1);
|
||||||
|
transform: scale3d(1.05, .95, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale3d(1, 1, 1);
|
||||||
|
-ms-transform: scale3d(1, 1, 1);
|
||||||
|
transform: scale3d(1, 1, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rubberBand {
|
||||||
|
-webkit-animation-name: rubberBand;
|
||||||
|
animation-name: rubberBand
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-rubberBand:active {
|
||||||
|
-webkit-animation-name: tada;
|
||||||
|
animation-name: tada
|
||||||
|
}
|
||||||
@@ -56,6 +56,7 @@ html {
|
|||||||
background-color: rgba(189, 197, 254, 0.15);
|
background-color: rgba(189, 197, 254, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-incline {
|
.btn-incline {
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.2s ease;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
@@ -66,7 +67,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-feel {
|
.btn-feel {
|
||||||
transition: transform 0.2s ease;
|
transition: transform 0.15s ease;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -74,6 +75,23 @@ html {
|
|||||||
transform: perspective(600px) rotateX(6deg) scale(0.98);
|
transform: perspective(600px) rotateX(6deg) scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.press-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #3A4750;
|
||||||
|
/* 深灰蓝 */
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||||
|
/* box-shadow: 0 4px 0 #2C3E50; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.press-button:active {
|
||||||
|
transform: scale(0.95) translateY(2px);
|
||||||
|
/* box-shadow: 0 2px 0 #1C2833; */
|
||||||
|
}
|
||||||
|
|
||||||
/* 动画效果 */
|
/* 动画效果 */
|
||||||
.btn-shaky:active {
|
.btn-shaky:active {
|
||||||
|
|||||||
@@ -51,6 +51,7 @@ const prePage = () => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 页面跳转封装,支持 query 参数传递和返回回调
|
* 页面跳转封装,支持 query 参数传递和返回回调
|
||||||
* @param {string} url - 跳转路径
|
* @param {string} url - 跳转路径
|
||||||
@@ -59,17 +60,22 @@ const prePage = () => {
|
|||||||
* @param {object} options.query - 携带参数
|
* @param {object} options.query - 携带参数
|
||||||
* @param {function} options.onBack - 页面返回时的回调(目标页调用 uni.navigateBack 时传递数据)
|
* @param {function} options.onBack - 页面返回时的回调(目标页调用 uni.navigateBack 时传递数据)
|
||||||
*/
|
*/
|
||||||
|
let isJumping = false
|
||||||
export const navTo = function(url, {
|
export const navTo = function(url, {
|
||||||
needLogin = false,
|
needLogin = false,
|
||||||
query = {},
|
query = {},
|
||||||
onBack = null
|
onBack = null
|
||||||
} = {}) {
|
} = {}) {
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
if(isJumping) return
|
||||||
|
isJumping=true
|
||||||
if (needLogin && !userStore.hasLogin) {
|
if (needLogin && !userStore.hasLogin) {
|
||||||
uni.navigateTo({
|
setTimeout(() => {
|
||||||
url: '/pages/login/login'
|
uni.navigateTo({
|
||||||
});
|
url: '/pages/login/login'
|
||||||
|
});
|
||||||
|
isJumping=false
|
||||||
|
}, 170);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -84,9 +90,12 @@ export const navTo = function(url, {
|
|||||||
currentPage.__onBackCallback__ = onBack;
|
currentPage.__onBackCallback__ = onBack;
|
||||||
}
|
}
|
||||||
|
|
||||||
uni.navigateTo({
|
setTimeout(() => {
|
||||||
url: finalUrl
|
uni.navigateTo({
|
||||||
});
|
url: finalUrl
|
||||||
|
});
|
||||||
|
isJumping=false
|
||||||
|
}, 170);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const navBack = function({
|
export const navBack = function({
|
||||||
@@ -539,6 +548,11 @@ function isInWechatMiniProgramWebview() {
|
|||||||
return ua.includes('miniprogram') || window.__wxjs_environment === 'miniprogram'
|
return ua.includes('miniprogram') || window.__wxjs_environment === 'miniprogram'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isEmptyObject(obj) {
|
||||||
|
return obj && typeof obj === 'object' && !Array.isArray(obj) && Object.keys(obj).length === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export const $api = {
|
export const $api = {
|
||||||
msg,
|
msg,
|
||||||
prePage,
|
prePage,
|
||||||
@@ -579,5 +593,6 @@ export default {
|
|||||||
parseQueryParams,
|
parseQueryParams,
|
||||||
appendScriptTagElement,
|
appendScriptTagElement,
|
||||||
insertSortData,
|
insertSortData,
|
||||||
isInWechatMiniProgramWebview
|
isInWechatMiniProgramWebview,
|
||||||
|
isEmptyObject,
|
||||||
}
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
const _count=Symbol("count");const _lowestCount=Symbol("lowestCount");const _items=Symbol("items");class Queue{constructor(){this[_count]=0;this[_lowestCount]=0;this[_items]={}}enqueue(element){this[_items][this[_count]]=element;this[_count]++}dequeue(){if(this.isEmpty())return undefined;const result=this[_items][this[_lowestCount]];delete this[_items][this[_lowestCount]];this[_lowestCount]++;return result}peek(){return this.isEmpty()?undefined:this[_items][this[_lowestCount]]}isEmpty(){return this[_count]-this[_lowestCount]===0}size(){return this[_count]-this[_lowestCount]}clear(){this[_count]=0;this[_lowestCount]=0;this[_items]={}}toString(){return Object.values(this[_items]).join(",")}}Object.freeze(Queue.prototype);const _dequeItems=Symbol("dequeItems");class Deque{constructor(){this[_items]={};this[_lowestCount]=0;this[_count]=0}addFront(element){if(this.isEmpty()){this.addBack(element)}else if(this[_lowestCount]>0){this[_lowestCount]--;this[_items][this[_lowestCount]]=element}else{for(let i=this[_count];i>0;i--){this[_items][i]=this[_items][i-1]}this[_items][0]=element;this[_count]++}}addBack(element){this[_items][this[_count]]=element;this[_count]++}removeFront(){if(this.isEmpty())return undefined;const result=this[_items][this[_lowestCount]];delete this[_items][this[_lowestCount]];this[_lowestCount]++;return result}removeBack(){if(this.isEmpty())return undefined;this[_count]--;const result=this[_items][this[_count]];delete this[_items][this[_count]];return result}peekFront(){return this.isEmpty()?undefined:this[_items][this[_lowestCount]]}peekBack(){return this.isEmpty()?undefined:this[_items][this[_count]-1]}isEmpty(){return this[_count]-this[_lowestCount]===0}size(){return this[_count]-this[_lowestCount]}clear(){this[_items]={};this[_lowestCount]=0;this[_count]=0}toString(){return Object.values(this[_items]).join(",")}}Object.freeze(Deque.prototype);export{Queue,Deque};
|
|
||||||
BIN
components/.DS_Store
vendored
@@ -12,7 +12,7 @@
|
|||||||
<view class="header-btnLf">
|
<view class="header-btnLf">
|
||||||
<slot name="headerleft"></slot>
|
<slot name="headerleft"></slot>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-title">
|
<view class="header-title" :style="{ color: titleColor }">
|
||||||
<view>{{ title }}</view>
|
<view>{{ title }}</view>
|
||||||
<view v-show="subTitle" class="subtitle-text">{{ subTitle }}</view>
|
<view v-show="subTitle" class="subtitle-text">{{ subTitle }}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -45,12 +45,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import img from '@/static/icon/background2.png';
|
import img from '@/static/icon/background2.png';
|
||||||
const emit = defineEmits(['onScrollBottom']);
|
const emit = defineEmits(['onScrollBottom']);
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '标题',
|
default: '标题',
|
||||||
},
|
},
|
||||||
|
titleColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333333',
|
||||||
|
},
|
||||||
border: {
|
border: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
@@ -110,9 +113,13 @@ const handleScrollToLower = () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 7rpx 3rpx;
|
padding: 7rpx 3rpx;
|
||||||
.header-title {
|
.header-title {
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei',
|
||||||
|
sans-serif;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
.subtitle-text {
|
.subtitle-text {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
|
||||||
|
sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
|||||||
327
components/DatePicker/DatePicker.vue
Normal file
@@ -0,0 +1,327 @@
|
|||||||
|
<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"
|
||||||
|
>
|
||||||
|
<picker-view-column>
|
||||||
|
<view
|
||||||
|
v-for="(year, index) in years"
|
||||||
|
:key="index"
|
||||||
|
class="item"
|
||||||
|
:class="{ 'item-active': selectedIndex[0] === index }"
|
||||||
|
>
|
||||||
|
<text>{{ year }}</text>
|
||||||
|
<text>年</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view
|
||||||
|
v-for="(month, index) in months"
|
||||||
|
:key="index"
|
||||||
|
class="item"
|
||||||
|
:class="{ 'item-active': selectedIndex[1] === index }"
|
||||||
|
>
|
||||||
|
<text>{{ month }}</text>
|
||||||
|
<text>月</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view
|
||||||
|
v-for="(day, index) in days"
|
||||||
|
:key="index"
|
||||||
|
class="item"
|
||||||
|
:class="{ 'item-active': selectedIndex[2] === index }"
|
||||||
|
>
|
||||||
|
<text>{{ day }}</text>
|
||||||
|
<text>日</text>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'datePicker',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
maskClick: false,
|
||||||
|
title: '选择日期',
|
||||||
|
confirmCallback: null,
|
||||||
|
cancelCallback: null,
|
||||||
|
changeCallback: null,
|
||||||
|
selectedIndex: [0, 0, 0],
|
||||||
|
selectedDate: '',
|
||||||
|
|
||||||
|
// 日期数据
|
||||||
|
years: [],
|
||||||
|
months: [],
|
||||||
|
days: [],
|
||||||
|
|
||||||
|
// 配置
|
||||||
|
startYear: 0,
|
||||||
|
endYear: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initDateData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化日期数据
|
||||||
|
initDateData() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
this.startYear = currentYear - 50; // 往前50年
|
||||||
|
this.endYear = currentYear + 10; // 往后10年
|
||||||
|
|
||||||
|
// 生成年份
|
||||||
|
this.years = [];
|
||||||
|
for (let i = this.startYear; i <= this.endYear; i++) {
|
||||||
|
this.years.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成月份
|
||||||
|
this.months = [];
|
||||||
|
for (let i = 1; i <= 12; i++) {
|
||||||
|
this.months.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始天数(默认当前年月)
|
||||||
|
this.updateDays(this.years[0], this.months[0]);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据年月更新天数
|
||||||
|
updateDays(year, month) {
|
||||||
|
const daysInMonth = new Date(year, month, 0).getDate();
|
||||||
|
this.days = [];
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) {
|
||||||
|
this.days.push(i);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
open(config = {}) {
|
||||||
|
const {
|
||||||
|
title = '选择日期',
|
||||||
|
success,
|
||||||
|
cancel,
|
||||||
|
change,
|
||||||
|
maskClick = false,
|
||||||
|
defaultDate = '',
|
||||||
|
} = config;
|
||||||
|
|
||||||
|
this.reset();
|
||||||
|
this.title = title;
|
||||||
|
if (typeof success === 'function') this.confirmCallback = success;
|
||||||
|
if (typeof cancel === 'function') this.cancelCallback = cancel;
|
||||||
|
if (typeof change === 'function') this.changeCallback = change;
|
||||||
|
this.maskClick = maskClick;
|
||||||
|
|
||||||
|
// 设置默认选中
|
||||||
|
this.setDefaultDate(defaultDate);
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.popup.open();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.$refs.popup.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置默认日期
|
||||||
|
setDefaultDate(dateStr) {
|
||||||
|
if (!dateStr) {
|
||||||
|
// 没有默认日期,使用当前日期
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = now.getMonth() + 1;
|
||||||
|
const day = now.getDate();
|
||||||
|
|
||||||
|
this.selectedIndex = [
|
||||||
|
this.years.findIndex(y => y === year),
|
||||||
|
this.months.findIndex(m => m === month),
|
||||||
|
this.days.findIndex(d => d === day)
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
// 解析日期字符串 (支持 YYYY-MM-DD 格式)
|
||||||
|
const [year, month, day] = dateStr.split('-').map(Number);
|
||||||
|
this.selectedIndex = [
|
||||||
|
this.years.findIndex(y => y === year),
|
||||||
|
this.months.findIndex(m => m === month),
|
||||||
|
this.days.findIndex(d => d === day)
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保索引有效
|
||||||
|
this.selectedIndex = this.selectedIndex.map((index, i) =>
|
||||||
|
index === -1 ? 0 : index
|
||||||
|
);
|
||||||
|
|
||||||
|
this.updateSelectedDate();
|
||||||
|
},
|
||||||
|
|
||||||
|
bindChange(e) {
|
||||||
|
this.selectedIndex = e.detail.value;
|
||||||
|
|
||||||
|
// 检查是否需要更新天数
|
||||||
|
const oldDaysLength = this.days.length;
|
||||||
|
const selectedYear = this.years[this.selectedIndex[0]];
|
||||||
|
const selectedMonth = this.months[this.selectedIndex[1]];
|
||||||
|
this.updateDays(selectedYear, selectedMonth);
|
||||||
|
|
||||||
|
// 如果天数变化且当前选择的日期超过新月份的天数,调整日期索引
|
||||||
|
if (this.days.length !== oldDaysLength && this.selectedIndex[2] >= this.days.length) {
|
||||||
|
this.selectedIndex[2] = this.days.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateSelectedDate();
|
||||||
|
|
||||||
|
// 触发change回调
|
||||||
|
this.changeCallback && this.changeCallback(this.selectedDate, this.selectedIndex);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新选中的日期字符串
|
||||||
|
updateSelectedDate() {
|
||||||
|
const year = this.years[this.selectedIndex[0]];
|
||||||
|
const month = this.months[this.selectedIndex[1]].toString().padStart(2, '0');
|
||||||
|
const day = this.days[this.selectedIndex[2]].toString().padStart(2, '0');
|
||||||
|
this.selectedDate = `${year}-${month}-${day}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel() {
|
||||||
|
this.clickCallback(this.cancelCallback);
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm() {
|
||||||
|
this.clickCallback(this.confirmCallback);
|
||||||
|
},
|
||||||
|
|
||||||
|
async clickCallback(callback) {
|
||||||
|
if (typeof callback !== 'function') {
|
||||||
|
this.$refs.popup.close();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await callback(this.selectedDate, this.selectedIndex);
|
||||||
|
if (result !== false) {
|
||||||
|
this.$refs.popup.close();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('callback 执行出错:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.maskClick = false;
|
||||||
|
this.confirmCallback = null;
|
||||||
|
this.cancelCallback = null;
|
||||||
|
this.changeCallback = null;
|
||||||
|
this.selectedIndex = [0, 0, 0];
|
||||||
|
this.selectedDate = '';
|
||||||
|
this.title = '选择日期';
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置日期范围
|
||||||
|
setDateRange(startYear, endYear) {
|
||||||
|
this.startYear = startYear;
|
||||||
|
this.endYear = endYear;
|
||||||
|
|
||||||
|
// 重新生成年份
|
||||||
|
this.years = [];
|
||||||
|
for (let i = this.startYear; i <= this.endYear; i++) {
|
||||||
|
this.years.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置选中索引
|
||||||
|
this.selectedIndex[0] = 0;
|
||||||
|
this.updateDays(this.years[0], this.months[0]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
.item-active {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.uni-picker-view-indicator:after {
|
||||||
|
border-color: #e3e3e3;
|
||||||
|
}
|
||||||
|
.uni-picker-view-indicator:before {
|
||||||
|
border-color: #e3e3e3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
312
components/TikTok/TikTok.vue
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
<template>
|
||||||
|
<swiper
|
||||||
|
class="m-tiktok-video-swiper"
|
||||||
|
circular
|
||||||
|
@change="swiperChange"
|
||||||
|
:current="state.current"
|
||||||
|
:vertical="true"
|
||||||
|
duration="300"
|
||||||
|
>
|
||||||
|
<swiper-item v-for="(item, index) in state.displaySwiperList" :key="index">
|
||||||
|
<view class="swiper-item" @click="(e) => handleClick(index, e)">
|
||||||
|
<video
|
||||||
|
:id="`video__${index}`"
|
||||||
|
:controls="controls"
|
||||||
|
:autoplay="false"
|
||||||
|
:loop="loop"
|
||||||
|
@ended="ended"
|
||||||
|
@controlstoggle="controlstoggle"
|
||||||
|
@play="onPlay"
|
||||||
|
@error="emits('error')"
|
||||||
|
class="m-tiktok-video-player"
|
||||||
|
:src="item.src || item.explainUrl"
|
||||||
|
v-if="index === 0 || !state.isFirstLoad"
|
||||||
|
></video>
|
||||||
|
<view class="cover-triangle" v-if="pause"></view>
|
||||||
|
<image
|
||||||
|
v-if="item.poster && state.displayIndex != index"
|
||||||
|
:src="item.poster"
|
||||||
|
class="m-tiktok-video-poster"
|
||||||
|
mode="aspectFit"
|
||||||
|
></image>
|
||||||
|
<slot :item="item"></slot>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, getCurrentInstance, watch, nextTick } from 'vue';
|
||||||
|
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||||||
|
const _this = getCurrentInstance();
|
||||||
|
const emits = defineEmits(['play', 'error', 'loadMore', 'change', 'controlstoggle', 'click', 'ended']);
|
||||||
|
|
||||||
|
const lastTapTime = ref(0);
|
||||||
|
const pause = ref(false);
|
||||||
|
const props = defineProps({
|
||||||
|
/**
|
||||||
|
* 视频列表
|
||||||
|
*/
|
||||||
|
videoList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 是否循环播放一个视频
|
||||||
|
*/
|
||||||
|
loop: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示原生控制栏
|
||||||
|
*/
|
||||||
|
controls: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 是否自动播放
|
||||||
|
*/
|
||||||
|
autoplay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 是否自动滚动播放
|
||||||
|
*/
|
||||||
|
autoChange: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 滚动加载阈值(即播放到剩余多少个之后触发加载更多
|
||||||
|
*/
|
||||||
|
loadMoreOffsetCount: {
|
||||||
|
type: Number,
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 暂停 1 单机暂停; 2 双击暂停; 0关闭
|
||||||
|
*/
|
||||||
|
pauseType: {
|
||||||
|
type: Number,
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
originList: [], // 源数据
|
||||||
|
displaySwiperList: [], // swiper需要的数据
|
||||||
|
displayIndex: 0, // 用于显示swiper的真正的下标数值只有:0,1,2。
|
||||||
|
originIndex: 0, // 记录源数据的下标
|
||||||
|
current: 0,
|
||||||
|
oid: 0,
|
||||||
|
showControls: '',
|
||||||
|
toggleShow: true, // 显示面板
|
||||||
|
videoContexts: [],
|
||||||
|
isFirstLoad: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const initVideoContexts = () => {
|
||||||
|
state.videoContexts = [
|
||||||
|
uni.createVideoContext('video__0', _this),
|
||||||
|
uni.createVideoContext('video__1', _this),
|
||||||
|
uni.createVideoContext('video__2', _this),
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPlay = (e) => {
|
||||||
|
emits('play', e);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setVideoRef = (el, index) => {
|
||||||
|
if (el) {
|
||||||
|
videoRefs.value[index] = el;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleClick(index, e) {
|
||||||
|
const now = Date.now();
|
||||||
|
switch (props.pauseType) {
|
||||||
|
case 1:
|
||||||
|
if (pause.value) {
|
||||||
|
state.videoContexts[index].play();
|
||||||
|
pause.value = false;
|
||||||
|
} else {
|
||||||
|
state.videoContexts[index].pause();
|
||||||
|
pause.value = true;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
if (now - lastTapTime.value < 300) {
|
||||||
|
if (pause.value) {
|
||||||
|
state.videoContexts[index].play();
|
||||||
|
pause.value = false;
|
||||||
|
} else {
|
||||||
|
state.videoContexts[index].pause();
|
||||||
|
pause.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
lastTapTime.value = now;
|
||||||
|
state.toggleShow = !state.toggleShow;
|
||||||
|
emits('click', e);
|
||||||
|
}
|
||||||
|
function ended() {
|
||||||
|
// 自动切换下一个视频
|
||||||
|
if (props.autoChange) {
|
||||||
|
if (state.displayIndex < 2) {
|
||||||
|
state.current = state.displayIndex + 1;
|
||||||
|
} else {
|
||||||
|
state.current = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
emits('ended');
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 初始一个显示的swiper数据
|
||||||
|
* @originIndex 从源数据的哪个开始显示默认0,如从其他页面跳转进来,要显示第n个,这个参数就是他的下标
|
||||||
|
*/
|
||||||
|
function initSwiperData(originIndex = state.originIndex) {
|
||||||
|
const originListLength = state.originList.length; // 源数据长度
|
||||||
|
const displayList = [];
|
||||||
|
displayList[state.displayIndex] = state.originList[originIndex];
|
||||||
|
displayList[state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1] =
|
||||||
|
state.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];
|
||||||
|
displayList[state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1] =
|
||||||
|
state.originList[originIndex + 1 == originListLength ? 0 : originIndex + 1];
|
||||||
|
state.displaySwiperList = displayList;
|
||||||
|
|
||||||
|
if (state.oid >= state.originList.length) {
|
||||||
|
state.oid = 0;
|
||||||
|
}
|
||||||
|
if (state.oid < 0) {
|
||||||
|
state.oid = state.originList.length - 1;
|
||||||
|
}
|
||||||
|
// 暂停所有视频
|
||||||
|
state.videoContexts.map((item) => item?.stop());
|
||||||
|
setTimeout(() => {
|
||||||
|
// 当前视频
|
||||||
|
if (props.autoplay) {
|
||||||
|
uni.createVideoContext(`video__${state.displayIndex}`, _this).play();
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
// 数据改变
|
||||||
|
emits('change', {
|
||||||
|
index: originIndex,
|
||||||
|
detail: state.originList[originIndex],
|
||||||
|
});
|
||||||
|
// 加载更多
|
||||||
|
var pCount = state.originList.length - props.loadMoreOffsetCount;
|
||||||
|
if (originIndex == pCount) {
|
||||||
|
emits('loadMore');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* swiper滑动时候
|
||||||
|
*/
|
||||||
|
function swiperChange(event) {
|
||||||
|
const { current } = event.detail;
|
||||||
|
state.isFirstLoad = false;
|
||||||
|
const originListLength = state.originList.length; // 源数据长度
|
||||||
|
// 向后滚动
|
||||||
|
if (state.displayIndex - current == 2 || state.displayIndex - current == -1) {
|
||||||
|
state.originIndex = state.originIndex + 1 == originListLength ? 0 : state.originIndex + 1;
|
||||||
|
state.displayIndex = state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1;
|
||||||
|
state.oid = state.originIndex - 1;
|
||||||
|
initSwiperData(state.originIndex);
|
||||||
|
}
|
||||||
|
// 如果两者的差为-2或者1则是向前滑动
|
||||||
|
else if (state.displayIndex - current == -2 || state.displayIndex - current == 1) {
|
||||||
|
state.originIndex = state.originIndex - 1 == -1 ? originListLength - 1 : state.originIndex - 1;
|
||||||
|
state.displayIndex = state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1;
|
||||||
|
state.oid = state.originIndex + 1;
|
||||||
|
initSwiperData(state.originIndex);
|
||||||
|
}
|
||||||
|
state.toggleShow = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function controlstoggle(e) {
|
||||||
|
state.showControls = e.detail.show;
|
||||||
|
emits('controlstoggle', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.videoList,
|
||||||
|
() => {
|
||||||
|
if (props.videoList?.length) {
|
||||||
|
state.originList = props.videoList;
|
||||||
|
if (state.isFirstLoad || !state.videoContexts?.length) {
|
||||||
|
initSwiperData();
|
||||||
|
initVideoContexts();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
let loadTimer = null;
|
||||||
|
onLoad(() => {
|
||||||
|
// 为了首次只加载一条视频(提高首次加载性能),延迟加载后续视频
|
||||||
|
loadTimer = setTimeout(() => {
|
||||||
|
state.isFirstLoad = false;
|
||||||
|
clearTimeout(loadTimer);
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
clearTimeout(loadTimer);
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
initSwiperData,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.m-tiktok-video-swiper,
|
||||||
|
.m-tiktok-video-player {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.m-tiktok-video-swiper {
|
||||||
|
.swiper-item {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.m-tiktok-video-poster {
|
||||||
|
background-color: #000;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover-triangle{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
width: 132rpx
|
||||||
|
height: 132rpx
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0,0,0,0.3)
|
||||||
|
}
|
||||||
|
.cover-triangle::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-40%, -50%) rotate(90deg);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 40rpx solid transparent;
|
||||||
|
border-right: 40rpx solid transparent;
|
||||||
|
border-bottom: 60rpx solid #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
|
<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
|
||||||
<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
|
<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
|
||||||
<view class="content_top btn-shaky">
|
<view class="content_top">
|
||||||
|
<!-- <view class="content_top btn-shaky"> -->
|
||||||
<image v-if="pictrue" :src="pictrue" mode=""></image>
|
<image v-if="pictrue" :src="pictrue" mode=""></image>
|
||||||
<image v-else src="@/static/icon/empty.png" mode=""></image>
|
<image v-else src="@/static/icon/empty.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -24,11 +24,13 @@ const renderedHtml = computed(() => parseMarkdown(props.content));
|
|||||||
|
|
||||||
const handleItemClick = (e) => {
|
const handleItemClick = (e) => {
|
||||||
let { attrs } = e.detail.node;
|
let { attrs } = e.detail.node;
|
||||||
|
console.log(attrs);
|
||||||
let { 'data-copy-index': codeDataIndex, 'data-job-id': jobId, class: className } = attrs;
|
let { 'data-copy-index': codeDataIndex, 'data-job-id': jobId, class: className } = attrs;
|
||||||
switch (className) {
|
switch (className) {
|
||||||
case 'custom-card':
|
case 'custom-card':
|
||||||
navTo('/packageA/pages/post/post?jobId=' + jobId);
|
return navTo('/packageA/pages/post/post?jobId=' + jobId);
|
||||||
return;
|
case 'custom-more':
|
||||||
|
return navTo('/packageA/pages/moreJobs/moreJobs?jobId=' + jobId);
|
||||||
case 'copy-btn':
|
case 'copy-btn':
|
||||||
uni.setClipboardData({
|
uni.setClipboardData({
|
||||||
data: codeDataList[codeDataIndex],
|
data: codeDataList[codeDataIndex],
|
||||||
@@ -40,6 +42,7 @@ const handleItemClick = (e) => {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@@ -258,6 +261,19 @@ ol {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
|
.custom-more{
|
||||||
|
display: flex
|
||||||
|
justify-content: flex-end
|
||||||
|
color: #256BFA
|
||||||
|
padding-top: 5rpx
|
||||||
|
padding-bottom: 14rpx
|
||||||
|
.more-icon{
|
||||||
|
width: 60rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: url('@/static/svg/seemore.svg') center center no-repeat;
|
||||||
|
background-size: 100% 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
.custom-card
|
.custom-card
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||||
@@ -276,11 +292,13 @@ ol {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
.title-text
|
.title-text
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
max-width: calc(100% - 160rpx);
|
max-width: calc(100% - 160rpx);
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
font-size: 30rpx
|
font-size: 30rpx
|
||||||
.card-salary
|
.card-salary
|
||||||
|
font-family: DIN-Medium;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #FF6E1C;
|
color: #FF6E1C;
|
||||||
|
|
||||||
|
|||||||
@@ -9,8 +9,12 @@
|
|||||||
<dict-tree-Label class="mar_ri10" dictType="industry" :value="job.industry"></dict-tree-Label>
|
<dict-tree-Label class="mar_ri10" dictType="industry" :value="job.industry"></dict-tree-Label>
|
||||||
<dict-Label dictType="scale" :value="job.scale"></dict-Label>
|
<dict-Label dictType="scale" :value="job.scale"></dict-Label>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view class="ris">
|
||||||
<text class="color_256BFA fs_14">在招职位·{{ job.totalRecruitment || '-' }}个</text>
|
<text class="fs_14">
|
||||||
|
在招职位·
|
||||||
|
<text class="color_256BFA">{{ job.totalRecruitment || '-' }}</text>
|
||||||
|
个
|
||||||
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-tags">
|
<view class="card-tags">
|
||||||
@@ -76,6 +80,7 @@ function nextDetail(company) {
|
|||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
.company{
|
.company{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
@@ -97,6 +102,7 @@ function nextDetail(company) {
|
|||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
.tag{
|
.tag{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
background: #F4F4F4;
|
background: #F4F4F4;
|
||||||
@@ -121,4 +127,7 @@ function nextDetail(company) {
|
|||||||
color: #6C7282;
|
color: #6C7282;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ris{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -99,13 +99,15 @@ function nextDetail(job) {
|
|||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
.company{
|
.company{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 30rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.salary{
|
.salary{
|
||||||
|
font-family: DIN-Medium;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
color: #4C6EFB;
|
color: #4C6EFB;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
line-height: 48rpx
|
line-height: 48rpx
|
||||||
@@ -120,6 +122,7 @@ function nextDetail(job) {
|
|||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
.tag{
|
.tag{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
background: #F4F4F4;
|
background: #F4F4F4;
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
background-color="#FFFFFF"
|
background-color="#FFFFFF"
|
||||||
@maskClick="maskClickFn"
|
@maskClick="maskClickFn"
|
||||||
:mask-click="maskClick"
|
:mask-click="maskClick"
|
||||||
|
class="popup-fix"
|
||||||
>
|
>
|
||||||
<view class="popup-content">
|
<view class="popup-content">
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
@@ -148,6 +149,7 @@ const cleanup = () => {
|
|||||||
Object.keys(selectedValues).forEach((key) => {
|
Object.keys(selectedValues).forEach((key) => {
|
||||||
delete selectedValues[key];
|
delete selectedValues[key];
|
||||||
});
|
});
|
||||||
|
count.value = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
const scrollTo = (key) => {
|
const scrollTo = (key) => {
|
||||||
@@ -160,6 +162,7 @@ function getoptions() {
|
|||||||
getTransformChildren('experience', '工作经验'),
|
getTransformChildren('experience', '工作经验'),
|
||||||
getTransformChildren('scale', '公司规模'),
|
getTransformChildren('scale', '公司规模'),
|
||||||
];
|
];
|
||||||
|
console.log(arr);
|
||||||
if (area.value) {
|
if (area.value) {
|
||||||
arr.push(getTransformChildren('area', '区域'));
|
arr.push(getTransformChildren('area', '区域'));
|
||||||
}
|
}
|
||||||
@@ -183,6 +186,15 @@ defineExpose({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.popup-fix {
|
||||||
|
position: fixed !important;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
.popup-content {
|
.popup-content {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
@@ -320,7 +332,7 @@ defineExpose({
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 15rpx;
|
margin-bottom: 15rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content-item:first-child {
|
.content-item:first-child {
|
||||||
@@ -329,8 +341,8 @@ defineExpose({
|
|||||||
|
|
||||||
.check-content {
|
.check-content {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap:16rpx;
|
gap: 16rpx;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
||||||
place-items: stretch;
|
place-items: stretch;
|
||||||
|
|
||||||
.checkbox-item {
|
.checkbox-item {
|
||||||
@@ -338,9 +350,9 @@ defineExpose({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #d9d9d9;
|
background-color: #d9d9d9;
|
||||||
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 0 10rpx;
|
padding: 0 10rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background: #e8eaee;
|
background: #e8eaee;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
@@ -348,12 +360,11 @@ defineExpose({
|
|||||||
.option-label {
|
.option-label {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.checkedstyle {
|
.checkedstyle {
|
||||||
|
|
||||||
height: 76rpx;
|
height: 76rpx;
|
||||||
background: rgba(37, 107, 250, 0.06);
|
background: rgba(37, 107, 250, 0.06);
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
@@ -362,4 +373,4 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
345
components/selectFilter/selectFilter2col.vue
Normal file
@@ -0,0 +1,345 @@
|
|||||||
|
<template>
|
||||||
|
<uni-popup
|
||||||
|
ref="popup"
|
||||||
|
type="bottom"
|
||||||
|
borderRadius="10px 10px 0 0"
|
||||||
|
background-color="#FFFFFF"
|
||||||
|
@maskClick="maskClickFn"
|
||||||
|
:mask-click="maskClick"
|
||||||
|
class="popup-fix"
|
||||||
|
>
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="popup-header">
|
||||||
|
<view class="btn-cancel" @click="cancel">取消</view>
|
||||||
|
<view class="title">
|
||||||
|
<text>{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm"></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>
|
||||||
|
<view class="check-content">
|
||||||
|
<view
|
||||||
|
v-for="option in item.options"
|
||||||
|
:key="option.value"
|
||||||
|
class="checkbox-item button-click"
|
||||||
|
:class="{
|
||||||
|
checkedstyle: activeValue === option.value,
|
||||||
|
}"
|
||||||
|
@click="handleItemClick(option)"
|
||||||
|
>
|
||||||
|
<text class="option-label">{{ option.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</scroll-view>
|
||||||
|
</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);
|
||||||
|
// MODIFIED: 新增 ref,用于存储当前激活的选项值
|
||||||
|
const activeValue = ref(null);
|
||||||
|
|
||||||
|
const activeTab = ref('');
|
||||||
|
const filterOptions = ref([]);
|
||||||
|
const listData = ref([]);
|
||||||
|
|
||||||
|
// MODIFIED: open 方法增加一个 currentValue 参数
|
||||||
|
const open = (newConfig = {}) => {
|
||||||
|
const {
|
||||||
|
title: configTitle,
|
||||||
|
success,
|
||||||
|
cancel,
|
||||||
|
change,
|
||||||
|
data,
|
||||||
|
maskClick: configMaskClick = false,
|
||||||
|
currentValue, // MODIFIED: 接收父组件传入的当前值
|
||||||
|
} = 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 (Array.isArray(data)) listData.value = data;
|
||||||
|
|
||||||
|
// MODIFIED: 将父组件传入的值
|
||||||
|
activeValue.value = currentValue;
|
||||||
|
|
||||||
|
if (configMaskClick) {
|
||||||
|
maskClick.value = configMaskClick;
|
||||||
|
maskClickFn.value = cancel;
|
||||||
|
}
|
||||||
|
|
||||||
|
getoptions();
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
popup.value?.open();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
popup.value?.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancel = () => {
|
||||||
|
handleClick(cancelCallback.value, null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = async (callback, selectedItem) => {
|
||||||
|
if (typeof callback !== 'function') {
|
||||||
|
close();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await callback(selectedItem);
|
||||||
|
if (result !== false) close();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Callback execution error:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleItemClick = (option) => {
|
||||||
|
// MODIFIED: 点击时,更新本地的 activeValue
|
||||||
|
activeValue.value = option.value;
|
||||||
|
// 立即调用回调并传递所选的完整 option
|
||||||
|
handleClick(confirmCallback.value, option);
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollTo = (key) => {
|
||||||
|
activeTab.value = key;
|
||||||
|
};
|
||||||
|
|
||||||
|
function getoptions() {
|
||||||
|
filterOptions.value = transformRegionalData(listData.value);
|
||||||
|
activeTab.value = listData.value[0].key;
|
||||||
|
}
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
maskClick.value = false;
|
||||||
|
confirmCallback.value = null;
|
||||||
|
cancelCallback.value = null;
|
||||||
|
changeCallback.value = null;
|
||||||
|
// MODIFIED: 重置时也清空 activeValue
|
||||||
|
activeValue.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
function transformRegionalData(sourceData) {
|
||||||
|
const options = sourceData.map((region, index) => {
|
||||||
|
const ls = region.areaList.map((commercial) => ({
|
||||||
|
...commercial,
|
||||||
|
text: commercial.commercialAreaName,
|
||||||
|
label: commercial.commercialAreaName,
|
||||||
|
value: commercial.commercialAreaId,
|
||||||
|
key: commercial.commercialAreaId,
|
||||||
|
listClass: 'default',
|
||||||
|
status: 'default',
|
||||||
|
}));
|
||||||
|
return {
|
||||||
|
label: region.regionalName,
|
||||||
|
key: 'lx' + region.regionalId,
|
||||||
|
options: ls,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return options;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
close,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* 样式表无变化,保持原样即可 */
|
||||||
|
.popup-fix {
|
||||||
|
position: fixed !important;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.popup-content {
|
||||||
|
color: #000000;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
.popup-bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.popup-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: calc(80vh - 100rpx);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
min-width: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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: 30rpx;
|
||||||
|
.item-title {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-item:first-child {
|
||||||
|
margin-top: 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-content {
|
||||||
|
display: grid;
|
||||||
|
gap: 16rpx;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(180rpx, 1fr));
|
||||||
|
place-items: stretch;
|
||||||
|
|
||||||
|
.checkbox-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #e8eaee;
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
|
||||||
|
.option-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 这个样式现在会根据 activeValue 动态应用 */
|
||||||
|
.checkedstyle {
|
||||||
|
height: 76rpx;
|
||||||
|
background: rgba(37, 107, 250, 0.06);
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
border: 2rpx solid #256bfa;
|
||||||
|
color: #256bfa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -58,9 +58,9 @@ const state = reactive({
|
|||||||
visible: false,
|
visible: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
// onMounted(() => {
|
||||||
serchforIt();
|
// serchforIt();
|
||||||
});
|
// });
|
||||||
|
|
||||||
// 统一处理二维数组格式
|
// 统一处理二维数组格式
|
||||||
const processedListData = computed(() => {
|
const processedListData = computed(() => {
|
||||||
@@ -82,11 +82,11 @@ const open = (newConfig = {}) => {
|
|||||||
rowLabel: configRowLabel = 'label',
|
rowLabel: configRowLabel = 'label',
|
||||||
rowKey: configRowKey = 'value',
|
rowKey: configRowKey = 'value',
|
||||||
maskClick: configMaskClick = false,
|
maskClick: configMaskClick = false,
|
||||||
defaultIndex = [],
|
defaultId = '',
|
||||||
} = newConfig;
|
} = newConfig;
|
||||||
|
|
||||||
reset();
|
reset();
|
||||||
serchforIt();
|
serchforIt(defaultId);
|
||||||
|
|
||||||
if (configTitle) title.value = configTitle;
|
if (configTitle) title.value = configTitle;
|
||||||
if (typeof success === 'function') confirmCallback.value = success;
|
if (typeof success === 'function') confirmCallback.value = success;
|
||||||
@@ -143,11 +143,13 @@ const handleClick = async (callback) => {
|
|||||||
console.error('confirmCallback 执行出错:', error);
|
console.error('confirmCallback 执行出错:', error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
function serchforIt() {
|
function serchforIt(defaultId) {
|
||||||
if (state.stations.length) {
|
if (state.stations.length) {
|
||||||
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
|
const ids = defaultId
|
||||||
|
? defaultId.split(',').map((id) => Number(id))
|
||||||
|
: userInfo.value.jobTitleId.split(',').map((id) => Number(id));
|
||||||
count.value = ids.length;
|
count.value = ids.length;
|
||||||
state.jobTitleId = userInfo.value.jobTitleId;
|
state.jobTitleId = defaultId ? defaultId : userInfo.value.jobTitleId;
|
||||||
setCheckedNodes(state.stations, ids);
|
setCheckedNodes(state.stations, ids);
|
||||||
state.visible = true;
|
state.visible = true;
|
||||||
return;
|
return;
|
||||||
@@ -166,14 +168,14 @@ function serchforIt() {
|
|||||||
|
|
||||||
const reset = () => {
|
const reset = () => {
|
||||||
maskClick.value = false;
|
maskClick.value = false;
|
||||||
confirmCallback.value = null;
|
|
||||||
cancelCallback.value = null;
|
|
||||||
changeCallback.value = null;
|
changeCallback.value = null;
|
||||||
listData.value = [];
|
listData.value = [];
|
||||||
selectedIndex.value = [0, 0, 0];
|
selectedIndex.value = [0, 0, 0];
|
||||||
rowLabel.value = 'label';
|
rowLabel.value = 'label';
|
||||||
rowKey.value = 'value';
|
rowKey.value = 'value';
|
||||||
selectedItems.value = [];
|
selectedItems.value = [];
|
||||||
|
JobsIdsValue.value = '';
|
||||||
|
JobsLabelValue.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
// 暴露方法给父组件
|
// 暴露方法给父组件
|
||||||
|
|||||||
@@ -1,9 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="tabbar_container">
|
<view class="tabbar_container">
|
||||||
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
|
||||||
<view class="item-top" :class="[item.centerItem ? 'center-item-img' : '']">
|
<view
|
||||||
|
class="item-top"
|
||||||
|
:class="[
|
||||||
|
item.centerItem ? 'center-item-img ' : '',
|
||||||
|
item.centerItem && currentItem === item.id ? 'rubberBand animated' : '',
|
||||||
|
]"
|
||||||
|
>
|
||||||
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
|
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="badge" v-if="item.badge">{{ item.badge }}</view>
|
||||||
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
|
||||||
<text>{{ item.text }}</text>
|
<text>{{ item.text }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -11,90 +18,107 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import { ref, defineProps, onMounted, computed } from 'vue';
|
||||||
data() {
|
import { useReadMsg } from '@/stores/useReadMsg';
|
||||||
return {
|
const props = defineProps({
|
||||||
currentItem: 0,
|
currentpage: {
|
||||||
tabbarList: [
|
type: Number,
|
||||||
{
|
required: true,
|
||||||
id: 0,
|
default: 0,
|
||||||
text: '首页',
|
|
||||||
path: '/pages/index/index',
|
|
||||||
iconPath: '../../static/tabbar/calendar.png',
|
|
||||||
selectedIconPath: '../../static/tabbar/calendared.png',
|
|
||||||
centerItem: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
text: '招聘会',
|
|
||||||
path: '/pages/careerfair/careerfair',
|
|
||||||
iconPath: '../../static/tabbar/post.png',
|
|
||||||
selectedIconPath: '../../static/tabbar/posted.png',
|
|
||||||
centerItem: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
text: '',
|
|
||||||
path: '/pages/chat/chat',
|
|
||||||
iconPath: '../../static/tabbar/logo2copy.png',
|
|
||||||
selectedIconPath: '../../static/tabbar/logo2copy.png',
|
|
||||||
centerItem: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
text: '消息',
|
|
||||||
path: '/pages/msglog/msglog',
|
|
||||||
iconPath: '../../static/tabbar/chat4.png',
|
|
||||||
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
|
||||||
centerItem: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
text: '我的',
|
|
||||||
path: '/pages/mine/mine',
|
|
||||||
iconPath: '../../static/tabbar/mine.png',
|
|
||||||
selectedIconPath: '../../static/tabbar/mined.png',
|
|
||||||
centerItem: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
props: {
|
});
|
||||||
currentpage: {
|
const readMsg = useReadMsg();
|
||||||
type: Number,
|
const currentItem = ref(0);
|
||||||
required: true,
|
const tabbarList = computed(() => [
|
||||||
default: 0,
|
{
|
||||||
},
|
id: 0,
|
||||||
|
text: '首页',
|
||||||
|
path: '/pages/index/index',
|
||||||
|
iconPath: '../../static/tabbar/calendar.png',
|
||||||
|
selectedIconPath: '../../static/tabbar/calendared.png',
|
||||||
|
centerItem: false,
|
||||||
|
badge: readMsg.badges[0].count,
|
||||||
},
|
},
|
||||||
mounted() {
|
{
|
||||||
this.currentItem = this.currentpage;
|
id: 1,
|
||||||
uni.hideTabBar();
|
text: '招聘会',
|
||||||
|
path: '/pages/careerfair/careerfair',
|
||||||
|
iconPath: '../../static/tabbar/post.png',
|
||||||
|
selectedIconPath: '../../static/tabbar/posted.png',
|
||||||
|
centerItem: false,
|
||||||
|
badge: readMsg.badges[1].count,
|
||||||
},
|
},
|
||||||
methods: {
|
{
|
||||||
changeItem(item) {
|
id: 2,
|
||||||
uni.switchTab({
|
text: '',
|
||||||
url: item.path,
|
path: '/pages/chat/chat',
|
||||||
});
|
iconPath: '../../static/tabbar/logo3.png',
|
||||||
},
|
selectedIconPath: '../../static/tabbar/logo3.png',
|
||||||
|
centerItem: true,
|
||||||
|
badge: readMsg.badges[2].count,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: '消息',
|
||||||
|
path: '/pages/msglog/msglog',
|
||||||
|
iconPath: '../../static/tabbar/chat4.png',
|
||||||
|
selectedIconPath: '../../static/tabbar/chat4ed.png',
|
||||||
|
centerItem: false,
|
||||||
|
badge: readMsg.badges[3].count,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: '我的',
|
||||||
|
path: '/pages/mine/mine',
|
||||||
|
iconPath: '../../static/tabbar/mine.png',
|
||||||
|
selectedIconPath: '../../static/tabbar/mined.png',
|
||||||
|
centerItem: false,
|
||||||
|
badge: readMsg.badges[4].count,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
uni.hideTabBar();
|
||||||
|
currentItem.value = props.currentpage;
|
||||||
|
});
|
||||||
|
|
||||||
|
const changeItem = (item) => {
|
||||||
|
uni.switchTab({
|
||||||
|
url: item.path,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 4rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
min-width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-color: red;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
.tabbar_container {
|
.tabbar_container {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
position: fixed;
|
|
||||||
bottom: 0rpx;
|
|
||||||
left: 0rpx;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 126rpx;
|
height: 88rpx;
|
||||||
// box-shadow: 0 0 5px #999;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5rpx 0;
|
padding: 5rpx 0;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
overflow: hidden;
|
||||||
z-index: 998;
|
// position: fixed;
|
||||||
|
// bottom: 0rpx;
|
||||||
|
// left: 0rpx;
|
||||||
|
// box-shadow: 0 0 5px #999;
|
||||||
|
// padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
// z-index: 998;
|
||||||
.tabbar_item {
|
.tabbar_item {
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
@@ -120,12 +144,12 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.center-item-img {
|
.center-item-img {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0rpx;
|
// top: 0rpx;
|
||||||
left: 50%;
|
// left: 50%;
|
||||||
transform: translate(-50%, 0);
|
// transform: translate(-50%, 0);
|
||||||
width: 96rpx !important;
|
width: 108rpx !important;
|
||||||
height: 96rpx !important;
|
height: 98rpx !important;
|
||||||
}
|
}
|
||||||
.item-active {
|
.item-active {
|
||||||
color: #256bfa;
|
color: #256bfa;
|
||||||
|
|||||||
19
config.js
@@ -14,6 +14,8 @@ export default {
|
|||||||
DBversion: 2,
|
DBversion: 2,
|
||||||
// 只使用本地缓寸的数据
|
// 只使用本地缓寸的数据
|
||||||
OnlyUseCachedDB: true,
|
OnlyUseCachedDB: true,
|
||||||
|
// 使用模拟定位
|
||||||
|
UsingSimulatedPositioning: true,
|
||||||
// 应用信息
|
// 应用信息
|
||||||
appInfo: {
|
appInfo: {
|
||||||
// 应用名称
|
// 应用名称
|
||||||
@@ -39,7 +41,9 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
// AI -> 上传文件数量
|
||||||
allowedFileNumber: 2,
|
allowedFileNumber: 2,
|
||||||
|
// AI -> 上传文件类型
|
||||||
allowedFileTypes: [
|
allowedFileTypes: [
|
||||||
"text/plain", // .txt
|
"text/plain", // .txt
|
||||||
"text/markdown", // .md
|
"text/markdown", // .md
|
||||||
@@ -52,5 +56,18 @@ export default {
|
|||||||
"text/csv", // .csv
|
"text/csv", // .csv
|
||||||
"application/vnd.ms-excel", // .xls
|
"application/vnd.ms-excel", // .xls
|
||||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
|
||||||
]
|
],
|
||||||
|
// 首页询问 -> 推荐权重
|
||||||
|
weights: {
|
||||||
|
categories: 1, //岗位
|
||||||
|
experience: 0.3, //经验
|
||||||
|
salary: 0.5, // 薪资
|
||||||
|
areas: 0.5 // 区域
|
||||||
|
},
|
||||||
|
shareConfig: {
|
||||||
|
baseUrl: 'https://qd.zhaopinzao8dian.com',
|
||||||
|
title: '找工作,用 AI 更高效|青岛市智能求职平台',
|
||||||
|
desc: '融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!',
|
||||||
|
imgUrl: 'https://qd.zhaopinzao8dian.com/file/csn/qd_shareLogo.jpg',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
BIN
hook/.DS_Store
vendored
173
hook/usePagination.js
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
watch,
|
||||||
|
isRef,
|
||||||
|
nextTick
|
||||||
|
} from 'vue'
|
||||||
|
|
||||||
|
export function usePagination(
|
||||||
|
requestFn,
|
||||||
|
transformFn,
|
||||||
|
options = {}
|
||||||
|
) {
|
||||||
|
const list = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const error = ref(false)
|
||||||
|
const finished = ref(false)
|
||||||
|
const firstLoading = ref(true)
|
||||||
|
const empty = ref(false)
|
||||||
|
|
||||||
|
const {
|
||||||
|
pageSize = 10,
|
||||||
|
search = {},
|
||||||
|
autoWatchSearch = false,
|
||||||
|
debounceTime = 300,
|
||||||
|
autoFetch = false,
|
||||||
|
|
||||||
|
// 字段映射
|
||||||
|
dataKey = 'rows',
|
||||||
|
totalKey = 'total',
|
||||||
|
|
||||||
|
// 分页字段名映射
|
||||||
|
pageField = 'current',
|
||||||
|
sizeField = 'pageSize',
|
||||||
|
|
||||||
|
onBeforeRequest,
|
||||||
|
onAfterRequest
|
||||||
|
} = options
|
||||||
|
|
||||||
|
const pageState = reactive({
|
||||||
|
page: 1,
|
||||||
|
pageSize: isRef(pageSize) ? pageSize.value : pageSize,
|
||||||
|
total: 0,
|
||||||
|
maxPage: 1,
|
||||||
|
search: isRef(search) ? search.value : search
|
||||||
|
})
|
||||||
|
|
||||||
|
let debounceTimer = null
|
||||||
|
|
||||||
|
const fetchData = async (type = 'refresh') => {
|
||||||
|
if (loading.value) return Promise.resolve()
|
||||||
|
console.log(type)
|
||||||
|
loading.value = true
|
||||||
|
error.value = false
|
||||||
|
|
||||||
|
if (typeof onBeforeRequest === 'function') {
|
||||||
|
try {
|
||||||
|
onBeforeRequest(type, pageState)
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('onBeforeRequest 执行异常:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'refresh') {
|
||||||
|
pageState.page = 1
|
||||||
|
finished.value = false
|
||||||
|
if (list.value.length === 0) {
|
||||||
|
firstLoading.value = true
|
||||||
|
}
|
||||||
|
} else if (type === 'loadMore') {
|
||||||
|
if (pageState.page >= pageState.maxPage) {
|
||||||
|
loading.value = false
|
||||||
|
finished.value = true
|
||||||
|
return Promise.resolve('no more')
|
||||||
|
}
|
||||||
|
pageState.page += 1
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
...pageState.search,
|
||||||
|
[pageField]: pageState.page,
|
||||||
|
[sizeField]: pageState.pageSize,
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await requestFn(params)
|
||||||
|
|
||||||
|
const rawData = res[dataKey]
|
||||||
|
const total = res[totalKey] || 99999999
|
||||||
|
console.log(total, rawData)
|
||||||
|
const data = typeof transformFn === 'function' ? transformFn(rawData) : rawData
|
||||||
|
|
||||||
|
if (type === 'refresh') {
|
||||||
|
list.value = data
|
||||||
|
} else {
|
||||||
|
list.value.push(...data)
|
||||||
|
}
|
||||||
|
|
||||||
|
pageState.total = total
|
||||||
|
pageState.maxPage = Math.ceil(total / pageState.pageSize)
|
||||||
|
|
||||||
|
finished.value = list.value.length >= total
|
||||||
|
empty.value = list.value.length === 0
|
||||||
|
} catch (err) {
|
||||||
|
console.error('分页请求失败:', err)
|
||||||
|
error.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
firstLoading.value = false
|
||||||
|
|
||||||
|
if (typeof onAfterRequest === 'function') {
|
||||||
|
try {
|
||||||
|
onAfterRequest(type, pageState, {
|
||||||
|
error: error.value
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('onAfterRequest 执行异常:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const refresh = () => fetchData('refresh')
|
||||||
|
const loadMore = () => fetchData('loadMore')
|
||||||
|
|
||||||
|
const resetPagination = () => {
|
||||||
|
list.value = []
|
||||||
|
pageState.page = 1
|
||||||
|
pageState.total = 0
|
||||||
|
pageState.maxPage = 1
|
||||||
|
finished.value = false
|
||||||
|
error.value = false
|
||||||
|
firstLoading.value = true
|
||||||
|
empty.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (autoWatchSearch && isRef(search)) {
|
||||||
|
watch(search, (newVal) => {
|
||||||
|
pageState.search = newVal
|
||||||
|
clearTimeout(debounceTimer)
|
||||||
|
debounceTimer = setTimeout(() => {
|
||||||
|
refresh()
|
||||||
|
}, debounceTime)
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(pageSize, (newVal) => {
|
||||||
|
pageState.pageSize = newVal
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
})
|
||||||
|
|
||||||
|
if (autoFetch) {
|
||||||
|
nextTick(() => {
|
||||||
|
refresh()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
list,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
finished,
|
||||||
|
firstLoading,
|
||||||
|
empty,
|
||||||
|
pageState,
|
||||||
|
refresh,
|
||||||
|
loadMore,
|
||||||
|
resetPagination
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,387 +1,246 @@
|
|||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
onUnmounted
|
onUnmounted
|
||||||
} from 'vue';
|
} from 'vue'
|
||||||
|
import {
|
||||||
|
$api,
|
||||||
|
|
||||||
function mergeText(prevText, newText) {
|
} from '../common/globalFunction';
|
||||||
if (newText.startsWith(prevText)) {
|
|
||||||
return newText; // 直接替换,避免重复拼接
|
import config from '@/config'
|
||||||
|
|
||||||
|
export function useAudioRecorder() {
|
||||||
|
const isRecording = ref(false)
|
||||||
|
const isStopping = ref(false)
|
||||||
|
const isSocketConnected = ref(false)
|
||||||
|
const recordingDuration = ref(0)
|
||||||
|
|
||||||
|
const audioDataForDisplay = ref(new Array(16).fill(0))
|
||||||
|
const volumeLevel = ref(0)
|
||||||
|
|
||||||
|
const recognizedText = ref('')
|
||||||
|
const lastFinalText = ref('')
|
||||||
|
|
||||||
|
let audioStream = null
|
||||||
|
let audioContext = null
|
||||||
|
let audioInput = null
|
||||||
|
let scriptProcessor = null
|
||||||
|
let websocket = null
|
||||||
|
let durationTimer = null
|
||||||
|
|
||||||
|
const generateUUID = () => {
|
||||||
|
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
|
||||||
|
.replace(/[018]/g, c =>
|
||||||
|
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||||
|
).replace(/-/g, '')
|
||||||
}
|
}
|
||||||
return prevText + newText; // 兼容意外情况
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useAudioRecorder(wsUrl) {
|
const fetchWsUrl = async () => {
|
||||||
// 状态变量
|
const res = await $api.createRequest('/app/speech/getToken')
|
||||||
const isRecording = ref(false);
|
if (res.code !== 200) throw new Error('无法获取语音识别 wsUrl')
|
||||||
const isStopping = ref(false);
|
const wsUrl = res.msg
|
||||||
const isSocketConnected = ref(false);
|
return wsUrl
|
||||||
const recordingDuration = ref(0);
|
}
|
||||||
const audioDataForDisplay = ref(new Array(16).fill(0.01));
|
|
||||||
const volumeLevel = ref(0);
|
|
||||||
|
|
||||||
// 音频相关
|
function extractWsParams(wsUrl) {
|
||||||
const audioContext = ref(null);
|
const url = new URL(wsUrl)
|
||||||
const mediaStream = ref(null);
|
const appkey = url.searchParams.get('appkey')
|
||||||
const workletNode = ref(null);
|
const token = url.searchParams.get('token')
|
||||||
const analyser = ref(null);
|
return {
|
||||||
|
appkey,
|
||||||
// 网络相关
|
token
|
||||||
const socket = ref(null);
|
|
||||||
|
|
||||||
// 配置常量
|
|
||||||
const SAMPLE_RATE = 16000;
|
|
||||||
const SILENCE_THRESHOLD = 0.02; // 静音阈值 (0-1)
|
|
||||||
const SILENCE_DURATION = 100; // 静音持续时间(ms)后切片
|
|
||||||
const MIN_SOUND_DURATION = 200; // 最小有效声音持续时间(ms)
|
|
||||||
|
|
||||||
// 音频处理变量
|
|
||||||
const lastSoundTime = ref(0);
|
|
||||||
const audioChunks = ref([]);
|
|
||||||
const currentChunkStartTime = ref(0);
|
|
||||||
const silenceStartTime = ref(0);
|
|
||||||
|
|
||||||
// 语音识别结果
|
|
||||||
const recognizedText = ref('');
|
|
||||||
const lastFinalText = ref(''); // 保存最终确认的文本
|
|
||||||
|
|
||||||
// AudioWorklet处理器代码
|
|
||||||
const workletProcessorCode = `
|
|
||||||
class AudioProcessor extends AudioWorkletProcessor {
|
|
||||||
constructor(options) {
|
|
||||||
super();
|
|
||||||
this.silenceThreshold = options.processorOptions.silenceThreshold;
|
|
||||||
this.sampleRate = options.processorOptions.sampleRate;
|
|
||||||
this.samplesPerChunk = Math.floor(this.sampleRate * 0.05); // 50ms的块
|
|
||||||
this.buffer = new Int16Array(this.samplesPerChunk);
|
|
||||||
this.index = 0;
|
|
||||||
this.lastUpdate = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
calculateVolume(inputs) {
|
|
||||||
const input = inputs[0];
|
|
||||||
if (!input || input.length === 0) return 0;
|
|
||||||
|
|
||||||
let sum = 0;
|
|
||||||
const inputChannel = input[0];
|
|
||||||
for (let i = 0; i < inputChannel.length; i++) {
|
|
||||||
sum += inputChannel[i] * inputChannel[i];
|
|
||||||
}
|
|
||||||
return Math.sqrt(sum / inputChannel.length);
|
|
||||||
}
|
|
||||||
|
|
||||||
process(inputs) {
|
|
||||||
const now = currentTime;
|
|
||||||
const volume = this.calculateVolume(inputs);
|
|
||||||
|
|
||||||
// 每50ms发送一次分析数据
|
|
||||||
if (now - this.lastUpdate > 0.05) {
|
|
||||||
this.lastUpdate = now;
|
|
||||||
|
|
||||||
// 简单的频率分析 (模拟16个频段)
|
|
||||||
const simulatedFreqData = [];
|
|
||||||
for (let i = 0; i < 16; i++) {
|
|
||||||
simulatedFreqData.push(
|
|
||||||
Math.min(1, volume * 10 + (Math.random() * 0.2 - 0.1))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.port.postMessage({
|
|
||||||
type: 'analysis',
|
|
||||||
volume: volume,
|
|
||||||
frequencyData: simulatedFreqData,
|
|
||||||
isSilent: volume < this.silenceThreshold,
|
|
||||||
timestamp: now
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 原始音频处理
|
|
||||||
const input = inputs[0];
|
|
||||||
if (input && input.length > 0) {
|
|
||||||
const inputChannel = input[0];
|
|
||||||
for (let i = 0; i < inputChannel.length; i++) {
|
|
||||||
this.buffer[this.index++] = Math.max(-32768, Math.min(32767, inputChannel[i] * 32767));
|
|
||||||
|
|
||||||
if (this.index >= this.samplesPerChunk) {
|
|
||||||
this.port.postMessage({
|
|
||||||
type: 'audio',
|
|
||||||
audioData: this.buffer.buffer,
|
|
||||||
timestamp: now
|
|
||||||
}, [this.buffer.buffer]);
|
|
||||||
|
|
||||||
this.buffer = new Int16Array(this.samplesPerChunk);
|
|
||||||
this.index = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
registerProcessor('audio-processor', AudioProcessor);
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 初始化WebSocket连接
|
|
||||||
const initSocket = (wsUrl) => {
|
const connectWebSocket = async () => {
|
||||||
|
const wsUrl = await fetchWsUrl()
|
||||||
|
const {
|
||||||
|
appkey,
|
||||||
|
token
|
||||||
|
} = extractWsParams(wsUrl)
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
socket.value = new WebSocket(wsUrl);
|
websocket = new WebSocket(wsUrl)
|
||||||
|
websocket.binaryType = 'arraybuffer'
|
||||||
|
|
||||||
socket.value.onopen = () => {
|
websocket.onopen = () => {
|
||||||
console.log('open')
|
isSocketConnected.value = true
|
||||||
isSocketConnected.value = true;
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.value.onerror = (error) => {
|
// 发送 StartTranscription 消息(参考 demo.html)
|
||||||
reject(error);
|
const startTranscriptionMessage = {
|
||||||
};
|
header: {
|
||||||
|
appkey: appkey, // 不影响使用,可留空或由 wsUrl 带入
|
||||||
|
namespace: 'SpeechTranscriber',
|
||||||
|
name: 'StartTranscription',
|
||||||
|
task_id: generateUUID(),
|
||||||
|
message_id: generateUUID()
|
||||||
|
},
|
||||||
|
payload: {
|
||||||
|
format: 'pcm',
|
||||||
|
sample_rate: 16000,
|
||||||
|
enable_intermediate_result: true,
|
||||||
|
enable_punctuation_prediction: true,
|
||||||
|
enable_inverse_text_normalization: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
websocket.send(JSON.stringify(startTranscriptionMessage))
|
||||||
|
resolve()
|
||||||
|
}
|
||||||
|
|
||||||
socket.value.onclose = () => {
|
websocket.onerror = (e) => {
|
||||||
isSocketConnected.value = false;
|
isSocketConnected.value = false
|
||||||
};
|
reject(e)
|
||||||
|
}
|
||||||
|
|
||||||
socket.value.onmessage = handleMessage;
|
websocket.onclose = () => {
|
||||||
});
|
isSocketConnected.value = false
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleMessage = (values) => {
|
websocket.onmessage = (e) => {
|
||||||
try {
|
const msg = JSON.parse(e.data)
|
||||||
const data = JSON.parse(event.data);
|
const name = msg?.header?.name
|
||||||
if (data.text) {
|
const payload = msg?.payload
|
||||||
const {
|
|
||||||
asrEnd,
|
switch (name) {
|
||||||
text
|
case 'TranscriptionResultChanged': {
|
||||||
} = data
|
// 中间识别文本(可选:使用 stash_result.unfixedText 更精确)
|
||||||
if (asrEnd === 'true') {
|
const text = payload?.unfixed_result || payload?.result || ''
|
||||||
recognizedText.value += data.text;
|
lastFinalText.value = text
|
||||||
} else {
|
break
|
||||||
lastFinalText.value = '';
|
}
|
||||||
|
case 'SentenceBegin': {
|
||||||
|
// 可选:开始新的一句,重置状态
|
||||||
|
// console.log('开始新的句子识别')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 'SentenceEnd': {
|
||||||
|
const text = payload?.result || ''
|
||||||
|
const confidence = payload?.confidence || 0
|
||||||
|
if (text && confidence > 0.5) {
|
||||||
|
recognizedText.value += text
|
||||||
|
lastFinalText.value = ''
|
||||||
|
// console.log('识别完成:', {
|
||||||
|
// text,
|
||||||
|
// confidence
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 'TranscriptionStarted': {
|
||||||
|
// console.log('识别任务已开始')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 'TranscriptionCompleted': {
|
||||||
|
lastFinalText.value = ''
|
||||||
|
// console.log('识别全部完成')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
case 'TaskFailed': {
|
||||||
|
console.error('识别失败:', msg?.header?.status_text)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
console.log('未知消息类型:', name, msg)
|
||||||
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
})
|
||||||
console.error('解析识别结果失败:', error);
|
}
|
||||||
|
|
||||||
|
const startRecording = async () => {
|
||||||
|
if (isRecording.value) return
|
||||||
|
try {
|
||||||
|
recognizedText.value = ''
|
||||||
|
lastFinalText.value = ''
|
||||||
|
await connectWebSocket()
|
||||||
|
|
||||||
|
audioStream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
})
|
||||||
|
audioContext = new(window.AudioContext || window.webkitAudioContext)({
|
||||||
|
sampleRate: 16000
|
||||||
|
})
|
||||||
|
audioInput = audioContext.createMediaStreamSource(audioStream)
|
||||||
|
scriptProcessor = audioContext.createScriptProcessor(2048, 1, 1)
|
||||||
|
|
||||||
|
scriptProcessor.onaudioprocess = (event) => {
|
||||||
|
const input = event.inputBuffer.getChannelData(0)
|
||||||
|
const pcm = new Int16Array(input.length)
|
||||||
|
let sum = 0
|
||||||
|
for (let i = 0; i < input.length; ++i) {
|
||||||
|
const s = Math.max(-1, Math.min(1, input[i]))
|
||||||
|
pcm[i] = s * 0x7FFF
|
||||||
|
sum += s * s
|
||||||
|
}
|
||||||
|
|
||||||
|
volumeLevel.value = Math.sqrt(sum / input.length)
|
||||||
|
audioDataForDisplay.value = Array(16).fill(volumeLevel.value)
|
||||||
|
|
||||||
|
if (websocket?.readyState === WebSocket.OPEN) {
|
||||||
|
websocket.send(pcm.buffer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
audioInput.connect(scriptProcessor)
|
||||||
|
scriptProcessor.connect(audioContext.destination)
|
||||||
|
|
||||||
|
isRecording.value = true
|
||||||
|
recordingDuration.value = 0
|
||||||
|
durationTimer = setInterval(() => recordingDuration.value++, 1000)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('启动失败:', err)
|
||||||
|
cleanup()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理音频切片
|
const stopRecording = () => {
|
||||||
const processAudioChunk = (isSilent) => {
|
if (!isRecording.value || isStopping.value) return
|
||||||
const now = Date.now();
|
isStopping.value = true
|
||||||
|
|
||||||
if (!isSilent) {
|
if (websocket?.readyState === WebSocket.OPEN) {
|
||||||
// 检测到声音
|
websocket.send(JSON.stringify({
|
||||||
lastSoundTime.value = now;
|
header: {
|
||||||
|
namespace: 'SpeechTranscriber',
|
||||||
if (silenceStartTime.value > 0) {
|
name: 'StopTranscription',
|
||||||
// 从静音恢复到有声音
|
message_id: generateUUID()
|
||||||
silenceStartTime.value = 0;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 静音状态
|
|
||||||
if (silenceStartTime.value === 0) {
|
|
||||||
silenceStartTime.value = now;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否达到静音切片条件
|
|
||||||
if (now - silenceStartTime.value >= SILENCE_DURATION &&
|
|
||||||
now - currentChunkStartTime.value >= MIN_SOUND_DURATION) {
|
|
||||||
sendCurrentChunk();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 发送当前音频块
|
|
||||||
const sendCurrentChunk = () => {
|
|
||||||
if (audioChunks.value.length === 0 || !socket.value || socket.value.readyState !== WebSocket.OPEN) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
// 合并所有块
|
|
||||||
const totalBytes = audioChunks.value.reduce((total, chunk) => total + chunk.byteLength, 0);
|
|
||||||
const combined = new Int16Array(totalBytes / 2);
|
|
||||||
let offset = 0;
|
|
||||||
|
|
||||||
audioChunks.value.forEach(chunk => {
|
|
||||||
const samples = new Int16Array(chunk);
|
|
||||||
combined.set(samples, offset);
|
|
||||||
offset += samples.length;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 发送合并后的数据
|
|
||||||
socket.value.send(combined.buffer);
|
|
||||||
audioChunks.value = [];
|
|
||||||
|
|
||||||
// 记录新块的开始时间
|
|
||||||
currentChunkStartTime.value = Date.now();
|
|
||||||
silenceStartTime.value = 0;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('发送音频数据时出错:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始录音
|
|
||||||
const startRecording = async () => {
|
|
||||||
if (isRecording.value) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 重置状态
|
|
||||||
recognizedText.value = '';
|
|
||||||
lastFinalText.value = '';
|
|
||||||
// 重置状态
|
|
||||||
recordingDuration.value = 0;
|
|
||||||
audioChunks.value = [];
|
|
||||||
lastSoundTime.value = 0;
|
|
||||||
currentChunkStartTime.value = Date.now();
|
|
||||||
silenceStartTime.value = 0;
|
|
||||||
|
|
||||||
// 初始化WebSocket
|
|
||||||
await initSocket(wsUrl);
|
|
||||||
|
|
||||||
// 获取音频流
|
|
||||||
mediaStream.value = await navigator.mediaDevices.getUserMedia({
|
|
||||||
audio: {
|
|
||||||
sampleRate: SAMPLE_RATE,
|
|
||||||
channelCount: 1,
|
|
||||||
echoCancellation: true,
|
|
||||||
noiseSuppression: true,
|
|
||||||
autoGainControl: false
|
|
||||||
},
|
|
||||||
video: false
|
|
||||||
});
|
|
||||||
|
|
||||||
// 创建音频上下文
|
|
||||||
audioContext.value = new(window.AudioContext || window.webkitAudioContext)({
|
|
||||||
sampleRate: SAMPLE_RATE
|
|
||||||
});
|
|
||||||
|
|
||||||
// 注册AudioWorklet
|
|
||||||
const blob = new Blob([workletProcessorCode], {
|
|
||||||
type: 'application/javascript'
|
|
||||||
});
|
|
||||||
const workletUrl = URL.createObjectURL(blob);
|
|
||||||
await audioContext.value.audioWorklet.addModule(workletUrl);
|
|
||||||
URL.revokeObjectURL(workletUrl);
|
|
||||||
|
|
||||||
// 创建AudioWorkletNode
|
|
||||||
workletNode.value = new AudioWorkletNode(audioContext.value, 'audio-processor', {
|
|
||||||
processorOptions: {
|
|
||||||
silenceThreshold: SILENCE_THRESHOLD,
|
|
||||||
sampleRate: SAMPLE_RATE
|
|
||||||
}
|
}
|
||||||
});
|
}))
|
||||||
|
websocket.close()
|
||||||
// 处理音频数据
|
|
||||||
workletNode.value.port.onmessage = (e) => {
|
|
||||||
if (e.data.type === 'audio') {
|
|
||||||
audioChunks.value.push(e.data.audioData);
|
|
||||||
} else if (e.data.type === 'analysis') {
|
|
||||||
audioDataForDisplay.value = e.data.frequencyData;
|
|
||||||
volumeLevel.value = e.data.volume;
|
|
||||||
processAudioChunk(e.data.isSilent);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 连接音频节点
|
|
||||||
const source = audioContext.value.createMediaStreamSource(mediaStream.value);
|
|
||||||
source.connect(workletNode.value);
|
|
||||||
workletNode.value.connect(audioContext.value.destination);
|
|
||||||
|
|
||||||
isRecording.value = true;
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('启动录音失败:', error);
|
|
||||||
cleanup();
|
|
||||||
throw error;
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// 停止录音
|
cleanup()
|
||||||
const stopRecording = async () => {
|
isStopping.value = false
|
||||||
if (!isRecording.value || isStopping.value) return;
|
}
|
||||||
|
|
||||||
isStopping.value = true;
|
const cancelRecording = () => {
|
||||||
|
if (!isRecording.value || isStopping.value) return
|
||||||
|
isStopping.value = true
|
||||||
|
websocket?.close()
|
||||||
|
cleanup()
|
||||||
|
isStopping.value = false
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
|
||||||
// 发送最后一个音频块(无论是否静音)
|
|
||||||
sendCurrentChunk();
|
|
||||||
|
|
||||||
// 发送结束标记
|
|
||||||
if (socket.value?.readyState === WebSocket.OPEN) {
|
|
||||||
socket.value.send(JSON.stringify({
|
|
||||||
action: 'end',
|
|
||||||
duration: recordingDuration.value
|
|
||||||
}));
|
|
||||||
|
|
||||||
await new Promise(resolve => {
|
|
||||||
if (socket.value.bufferedAmount === 0) {
|
|
||||||
resolve();
|
|
||||||
} else {
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
if (socket.value.bufferedAmount === 0) {
|
|
||||||
clearInterval(timer);
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
}, 50);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
socket.value.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanup();
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('停止录音时出错:', error);
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
isStopping.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 清理资源
|
|
||||||
const cleanup = () => {
|
const cleanup = () => {
|
||||||
if (mediaStream.value) {
|
clearInterval(durationTimer)
|
||||||
mediaStream.value.getTracks().forEach(track => track.stop());
|
|
||||||
mediaStream.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (workletNode.value) {
|
scriptProcessor?.disconnect()
|
||||||
workletNode.value.disconnect();
|
audioInput?.disconnect()
|
||||||
workletNode.value = null;
|
audioStream?.getTracks().forEach(track => track.stop())
|
||||||
}
|
audioContext?.close()
|
||||||
|
|
||||||
if (audioContext.value && audioContext.value.state !== 'closed') {
|
audioStream = null
|
||||||
audioContext.value.close();
|
audioContext = null
|
||||||
audioContext.value = null;
|
audioInput = null
|
||||||
}
|
scriptProcessor = null
|
||||||
|
websocket = null
|
||||||
|
|
||||||
audioChunks.value = [];
|
isRecording.value = false
|
||||||
isRecording.value = false;
|
isSocketConnected.value = false
|
||||||
isSocketConnected.value = false;
|
}
|
||||||
};
|
|
||||||
|
|
||||||
/// 取消录音
|
|
||||||
const cancelRecording = async () => {
|
|
||||||
if (!isRecording.value || isStopping.value) return;
|
|
||||||
isStopping.value = true;
|
|
||||||
try {
|
|
||||||
if (socket.value?.readyState === WebSocket.OPEN) {
|
|
||||||
console.log('发送结束标记...');
|
|
||||||
socket.value.send(JSON.stringify({
|
|
||||||
action: 'cancel'
|
|
||||||
}));
|
|
||||||
socket.value.close();
|
|
||||||
}
|
|
||||||
cleanup()
|
|
||||||
} catch (error) {
|
|
||||||
console.error('取消录音时出错:', error);
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
isStopping.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
if (isRecording.value) {
|
if (isRecording.value) stopRecording()
|
||||||
stopRecording();
|
})
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isRecording,
|
isRecording,
|
||||||
@@ -390,10 +249,10 @@ export function useAudioRecorder(wsUrl) {
|
|||||||
recordingDuration,
|
recordingDuration,
|
||||||
audioDataForDisplay,
|
audioDataForDisplay,
|
||||||
volumeLevel,
|
volumeLevel,
|
||||||
startRecording,
|
|
||||||
stopRecording,
|
|
||||||
recognizedText,
|
recognizedText,
|
||||||
lastFinalText,
|
lastFinalText,
|
||||||
|
startRecording,
|
||||||
|
stopRecording,
|
||||||
cancelRecording
|
cancelRecording
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
import {
|
|
||||||
ref,
|
|
||||||
onBeforeUnmount,
|
|
||||||
onMounted
|
|
||||||
} from 'vue'
|
|
||||||
import {
|
|
||||||
onHide,
|
|
||||||
onUnload
|
|
||||||
} from '@dcloudio/uni-app'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export function useSpeechReader() {
|
|
||||||
const isSpeaking = ref(false)
|
|
||||||
const isPaused = ref(false)
|
|
||||||
let utterance = null
|
|
||||||
|
|
||||||
const cleanMarkdown = (text) => {
|
|
||||||
return formatTextForSpeech(text)
|
|
||||||
}
|
|
||||||
|
|
||||||
const speak = (text, options = {
|
|
||||||
lang: 'zh-CN',
|
|
||||||
rate: 0.9,
|
|
||||||
pitch: 1.2
|
|
||||||
}) => {
|
|
||||||
cancelAudio() // 重置之前的
|
|
||||||
// const voices = speechSynthesis.getVoices()
|
|
||||||
// const chineseVoices = voices.filter(v => v.lang.includes('zh'))
|
|
||||||
const speechText = extractSpeechText(text);
|
|
||||||
utterance = new SpeechSynthesisUtterance(speechText)
|
|
||||||
// utterance.lang = options.lang || 'zh'
|
|
||||||
utterance.rate = options.rate || 1
|
|
||||||
utterance.pitch = options.pitch || 1.1 // 音调(0 - 2,偏高比较柔和)
|
|
||||||
|
|
||||||
utterance.onend = () => {
|
|
||||||
isSpeaking.value = false
|
|
||||||
isPaused.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
speechSynthesis.speak(utterance)
|
|
||||||
isSpeaking.value = true
|
|
||||||
isPaused.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const pause = () => {
|
|
||||||
if (isSpeaking.value && !isPaused.value) {
|
|
||||||
speechSynthesis.pause()
|
|
||||||
isPaused.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const resume = () => {
|
|
||||||
if (isSpeaking.value && isPaused.value) {
|
|
||||||
speechSynthesis.resume()
|
|
||||||
isPaused.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const cancelAudio = () => {
|
|
||||||
speechSynthesis.cancel()
|
|
||||||
isSpeaking.value = false
|
|
||||||
isPaused.value = false
|
|
||||||
}
|
|
||||||
// 页面刷新/关闭时
|
|
||||||
onMounted(() => {
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.addEventListener('beforeunload', cancelAudio)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
cancelAudio()
|
|
||||||
if (typeof window !== 'undefined') {
|
|
||||||
window.removeEventListener('beforeunload', cancelAudio)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onHide(cancelAudio)
|
|
||||||
onUnload(cancelAudio)
|
|
||||||
|
|
||||||
return {
|
|
||||||
speak,
|
|
||||||
pause,
|
|
||||||
resume,
|
|
||||||
cancelAudio,
|
|
||||||
isSpeaking,
|
|
||||||
isPaused,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractSpeechText(markdown) {
|
|
||||||
const jobRegex = /``` job-json\s*({[\s\S]*?})\s*```/g;
|
|
||||||
const jobs = [];
|
|
||||||
let match;
|
|
||||||
let lastJobEndIndex = 0;
|
|
||||||
let firstJobStartIndex = -1;
|
|
||||||
|
|
||||||
// 提取岗位 json 数据及前后位置
|
|
||||||
while ((match = jobRegex.exec(markdown)) !== null) {
|
|
||||||
const jobStr = match[1];
|
|
||||||
try {
|
|
||||||
const job = JSON.parse(jobStr);
|
|
||||||
jobs.push(job);
|
|
||||||
if (firstJobStartIndex === -1) {
|
|
||||||
firstJobStartIndex = match.index;
|
|
||||||
}
|
|
||||||
lastJobEndIndex = jobRegex.lastIndex;
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('JSON 解析失败', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 提取引导语(第一个 job-json 之前的文字)
|
|
||||||
const guideText = firstJobStartIndex > 0 ?
|
|
||||||
markdown.slice(0, firstJobStartIndex).trim() :
|
|
||||||
'';
|
|
||||||
|
|
||||||
// 提取结束语(最后一个 job-json 之后的文字)
|
|
||||||
const endingText = lastJobEndIndex < markdown.length ?
|
|
||||||
markdown.slice(lastJobEndIndex).trim() :
|
|
||||||
'';
|
|
||||||
|
|
||||||
// 岗位信息格式化为语音文本
|
|
||||||
const jobTexts = jobs.map((job, index) => {
|
|
||||||
return `第 ${index + 1} 个岗位,岗位名称是:${job.jobTitle},公司是:${job.companyName},薪资:${job.salary},地点:${job.location},学历要求:${job.education},经验要求:${job.experience}。`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 拼接总语音内容
|
|
||||||
const finalTextParts = [];
|
|
||||||
if (guideText) finalTextParts.push(guideText);
|
|
||||||
finalTextParts.push(...jobTexts);
|
|
||||||
if (endingText) finalTextParts.push(endingText);
|
|
||||||
|
|
||||||
return finalTextParts.join('\n');
|
|
||||||
}
|
|
||||||
157
hook/useSystemPlayer.js
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onUnmounted,
|
||||||
|
readonly
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
const defaultExtractSpeechText = (text) => text;
|
||||||
|
|
||||||
|
|
||||||
|
export function useTTSPlayer() {
|
||||||
|
const synth = window.speechSynthesis;
|
||||||
|
const isSpeaking = ref(false);
|
||||||
|
const isPaused = ref(false);
|
||||||
|
const utteranceRef = ref(null);
|
||||||
|
|
||||||
|
const cleanup = () => {
|
||||||
|
isSpeaking.value = false;
|
||||||
|
isPaused.value = false;
|
||||||
|
utteranceRef.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} text - The text to be spoken.
|
||||||
|
* @param {object} [options] - Optional settings for the speech.
|
||||||
|
* @param {string} [options.lang] - Language (e.g., 'en-US', 'es-ES').
|
||||||
|
* @param {number} [options.rate] - Speed (0.1 to 10, default 1).
|
||||||
|
* @param {number} [options.pitch] - Pitch (0 to 2, default 1).
|
||||||
|
* @param {SpeechSynthesisVoice} [options.voice] - A specific voice object.
|
||||||
|
* @param {function(string): string} [options.extractSpeechText] - A function to filter/clean the text before speaking.
|
||||||
|
*/
|
||||||
|
const speak = (text, options = {}) => {
|
||||||
|
if (!synth) {
|
||||||
|
console.error('SpeechSynthesis API is not supported in this browser.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSpeaking.value) {
|
||||||
|
synth.cancel();
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredText = extractSpeechText(text);
|
||||||
|
|
||||||
|
if (!filteredText || typeof filteredText !== 'string' || filteredText.trim() === '') {
|
||||||
|
console.warn('Text to speak is empty after filtering.');
|
||||||
|
cleanup(); // Ensure state is clean
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newUtterance = new SpeechSynthesisUtterance(filteredText); // Use filtered text
|
||||||
|
utteranceRef.value = newUtterance;
|
||||||
|
|
||||||
|
newUtterance.rate = options.rate || 1;
|
||||||
|
newUtterance.pitch = options.pitch || 1;
|
||||||
|
if (options.voice) {
|
||||||
|
newUtterance.voice = options.voice;
|
||||||
|
}
|
||||||
|
|
||||||
|
newUtterance.onstart = () => {
|
||||||
|
isSpeaking.value = true;
|
||||||
|
isPaused.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
newUtterance.onpause = () => {
|
||||||
|
isPaused.value = true;
|
||||||
|
};
|
||||||
|
newUtterance.onresume = () => {
|
||||||
|
isPaused.value = false;
|
||||||
|
};
|
||||||
|
newUtterance.onend = () => {
|
||||||
|
cleanup();
|
||||||
|
};
|
||||||
|
newUtterance.onerror = (event) => {
|
||||||
|
console.error('SpeechSynthesis Error:', event.error);
|
||||||
|
cleanup();
|
||||||
|
};
|
||||||
|
|
||||||
|
synth.speak(newUtterance);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pause = () => {
|
||||||
|
if (synth && isSpeaking.value && !isPaused.value) {
|
||||||
|
synth.pause();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const resume = () => {
|
||||||
|
if (synth && isPaused.value) {
|
||||||
|
synth.resume();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelAudio = () => {
|
||||||
|
if (synth) {
|
||||||
|
synth.cancel();
|
||||||
|
}
|
||||||
|
cleanup();
|
||||||
|
};
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
cancelAudio();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
speak,
|
||||||
|
pause,
|
||||||
|
resume,
|
||||||
|
cancelAudio,
|
||||||
|
isSpeaking: readonly(isSpeaking),
|
||||||
|
isPaused: readonly(isPaused),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractSpeechText(markdown) {
|
||||||
|
const jobRegex = /``` job-json\s*({[\s\S]*?})\s*```/g;
|
||||||
|
const jobs = [];
|
||||||
|
let match;
|
||||||
|
let lastJobEndIndex = 0;
|
||||||
|
let firstJobStartIndex = -1;
|
||||||
|
|
||||||
|
// 提取岗位 json 数据及前后位置
|
||||||
|
while ((match = jobRegex.exec(markdown)) !== null) {
|
||||||
|
const jobStr = match[1];
|
||||||
|
try {
|
||||||
|
const job = JSON.parse(jobStr);
|
||||||
|
jobs.push(job);
|
||||||
|
if (firstJobStartIndex === -1) {
|
||||||
|
firstJobStartIndex = match.index;
|
||||||
|
}
|
||||||
|
lastJobEndIndex = jobRegex.lastIndex;
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('JSON 解析失败', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取引导语(第一个 job-json 之前的文字)
|
||||||
|
const guideText = firstJobStartIndex > 0 ?
|
||||||
|
markdown.slice(0, firstJobStartIndex).trim() :
|
||||||
|
'';
|
||||||
|
|
||||||
|
// 提取结束语(最后一个 job-json 之后的文字)
|
||||||
|
const endingText = lastJobEndIndex < markdown.length ?
|
||||||
|
markdown.slice(lastJobEndIndex).trim() :
|
||||||
|
'';
|
||||||
|
|
||||||
|
// 岗位信息格式化为语音文本
|
||||||
|
const jobTexts = jobs.map((job, index) => {
|
||||||
|
return `第 ${index + 1} 个岗位,岗位名称是:${job.jobTitle},公司是:${job.companyName},薪资:${job.salary},地点:${job.location},学历要求:${job.education},经验要求:${job.experience}。`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 拼接总语音内容
|
||||||
|
const finalTextParts = [];
|
||||||
|
if (guideText) finalTextParts.push(guideText);
|
||||||
|
finalTextParts.push(...jobTexts);
|
||||||
|
if (endingText) finalTextParts.push(endingText);
|
||||||
|
|
||||||
|
return finalTextParts.join('\n');
|
||||||
|
}
|
||||||
203
hook/useSystemSpeechReader.js
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
import {
|
||||||
|
ref,
|
||||||
|
readonly,
|
||||||
|
onUnmounted
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
// 检查 API 兼容性
|
||||||
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||||
|
const isApiSupported = !!SpeechRecognition && !!navigator.mediaDevices && !!window.AudioContext;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {object} [options]
|
||||||
|
* @param {string} [options.lang] - Language code (e.g., 'zh-CN', 'en-US')
|
||||||
|
* @returns {object}
|
||||||
|
*/
|
||||||
|
export function useAudioRecorder(options = {}) {
|
||||||
|
const lang = options.lang || 'zh-CN'; // 默认使用中文
|
||||||
|
|
||||||
|
const isRecording = ref(false);
|
||||||
|
const recognizedText = ref(''); // 完整的识别文本(包含临时的)
|
||||||
|
const lastFinalText = ref(''); // 最后一段已确定的文本
|
||||||
|
const volumeLevel = ref(0); // 音量 (0-100)
|
||||||
|
const audioDataForDisplay = ref(new Uint8Array()); // 波形数据
|
||||||
|
|
||||||
|
let recognition = null;
|
||||||
|
let audioContext = null;
|
||||||
|
let analyser = null;
|
||||||
|
let mediaStreamSource = null;
|
||||||
|
let mediaStream = null;
|
||||||
|
let dataArray = null; // 用于音量和波形
|
||||||
|
let animationFrameId = null;
|
||||||
|
|
||||||
|
if (!isApiSupported) {
|
||||||
|
console.warn(
|
||||||
|
'此浏览器不支持Web语音API或Web音频API。钩子无法正常工作。'
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
isRecording: readonly(isRecording),
|
||||||
|
startRecording: () => console.error('Audio recording not supported.'),
|
||||||
|
stopRecording: () => {},
|
||||||
|
cancelRecording: () => {},
|
||||||
|
audioDataForDisplay: readonly(audioDataForDisplay),
|
||||||
|
volumeLevel: readonly(volumeLevel),
|
||||||
|
recognizedText: readonly(recognizedText),
|
||||||
|
lastFinalText: readonly(lastFinalText),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const setupRecognition = () => {
|
||||||
|
recognition = new SpeechRecognition();
|
||||||
|
recognition.lang = lang;
|
||||||
|
recognition.continuous = true; // 持续识别
|
||||||
|
recognition.interimResults = true; // 返回临时结果
|
||||||
|
|
||||||
|
recognition.onstart = () => {
|
||||||
|
isRecording.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
recognition.onend = () => {
|
||||||
|
isRecording.value = false;
|
||||||
|
stopAudioAnalysis(); // 语音识别停止时,也停止音频分析
|
||||||
|
};
|
||||||
|
|
||||||
|
recognition.onerror = (event) => {
|
||||||
|
console.error('SpeechRecognition Error:', event.error);
|
||||||
|
isRecording.value = false;
|
||||||
|
stopAudioAnalysis();
|
||||||
|
};
|
||||||
|
|
||||||
|
recognition.onresult = (event) => {
|
||||||
|
let interim = '';
|
||||||
|
let final = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < event.results.length; i++) {
|
||||||
|
const transcript = event.results[i][0].transcript;
|
||||||
|
if (event.results[i].isFinal) {
|
||||||
|
final += transcript;
|
||||||
|
lastFinalText.value = transcript; // 存储最后一段确定的文本
|
||||||
|
} else {
|
||||||
|
interim += transcript;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
recognizedText.value = final + interim; // 组合为完整文本
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const startAudioAnalysis = async () => {
|
||||||
|
try {
|
||||||
|
mediaStream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true
|
||||||
|
});
|
||||||
|
audioContext = new AudioContext();
|
||||||
|
analyser = audioContext.createAnalyser();
|
||||||
|
mediaStreamSource = audioContext.createMediaStreamSource(mediaStream);
|
||||||
|
|
||||||
|
// 设置 Analyser
|
||||||
|
analyser.fftSize = 512; // 必须是 2 的幂
|
||||||
|
const bufferLength = analyser.frequencyBinCount;
|
||||||
|
dataArray = new Uint8Array(bufferLength); // 用于波形
|
||||||
|
|
||||||
|
// 连接节点
|
||||||
|
mediaStreamSource.connect(analyser);
|
||||||
|
|
||||||
|
// 开始循环分析
|
||||||
|
updateAudioData();
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to get media stream or setup AudioContext:', err);
|
||||||
|
if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
|
||||||
|
alert('麦克风权限被拒绝。请在浏览器设置中允许访问麦克风。');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateAudioData = () => {
|
||||||
|
if (!isRecording.value) return; // 如果停止了就退出循环
|
||||||
|
|
||||||
|
// 获取时域数据 (波形)
|
||||||
|
analyser.getByteTimeDomainData(dataArray);
|
||||||
|
audioDataForDisplay.value = new Uint8Array(dataArray); // 复制数组以触发响应式
|
||||||
|
|
||||||
|
// 计算音量 (RMS)
|
||||||
|
let sumSquares = 0.0;
|
||||||
|
for (const amplitude of dataArray) {
|
||||||
|
const normalized = (amplitude / 128.0) - 1.0; // 转换为 -1.0 到 1.0
|
||||||
|
sumSquares += normalized * normalized;
|
||||||
|
}
|
||||||
|
const rms = Math.sqrt(sumSquares / dataArray.length);
|
||||||
|
volumeLevel.value = Math.min(100, Math.floor(rms * 250)); // 放大 RMS 值到 0-100 范围
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(updateAudioData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopAudioAnalysis = () => {
|
||||||
|
if (animationFrameId) {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
animationFrameId = null;
|
||||||
|
}
|
||||||
|
// 停止麦克风轨道
|
||||||
|
mediaStream?.getTracks().forEach((track) => track.stop());
|
||||||
|
// 关闭 AudioContext
|
||||||
|
audioContext?.close().catch((e) => console.error('Error closing AudioContext', e));
|
||||||
|
|
||||||
|
mediaStream = null;
|
||||||
|
audioContext = null;
|
||||||
|
analyser = null;
|
||||||
|
mediaStreamSource = null;
|
||||||
|
volumeLevel.value = 0;
|
||||||
|
audioDataForDisplay.value = new Uint8Array();
|
||||||
|
};
|
||||||
|
|
||||||
|
const startRecording = async () => {
|
||||||
|
if (isRecording.value) return;
|
||||||
|
|
||||||
|
// 重置状态
|
||||||
|
recognizedText.value = '';
|
||||||
|
lastFinalText.value = '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 必须先启动音频分析以获取麦克风权限
|
||||||
|
await startAudioAnalysis();
|
||||||
|
|
||||||
|
// 如果音频启动成功 (mediaStream 存在),则启动语音识别
|
||||||
|
if (mediaStream) {
|
||||||
|
setupRecognition();
|
||||||
|
recognition.start();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error starting recording:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopRecording = () => {
|
||||||
|
if (!isRecording.value || !recognition) return;
|
||||||
|
recognition.stop(); // 这将触发 onend 事件,自动停止音频分析
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelRecording = () => {
|
||||||
|
if (!recognition) return;
|
||||||
|
isRecording.value = false; // 立即设置状态
|
||||||
|
recognition.abort(); // 这也会触发 onend
|
||||||
|
recognizedText.value = '';
|
||||||
|
lastFinalText.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (recognition) {
|
||||||
|
recognition.abort();
|
||||||
|
}
|
||||||
|
stopAudioAnalysis();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
isRecording: readonly(isRecording),
|
||||||
|
startRecording,
|
||||||
|
stopRecording,
|
||||||
|
cancelRecording,
|
||||||
|
audioDataForDisplay: readonly(audioDataForDisplay),
|
||||||
|
volumeLevel: readonly(volumeLevel),
|
||||||
|
recognizedText: readonly(recognizedText),
|
||||||
|
lastFinalText: readonly(lastFinalText),
|
||||||
|
isApiSupported, // 导出支持状态
|
||||||
|
};
|
||||||
|
}
|
||||||
10
index.html
@@ -18,14 +18,16 @@
|
|||||||
</script>
|
</script>
|
||||||
<title></title>
|
<title></title>
|
||||||
<!-- vconsole -->
|
<!-- vconsole -->
|
||||||
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
|
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var vConsole = new window.VConsole();
|
var vConsole = new window.VConsole();
|
||||||
vConsole.destroy();
|
vConsole.destroy();
|
||||||
</script> -->
|
</script> -->
|
||||||
|
<!-- 爱山东jssdk -->
|
||||||
|
<script type="text/javascript" src="https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<!-- <body> -->
|
||||||
<div id="app"><!--app-html--></div>
|
<div id="app"><!--app-html--></div>
|
||||||
<script type="module" src="/main.js"></script>
|
<script type="module" src="/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/.DS_Store
vendored
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="" :use-scroll-view="false">
|
<AppLayout title="" :use-scroll-view="false">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -143,12 +143,16 @@ function expand() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
|
<AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -152,12 +152,16 @@ function getPreviousDay(dateStr) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -88,6 +88,7 @@ function seeDetail(item) {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
}
|
}
|
||||||
.card-text{
|
.card-text{
|
||||||
margin-top: 16rpx
|
margin-top: 16rpx
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
|
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -101,12 +101,16 @@ function getDataList(type = 'add') {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="" :use-scroll-view="false">
|
<AppLayout title="" :use-scroll-view="false">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -219,12 +219,16 @@ function getHoursBetween(startTimeStr, endTimeStr) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -251,6 +255,7 @@ image {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
}
|
}
|
||||||
.row2{
|
.row2{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@@ -145,10 +145,17 @@ function changeArea() {
|
|||||||
function changeJobs() {
|
function changeJobs() {
|
||||||
selectJobsModel.value?.open({
|
selectJobsModel.value?.open({
|
||||||
title: '添加岗位',
|
title: '添加岗位',
|
||||||
|
defaultId: fromValue.jobTitleId,
|
||||||
success: (ids, labels) => {
|
success: (ids, labels) => {
|
||||||
|
console.log(ids, labels);
|
||||||
fromValue.jobTitleId = ids;
|
fromValue.jobTitleId = ids;
|
||||||
state.jobsText = labels.split(',');
|
state.jobsText = labels.split(',');
|
||||||
},
|
},
|
||||||
|
cancel: (ids, labels) => {
|
||||||
|
console.log(ids, labels);
|
||||||
|
// fromValue.jobTitleId = ids;
|
||||||
|
// state.jobsText = labels.split(',');
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -199,6 +206,9 @@ function getFormCompletionPercent(form) {
|
|||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
border-bottom: 2rpx solid #EBEBEB
|
border-bottom: 2rpx solid #EBEBEB
|
||||||
position: relative;
|
position: relative;
|
||||||
|
.triangle {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
.triangle::before
|
.triangle::before
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
@@ -262,10 +272,9 @@ function getFormCompletionPercent(form) {
|
|||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
.nx-item
|
.nx-item
|
||||||
padding: 20rpx 28rpx
|
margin: 12rpx 12rpx 0 0;
|
||||||
width: fit-content
|
padding: 12rpx 25rpx;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
border: 2rpx solid #E8EAEE;
|
border: 2rpx solid #E8EAEE;
|
||||||
margin-right: 24rpx
|
|
||||||
margin-top: 24rpx
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
73
packageA/pages/moreJobs/moreJobs.vue
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<view class="collection-content">
|
||||||
|
<renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
||||||
|
<loadmore ref="loadmoreRef"></loadmore>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||||
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||||
|
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||||||
|
import useUserStore from '@/stores/useUserStore';
|
||||||
|
const { $api, navTo, navBack, vacanciesTo } = inject('globalFunction');
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import useLocationStore from '@/stores/useLocationStore';
|
||||||
|
import { usePagination } from '@/hook/usePagination';
|
||||||
|
import { jobMoreMap } from '@/utils/markdownParser';
|
||||||
|
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||||
|
const loadmoreRef = ref(null);
|
||||||
|
|
||||||
|
// 响应式搜索条件(可以被修改)
|
||||||
|
const searchParams = ref({});
|
||||||
|
const pageSize = ref(10);
|
||||||
|
const { list, loading, refresh, loadMore } = usePagination(
|
||||||
|
(params) => $api.createRequest('/app/job/list', params, 'GET', true),
|
||||||
|
null, // 转换函数
|
||||||
|
{
|
||||||
|
pageSize: pageSize,
|
||||||
|
search: searchParams,
|
||||||
|
autoWatchSearch: true,
|
||||||
|
onBeforeRequest: () => {
|
||||||
|
loadmoreRef.value?.change('loading');
|
||||||
|
},
|
||||||
|
onAfterRequest: () => {
|
||||||
|
loadmoreRef.value?.change('more');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
let params = jobMoreMap.get(options.jobId);
|
||||||
|
if (params) {
|
||||||
|
uni.setStorageSync('jobMoreMap', params);
|
||||||
|
} else {
|
||||||
|
params = uni.getStorageSync('jobMoreMap');
|
||||||
|
}
|
||||||
|
const objs = removeNullProperties(params);
|
||||||
|
searchParams.value = objs;
|
||||||
|
refresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
function removeNullProperties(obj) {
|
||||||
|
for (const key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key) && obj[key] === null) {
|
||||||
|
delete obj[key]; // 删除值为 null 的属性
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
onReachBottom(() => {
|
||||||
|
loadMore();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.collection-content{
|
||||||
|
padding: 1rpx 28rpx 20rpx 28rpx;
|
||||||
|
background: #F4F4F4;
|
||||||
|
height: 100%
|
||||||
|
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,98 +1,161 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<AppLayout title="我的简历" title-color="#FFFFFF" back-gorund-color="#F4F4F4">
|
||||||
|
<template #headerleft>
|
||||||
|
<view class="btn">
|
||||||
|
<image src="@/static/icon/back-white.png" @click="navBack"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
<view class="mys-container">
|
<view class="mys-container">
|
||||||
<!-- 个人信息 -->
|
<!-- 个人信息 -->
|
||||||
|
<view class="card-top" style="margin-top: 12rpx; padding: 0; background: none">
|
||||||
<view class="mys-tops btn-feel">
|
<view class="mys-tops btn-feel">
|
||||||
<view class="tops-left">
|
<view class="tops-left">
|
||||||
<view class="name">
|
<view class="name">
|
||||||
<text>{{ userInfo.name || '编辑用户名' }}</text>
|
<text>{{ userInfo.name || "编辑用户名" }}</text>
|
||||||
<view class="edit-icon mar_le10">
|
<view class="edit-icon mar_le10">
|
||||||
<image
|
<image class="button-click" src="@/static/icon/edit1.png" @click="navTo('/packageA/pages/personalInfo/personalInfo')"></image>
|
||||||
class="button-click"
|
</view>
|
||||||
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="tops-right">
|
<view class="subName">
|
||||||
<view class="right-imghead">
|
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
|
||||||
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
|
<text class="mar_ri10">{{ userInfo.age }}岁</text>
|
||||||
<image v-else src="@/static/icon/girl.png"></image>
|
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
|
||||||
</view>
|
<dict-Label class="mar_ri10" dictType="affiliation" :value="userInfo.politicalAffiliation"></dict-Label>
|
||||||
<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="subName">{{ userInfo.phone }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="tops-right">
|
||||||
|
<view class="right-imghead">
|
||||||
|
<image v-if="userInfo.avatar" :src="userInfo.avatar"></image>
|
||||||
|
<image v-else-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>
|
||||||
<!-- 求职期望 -->
|
<!-- 求职期望 -->
|
||||||
<view class="mys-line"></view>
|
<view class="mys-line">
|
||||||
<view class="mys-info">
|
<view class="line"></view>
|
||||||
<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>
|
|
||||||
<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>
|
||||||
|
<view class="mys-info btn-feel">
|
||||||
|
<view class="mys-h4">
|
||||||
|
<view>求职期望</view>
|
||||||
|
<image class="icon" src="@/static/icon/edit1.png" @click="navTo('/packageA/pages/jobExpect/jobExpect')"></image>
|
||||||
|
</view>
|
||||||
|
<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>
|
||||||
|
<view class="card-top" style="margin-top: 24rpx">
|
||||||
|
<view class="mys-info" style="padding: 0">
|
||||||
|
<view class="mys-h4 btn-feel">
|
||||||
|
<text>工作经历</text>
|
||||||
|
<view class="mys-edit-icon btn-feel" @click="navTo('/packageA/pages/workExp/workExp')">
|
||||||
|
<image class="icon button-click btn-feel" src="@/static/icon/plus.png"></image>
|
||||||
|
<view class="txt">添加</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="exp-item btn-feel" v-for="item in userInfo.workExp" :key="item.id">
|
||||||
|
<view class="fl_box fl_justbet mar_top15">
|
||||||
|
<view class="fs_16">{{ item.company }}</view>
|
||||||
|
<image class="icon btn-feel" src="@/static/icon/edit1.png" @click="navTo(`/packageA/pages/workExp/workExp?id=${item.id}`)"></image>
|
||||||
|
</view>
|
||||||
|
<view class="mys-text fl_box fl_justbet">
|
||||||
|
<text class="color_333333 fs_14">{{ item.position }}</text>
|
||||||
|
<text class="datetext">{{ item.startTime }}--{{ item.endTime || "至今" }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="mys-text">
|
||||||
|
<text>{{ item.duty }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<template #footer>
|
||||||
|
<view class="footer-container">
|
||||||
|
<view class="footer-button btn-feel">上传简历</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</AppLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
|
||||||
const { $api, navTo } = inject('globalFunction');
|
const { $api, navTo, navBack } = inject("globalFunction");
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from "pinia";
|
||||||
import useUserStore from '@/stores/useUserStore';
|
import useUserStore from "@/stores/useUserStore";
|
||||||
import useDictStore from '@/stores/useDictStore';
|
import useDictStore from "@/stores/useDictStore";
|
||||||
const { userInfo } = storeToRefs(useUserStore());
|
const { userInfo } = storeToRefs(useUserStore());
|
||||||
const { getUserResume } = useUserStore();
|
const { getUserResume } = useUserStore();
|
||||||
const { getDictData, oneDictData } = useDictStore();
|
const { getDictData, oneDictData } = useDictStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-container{
|
||||||
|
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
|
||||||
|
.footer-button{
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #1677FF;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
image{
|
image{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
.mys-container{
|
.mys-container{
|
||||||
|
padding-bottom:20rpx;
|
||||||
|
.card-top{
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin: 0 28rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 24rpx
|
||||||
|
}
|
||||||
.mys-tops{
|
.mys-tops{
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
padding: 52rpx 48rpx
|
padding: 38rpx 44rpx
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) , rgba(255, 255, 255, 1));
|
||||||
|
border-radius: 8rpx 8rpx 0 0 ;
|
||||||
.tops-left{
|
.tops-left{
|
||||||
.name{
|
.name{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 44rpx;
|
font-size: 36rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
@@ -107,8 +170,8 @@ image{
|
|||||||
.subName{
|
.subName{
|
||||||
margin-top: 12rpx
|
margin-top: 12rpx
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32rpx;
|
font-size: 26rpx;
|
||||||
color: #333333;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -131,32 +194,55 @@ image{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mys-line{
|
.mys-line{
|
||||||
margin: 0 28rpx
|
background: #ffffff;
|
||||||
height: 0rpx;
|
padding: 0 24rpx
|
||||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
.line{
|
||||||
border: 2rpx dashed #000000;
|
border: 2rpx dashed #eeeeee;
|
||||||
opacity: 0.16;
|
}
|
||||||
}
|
}
|
||||||
.mys-info{
|
.mys-info{
|
||||||
padding: 28rpx
|
padding: 28rpx
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0 0 8rpx 8rpx ;
|
||||||
.mys-h4{
|
.mys-h4{
|
||||||
font-weight: 600;
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-size: 32rpx;
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 8rpx
|
margin-bottom: 8rpx
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
align-items: center
|
align-items: center
|
||||||
.mys-edit-icon{
|
.icon{
|
||||||
display: inline-block
|
|
||||||
width: 40rpx;
|
width: 40rpx;
|
||||||
height: 40rpx
|
height: 40rpx
|
||||||
|
}
|
||||||
|
.mys-edit-icon{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.txt{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #444;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx
|
||||||
|
margin-right: 5rpx;
|
||||||
|
margin-top: 2rpx
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.datetext{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
.mys-text{
|
.mys-text{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
color: #333333;
|
color: #999999;
|
||||||
margin-top: 16rpx
|
margin-top: 16rpx
|
||||||
}
|
}
|
||||||
.mys-list{
|
.mys-list{
|
||||||
@@ -164,17 +250,27 @@ image{
|
|||||||
align-items: center
|
align-items: center
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
.cards{
|
.cards{
|
||||||
margin: 28rpx 28rpx 0 0
|
margin: 12rpx 12rpx 0 0
|
||||||
height: 80rpx;
|
padding: 12rpx 25rpx;
|
||||||
padding: 0 38rpx;
|
|
||||||
width: fit-content
|
width: fit-content
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius:10rpx;
|
||||||
border: 2rpx solid #E8EAEE;
|
border: 2rpx solid #E8EAEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.exp-item{
|
||||||
|
padding-bottom: 28rpx;
|
||||||
|
border-bottom: 2rpx dashed #EEEEEE;
|
||||||
|
.icon{
|
||||||
|
width 40rpx;
|
||||||
|
height 40rpx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exp-item:nth-last-child(1){
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,257 +1,267 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout
|
<AppLayout title="个人信息" :sub-title="`完成度${percent}`" border back-gorund-color="#ffffff" :show-bg-image="false">
|
||||||
title="个人信息"
|
<template #headerleft>
|
||||||
:sub-title="`完成度${percent}`"
|
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
|
||||||
border
|
</template>
|
||||||
back-gorund-color="#ffffff"
|
<template #headerright>
|
||||||
:show-bg-image="false"
|
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
|
||||||
>
|
</template>
|
||||||
<template #headerleft>
|
<view class="content">
|
||||||
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
|
<view class="content-avatar">
|
||||||
</template>
|
<view class="avatar-title">编辑头像</view>
|
||||||
<template #headerright>
|
<view @click="selectAvatar">
|
||||||
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
|
<image class="avatar" v-if="fromValue.avatar" :src="fromValue.avatar" />
|
||||||
</template>
|
<image class="avatar" v-else-if="fromValue.sex == '0'" src="@/static/icon/boy.png" />
|
||||||
<view class="content">
|
<image class="avatar" v-else="fromValue.sex == '1'" src="@/static/icon/girl.png" />
|
||||||
<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>
|
</view>
|
||||||
</AppLayout>
|
</view>
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
import { reactive, inject, watch, ref, onMounted } from "vue";
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
const { $api, navTo, navBack, checkingPhoneRegExp } = inject('globalFunction');
|
const { $api, navTo, navBack, checkingPhoneRegExp } = inject("globalFunction");
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from "pinia";
|
||||||
import useUserStore from '@/stores/useUserStore';
|
import useUserStore from "@/stores/useUserStore";
|
||||||
import useDictStore from '@/stores/useDictStore';
|
import useDictStore from "@/stores/useDictStore";
|
||||||
const { userInfo } = storeToRefs(useUserStore());
|
const { userInfo } = storeToRefs(useUserStore());
|
||||||
const { getUserResume } = useUserStore();
|
const { getUserResume } = useUserStore();
|
||||||
const { dictLabel, oneDictData } = useDictStore();
|
const { dictLabel, oneDictData } = useDictStore();
|
||||||
const openSelectPopup = inject('openSelectPopup');
|
const openSelectPopup = inject("openSelectPopup");
|
||||||
|
|
||||||
const percent = ref('0%');
|
const percent = ref("0%");
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
educationText: '',
|
educationText: "",
|
||||||
politicalAffiliationText: '',
|
politicalAffiliationText: "",
|
||||||
});
|
});
|
||||||
const fromValue = reactive({
|
const fromValue = reactive({
|
||||||
name: '',
|
name: "",
|
||||||
sex: 0,
|
sex: 0,
|
||||||
birthDate: '',
|
birthDate: "",
|
||||||
education: '',
|
education: "",
|
||||||
politicalAffiliation: '',
|
politicalAffiliation: "",
|
||||||
|
avatar: "",
|
||||||
});
|
});
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
initLoad();
|
initLoad();
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// const { age, birthDate } = useUserStore().userInfo;
|
// const { age, birthDate } = useUserStore().userInfo;
|
||||||
// const newAge = calculateAge(birthDate);
|
// const newAge = calculateAge(birthDate);
|
||||||
// // 计算年龄是否对等
|
// // 计算年龄是否对等
|
||||||
// if (age != newAge) {
|
// if (age != newAge) {
|
||||||
// completeResume();
|
// completeResume();
|
||||||
// }
|
// }
|
||||||
// }, 1000);
|
// }, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
function initLoad() {
|
function initLoad() {
|
||||||
fromValue.name = userInfo.value.name;
|
fromValue.name = userInfo.value.name;
|
||||||
fromValue.sex = Number(userInfo.value.sex);
|
fromValue.sex = Number(userInfo.value.sex);
|
||||||
fromValue.phone = userInfo.value.phone;
|
fromValue.phone = userInfo.value.phone;
|
||||||
fromValue.birthDate = userInfo.value.birthDate;
|
fromValue.birthDate = userInfo.value.birthDate;
|
||||||
fromValue.education = userInfo.value.education;
|
fromValue.education = userInfo.value.education;
|
||||||
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
|
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
|
||||||
// 回显
|
fromValue.avatar = userInfo.value.avatar;
|
||||||
state.educationText = dictLabel('education', userInfo.value.education);
|
// 回显
|
||||||
state.politicalAffiliationText = dictLabel('affiliation', userInfo.value.politicalAffiliation);
|
state.educationText = dictLabel("education", userInfo.value.education);
|
||||||
const result = getFormCompletionPercent(fromValue);
|
state.politicalAffiliationText = dictLabel("affiliation", userInfo.value.politicalAffiliation);
|
||||||
percent.value = result;
|
const result = getFormCompletionPercent(fromValue);
|
||||||
|
percent.value = result;
|
||||||
}
|
}
|
||||||
const confirm = () => {
|
const confirm = () => {
|
||||||
if (!fromValue.name) {
|
if (!fromValue.name) {
|
||||||
return $api.msg('请输入姓名');
|
return $api.msg("请输入姓名");
|
||||||
}
|
}
|
||||||
if (!fromValue.birthDate) {
|
if (!fromValue.birthDate) {
|
||||||
return $api.msg('请选择出生年月');
|
return $api.msg("请选择出生年月");
|
||||||
}
|
}
|
||||||
if (!fromValue.education) {
|
if (!fromValue.education) {
|
||||||
return $api.msg('请选择学历');
|
return $api.msg("请选择学历");
|
||||||
}
|
}
|
||||||
if (!fromValue.politicalAffiliation) {
|
if (!fromValue.politicalAffiliation) {
|
||||||
return $api.msg('请选择政治面貌');
|
return $api.msg("请选择政治面貌");
|
||||||
}
|
}
|
||||||
if (!checkingPhoneRegExp(fromValue.phone)) {
|
// if (!checkingPhoneRegExp(fromValue.phone)) {
|
||||||
return $api.msg('请输入正确手机号');
|
// return $api.msg('请输入正确手机号');
|
||||||
}
|
// }
|
||||||
const params = {
|
const params = {
|
||||||
...fromValue,
|
...fromValue,
|
||||||
age: calculateAge(fromValue.birthDate),
|
age: calculateAge(fromValue.birthDate),
|
||||||
};
|
};
|
||||||
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
|
$api.createRequest("/app/user/resume", params, "post").then((resData) => {
|
||||||
$api.msg('完成');
|
$api.msg("完成");
|
||||||
state.disbleDate = true;
|
state.disbleDate = true;
|
||||||
getUserResume().then(() => {
|
getUserResume().then(() => {
|
||||||
navBack();
|
navBack();
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeDateBirt = () => {
|
const changeDateBirt = () => {
|
||||||
const datearray = generateDatePickerArrays();
|
const datearray = generateDatePickerArrays();
|
||||||
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
|
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
|
||||||
openSelectPopup({
|
openSelectPopup({
|
||||||
title: '年龄段',
|
title: "年龄段",
|
||||||
maskClick: true,
|
maskClick: true,
|
||||||
data: datearray,
|
data: datearray,
|
||||||
defaultIndex,
|
defaultIndex,
|
||||||
success: (_, value) => {
|
success: (_, value) => {
|
||||||
const [year, month, day] = value;
|
const [year, month, day] = value;
|
||||||
const dateStr = `${year.value}-${month.value}-${day.value}`;
|
const dateStr = `${year.value}-${month.value}-${day.value}`;
|
||||||
if (isValidDate(dateStr)) {
|
if (isValidDate(dateStr)) {
|
||||||
fromValue.birthDate = dateStr;
|
fromValue.birthDate = dateStr;
|
||||||
} else {
|
} else {
|
||||||
$api.msg('没有这一天');
|
$api.msg("没有这一天");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const changeEducation = () => {
|
const changeEducation = () => {
|
||||||
openSelectPopup({
|
openSelectPopup({
|
||||||
title: '学历',
|
title: "学历",
|
||||||
maskClick: true,
|
maskClick: true,
|
||||||
data: [oneDictData('education')],
|
data: [oneDictData("education")],
|
||||||
success: (_, [value]) => {
|
success: (_, [value]) => {
|
||||||
fromValue.education = value.value;
|
fromValue.education = value.value;
|
||||||
state.educationText = value.label;
|
state.educationText = value.label;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const changeSex = (sex) => {
|
const changeSex = (sex) => {
|
||||||
fromValue.sex = sex;
|
fromValue.sex = sex;
|
||||||
};
|
};
|
||||||
|
|
||||||
const changePoliticalAffiliation = () => {
|
const changePoliticalAffiliation = () => {
|
||||||
openSelectPopup({
|
openSelectPopup({
|
||||||
title: '政治面貌',
|
title: "政治面貌",
|
||||||
maskClick: true,
|
maskClick: true,
|
||||||
data: [oneDictData('affiliation')],
|
data: [oneDictData("affiliation")],
|
||||||
success: (_, [value]) => {
|
success: (_, [value]) => {
|
||||||
fromValue.politicalAffiliation = value.value;
|
fromValue.politicalAffiliation = value.value;
|
||||||
state.politicalAffiliationText = value.label;
|
state.politicalAffiliationText = value.label;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) {
|
function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) {
|
||||||
const years = [];
|
const years = [];
|
||||||
const months = [];
|
const months = [];
|
||||||
const days = [];
|
const days = [];
|
||||||
|
|
||||||
for (let y = startYear; y <= endYear; y++) {
|
for (let y = startYear; y <= endYear; y++) {
|
||||||
years.push(y.toString());
|
years.push(y.toString());
|
||||||
}
|
}
|
||||||
for (let m = 1; m <= 12; m++) {
|
for (let m = 1; m <= 12; m++) {
|
||||||
months.push(m.toString().padStart(2, '0'));
|
months.push(m.toString().padStart(2, "0"));
|
||||||
}
|
}
|
||||||
for (let d = 1; d <= 31; d++) {
|
for (let d = 1; d <= 31; d++) {
|
||||||
days.push(d.toString().padStart(2, '0'));
|
days.push(d.toString().padStart(2, "0"));
|
||||||
}
|
}
|
||||||
|
|
||||||
return [years, months, days];
|
return [years, months, days];
|
||||||
}
|
}
|
||||||
|
|
||||||
function isValidDate(dateString) {
|
function isValidDate(dateString) {
|
||||||
const [year, month, day] = dateString.split('-').map(Number);
|
const [year, month, day] = dateString.split("-").map(Number);
|
||||||
|
|
||||||
const date = new Date(year, month - 1, day); // 月份从0开始
|
const date = new Date(year, month - 1, day); // 月份从0开始
|
||||||
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
|
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
|
||||||
}
|
}
|
||||||
|
|
||||||
const calculateAge = (birthDate) => {
|
const calculateAge = (birthDate) => {
|
||||||
const birth = new Date(birthDate);
|
const birth = new Date(birthDate);
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
let age = today.getFullYear() - birth.getFullYear();
|
let age = today.getFullYear() - birth.getFullYear();
|
||||||
const monthDiff = today.getMonth() - birth.getMonth();
|
const monthDiff = today.getMonth() - birth.getMonth();
|
||||||
const dayDiff = today.getDate() - birth.getDate();
|
const dayDiff = today.getDate() - birth.getDate();
|
||||||
|
|
||||||
// 如果生日的月份还没到,或者刚到生日月份但当天还没过,则年龄减 1
|
// 如果生日的月份还没到,或者刚到生日月份但当天还没过,则年龄减 1
|
||||||
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
|
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
|
||||||
age--;
|
age--;
|
||||||
}
|
}
|
||||||
|
|
||||||
return age;
|
return age;
|
||||||
};
|
};
|
||||||
|
|
||||||
function getFormCompletionPercent(form) {
|
function getFormCompletionPercent(form) {
|
||||||
let total = Object.keys(form).length;
|
let total = Object.keys(form).length;
|
||||||
let filled = 0;
|
let filled = 0;
|
||||||
|
|
||||||
for (const key in form) {
|
for (const key in form) {
|
||||||
const value = form[key];
|
const value = form[key];
|
||||||
if (value !== '' && value !== null && value !== undefined) {
|
if (value !== "" && value !== null && value !== undefined) {
|
||||||
if (typeof value === 'number') {
|
if (typeof value === "number") {
|
||||||
filled += 1;
|
filled += 1;
|
||||||
} else if (typeof value === 'string' && value.trim() !== '') {
|
} else if (typeof value === "string" && value.trim() !== "") {
|
||||||
filled += 1;
|
filled += 1;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (total === 0) return '0%';
|
if (total === 0) return "0%";
|
||||||
const percent = (filled / total) * 100;
|
const percent = (filled / total) * 100;
|
||||||
return percent.toFixed(0) + '%'; // 取整,不要小数点
|
return percent.toFixed(0) + "%"; // 取整,不要小数点
|
||||||
}
|
}
|
||||||
// 主函数
|
// 主函数
|
||||||
function getDatePickerIndexes(dateStr) {
|
function getDatePickerIndexes(dateStr) {
|
||||||
const [year, month, day] = dateStr.split('-');
|
const [year, month, day] = dateStr.split("-");
|
||||||
|
|
||||||
const [years, months, days] = generateDatePickerArrays();
|
const [years, months, days] = generateDatePickerArrays();
|
||||||
|
|
||||||
const yearIndex = years.indexOf(year);
|
const yearIndex = years.indexOf(year);
|
||||||
const monthIndex = months.indexOf(month);
|
const monthIndex = months.indexOf(month);
|
||||||
const dayIndex = days.indexOf(day);
|
const dayIndex = days.indexOf(day);
|
||||||
|
|
||||||
return [yearIndex, monthIndex, dayIndex];
|
return [yearIndex, monthIndex, dayIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAvatar() {
|
||||||
|
uni.chooseImage({
|
||||||
|
sizeType: ["original", "compressed"],
|
||||||
|
sourceType: ["album", "camera"],
|
||||||
|
count: 1,
|
||||||
|
success: ({ tempFilePaths, tempFiles }) => {
|
||||||
|
$api
|
||||||
|
.uploadFile(tempFilePaths[0], true)
|
||||||
|
.then((res) => {
|
||||||
|
res = JSON.parse(res);
|
||||||
|
if (res.msg) fromValue.avatar = res.msg;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
$api.msg("上传失败");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (error) => {},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -267,6 +277,23 @@ function getDatePickerIndexes(dateStr) {
|
|||||||
height: calc(100% - 120rpx)
|
height: calc(100% - 120rpx)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.content-avatar{
|
||||||
|
margin-bottom: 52rpx;
|
||||||
|
padding-bottom: 28rpx
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 2rpx solid #EBEBEB
|
||||||
|
.avatar-title{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color #333;
|
||||||
|
}
|
||||||
|
.avatar{
|
||||||
|
width:110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
.content-input
|
.content-input
|
||||||
margin-bottom: 52rpx
|
margin-bottom: 52rpx
|
||||||
.input-titile
|
.input-titile
|
||||||
@@ -302,12 +329,12 @@ function getDatePickerIndexes(dateStr) {
|
|||||||
background: #697279;
|
background: #697279;
|
||||||
transform: rotate(45deg)
|
transform: rotate(45deg)
|
||||||
.content-sex
|
.content-sex
|
||||||
height: 110rpx;
|
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-bottom: 2rpx solid #EBEBEB
|
border-bottom: 2rpx solid #EBEBEB
|
||||||
margin-bottom: 52rpx
|
margin-bottom: 52rpx
|
||||||
|
padding-bottom: 28rpx
|
||||||
.sex-titile
|
.sex-titile
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
.sext-ri
|
.sext-ri
|
||||||
|
|||||||
@@ -6,8 +6,8 @@
|
|||||||
:style="{
|
:style="{
|
||||||
left: position.x + 'px',
|
left: position.x + 'px',
|
||||||
top: position.y + 'px',
|
top: position.y + 'px',
|
||||||
width: isFullScreen ? '100%' : '300rpx',
|
width: isFullScreen ? '100%' : videoWidth + 'rpx',
|
||||||
height: isFullScreen ? '100vh' : '200rpx',
|
height: isFullScreen ? '100vh' : videoHeight + 'rpx',
|
||||||
}"
|
}"
|
||||||
@touchstart="handleTouchStart"
|
@touchstart="handleTouchStart"
|
||||||
@touchmove="handleTouchMove"
|
@touchmove="handleTouchMove"
|
||||||
@@ -24,8 +24,10 @@
|
|||||||
height: '100%',
|
height: '100%',
|
||||||
}"
|
}"
|
||||||
id="myVideo"
|
id="myVideo"
|
||||||
|
ref="videoRef"
|
||||||
@play="onPlay"
|
@play="onPlay"
|
||||||
@pause="onPause"
|
@pause="onPause"
|
||||||
|
@loadedmetadata="onLoadedMetadata"
|
||||||
></video>
|
></video>
|
||||||
|
|
||||||
<!-- 控制栏 -->
|
<!-- 控制栏 -->
|
||||||
@@ -41,6 +43,8 @@
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { nextTick } from 'vue';
|
import { nextTick } from 'vue';
|
||||||
|
|
||||||
|
const videoRef = ref(null);
|
||||||
|
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const isPlaying = ref(false);
|
const isPlaying = ref(false);
|
||||||
const isFullScreen = ref(false);
|
const isFullScreen = ref(false);
|
||||||
@@ -49,6 +53,8 @@ const position = reactive({ x: 20, y: 100 });
|
|||||||
const videoContext = ref(null);
|
const videoContext = ref(null);
|
||||||
const startPos = reactive({ x: 0, y: 0 });
|
const startPos = reactive({ x: 0, y: 0 });
|
||||||
const moving = ref(false);
|
const moving = ref(false);
|
||||||
|
const videoWidth = ref(0);
|
||||||
|
const videoHeight = ref(0);
|
||||||
|
|
||||||
// 初始化视频上下文
|
// 初始化视频上下文
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
@@ -71,8 +77,8 @@ const handleTouchMove = (e) => {
|
|||||||
const newY = e.touches[0].clientY - startPos.y;
|
const newY = e.touches[0].clientY - startPos.y;
|
||||||
|
|
||||||
// 边界检测
|
// 边界检测
|
||||||
const maxX = window.innerWidth - 150; // 300rpx换算后的值
|
const maxX = window.innerWidth - videoWidth.value / 2; // 300rpx换算后的值
|
||||||
const maxY = 50 + window.innerHeight - 200;
|
const maxY = window.innerHeight - videoHeight.value / 2;
|
||||||
|
|
||||||
position.x = Math.max(0, Math.min(newX, maxX));
|
position.x = Math.max(0, Math.min(newX, maxX));
|
||||||
position.y = Math.max(0, Math.min(newY, maxY));
|
position.y = Math.max(0, Math.min(newY, maxY));
|
||||||
@@ -124,6 +130,32 @@ const open = (url) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onLoadedMetadata = (e) => {
|
||||||
|
const video = e.detail;
|
||||||
|
const width = video.width;
|
||||||
|
const height = video.height;
|
||||||
|
const ratio = width / height;
|
||||||
|
|
||||||
|
// 设置宽度:横屏宽 300,竖屏宽 180(可自定义)
|
||||||
|
if (ratio >= 1) {
|
||||||
|
videoWidth.value = 300; // 横屏
|
||||||
|
videoHeight.value = 300 * (height / width); // 保持比例
|
||||||
|
} else {
|
||||||
|
videoWidth.value = 180; // 竖屏
|
||||||
|
videoHeight.value = 180 * (height / width); // 保持比例
|
||||||
|
}
|
||||||
|
// console.log(`宽高: ${width}x${height}`);
|
||||||
|
// console.log(`比例: ${ratio.toFixed(2)} (${getRatioName(ratio)})`);
|
||||||
|
};
|
||||||
|
|
||||||
|
function getRatioName(ratio) {
|
||||||
|
const rounded = Math.round(ratio * 100) / 100;
|
||||||
|
if (Math.abs(rounded - 16 / 9) < 0.01) return '16:9';
|
||||||
|
if (Math.abs(rounded - 4 / 3) < 0.01) return '4:3';
|
||||||
|
if (Math.abs(rounded - 1) < 0.01) return '1:1';
|
||||||
|
return `${rounded.toFixed(2)}:1`;
|
||||||
|
}
|
||||||
|
|
||||||
// 暴露方法
|
// 暴露方法
|
||||||
defineExpose({ open });
|
defineExpose({ open });
|
||||||
</script>
|
</script>
|
||||||
@@ -155,4 +187,4 @@ defineExpose({ open });
|
|||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border-radius: 4rpx;
|
border-radius: 4rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,19 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="" backGorundColor="#F4F4F4">
|
<AppLayout title="" backGorundColor="#F4F4F4">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template #headerright>
|
<template #headerright>
|
||||||
|
<!-- <view class="btnshare">
|
||||||
|
<image src="@/static/icon/share.png" @click="shareJob"></image>
|
||||||
|
</view> -->
|
||||||
<view class="btn mar_ri10">
|
<view class="btn mar_ri10">
|
||||||
<image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
|
<image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
|
||||||
<image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
|
<image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<view class="content">
|
<view class="content" v-show="!isEmptyObject(jobInfo)">
|
||||||
<view class="content-top btn-feel">
|
<view class="content-top btn-feel">
|
||||||
<view class="top-salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</view>
|
<view class="top-salary">
|
||||||
|
<Salary-Expectation
|
||||||
|
:max-salary="jobInfo.maxSalary"
|
||||||
|
:min-salary="jobInfo.minSalary"
|
||||||
|
:is-month="true"
|
||||||
|
></Salary-Expectation>
|
||||||
|
</view>
|
||||||
<view class="top-name">{{ jobInfo.jobTitle }}</view>
|
<view class="top-name">{{ jobInfo.jobTitle }}</view>
|
||||||
<view class="top-info">
|
<view class="top-info">
|
||||||
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
|
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
|
||||||
@@ -107,10 +116,7 @@
|
|||||||
v-for="(item, index) in matchingDegree"
|
v-for="(item, index) in matchingDegree"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="progress-item"
|
class="progress-item"
|
||||||
:class="{
|
:class="getClass(index)"
|
||||||
active: index < currentStep - 1,
|
|
||||||
half: index < currentStep && currentStep < index + 1, // 半条
|
|
||||||
}"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -134,10 +140,11 @@
|
|||||||
import point from '@/static/icon/point.png';
|
import point from '@/static/icon/point.png';
|
||||||
import VideoPlayer from './component/videoPlayer.vue';
|
import VideoPlayer from './component/videoPlayer.vue';
|
||||||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
|
||||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||||
const { $api, navTo, getLenPx, parseQueryParams, navBack } = inject('globalFunction');
|
|
||||||
import RadarMap from './component/radarMap.vue';
|
import RadarMap from './component/radarMap.vue';
|
||||||
|
const { $api, navTo, getLenPx, parseQueryParams, navBack, isEmptyObject } = inject('globalFunction');
|
||||||
|
import config from '@/config.js';
|
||||||
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
|
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
|
||||||
const currentStep = ref(1);
|
const currentStep = ref(1);
|
||||||
const companyCount = ref(0);
|
const companyCount = ref(0);
|
||||||
@@ -167,7 +174,6 @@ function initLoad(option) {
|
|||||||
if (jobId !== jobIdRef.value) {
|
if (jobId !== jobIdRef.value) {
|
||||||
jobIdRef.value = jobId;
|
jobIdRef.value = jobId;
|
||||||
getDetail(jobId);
|
getDetail(jobId);
|
||||||
getCompetivetuveness(jobId);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -180,29 +186,33 @@ function seeExplain() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getDetail(jobId) {
|
function getDetail(jobId) {
|
||||||
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
return new Promise((reslove, reject) => {
|
||||||
const { latitude, longitude, companyName, companyId } = resData.data;
|
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
||||||
jobInfo.value = resData.data;
|
const { latitude, longitude, companyName, companyId } = resData.data;
|
||||||
getCompanyIsAJobs(companyId);
|
jobInfo.value = resData.data;
|
||||||
if (latitude && longitude) {
|
reslove(resData.data);
|
||||||
mapCovers.value = [
|
getCompanyIsAJobs(companyId);
|
||||||
{
|
getCompetivetuveness(jobId);
|
||||||
latitude: latitude,
|
if (latitude && longitude) {
|
||||||
longitude: longitude,
|
mapCovers.value = [
|
||||||
iconPath: point,
|
{
|
||||||
label: {
|
latitude: latitude,
|
||||||
content: companyName,
|
longitude: longitude,
|
||||||
textAlign: 'center',
|
iconPath: point,
|
||||||
padding: 3,
|
label: {
|
||||||
fontSize: 12,
|
content: companyName,
|
||||||
bgColor: '#FFFFFF',
|
textAlign: 'center',
|
||||||
anchorX: getTextWidth(companyName), // X 轴调整,负数向左
|
padding: 3,
|
||||||
borderRadius: 5,
|
fontSize: 12,
|
||||||
|
bgColor: '#FFFFFF',
|
||||||
|
anchorX: getTextWidth(companyName), // X 轴调整,负数向左
|
||||||
|
borderRadius: 5,
|
||||||
|
},
|
||||||
|
width: 34,
|
||||||
},
|
},
|
||||||
width: 34,
|
];
|
||||||
},
|
}
|
||||||
];
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -257,15 +267,39 @@ function jobCollection() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getClass(index) {
|
||||||
|
const current = currentStep.value;
|
||||||
|
const floorIndex = Math.floor(current);
|
||||||
|
|
||||||
|
if (index < floorIndex) {
|
||||||
|
return 'active';
|
||||||
|
} else if (index === floorIndex) {
|
||||||
|
const decimal = current % 1;
|
||||||
|
const percent = Math.round(decimal * 100);
|
||||||
|
return `half${percent}`;
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
|
}
|
||||||
|
.btnshare {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
margin-right: 46rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -307,17 +341,19 @@ image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 当前进度进行中的格子 */
|
/* 当前进度进行中的格子 */
|
||||||
.progress-item.half::before {
|
for i in 0..100
|
||||||
content: '';
|
.progress-item.half{i}::before
|
||||||
position: absolute;
|
content ''
|
||||||
left: 0;
|
position absolute
|
||||||
top: 0;
|
left 0
|
||||||
bottom: 0;
|
top 0
|
||||||
width: 100%; /* 根据 currentStep 小数动态控制 */
|
bottom 0
|
||||||
// background: linear-gradient(to right, #256bfa, #8c68ff);
|
width 100%
|
||||||
background: linear-gradient(to right, #256bfa 50%, #eaeaea 50%);
|
background linear-gradient(to right, #256bfa (i)%, #eaeaea (i)%)
|
||||||
border-radius: 24rpx;
|
border-radius 24rpx
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card-footer{
|
.card-footer{
|
||||||
.footer-title{
|
.footer-title{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@@ -125,6 +125,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.time-block {
|
.time-block {
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|||||||
@@ -141,6 +141,7 @@ function getList(type = 'add', loading = true) {
|
|||||||
color: #666D7F;
|
color: #666D7F;
|
||||||
}
|
}
|
||||||
.active{
|
.active{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
@@ -167,6 +168,7 @@ function getList(type = 'add', loading = true) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.card-Title{
|
.card-Title{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
line-height: 70rpx
|
line-height: 70rpx
|
||||||
|
|||||||
136
packageA/pages/tiktok/tiktok.vue
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<template>
|
||||||
|
<div class="video-container">
|
||||||
|
<view class="back-box">
|
||||||
|
<view class="btn">
|
||||||
|
<uni-icons type="left" size="26" color="#FFFFFF" @click="navBack"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<mTikTok :video-list="state.videoList" :pause-type="1" :controls="false" @loadMore="loadMore" @change="change">
|
||||||
|
<template v-slot="data">
|
||||||
|
<view class="video-layer">
|
||||||
|
<view class="title line_1">{{ currentItem.companyName }}</view>
|
||||||
|
<view class="discription">
|
||||||
|
<text class="line_1">
|
||||||
|
{{ currentItem.jobTitle }}
|
||||||
|
</text>
|
||||||
|
<view class="seedetail" @click="nextDetail">
|
||||||
|
查看详情
|
||||||
|
<uni-icons type="right" color="#FFFFFF" size="14"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</mTikTok>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { inject, ref, reactive } from 'vue';
|
||||||
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
|
const { $api, navBack, navTo } = inject('globalFunction');
|
||||||
|
import mTikTok from '@/components/TikTok/TikTok.vue';
|
||||||
|
import useUserStore from '@/stores/useUserStore';
|
||||||
|
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
|
||||||
|
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||||
|
const state = reactive({
|
||||||
|
videoList: [],
|
||||||
|
});
|
||||||
|
const currentItem = ref(null);
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
const jobInfo = uni.getStorageSync(`job-Info`);
|
||||||
|
if (jobInfo) {
|
||||||
|
currentItem.value = jobInfo;
|
||||||
|
state.videoList.push(jobInfo);
|
||||||
|
}
|
||||||
|
getNextVideoSrc(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
function nextDetail() {
|
||||||
|
const job = currentItem.value;
|
||||||
|
// 记录岗位类型,用作数据分析
|
||||||
|
if (job.jobCategory) {
|
||||||
|
const recordData = recommedIndexDb.JobParameter(job);
|
||||||
|
recommedIndexDb.addRecord(recordData);
|
||||||
|
}
|
||||||
|
console.log(job.jobId);
|
||||||
|
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNextVideoSrc(num) {
|
||||||
|
let params = {
|
||||||
|
uuid: useUserStore().seesionId,
|
||||||
|
count: num || 1,
|
||||||
|
};
|
||||||
|
$api.createRequest('/app/job/littleVideo/random', params).then((resData) => {
|
||||||
|
const { data, code } = resData;
|
||||||
|
state.videoList.push(...data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
// 触发加载更多
|
||||||
|
console.log('加载更多');
|
||||||
|
getNextVideoSrc();
|
||||||
|
};
|
||||||
|
|
||||||
|
const change = (e) => {
|
||||||
|
currentItem.value = e.detail;
|
||||||
|
console.log('🚀 ~ file: index.vue:53 ~ change ~ data:', e);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.video-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
position: relative
|
||||||
|
.back-box{
|
||||||
|
position: absolute;
|
||||||
|
left: 20rpx;
|
||||||
|
top: 20rpx
|
||||||
|
color: #FFFFFF
|
||||||
|
z-index: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-layer {
|
||||||
|
position: absolute;
|
||||||
|
left: 24rpx;
|
||||||
|
right: 24rpx;
|
||||||
|
bottom: 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
.title{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
}
|
||||||
|
.discription{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
margin-top: 20rpx
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
.seedetail{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 100%;
|
||||||
|
letter-spacing: 0%;
|
||||||
|
white-space: nowrap
|
||||||
|
padding-left: 20rpx
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
265
packageA/pages/vCard/vCard.vue
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<AppLayout title="电子名片" title-color="#FFFFFF" back-gorund-color="#F4F4F4">
|
||||||
|
<template #headerleft>
|
||||||
|
<view class="btn">
|
||||||
|
<image src="@/static/icon/back-white.png" @click="navBack"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view class="mys-container">
|
||||||
|
<!-- 个人信息 -->
|
||||||
|
<view class="card-top btn-feel">
|
||||||
|
<view class="info">
|
||||||
|
<view class="avatar">
|
||||||
|
<image v-if="userInfo.avatar" :src="userInfo.avatar"></image>
|
||||||
|
<image v-else-if="userInfo.sex == '0'" src="@/static/icon/boy.png"></image>
|
||||||
|
<image v-else src="@/static/icon/girl.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="info-right">
|
||||||
|
<view class="name">{{ userInfo.name || "编辑用户名" }}</view>
|
||||||
|
<view class="des">
|
||||||
|
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
|
||||||
|
<text class="mar_ri10">|</text>
|
||||||
|
<text class="mar_ri10">{{ userInfo.age }}岁</text>
|
||||||
|
<text class="mar_ri10">|</text>
|
||||||
|
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
|
||||||
|
<!-- <text class="mar_ri10">|</text>
|
||||||
|
<dict-Label class="mar_ri10" dictType="affiliation" :value="userInfo.politicalAffiliation"></dict-Label> -->
|
||||||
|
</view>
|
||||||
|
<view class="phone">
|
||||||
|
<image class="call-icon" src="@/static/icon/call.png" />
|
||||||
|
<view>{{ userInfo.phone }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-bottom">
|
||||||
|
<view>到岗:2025-11-02</view>
|
||||||
|
<view>地点:青岛市-<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label></view>
|
||||||
|
</view>
|
||||||
|
<view class="des-card" style="margin-top: 24rpx">
|
||||||
|
<view class="fl_box fl_justbet">
|
||||||
|
<view>求职意向岗位</view>
|
||||||
|
<view>{{ userInfo.jobIntention || "-" }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="fl_box fl_justbet">
|
||||||
|
<view>毕业学校</view>
|
||||||
|
<view>{{ userInfo.graduationSchool || "-" }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="fl_box fl_justbet">
|
||||||
|
<view>当前状态</view>
|
||||||
|
<view>在职 看工作机会</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card btn-feel">
|
||||||
|
<view class="title">
|
||||||
|
<image class="bg" src="@/static/icon/title-bg.png" />
|
||||||
|
<view class="text">个人技能</view>
|
||||||
|
</view>
|
||||||
|
<view class="skill-box">
|
||||||
|
<view class="skill-item" v-for="item in userInfo?.skillList" :key="item.id">{{ item.skill }}</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!userInfo?.skillList?.length" class="empty-box">
|
||||||
|
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
|
||||||
|
<view class="content">暂无个人技能</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card btn-feel">
|
||||||
|
<view class="title">
|
||||||
|
<image class="bg" src="@/static/icon/title-bg.png" />
|
||||||
|
<view class="text">关键经历</view>
|
||||||
|
</view>
|
||||||
|
<view class="exp-box">
|
||||||
|
<view class="exp-item" v-for="(item, index) in userInfo?.workExp" :key="item.id">{{ index + 1 + "." }}{{ item.duty }}</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!userInfo?.workExp?.length" class="empty-box">
|
||||||
|
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
|
||||||
|
<view class="content">暂无关键经历</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card btn-feel">
|
||||||
|
<view class="title">
|
||||||
|
<image class="bg" src="@/static/icon/title-bg.png" />
|
||||||
|
<view class="text">荣誉及证书情况</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<ul class="certificate-box">
|
||||||
|
<li class="certificate-item" v-for="(item, index) in userInfo?.certificateList" :key="item.id">{{ item.name }}</li>
|
||||||
|
</ul>
|
||||||
|
<view v-if="!userInfo?.certificateList?.length" class="empty-box">
|
||||||
|
<image class="img" src="@/static/icon/empty.png" mode="widthFix"></image>
|
||||||
|
<view class="content">暂无荣誉证书</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</AppLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
|
||||||
|
const { $api, navTo, navBack } = inject("globalFunction");
|
||||||
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
|
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();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-top {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #fff;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
.bg {
|
||||||
|
width: 108rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skill-box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
.skill-item {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
background: #e7f1ff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.exp-box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 24rpx;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
.exp-item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.certificate-box {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
padding-inline-start: 40rpx !important;
|
||||||
|
.certificate-item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.mys-container {
|
||||||
|
padding: 28rpx;
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx;
|
||||||
|
.avatar {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
image{
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-right {
|
||||||
|
height: 160rpx;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.name {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.phone {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
.call-icon {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-bottom {
|
||||||
|
background: linear-gradient(to right, #91b6ff, #87afff, #b7adff);
|
||||||
|
border-radius: 0 0 8rpx 8rpx;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.des-card {
|
||||||
|
padding: 24rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
.empty-box {
|
||||||
|
padding: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
245
packageA/pages/workExp/workExp.vue
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<AppLayout title="工作经历" 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 blue" @click="confirm">确认</view>
|
||||||
|
</template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content-input">
|
||||||
|
<view class="input-titile">公司</view>
|
||||||
|
<input class="input-con" v-model="fromValue.company" placeholder="请输入公司名称" />
|
||||||
|
</view>
|
||||||
|
<view class="content-input">
|
||||||
|
<view class="input-titile">岗位</view>
|
||||||
|
<input class="input-con" v-model="fromValue.position" placeholder="请输入岗位" />
|
||||||
|
</view>
|
||||||
|
<view class="content-input">
|
||||||
|
<view class="input-titile">时间</view>
|
||||||
|
<view class="flex-box">
|
||||||
|
<view class="input-box btn-feel" @click="changestartTime">
|
||||||
|
<input v-model="fromValue.startTime" class="input-con triangle" disabled placeholder="开始时间" />
|
||||||
|
<image class="icon" src="@/static/icon/arrow-down.png" />
|
||||||
|
</view>
|
||||||
|
<view class="gap">-</view>
|
||||||
|
<view class="input-box btn-feel" @click="changeendTime">
|
||||||
|
<input v-model="fromValue.endTime" class="input-con triangle" disabled placeholder="至今" />
|
||||||
|
<image class="icon" src="@/static/icon/arrow-down.png" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content-input">
|
||||||
|
<view class="input-titile">工作内容</view>
|
||||||
|
<textarea class="text-area" placeholder="请输入工作内容" v-model="fromValue.duty"></textarea>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 时间选择器组件 -->
|
||||||
|
<DatePicker ref="datePicker" />
|
||||||
|
<template #footer v-if="fromValue.id">
|
||||||
|
<view class="footer-container">
|
||||||
|
<view class="footer-button btn-feel" @click="delCurrent">删除该工作经历</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</AppLayout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
|
||||||
|
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||||
|
const { $api, navTo, navBack } = inject("globalFunction");
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import useUserStore from "@/stores/useUserStore";
|
||||||
|
import useDictStore from "@/stores/useDictStore";
|
||||||
|
import DatePicker from "@/components/DatePicker/DatePicker.vue";
|
||||||
|
const { userInfo } = storeToRefs(useUserStore());
|
||||||
|
const { getUserResume } = useUserStore();
|
||||||
|
const { dictLabel, oneDictData } = useDictStore();
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
const fromValue = reactive({
|
||||||
|
position: "",
|
||||||
|
company: "",
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
duty: "",
|
||||||
|
id: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取时间选择器组件的引用
|
||||||
|
const datePicker = ref();
|
||||||
|
|
||||||
|
onLoad((e) => {
|
||||||
|
initLoad(e?.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
const confirm = async () => {
|
||||||
|
// 验证必填字段
|
||||||
|
if (!fromValue.company) {
|
||||||
|
return $api.msg("请输入公司名称");
|
||||||
|
}
|
||||||
|
if (!fromValue.position) {
|
||||||
|
return $api.msg("请输入岗位");
|
||||||
|
}
|
||||||
|
if (!fromValue.startTime) {
|
||||||
|
return $api.msg("请选择开始时间");
|
||||||
|
}
|
||||||
|
// 验证时间逻辑:结束时间不能早于开始时间
|
||||||
|
if (fromValue.endTime && new Date(fromValue.endTime) < new Date(fromValue.startTime)) {
|
||||||
|
return $api.msg("结束时间不能早于开始时间");
|
||||||
|
}
|
||||||
|
let res;
|
||||||
|
try {
|
||||||
|
if (fromValue.id) {
|
||||||
|
res = await $api.createRequest("/app/user/experience/edit", fromValue, "post");
|
||||||
|
} else {
|
||||||
|
res = await $api.createRequest("/app/user/experience/save", fromValue, "post");
|
||||||
|
}
|
||||||
|
$api.msg("保存成功");
|
||||||
|
getUserResume().then(() => {
|
||||||
|
navBack();
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
$api.msg("保存失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function delCurrent() {
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "确认要删除此条工作经历吗?",
|
||||||
|
showCancel: true,
|
||||||
|
success: async ({ confirm, cancel }) => {
|
||||||
|
if (confirm) {
|
||||||
|
await $api.createRequest("/app/user/experience/delete", { id: fromValue.id }, "post");
|
||||||
|
$api.msg("删除成功");
|
||||||
|
getUserResume().then(() => {
|
||||||
|
navBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initLoad(id) {
|
||||||
|
if (!id) return;
|
||||||
|
$api
|
||||||
|
.createRequest(`/app/user/experience/getSingle/${id}`, {}, "get")
|
||||||
|
.then((res) => {
|
||||||
|
Object.assign(fromValue, res.data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("获取工作经历失败:", err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择开始时间
|
||||||
|
const changestartTime = () => {
|
||||||
|
console.log(1);
|
||||||
|
datePicker.value.open({
|
||||||
|
title: "选择开始时间",
|
||||||
|
defaultDate: fromValue.startTime,
|
||||||
|
success: (selectedDate) => {
|
||||||
|
fromValue.startTime = selectedDate;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择结束时间
|
||||||
|
const changeendTime = () => {
|
||||||
|
datePicker.value.open({
|
||||||
|
title: "选择结束时间",
|
||||||
|
defaultDate: fromValue.endTime,
|
||||||
|
success: (selectedDate) => {
|
||||||
|
fromValue.endTime = selectedDate;
|
||||||
|
// 如果结束时间早于新的开始时间,清空结束时间
|
||||||
|
if (fromValue.startTime && new Date(fromValue.startTime) > new Date(selectedDate)) {
|
||||||
|
fromValue.endTime = "";
|
||||||
|
$api.msg("结束时间不能小于开始时间!");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.btn.blue {
|
||||||
|
color: #1677ff;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 28rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: calc(100% - 120rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.gap {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
flex: 0.25;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
width: 75rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
}
|
||||||
|
.input-box {
|
||||||
|
flex: 0.375;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-input {
|
||||||
|
margin-bottom: 48rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #ebebeb;
|
||||||
|
&:nth-last-of-type(1) {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.input-titile {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #6a6a6a;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
.input-con {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.triangle {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.text-area {
|
||||||
|
width: 100%;
|
||||||
|
height: 700rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-container {
|
||||||
|
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;
|
||||||
|
.footer-button {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #f93a4a;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
497
pages.json
@@ -1,245 +1,288 @@
|
|||||||
{
|
{
|
||||||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
"pages": [
|
||||||
|
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "青岛智慧就业平台",
|
||||||
|
// #ifdef H5
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/mine",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/msglog/msglog",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "消息",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/careerfair/careerfair",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "招聘会",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/login",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "AI+就业服务程序",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/nearby/nearby",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "附近",
|
||||||
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chat/chat",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "AI+",
|
||||||
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
// #ifdef H5
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
//#endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/search/search",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"subpackages": [
|
||||||
|
{
|
||||||
|
"root": "packageA",
|
||||||
|
"pages": [
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/choiceness/choiceness",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "青岛智慧就业平台",
|
"navigationBarTitleText": "精选",
|
||||||
// #ifdef H5
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
"navigationStyle": "custom"
|
"navigationBarTextStyle": "white",
|
||||||
// #endif
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mine/mine",
|
"path": "pages/post/post",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的",
|
"navigationBarTitleText": "职位详情",
|
||||||
"navigationStyle": "custom"
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
}
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/msglog/msglog",
|
"path": "pages/UnitDetails/UnitDetails",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "消息",
|
"navigationBarTitleText": "单位详情",
|
||||||
"navigationStyle": "custom",
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
"enablePullDownRefresh": false
|
"navigationBarTextStyle": "white",
|
||||||
}
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/careerfair/careerfair",
|
"path": "pages/exhibitors/exhibitors",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "招聘会",
|
"navigationBarTitleText": "参展单位",
|
||||||
"navigationStyle": "custom"
|
"navigationBarBackgroundColor": "#4778EC",
|
||||||
}
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/login/login",
|
"path": "pages/myResume/myResume",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "AI+就业服务程序",
|
"navigationBarTitleText": "我的简历",
|
||||||
"navigationStyle": "custom"
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
}
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/nearby/nearby",
|
"path": "pages/vCard/vCard",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "附近",
|
"navigationBarTitleText": "点子名片",
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
"navigationBarTextStyle": "white",
|
"navigationStyle": "custom"
|
||||||
"navigationStyle": "custom"
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/chat/chat",
|
"path": "pages/Intendedposition/Intendedposition",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "AI+",
|
"navigationBarTitleText": "投递记录",
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
"navigationBarTextStyle": "white",
|
}
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
// #ifdef H5
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
//#endif
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/search/search",
|
"path": "pages/collection/collection",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "我的收藏",
|
||||||
"navigationStyle": "custom"
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
}
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/browseJob/browseJob",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的浏览",
|
||||||
|
"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/workExp/workExp",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工作经历",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/reservation/reservation",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的预约",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/choicenessList/choicenessList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "精选企业",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/newJobPosition/newJobPosition",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新职位推荐",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/systemNotification/systemNotification",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "系统通知",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/tiktok/tiktok",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/moreJobs/moreJobs",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "更多岗位",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
]
|
||||||
],
|
}
|
||||||
"subpackages": [{
|
],
|
||||||
"root": "packageA",
|
"tabBar": {
|
||||||
"pages": [{
|
"custom": true,
|
||||||
"path": "pages/choiceness/choiceness",
|
"display": "none",
|
||||||
"style": {
|
"color": "#5E5F60",
|
||||||
"navigationBarTitleText": "精选",
|
"selectedColor": "#256BFA",
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
"borderStyle": "black",
|
||||||
"navigationBarTextStyle": "white",
|
"backgroundColor": "#ffffff",
|
||||||
"navigationStyle": "custom"
|
"midButton": {
|
||||||
}
|
"width": "50px",
|
||||||
}, {
|
"height": "50px",
|
||||||
"path": "pages/post/post",
|
"backgroundImage": "static/tabbar/logo2copy.png"
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "职位详情",
|
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
|
||||||
"navigationBarTextStyle": "white",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/UnitDetails/UnitDetails",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "单位详情",
|
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
|
||||||
"navigationBarTextStyle": "white",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/exhibitors/exhibitors",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "参展单位",
|
|
||||||
"navigationBarBackgroundColor": "#4778EC",
|
|
||||||
"navigationBarTextStyle": "white",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/myResume/myResume",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的简历",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/Intendedposition/Intendedposition",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "投递记录",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "pages/collection/collection",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的收藏",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/browseJob/browseJob",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的浏览",
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/newJobPosition/newJobPosition",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "新职位推荐",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/systemNotification/systemNotification",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "系统通知",
|
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}],
|
|
||||||
"tabBar": {
|
|
||||||
"color": "#5E5F60",
|
|
||||||
"selectedColor": "#256BFA",
|
|
||||||
"borderStyle": "black",
|
|
||||||
"backgroundColor": "#ffffff",
|
|
||||||
"midButton": {
|
|
||||||
"width": "50px",
|
|
||||||
"height": "50px",
|
|
||||||
"backgroundImage": "static/tabbar/logo2copy.png"
|
|
||||||
},
|
|
||||||
"list": [{
|
|
||||||
"pagePath": "pages/index/index",
|
|
||||||
"iconPath": "static/tabbar/calendar.png",
|
|
||||||
"selectedIconPath": "static/tabbar/calendared.png",
|
|
||||||
"text": "职位"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"pagePath": "pages/careerfair/careerfair",
|
|
||||||
"iconPath": "static/tabbar/post.png",
|
|
||||||
"selectedIconPath": "static/tabbar/posted.png",
|
|
||||||
"text": "招聘会"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"pagePath": "pages/chat/chat",
|
|
||||||
"iconPath": "static/tabbar/logo3.png",
|
|
||||||
"selectedIconPath": "static/tabbar/logo3.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"pagePath": "pages/msglog/msglog",
|
|
||||||
"iconPath": "static/tabbar/chat4.png",
|
|
||||||
"selectedIconPath": "static/tabbar/chat4ed.png",
|
|
||||||
"text": "消息"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"pagePath": "pages/mine/mine",
|
|
||||||
"iconPath": "static/tabbar/mine.png",
|
|
||||||
"selectedIconPath": "static/tabbar/mined.png",
|
|
||||||
"text": "我的"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"globalStyle": {
|
"list": [
|
||||||
"navigationBarTextStyle": "black",
|
{
|
||||||
"navigationBarTitleText": "uni-app",
|
"pagePath": "pages/index/index",
|
||||||
"navigationBarBackgroundColor": "#F8F8F8",
|
"iconPath": "static/tabbar/calendar.png",
|
||||||
"backgroundColor": "#F8F8F8",
|
"selectedIconPath": "static/tabbar/calendared.png",
|
||||||
// "enablePullDownRefresh": false,
|
"text": "职位"
|
||||||
// "navigationStyle": "custom",
|
},
|
||||||
"rpxCalcBaseDeviceWidth": 375,
|
{
|
||||||
"rpxCalcMaxDeviceWidth": 750,
|
"pagePath": "pages/careerfair/careerfair",
|
||||||
"rpxCalcIncludeWidth": 750
|
"iconPath": "static/tabbar/post.png",
|
||||||
},
|
"selectedIconPath": "static/tabbar/posted.png",
|
||||||
"uniIdRouter": {}
|
"text": "招聘会"
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/chat/chat",
|
||||||
|
"iconPath": "static/tabbar/logo3.png",
|
||||||
|
"selectedIconPath": "static/tabbar/logo3.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/msglog/msglog",
|
||||||
|
"iconPath": "static/tabbar/chat4.png",
|
||||||
|
"selectedIconPath": "static/tabbar/chat4ed.png",
|
||||||
|
"text": "消息"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/mine/mine",
|
||||||
|
"iconPath": "static/tabbar/mine.png",
|
||||||
|
"selectedIconPath": "static/tabbar/mined.png",
|
||||||
|
"text": "我的"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "uni-app",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8",
|
||||||
|
// "enablePullDownRefresh": false,
|
||||||
|
// "navigationStyle": "custom",
|
||||||
|
"rpxCalcBaseDeviceWidth": 375,
|
||||||
|
"rpxCalcMaxDeviceWidth": 750,
|
||||||
|
"rpxCalcIncludeWidth": 750
|
||||||
|
},
|
||||||
|
"uniIdRouter": {}
|
||||||
|
}
|
||||||
|
|||||||
BIN
pages/.DS_Store
vendored
@@ -39,7 +39,7 @@
|
|||||||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||||||
<view class="cards" v-if="fairList.length">
|
<view class="cards" v-if="fairList.length">
|
||||||
<view
|
<view
|
||||||
class="card btn-incline"
|
class="card press-button"
|
||||||
v-for="(item, index) in fairList"
|
v-for="(item, index) in fairList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
|
@click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
|
||||||
@@ -83,6 +83,7 @@
|
|||||||
<empty v-else pdTop="200"></empty>
|
<empty v-else pdTop="200"></empty>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
|
<Tabbar :currentpage="1"></Tabbar>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -90,6 +91,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
|
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||||
import useLocationStore from '@/stores/useLocationStore';
|
import useLocationStore from '@/stores/useLocationStore';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||||
@@ -371,6 +373,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
|||||||
flex-wrap: nowrap
|
flex-wrap: nowrap
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
.weel-days{
|
.weel-days{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
@@ -424,6 +427,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
|||||||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
.card-title{
|
.card-title{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
@@ -448,6 +452,7 @@ function getNextDates({ startDate = '', count = 6 }) {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 48rpx;
|
font-size: 48rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
}
|
}
|
||||||
.left-dateDay{
|
.left-dateDay{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@@ -62,10 +62,11 @@
|
|||||||
<view class="chatmain-warpper">
|
<view class="chatmain-warpper">
|
||||||
<ai-paging ref="paging"></ai-paging>
|
<ai-paging ref="paging"></ai-paging>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 自定义tabbar -->
|
||||||
|
<view class="chatmain-footer" v-show="!isDrawerOpen">
|
||||||
|
<Tabbar :currentpage="2"></Tabbar>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 自定义tabbar -->
|
|
||||||
<!-- <tabbar-custom :currentpage="2"></tabbar-custom> -->
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -73,6 +74,7 @@
|
|||||||
import { ref, inject, nextTick, computed } from 'vue';
|
import { ref, inject, nextTick, computed } from 'vue';
|
||||||
const { $api, navTo, insertSortData } = inject('globalFunction');
|
const { $api, navTo, insertSortData } = inject('globalFunction');
|
||||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
|
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
|
||||||
|
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||||
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
||||||
import useUserStore from '@/stores/useUserStore';
|
import useUserStore from '@/stores/useUserStore';
|
||||||
import aiPaging from './components/ai-paging.vue';
|
import aiPaging from './components/ai-paging.vue';
|
||||||
@@ -88,6 +90,7 @@ const paging = ref(null);
|
|||||||
|
|
||||||
// 实时过滤
|
// 实时过滤
|
||||||
const filteredList = computed(() => {
|
const filteredList = computed(() => {
|
||||||
|
// console.log(tabeList.value);
|
||||||
if (!searchText.value) return tabeList.value;
|
if (!searchText.value) return tabeList.value;
|
||||||
const list = tabeList.value.filter((item) => !item.isTitle && item.title.includes(searchText.value));
|
const list = tabeList.value.filter((item) => !item.isTitle && item.title.includes(searchText.value));
|
||||||
const [result, lastData] = $api.insertSortData(list);
|
const [result, lastData] = $api.insertSortData(list);
|
||||||
@@ -108,16 +111,16 @@ onHide(() => {
|
|||||||
paging.value?.handleTouchCancel();
|
paging.value?.handleTouchCancel();
|
||||||
if (isDrawerOpen.value) {
|
if (isDrawerOpen.value) {
|
||||||
isDrawerOpen.value = false;
|
isDrawerOpen.value = false;
|
||||||
uni.showTabBar();
|
// uni.showTabBar();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleDrawer = () => {
|
const toggleDrawer = () => {
|
||||||
isDrawerOpen.value = !isDrawerOpen.value;
|
isDrawerOpen.value = !isDrawerOpen.value;
|
||||||
if (isDrawerOpen.value) {
|
if (isDrawerOpen.value) {
|
||||||
uni.hideTabBar();
|
// uni.hideTabBar();
|
||||||
} else {
|
} else {
|
||||||
uni.showTabBar();
|
// uni.showTabBar();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -144,6 +147,7 @@ function updateSetting() {
|
|||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
header-height = 88rpx
|
header-height = 88rpx
|
||||||
|
footer-height = 98rpx
|
||||||
|
|
||||||
/* 页面容器 */
|
/* 页面容器 */
|
||||||
.container {
|
.container {
|
||||||
@@ -277,6 +281,8 @@ header-height = 88rpx
|
|||||||
transition: margin-left 0.3s ease-in-out;
|
transition: margin-left 0.3s ease-in-out;
|
||||||
position: relative
|
position: relative
|
||||||
background: #FFFFFF
|
background: #FFFFFF
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
.head
|
.head
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -304,15 +310,20 @@ header-height = 88rpx
|
|||||||
height: 37rpx;
|
height: 37rpx;
|
||||||
|
|
||||||
.chatmain-warpper
|
.chatmain-warpper
|
||||||
height: 'calc(100% - %s)' % header-height
|
height: 'calc(100% - %s)' %( header-height + footer-height)
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 2rpx solid #F4F4F4;
|
border-top: 2rpx solid #F4F4F4;
|
||||||
|
flex: 1
|
||||||
|
|
||||||
/* 页面被挤压时向右移动 */
|
/* 页面被挤压时向右移动 */
|
||||||
.main-content.shift {
|
.main-content.shift {
|
||||||
margin-left: 500rpx;
|
margin-left: 500rpx;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.chatmain-footer{
|
||||||
|
height: footer-height;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -113,7 +113,8 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="chat-item self" v-if="isRecording">
|
<view class="chat-item self" v-if="isRecording">
|
||||||
<view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
|
<!-- <view class="message">{{ recognizedText }} {{ lastFinalText }}</view> -->
|
||||||
|
<view class="message">{{ recognizedText }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="isTyping" class="self">
|
<view v-if="isTyping" class="self">
|
||||||
<text class="message msg-loading">
|
<text class="message msg-loading">
|
||||||
@@ -268,14 +269,18 @@ import AudioWave from './AudioWave.vue';
|
|||||||
import WaveDisplay from './WaveDisplay.vue';
|
import WaveDisplay from './WaveDisplay.vue';
|
||||||
import FileIcon from './fileIcon.vue';
|
import FileIcon from './fileIcon.vue';
|
||||||
import FileText from './fileText.vue';
|
import FileText from './fileText.vue';
|
||||||
import { useAudioRecorder } from '@/hook/useRealtimeRecorder.js';
|
// 系统功能hook和阿里云hook
|
||||||
import { useTTSPlayer } from '@/hook/useTTSPlayer.js';
|
// import { useAudioRecorder } from '@/hook/useRealtimeRecorder.js';
|
||||||
|
import { useAudioRecorder } from '@/hook/useSystemSpeechReader.js';
|
||||||
|
// import { useTTSPlayer } from '@/hook/useTTSPlayer.js';
|
||||||
|
import { useTTSPlayer } from '@/hook/useSystemPlayer.js';
|
||||||
// 全局
|
// 全局
|
||||||
const { $api, navTo, throttle } = inject('globalFunction');
|
const { $api, navTo, throttle } = inject('globalFunction');
|
||||||
const emit = defineEmits(['onConfirm']);
|
const emit = defineEmits(['onConfirm']);
|
||||||
const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
|
const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
|
||||||
import successIcon from '@/static/icon/success.png';
|
import successIcon from '@/static/icon/success.png';
|
||||||
// hook
|
// hook
|
||||||
|
// 语音识别
|
||||||
const {
|
const {
|
||||||
isRecording,
|
isRecording,
|
||||||
startRecording,
|
startRecording,
|
||||||
@@ -285,9 +290,9 @@ const {
|
|||||||
volumeLevel,
|
volumeLevel,
|
||||||
recognizedText,
|
recognizedText,
|
||||||
lastFinalText,
|
lastFinalText,
|
||||||
} = useAudioRecorder(config.vioceBaseURl);
|
} = useAudioRecorder();
|
||||||
|
// 语音合成
|
||||||
const { speak, pause, resume, isSpeaking, isPaused, cancelAudio, audioUrl } = useTTSPlayer(config.speechSynthesis);
|
const { speak, pause, resume, isSpeaking, isPaused, cancelAudio } = useTTSPlayer(config.speechSynthesis);
|
||||||
|
|
||||||
// state
|
// state
|
||||||
const queries = ref([]);
|
const queries = ref([]);
|
||||||
@@ -629,6 +634,7 @@ function readMarkdown(value, index) {
|
|||||||
if (isPaused.value) {
|
if (isPaused.value) {
|
||||||
resume();
|
resume();
|
||||||
} else {
|
} else {
|
||||||
|
console.log(value, speechIndex.value, index, isPaused.value)
|
||||||
speak(value);
|
speak(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
895
pages/index/components/index-one.vue
Normal file
@@ -0,0 +1,895 @@
|
|||||||
|
<template>
|
||||||
|
<view class="app-container">
|
||||||
|
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
|
||||||
|
<view class="container-search">
|
||||||
|
<view class="search-input button-click" @click="navTo('/pages/search/search')">
|
||||||
|
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
||||||
|
<text class="inpute">职位名称、薪资要求等</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="chart button-click">职业图谱</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="cards">
|
||||||
|
<view class="card press-button" @click="navTo('/pages/nearby/nearby')">
|
||||||
|
<view class="card-title">附近工作</view>
|
||||||
|
<view class="card-text">好岗职等你来</view>
|
||||||
|
</view>
|
||||||
|
<view class="card press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
|
||||||
|
<view class="card-title">精选企业</view>
|
||||||
|
<view class="card-text">优选职得信赖</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="nav-filter">
|
||||||
|
<view class="filter-top" @touchmove.stop.prevent>
|
||||||
|
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||||
|
<view class="jobs-left">
|
||||||
|
<view
|
||||||
|
class="job button-click"
|
||||||
|
:class="{ active: state.tabIndex === 'all' }"
|
||||||
|
@click="choosePosition('all')"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="job button-click"
|
||||||
|
:class="{ active: state.tabIndex === index }"
|
||||||
|
v-for="(item, index) in userInfo.jobTitle"
|
||||||
|
:key="index"
|
||||||
|
@click="choosePosition(index)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
|
||||||
|
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
|
||||||
|
<text>添加</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="filter-bottom">
|
||||||
|
<view class="btm-left">
|
||||||
|
<view
|
||||||
|
class="button-click filterbtm"
|
||||||
|
:class="{ active: pageState.search.order === item.value }"
|
||||||
|
v-for="item in rangeOptions"
|
||||||
|
@click="handelHostestSearch(item)"
|
||||||
|
:key="item.value"
|
||||||
|
>
|
||||||
|
{{ item.text }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btm-right button-click" @click="openFilter">
|
||||||
|
筛选
|
||||||
|
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-list">
|
||||||
|
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
|
||||||
|
<view class="falls" v-if="list.length">
|
||||||
|
<custom-waterfalls-flow
|
||||||
|
:column="columnCount"
|
||||||
|
:columnSpace="columnSpace"
|
||||||
|
ref="waterfallsFlowRef"
|
||||||
|
:value="list"
|
||||||
|
>
|
||||||
|
<template v-slot:default="job">
|
||||||
|
<view class="item btn-feel" v-if="!job.recommend">
|
||||||
|
<view class="falls-card" @click="nextDetail(job)">
|
||||||
|
<view class="falls-card-pay">
|
||||||
|
<view class="pay-text">
|
||||||
|
<Salary-Expectation
|
||||||
|
:max-salary="job.maxSalary"
|
||||||
|
:min-salary="job.minSalary"
|
||||||
|
:is-month="true"
|
||||||
|
></Salary-Expectation>
|
||||||
|
</view>
|
||||||
|
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="falls-card-title">{{ job.jobTitle }}</view>
|
||||||
|
<view class="fl_box fl_warp">
|
||||||
|
<view class="falls-card-education mar_ri10" v-if="job.education">
|
||||||
|
<dict-Label dictType="education" :value="job.education"></dict-Label>
|
||||||
|
</view>
|
||||||
|
<view class="falls-card-experience" v-if="job.experience">
|
||||||
|
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="falls-card-company">
|
||||||
|
青岛
|
||||||
|
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
|
||||||
|
</view>
|
||||||
|
<view class="falls-card-pepleNumber">
|
||||||
|
<view>
|
||||||
|
<image class="point2" src="/static/icon/pintDate.png"></image>
|
||||||
|
<view class="fl_1">
|
||||||
|
{{ job.postingDate || '发布日期' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image class="point3" src="/static/icon/pointpeople.png"></image>
|
||||||
|
<view class="fl_1">
|
||||||
|
{{ vacanciesTo(job.vacancies) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="falls-card-company2">
|
||||||
|
<image class="point3" src="/static/icon/point3.png"></image>
|
||||||
|
<view class="fl_1">
|
||||||
|
{{ job.companyName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="falls-card-matchingrate">
|
||||||
|
<view class=""><matchingDegree :job="job"></matchingDegree></view>
|
||||||
|
<uni-icons type="star" size="30"></uni-icons>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item" :class="{ isBut: job.isBut }" v-else>
|
||||||
|
<view class="recommend-card">
|
||||||
|
<view class="card-content">
|
||||||
|
<view class="recommend-card-title">在找「{{ job.jobCategory }}」工作吗?</view>
|
||||||
|
<view class="recommend-card-tip">{{ job.tip }}</view>
|
||||||
|
<view class="recommend-card-line"></view>
|
||||||
|
<view class="recommend-card-controll">
|
||||||
|
<view class="controll-no" @click="clearfindJob(job)">不是</view>
|
||||||
|
<view class="controll-yes" @click="findJob(job)">是的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</custom-waterfalls-flow>
|
||||||
|
<loadmore ref="loadmoreRef"></loadmore>
|
||||||
|
</view>
|
||||||
|
<empty v-else pdTop="200"></empty>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<!-- 筛选 -->
|
||||||
|
<select-filter ref="selectFilterModel"></select-filter>
|
||||||
|
|
||||||
|
<!-- <view class="maskFristEntry" v-if="maskFristEntry">
|
||||||
|
<view class="entry-content">
|
||||||
|
<text class="text1">左滑查看视频</text>
|
||||||
|
<text class="text2">左滑查看视频</text>
|
||||||
|
<view class="goExperience">去体验</view>
|
||||||
|
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||||
|
import img from '@/static/icon/filter.png';
|
||||||
|
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||||||
|
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
|
||||||
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import useUserStore from '@/stores/useUserStore';
|
||||||
|
const { userInfo } = storeToRefs(useUserStore());
|
||||||
|
import useDictStore from '@/stores/useDictStore';
|
||||||
|
const { getTransformChildren, oneDictData } = useDictStore();
|
||||||
|
import useLocationStore from '@/stores/useLocationStore';
|
||||||
|
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
||||||
|
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||||
|
import { useScrollDirection } from '@/hook/useScrollDirection';
|
||||||
|
import { useColumnCount } from '@/hook/useColumnCount';
|
||||||
|
const { isScrollingDown, handleScroll } = useScrollDirection();
|
||||||
|
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||||
|
const emits = defineEmits(['onShowTabbar']);
|
||||||
|
|
||||||
|
const waterfallsFlowRef = ref(null);
|
||||||
|
const loadmoreRef = ref(null);
|
||||||
|
const conditionSearch = ref({});
|
||||||
|
const waterfallcolumn = ref(2);
|
||||||
|
const maskFristEntry = ref(false);
|
||||||
|
const state = reactive({
|
||||||
|
tabIndex: 'all',
|
||||||
|
});
|
||||||
|
const list = ref([]);
|
||||||
|
const pageState = reactive({
|
||||||
|
page: 0,
|
||||||
|
total: 0,
|
||||||
|
maxPage: 2,
|
||||||
|
pageSize: 10,
|
||||||
|
search: {
|
||||||
|
order: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const inputText = ref('');
|
||||||
|
const showFilter = ref(false);
|
||||||
|
const selectFilterModel = ref(null);
|
||||||
|
const showModel = ref(false);
|
||||||
|
const rangeOptions = ref([
|
||||||
|
{ value: 0, text: '推荐' },
|
||||||
|
{ value: 1, text: '最热' },
|
||||||
|
{ value: 2, text: '最新发布' },
|
||||||
|
]);
|
||||||
|
const isLoaded = ref(false);
|
||||||
|
|
||||||
|
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||||
|
pageState.pageSize = 10 * (columnCount.value - 1);
|
||||||
|
getJobRecommend('refresh');
|
||||||
|
nextTick(() => {
|
||||||
|
waterfallsFlowRef.value?.refresh?.();
|
||||||
|
useLocationStore().getLocation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
try {
|
||||||
|
if (isLoaded.value) return;
|
||||||
|
isLoaded.value = true;
|
||||||
|
} catch (err) {
|
||||||
|
isLoaded.value = false; // 重置状态允许重试
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollBottom() {
|
||||||
|
loadmoreRef.value.change('loading');
|
||||||
|
if (state.tabIndex === 'all') {
|
||||||
|
getJobRecommend();
|
||||||
|
} else {
|
||||||
|
getJobList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function findJob(job) {
|
||||||
|
if (job.isBut) {
|
||||||
|
$api.msg('已确认');
|
||||||
|
} else {
|
||||||
|
list.value = list.value.map((item) => {
|
||||||
|
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
isBut: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
const jobstr = job.jobCategory;
|
||||||
|
const jobsObj = {
|
||||||
|
地区: 'area',
|
||||||
|
岗位: 'jobTitle',
|
||||||
|
经验: 'experience',
|
||||||
|
};
|
||||||
|
const [name, value] = jobstr.split(':');
|
||||||
|
const nameAttr = jobsObj[name];
|
||||||
|
if (name === '岗位') {
|
||||||
|
conditionSearch.value[nameAttr] = value;
|
||||||
|
} else {
|
||||||
|
const valueAttr = oneDictData(nameAttr).filter((item) => item.label === value);
|
||||||
|
if (valueAttr.length) {
|
||||||
|
const val = valueAttr[0].value;
|
||||||
|
conditionSearch.value[nameAttr] = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearfindJob(job) {
|
||||||
|
if (job.isBut) {
|
||||||
|
$api.msg('已确认');
|
||||||
|
} else {
|
||||||
|
list.value = list.value.map((item) => {
|
||||||
|
if (item.recommend && item.jobCategory === job.jobCategory) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
isBut: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
recommedIndexDb.deleteRecords(job);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextDetail(job) {
|
||||||
|
// 记录岗位类型,用作数据分析
|
||||||
|
if (job.jobCategory) {
|
||||||
|
const recordData = recommedIndexDb.JobParameter(job);
|
||||||
|
recommedIndexDb.addRecord(recordData);
|
||||||
|
}
|
||||||
|
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openFilter() {
|
||||||
|
showFilter.value = true;
|
||||||
|
emits('onShowTabbar', false);
|
||||||
|
selectFilterModel.value?.open({
|
||||||
|
title: '筛选',
|
||||||
|
maskClick: true,
|
||||||
|
success: (values) => {
|
||||||
|
pageState.search = {
|
||||||
|
...pageState.search,
|
||||||
|
};
|
||||||
|
for (const [key, value] of Object.entries(values)) {
|
||||||
|
pageState.search[key] = value.join(',');
|
||||||
|
}
|
||||||
|
showFilter.value = false;
|
||||||
|
getJobList('refresh');
|
||||||
|
},
|
||||||
|
cancel: () => {
|
||||||
|
showFilter.value = false;
|
||||||
|
emits('onShowTabbar', true);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFilterConfirm(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function choosePosition(index) {
|
||||||
|
state.tabIndex = index;
|
||||||
|
list.value = [];
|
||||||
|
if (index === 'all') {
|
||||||
|
pageState.search = {
|
||||||
|
order: pageState.search.order,
|
||||||
|
};
|
||||||
|
inputText.value = '';
|
||||||
|
getJobRecommend('refresh');
|
||||||
|
} else {
|
||||||
|
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
|
||||||
|
pageState.search.jobTitle = userInfo.value.jobTitle[index];
|
||||||
|
inputText.value = '';
|
||||||
|
getJobList('refresh');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handelHostestSearch(val) {
|
||||||
|
pageState.search.order = val.value;
|
||||||
|
if (state.tabIndex === 'all') {
|
||||||
|
getJobRecommend('refresh');
|
||||||
|
} else {
|
||||||
|
getJobList('refresh');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getJobRecommend(type = 'add') {
|
||||||
|
if (type === 'refresh') {
|
||||||
|
list.value = [];
|
||||||
|
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
pageSize: pageState.pageSize,
|
||||||
|
sessionId: useUserStore().seesionId,
|
||||||
|
...pageState.search,
|
||||||
|
...conditionSearch.value,
|
||||||
|
};
|
||||||
|
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣,为您推荐更多合适的岗位' };
|
||||||
|
$api.createRequest('/app/job/recommend', params).then((resData) => {
|
||||||
|
const { data, total } = resData;
|
||||||
|
pageState.total = 0;
|
||||||
|
if (type === 'add') {
|
||||||
|
// 记录系统
|
||||||
|
recommedIndexDb.getRecord().then((res) => {
|
||||||
|
if (res.length) {
|
||||||
|
// 数据分析系统
|
||||||
|
const resultData = recommedIndexDb.analyzer(res);
|
||||||
|
const { sort, result } = resultData;
|
||||||
|
// 岗位询问系统
|
||||||
|
const conditionCounts = Object.fromEntries(
|
||||||
|
sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
|
||||||
|
);
|
||||||
|
jobRecommender.updateConditions(conditionCounts);
|
||||||
|
|
||||||
|
const question = jobRecommender.getNextQuestion();
|
||||||
|
|
||||||
|
if (question) {
|
||||||
|
comd.jobCategory = question;
|
||||||
|
data.unshift(comd);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const reslist = dataToImg(data);
|
||||||
|
list.value.push(...reslist);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
list.value = dataToImg(data);
|
||||||
|
}
|
||||||
|
// 切换状态
|
||||||
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
|
if (data.length < pageState.pageSize) {
|
||||||
|
loadmoreRef.value.change('noMore');
|
||||||
|
} else {
|
||||||
|
loadmoreRef.value.change('more');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 当没有岗位,刷新sessionId重新啦
|
||||||
|
if (!data.length) {
|
||||||
|
useUserStore().initSeesionId();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getJobList(type = 'add') {
|
||||||
|
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||||
|
pageState.page += 1;
|
||||||
|
}
|
||||||
|
if (type === 'refresh') {
|
||||||
|
list.value = [];
|
||||||
|
pageState.page = 1;
|
||||||
|
pageState.maxPage = 2;
|
||||||
|
// waterfallsFlowRef.value.refresh();
|
||||||
|
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
||||||
|
}
|
||||||
|
let params = {
|
||||||
|
current: pageState.page,
|
||||||
|
pageSize: pageState.pageSize,
|
||||||
|
...pageState.search,
|
||||||
|
// ...conditionSearch.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
$api.createRequest('/app/job/list', params).then((resData) => {
|
||||||
|
const { rows, total } = resData;
|
||||||
|
if (type === 'add') {
|
||||||
|
const str = pageState.pageSize * (pageState.page - 1);
|
||||||
|
const end = list.value.length;
|
||||||
|
const reslist = dataToImg(rows);
|
||||||
|
list.value.splice(str, end, ...reslist);
|
||||||
|
} else {
|
||||||
|
list.value = dataToImg(rows);
|
||||||
|
}
|
||||||
|
pageState.total = resData.total;
|
||||||
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
|
// 切换状态
|
||||||
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
|
if (rows.length < pageState.pageSize) {
|
||||||
|
loadmoreRef.value?.change('noMore');
|
||||||
|
} else {
|
||||||
|
loadmoreRef.value?.change('more');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function dataToImg(data) {
|
||||||
|
return data.map((item) => ({
|
||||||
|
...item,
|
||||||
|
image: img,
|
||||||
|
hide: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ loadData });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
// .maskFristEntry
|
||||||
|
// position: fixed;
|
||||||
|
// // right: 20rpx;
|
||||||
|
// // bottom: calc(50% - 200rpx);
|
||||||
|
// height: 100vh
|
||||||
|
// width: 100vw
|
||||||
|
// background: rgba(0,0,0,0.3)
|
||||||
|
// .entry-content
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center
|
||||||
|
// position: absolute
|
||||||
|
// left: 50%
|
||||||
|
// top: 40%
|
||||||
|
// transform: translate(-50%, -50%)
|
||||||
|
// flex-direction: column
|
||||||
|
// background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
// width: 480rpx
|
||||||
|
// height: 584rpx
|
||||||
|
// // padding-left: 80rpx
|
||||||
|
// .text1
|
||||||
|
// margin-top: 370rpx
|
||||||
|
// font-size: 36rpx
|
||||||
|
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||||
|
// -webkit-background-clip: text;
|
||||||
|
// -webkit-text-fill-color: transparent;
|
||||||
|
// background-clip: text; /* 有些浏览器兼容用 */
|
||||||
|
// text-fill-color: transparent;
|
||||||
|
// padding-left: 28rpx
|
||||||
|
// .text2
|
||||||
|
// padding-left: 28rpx
|
||||||
|
// margin-top: 8rpx
|
||||||
|
// font-size: 20rpx;
|
||||||
|
// color: #666666;
|
||||||
|
// text-align: center;
|
||||||
|
// .indicateArrow
|
||||||
|
// height: 76rpx
|
||||||
|
// width: 68rpx
|
||||||
|
// .indicatefristEntry
|
||||||
|
// width: 244rpx
|
||||||
|
// height: 244rpx
|
||||||
|
// .goExperience
|
||||||
|
// margin-left: 28rpx
|
||||||
|
// margin-top: 28rpx
|
||||||
|
// width: 160rpx;
|
||||||
|
// height: 60rpx;
|
||||||
|
// background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
|
||||||
|
// border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
// font-size: 28rpx;
|
||||||
|
// color: #FFFFFF;
|
||||||
|
// text-align: center;
|
||||||
|
// line-height: 60rpx
|
||||||
|
// .maskFristEntry-Close
|
||||||
|
// position: absolute;
|
||||||
|
// left: calc(50% - 10rpx);
|
||||||
|
// bottom: -130rpx
|
||||||
|
// width: 42rpx
|
||||||
|
// height: 42rpx
|
||||||
|
// background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||||
|
// border-radius: 50%;
|
||||||
|
// .maskFristEntry-Close::before
|
||||||
|
// position: absolute;
|
||||||
|
// left: calc( 50% - 2rpx)
|
||||||
|
// top: calc( 50% - 10rpx)
|
||||||
|
// transform: rotate(45deg);
|
||||||
|
// content: ''
|
||||||
|
// background: #FFFFFF
|
||||||
|
// width: 4rpx
|
||||||
|
// height: 20rpx
|
||||||
|
// .maskFristEntry-Close::after
|
||||||
|
// position: absolute;
|
||||||
|
// left: calc( 50% - 2rpx)
|
||||||
|
// top: calc( 50% - 10rpx)
|
||||||
|
// transform: rotate(-45deg);
|
||||||
|
// content: ''
|
||||||
|
// background: #FFFFFF
|
||||||
|
// width: 4rpx
|
||||||
|
// height: 20rpx
|
||||||
|
|
||||||
|
|
||||||
|
.app-container
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
|
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||||
|
background-size: 100% 728rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column
|
||||||
|
.hidden-animation
|
||||||
|
max-height: 1000px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
.hidden-height
|
||||||
|
max-height: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
.container-search
|
||||||
|
padding: 16rpx 24rpx
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between
|
||||||
|
.search-input
|
||||||
|
display: flex
|
||||||
|
align-items: center;
|
||||||
|
width: 100%
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx
|
||||||
|
// margin-right: 24rpx
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||||||
|
.iconsearch
|
||||||
|
padding-left: 36rpx
|
||||||
|
.inpute
|
||||||
|
margin-left: 20rpx
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #B5B5B5;
|
||||||
|
width: 100%
|
||||||
|
.chart
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
width: 170rpx;
|
||||||
|
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
|
||||||
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||||
|
border-radius: 80rpx 80rpx 80rpx 80rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
text-align: center
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
color: #000000;
|
||||||
|
padding: 20rpx 30rpx
|
||||||
|
.cards
|
||||||
|
padding: 10rpx 28rpx
|
||||||
|
display: grid
|
||||||
|
grid-gap: 38rpx;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
.card
|
||||||
|
height: calc(158rpx - 40rpx);
|
||||||
|
padding: 22rpx 26rpx
|
||||||
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
.card-title
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000000;
|
||||||
|
.card-text
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #9E9E9E;
|
||||||
|
margin-top: 4rpx
|
||||||
|
.card:first-child
|
||||||
|
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||||
|
url('@/static/icon/fujin.png');
|
||||||
|
background-size: 100%, 100%
|
||||||
|
.card:last-child
|
||||||
|
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
||||||
|
url('@/static/icon/jinxuan.png');
|
||||||
|
background-size: 100%, 100%
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
.nav-filter
|
||||||
|
padding: 16rpx 28rpx 0 28rpx
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
.filter-top
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between;
|
||||||
|
.tab-scroll
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 20rpx
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: clip;
|
||||||
|
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
||||||
|
mask-image: linear-gradient(to right, black 60%, transparent);
|
||||||
|
.jobs-left
|
||||||
|
display: flex
|
||||||
|
flex-wrap: nowrap
|
||||||
|
.job
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
margin-right: 32rpx;
|
||||||
|
white-space: nowrap
|
||||||
|
.active
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #000000;
|
||||||
|
.jobs-add
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
display: flex
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
line-height: 38rpx;
|
||||||
|
.filter-bottom
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between
|
||||||
|
padding: 24rpx 0
|
||||||
|
.btm-left
|
||||||
|
display: flex
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
.filterbtm
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
margin-right: 24rpx
|
||||||
|
padding: 0rpx 16rpx
|
||||||
|
.active
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #256BFA;
|
||||||
|
.btm-right
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
.right-sx
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
.active
|
||||||
|
transform: rotate(180deg)
|
||||||
|
.table-list
|
||||||
|
background: #F4F4F4
|
||||||
|
flex: 1
|
||||||
|
overflow: hidden
|
||||||
|
.falls-scroll
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
.falls
|
||||||
|
padding: 28rpx 28rpx;
|
||||||
|
.item
|
||||||
|
position: relative;
|
||||||
|
// background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
|
||||||
|
.falls-card
|
||||||
|
padding: 30rpx;
|
||||||
|
.falls-card-title
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
color: #606060;
|
||||||
|
text-align: left;
|
||||||
|
word-break:break-all
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 10rpx
|
||||||
|
.falls-card-pay
|
||||||
|
// height: 50rpx;
|
||||||
|
word-break:break-all
|
||||||
|
color: #002979;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
position: relative
|
||||||
|
.pay-text
|
||||||
|
font-family: DIN-Medium;
|
||||||
|
color: #4C6EFB;
|
||||||
|
padding-right: 10rpx
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #4C6EFB;
|
||||||
|
line-height: 45rpx;
|
||||||
|
text-align: left;
|
||||||
|
.flame
|
||||||
|
position: absolute
|
||||||
|
bottom: 0
|
||||||
|
right: -10rpx
|
||||||
|
transform: translate(0, -30%)
|
||||||
|
width: 24rpx
|
||||||
|
height: 31rpx
|
||||||
|
.falls-card-education,.falls-card-experience
|
||||||
|
width: fit-content;
|
||||||
|
height: 30rpx;
|
||||||
|
background: #F4F4F4;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
padding: 6rpx 20rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
.falls-card-company,.falls-card-pepleNumber
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 25rpx;
|
||||||
|
text-align: left;
|
||||||
|
.falls-card-pepleNumber
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 46rpx
|
||||||
|
view
|
||||||
|
display:flex
|
||||||
|
align-items: center
|
||||||
|
white-space: nowrap;
|
||||||
|
.point2
|
||||||
|
margin: 0rpx 6rpx 0 2rpx
|
||||||
|
height: 22rpx
|
||||||
|
width: 22rpx
|
||||||
|
.point3
|
||||||
|
margin: 0rpx 4rpx 0 0
|
||||||
|
height: 28rpx
|
||||||
|
width: 28rpx
|
||||||
|
.falls-card-matchingrate
|
||||||
|
margin-top: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 21rpx;
|
||||||
|
color: #4778EC;
|
||||||
|
text-align: left;
|
||||||
|
.falls-card-company2
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: left;
|
||||||
|
display: flex
|
||||||
|
.point3
|
||||||
|
margin: 4rpx 4rpx 0 0
|
||||||
|
height: 26rpx
|
||||||
|
width: 26rpx
|
||||||
|
// 推荐卡片
|
||||||
|
.recommend-card::before
|
||||||
|
position: absolute
|
||||||
|
left: 0
|
||||||
|
top: 0
|
||||||
|
content: ''
|
||||||
|
height: 60rpx
|
||||||
|
width: 100%
|
||||||
|
height: 8rpx;
|
||||||
|
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
|
||||||
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,54,170,0.15);
|
||||||
|
.recommend-card::after
|
||||||
|
content ''
|
||||||
|
position absolute
|
||||||
|
z-index 0
|
||||||
|
left 50%
|
||||||
|
top 40%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
width 250rpx
|
||||||
|
height 250rpx
|
||||||
|
background url('@/static/icon/backAI.png') no-repeat center center
|
||||||
|
opacity 0.6
|
||||||
|
background-size contain
|
||||||
|
pointer-events none
|
||||||
|
filter: blur(3rpx)
|
||||||
|
.recommend-card
|
||||||
|
padding 36rpx 24rpx
|
||||||
|
background: linear-gradient( 360deg, #DFE9FF 0%, #FFFFFF 52%, #FFFFFF 100%);
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
position relative
|
||||||
|
box-shadow 0rpx 4rpx 8rpx 0rpx rgba(72, 89, 123, 0.3)
|
||||||
|
.card-content
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
.recommend-card-title
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
.recommend-card-tip
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
margin-top: 28rpx
|
||||||
|
.recommend-card-line
|
||||||
|
width: calc(100%);
|
||||||
|
height: 0rpx;
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
border: 2rpx dashed rgba(0,0,0,0.14);
|
||||||
|
margin-top: 50rpx
|
||||||
|
position: relative
|
||||||
|
// .recommend-card-line::before
|
||||||
|
// position: absolute
|
||||||
|
// content: ''
|
||||||
|
// left: 0
|
||||||
|
// top: 0
|
||||||
|
// transform: translate(-50% - 90rpx, -50%)
|
||||||
|
// width: 28rpx;
|
||||||
|
// height: 28rpx;
|
||||||
|
// background: #F4F4F4;
|
||||||
|
// border-radius: 50%;
|
||||||
|
// .recommend-card-line::after
|
||||||
|
// position: absolute
|
||||||
|
// content: ''
|
||||||
|
// right: 0
|
||||||
|
// top: 0
|
||||||
|
// transform: translate(50% + 90rpx, -50%)
|
||||||
|
// width: 28rpx;
|
||||||
|
// height: 28rpx;
|
||||||
|
// background: #F4F4F4;
|
||||||
|
// border-radius: 50%;
|
||||||
|
.recommend-card-controll
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: space-between
|
||||||
|
margin-top: 40rpx
|
||||||
|
padding: 0 6rpx;
|
||||||
|
.controll-yes
|
||||||
|
width: 124rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: rgba(37,107,250,0.1);
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60rpx
|
||||||
|
color: #256BFA
|
||||||
|
.controll-no
|
||||||
|
width: 124rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
border: 2rpx solid #DEDEDE;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
.controll-yes:active, .controll-no:active
|
||||||
|
width: 120rpx;
|
||||||
|
height: 66rpx;
|
||||||
|
line-height: 66rpx
|
||||||
|
background: #e8e8e8
|
||||||
|
border: 2rpx solid #e8e8e8
|
||||||
|
.isBut{
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
333
pages/index/components/index-two.vue
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
<template>
|
||||||
|
<view class="app-container">
|
||||||
|
<view class="nav-filter">
|
||||||
|
<view class="filter-top" @touchmove.stop.prevent>
|
||||||
|
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
||||||
|
<view class="jobs-left">
|
||||||
|
<view
|
||||||
|
class="job button-click"
|
||||||
|
:class="{ active: state.tabIndex === 'all' }"
|
||||||
|
@click="choosePosition('all')"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="job button-click"
|
||||||
|
:class="{ active: state.tabIndex === index }"
|
||||||
|
v-for="(item, index) in userInfo.jobTitle"
|
||||||
|
:key="index"
|
||||||
|
@click="choosePosition(index)"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="jobs-add button-click" @click="navTo('/pages/search/search')">
|
||||||
|
<uni-icons class="iconsearch" color="#666D7F" type="search" size="18"></uni-icons>
|
||||||
|
<text>搜索</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cards">
|
||||||
|
<scroll-view :scroll-y="true" class="tab-scroll" @scrolltolower="scrollBottom">
|
||||||
|
<view class="scroll-content">
|
||||||
|
<custom-waterfalls-flow
|
||||||
|
ref="waterfallsFlowRef"
|
||||||
|
:column="columnCount"
|
||||||
|
:columnSpace="columnSpace"
|
||||||
|
@loaded="imageloaded"
|
||||||
|
:value="list"
|
||||||
|
>
|
||||||
|
<template v-slot:default="job">
|
||||||
|
<view class="slot-item">
|
||||||
|
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||||
|
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||||
|
<view class="cover-triangle"></view>
|
||||||
|
</view>
|
||||||
|
<view class="job-info" @click="nextDetail(job)">
|
||||||
|
<view class="salary">
|
||||||
|
<Salary-Expectation
|
||||||
|
:max-salary="job.maxSalary"
|
||||||
|
:min-salary="job.minSalary"
|
||||||
|
:is-month="true"
|
||||||
|
></Salary-Expectation>
|
||||||
|
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="title">{{ job.jobTitle }}</view>
|
||||||
|
<view class="desc">
|
||||||
|
<image class="point3" src="/static/icon/point3.png"></image>
|
||||||
|
<!-- <uni-icons type="location" size="14"></uni-icons> -->
|
||||||
|
<view class="descText">{{ job.companyName }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</custom-waterfalls-flow>
|
||||||
|
<loadmore ref="loadmoreRef"></loadmore>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
||||||
|
import { usePagination } from '@/hook/usePagination';
|
||||||
|
const { $api, navTo } = inject('globalFunction');
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import useUserStore from '@/stores/useUserStore';
|
||||||
|
import img from '@/static/icon/filter.png';
|
||||||
|
import useLocationStore from '@/stores/useLocationStore';
|
||||||
|
import { useColumnCount } from '@/hook/useColumnCount';
|
||||||
|
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
||||||
|
const recommedIndexDb = useRecommedIndexedDBStore();
|
||||||
|
// status
|
||||||
|
const { userInfo } = storeToRefs(useUserStore());
|
||||||
|
const isLoaded = ref(false);
|
||||||
|
const waterfallsFlowRef = ref(null);
|
||||||
|
const loadmoreRef = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
tabIndex: 'all',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 响应式搜索条件(可以被修改)
|
||||||
|
const searchParams = ref({});
|
||||||
|
const pageSize = ref(10);
|
||||||
|
const { list, loading, refresh, loadMore } = usePagination(
|
||||||
|
(params) => $api.createRequest('/app/job/littleVideo', params),
|
||||||
|
dataToImg, // 转换函数
|
||||||
|
{
|
||||||
|
pageSize: pageSize,
|
||||||
|
search: searchParams,
|
||||||
|
dataKey: 'data',
|
||||||
|
onBeforeRequest: () => {
|
||||||
|
loadmoreRef.value?.change('loading');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function imageloaded() {
|
||||||
|
loadmoreRef.value?.change('more');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||||
|
pageSize.value = 10 * (columnCount.value - 1);
|
||||||
|
nextTick(() => {
|
||||||
|
waterfallsFlowRef.value?.refresh?.();
|
||||||
|
useLocationStore().getLocation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
try {
|
||||||
|
if (isLoaded.value) return;
|
||||||
|
isLoaded.value = true;
|
||||||
|
refresh();
|
||||||
|
} catch (err) {
|
||||||
|
isLoaded.value = false; // 重置状态允许重试
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function choosePosition(index) {
|
||||||
|
state.tabIndex = index;
|
||||||
|
if (index === 'all') {
|
||||||
|
searchParams.value.jobTitle = '';
|
||||||
|
} else {
|
||||||
|
searchParams.value.jobTitle = userInfo.value.jobTitle[index];
|
||||||
|
}
|
||||||
|
console.log(searchParams.value);
|
||||||
|
refresh('refresh');
|
||||||
|
waterfallsFlowRef.value.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollBottom() {
|
||||||
|
loadMore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextDetail(job) {
|
||||||
|
// 记录岗位类型,用作数据分析
|
||||||
|
if (job.jobCategory) {
|
||||||
|
const recordData = recommedIndexDb.JobParameter(job);
|
||||||
|
recommedIndexDb.addRecord(recordData);
|
||||||
|
}
|
||||||
|
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextVideo(job) {
|
||||||
|
uni.setStorageSync(`job-Info`, job);
|
||||||
|
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dataToImg(data) {
|
||||||
|
return data.map((item) => ({
|
||||||
|
...item,
|
||||||
|
// image: item.cover,
|
||||||
|
image: img,
|
||||||
|
hide: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ loadData });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.app-container
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
|
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||||
|
background-size: 100% 728rpx;
|
||||||
|
// background-color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column
|
||||||
|
.cards
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
.tab-scroll
|
||||||
|
height: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: clip;
|
||||||
|
.scroll-content{
|
||||||
|
padding: 24rpx
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-filter
|
||||||
|
padding: 16rpx 28rpx 30rpx 28rpx
|
||||||
|
.filter-top
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between;
|
||||||
|
.tab-scroll
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 20rpx
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: clip;
|
||||||
|
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
||||||
|
mask-image: linear-gradient(to right, black 60%, transparent);
|
||||||
|
.jobs-left
|
||||||
|
display: flex
|
||||||
|
flex-wrap: nowrap
|
||||||
|
align-items: center
|
||||||
|
.job
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
margin-right: 32rpx;
|
||||||
|
white-space: nowrap
|
||||||
|
.active
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #000000;
|
||||||
|
.jobs-add
|
||||||
|
display: flex
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
line-height: 38rpx;
|
||||||
|
.iconsearch
|
||||||
|
margin-right: 6rpx
|
||||||
|
.filter-bottom
|
||||||
|
display: flex
|
||||||
|
justify-content: space-between
|
||||||
|
padding: 24rpx 0
|
||||||
|
.btm-left
|
||||||
|
display: flex
|
||||||
|
.filterbtm
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666D7F;
|
||||||
|
margin-right: 24rpx
|
||||||
|
padding: 0rpx 16rpx
|
||||||
|
.active
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #256BFA;
|
||||||
|
.btm-right
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
.right-sx
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
.active
|
||||||
|
transform: rotate(180deg)
|
||||||
|
|
||||||
|
.slot-item
|
||||||
|
background: #f4f4f4;
|
||||||
|
// background: #f6f8fa;
|
||||||
|
.job-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 280rpx;
|
||||||
|
position: relative;
|
||||||
|
.cover-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.cover-triangle{
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx
|
||||||
|
width: 36rpx
|
||||||
|
height: 36rpx
|
||||||
|
border-radius: 50%
|
||||||
|
background: rgba(0,0,0,0.3)
|
||||||
|
}
|
||||||
|
.cover-triangle::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-40%, -50%) rotate(90deg);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 8rpx solid transparent;
|
||||||
|
border-right: 8rpx solid transparent;
|
||||||
|
border-bottom: 12rpx solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.job-info{
|
||||||
|
padding: 10rpx 10rpx 24rpx 24rpx
|
||||||
|
}
|
||||||
|
.salary
|
||||||
|
color: #4C6EFB;
|
||||||
|
font-size: 28rpx
|
||||||
|
display: flex
|
||||||
|
align-items: flex-start
|
||||||
|
justify-content: space-between
|
||||||
|
font-family: DIN-Medium;
|
||||||
|
.flame
|
||||||
|
margin-top: 4rpx
|
||||||
|
margin-right: 4rpx
|
||||||
|
width: 24rpx
|
||||||
|
height: 31rpx
|
||||||
|
.title
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
white-space: pre-wrap
|
||||||
|
.desc
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
display: flex
|
||||||
|
align-items: flex-start
|
||||||
|
.descText{
|
||||||
|
flex: 1
|
||||||
|
white-space: pre-wrap
|
||||||
|
}
|
||||||
|
.point3{
|
||||||
|
margin: 4rpx 4rpx 0 0
|
||||||
|
height: 26rpx
|
||||||
|
width: 26rpx
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,734 +1,284 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="app-container">
|
<view class="app-custom-root">
|
||||||
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
|
<view class="app-container">
|
||||||
<view class="container-search">
|
<!-- 主体内容区域 -->
|
||||||
<view class="search-input button-click" @click="navTo('/pages/search/search')">
|
<view class="container-main">
|
||||||
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
|
||||||
<text class="inpute">职位名称、薪资要求等</text>
|
<swiper-item class="swiper-item" v-for="(_, index) in 2" :key="index">
|
||||||
</view>
|
<!-- #ifndef MP-WEIXIN -->
|
||||||
<view class="chart button-click">职业图谱</view>
|
<component
|
||||||
|
:is="components[index]"
|
||||||
|
@onShowTabbar="changeShowTabbar"
|
||||||
|
:ref="(el) => handelComponentsRef(el, index)"
|
||||||
|
/>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<IndexOne
|
||||||
|
v-show="currentIndex === 0"
|
||||||
|
@onShowTabbar="changeShowTabbar"
|
||||||
|
:ref="(el) => handelComponentsRef(el, index)"
|
||||||
|
/>
|
||||||
|
<IndexTwo
|
||||||
|
v-show="currentIndex === 1"
|
||||||
|
@onShowTabbar="changeShowTabbar"
|
||||||
|
:ref="(el) => handelComponentsRef(el, index)"
|
||||||
|
/>
|
||||||
|
<!-- #endif -->
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
<view class="cards">
|
|
||||||
<view class="card btn-feel" @click="navTo('/pages/nearby/nearby')">
|
<Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
|
||||||
<view class="card-title">附近工作</view>
|
|
||||||
<view class="card-text">好岗职等你来</view>
|
<!-- maskFristEntry -->
|
||||||
</view>
|
<view class="maskFristEntry" v-if="maskFristEntry">
|
||||||
<view class="card btn-feel" @click="navTo('/packageA/pages/choiceness/choiceness')">
|
<view class="entry-content">
|
||||||
<view class="card-title">精选企业</view>
|
<text class="text1">左滑查看视频</text>
|
||||||
<view class="card-text">优选职得信赖</view>
|
<text class="text2">快去体验吧~</text>
|
||||||
|
<view class="goExperience" @click="goExperience">去体验</view>
|
||||||
|
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav-filter">
|
|
||||||
<view class="filter-top">
|
|
||||||
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
|
||||||
<view class="jobs-left">
|
|
||||||
<view
|
|
||||||
class="job button-click"
|
|
||||||
:class="{ active: state.tabIndex === 'all' }"
|
|
||||||
@click="choosePosition('all')"
|
|
||||||
>
|
|
||||||
全部
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="job button-click"
|
|
||||||
:class="{ active: state.tabIndex === index }"
|
|
||||||
v-for="(item, index) in userInfo.jobTitle"
|
|
||||||
:key="index"
|
|
||||||
@click="choosePosition(index)"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
|
|
||||||
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
|
|
||||||
<text>添加</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="filter-bottom">
|
|
||||||
<view class="btm-left">
|
|
||||||
<view
|
|
||||||
class="button-click filterbtm"
|
|
||||||
:class="{ active: pageState.search.order === item.value }"
|
|
||||||
v-for="item in rangeOptions"
|
|
||||||
@click="handelHostestSearch(item)"
|
|
||||||
:key="item.value"
|
|
||||||
>
|
|
||||||
{{ item.text }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="btm-right button-click" @click="openFilter">
|
|
||||||
筛选
|
|
||||||
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="table-list">
|
|
||||||
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
|
|
||||||
<view class="falls" v-if="list.length">
|
|
||||||
<custom-waterfalls-flow
|
|
||||||
:column="columnCount"
|
|
||||||
:columnSpace="columnSpace"
|
|
||||||
ref="waterfallsFlowRef"
|
|
||||||
:value="list"
|
|
||||||
>
|
|
||||||
<template v-slot:default="job">
|
|
||||||
<view class="item btn-feel" v-if="!job.recommend">
|
|
||||||
<view class="falls-card" @click="nextDetail(job)">
|
|
||||||
<view class="falls-card-pay">
|
|
||||||
<view class="pay-text">
|
|
||||||
<Salary-Expectation
|
|
||||||
:max-salary="job.maxSalary"
|
|
||||||
:min-salary="job.minSalary"
|
|
||||||
:is-month="true"
|
|
||||||
></Salary-Expectation>
|
|
||||||
</view>
|
|
||||||
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
|
||||||
</view>
|
|
||||||
<view class="falls-card-title">{{ job.jobTitle }}</view>
|
|
||||||
<view class="fl_box fl_warp">
|
|
||||||
<view class="falls-card-education mar_ri10" v-if="job.education">
|
|
||||||
<dict-Label dictType="education" :value="job.education"></dict-Label>
|
|
||||||
</view>
|
|
||||||
<view class="falls-card-experience" v-if="job.experience">
|
|
||||||
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="falls-card-company">{{ job.companyName }}</view>
|
|
||||||
<view class="falls-card-company">
|
|
||||||
青岛
|
|
||||||
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
|
|
||||||
</view>
|
|
||||||
<view class="falls-card-pepleNumber">
|
|
||||||
<view>{{ job.postingDate || '发布日期' }}</view>
|
|
||||||
<view>{{ vacanciesTo(job.vacancies) }}</view>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="falls-card-matchingrate">
|
|
||||||
<view class=""><matchingDegree :job="job"></matchingDegree></view>
|
|
||||||
<uni-icons type="star" size="30"></uni-icons>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="item" :class="{ isBut: job.isBut }" v-else>
|
|
||||||
<view class="recommend-card">
|
|
||||||
<view class="card-content">
|
|
||||||
<view class="recommend-card-title">在找「{{ job.jobCategory }}」工作吗?</view>
|
|
||||||
<view class="recommend-card-tip">{{ job.tip }}</view>
|
|
||||||
<view class="recommend-card-line"></view>
|
|
||||||
<view class="recommend-card-controll">
|
|
||||||
<view class="controll-no" @click="clearfindJob(job)">不是</view>
|
|
||||||
<view class="controll-yes" @click="findJob(job)">是的</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</custom-waterfalls-flow>
|
|
||||||
<loadmore ref="loadmoreRef"></loadmore>
|
|
||||||
</view>
|
|
||||||
<empty v-else pdTop="200"></empty>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
<!-- 筛选 -->
|
|
||||||
<select-filter ref="selectFilterModel"></select-filter>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||||
import img from '@/static/icon/filter.png';
|
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
|
||||||
const { $api, navTo, vacanciesTo, formatTotal } = inject('globalFunction');
|
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
|
import IndexOne from './components/index-one.vue';
|
||||||
|
import IndexTwo from './components/index-two.vue';
|
||||||
|
const loadedMap = reactive([false, false]);
|
||||||
|
const swiperRefs = [ref(null), ref(null)];
|
||||||
|
const components = [IndexOne, IndexTwo];
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import useUserStore from '@/stores/useUserStore';
|
import { useReadMsg } from '@/stores/useReadMsg';
|
||||||
const { userInfo } = storeToRefs(useUserStore());
|
const { unreadCount } = storeToRefs(useReadMsg());
|
||||||
import useDictStore from '@/stores/useDictStore';
|
const showTabbar = ref(true);
|
||||||
const { getTransformChildren, oneDictData } = useDictStore();
|
const maskFristEntry = ref(false);
|
||||||
import useLocationStore from '@/stores/useLocationStore';
|
|
||||||
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
onLoad(() => {
|
||||||
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
|
// 判断浏览器是否有 fristEntry 第一次进入
|
||||||
import { useScrollDirection } from '@/hook/useScrollDirection';
|
let fristEntry = uni.getStorageSync('fristEntry') === false ? false : true; // 默认未读
|
||||||
import { useColumnCount } from '@/hook/useColumnCount';
|
maskFristEntry.value = fristEntry;
|
||||||
const { isScrollingDown, handleScroll } = useScrollDirection();
|
// maskFristEntry.value = true;
|
||||||
const recommedIndexDb = useRecommedIndexedDBStore();
|
});
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
// 获取消息列表
|
||||||
|
useReadMsg().fetchMessages();
|
||||||
|
});
|
||||||
|
|
||||||
const waterfallsFlowRef = ref(null);
|
|
||||||
const loadmoreRef = ref(null);
|
|
||||||
const conditionSearch = ref({});
|
|
||||||
const waterfallcolumn = ref(2);
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
tabIndex: 'all',
|
current: 0,
|
||||||
});
|
all: [{}],
|
||||||
const list = ref([]);
|
|
||||||
const pageState = reactive({
|
|
||||||
page: 0,
|
|
||||||
total: 0,
|
|
||||||
maxPage: 2,
|
|
||||||
pageSize: 10,
|
|
||||||
search: {
|
|
||||||
order: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const inputText = ref('');
|
|
||||||
const showFilter = ref(false);
|
|
||||||
const selectFilterModel = ref(null);
|
|
||||||
const showModel = ref(false);
|
|
||||||
const rangeOptions = ref([
|
|
||||||
{ value: 0, text: '推荐' },
|
|
||||||
{ value: 1, text: '最热' },
|
|
||||||
{ value: 2, text: '最新发布' },
|
|
||||||
]);
|
|
||||||
// const jobList = ref([
|
|
||||||
// { name: '销售顾问', highlight: true },
|
|
||||||
// { name: '销售管理', highlight: true },
|
|
||||||
// { name: '销售工程师', highlight: true },
|
|
||||||
// { name: '算法工程师', highlight: false },
|
|
||||||
// { name: '生产经理', highlight: false },
|
|
||||||
// { name: '市场策划', highlight: false },
|
|
||||||
// { name: '商务服务', highlight: false },
|
|
||||||
// { name: '客服', highlight: false },
|
|
||||||
// { name: '创意总监', highlight: false },
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
const { columnCount, columnSpace } = useColumnCount(() => {
|
|
||||||
pageState.pageSize = 10 * (columnCount.value - 1);
|
|
||||||
getJobRecommend('refresh');
|
|
||||||
nextTick(() => {
|
|
||||||
waterfallsFlowRef.value?.refresh?.();
|
|
||||||
useLocationStore().getLocation();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// onLoad(() => {
|
onMounted(() => {
|
||||||
// getJobRecommend('refresh');
|
handleTabChange(state.current);
|
||||||
// });
|
});
|
||||||
|
|
||||||
function scrollBottom() {
|
const handelComponentsRef = (el, index) => {
|
||||||
loadmoreRef.value.change('loading');
|
if (el) {
|
||||||
if (state.tabIndex === 'all') {
|
swiperRefs[index].value = el;
|
||||||
getJobRecommend();
|
}
|
||||||
} else {
|
};
|
||||||
getJobList();
|
|
||||||
|
function changeShowTabbar(val) {
|
||||||
|
showTabbar.value = val;
|
||||||
|
}
|
||||||
|
|
||||||
|
//1 查看消息类型
|
||||||
|
function changeSwiperType(e) {
|
||||||
|
const index = e.detail.current;
|
||||||
|
state.current = index;
|
||||||
|
handleTabChange(index);
|
||||||
|
}
|
||||||
|
function changeType(index) {
|
||||||
|
state.current = index;
|
||||||
|
handleTabChange(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTabChange(index) {
|
||||||
|
if (!loadedMap[index]) {
|
||||||
|
swiperRefs[index].value?.loadData();
|
||||||
|
loadedMap[index] = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function findJob(job) {
|
function changeSwiperMsgType(e) {
|
||||||
if (job.isBut) {
|
const currented = e.detail.current;
|
||||||
$api.msg('已确认');
|
state.current = currented;
|
||||||
} else {
|
}
|
||||||
list.value = list.value.map((item) => {
|
// mask
|
||||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
function closeFristEntry() {
|
||||||
return {
|
uni.setStorageSync('fristEntry', false);
|
||||||
...item,
|
maskFristEntry.value = false;
|
||||||
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) {
|
function goExperience() {
|
||||||
if (job.isBut) {
|
closeFristEntry();
|
||||||
$api.msg('已确认');
|
state.current = 1;
|
||||||
} else {
|
|
||||||
list.value = list.value.map((item) => {
|
|
||||||
if (item.recommend && item.jobCategory === job.jobCategory) {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
isBut: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
recommedIndexDb.deleteRecords(job);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextDetail(job) {
|
|
||||||
// 记录岗位类型,用作数据分析
|
|
||||||
if (job.jobCategory) {
|
|
||||||
const recordData = recommedIndexDb.JobParameter(job);
|
|
||||||
recommedIndexDb.addRecord(recordData);
|
|
||||||
}
|
|
||||||
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function openFilter() {
|
|
||||||
showFilter.value = true;
|
|
||||||
selectFilterModel.value?.open({
|
|
||||||
title: '筛选',
|
|
||||||
maskClick: true,
|
|
||||||
success: (values) => {
|
|
||||||
pageState.search = {
|
|
||||||
...pageState.search,
|
|
||||||
};
|
|
||||||
for (const [key, value] of Object.entries(values)) {
|
|
||||||
pageState.search[key] = value.join(',');
|
|
||||||
}
|
|
||||||
showFilter.value = false;
|
|
||||||
getJobList('refresh');
|
|
||||||
},
|
|
||||||
cancel: () => {
|
|
||||||
showFilter.value = false;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleFilterConfirm(e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
function choosePosition(index) {
|
|
||||||
state.tabIndex = index;
|
|
||||||
list.value = [];
|
|
||||||
if (index === 'all') {
|
|
||||||
pageState.search = {
|
|
||||||
order: pageState.search.order,
|
|
||||||
};
|
|
||||||
inputText.value = '';
|
|
||||||
getJobRecommend('refresh');
|
|
||||||
} else {
|
|
||||||
// const id = useUserStore().userInfo.jobTitleId.split(',')[index];
|
|
||||||
pageState.search.jobTitle = userInfo.value.jobTitle[index];
|
|
||||||
inputText.value = '';
|
|
||||||
getJobList('refresh');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handelHostestSearch(val) {
|
|
||||||
pageState.search.order = val.value;
|
|
||||||
if (state.tabIndex === 'all') {
|
|
||||||
getJobRecommend('refresh');
|
|
||||||
} else {
|
|
||||||
getJobList('refresh');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getJobRecommend(type = 'add') {
|
|
||||||
if (type === 'refresh') {
|
|
||||||
list.value = [];
|
|
||||||
if (waterfallsFlowRef.value) waterfallsFlowRef.value.refresh();
|
|
||||||
}
|
|
||||||
let params = {
|
|
||||||
pageSize: pageState.pageSize,
|
|
||||||
sessionId: useUserStore().seesionId,
|
|
||||||
...pageState.search,
|
|
||||||
...conditionSearch.value,
|
|
||||||
};
|
|
||||||
let comd = { recommend: true, jobCategory: '', tip: '确认你的兴趣,为您推荐更多合适的岗位' };
|
|
||||||
$api.createRequest('/app/job/recommend', params).then((resData) => {
|
|
||||||
const { data, total } = resData;
|
|
||||||
pageState.total = 0;
|
|
||||||
if (type === 'add') {
|
|
||||||
// 记录系统
|
|
||||||
recommedIndexDb.getRecord().then((res) => {
|
|
||||||
if (res.length) {
|
|
||||||
// 数据分析系统
|
|
||||||
const resultData = recommedIndexDb.analyzer(res);
|
|
||||||
const { sort, result } = resultData;
|
|
||||||
// 岗位询问系统
|
|
||||||
const conditionCounts = Object.fromEntries(
|
|
||||||
sort.filter((item) => item[1] > 1) // 过滤掉次数为 1 的项
|
|
||||||
);
|
|
||||||
jobRecommender.updateConditions(conditionCounts);
|
|
||||||
|
|
||||||
const question = jobRecommender.getNextQuestion();
|
|
||||||
|
|
||||||
if (question) {
|
|
||||||
comd.jobCategory = question;
|
|
||||||
data.unshift(comd);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const reslist = dataToImg(data);
|
|
||||||
list.value.push(...reslist);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
list.value = dataToImg(data);
|
|
||||||
}
|
|
||||||
// 切换状态
|
|
||||||
if (data.length < pageState.pageSize) {
|
|
||||||
loadmoreRef.value.change('noMore');
|
|
||||||
} else {
|
|
||||||
loadmoreRef.value.change('more');
|
|
||||||
}
|
|
||||||
// 当没有岗位,刷新sessionId重新啦
|
|
||||||
if (!data.length) {
|
|
||||||
useUserStore().initSeesionId();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getJobList(type = 'add') {
|
|
||||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
|
||||||
pageState.page += 1;
|
|
||||||
}
|
|
||||||
if (type === 'refresh') {
|
|
||||||
list.value = [];
|
|
||||||
pageState.page = 1;
|
|
||||||
pageState.maxPage = 2;
|
|
||||||
waterfallsFlowRef.value.refresh();
|
|
||||||
}
|
|
||||||
let params = {
|
|
||||||
current: pageState.page,
|
|
||||||
pageSize: pageState.pageSize,
|
|
||||||
...pageState.search,
|
|
||||||
};
|
|
||||||
|
|
||||||
$api.createRequest('/app/job/list', params).then((resData) => {
|
|
||||||
const { rows, total } = resData;
|
|
||||||
if (type === 'add') {
|
|
||||||
const str = pageState.pageSize * (pageState.page - 1);
|
|
||||||
const end = list.value.length;
|
|
||||||
const reslist = dataToImg(rows);
|
|
||||||
list.value.splice(str, end, ...reslist);
|
|
||||||
} else {
|
|
||||||
list.value = dataToImg(rows);
|
|
||||||
}
|
|
||||||
pageState.total = resData.total;
|
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
|
||||||
if (rows.length < pageState.pageSize) {
|
|
||||||
loadmoreRef.value?.change('noMore');
|
|
||||||
} else {
|
|
||||||
loadmoreRef.value?.change('more');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dataToImg(data) {
|
|
||||||
return data.map((item) => ({
|
|
||||||
...item,
|
|
||||||
image: img,
|
|
||||||
hide: true,
|
|
||||||
}));
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.app-custom-root {
|
||||||
.app-container
|
position: fixed;
|
||||||
width: 100%;
|
z-index: 10;
|
||||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
width: 100vw;
|
||||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
height: calc(100% - var(--window-bottom));
|
||||||
background-size: 100% 728rpx;
|
overflow: hidden;
|
||||||
background-color: #FFFFFF;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column
|
|
||||||
.hidden-animation
|
|
||||||
max-height: 1000px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
overflow: hidden;
|
|
||||||
.hidden-height
|
|
||||||
max-height: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
.container-search
|
|
||||||
padding: 16rpx 24rpx
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between
|
|
||||||
.search-input
|
|
||||||
display: flex
|
|
||||||
align-items: center;
|
|
||||||
width: 100%
|
|
||||||
height: 80rpx;
|
|
||||||
line-height: 80rpx
|
|
||||||
margin-right: 24rpx
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
|
||||||
.iconsearch
|
|
||||||
padding-left: 36rpx
|
|
||||||
.inpute
|
|
||||||
margin-left: 20rpx
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #B5B5B5;
|
|
||||||
width: 100%
|
|
||||||
.chart
|
|
||||||
width: 170rpx;
|
|
||||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%);
|
|
||||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
|
||||||
border-radius: 80rpx 80rpx 80rpx 80rpx;
|
|
||||||
border: 2rpx solid #FFFFFF;
|
|
||||||
text-align: center
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
height: 36rpx;
|
|
||||||
color: #000000;
|
|
||||||
padding: 20rpx 30rpx
|
|
||||||
.cards
|
|
||||||
padding: 10rpx 28rpx
|
|
||||||
display: grid
|
|
||||||
grid-gap: 38rpx;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
.card
|
|
||||||
height: calc(158rpx - 40rpx);
|
|
||||||
padding: 22rpx 26rpx
|
|
||||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
|
|
||||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
||||||
border: 2rpx solid #FFFFFF;
|
|
||||||
.card-title
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #000000;
|
|
||||||
.card-text
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #9E9E9E;
|
|
||||||
margin-top: 4rpx
|
|
||||||
.card:first-child
|
|
||||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
|
||||||
url('@/static/icon/fujin.png');
|
|
||||||
background-size: 100%, 100%
|
|
||||||
.card:last-child
|
|
||||||
background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
|
|
||||||
url('@/static/icon/jinxuan.png');
|
|
||||||
background-size: 100%, 100%
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
.nav-filter
|
|
||||||
padding: 16rpx 28rpx 0 28rpx
|
|
||||||
.filter-top
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between;
|
|
||||||
.tab-scroll
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 20rpx
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: clip;
|
|
||||||
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
|
|
||||||
mask-image: linear-gradient(to right, black 60%, transparent);
|
|
||||||
.jobs-left
|
|
||||||
display: flex
|
|
||||||
flex-wrap: nowrap
|
|
||||||
.job
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #666D7F;
|
|
||||||
margin-right: 32rpx;
|
|
||||||
white-space: nowrap
|
|
||||||
.active
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #000000;
|
|
||||||
.jobs-add
|
|
||||||
display: flex
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #666D7F;
|
|
||||||
line-height: 38rpx;
|
|
||||||
.filter-bottom
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between
|
|
||||||
padding: 24rpx 0
|
|
||||||
.btm-left
|
|
||||||
display: flex
|
|
||||||
.filterbtm
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #666D7F;
|
|
||||||
margin-right: 24rpx
|
|
||||||
padding: 0rpx 16rpx
|
|
||||||
.active
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #256BFA;
|
|
||||||
.btm-right
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #6C7282;
|
|
||||||
.right-sx
|
|
||||||
width: 26rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
.active
|
|
||||||
transform: rotate(180deg)
|
|
||||||
.table-list
|
|
||||||
background: #F4F4F4
|
|
||||||
flex: 1
|
|
||||||
overflow: hidden
|
|
||||||
.falls-scroll
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
.falls
|
|
||||||
padding: 28rpx 28rpx;
|
|
||||||
.item
|
|
||||||
position: relative;
|
|
||||||
// background: linear-gradient( 180deg, rgba(19, 197, 124, 0.4) 0%, rgba(255, 255, 255, 0) 30%), rgba(255, 255, 255, 0);
|
|
||||||
.falls-card
|
|
||||||
padding: 30rpx;
|
|
||||||
.falls-card-title
|
|
||||||
color: #606060;
|
|
||||||
line-height: 49rpx;
|
|
||||||
text-align: left;
|
|
||||||
word-break:break-all
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
.falls-card-pay
|
|
||||||
// height: 50rpx;
|
|
||||||
word-break:break-all
|
|
||||||
color: #002979;
|
|
||||||
text-align: left;
|
|
||||||
display: flex;
|
|
||||||
align-items: end;
|
|
||||||
position: relative
|
|
||||||
.pay-text
|
|
||||||
color: #4C6EFB;
|
|
||||||
padding-right: 10rpx
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #4C6EFB;
|
|
||||||
line-height: 45rpx;
|
|
||||||
text-align: left;
|
|
||||||
.flame
|
|
||||||
position: absolute
|
|
||||||
bottom: 0
|
|
||||||
right: -10rpx
|
|
||||||
transform: translate(0, -30%)
|
|
||||||
width: 24rpx
|
|
||||||
height: 31rpx
|
|
||||||
.falls-card-education,.falls-card-experience
|
|
||||||
width: fit-content;
|
|
||||||
height: 30rpx;
|
|
||||||
background: #F4F4F4;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
padding: 6rpx 20rpx;
|
|
||||||
line-height: 30rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #6C7282;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 14rpx;
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
.falls-card-company,.falls-card-pepleNumber
|
|
||||||
margin-top: 20rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #606060;
|
|
||||||
line-height: 25rpx;
|
|
||||||
text-align: left;
|
|
||||||
.falls-card-pepleNumber
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 38rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #6C7282;
|
|
||||||
.falls-card-matchingrate
|
|
||||||
margin-top: 10rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 21rpx;
|
|
||||||
color: #4778EC;
|
|
||||||
text-align: left;
|
|
||||||
// 推荐卡片
|
|
||||||
.recommend-card::before
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
top: 0
|
|
||||||
content: ''
|
|
||||||
height: 60rpx
|
|
||||||
width: 100%
|
|
||||||
height: 8rpx;
|
|
||||||
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
|
|
||||||
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0,54,170,0.15);
|
|
||||||
.recommend-card
|
|
||||||
padding: 24rpx
|
|
||||||
.card-content
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
.recommend-card-title
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
.recommend-card-tip
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #6C7282;
|
|
||||||
margin-top: 20rpx
|
|
||||||
.recommend-card-line
|
|
||||||
width: calc(100%);
|
|
||||||
height: 0rpx;
|
|
||||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
||||||
border: 2rpx dashed rgba(0,0,0,0.14);
|
|
||||||
margin-top: 50rpx
|
|
||||||
position: relative
|
|
||||||
.recommend-card-line::before
|
|
||||||
position: absolute
|
|
||||||
content: ''
|
|
||||||
left: 0
|
|
||||||
top: 0
|
|
||||||
transform: translate(-50% - 90rpx, -50%)
|
|
||||||
width: 28rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
background: #F4F4F4;
|
|
||||||
border-radius: 50%;
|
|
||||||
.recommend-card-line::after
|
|
||||||
position: absolute
|
|
||||||
content: ''
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
transform: translate(50% + 90rpx, -50%)
|
|
||||||
width: 28rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
background: #F4F4F4;
|
|
||||||
border-radius: 50%;
|
|
||||||
.recommend-card-controll
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: space-between
|
|
||||||
margin-top: 40rpx
|
|
||||||
padding: 0 6rpx;
|
|
||||||
.controll-yes
|
|
||||||
width: 124rpx;
|
|
||||||
height: 70rpx;
|
|
||||||
background: rgba(37,107,250,0.1);
|
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height:70rpx
|
|
||||||
color: #256BFA
|
|
||||||
.controll-no
|
|
||||||
width: 124rpx;
|
|
||||||
height: 66rpx;
|
|
||||||
line-height: 66rpx
|
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
||||||
border: 2rpx solid #DEDEDE;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
text-align: center;
|
|
||||||
.controll-yes:active, .controll-no:active
|
|
||||||
width: 120rpx;
|
|
||||||
height: 66rpx;
|
|
||||||
line-height: 66rpx
|
|
||||||
background: #e8e8e8
|
|
||||||
border: 2rpx solid #e8e8e8
|
|
||||||
.isBut{
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
}
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
.container-header {
|
||||||
|
height: calc(88rpx - 14rpx);
|
||||||
|
text-align: center;
|
||||||
|
line-height: calc(88rpx - 14rpx);
|
||||||
|
font-size: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 44rpx 36rpx 44rpx;
|
||||||
|
background: url('@/static/icon/msgTopbg.png') 0 0 no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.header-title {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.header-btnLf {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(60rpx * 3);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #696969;
|
||||||
|
margin-right: 44rpx;
|
||||||
|
position: relative;
|
||||||
|
.btns-wd{
|
||||||
|
position: absolute
|
||||||
|
top: 2rpx;
|
||||||
|
right: 2rpx
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
background: #F73636;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4rpx solid #EEEEFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-main {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
.main-scroll {
|
||||||
|
width: 100%
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scrollmain{
|
||||||
|
padding: 28rpx
|
||||||
|
}
|
||||||
|
.swiper
|
||||||
|
height: 100%;
|
||||||
|
width: 100%
|
||||||
|
.list
|
||||||
|
width: 100%
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
// mask:
|
||||||
|
.maskFristEntry
|
||||||
|
position: fixed;
|
||||||
|
// right: 20rpx;
|
||||||
|
// bottom: calc(50% - 200rpx);
|
||||||
|
height: 100vh
|
||||||
|
width: 100vw
|
||||||
|
background: rgba(0,0,0,0.3)
|
||||||
|
.entry-content
|
||||||
|
display: flex;
|
||||||
|
align-items: center
|
||||||
|
position: absolute
|
||||||
|
left: 50%
|
||||||
|
top: 35%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
flex-direction: column
|
||||||
|
background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 480rpx
|
||||||
|
height: 584rpx
|
||||||
|
// padding-left: 80rpx
|
||||||
|
.text1
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
margin-top: 370rpx
|
||||||
|
font-size: 36rpx
|
||||||
|
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text; /* 有些浏览器兼容用 */
|
||||||
|
text-fill-color: transparent;
|
||||||
|
padding-left: 28rpx
|
||||||
|
.text2
|
||||||
|
padding-left: 28rpx
|
||||||
|
margin-top: 8rpx
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: center;
|
||||||
|
.indicateArrow
|
||||||
|
height: 76rpx
|
||||||
|
width: 68rpx
|
||||||
|
.indicatefristEntry
|
||||||
|
width: 244rpx
|
||||||
|
height: 244rpx
|
||||||
|
.goExperience
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
|
margin-left: 28rpx
|
||||||
|
margin-top: 28rpx
|
||||||
|
width: 160rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
|
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60rpx
|
||||||
|
.maskFristEntry-Close
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 10rpx);
|
||||||
|
bottom: -130rpx
|
||||||
|
width: 42rpx
|
||||||
|
height: 42rpx
|
||||||
|
background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
|
||||||
|
border-radius: 50%;
|
||||||
|
.maskFristEntry-Close::before
|
||||||
|
position: absolute;
|
||||||
|
left: calc( 50% - 2rpx)
|
||||||
|
top: calc( 50% - 10rpx)
|
||||||
|
transform: rotate(45deg);
|
||||||
|
content: ''
|
||||||
|
background: #FFFFFF
|
||||||
|
width: 4rpx
|
||||||
|
height: 20rpx
|
||||||
|
.maskFristEntry-Close::after
|
||||||
|
position: absolute;
|
||||||
|
left: calc( 50% - 2rpx)
|
||||||
|
top: calc( 50% - 10rpx)
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
content: ''
|
||||||
|
background: #FFFFFF
|
||||||
|
width: 4rpx
|
||||||
|
height: 20rpx
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<tabcontrolVue :current="tabCurrent">
|
<tabcontrolVue :current="tabCurrent">
|
||||||
<template v-slot:tab0>
|
<template v-slot:tab0>
|
||||||
<view class="login-content">
|
<view class="login-content">
|
||||||
<image class="logo" src="../../static/logo.png"></image>
|
<image class="logo" src="@/static/logo.png"></image>
|
||||||
<view class="logo-title">就业</view>
|
<view class="logo-title">就业</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btns">
|
<view class="btns">
|
||||||
@@ -245,6 +245,18 @@ function getTreeselect() {
|
|||||||
|
|
||||||
// 登录
|
// 登录
|
||||||
function loginTest() {
|
function loginTest() {
|
||||||
|
// uni.share({
|
||||||
|
// provider: 'weixin',
|
||||||
|
// scene: 'WXSceneSession',
|
||||||
|
// type: 2,
|
||||||
|
// imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
|
||||||
|
// success: function (res) {
|
||||||
|
// console.log('success:' + JSON.stringify(res));
|
||||||
|
// },
|
||||||
|
// fail: function (err) {
|
||||||
|
// console.log('fail:' + JSON.stringify(err));
|
||||||
|
// },
|
||||||
|
// });
|
||||||
const params = {
|
const params = {
|
||||||
username: 'test',
|
username: 'test',
|
||||||
password: 'test',
|
password: 'test',
|
||||||
@@ -284,12 +296,10 @@ function complete() {
|
|||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
.nx-item
|
.nx-item
|
||||||
padding: 20rpx 28rpx
|
margin: 12rpx 12rpx 0 0;
|
||||||
width: fit-content
|
padding: 12rpx 25rpx;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
border: 2rpx solid #E8EAEE;
|
border: 2rpx solid #E8EAEE;
|
||||||
margin-right: 24rpx
|
|
||||||
margin-top: 24rpx
|
|
||||||
.nx-item::before
|
.nx-item::before
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
@@ -315,7 +325,8 @@ function complete() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
// background: linear-gradient( 180deg, #1677FF 0%, rgba(22,119,255,0) 54%, rgba(22,119,255,0) 100%);
|
||||||
|
// background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||||||
background-size: 100% 728rpx;
|
background-size: 100% 728rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
|||||||
@@ -2,7 +2,8 @@
|
|||||||
<AppLayout title="我的" back-gorund-color="#F4F4F4">
|
<AppLayout title="我的" back-gorund-color="#F4F4F4">
|
||||||
<view class="mine-userinfo btn-feel" @click="navTo('/packageA/pages/myResume/myResume')">
|
<view class="mine-userinfo btn-feel" @click="navTo('/packageA/pages/myResume/myResume')">
|
||||||
<view class="userindo-head">
|
<view class="userindo-head">
|
||||||
<image class="userindo-head-img" v-if="userInfo.sex === '0'" src="/static/icon/boy.png"></image>
|
<image class="userindo-head-img" v-if="userInfo.avatar" :src="userInfo.avatar"></image>
|
||||||
|
<image class="userindo-head-img" v-else-if="userInfo.sex === '0'" src="/static/icon/boy.png"></image>
|
||||||
<image class="userindo-head-img" v-else src="/static/icon/girl.png"></image>
|
<image class="userindo-head-img" v-else src="/static/icon/girl.png"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="userinfo-ls">
|
<view class="userinfo-ls">
|
||||||
@@ -32,7 +33,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="mini-cards">
|
<view class="mini-cards">
|
||||||
<view class="card-top btn-feel">
|
<view class="card-top btn-feel" @click="navTo('/packageA/pages/vCard/vCard')">
|
||||||
<view class="top-title line_1">
|
<view class="top-title line_1">
|
||||||
<text>{{ userInfo.name || '暂无用户名' }}</text>
|
<text>{{ userInfo.name || '暂无用户名' }}</text>
|
||||||
|
|
|
|
||||||
@@ -44,8 +45,8 @@
|
|||||||
<text v-if="userInfo.jobTitle.length - 1 !== index">|</text>
|
<text v-if="userInfo.jobTitle.length - 1 !== index">|</text>
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="top-btn button-click" @click="navTo('/packageA/pages/personalInfo/personalInfo')">
|
<view class="top-btn button-click" >
|
||||||
修改简历
|
电子名片
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-main">
|
<view class="card-main">
|
||||||
@@ -96,12 +97,16 @@
|
|||||||
></uni-popup-dialog>
|
></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
</view>
|
</view>
|
||||||
|
<template #footer>
|
||||||
|
<Tabbar :currentpage="4"></Tabbar>
|
||||||
|
</template>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
const { $api, navTo } = inject('globalFunction');
|
const { $api, navTo } = inject('globalFunction');
|
||||||
import useUserStore from '@/stores/useUserStore';
|
import useUserStore from '@/stores/useUserStore';
|
||||||
@@ -153,6 +158,7 @@ function getUserstatistics() {
|
|||||||
padding: 36rpx 36rpx 64rpx 36rpx
|
padding: 36rpx 36rpx 64rpx 36rpx
|
||||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||||
position: relative
|
position: relative
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
.top-title{
|
.top-title{
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
@@ -170,7 +176,7 @@ function getUserstatistics() {
|
|||||||
width: auto;
|
width: auto;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.top-btn{
|
.top-btn{
|
||||||
@@ -214,6 +220,7 @@ function getUserstatistics() {
|
|||||||
margin: 32rpx 16rpx 32rpx 10rpx
|
margin: 32rpx 16rpx 32rpx 10rpx
|
||||||
}
|
}
|
||||||
.left-text{
|
.left-text{
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
@@ -248,8 +255,9 @@ function getUserstatistics() {
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
align-items: center
|
align-items: center
|
||||||
.mini-num{
|
.mini-num{
|
||||||
|
font-family: DIN-Medium;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 44rpx;
|
font-size: 46rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.mini-text{
|
.mini-text{
|
||||||
@@ -279,6 +287,7 @@ function getUserstatistics() {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
.userinfo-ls-name
|
.userinfo-ls-name
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
@@ -307,4 +316,4 @@ function getUserstatistics() {
|
|||||||
border-radius: 2rpx
|
border-radius: 2rpx
|
||||||
background: #A2A2A2;
|
background: #A2A2A2;
|
||||||
transform: rotate(45deg)
|
transform: rotate(45deg)
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -27,6 +27,8 @@
|
|||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<Tabbar :currentpage="3"></Tabbar>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -34,6 +36,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
|
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||||||
import ReadComponent from './read.vue';
|
import ReadComponent from './read.vue';
|
||||||
import UnreadComponent from './unread.vue';
|
import UnreadComponent from './unread.vue';
|
||||||
const loadedMap = reactive([false, false]);
|
const loadedMap = reactive([false, false]);
|
||||||
@@ -115,6 +118,7 @@ function changeSwiperMsgType(e) {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.header-btnLf {
|
.header-btnLf {
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<scroll-view scroll-y class="main-scroll">
|
<scroll-view scroll-y class="main-scroll">
|
||||||
<view class="scrollmain">
|
<view class="scrollmain">
|
||||||
<view
|
<view
|
||||||
class="list-card btn-feel"
|
class="list-card press-button"
|
||||||
v-for="(item, index) in msgList"
|
v-for="(item, index) in msgList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="seeDetail(item, index)"
|
@click="seeDetail(item, index)"
|
||||||
@@ -133,6 +133,8 @@ defineExpose({ loadData });
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%
|
width: 100%
|
||||||
|
text
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
.card-time
|
.card-time
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<scroll-view scroll-y class="main-scroll">
|
<scroll-view scroll-y class="main-scroll">
|
||||||
<view class="scrollmain">
|
<view class="scrollmain">
|
||||||
<view
|
<view
|
||||||
class="list-card btn-feel"
|
class="list-card press-button"
|
||||||
v-for="(item, index) in unreadMsgList"
|
v-for="(item, index) in unreadMsgList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="seeDetail(item)"
|
@click="seeDetail(item)"
|
||||||
@@ -119,6 +119,8 @@ defineExpose({ loadData });
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%
|
width: 100%
|
||||||
|
text
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
.card-time
|
.card-time
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
|||||||
@@ -1,15 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
|
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
|
||||||
<view class="two-head">
|
<view class="two-head">
|
||||||
<view
|
<view class="head-all">
|
||||||
class="head-item"
|
<text>热门商圈</text>
|
||||||
:class="{ active: state.comId === item.commercialAreaId }"
|
<text class="color_333333 button-click" @click="handleOpenBusinessDistrict">
|
||||||
v-for="(item, index) in state.comlist"
|
更多
|
||||||
:key="item.commercialAreaName"
|
<uni-icons type="forward" color="#333333" size="14"></uni-icons>
|
||||||
@click="clickCommercialArea(item)"
|
</text>
|
||||||
>
|
|
||||||
{{ item.commercialAreaName }}
|
|
||||||
</view>
|
</view>
|
||||||
|
<scroll-view class="scroll-head" :scroll-x="true" :scroll-into-view="activeTab" :show-scrollbar="false">
|
||||||
|
<view class="head-item-content">
|
||||||
|
<view
|
||||||
|
class="head-item"
|
||||||
|
:class="{ active: state.comId === item.commercialAreaId }"
|
||||||
|
v-for="(item, index) in comlistPuted"
|
||||||
|
:key="item.commercialAreaName"
|
||||||
|
@click="clickCommercialArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.commercialAreaName }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view class="nearby-list">
|
<view class="nearby-list">
|
||||||
<view class="nav-filter" @touchmove.stop.prevent>
|
<view class="nav-filter" @touchmove.stop.prevent>
|
||||||
@@ -70,11 +81,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 筛选 -->
|
<!-- 筛选 -->
|
||||||
<select-filter ref="selectFilterModel"></select-filter>
|
<select-filter ref="selectFilterModel"></select-filter>
|
||||||
|
<select-filter2-col ref="selectFilter2ColModel"></select-filter2-col>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
|
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount, computed } from 'vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
|
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
@@ -87,6 +99,7 @@ const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
|||||||
import point2 from '@/static/icon/point2.png';
|
import point2 from '@/static/icon/point2.png';
|
||||||
import LocationPng from '@/static/icon/Location.png';
|
import LocationPng from '@/static/icon/Location.png';
|
||||||
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
import selectFilter from '@/components/selectFilter/selectFilter.vue';
|
||||||
|
import selectFilter2Col from '@/components/selectFilter/selectFilter2Col.vue';
|
||||||
|
|
||||||
const emit = defineEmits(['onFilter']);
|
const emit = defineEmits(['onFilter']);
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
@@ -96,12 +109,15 @@ const state = reactive({
|
|||||||
comId: 0,
|
comId: 0,
|
||||||
areaInfo: {},
|
areaInfo: {},
|
||||||
});
|
});
|
||||||
|
const commercialAreaList = ref([]);
|
||||||
const isLoaded = ref(false);
|
const isLoaded = ref(false);
|
||||||
const showFilter = ref(false);
|
const showFilter = ref(false);
|
||||||
const selectFilterModel = ref();
|
const selectFilterModel = ref();
|
||||||
|
const selectFilter2ColModel = ref();
|
||||||
const fromValue = reactive({
|
const fromValue = reactive({
|
||||||
area: 0,
|
area: 0,
|
||||||
});
|
});
|
||||||
|
const activeTab = ref('');
|
||||||
const loadmoreRef = ref(null);
|
const loadmoreRef = ref(null);
|
||||||
const pageState = reactive({
|
const pageState = reactive({
|
||||||
page: 0,
|
page: 0,
|
||||||
@@ -114,6 +130,18 @@ const pageState = reactive({
|
|||||||
});
|
});
|
||||||
const list = ref([]);
|
const list = ref([]);
|
||||||
|
|
||||||
|
const comlistPuted = computed(() => {
|
||||||
|
// const commercialArea = state.comlist.find((item) => item.commercialAreaId === state.comId);
|
||||||
|
// if (commercialArea) {
|
||||||
|
// const otherItems = state.comlist.filter((item) => item.commercialAreaId !== state.comId);
|
||||||
|
// return [commercialArea, ...otherItems];
|
||||||
|
// } else {
|
||||||
|
// return [state.areaInfo, ...state.comlist];
|
||||||
|
// }
|
||||||
|
// activeTab.value = state.areaInfo.commercialAreaId;
|
||||||
|
return state.comlist;
|
||||||
|
});
|
||||||
|
|
||||||
const rangeOptions = ref([
|
const rangeOptions = ref([
|
||||||
{ value: 0, text: '推荐' },
|
{ value: 0, text: '推荐' },
|
||||||
{ value: 1, text: '最热' },
|
{ value: 1, text: '最热' },
|
||||||
@@ -149,7 +177,6 @@ function openFilter() {
|
|||||||
pageState.search[key] = value.join(',');
|
pageState.search[key] = value.join(',');
|
||||||
}
|
}
|
||||||
showFilter.value = false;
|
showFilter.value = false;
|
||||||
console.log(pageState.search);
|
|
||||||
getJobList('refresh');
|
getJobList('refresh');
|
||||||
},
|
},
|
||||||
cancel: () => {
|
cancel: () => {
|
||||||
@@ -201,7 +228,7 @@ function changeArea(area, item) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getBusinessDistrict() {
|
function getBusinessDistrict() {
|
||||||
$api.createRequest(`/app/common/commercialArea`).then((resData) => {
|
$api.createRequest(`/app/common/commercialArea/getAllData`).then((resData) => {
|
||||||
if (resData.data.length) {
|
if (resData.data.length) {
|
||||||
state.comlist = resData.data;
|
state.comlist = resData.data;
|
||||||
state.areaInfo = resData.data[0];
|
state.areaInfo = resData.data[0];
|
||||||
@@ -241,10 +268,12 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
pageState.total = resData.total;
|
pageState.total = resData.total;
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
if (rows.length < pageState.pageSize) {
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
loadmoreRef.value.change('noMore');
|
if (rows.length < pageState.pageSize) {
|
||||||
} else {
|
loadmoreRef.value.change('noMore');
|
||||||
loadmoreRef.value.change('more');
|
} else {
|
||||||
|
loadmoreRef.value.change('more');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -264,10 +293,49 @@ function handleFilterConfirm(val) {
|
|||||||
getJobList('refresh');
|
getJobList('refresh');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleOpenBusinessDistrict() {
|
||||||
|
if (commercialAreaList.value.length) {
|
||||||
|
openFilter2Col();
|
||||||
|
} else {
|
||||||
|
getBusinessDistrictList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBusinessDistrictList() {
|
||||||
|
$api.createRequest(`/app/common/commercialArea`).then((resData) => {
|
||||||
|
if (resData.data.length) {
|
||||||
|
commercialAreaList.value = resData.data;
|
||||||
|
openFilter2Col();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openFilter2Col() {
|
||||||
|
selectFilter2ColModel.value?.open({
|
||||||
|
data: commercialAreaList.value,
|
||||||
|
title: '商圈',
|
||||||
|
currentValue: state.comId,
|
||||||
|
maskClick: true,
|
||||||
|
success: (values) => {
|
||||||
|
pageState.search = {
|
||||||
|
...pageState.search,
|
||||||
|
latitude: values.latitude,
|
||||||
|
longitude: values.longitude,
|
||||||
|
};
|
||||||
|
state.areaInfo = values;
|
||||||
|
state.comId = values.value;
|
||||||
|
getJobList('refresh');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose({ loadData, handleFilterConfirm });
|
defineExpose({ loadData, handleFilterConfirm });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.scroll-head
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
.tabchecked
|
.tabchecked
|
||||||
color: #4778EC !important
|
color: #4778EC !important
|
||||||
.nearby-scroll
|
.nearby-scroll
|
||||||
@@ -275,18 +343,30 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
.two-head
|
.two-head
|
||||||
margin: 22rpx;
|
margin: 22rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap
|
flex-direction: column
|
||||||
|
flex-wrap: no-wrap
|
||||||
// grid-template-columns: repeat(4, 1fr);
|
// grid-template-columns: repeat(4, 1fr);
|
||||||
// grid-column-gap: 10rpx;
|
// grid-column-gap: 10rpx;
|
||||||
// grid-row-gap: 24rpx;
|
// grid-row-gap: 24rpx;
|
||||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||||
|
.head-all{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
|
margin-bottom: 16rpx
|
||||||
|
}
|
||||||
|
.head-item-content{
|
||||||
|
display: flex
|
||||||
|
flex-wrap: nowrap
|
||||||
|
}
|
||||||
.head-item
|
.head-item
|
||||||
|
padding: 0 10rpx
|
||||||
margin: 10rpx
|
margin: 10rpx
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
min-width: 156rpx
|
// min-width: 156rpx
|
||||||
line-height: 64rpx
|
line-height: 64rpx
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: fit-content;
|
// width: fit-content;
|
||||||
font-size: 21rpx;
|
font-size: 21rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
@@ -294,6 +374,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
color: #256BFA;
|
color: #256BFA;
|
||||||
background: #E9F0FF;
|
background: #E9F0FF;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
@@ -330,6 +411,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
margin-right: 32rpx;
|
margin-right: 32rpx;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
@@ -365,4 +447,4 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
height: 26rpx;
|
height: 26rpx;
|
||||||
.active
|
.active
|
||||||
transform: rotate(180deg)
|
transform: rotate(180deg)
|
||||||
</style>
|
</style>
|
||||||
@@ -292,10 +292,12 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
pageState.total = resData.total;
|
pageState.total = resData.total;
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
if (rows.length < pageState.pageSize) {
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
loadmoreRef.value.change('noMore');
|
if (rows.length < pageState.pageSize) {
|
||||||
} else {
|
loadmoreRef.value.change('noMore');
|
||||||
loadmoreRef.value.change('more');
|
} else {
|
||||||
|
loadmoreRef.value.change('more');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -398,6 +400,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
margin-right: 32rpx;
|
margin-right: 32rpx;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|||||||
@@ -33,7 +33,14 @@
|
|||||||
donted: index === state.dont,
|
donted: index === state.dont,
|
||||||
}"
|
}"
|
||||||
></view>
|
></view>
|
||||||
<view class="item-text">{{ item.stationName }}</view>
|
<view
|
||||||
|
class="item-text"
|
||||||
|
:class="{
|
||||||
|
textActive: index === state.dont,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ item.stationName }}
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -185,7 +192,6 @@ function openFilter() {
|
|||||||
pageState.search[key] = value.join(',');
|
pageState.search[key] = value.join(',');
|
||||||
}
|
}
|
||||||
showFilter.value = false;
|
showFilter.value = false;
|
||||||
console.log(pageState.search);
|
|
||||||
getJobList('refresh');
|
getJobList('refresh');
|
||||||
},
|
},
|
||||||
cancel: () => {
|
cancel: () => {
|
||||||
@@ -311,10 +317,12 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
pageState.total = resData.total;
|
pageState.total = resData.total;
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
if (rows.length < pageState.pageSize) {
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
loadmoreRef.value.change('noMore');
|
if (rows.length < pageState.pageSize) {
|
||||||
} else {
|
loadmoreRef.value.change('noMore');
|
||||||
loadmoreRef.value.change('more');
|
} else {
|
||||||
|
loadmoreRef.value.change('more');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -408,44 +416,43 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
.donted::after
|
.item-dont::before
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
left: 0;
|
left: 50%;
|
||||||
top: -5rpx;
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
width: 27rpx;
|
width: 27rpx;
|
||||||
height: 27rpx;
|
height: 27rpx;
|
||||||
line-height: 28rpx;
|
background: #F7B000;
|
||||||
background: blue !important;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
.dontstart::after
|
.item-dont::after
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '始';
|
// content: '始';
|
||||||
color: #FFFFFF;
|
content: '';
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
left: 0;
|
left: 50%;
|
||||||
top: -5rpx;
|
top: 50%;
|
||||||
width: 27rpx;
|
transform: translate(-50%, -50%)
|
||||||
height: 27rpx;
|
width: 14rpx;
|
||||||
line-height: 28rpx;
|
height: 14rpx;
|
||||||
background: #666666;
|
background: #ffffff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
// .dontend::after
|
// .donted::after
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// content: '终';
|
// content: '';
|
||||||
// color: #FFFFFF;
|
|
||||||
// font-size: 20rpx;
|
// font-size: 20rpx;
|
||||||
// text-align: center;
|
// text-align: center;
|
||||||
// left: 0;
|
// left: 50%;
|
||||||
// top: -5rpx;
|
// top: 50%;
|
||||||
// width: 27rpx;
|
// transform: translate(-50%, -50%)
|
||||||
// height: 27rpx;
|
// width: 14rpx;
|
||||||
// line-height: 28rpx;
|
// height: 14rpx;
|
||||||
// background: #666666;
|
// background: #F7B000 !important;
|
||||||
// border-radius: 50%;
|
// border-radius: 50%;
|
||||||
.item-text
|
.item-text
|
||||||
position: absolute
|
position: absolute
|
||||||
@@ -458,6 +465,8 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
transform: translate(-50% + 8rpx, 0)
|
transform: translate(-50% + 8rpx, 0)
|
||||||
|
.textActive
|
||||||
|
color: #F7B000
|
||||||
.three-item:nth-child(2n)
|
.three-item:nth-child(2n)
|
||||||
.item-text
|
.item-text
|
||||||
margin-top: -90rpx;
|
margin-top: -90rpx;
|
||||||
@@ -468,7 +477,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
top: -17rpx;
|
top: -17rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 17rpx;
|
height: 17rpx;
|
||||||
background: #FFCB47;
|
background: #F7B000;
|
||||||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
.nearby-list
|
.nearby-list
|
||||||
@@ -503,6 +512,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
margin-right: 32rpx;
|
margin-right: 32rpx;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|||||||
@@ -222,10 +222,12 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
pageState.total = resData.total;
|
pageState.total = resData.total;
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
if (rows.length < pageState.pageSize) {
|
if (loadmoreRef.value && typeof loadmoreRef.value.change === 'function') {
|
||||||
loadmoreRef.value.change('noMore');
|
if (rows.length < pageState.pageSize) {
|
||||||
} else {
|
loadmoreRef.value.change('noMore');
|
||||||
loadmoreRef.value.change('more');
|
} else {
|
||||||
|
loadmoreRef.value.change('more');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -276,6 +278,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
color: #256BFA;
|
color: #256BFA;
|
||||||
background: #E9F0FF;
|
background: #E9F0FF;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
@@ -311,6 +314,7 @@ defineExpose({ loadData, handleFilterConfirm });
|
|||||||
margin-right: 32rpx;
|
margin-right: 32rpx;
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.active
|
.active
|
||||||
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<AppLayout title="附近" :use-scroll-view="false">
|
<AppLayout title="附近" :use-scroll-view="false" :show-bg-image="false">
|
||||||
<template #headerleft>
|
<template #headerleft>
|
||||||
<view class="btn">
|
<view class="btnback">
|
||||||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -83,12 +83,16 @@ function handleTabChange(index) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.btnback{
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60rpx;
|
width: 52rpx;
|
||||||
height: 60rpx;
|
height: 52rpx;
|
||||||
}
|
}
|
||||||
image {
|
image {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -1,33 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="top">
|
<view>
|
||||||
<image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
|
<view class="top">
|
||||||
<view class="search-box">
|
<image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
|
||||||
<uni-icons
|
<view class="search-box">
|
||||||
class="iconsearch"
|
<uni-icons
|
||||||
color="#666666"
|
class="iconsearch"
|
||||||
type="search"
|
color="#666666"
|
||||||
size="18"
|
type="search"
|
||||||
@confirm="searchCollection"
|
size="18"
|
||||||
></uni-icons>
|
@confirm="searchCollection"
|
||||||
<input
|
></uni-icons>
|
||||||
class="inputed"
|
<input
|
||||||
type="text"
|
class="inputed"
|
||||||
focus
|
type="text"
|
||||||
v-model="searchValue"
|
focus
|
||||||
placeholder="搜索职位名称"
|
v-model="searchValue"
|
||||||
placeholder-class="placeholder"
|
placeholder="搜索职位名称"
|
||||||
@confirm="searchBtn"
|
placeholder-class="placeholder"
|
||||||
/>
|
@confirm="searchBtn"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="search-btn button-click" @click="searchBtn">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="view-top" v-show="listCom.length || list.length">
|
||||||
|
<view class="top-item" @click="changeType(0)" :class="{ active: currentTab === 0 }">综合</view>
|
||||||
|
<view class="top-item" @click="changeType(1)" :class="{ active: currentTab === 1 }">视频</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="search-btn button-click" @click="searchBtn">搜索</view>
|
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y class="Detailscroll-view" v-show="list.length" @scrolltolower="getJobList('add')">
|
<scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
|
||||||
<view class="cards-box">
|
<view class="cards-box" v-show="currentTab === 0">
|
||||||
<renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
<renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
|
||||||
|
</view>
|
||||||
|
<view class="cards-box" style="padding-top: 24rpx" v-show="currentTab === 1">
|
||||||
|
<custom-waterfalls-flow
|
||||||
|
ref="waterfallsFlowRef"
|
||||||
|
:column="columnCount"
|
||||||
|
:columnSpace="columnSpace"
|
||||||
|
@loaded="imageloaded"
|
||||||
|
:value="list"
|
||||||
|
>
|
||||||
|
<template v-slot:default="job">
|
||||||
|
<view class="slot-item">
|
||||||
|
<view class="job-image btn-feel" @click="nextVideo(job)">
|
||||||
|
<image class="cover-image" :src="job.cover" mode="aspectFill"></image>
|
||||||
|
<view class="cover-triangle"></view>
|
||||||
|
</view>
|
||||||
|
<view class="job-info" @click="nextDetail(job)">
|
||||||
|
<view class="salary">
|
||||||
|
<Salary-Expectation
|
||||||
|
:max-salary="job.maxSalary"
|
||||||
|
:min-salary="job.minSalary"
|
||||||
|
:is-month="true"
|
||||||
|
></Salary-Expectation>
|
||||||
|
<image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="title">{{ job.jobTitle }}</view>
|
||||||
|
<view class="desc">{{ job.companyName }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</custom-waterfalls-flow>
|
||||||
|
<loadmore ref="loadmoreRef"></loadmore>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="main-content" v-show="!list.length">
|
<view class="main-content" v-show="!listCom.length">
|
||||||
<view class="content-top">
|
<view class="content-top">
|
||||||
<view class="top-left">历史搜索</view>
|
<view class="top-left">历史搜索</view>
|
||||||
<view class="top-right button-click" @click="remove">
|
<view class="top-right button-click" @click="remove">
|
||||||
@@ -44,16 +81,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { inject, ref, reactive } from 'vue';
|
import { inject, ref, reactive, nextTick } from 'vue';
|
||||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||||
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
|
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
|
||||||
const { $api, navBack } = inject('globalFunction');
|
const { $api, navBack, navTo } = inject('globalFunction');
|
||||||
import useLocationStore from '@/stores/useLocationStore';
|
import useLocationStore from '@/stores/useLocationStore';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useColumnCount } from '@/hook/useColumnCount';
|
||||||
|
import { usePagination } from '@/hook/usePagination';
|
||||||
|
import img from '@/static/icon/filter.png';
|
||||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||||
const searchValue = ref('');
|
const searchValue = ref('');
|
||||||
const historyList = ref([]);
|
const historyList = ref([]);
|
||||||
const list = ref([]);
|
const listCom = ref([]);
|
||||||
const pageState = reactive({
|
const pageState = reactive({
|
||||||
page: 0,
|
page: 0,
|
||||||
total: 0,
|
total: 0,
|
||||||
@@ -63,6 +103,50 @@ const pageState = reactive({
|
|||||||
order: 0,
|
order: 0,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const isLoaded = ref(false);
|
||||||
|
const waterfallsFlowRef = ref(null);
|
||||||
|
const loadmoreRef = ref(null);
|
||||||
|
const currentTab = ref(0);
|
||||||
|
// 响应式搜索条件(可以被修改)
|
||||||
|
const searchParams = ref({});
|
||||||
|
const pageSize = ref(10);
|
||||||
|
|
||||||
|
const { list, loading, refresh, loadMore } = usePagination(
|
||||||
|
(params) => $api.createRequest('/app/job/littleVideo', params, 'GET', true),
|
||||||
|
dataToImg, // 转换函数
|
||||||
|
{
|
||||||
|
pageSize: pageSize,
|
||||||
|
search: searchParams,
|
||||||
|
dataKey: 'data',
|
||||||
|
autoWatchSearch: true,
|
||||||
|
onBeforeRequest: () => {
|
||||||
|
loadmoreRef.value?.change('loading');
|
||||||
|
},
|
||||||
|
onAfterRequest: () => {
|
||||||
|
loadmoreRef.value?.change('more');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
async function choosePosition(index) {
|
||||||
|
if (currentTab.value === 0) {
|
||||||
|
getJobList('add');
|
||||||
|
} else {
|
||||||
|
loadMore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageloaded() {
|
||||||
|
loadmoreRef.value?.change('more');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { columnCount, columnSpace } = useColumnCount(() => {
|
||||||
|
pageSize.value = 10 * (columnCount.value - 1);
|
||||||
|
nextTick(() => {
|
||||||
|
waterfallsFlowRef.value?.refresh?.();
|
||||||
|
useLocationStore().getLocation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
let arr = uni.getStorageSync('searchList');
|
let arr = uni.getStorageSync('searchList');
|
||||||
@@ -71,6 +155,20 @@ onLoad(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function changeType(type) {
|
||||||
|
if (currentTab.value === type) return;
|
||||||
|
switch (type) {
|
||||||
|
case 0:
|
||||||
|
currentTab.value = 0;
|
||||||
|
getJobList('refresh');
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
currentTab.value = 1;
|
||||||
|
refresh();
|
||||||
|
waterfallsFlowRef.value?.refresh?.();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
function searchFn(item) {
|
function searchFn(item) {
|
||||||
searchValue.value = item;
|
searchValue.value = item;
|
||||||
searchBtn();
|
searchBtn();
|
||||||
@@ -83,7 +181,15 @@ function searchBtn() {
|
|||||||
historyList.value.unshift(searchValue.value);
|
historyList.value.unshift(searchValue.value);
|
||||||
historyList.value = unique(historyList.value);
|
historyList.value = unique(historyList.value);
|
||||||
uni.setStorageSync('searchList', historyList.value);
|
uni.setStorageSync('searchList', historyList.value);
|
||||||
getJobList('refresh');
|
searchParams.value = {
|
||||||
|
jobTitle: searchValue,
|
||||||
|
};
|
||||||
|
if (currentTab.value === 0) {
|
||||||
|
getJobList('refresh');
|
||||||
|
} else {
|
||||||
|
refresh();
|
||||||
|
waterfallsFlowRef.value?.refresh?.();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function searchCollection(e) {
|
function searchCollection(e) {
|
||||||
@@ -112,12 +218,25 @@ function remove() {
|
|||||||
historyList.value = [];
|
historyList.value = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function nextDetail(job) {
|
||||||
|
// 记录岗位类型,用作数据分析
|
||||||
|
if (job.jobCategory) {
|
||||||
|
const recordData = recommedIndexDb.JobParameter(job);
|
||||||
|
recommedIndexDb.addRecord(recordData);
|
||||||
|
}
|
||||||
|
navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextVideo(job) {
|
||||||
|
uni.setStorageSync(`job-Info`, job);
|
||||||
|
navTo(`/packageA/pages/tiktok/tiktok`);
|
||||||
|
}
|
||||||
|
|
||||||
function getJobList(type = 'add') {
|
function getJobList(type = 'add') {
|
||||||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||||||
pageState.page += 1;
|
pageState.page += 1;
|
||||||
}
|
}
|
||||||
if (type === 'refresh') {
|
if (type === 'refresh') {
|
||||||
list.value = [];
|
|
||||||
pageState.page = 1;
|
pageState.page = 1;
|
||||||
pageState.maxPage = 2;
|
pageState.maxPage = 2;
|
||||||
}
|
}
|
||||||
@@ -128,15 +247,15 @@ function getJobList(type = 'add') {
|
|||||||
jobTitle: searchValue.value,
|
jobTitle: searchValue.value,
|
||||||
};
|
};
|
||||||
|
|
||||||
$api.createRequest('/app/job/list', params).then((resData) => {
|
$api.createRequest('/app/job/list', params, 'GET', true).then((resData) => {
|
||||||
const { rows, total } = resData;
|
const { rows, total } = resData;
|
||||||
if (type === 'add') {
|
if (type === 'add') {
|
||||||
const str = pageState.pageSize * (pageState.page - 1);
|
const str = pageState.pageSize * (pageState.page - 1);
|
||||||
const end = list.value.length;
|
const end = listCom.value.length;
|
||||||
const reslist = rows;
|
const reslist = rows;
|
||||||
list.value.splice(str, end, ...reslist);
|
listCom.value.splice(str, end, ...reslist);
|
||||||
} else {
|
} else {
|
||||||
list.value = rows;
|
listCom.value = rows;
|
||||||
}
|
}
|
||||||
pageState.total = resData.total;
|
pageState.total = resData.total;
|
||||||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||||||
@@ -147,6 +266,15 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function dataToImg(data) {
|
||||||
|
return data.map((item) => ({
|
||||||
|
...item,
|
||||||
|
// image: item.cover,
|
||||||
|
image: img,
|
||||||
|
hide: true,
|
||||||
|
}));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@@ -156,12 +284,35 @@ function getJobList(type = 'add') {
|
|||||||
.Detailscroll-view{
|
.Detailscroll-view{
|
||||||
flex: 1
|
flex: 1
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
}
|
}
|
||||||
.container{
|
.container{
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
background: #F4f4f4
|
background: #F4f4f4
|
||||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
|
.view-top{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around
|
||||||
|
background: #FFFFFF;
|
||||||
|
.top-item{
|
||||||
|
padding: 6rpx 0 18rpx 0
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: #256BFA;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.active::after{
|
||||||
|
position: absolute;
|
||||||
|
content: ''
|
||||||
|
left: calc(50% - 12rpx)
|
||||||
|
bottom: 10rpx
|
||||||
|
width: 24rpx
|
||||||
|
height: 6rpx
|
||||||
|
background: #256BFA
|
||||||
|
}
|
||||||
|
}
|
||||||
.main-content{
|
.main-content{
|
||||||
background: #FFFFFF
|
background: #FFFFFF
|
||||||
height: 100%
|
height: 100%
|
||||||
@@ -244,4 +395,67 @@ function getJobList(type = 'add') {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slot-item
|
||||||
|
// background: #f4f4f4;
|
||||||
|
background: #FFFFFF;
|
||||||
|
.job-info{
|
||||||
|
padding: 10rpx 24rpx 24rpx 24rpx
|
||||||
|
}
|
||||||
|
.job-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 280rpx;
|
||||||
|
position: relative;
|
||||||
|
.cover-image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.cover-triangle{
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx
|
||||||
|
width: 36rpx
|
||||||
|
height: 36rpx
|
||||||
|
border-radius: 50%
|
||||||
|
background: rgba(0,0,0,0.3)
|
||||||
|
}
|
||||||
|
.cover-triangle::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-40%, -50%) rotate(90deg);
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 8rpx solid transparent;
|
||||||
|
border-right: 8rpx solid transparent;
|
||||||
|
border-bottom: 12rpx solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.salary
|
||||||
|
color: #4C6EFB;
|
||||||
|
font-size: 28rpx
|
||||||
|
display: flex
|
||||||
|
align-items: flex-start
|
||||||
|
justify-content: space-between
|
||||||
|
.flame
|
||||||
|
margin-top: 4rpx
|
||||||
|
margin-right: 4rpx
|
||||||
|
width: 24rpx
|
||||||
|
height: 31rpx
|
||||||
|
.title
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
white-space: pre-wrap
|
||||||
|
.desc
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #6C7282;
|
||||||
|
margin-top: 6rpx;
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
static/.DS_Store
vendored
BIN
static/font/.DS_Store
vendored
BIN
static/font/DingTalk JinBuTi_min.woff2
Normal file
BIN
static/gif/logo.gif
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
static/icon/.DS_Store
vendored
BIN
static/icon/arrow-down.png
Normal file
|
After Width: | Height: | Size: 341 B |
BIN
static/icon/back-white.png
Normal file
|
After Width: | Height: | Size: 187 B |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 34 KiB |
BIN
static/icon/background3.png
Normal file
|
After Width: | Height: | Size: 47 KiB |
BIN
static/icon/call.png
Normal file
|
After Width: | Height: | Size: 380 B |
BIN
static/icon/pintDate.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/icon/plus.png
Normal file
|
After Width: | Height: | Size: 263 B |
BIN
static/icon/point3.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/icon/pointpeople.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/icon/share.png
Normal file
|
After Width: | Height: | Size: 350 B |
BIN
static/icon/title-bg.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/imgs/fristEntry.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
36
static/share.html
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>找工作,用 AI 更高效|青岛市智能求职平台</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<!-- 微信分享卡片标签(动态填充) -->
|
||||||
|
<meta property="og:title" content="找工作,用 AI 更高效|青岛市智能求职平台" />
|
||||||
|
<meta property="og:description" content="融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!" />
|
||||||
|
<meta property="og:image" content="https://qd.zhaopinzao8dian.com/file/csn/qd_shareLogo.jpg" />
|
||||||
|
<meta property="og:url" content="https://qd.zhaopinzao8dian.com" />
|
||||||
|
<meta name="description" content="融合海量岗位、智能简历匹配、竞争力分析,助你精准锁定理想职位!">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const params = new URLSearchParams(location.search)
|
||||||
|
const jobId = params.get('jobId')
|
||||||
|
// document.querySelector('meta[property="og:url"]').setAttribute('content', location.href)
|
||||||
|
|
||||||
|
// 延迟跳转到 Vue 页面
|
||||||
|
setTimeout(() => {
|
||||||
|
if (jobId) {
|
||||||
|
window.location.href = `/#/packageA/pages/post/post?jobId=${jobId}`
|
||||||
|
} else {
|
||||||
|
window.location.href = '/#/'
|
||||||
|
}
|
||||||
|
}, 300)
|
||||||
|
// 测试使用 分享等形式打开
|
||||||
|
// http://localhost:5173/app/static/share.html?jobId=MTE4MzQ4NTE4
|
||||||
|
// http://localhost:5173/app/static/share.html?jobId=MTE4MzQ4NTE4&_t=1752221704007#/
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>正在加载中...</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
static/svg/seemore.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753846081356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M256 384c38.272 0 72.576 16.768 96 43.392C332.16 449.92 320 479.552 320 512c0 32.448 12.096 62.08 32 84.608A128 128 0 1 1 256 384zM512 384c38.272 0 72.576 16.768 96 43.392C588.16 449.92 576 479.552 576 512c0 32.448 12.096 62.08 32 84.608A128 128 0 1 1 512 384z" fill="#256BFA" p-id="1009"></path><path d="M768 512m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z" fill="#256BFA" p-id="1010"></path></svg>
|
||||||
|
After Width: | Height: | Size: 736 B |
BIN
static/tabbar/.DS_Store
vendored
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.9 KiB |
BIN
stores/.DS_Store
vendored
@@ -7,6 +7,8 @@ import {
|
|||||||
import {
|
import {
|
||||||
msg
|
msg
|
||||||
} from '@/common/globalFunction.js'
|
} from '@/common/globalFunction.js'
|
||||||
|
import config from '../config';
|
||||||
|
|
||||||
const useLocationStore = defineStore("location", () => {
|
const useLocationStore = defineStore("location", () => {
|
||||||
// 定义状态
|
// 定义状态
|
||||||
const longitudeVal = ref(null) // 经度
|
const longitudeVal = ref(null) // 经度
|
||||||
@@ -25,10 +27,17 @@ const useLocationStore = defineStore("location", () => {
|
|||||||
longitude: 120.382665,
|
longitude: 120.382665,
|
||||||
latitude: 36.066938
|
latitude: 36.066938
|
||||||
}
|
}
|
||||||
longitudeVal.value = resd.longitude
|
if (config.UsingSimulatedPositioning) { // 使用模拟定位
|
||||||
latitudeVal.value = resd.latitude
|
longitudeVal.value = resd.longitude
|
||||||
msg('用户位置获取成功')
|
latitudeVal.value = resd.latitude
|
||||||
resole(resd)
|
msg('用户位置获取成功')
|
||||||
|
resole(resd)
|
||||||
|
} else {
|
||||||
|
longitudeVal.value = res.longitude
|
||||||
|
latitudeVal.value = res.latitude
|
||||||
|
msg('用户位置获取成功')
|
||||||
|
resole(res)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
fail: function(err) {
|
fail: function(err) {
|
||||||
// longitudeVal.value = ''
|
// longitudeVal.value = ''
|
||||||
|
|||||||
@@ -15,6 +15,22 @@ import {
|
|||||||
// 控制消息
|
// 控制消息
|
||||||
export const useReadMsg = defineStore('readMsg', () => {
|
export const useReadMsg = defineStore('readMsg', () => {
|
||||||
const msgList = ref([])
|
const msgList = ref([])
|
||||||
|
const badges = ref([{
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
count: 0
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
// 计算总未读数量,基于 notReadCount 字段
|
// 计算总未读数量,基于 notReadCount 字段
|
||||||
const unreadCount = computed(() =>
|
const unreadCount = computed(() =>
|
||||||
@@ -30,14 +46,22 @@ export const useReadMsg = defineStore('readMsg', () => {
|
|||||||
// 设置 TabBar 角标
|
// 设置 TabBar 角标
|
||||||
function updateTabBarBadge() {
|
function updateTabBarBadge() {
|
||||||
const count = unreadCount.value
|
const count = unreadCount.value
|
||||||
|
const index = 3
|
||||||
|
const countVal = count > 99 ? '99+' : String(count)
|
||||||
if (count === 0) {
|
if (count === 0) {
|
||||||
uni.removeTabBarBadge({
|
uni.removeTabBarBadge({
|
||||||
index: 3
|
index
|
||||||
}) // 替换为你消息页面的 TabBar index
|
}) // 替换为你消息页面的 TabBar index
|
||||||
|
badges.value[index] = {
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
badges.value[index] = {
|
||||||
|
count: countVal
|
||||||
|
}
|
||||||
uni.setTabBarBadge({
|
uni.setTabBarBadge({
|
||||||
index: 3,
|
index,
|
||||||
text: count > 99 ? '99+' : String(count)
|
text: countVal
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -76,6 +100,7 @@ export const useReadMsg = defineStore('readMsg', () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
badges,
|
||||||
msgList,
|
msgList,
|
||||||
unreadMsgList,
|
unreadMsgList,
|
||||||
unreadCount,
|
unreadCount,
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ import {
|
|||||||
msg
|
msg
|
||||||
} from '@/common/globalFunction.js'
|
} from '@/common/globalFunction.js'
|
||||||
import baseDB from './BaseDBStore';
|
import baseDB from './BaseDBStore';
|
||||||
|
import config from '../config';
|
||||||
|
|
||||||
class JobRecommendation {
|
class JobRecommendation {
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -62,6 +62,30 @@ class JobRecommendation {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算加权用户行为偏好
|
||||||
|
* @param {Object} data - 用户行为数据,包括 categories、experience、areas、salary 等
|
||||||
|
* @param {Object} weights - 每一类行为的权重
|
||||||
|
* @returns {Object} 加权合并后的结果(key 为行为项,value 为权重后的分值)
|
||||||
|
*/
|
||||||
|
function applyWeightsToUserData(data, weights) {
|
||||||
|
const result = {}
|
||||||
|
|
||||||
|
for (const key in data) {
|
||||||
|
if (key === 'salary') {
|
||||||
|
result.salary = weights.salary
|
||||||
|
} else if (typeof data[key] === 'object') {
|
||||||
|
result[key] = {}
|
||||||
|
for (const itemKey in data[key]) {
|
||||||
|
const rawValue = data[key][itemKey]
|
||||||
|
result[key][itemKey] = parseFloat((rawValue * weights[key]).toFixed(2))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
// **🔹 创建推荐系统**
|
// **🔹 创建推荐系统**
|
||||||
export const jobRecommender = new JobRecommendation();
|
export const jobRecommender = new JobRecommendation();
|
||||||
|
|
||||||
@@ -121,8 +145,9 @@ export const useRecommedIndexedDBStore = defineStore("indexedDB", () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function analyzer(jobsData) {
|
function analyzer(jobsData) {
|
||||||
const result = jobAnalyzer.analyze(jobsData)
|
const result = jobAnalyzer.analyze(jobsData) // 转换格式化
|
||||||
const sort = jobAnalyzer.printUnifiedResults(result)
|
const result2 = applyWeightsToUserData(result, config.weights) // 添加权重
|
||||||
|
const sort = jobAnalyzer.printUnifiedResults(result2) // 转换格式化
|
||||||
return {
|
return {
|
||||||
result,
|
result,
|
||||||
sort
|
sort
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ const useUserStore = defineStore("user", () => {
|
|||||||
hasLogin.value = true;
|
hasLogin.value = true;
|
||||||
userInfo.value = value;
|
userInfo.value = value;
|
||||||
openId.value = value.wxOpenId;
|
openId.value = value.wxOpenId;
|
||||||
token.value = value.token
|
token.value = value.token;
|
||||||
uni.setStorage({
|
uni.setStorage({
|
||||||
key: 'token',
|
key: 'token',
|
||||||
data: value.token
|
data: value.token
|
||||||
|
|||||||
@@ -18,6 +18,9 @@ import {
|
|||||||
UUID
|
UUID
|
||||||
} from '../lib/uuid-min';
|
} from '../lib/uuid-min';
|
||||||
import config from '../config';
|
import config from '../config';
|
||||||
|
import {
|
||||||
|
clearJobMoreMap
|
||||||
|
} from '@/utils/markdownParser';
|
||||||
|
|
||||||
const useChatGroupDBStore = defineStore("messageGroup", () => {
|
const useChatGroupDBStore = defineStore("messageGroup", () => {
|
||||||
const tableName = ref('messageGroup')
|
const tableName = ref('messageGroup')
|
||||||
@@ -57,6 +60,7 @@ const useChatGroupDBStore = defineStore("messageGroup", () => {
|
|||||||
if (!baseDB.isDBReady) await baseDB.initDB();
|
if (!baseDB.isDBReady) await baseDB.initDB();
|
||||||
chatSessionID.value = sessionId
|
chatSessionID.value = sessionId
|
||||||
const list = await baseDB.db.queryByField(massageName.value, 'parentGroupId', sessionId);
|
const list = await baseDB.db.queryByField(massageName.value, 'parentGroupId', sessionId);
|
||||||
|
clearJobMoreMap() // 清空对话 加载更多参数
|
||||||
if (list.length) {
|
if (list.length) {
|
||||||
console.log('本地数据库存在该对话数据', list)
|
console.log('本地数据库存在该对话数据', list)
|
||||||
messages.value = list
|
messages.value = list
|
||||||
|
|||||||
BIN
uni_modules/.DS_Store
vendored
@@ -1,39 +0,0 @@
|
|||||||
## 1.0.8(2024-03-28)
|
|
||||||
- 修复 在vue2下:style动态绑定导致编译失败的bug
|
|
||||||
## 1.0.7(2024-01-20)
|
|
||||||
- 修复 长文本回显超过容器的bug,超过容器部分显示省略号
|
|
||||||
## 1.0.6(2023-04-12)
|
|
||||||
- 修复 微信小程序点击时会改变背景颜色的 bug
|
|
||||||
## 1.0.5(2023-02-03)
|
|
||||||
- 修复 禁用时会显示清空按钮
|
|
||||||
## 1.0.4(2023-02-02)
|
|
||||||
- 优化 查询条件短期内多次变更只查询最后一次变更后的结果
|
|
||||||
- 调整 内部缓存键名调整为 uni-data-select-lastSelectedValue
|
|
||||||
## 1.0.3(2023-01-16)
|
|
||||||
- 修复 不关联服务空间报错的问题
|
|
||||||
## 1.0.2(2023-01-14)
|
|
||||||
- 新增 属性 `format` 可用于格式化显示选项内容
|
|
||||||
## 1.0.1(2022-12-06)
|
|
||||||
- 修复 当where变化时,数据不会自动更新的问题
|
|
||||||
## 0.1.9(2022-09-05)
|
|
||||||
- 修复 微信小程序下拉框出现后选择会点击到蒙板后面的输入框
|
|
||||||
## 0.1.8(2022-08-29)
|
|
||||||
- 修复 点击的位置不准确
|
|
||||||
## 0.1.7(2022-08-12)
|
|
||||||
- 新增 支持 disabled 属性
|
|
||||||
## 0.1.6(2022-07-06)
|
|
||||||
- 修复 pc端宽度异常的bug
|
|
||||||
## 0.1.5
|
|
||||||
- 修复 pc端宽度异常的bug
|
|
||||||
## 0.1.4(2022-07-05)
|
|
||||||
- 优化 显示样式
|
|
||||||
## 0.1.3(2022-06-02)
|
|
||||||
- 修复 localdata 赋值不生效的 bug
|
|
||||||
- 新增 支持 uni.scss 修改颜色
|
|
||||||
- 新增 支持选项禁用(数据选项设置 disabled: true 即禁用)
|
|
||||||
## 0.1.2(2022-05-08)
|
|
||||||
- 修复 当 value 为 0 时选择不生效的 bug
|
|
||||||
## 0.1.1(2022-05-07)
|
|
||||||
- 新增 记住上次的选项(仅 collection 存在时有效)
|
|
||||||
## 0.1.0(2022-04-22)
|
|
||||||
- 初始化
|
|
||||||
@@ -1,574 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-stat__select">
|
|
||||||
<span v-if="label" class="uni-label-text hide-on-phone">{{ label + ':' }}</span>
|
|
||||||
<view class="uni-stat-box" :class="{ 'uni-stat__actived': current }">
|
|
||||||
<view class="uni-select" :class="{ 'uni-select--disabled': disabled, 'uni-select--border': border }">
|
|
||||||
<view class="uni-select__input-box" @click="toggleSelector">
|
|
||||||
<view v-if="current" class="uni-select__input-text" :style="viewStyle">{{ textShow }}</view>
|
|
||||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">
|
|
||||||
{{ typePlaceholder }}
|
|
||||||
</view>
|
|
||||||
<view v-if="current && clear && !disabled" @click.stop="clearVal">
|
|
||||||
<uni-icons type="clear" color="#c0c4cc" size="24" />
|
|
||||||
</view>
|
|
||||||
<view v-else>
|
|
||||||
<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
|
||||||
<view class="uni-select__selector" :style="getOffsetByPlacement" v-if="showSelector">
|
|
||||||
<view :class="placement == 'bottom' ? 'uni-popper__arrow_bottom' : 'uni-popper__arrow_top'"></view>
|
|
||||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
|
||||||
<view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
|
|
||||||
<text>{{ emptyTips }}</text>
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
v-else
|
|
||||||
class="uni-select__selector-item"
|
|
||||||
v-for="(item, index) in mixinDatacomResData"
|
|
||||||
:key="index"
|
|
||||||
@click="change(item)"
|
|
||||||
>
|
|
||||||
<text :class="{ 'uni-select__selector__disabled': item.disable }">
|
|
||||||
{{ formatItemName(item) }}
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* DataChecklist 数据选择器
|
|
||||||
* @description 通过数据渲染的下拉框组件
|
|
||||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
|
||||||
* @property {String} value 默认值
|
|
||||||
* @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
|
|
||||||
* @property {Boolean} clear 是否可以清空已选项
|
|
||||||
* @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
|
|
||||||
* @property {String} label 左侧标题
|
|
||||||
* @property {String} placeholder 输入框的提示文字
|
|
||||||
* @property {Boolean} disabled 是否禁用
|
|
||||||
* @property {String} placement 弹出位置
|
|
||||||
* @value top 顶部弹出
|
|
||||||
* @value bottom 底部弹出(default)
|
|
||||||
* @event {Function} change 选中发生变化触发
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'uni-data-select',
|
|
||||||
mixins: [uniCloud.mixinDatacom || {}],
|
|
||||||
props: {
|
|
||||||
localdata: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
modelValue: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: '请选择',
|
|
||||||
},
|
|
||||||
emptyTips: {
|
|
||||||
type: String,
|
|
||||||
default: '无选项',
|
|
||||||
},
|
|
||||||
clear: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
defItem: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
placement: {
|
|
||||||
type: String,
|
|
||||||
default: 'bottom',
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
viewStyle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showSelector: false,
|
|
||||||
current: '',
|
|
||||||
mixinDatacomResData: [],
|
|
||||||
apps: [],
|
|
||||||
channels: [],
|
|
||||||
cacheKey: 'uni-data-select-lastSelectedValue',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.debounceGet = this.debounce(() => {
|
|
||||||
this.query();
|
|
||||||
}, 300);
|
|
||||||
if (this.collection && !this.localdata.length) {
|
|
||||||
this.debounceGet();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
typePlaceholder() {
|
|
||||||
const text = {
|
|
||||||
'opendb-stat-app-versions': '版本',
|
|
||||||
'opendb-app-channels': '渠道',
|
|
||||||
'opendb-app-list': '应用',
|
|
||||||
};
|
|
||||||
const common = this.placeholder;
|
|
||||||
const placeholder = text[this.collection];
|
|
||||||
return placeholder ? common + placeholder : common;
|
|
||||||
},
|
|
||||||
valueCom() {
|
|
||||||
// #ifdef VUE3
|
|
||||||
return this.modelValue;
|
|
||||||
// #endif
|
|
||||||
// #ifndef VUE3
|
|
||||||
return this.value;
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
textShow() {
|
|
||||||
// 长文本显示
|
|
||||||
let text = this.current;
|
|
||||||
if (text.length > 10) {
|
|
||||||
return text.slice(0, 25) + '...';
|
|
||||||
}
|
|
||||||
return text;
|
|
||||||
},
|
|
||||||
getOffsetByPlacement() {
|
|
||||||
switch (this.placement) {
|
|
||||||
case 'top':
|
|
||||||
return 'bottom:calc(100% + 12px);';
|
|
||||||
case 'bottom':
|
|
||||||
return 'top:calc(100% + 12px);';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
localdata: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val, old) {
|
|
||||||
if (Array.isArray(val) && old !== val) {
|
|
||||||
this.mixinDatacomResData = val;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
valueCom(val, old) {
|
|
||||||
this.initDefVal();
|
|
||||||
},
|
|
||||||
mixinDatacomResData: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
if (val.length) {
|
|
||||||
this.initDefVal();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
debounce(fn, time = 100) {
|
|
||||||
let timer = null;
|
|
||||||
return function (...args) {
|
|
||||||
if (timer) clearTimeout(timer);
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
fn.apply(this, args);
|
|
||||||
}, time);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// 执行数据库查询
|
|
||||||
query() {
|
|
||||||
this.mixinDatacomEasyGet();
|
|
||||||
},
|
|
||||||
// 监听查询条件变更事件
|
|
||||||
onMixinDatacomPropsChange() {
|
|
||||||
if (this.collection) {
|
|
||||||
this.debounceGet();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initDefVal() {
|
|
||||||
let defValue = '';
|
|
||||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
|
||||||
defValue = this.valueCom;
|
|
||||||
} else {
|
|
||||||
let strogeValue;
|
|
||||||
if (this.collection) {
|
|
||||||
strogeValue = this.getCache();
|
|
||||||
}
|
|
||||||
if (strogeValue || strogeValue === 0) {
|
|
||||||
defValue = strogeValue;
|
|
||||||
} else {
|
|
||||||
let defItem = '';
|
|
||||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
|
||||||
defItem = this.mixinDatacomResData[this.defItem - 1].value;
|
|
||||||
}
|
|
||||||
defValue = defItem;
|
|
||||||
}
|
|
||||||
if (defValue || defValue === 0) {
|
|
||||||
this.emit(defValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const def = this.mixinDatacomResData.find((item) => item.value === defValue);
|
|
||||||
this.current = def ? this.formatItemName(def) : '';
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {[String, Number]} value
|
|
||||||
* 判断用户给的 value 是否同时为禁用状态
|
|
||||||
*/
|
|
||||||
isDisabled(value) {
|
|
||||||
let isDisabled = false;
|
|
||||||
|
|
||||||
this.mixinDatacomResData.forEach((item) => {
|
|
||||||
if (item.value === value) {
|
|
||||||
isDisabled = item.disable;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return isDisabled;
|
|
||||||
},
|
|
||||||
|
|
||||||
clearVal() {
|
|
||||||
this.emit('');
|
|
||||||
if (this.collection) {
|
|
||||||
this.removeCache();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
change(item) {
|
|
||||||
if (!item.disable) {
|
|
||||||
this.showSelector = false;
|
|
||||||
this.current = this.formatItemName(item);
|
|
||||||
this.emit(item.value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emit(val) {
|
|
||||||
this.$emit('input', val);
|
|
||||||
this.$emit('update:modelValue', val);
|
|
||||||
this.$emit('change', val);
|
|
||||||
if (this.collection) {
|
|
||||||
this.setCache(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleSelector() {
|
|
||||||
if (this.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.showSelector = !this.showSelector;
|
|
||||||
},
|
|
||||||
formatItemName(item) {
|
|
||||||
let { text, value, channel_code } = item;
|
|
||||||
channel_code = channel_code ? `(${channel_code})` : '';
|
|
||||||
|
|
||||||
if (this.format) {
|
|
||||||
// 格式化输出
|
|
||||||
let str = '';
|
|
||||||
str = this.format;
|
|
||||||
for (let key in item) {
|
|
||||||
str = str.replace(new RegExp(`{${key}}`, 'g'), item[key]);
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
} else {
|
|
||||||
return this.collection.indexOf('app-list') > 0
|
|
||||||
? `${text}(${value})`
|
|
||||||
: text
|
|
||||||
? text
|
|
||||||
: `未命名${channel_code}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 获取当前加载的数据
|
|
||||||
getLoadData() {
|
|
||||||
return this.mixinDatacomResData;
|
|
||||||
},
|
|
||||||
// 获取当前缓存key
|
|
||||||
getCurrentCacheKey() {
|
|
||||||
return this.collection;
|
|
||||||
},
|
|
||||||
// 获取缓存
|
|
||||||
getCache(name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
return cacheData[name];
|
|
||||||
},
|
|
||||||
// 设置缓存
|
|
||||||
setCache(value, name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
cacheData[name] = value;
|
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
|
||||||
},
|
|
||||||
// 删除缓存
|
|
||||||
removeCache(name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
delete cacheData[name];
|
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
$uni-base-color: #6a6a6a !default;
|
|
||||||
$uni-main-color: #333 !default;
|
|
||||||
$uni-secondary-color: #909399 !default;
|
|
||||||
$uni-border-3: #e5e5e5;
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.hide-on-phone {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
.uni-stat__select {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
// padding: 15px;
|
|
||||||
/* #ifdef H5 */
|
|
||||||
cursor: pointer;
|
|
||||||
/* #endif */
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-stat-box {
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-stat__actived {
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
// outline: 1px solid #2979ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-label-text {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $uni-base-color;
|
|
||||||
margin: auto 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select {
|
|
||||||
font-size: 14px;
|
|
||||||
// border: 1px solid $uni-border-3;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0 5px;
|
|
||||||
padding-left: 10px;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
user-select: none;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
// border-bottom: solid 1px $uni-border-3;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
height: 35px;
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--border {
|
|
||||||
border: 1px solid $uni-border-3;
|
|
||||||
border-bottom: solid 1px $uni-border-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__label {
|
|
||||||
font-size: 16px;
|
|
||||||
// line-height: 22px;
|
|
||||||
height: 35px;
|
|
||||||
padding-right: 10px;
|
|
||||||
color: $uni-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-box {
|
|
||||||
height: 35px;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
height: 22px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-plac {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $uni-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #ebeef5;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
z-index: 3;
|
|
||||||
padding: 4px 0;
|
|
||||||
min-width: 300rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-scroll {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
max-height: 200px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #ifdef H5 */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.uni-select__selector-scroll {
|
|
||||||
max-height: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
|
|
||||||
.uni-select__selector-empty,
|
|
||||||
.uni-select__selector-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
/* #endif */
|
|
||||||
line-height: 35px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
/* border-bottom: solid 1px $uni-border-3; */
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-item:hover {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-empty:last-child,
|
|
||||||
.uni-select__selector-item:last-child {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
border-bottom: none;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector__disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* picker 弹出层通用的指示小三角 */
|
|
||||||
.uni-popper__arrow_bottom,
|
|
||||||
.uni-popper__arrow_bottom::after,
|
|
||||||
.uni-popper__arrow_top,
|
|
||||||
.uni-popper__arrow_top::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow_bottom {
|
|
||||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
|
||||||
top: -6px;
|
|
||||||
left: 10%;
|
|
||||||
margin-right: 3px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-bottom-color: #ebeef5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow_bottom::after {
|
|
||||||
content: ' ';
|
|
||||||
top: 1px;
|
|
||||||
margin-left: -6px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow_top {
|
|
||||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
|
||||||
bottom: -6px;
|
|
||||||
left: 10%;
|
|
||||||
margin-right: 3px;
|
|
||||||
border-bottom-width: 0;
|
|
||||||
border-top-color: #ebeef5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow_top::after {
|
|
||||||
content: ' ';
|
|
||||||
bottom: 1px;
|
|
||||||
margin-left: -6px;
|
|
||||||
border-bottom-width: 0;
|
|
||||||
border-top-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-text {
|
|
||||||
// width: 280px;
|
|
||||||
width: 100%;
|
|
||||||
color: $uni-main-color;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-o-text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-placeholder {
|
|
||||||
color: $uni-base-color;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select--mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "uni-data-select",
|
|
||||||
"displayName": "uni-data-select 下拉框选择器",
|
|
||||||
"version": "1.0.8",
|
|
||||||
"description": "通过数据驱动的下拉框选择器",
|
|
||||||
"keywords": [
|
|
||||||
"uni-ui",
|
|
||||||
"select",
|
|
||||||
"uni-data-select",
|
|
||||||
"下拉框",
|
|
||||||
"下拉选"
|
|
||||||
],
|
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.1.1"
|
|
||||||
},
|
|
||||||
"directories": {
|
|
||||||
"example": "../../temps/example_temps"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
|
||||||
"type": "component-vue"
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": ["uni-load-more"],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y",
|
|
||||||
"alipay": "n"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"App": {
|
|
||||||
"app-vue": "u",
|
|
||||||
"app-nvue": "n"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "y",
|
|
||||||
"IE": "y",
|
|
||||||
"Edge": "y",
|
|
||||||
"Firefox": "y",
|
|
||||||
"Safari": "y"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "u",
|
|
||||||
"百度": "u",
|
|
||||||
"字节跳动": "u",
|
|
||||||
"QQ": "u",
|
|
||||||
"京东": "u"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
## DataSelect 下拉框选择器
|
|
||||||
> **组件名:uni-data-select**
|
|
||||||
> 代码块: `uDataSelect`
|
|
||||||
|
|
||||||
当选项过多时,使用下拉菜单展示并选择内容
|
|
||||||
|
|
||||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-select)
|
|
||||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view style="width: 100%; height: 100%">
|
|
||||||
<view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap"></view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import tools from '../../tools.js';
|
|
||||||
import iconPath from '../../static/point2.png';
|
|
||||||
import iconRangePath from '../../static/range.png';
|
|
||||||
export default {
|
|
||||||
name: 'TianDiTu-Map',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
Tmap: null,
|
|
||||||
option: {
|
|
||||||
type: '',
|
|
||||||
apikey: '',
|
|
||||||
cover: null,
|
|
||||||
lng: '',
|
|
||||||
lat: '',
|
|
||||||
png: iconPath,
|
|
||||||
rangePng: iconRangePath,
|
|
||||||
showLabel: true,
|
|
||||||
showCirle: false,
|
|
||||||
range: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
apiKey: {
|
|
||||||
type: String,
|
|
||||||
require: true,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
customIcon: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showLabel: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showCirle: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
compliteonLoadTianDiTu() {
|
|
||||||
this.$emit('onLoadTianDiTu');
|
|
||||||
},
|
|
||||||
initCharts(lng, lat) {
|
|
||||||
this.option = {
|
|
||||||
...this.option,
|
|
||||||
apikey: this.apiKey,
|
|
||||||
showLabel: this.showLabel,
|
|
||||||
showCirle: this.showCirle,
|
|
||||||
lng,
|
|
||||||
lat,
|
|
||||||
png: this.customIcon || this.option.png,
|
|
||||||
type: 'open',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
upDataCharts(lng, lat) {
|
|
||||||
this.option = {
|
|
||||||
...this.option,
|
|
||||||
type: 'Icon',
|
|
||||||
lng,
|
|
||||||
lat,
|
|
||||||
png: this.customIcon || this.option.png,
|
|
||||||
type: 'update',
|
|
||||||
showLabel: this.showLabel,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
addFeature(cover) {
|
|
||||||
this.option = {
|
|
||||||
...this.option,
|
|
||||||
type: 'Icon',
|
|
||||||
cover,
|
|
||||||
png: this.customIcon || this.option.png,
|
|
||||||
type: 'addFeature',
|
|
||||||
showLabel: this.showLabel,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
changeRange(range) {
|
|
||||||
this.option = {
|
|
||||||
...this.option,
|
|
||||||
type: 'Icon',
|
|
||||||
png: this.customIcon || this.option.png,
|
|
||||||
type: 'changeRange',
|
|
||||||
showLabel: this.showLabel,
|
|
||||||
showCirle: this.showCirle,
|
|
||||||
range: range,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
selectItem(info) {
|
|
||||||
this.$emit('onSelect', info);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script module="Trenderjs" lang="renderjs">
|
|
||||||
var Tmap = null;
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
options: {},
|
|
||||||
circle: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initTMap(newValue, oldValue, ownerInstance, instance) {
|
|
||||||
this.options = newValue
|
|
||||||
if (newValue.type === 'open' && newValue.apikey) {
|
|
||||||
if (!window.T) {
|
|
||||||
const script = document.createElement('script')
|
|
||||||
script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
|
|
||||||
script.onload = this.initChartsRender.bind(this)
|
|
||||||
document.head.appendChild(script)
|
|
||||||
console.log('open')
|
|
||||||
} else {
|
|
||||||
const {
|
|
||||||
lng,
|
|
||||||
lat
|
|
||||||
} = this.options
|
|
||||||
Tmap = null;
|
|
||||||
Tmap = new T.Map('mapDiv', {
|
|
||||||
projection: 'EPSG:4326',
|
|
||||||
});
|
|
||||||
const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
|
|
||||||
const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
|
|
||||||
Tmap.addControl(scale);
|
|
||||||
Tmap.addControl(control);
|
|
||||||
this.upDataChartsRender(lng, lat)
|
|
||||||
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const {
|
|
||||||
lng,
|
|
||||||
lat,
|
|
||||||
cover,
|
|
||||||
showLabel,
|
|
||||||
showCirle,
|
|
||||||
range
|
|
||||||
} = newValue
|
|
||||||
|
|
||||||
switch (newValue.type) {
|
|
||||||
case 'update':
|
|
||||||
this.upDataChartsRender(lng, lat)
|
|
||||||
break;
|
|
||||||
case 'addFeature':
|
|
||||||
Tmap.clearOverLays()
|
|
||||||
this.circle = []
|
|
||||||
cover.map((item, index) => {
|
|
||||||
this.setIcon(item.lon, item.lat, false, showLabel, false, showCirle, item)
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'changeRange':
|
|
||||||
this.setRange(range)
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initChartsRender() {
|
|
||||||
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
|
||||||
const {
|
|
||||||
lng,
|
|
||||||
lat
|
|
||||||
} = this.options
|
|
||||||
var that = this;
|
|
||||||
Tmap = new T.Map('mapDiv', {
|
|
||||||
projection: 'EPSG:4326',
|
|
||||||
});
|
|
||||||
this.upDataChartsRender(lng, lat)
|
|
||||||
const control = new T.Control.Zoom({ position: T_ANCHOR_TOP_RIGHT});
|
|
||||||
const scale = new T.Control.Scale({ position: T_ANCHOR_TOP_LEFT});
|
|
||||||
Tmap.addControl(scale);
|
|
||||||
Tmap.addControl(control);
|
|
||||||
console.log('初始化1')
|
|
||||||
},
|
|
||||||
upDataChartsRender(lng, lat, zoom = 15) {
|
|
||||||
if (!Tmap) return
|
|
||||||
Tmap.centerAndZoom(new T.LngLat(lng, lat), zoom);
|
|
||||||
},
|
|
||||||
setRange(range) {
|
|
||||||
for (let item in this.circle) {
|
|
||||||
this.circle[item].setRadius(range * 1000)
|
|
||||||
}
|
|
||||||
// this.circle.setRadius(range * 1000)
|
|
||||||
},
|
|
||||||
setIcon(lng, lat, isClear, isClick = false, isLabel = false, isCirle = false, item) {
|
|
||||||
if (isClear) {
|
|
||||||
Tmap.clearOverLays()
|
|
||||||
}
|
|
||||||
const latlng = new T.LngLat(lng, lat)
|
|
||||||
const icon = new T.Icon({
|
|
||||||
iconUrl: this.options.png,
|
|
||||||
iconSize: new T.Point(30, 30),
|
|
||||||
iconAnchor: new T.Point(15, 30)
|
|
||||||
});
|
|
||||||
if (isLabel) {
|
|
||||||
const label = new T.Label({
|
|
||||||
text: `<div style="max-width: 50px; overflow: hidden">${item.label}</div>`,
|
|
||||||
position: latlng,
|
|
||||||
offset: new T.Point(-50, 0)
|
|
||||||
});
|
|
||||||
Tmap.addOverLay(label);
|
|
||||||
}
|
|
||||||
if(isCirle) {
|
|
||||||
const circleObj = new T.Circle(latlng , parseFloat(50), {
|
|
||||||
color:"#13C57C",weight:2,opacity:1,fillColor:"#13C57C",fillOpacity:0.24
|
|
||||||
})
|
|
||||||
this.circle.push(circleObj)
|
|
||||||
Tmap.addOverLay(circleObj);
|
|
||||||
}
|
|
||||||
const marker = new T.Marker(latlng, {
|
|
||||||
icon
|
|
||||||
});
|
|
||||||
|
|
||||||
if (isClick) {
|
|
||||||
this.removeMarkerClick(marker);
|
|
||||||
//注册标注的点击事件
|
|
||||||
marker.addEventListener("click", this.MarkerClick.bind(null, item));
|
|
||||||
}
|
|
||||||
Tmap.addOverLay(marker);
|
|
||||||
},
|
|
||||||
removeMarkerClick(marker) {
|
|
||||||
//移除标注的点击事件
|
|
||||||
marker.removeEventListener("click", this.MarkerClick);
|
|
||||||
},
|
|
||||||
MarkerClick(item, e) {
|
|
||||||
this.openInfo(item.label, e)
|
|
||||||
this.$ownerInstance.callMethod('selectItem', item)
|
|
||||||
},
|
|
||||||
openInfo(content, e) {
|
|
||||||
const point = e.lnglat;
|
|
||||||
const marker = new T.Marker(point); // 创建标注
|
|
||||||
const markerInfoWin = new T.InfoWindow(content, {
|
|
||||||
offset: new T.Point(0, -30)
|
|
||||||
}); // 创建信息窗口对象
|
|
||||||
Tmap.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
#mapDiv {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .tdt-control-copyright {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .tdt-label {
|
|
||||||
/* background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 0; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||