This commit is contained in:
zxy
2024-03-08 17:08:12 +08:00
17 changed files with 626 additions and 2 deletions

View File

@@ -0,0 +1,75 @@
<template>
<view class="navbar" :style="{height: _data.navHeight+'px'}">
<view class="back" @tap="back">
<uni-icons type="back" size="26" color="#FFFFFF"></uni-icons>
</view>
<view class="title">
{{titke}}
</view>
<view class="ri">
</view>
</view>
</template>
<script>
export default {
name:"navbar",
data() {
return {
_data: {},
};
},
props: {
titke: {
type: String,
required: false,
default: '',
}
},
created() {
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const { top, width, height, right } = menuButtonInfo
const that = this
uni.getSystemInfo({
success: function (res) {
const { statusBarHeight } = res
const margin = top - statusBarHeight
that._data.navHeight = (height + statusBarHeight + (margin * 2))
that._data.statusBarHeight = statusBarHeight
that._data.searchMarginTop = statusBarHeight + margin
that._data.searchHeight = height
that._data.searchWidth= right - width - 30
}
})
},
methods: {
back() {
this.$emit('back')
}
}
}
</script>
<style lang="scss" scoped>
.navbar{
position: sticky;
top: 0;
z-index: 9999;
padding-bottom: 8rpx;
width: 100%;
background-color: #4071f8;
display: flex;
align-items: flex-end;
justify-content: space-between;
.back,.ri{
padding: 10rpx;
width: 50rpx;
}
.title{
line-height: 78rpx;
font-size: 28rpx;
color: #FFFFFF;
}
}
</style>

View File

@@ -0,0 +1,121 @@
<template>
<view class="tabbar_container">
<view class="tabbar_item" v-for="(item, index) in tabbarList" :key="index" @click="changeItem(item)">
<view class="item-top" >
<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath"
:class="[item.centerItem ? 'center-item-img' : '']"></image>
</view>
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
<text>{{ item.text }}</text>
</view>
</view>
</view>
</template>
<script>
let listSrc = require('../../static/img/tabbar/list.png');
let listSrc2 = require('../../static/img/tabbar/avtiveList.png');
let newsSrc = require('../../static/img/tabbar/news.png');
let newsSrc2 = require('../../static/img/tabbar/activeNews.png');
let recruitSrc = require('../../static/img/tabbar/recruit.png');
let recruitSrc2 = require('../../static/img/tabbar/activeRecruit.png');
export default {
data() {
return {
currentItem: 0,
tabbarList: [{
id: 0,
text: "招工列表",
path: '/pages/recruit/subPage/index',
iconPath: listSrc2,
selectedIconPath: listSrc,
centerItem: false,
},
{
id: 1,
text: "发布招工",
path: '/pages/recruit/subPage/recruit',
iconPath: recruitSrc2,
selectedIconPath:recruitSrc,
centerItem: true,
},
{
id: 2,
text: "消息",
path: '/pages/recruit/subPage/MessageList',
iconPath: newsSrc2,
selectedIconPath: newsSrc,
centerItem: false,
}],
}
},
props: {
currentpage: {
type: Number,
required: true,
default: 0,
}
},
mounted() {
this.currentItem = this.currentpage
uni.hideTabBar()
},
methods: {
changeItem(item) {
// uni.switchTab({
// url: item.path
// })
uni.navigateTo({
url: item.path
})
}
},
}
</script>
<style lang="scss" scoped>
.tabbar_container{
background-color: #FFFFFF;
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 100%;
height: 100rpx;
box-shadow: 0 0 5px #999;
display: flex;
align-items: center;
padding: 5rpx 0;
padding-bottom: env(safe-area-inset-bottom);
.tabbar_item{
width: 33.33%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
.item-top{
width: 48rpx;
height: 48rpx;
image{
width: 100%;
height: 100%;
}
}
.item-bottom{
font-size: 24rpx;
}
}
}
.center-item-img{
position: absolute;
top: -58rpx;
left: calc(50% - 53rpx);
width: 106rpx !important;
height: 106rpx !important;
}
.item-active{
color: #4071f8;
}
</style>

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

