commit
9f287fa67e
27 changed files with 2196 additions and 0 deletions
@ -0,0 +1,23 @@ |
|||||
|
.DS_Store |
||||
|
node_modules/ |
||||
|
unpackage/ |
||||
|
dist/ |
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.project |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw* |
||||
@ -0,0 +1,23 @@ |
|||||
|
<script> |
||||
|
export default { |
||||
|
onLaunch: function() { |
||||
|
console.log('App Launch') |
||||
|
}, |
||||
|
onShow: function() { |
||||
|
console.log('App Show') |
||||
|
console.log(uni.getStorageSync('loginRes')) |
||||
|
if(!uni.getStorageSync('loginRes') || !uni.getStorageSync('loginRes').accessToken){ |
||||
|
uni.navigateTo({ |
||||
|
url:'/pages/login/login' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onHide: function() { |
||||
|
console.log('App Hide') |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/*每个页面公共css */ |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
// api.js
|
||||
|
|
||||
|
// 基础URL，可以根据环境来设置
|
||||
|
// uEnvDev
|
||||
|
const accountInfo = wx.getAccountInfoSync(); |
||||
|
// env类型 develop:开发版、trial:体验版、release:正式版
|
||||
|
export const env = accountInfo.miniProgram.envVersion; |
||||
|
if (!env) { |
||||
|
console.error("获取运行环境失败!"); |
||||
|
} |
||||
|
const baseApi = { |
||||
|
// 开发版
|
||||
|
develop: "http://110.40.156.216:30005/api", |
||||
|
// 体验版
|
||||
|
trial: "http://110.40.156.216:30005/api", |
||||
|
// 正式版
|
||||
|
release: "http://110.40.156.216:30005/api" |
||||
|
}; |
||||
|
console.log(env, 'env') |
||||
|
// request请求baseURL
|
||||
|
const BASE_URL = baseApi[env] || 'http://110.40.156.216:30005/api'; |
||||
|
|
||||
|
|
||||
|
function request(url, method, data = {}) { |
||||
|
const userInfo = uni.getStorageSync('loginInfo') || {}; |
||||
|
const UTCOffset = new Date().getTimezoneOffset(); |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.request({ |
||||
|
url: BASE_URL + url, // 完整的URL
|
||||
|
method: method, |
||||
|
data: data, |
||||
|
header: { |
||||
|
'AccessToken': userInfo.accessToken || '-1', // 请求头，可根据需要调整
|
||||
|
'UserId': userInfo.userId || '1', // 请求头，可根据需要调整
|
||||
|
'LanguageType': 0, |
||||
|
'LoginName': userInfo.loginName || '', |
||||
|
'CompanyId': userInfo.companyId || '', |
||||
|
'UTCOffset': UTCOffset, |
||||
|
}, |
||||
|
success: (res) => { |
||||
|
if (res.statusCode === 200) { |
||||
|
console.log(res) |
||||
|
if (res.data.code === 200 | res.data.code === 0) { |
||||
|
resolve(res.data) |
||||
|
} else { |
||||
|
reject(res.data) |
||||
|
} |
||||
|
/* if (res.data.code === 500) { |
||||
|
uni.showToast({ |
||||
|
title: '系统错误', // 提示的文本内容
|
||||
|
icon: 'none', // 提示的图标，可选值：'success' | 'loading' | 'none'
|
||||
|
duration: 2000 // 提示框的显示时间，单位为毫秒，默认1500ms
|
||||
|
}); |
||||
|
} |
||||
|
if (res.data.code === 401) { |
||||
|
uni.showToast({ |
||||
|
title: '登录过期，重新登录中', // 提示的文本内容
|
||||
|
icon: 'none', // 提示的图标，可选值：'success' | 'loading' | 'none'
|
||||
|
duration: 2000 // 提示框的显示时间，单位为毫秒，默认1500ms
|
||||
|
}); |
||||
|
} |
||||
|
if (res.data.code === 20001) { |
||||
|
reject(res.data); |
||||
|
} |
||||
|
resolve(res.data) */ |
||||
|
} else { |
||||
|
reject(res); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
uni.showToast({ |
||||
|
title: '请求错误', // 提示的文本内容
|
||||
|
icon: 'none', // 提示的图标，可选值：'success' | 'loading' | 'none'
|
||||
|
duration: 2000 // 提示框的显示时间，单位为毫秒，默认1500ms
|
||||
|
}); |
||||
|
reject(err); // 请求失败
|
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// GET 请求
|
||||
|
export function get(url, params = {}) { |
||||
|
return request(url, 'GET', params); |
||||
|
} |
||||
|
|
||||
|
// POST 请求
|
||||
|
export function post(url, data = {}) { |
||||
|
return request(url, 'POST', data); |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
import { get, post } from "./httpSetting"; |
||||
|
|
||||
|
/** |
||||
|
* 登录 |
||||
|
*/ |
||||
|
export const userLogin = (params ={}) => post('/app/auth/login', params); |
||||
|
|
||||
|
export const getAppJobVO = (params ={}) => get('/app/job/getAppJobVO', params); |
||||
@ -0,0 +1,246 @@ |
|||||
|
<template> |
||||
|
<view class="recruitment-card"> |
||||
|
<!-- 卡片头部信息 --> |
||||
|
<view class="card-head"> |
||||
|
<div class="factory-info"> |
||||
|
<h3 class="factory-name">{{dataSource.factoryName || '默认工厂'}}</h3> |
||||
|
<span class="factory-type">{{dataSource.factoryType || '电子厂'}}</span> |
||||
|
</div> |
||||
|
<div class="card-actions"> |
||||
|
<!-- <view class="favorite-btn" @click="toggleFavorite"> |
||||
|
<text class="heart-icon">{{isFavorite ? '♥' : '♡'}}</text> |
||||
|
</view> --> |
||||
|
<button class="call-btn" @click="makeCall">拨打电话</button> |
||||
|
<button class="review-btn" @click.stop="handleGoToDetail">查看详情</button> |
||||
|
<view class="more-btn" @click.stop> |
||||
|
<text>···</text> |
||||
|
</view> |
||||
|
</div> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 工作时间和内容 --> |
||||
|
<view class="work-info"> |
||||
|
<text class="work-time">{{dataSource.workTime || '8:00-20:00'}}</text> |
||||
|
<text class="work-type">{{dataSource.workType || '两班倒'}}</text> |
||||
|
<text class="work-content">{{dataSource.workContent || '主营汽车线束'}}</text> |
||||
|
<span class="distance">{{dataSource.distance || '距你2.5km'}}</span> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card-bm"> |
||||
|
<template v-for="(item, index) in processedCompanyData" :key="item.label"> |
||||
|
<view class="item-info-swiper"> |
||||
|
<view class="label">{{item.label}}</view> |
||||
|
<view class="value"> |
||||
|
{{item.value}}<text class="label-two">{{item.unit}}</text> |
||||
|
</view> |
||||
|
<view class="label-two"> |
||||
|
{{item.exLabel}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="index < processedCompanyData.length - 1" class="divider"></view> |
||||
|
</template> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "recruitment", |
||||
|
props: { |
||||
|
dataSource: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isFavorite: false, |
||||
|
companyData: [{ |
||||
|
label: '薪资', |
||||
|
value: '20', |
||||
|
unit: '', |
||||
|
exLabel: '元/小时' |
||||
|
}, |
||||
|
{ |
||||
|
label: '年龄', |
||||
|
value: '20-42', |
||||
|
unit: '', |
||||
|
exLabel: '元/小时' |
||||
|
}, |
||||
|
{ |
||||
|
label: '吃饭', |
||||
|
value: '2', |
||||
|
unit: '餐', |
||||
|
exLabel: '白-夜' |
||||
|
}, |
||||
|
{ |
||||
|
label: '住宿', |
||||
|
value: '20', |
||||
|
unit: '', |
||||
|
exLabel: '人间' |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
processedCompanyData() { |
||||
|
return this.dataSource.companyData || this.companyData; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 拨打电话 |
||||
|
makeCall(e) { |
||||
|
e.stopPropagation(); |
||||
|
uni.makePhoneCall({ |
||||
|
phoneNumber: '400-123-4567' |
||||
|
}); |
||||
|
}, |
||||
|
// 切换收藏状态 |
||||
|
toggleFavorite(e) { |
||||
|
e.stopPropagation(); |
||||
|
this.isFavorite = !this.isFavorite; |
||||
|
}, |
||||
|
handleGoToDetail(e) { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/positionDetail/positionDetail' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.recruitment-card { |
||||
|
background-color: #fff; |
||||
|
padding: 8px 16px; |
||||
|
z-index: 10; |
||||
|
|
||||
|
.card-head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8px; |
||||
|
flex-wrap: wrap; |
||||
|
.factory-info { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
.factory-name { |
||||
|
font-size: 18px; |
||||
|
font-weight: 700; |
||||
|
color: #333; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.factory-type { |
||||
|
background-color: #f0f0f0; |
||||
|
color: #666; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 4px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.distance { |
||||
|
color: #999; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
|
||||
|
.favorite-btn { |
||||
|
font-size: 20px; |
||||
|
color: #ff4757; |
||||
|
padding: 4px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.call-btn { |
||||
|
background-color: #ff4757; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.review-btn { |
||||
|
background-color: transparent; |
||||
|
color: #666; |
||||
|
border: 1px solid #ddd; |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.more-btn { |
||||
|
color: #999; |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; |
||||
|
padding: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.work-info { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.card-bm { |
||||
|
display: flex; |
||||
|
padding: 0; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
.item-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.item-info-swiper { |
||||
|
padding: 0; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
flex: 1; |
||||
|
|
||||
|
.label { |
||||
|
font-weight: 700; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
font-size: 24px; |
||||
|
margin-top: 4px; |
||||
|
margin-bottom: 4px; |
||||
|
color: $uni-color-primary; |
||||
|
} |
||||
|
|
||||
|
.label-two { |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
width: 1px; |
||||
|
height: 60px; |
||||
|
background-color: #e5e5e5; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<script> |
||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
||||
|
CSS.supports('top: constant(a)')) |
||||
|
document.write( |
||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
||||
|
</script> |
||||
|
<title></title> |
||||
|
<!--preload-links--> |
||||
|
<!--app-context--> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"><!--app-html--></div> |
||||
|
<script type="module" src="/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,25 @@ |
|||||
|
import App from './App' |
||||
|
import * as Pinia from 'pinia'; |
||||
|
|
||||
|
// #ifndef VUE3
|
||||
|
import Vue from 'vue' |
||||
|
import './uni.promisify.adaptor' |
||||
|
Vue.config.productionTip = false |
||||
|
App.mpType = 'app' |
||||
|
const app = new Vue({ |
||||
|
...App |
||||
|
}) |
||||
|
app.$mount() |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef VUE3
|
||||
|
import { createSSRApp } from 'vue' |
||||
|
export function createApp() { |
||||
|
const app = createSSRApp(App) |
||||
|
app.use(Pinia.createPinia()); |
||||
|
return { |
||||
|
app, |
||||
|
Pinia |
||||
|
} |
||||
|
} |
||||
|
// #endif
|
||||
@ -0,0 +1,78 @@ |
|||||
|
{ |
||||
|
"name" : "laowumap", |
||||
|
"appid" : "__UNI__3F7EFE0", |
||||
|
"description" : "", |
||||
|
"versionName" : "1.0.0", |
||||
|
"versionCode" : "100", |
||||
|
"transformPx" : false, |
||||
|
/* 5+App特有相关 */ |
||||
|
"app-plus" : { |
||||
|
"usingComponents" : true, |
||||
|
"nvueStyleCompiler" : "uni-app", |
||||
|
"compilerVersion" : 3, |
||||
|
"splashscreen" : { |
||||
|
"alwaysShowBeforeRender" : true, |
||||
|
"waiting" : true, |
||||
|
"autoclose" : true, |
||||
|
"delay" : 0 |
||||
|
}, |
||||
|
/* 模块配置 */ |
||||
|
"modules" : {}, |
||||
|
/* 应用发布信息 */ |
||||
|
"distribute" : { |
||||
|
/* android打包配置 */ |
||||
|
"android" : { |
||||
|
"permissions" : [ |
||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>", |
||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
||||
|
] |
||||
|
}, |
||||
|
/* ios打包配置 */ |
||||
|
"ios" : {}, |
||||
|
/* SDK配置 */ |
||||
|
"sdkConfigs" : {} |
||||
|
} |
||||
|
}, |
||||
|
/* 快应用特有相关 */ |
||||
|
"quickapp" : {}, |
||||
|
/* 小程序特有相关 */ |
||||
|
"mp-weixin" : { |
||||
|
"appid" : "wx6b37987f8de3af0f", |
||||
|
"setting" : { |
||||
|
"urlCheck" : false |
||||
|
}, |
||||
|
"usingComponents" : true, |
||||
|
"permission" : { |
||||
|
"scope.userLocation" : { |
||||
|
"desc" : "您的位置信息将用于地图定位和附近地点展示" |
||||
|
} |
||||
|
}, |
||||
|
"lazyCodeLoading" : "requiredComponents" |
||||
|
}, |
||||
|
"mp-alipay" : { |
||||
|
"usingComponents" : true |
||||
|
}, |
||||
|
"mp-baidu" : { |
||||
|
"usingComponents" : true |
||||
|
}, |
||||
|
"mp-toutiao" : { |
||||
|
"usingComponents" : true |
||||
|
}, |
||||
|
"uniStatistics" : { |
||||
|
"enable" : false |
||||
|
}, |
||||
|
"vueVersion" : "3" |
||||
|
} |
||||
@ -0,0 +1,73 @@ |
|||||
|
{ |
||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
||||
|
{ |
||||
|
"path": "pages/index/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "挑好厂|找周边工作" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/searchPositions/searchPositions", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "岗位搜索" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/my/my", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "个人中心" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path" : "pages/map/map", |
||||
|
"style" : |
||||
|
{ |
||||
|
"navigationBarTitleText" : "地图" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path" : "pages/positionDetail/positionDetail", |
||||
|
"style" : |
||||
|
{ |
||||
|
"navigationBarTitleText" : "岗位详情" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path" : "pages/login/login", |
||||
|
"style" : |
||||
|
{ |
||||
|
"navigationBarTitleText" : "登录" |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
], |
||||
|
"globalStyle": { |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"navigationBarTitleText": "uni-app", |
||||
|
"navigationBarBackgroundColor": "#F8F8F8", |
||||
|
"backgroundColor": "#F8F8F8" |
||||
|
}, |
||||
|
"tabBar": { |
||||
|
"list": [ |
||||
|
{ |
||||
|
"text": "首页", |
||||
|
"pagePath": "pages/index/index", |
||||
|
"iconPath": "/static/tabbarIcon/home.png", |
||||
|
"selectedIconPath": "/static/tabbarIcon/home-select.png" |
||||
|
}, |
||||
|
{ |
||||
|
"text": "搜岗位", |
||||
|
"pagePath": "pages/searchPositions/searchPositions", |
||||
|
"iconPath": "/static/tabbarIcon/searchPositions.png", |
||||
|
"selectedIconPath": "/static/tabbarIcon/searchPositions-select.png" |
||||
|
}, |
||||
|
{ |
||||
|
"text": "我的", |
||||
|
"pagePath": "pages/my/my", |
||||
|
"iconPath": "/static/tabbarIcon/my.png", |
||||
|
"selectedIconPath": "/static/tabbarIcon/my-select.png" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"uniIdRouter": {} |
||||
|
} |
||||
@ -0,0 +1,111 @@ |
|||||
|
<template> |
||||
|
<view class="index-page"> |
||||
|
<map style="height: 100vh; width: 100vw;" id="myMap" :markers="markers" show-location show-compass |
||||
|
@updated="handleMapLoad"></map> |
||||
|
<view class="rec-swiper"> |
||||
|
<recruitment></recruitment> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
companyData: [{ |
||||
|
label: '薪资', |
||||
|
value: '20', |
||||
|
unit: '', |
||||
|
exLabel: '元/小时' |
||||
|
}, |
||||
|
{ |
||||
|
label: '年龄', |
||||
|
value: '20-42', |
||||
|
unit: '', |
||||
|
exLabel: '元/小时' |
||||
|
}, |
||||
|
{ |
||||
|
label: '吃饭', |
||||
|
value: '2', |
||||
|
unit: '餐', |
||||
|
exLabel: '白-夜' |
||||
|
}, |
||||
|
{ |
||||
|
label: '住宿', |
||||
|
value: '20', |
||||
|
unit: '', |
||||
|
exLabel: '人间' |
||||
|
}, |
||||
|
], |
||||
|
markers: [{ |
||||
|
id: 1, |
||||
|
latitude: 39.90923, |
||||
|
longitude: 116.397428, |
||||
|
title: '模拟点位1', |
||||
|
iconPath: '/static/position-icon.png', |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
label: { |
||||
|
content: '模拟点位1', |
||||
|
textAlign: 'center', |
||||
|
fontSize: 18, |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
latitude: 39.8, |
||||
|
longitude: 116.3, |
||||
|
title: '模拟点位1', |
||||
|
iconPath: '/static/position-icon.png', |
||||
|
width: 30, |
||||
|
height: 30, |
||||
|
label: { |
||||
|
content: '模拟点位1', |
||||
|
textAlign: 'center', |
||||
|
fontSize: 18, |
||||
|
} |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
// 页面加载时的初始化逻辑 |
||||
|
}, |
||||
|
methods: { |
||||
|
handleMapLoad() { |
||||
|
console.log('地图加载完成'); |
||||
|
// 获取地图上下文 |
||||
|
const mapContext = uni.createMapContext('myMap'); |
||||
|
// 设置地图中心点到第一个标记点 |
||||
|
mapContext.includePoints({ |
||||
|
points: this.markers.map(marker => ({ |
||||
|
latitude: marker.latitude, |
||||
|
longitude: marker.longitude |
||||
|
})), |
||||
|
padding: [50, 50, 200, 50] // 边距设置 |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.index-page { |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
|
||||
|
.rec-swiper { |
||||
|
width: calc(100% - 16px); |
||||
|
// height: 200px; |
||||
|
// background-color: red; |
||||
|
background-color: #FFF; |
||||
|
margin: 0 8px; |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
bottom: 8px; |
||||
|
border-radius: 16px; |
||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,275 @@ |
|||||
|
<template> |
||||
|
<view class="login-page"> |
||||
|
<!-- 顶部装饰元素 --> |
||||
|
<view class="top-decoration"> |
||||
|
<view class="circle circle-1"></view> |
||||
|
<view class="circle circle-2"></view> |
||||
|
<view class="circle circle-3"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- Logo区域 --> |
||||
|
<view class="logo-section"> |
||||
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image> |
||||
|
<text class="app-title">劳务地图</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 登录按钮区域 --> |
||||
|
<view class="login-section"> |
||||
|
<button class="wechat-login-btn" open-type="getPhoneNumber" @getphonenumber="onWechatLogin"> |
||||
|
<image class="wechat-icon" src="/static/wechat-icon.png" mode="aspectFit"></image> |
||||
|
<text class="btn-text">微信一键登录</text> |
||||
|
</button> |
||||
|
{{ loginRes }} |
||||
|
<view class="agreement-section"> |
||||
|
<label class="checkbox-wrapper"> |
||||
|
<checkbox :checked="agreeChecked" @tap="toggleAgreement" color="#07c160" /> |
||||
|
<text class="agreement-text">我已阅读并同意</text> |
||||
|
</label> |
||||
|
<text class="agreement-link" @tap="showAgreement">《用户协议》</text> |
||||
|
<text class="agreement-text">和</text> |
||||
|
<text class="agreement-link" @tap="showPrivacyPolicy">《隐私政策》</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部装饰 --> |
||||
|
<view class="bottom-decoration"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed, ref } from 'vue'; |
||||
|
import { userLogin } from '../../api'; |
||||
|
import { useUserStore } from '../../stores/user.js'; |
||||
|
// 用户协议勾选状态 |
||||
|
const agreeChecked = ref(false); |
||||
|
|
||||
|
// 获取用户 store 实例 |
||||
|
const userStore = useUserStore(); |
||||
|
const loginRes = computed(() => userStore.loginRes); |
||||
|
|
||||
|
// 微信登录处理 |
||||
|
const onWechatLogin = (e) => { |
||||
|
// 检查用户是否同意协议 |
||||
|
if (!agreeChecked.value) { |
||||
|
uni.showToast({ |
||||
|
title: '请先同意用户协议和隐私政策', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 显示加载提示 |
||||
|
uni.showLoading({ |
||||
|
title: '登录中...' |
||||
|
}); |
||||
|
|
||||
|
// 获取微信登录凭证 |
||||
|
uni.login({ |
||||
|
provider: 'weixin', |
||||
|
success: async (wxLoginRes) => { |
||||
|
try { |
||||
|
console.log('微信登录成功', wxLoginRes); |
||||
|
const code = wxLoginRes.code; |
||||
|
const loginRes = await userLogin({ code }); |
||||
|
console.log('登录接口返回:', loginRes); |
||||
|
|
||||
|
// 隐藏加载提示 |
||||
|
uni.hideLoading(); |
||||
|
|
||||
|
// 使用 Pinia 存储 loginRes 数据 |
||||
|
userStore.setLoginRes(loginRes.data); |
||||
|
console.log('loginRes 已存储到 Pinia:', loginRes.data); |
||||
|
// 登录成功提示 |
||||
|
uni.showToast({ |
||||
|
title: '登录成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
|
||||
|
// 跳转到首页 |
||||
|
setTimeout(() => { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/index' |
||||
|
}); |
||||
|
}, 1000); |
||||
|
} catch (error) { |
||||
|
// 隐藏加载提示 |
||||
|
uni.hideLoading(); |
||||
|
|
||||
|
console.error('登录过程出错', error); |
||||
|
uni.showToast({ |
||||
|
title: '登录过程出错，请重试', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
fail: (err) => { |
||||
|
// 隐藏加载提示 |
||||
|
uni.hideLoading(); |
||||
|
|
||||
|
console.error('微信登录失败', err); |
||||
|
uni.showToast({ |
||||
|
title: '微信登录失败，请重试', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 切换用户协议勾选状态 |
||||
|
const toggleAgreement = () => { |
||||
|
agreeChecked.value = !agreeChecked.value; |
||||
|
}; |
||||
|
|
||||
|
// 显示用户协议 |
||||
|
const showAgreement = () => { |
||||
|
uni.showToast({ |
||||
|
title: '用户协议', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 显示隐私政策 |
||||
|
const showPrivacyPolicy = () => { |
||||
|
uni.showToast({ |
||||
|
title: '隐私政策', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.login-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
min-height: 100vh; |
||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%); |
||||
|
padding: 20px; |
||||
|
|
||||
|
// 顶部装饰 |
||||
|
.top-decoration { |
||||
|
position: relative; |
||||
|
height: 120px; |
||||
|
margin-bottom: 40px; |
||||
|
|
||||
|
.circle { |
||||
|
position: absolute; |
||||
|
border-radius: 50%; |
||||
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); |
||||
|
opacity: 0.1; |
||||
|
|
||||
|
&.circle-1 { |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
top: 0; |
||||
|
right: 10%; |
||||
|
} |
||||
|
|
||||
|
&.circle-2 { |
||||
|
width: 120px; |
||||
|
height: 120px; |
||||
|
top: -20px; |
||||
|
left: 5%; |
||||
|
} |
||||
|
|
||||
|
&.circle-3 { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
bottom: 0; |
||||
|
right: 25%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Logo区域 |
||||
|
.logo-section { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin-bottom: 60px; |
||||
|
|
||||
|
.logo { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.app-title { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 登录区域 |
||||
|
.login-section { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
.wechat-login-btn { |
||||
|
width: 80%; |
||||
|
height: 50px; |
||||
|
background: #07c160; |
||||
|
border-radius: 25px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 30px; |
||||
|
box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3); |
||||
|
|
||||
|
.wechat-icon { |
||||
|
width: 24px; |
||||
|
height: 24px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.btn-text { |
||||
|
color: white; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 协议区域 |
||||
|
.agreement-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
padding: 0 20px; |
||||
|
|
||||
|
.checkbox-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-right: 5px; |
||||
|
|
||||
|
.agreement-text { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.agreement-text { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
margin: 0 2px; |
||||
|
} |
||||
|
|
||||
|
.agreement-link { |
||||
|
font-size: 12px; |
||||
|
color: #07c160; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部装饰 |
||||
|
.bottom-decoration { |
||||
|
height: 60px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<!-- 悬浮卡片 --> |
||||
|
<view v-if="showCard" class="float-card"> |
||||
|
<view class="card-title">{{ selectedMarker.title }}</view> |
||||
|
<view class="card-info"> |
||||
|
<text>纬度：{{ selectedMarker.latitude }}</text> |
||||
|
<text>经度：{{ selectedMarker.longitude }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 地图中心经纬度信息 --> |
||||
|
<view class="map-center-info"> |
||||
|
<text>地图中心：</text> |
||||
|
<text>纬度：{{ mapCenter.latitude.toFixed(6) }}</text> |
||||
|
<text>经度：{{ mapCenter.longitude.toFixed(6) }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 地图组件 --> |
||||
|
<map style="height: 100vh; width: 100vw;" |
||||
|
id="myMap" |
||||
|
name="" |
||||
|
@updated="handleMapLoad" |
||||
|
@markertap="handleMarkerTap" |
||||
|
@regionchange="handleRegionChange" |
||||
|
show-compass |
||||
|
:markers="markers" |
||||
|
show-location></map> |
||||
|
|
||||
|
<!-- 添加Marker表单 --> |
||||
|
<view class="form-container"> |
||||
|
<view class="form-title">添加新标记</view> |
||||
|
<view class="form-item"> |
||||
|
<text>位置名称：</text> |
||||
|
<input v-model="newMarker.title" type="text" placeholder="请输入位置名称"/> |
||||
|
</view> |
||||
|
<view class="form-item"> |
||||
|
<text>纬度：</text> |
||||
|
<input v-model.number="newMarker.latitude" type="digit" placeholder="请输入纬度"/> |
||||
|
</view> |
||||
|
<view class="form-item"> |
||||
|
<text>经度：</text> |
||||
|
<input v-model.number="newMarker.longitude" type="digit" placeholder="请输入经度"/> |
||||
|
</view> |
||||
|
<button @click="addMarker" type="primary">添加标记</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
markers: [{ |
||||
|
id: 1, |
||||
|
latitude: 39.90923, |
||||
|
longitude: 116.397428, |
||||
|
title: '北京天安门', |
||||
|
iconPath: '/static/logo.png', |
||||
|
width: 30, |
||||
|
height: 30 |
||||
|
}], |
||||
|
showCard: false, |
||||
|
selectedMarker: {}, |
||||
|
newMarker: { |
||||
|
title: '', |
||||
|
latitude: 0, |
||||
|
longitude: 0 |
||||
|
}, |
||||
|
mapCenter: { |
||||
|
latitude: 39.90923, |
||||
|
longitude: 116.397428 |
||||
|
}, |
||||
|
mapContext: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleMapLoad() { |
||||
|
console.log("地图加载完成！") |
||||
|
// 获取地图上下文 |
||||
|
this.mapContext = uni.createMapContext('myMap'); |
||||
|
// 获取初始地图中心经纬度 |
||||
|
this.getMapCenter(); |
||||
|
}, |
||||
|
// 处理地图区域变化事件 |
||||
|
handleRegionChange(e) { |
||||
|
// 当用户拖动地图结束时获取地图中心经纬度 |
||||
|
if (e.type === 'end') { |
||||
|
this.getMapCenter(); |
||||
|
} |
||||
|
}, |
||||
|
// 获取地图中心经纬度 |
||||
|
getMapCenter() { |
||||
|
if (this.mapContext) { |
||||
|
this.mapContext.getCenterLocation({ |
||||
|
success: (res) => { |
||||
|
this.mapCenter = { |
||||
|
latitude: res.latitude, |
||||
|
longitude: res.longitude |
||||
|
}; |
||||
|
console.log('当前地图中心经纬度:', this.mapCenter); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
// 处理Marker点击事件 |
||||
|
handleMarkerTap(e) { |
||||
|
const markerId = e.markerId; |
||||
|
const marker = this.markers.find(item => item.id === markerId); |
||||
|
if (marker) { |
||||
|
this.selectedMarker = { ...marker }; |
||||
|
this.showCard = true; |
||||
|
} |
||||
|
}, |
||||
|
// 添加新的Marker |
||||
|
addMarker() { |
||||
|
if (!this.newMarker.title || !this.newMarker.latitude || !this.newMarker.longitude) { |
||||
|
uni.showToast({ |
||||
|
title: '请填写完整信息', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const newMarker = { |
||||
|
id: this.markers.length + 1, |
||||
|
title: this.newMarker.title, |
||||
|
latitude: this.newMarker.latitude, |
||||
|
longitude: this.newMarker.longitude, |
||||
|
iconPath: '/static/logo.png', |
||||
|
width: 30, |
||||
|
height: 30 |
||||
|
}; |
||||
|
|
||||
|
this.markers.push(newMarker); |
||||
|
|
||||
|
// 重置表单 |
||||
|
this.newMarker = { |
||||
|
title: '', |
||||
|
latitude: 0, |
||||
|
longitude: 0 |
||||
|
}; |
||||
|
|
||||
|
uni.showToast({ |
||||
|
title: '添加成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.container { |
||||
|
position: relative; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
/* 悬浮卡片样式 */ |
||||
|
.float-card { |
||||
|
position: absolute; |
||||
|
top: 20px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 80%; |
||||
|
max-width: 400px; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
border-radius: 10px; |
||||
|
padding: 15px; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
z-index: 999; |
||||
|
} |
||||
|
.card-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.card-info { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
.card-info text { |
||||
|
display: block; |
||||
|
margin: 5px 0; |
||||
|
} |
||||
|
/* 表单样式 */ |
||||
|
.form-container { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background: rgba(255, 255, 255, 0.95); |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
.form-title { |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 15px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.form-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
.form-item text { |
||||
|
width: 80px; |
||||
|
} |
||||
|
.form-item input { |
||||
|
flex: 1; |
||||
|
height: 40px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
button { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
/* 地图中心经纬度信息样式 */ |
||||
|
.map-center-info { |
||||
|
position: absolute; |
||||
|
top: 100px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
width: 80%; |
||||
|
max-width: 400px; |
||||
|
background: rgba(255, 255, 255, 0.9); |
||||
|
border-radius: 10px; |
||||
|
padding: 10px 15px; |
||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
|
z-index: 998; |
||||
|
} |
||||
|
.map-center-info text { |
||||
|
display: inline-block; |
||||
|
font-size: 14px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<view class="my-page"> |
||||
|
<!-- 登录区域 --> |
||||
|
<view class="login-section" @click="loginRegister"> |
||||
|
<view class="avatar"> |
||||
|
<text class="avatar-icon">😊</text> |
||||
|
</view> |
||||
|
<view class="login-text"> |
||||
|
<text class="login-title">点击登录/注册</text> |
||||
|
<text class="login-subtitle">登录查看更多消息</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 功能区域 --> |
||||
|
<view class="features-section"> |
||||
|
<view class="feature-item" @click="myComments"> |
||||
|
<view class="feature-icon"> |
||||
|
<text class="icon-content">📝</text> |
||||
|
</view> |
||||
|
<text class="feature-name">我的评价</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="feature-item" @click="myFavorites"> |
||||
|
<view class="feature-icon"> |
||||
|
<text class="icon-content">❤️</text> |
||||
|
</view> |
||||
|
<text class="feature-name">收藏岗位</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="feature-item" @click="contactService"> |
||||
|
<view class="feature-icon"> |
||||
|
<text class="icon-content">📞</text> |
||||
|
</view> |
||||
|
<text class="feature-name">咨询客服</text> |
||||
|
</view> |
||||
|
</view>123 |
||||
|
{{loginRes}} |
||||
|
<!-- 底部占位，避免内容被底部导航栏遮挡 --> |
||||
|
<view class="bottom-space"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useUserStore } from '../../stores/user.js'; |
||||
|
const userStore = useUserStore(); |
||||
|
const loginRes = computed(() => userStore.loginRes); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.my-page { |
||||
|
background-color: #fff; |
||||
|
min-height: 100vh; |
||||
|
padding-top: 12px; // 增加顶部内边距，避免内容紧贴导航栏 |
||||
|
|
||||
|
// 登录区域 |
||||
|
.login-section { |
||||
|
background-color: #fff; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
tap-highlight-color: transparent; |
||||
|
|
||||
|
.avatar { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
border-radius: 30px; |
||||
|
background-color: #e6f7ff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 16px; |
||||
|
|
||||
|
.avatar-icon { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.login-text { |
||||
|
.login-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
display: block; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.login-subtitle { |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 功能区域 |
||||
|
.features-section { |
||||
|
background-color: #fff; |
||||
|
padding: 16px 0; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
.feature-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 8px; |
||||
|
tap-highlight-color: transparent; |
||||
|
|
||||
|
.feature-icon { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 12px; |
||||
|
background-color: #f0f9ff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
.icon-content { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.feature-name { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
// 为不同的功能图标设置不同的背景色 |
||||
|
&:nth-child(1) .feature-icon { |
||||
|
background-color: #e6f7ff; |
||||
|
} |
||||
|
|
||||
|
&:nth-child(2) .feature-icon { |
||||
|
background-color: #fff1f0; |
||||
|
} |
||||
|
|
||||
|
&:nth-child(3) .feature-icon { |
||||
|
background-color: #f0f9ff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部占位，避免内容被底部导航栏遮挡 |
||||
|
.bottom-space { |
||||
|
height: 60px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,419 @@ |
|||||
|
<template> |
||||
|
<view class="position-detail-page"> |
||||
|
<!-- 主内容区域 - 可滚动 --> |
||||
|
<view class="content-wrapper"> |
||||
|
<!-- 顶部信息区域 --> |
||||
|
<view class="header-section"> |
||||
|
<view class="factory-info"> |
||||
|
<text class="factory-name">安费诺</text> |
||||
|
<text class="factory-type">电子厂</text> |
||||
|
<text class="distance">距你2.5km</text> |
||||
|
</view> |
||||
|
<button class="call-btn" @click="makeCall">拨打电话</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 工作时间区域 --> |
||||
|
<view class="work-time-section"> |
||||
|
<text class="time">8:00-20:00 两班倒</text> |
||||
|
<text class="business">主营汽车线束</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 薪资信息区域 --> |
||||
|
<view class="salary-section"> |
||||
|
<view class="salary-item"> |
||||
|
<text class="item-title">小时工</text> |
||||
|
<text class="salary-content">工资: 20+1元/小时（含1元满勤）+绩效奖金高达500，月薪6500-7500</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="salary-item"> |
||||
|
<text class="item-title">正式工</text> |
||||
|
<text class="salary-content">工资2490元/月+夜班补贴10元/晚+"表现佳有绩效+超产奖金" 平时加班1.5倍，双休日2倍，国假日3倍等，月收入5700-6800/月</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 福利信息区域 --> |
||||
|
<view class="benefits-section"> |
||||
|
<text class="benefits-content">转正满2个月体检费196元企业报销(凭发票)</text> |
||||
|
<text class="benefits-content">有部分为显微镜工作，显微镜工作额外有0-300的岗位补贴（具体以厂区发放为准抱拳）</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 分隔线 --> |
||||
|
<view class="divider"></view> |
||||
|
|
||||
|
<!-- 用户评价区域 --> |
||||
|
<view class="comments-section"> |
||||
|
<view class="section-title">用户评价</view> |
||||
|
|
||||
|
<!-- 动态渲染评价列表 --> |
||||
|
<view class="comment-item" v-for="(comment, index) in comments" :key="comment.id"> |
||||
|
<view class="user-info"> |
||||
|
<view class="avatar"></view> |
||||
|
<text class="username">{{ comment.username }}</text> |
||||
|
</view> |
||||
|
<text class="comment-content">{{ comment.content }}</text> |
||||
|
<view class="image-container"> |
||||
|
<view class="comment-image"></view> |
||||
|
<view class="comment-image"></view> |
||||
|
<view class="comment-image"></view> |
||||
|
</view> |
||||
|
<view class="like-section"> |
||||
|
<text class="like-count">{{ comment.likes }}</text> |
||||
|
<text class="like-icon" :class="{ active: comment.isLiked }" @click="toggleLike(index)">👍</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 如果评价数量大于1，显示分隔线 --> |
||||
|
<view class="comment-divider" v-if="comments.length > 1"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部空间，确保内容不被底部按钮遮挡 --> |
||||
|
<view class="bottom-space"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部固定操作按钮 --> |
||||
|
<view class="bottom-action"> |
||||
|
<button class="apply-btn" @click="applyJob">立即申请</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
// 职位数据 |
||||
|
comments: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
username: '网友120489', |
||||
|
content: '工作很轻松，基本都是手上的活', |
||||
|
likes: 6, |
||||
|
isLiked: false |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
username: '网友120489', |
||||
|
content: '工作很轻松，基本都是手上的活', |
||||
|
likes: 6, |
||||
|
isLiked: true |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 返回上一页 |
||||
|
goBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
// 拨打电话功能 |
||||
|
makeCall() { |
||||
|
uni.makePhoneCall({ |
||||
|
phoneNumber: '400-123-4567' |
||||
|
}); |
||||
|
}, |
||||
|
// 点赞/取消点赞 |
||||
|
toggleLike(index) { |
||||
|
if (this.comments[index].isLiked) { |
||||
|
// 取消点赞 |
||||
|
this.comments[index].likes--; |
||||
|
} else { |
||||
|
// 点赞 |
||||
|
this.comments[index].likes++; |
||||
|
} |
||||
|
// 切换点赞状态 |
||||
|
this.comments[index].isLiked = !this.comments[index].isLiked; |
||||
|
}, |
||||
|
// 申请职位 |
||||
|
applyJob() { |
||||
|
uni.showToast({ |
||||
|
title: '申请成功，请保持电话畅通', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.position-detail-page { |
||||
|
// 页面背景色 |
||||
|
background-color: #f5f5f5; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
// 导航栏 |
||||
|
.nav-bar { |
||||
|
height: 44px; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 16px; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 100; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
.back-btn { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 20px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.nav-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.nav-right { |
||||
|
width: 40px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 内容包装器 |
||||
|
.content-wrapper { |
||||
|
overflow-y: auto; |
||||
|
max-height: calc(100vh); |
||||
|
padding-bottom: 70px; // 为底部操作按钮留出空间 |
||||
|
} |
||||
|
|
||||
|
// 底部空间，确保内容不被底部按钮遮挡 |
||||
|
.bottom-space { |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
// 头部信息区域 |
||||
|
.header-section { |
||||
|
background-color: #fff; |
||||
|
padding: 16px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.factory-info { |
||||
|
.factory-name { |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.factory-type { |
||||
|
font-size: 14px; |
||||
|
color: #0099ff; |
||||
|
background-color: #e6f7ff; |
||||
|
padding: 2px 6px; |
||||
|
border-radius: 4px; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.distance { |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.call-btn { |
||||
|
height: 36px; |
||||
|
padding: 0 16px; |
||||
|
background-color: #ff4757; |
||||
|
color: white; |
||||
|
font-size: 14px; |
||||
|
border: none; |
||||
|
border-radius: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 工作时间区域 |
||||
|
.work-time-section { |
||||
|
background-color: #fff; |
||||
|
padding: 12px 16px; |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
.time, |
||||
|
.business { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 薪资信息区域 |
||||
|
.salary-section { |
||||
|
background-color: #fff; |
||||
|
padding: 16px; |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
.salary-item { |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin-bottom: 8px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.salary-content { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
white-space: pre-wrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 福利信息区域 |
||||
|
.benefits-section { |
||||
|
background-color: #fff; |
||||
|
padding: 16px; |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
.benefits-content { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
margin-bottom: 8px; |
||||
|
display: block; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 分隔线 |
||||
|
.divider { |
||||
|
height: 12px; |
||||
|
background-color: #f5f5f5; |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
// 用户评价区域 |
||||
|
.comments-section { |
||||
|
background-color: #fff; |
||||
|
padding-top: 12px; |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
padding: 0 16px 12px; |
||||
|
} |
||||
|
|
||||
|
.comment-item { |
||||
|
padding: 16px; |
||||
|
|
||||
|
.user-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
.avatar { |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #ddd; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.username { |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-content { |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
margin-bottom: 12px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.image-container { |
||||
|
display: flex; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
.comment-image { |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
background-color: #eee; |
||||
|
border-radius: 4px; |
||||
|
margin-right: 12px; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.like-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.like-count { |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.like-icon { |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&.active { |
||||
|
color: #ff4757; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-divider { |
||||
|
height: 1px; |
||||
|
background-color: #eee; |
||||
|
margin: 0 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部固定操作按钮 |
||||
|
.bottom-action { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
height: 50px; |
||||
|
background-color: #fff; |
||||
|
padding: 8px 16px; |
||||
|
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 99; |
||||
|
|
||||
|
.apply-btn { |
||||
|
height: 40px; |
||||
|
width: 100%; |
||||
|
background-color: #ff4757; |
||||
|
color: white; |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
border: none; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,262 @@ |
|||||
|
<template> |
||||
|
<view class="search-positions-page"> |
||||
|
<!-- 搜索区域 --> |
||||
|
<view class="search-header"> |
||||
|
<view class="search-input-wrapper"> |
||||
|
<input type="text" v-model="searchKeyword" placeholder="请输入关键词" class="search-input" /> |
||||
|
<button class="search-btn" @click="onSearch">搜索</button> |
||||
|
</view> |
||||
|
<!-- 搜索标签 --> |
||||
|
<view class="search-tags"> |
||||
|
<view class="tag" :class="{ active: activeTag === '长白班' }" @click="onTagClick('长白班')">长白班</view> |
||||
|
<view class="tag" :class="{ active: activeTag === '高工资' }" @click="onTagClick('高工资')">高工资</view> |
||||
|
<view class="tag" :class="{ active: activeTag === '包吃住' }" @click="onTagClick('包吃住')">包吃住</view> |
||||
|
<view class="tag" :class="{ active: activeTag === '日结' }" @click="onTagClick('日结')">日结</view> |
||||
|
<view class="tag" :class="{ active: activeTag === '大龄工' }" @click="onTagClick('大龄工')">大龄工</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="search-list" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore"> |
||||
|
<template v-for="item in list.records" :key="item.jobId"> |
||||
|
<recruitment :dataSource="item"></recruitment> |
||||
|
<view class="driver"></view> |
||||
|
</template> |
||||
|
<view class="loading-more"> |
||||
|
<text v-if="loadingMore">加载中...</text> |
||||
|
<text v-else-if="noMoreData">没有更多数据了</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { |
||||
|
onLoad |
||||
|
} from '@dcloudio/uni-app' |
||||
|
import { |
||||
|
getAppJobVO |
||||
|
} from '../../api'; |
||||
|
import { |
||||
|
ref |
||||
|
} from 'vue'; |
||||
|
const list = ref([]) |
||||
|
const searchKeyword = ref('') |
||||
|
const refreshing = ref(false) |
||||
|
const loadingMore = ref(false) |
||||
|
const noMoreData = ref(false) |
||||
|
const currentPage = ref(1) |
||||
|
const pageSize = ref(10) |
||||
|
|
||||
|
const hanleGetJobList = async (params = {}) => { |
||||
|
const res = await getAppJobVO({ |
||||
|
pageNum: currentPage.value, |
||||
|
pageSize: pageSize.value, |
||||
|
...params |
||||
|
}) |
||||
|
console.log(res) |
||||
|
|
||||
|
if (currentPage.value === 1) { |
||||
|
// 刷新或首次加载 |
||||
|
list.value = res.data |
||||
|
} else { |
||||
|
// 加载更多 |
||||
|
list.value.records = [...list.value.records, ...res.data.records] |
||||
|
} |
||||
|
|
||||
|
// 检查是否还有更多数据 |
||||
|
if (res.data.records.length < pageSize.value) { |
||||
|
noMoreData.value = true |
||||
|
} else { |
||||
|
noMoreData.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onLoad(() => { |
||||
|
currentPage.value = 1 |
||||
|
hanleGetJobList() |
||||
|
}) |
||||
|
|
||||
|
const onRefresh = async () => { |
||||
|
refreshing.value = true |
||||
|
currentPage.value = 1 |
||||
|
noMoreData.value = false |
||||
|
try { |
||||
|
await hanleGetJobList() |
||||
|
uni.showToast({ |
||||
|
title: '刷新成功', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
uni.showToast({ |
||||
|
title: '刷新失败', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} finally { |
||||
|
refreshing.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const onLoadMore = async () => { |
||||
|
// 如果已经在加载或没有更多数据，则不执行 |
||||
|
if (loadingMore.value || noMoreData.value) return |
||||
|
|
||||
|
loadingMore.value = true |
||||
|
currentPage.value++ |
||||
|
|
||||
|
try { |
||||
|
await hanleGetJobList() |
||||
|
} catch (error) { |
||||
|
uni.showToast({ |
||||
|
title: '加载失败', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
currentPage.value-- |
||||
|
} finally { |
||||
|
loadingMore.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const onSearch = () => { |
||||
|
console.log(searchKeyword.value) |
||||
|
const params = { |
||||
|
jobName: searchKeyword.value |
||||
|
} |
||||
|
// 搜索时重置到第一页 |
||||
|
currentPage.value = 1 |
||||
|
noMoreData.value = false |
||||
|
hanleGetJobList(params) |
||||
|
} |
||||
|
/* // 导入recruitment组件 |
||||
|
import recruitment from '@/components/recruitment/recruitment.vue'; |
||||
|
export default { |
||||
|
// 注册组件 |
||||
|
components: { |
||||
|
recruitment |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
searchKeyword: '', |
||||
|
activeTag: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 搜索方法 |
||||
|
onSearch() { |
||||
|
// 实现搜索逻辑 |
||||
|
console.log('搜索关键词:', this.searchKeyword); |
||||
|
}, |
||||
|
// 标签点击方法 |
||||
|
onTagClick(tag) { |
||||
|
this.activeTag = this.activeTag === tag ? '' : tag; |
||||
|
console.log('点击标签:', tag); |
||||
|
} |
||||
|
} |
||||
|
} */ |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.search-positions-page { |
||||
|
// 页面容器设置 |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: #f8f8f8; |
||||
|
|
||||
|
// 搜索头部样式 - 固定在顶部 |
||||
|
.search-header { |
||||
|
padding: 12px 16px; |
||||
|
background-color: #fff; |
||||
|
z-index: 10; |
||||
|
|
||||
|
// 搜索框包装器 |
||||
|
.search-input-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12px; |
||||
|
|
||||
|
// 搜索输入框 |
||||
|
.search-input { |
||||
|
flex: 1; |
||||
|
height: 32px; |
||||
|
background-color: #f5f5f5; |
||||
|
border-radius: 20px 0 0 20px; |
||||
|
padding: 0 16px; |
||||
|
border: none; |
||||
|
font-size: 14px; |
||||
|
color: #333; |
||||
|
outline: none; |
||||
|
|
||||
|
&::placeholder { |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 搜索按钮 |
||||
|
.search-btn { |
||||
|
height: 32px; |
||||
|
width: 80px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background-color: #ff4757; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 0 20px 20px 0; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 搜索标签区域 |
||||
|
.search-tags { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
// 标签样式 |
||||
|
.tag { |
||||
|
padding: 4px 8px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 8px; |
||||
|
font-size: 12px; |
||||
|
color: #666; |
||||
|
background-color: white; |
||||
|
|
||||
|
// 选中状态 |
||||
|
&.active { |
||||
|
color: #ff4757; |
||||
|
border-color: #ff4757; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 列表样式 - 可滚动区域 |
||||
|
.search-list { |
||||
|
padding: 4px; |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
// 隐藏滚动条但保留滚动功能 |
||||
|
::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
-ms-overflow-style: none; |
||||
|
scrollbar-width: none; |
||||
|
} |
||||
|
|
||||
|
.driver { |
||||
|
width: 100%; |
||||
|
height: 1px; |
||||
|
background-color: #eee; |
||||
|
} |
||||
|
|
||||
|
.loading-more { |
||||
|
text-align: center; |
||||
|
padding: 16px 0; |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 894 B |
|
After Width: | Height: | Size: 845 B |
|
After Width: | Height: | Size: 516 B |
|
After Width: | Height: | Size: 505 B |
|
After Width: | Height: | Size: 629 B |
|
After Width: | Height: | Size: 610 B |
|
After Width: | Height: | Size: 873 B |
@ -0,0 +1,64 @@ |
|||||
|
import { defineStore } from 'pinia'; |
||||
|
|
||||
|
export const useUserStore = defineStore('user', { |
||||
|
state: () => ({ |
||||
|
loginRes: uni.getStorageSync('loginRes') || null, // 存储登录响应数据
|
||||
|
userInfo: uni.getStorageSync('userInfo') || null, // 用户信息
|
||||
|
token: uni.getStorageSync('token') || null // 认证令牌
|
||||
|
}), |
||||
|
|
||||
|
getters: { |
||||
|
isLoggedIn: (state) => !!state.token, |
||||
|
userId: (state) => state.userInfo?.userId || null |
||||
|
}, |
||||
|
|
||||
|
actions: { |
||||
|
/** |
||||
|
* 设置登录响应数据 |
||||
|
* @param {Object} data - 登录响应数据 |
||||
|
*/ |
||||
|
setLoginRes(data) { |
||||
|
this.loginRes = data; |
||||
|
uni.setStorageSync('loginRes', data); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置用户信息 |
||||
|
* @param {Object} userInfo - 用户信息 |
||||
|
*/ |
||||
|
setUserInfo(userInfo) { |
||||
|
this.userInfo = userInfo; |
||||
|
uni.setStorageSync('userInfo', userInfo); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 设置认证令牌 |
||||
|
* @param {String} token - 认证令牌 |
||||
|
*/ |
||||
|
setToken(token) { |
||||
|
this.token = token; |
||||
|
uni.setStorageSync('token', token); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 清除所有用户数据 |
||||
|
*/ |
||||
|
clearUserData() { |
||||
|
this.loginRes = null; |
||||
|
this.userInfo = null; |
||||
|
this.token = null; |
||||
|
uni.removeStorageSync('loginRes'); |
||||
|
uni.removeStorageSync('userInfo'); |
||||
|
uni.removeStorageSync('token'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 更新用户信息 |
||||
|
* @param {Object} updates - 要更新的用户信息字段 |
||||
|
*/ |
||||
|
updateUserInfo(updates) { |
||||
|
this.userInfo = { ...this.userInfo, ...updates }; |
||||
|
uni.setStorageSync('userInfo', this.userInfo); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,13 @@ |
|||||
|
uni.addInterceptor({ |
||||
|
returnValue (res) { |
||||
|
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { |
||||
|
return res; |
||||
|
} |
||||
|
return new Promise((resolve, reject) => { |
||||
|
res.then((res) => { |
||||
|
if (!res) return resolve(res) |
||||
|
return res[0] ? reject(res[0]) : resolve(res[1]) |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,76 @@ |
|||||
|
/** |
||||
|
* 这里是uni-app内置的常用样式变量 |
||||
|
* |
||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
||||
|
* |
||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
||||
|
*/ |
||||
|
|
||||
|
/* 颜色变量 */ |
||||
|
|
||||
|
/* 行为相关颜色 */ |
||||
|
$uni-color-primary: #6DC2AA; |
||||
|
$uni-color-success: #4cd964; |
||||
|
$uni-color-warning: #f0ad4e; |
||||
|
$uni-color-error: #dd524d; |
||||
|
|
||||
|
/* 文字基本颜色 */ |
||||
|
$uni-text-color:#333;//基本色 |
||||
|
$uni-text-color-inverse:#fff;//反色 |
||||
|
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 |
||||
|
$uni-text-color-placeholder: #808080; |
||||
|
$uni-text-color-disable:#c0c0c0; |
||||
|
|
||||
|
/* 背景颜色 */ |
||||
|
$uni-bg-color:#ffffff; |
||||
|
$uni-bg-color-grey:#f8f8f8; |
||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 |
||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 |
||||
|
|
||||
|
/* 边框颜色 */ |
||||
|
$uni-border-color:#c8c7cc; |
||||
|
|
||||
|
/* 尺寸变量 */ |
||||
|
|
||||
|
/* 文字尺寸 */ |
||||
|
$uni-font-size-sm:12px; |
||||
|
$uni-font-size-base:14px; |
||||
|
$uni-font-size-lg:16px; |
||||
|
|
||||
|
/* 图片尺寸 */ |
||||
|
$uni-img-size-sm:20px; |
||||
|
$uni-img-size-base:26px; |
||||
|
$uni-img-size-lg:40px; |
||||
|
|
||||
|
/* Border Radius */ |
||||
|
$uni-border-radius-sm: 2px; |
||||
|
$uni-border-radius-base: 3px; |
||||
|
$uni-border-radius-lg: 6px; |
||||
|
$uni-border-radius-circle: 50%; |
||||
|
|
||||
|
/* 水平间距 */ |
||||
|
$uni-spacing-row-sm: 5px; |
||||
|
$uni-spacing-row-base: 10px; |
||||
|
$uni-spacing-row-lg: 15px; |
||||
|
|
||||
|
/* 垂直间距 */ |
||||
|
$uni-spacing-col-sm: 4px; |
||||
|
$uni-spacing-col-base: 8px; |
||||
|
$uni-spacing-col-lg: 12px; |
||||
|
|
||||
|
/* 透明度 */ |
||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
||||
|
|
||||
|
/* 文章场景相关 */ |
||||
|
$uni-color-title: #2C405A; // 文章标题颜色 |
||||
|
$uni-font-size-title:20px; |
||||
|
$uni-color-subtitle: #555555; // 二级标题颜色 |
||||
|
$uni-font-size-subtitle:26px; |
||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色 |
||||
|
$uni-font-size-paragraph:15px; |
||||
Loading…
Reference in new issue