@@ -0,0 +1,123 @@
<template>
<view class="empty" :style="{ background: bgcolor, marginTop: mrTop + 'rpx' }">
<view class="ty_content" :style="{ paddingTop: pdTop + 'rpx' }">
<view class="content_top" :style="{ width: width + 'rpx', height: height + 'rpx' }">
<image :src="pictrue || Empty" style="width: 100%;" mode=""></image>
</view>
<view class="content_c color_666666">{{ content }}</view>
<button class="content_btn" v-if="showButton" hover-class="active">重新加载</button>
</view>
</view>
</template>
<script>
let Empty = require('../../static/img/Empty.png');
export default {
name: 'empty',
data() {
return {
Empty
}
},
props: {
content: {
type: String,
required: false,
default: '网络加载失败'
},
bgcolor: {
type: String,
required: false,
default: 'transparent'
},
width: {
type: String,
required: false,
default: '504'
},
height: {
type: String,
required: false,
default: '504'
},
pdTop: {
type: String,
required: false,
default: '20'
},
mrTop: {
type: String,
required: false,
default: '0'
},
pictrue: {
type: String,
required: false,
default: ''
},
showButton: {
type: Boolean,
required: false,
default: false
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.empty {
width: 100%;
position: relative;
height: 100%;
overflow: hidden;
.ty_content {
// position: absolute;
// left: 50%;
// top: 0;
// transform: translate(-50%, 0);
display: flex;
width: 100%;
height: max-content;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 20rpx;
.content_top {
// width: 504rpx;
// height: 504rpx;
}
.content_c {
width: 100%;
margin-top: 20rpx;
color: #6A707C;
font-size: 28rpx;
text-align: center;
}
.content_btn {
margin-top: 37rpx;
width: fit-content;
height: 45rpx;
border-radius: 5rpx;
border: 1rpx solid #643CB6;
font-size: 24rpx;
font-family: SourceHanSansCN-Normal, SourceHanSansCN;
font-weight: 400;
color: #643CB6;
line-height: 45rpx;
}
.active {
border: 1rpx solid #666666;
color: #666666;
}
}
}
</style>

View File

@@ -10,6 +10,7 @@ import uView from '@/uni_modules/uview-ui'
// Vue.component('mescroll-body', MescrollBody)
// Vue.component('mescroll-uni', MescrollUni)
import empty from '@/components/empty/empty.vue'
function navTo(url, needLogin) {
console.log(url)
if(needLogin) {
@@ -41,6 +42,7 @@ Vue.component('jl-button', JlButton)
Vue.component('jl-form', JlForm)
Vue.component('jl-form-item', JlFormItem)
Vue.component('cs-button', CSButton)
Vue.component('empty', empty)
Vue.prototype.$api = { msg }
Vue.prototype.navTo = navTo

View File

@@ -71,6 +71,10 @@
}
}
},
"template" : "index.html"
"template" : "index.html",
"router" : {
"base" : "./",
"mode" : "hash"
}
}
}

View File

@@ -229,6 +229,33 @@
"navigationBarTitleText" : "个人招工",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/recruit/subPage/index",
"style" :
{
"navigationBarTitleText" : "招工列表",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/recruit/subPage/MessageList",
"style" :
{
"navigationBarTitleText" : "消息",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/recruit/subPage/recruit",
"style" :
{
"navigationBarTitleText" : "发布招工",
"enablePullDownRefresh" : false,
"navigationStyle": "custom"
}
}
],
"subPackages": [{

View File

@@ -2,7 +2,7 @@
<view class="container">
<view class="select">请选择</view>
<view class="select-text">您是个人招工还是企业招工</view>
<view class="block" @click="navTo('/pages/recruit/reform')">
<view class="block" @click="navTo('/pages/recruit/subPage/index')">
<img src="../../static/img/zhao_icon1.png" alt="" />
<view class="block-text">个人招工</view>
</view>

View File

@@ -0,0 +1,31 @@
<template>
<view class="1">
<CustomNavbar @back="back" :titke="'消息'"></CustomNavbar>
<empty content="暂无数据" mr-top="300"></empty>
<CustomTabbar :currentpage="2"></CustomTabbar>
</view>
</template>
<script>
import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
export default {
components: {CustomTabbar, CustomNavbar},
data() {
return {
}
},
methods: {
back() {
uni.reLaunch({
url: '/pages/my/my'
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,68 @@
<template>
<view >
<CustomNavbar @back="back" :titke="'招工列表'"></CustomNavbar>
<view class="guide">
<view class="guide_content" v-for="(item, index) in arr" :key="index">
<view class="guide_item"> {{item.text}}</view>
<view class="guide_arrow" v-if="index !== arr.length - 1"></view>
</view>
</view>
<empty content="暂无数据" mr-top="200"></empty>
<CustomTabbar :currentpage="0"></CustomTabbar>
</view>
</template>
<script>
import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
let arr = [
{text: '在线填写招工需求'},
{text: '后台审核沟通发布'},
{text: '平台/大屏展示招工任务'},
]
export default {
components: {CustomTabbar, CustomNavbar},
data() {
return {
arr,
dataSource: []
}
},
methods: {
back() {
uni.reLaunch({
url: '/pages/my/my'
})
}
}
}
</script>
<style lang="scss" scoped>
.guide{
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 200rpx;
color: #FFFFFF;
font-size: 28rpx;
background-color: #4071f8;
.guide_content{
display: flex;
align-items: center;
.guide_item{
width: 160rpx;
text-align: center;
background-color: rgba(76, 120, 249, 1);
border-radius: 10rpx;
padding: 10rpx;
}
.guide_arrow{
margin-left: 40rpx;
}
}
}
</style>

View File

@@ -0,0 +1,173 @@
<template>
<view >
<CustomNavbar @back="back" :titke="'发布招工'"></CustomNavbar>
<view class="container">
<view class="wrapper" style="position: relative;">
<view class="top-title">在线提交招工需求</view>
<view class="tips">
<span>专属就业帮扶人</span>
<span>为您提供一对一撮合服务</span>
</view>
<!-- <img src="../../static/img/index/bannerBg.png" alt="" /> -->
<view class="bottom">
<img src="../../../static/img/safe_icon.png" style="width: 40rpx;margin: 0 20rpx" alt="" />
<span>招工快.干活好.纠纷少.隐私保护</span>
</view>
</view>
<view class="form-wrapper">
<view class="require">您的招工需求</view>
<u--textarea v-model="value2" height="140" placeholder="请输入内容" count ></u--textarea>
<u-cell-group style="margin: 20rpx 0;">
<u-cell title="技能要求" :isLink="true"></u-cell>
<u-cell title="任务区域" :isLink="true" value=""></u-cell>
</u-cell-group>
</view>
<view style="font-size: 36rpx;color: #000;font-weight: bold;padding: 0 20rpx;">招工指引</view>
<view class="zhiyin">
<view class="item">
<span>在线填写</span>
<span>招工需求</span>
</view>
<img src="../../../static/img/zhiyin_icon.png" alt="" />
<view class="item">
<span>专属人员</span>
<span>沟通发布</span>
</view>
<img src="../../../static/img/zhiyin_icon.png" alt="" />
<view class="item">
<span>平台/大屏展</span>
<span>示招工任务</span>
</view>
</view>
<view class="bottom">
<view class="btn">提交</view>
</view>
</view>
<CustomTabbar :currentpage="1"></CustomTabbar>
</view>
</template>
<script>
import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
export default {
components: {CustomTabbar, CustomNavbar},
data() {
return {
value2: '招工内容'
}
},
methods: {
back() {
uni.reLaunch({
url: '/pages/my/my'
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
.wrapper {
width: 100%;
height: 300rpx;
background: url(@/static/img/index/bannerBg.png) no-repeat center center;
background-size: 100% 100%;
.top-title {
font-size: 34rpx;
color: #372E33;
font-weight: bold;
position: absolute;
left: 20rpx;
top: 30rpx;
}
.tips {
position: absolute;
left: 20rpx;
top: 90rpx;
font-size: 26rpx;
color: #999;
display: flex;
flex-direction: column;
background-color: #E4F2FD;
padding: 15rpx;
border-radius: 10rpx;
}
.bottom{
position: absolute;
display: flex;
align-items: center;
justify-content: left;
color: #7C401E;
font-size: 28rpx;
left: 5%;
bottom: 0;
right: 5%;
height: 80rpx;
background: linear-gradient(to right, #FFEEDA, #FED38F);;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
}
.top-banner {
}
.form-wrapper {
padding: 20rpx;
.require {
font-size: 36rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
}
.zhiyin {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 40rpx;
padding: 0 20rpx;
.item {
display: flex;
align-items: center;
flex-direction: column;
width: 260rpx;
height: 80rpx;
border-radius: 20rpx;
justify-content: space-between;
padding: 30rpx 0;
margin: 0 20rpx;
box-sizing: content-box;
background-color: #F1F3FF;
span {
color: #63676A;
font-size: 24rpx;
}
}
img {
width: 50rpx;
}
}
.bottom {
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
height: 150rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
.btn {
width: 90%;
height: 100rpx;
text-align: center;
color: #fff;
border-radius: 20rpx;
background-color: #4171F9;
line-height: 100rpx;
}
}
}
</style>

BIN
static/img/Empty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/img/tabbar/list.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/img/tabbar/news.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB