kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整一下代码

Browse Source
This commit is contained in:
aixianling
2022-05-27 16:45:46 +08:00
parent ddb9afa4a9
commit bfb54de844
26 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

434
src/project/grid/AppJob/AppJob.vue Normal file
View File

@@ -0,0 +1,434 @@
<template>
<div class="wrapper">
<div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
</div>
<div class="search-wrap">
<div class="left">
<!-- @click="show=true" -->
<!-- <span>{{ search.typeName ? search.typeName : "全部" }}</span> -->
<!-- <u-icon name="arrow-down" color="#ffffff" size="20"></u-icon> -->
<AiSelect :dict="yesOrNo" v-model="search.typeName" placeholder="请选择">
<span>{{ search.typeName ? search.typeName : "全部类型" }}</span>
<u-icon name="arrow-down" color="#333333" size="20"></u-icon>
</AiSelect>
</div>
<div class="right">
<u-icon name="search" size="32" color="#999999" :custom-style="{marginRight:'8px'}"></u-icon>
<input placeholder="请输入需要搜索的内容" style="flex: 1;color:#fff;" confirm-type="search"
placeholder-style="color:#999999" v-model="search.title"
@confirm="current=1;getList()" />
</div>
</div>
<div class="job-list" v-if="list.length">
<!-- <header>
<span>招工就业列表</span>
<div class="right">
共<em>{{ total }}</em>个职位
</div>
</header> -->
<div class="card" v-for="(item,index) in list" :key="index">
<template v-if="item.type == 1">
<div class="top" @click="toDetail(0,item)">
<div class="title">{{ item.title }}</div>
<div class="job-content">{{ item.remark || "" }}</div>
<div class="photo">
<img
:src="photo.url"
alt="" v-for="photo in item.files" :key="photo.id">
</div>
<div class="info">
<div class="tag">个人求职</div>
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
</div>
</div>
<div class="bottom">
<span class="name">{{ item.linkName }}</span>
<div class="right" @click="phone(item)">
<u-icon name="phone-fill" size="36" color="#4181FF" :custom-style="{marginRight:'8px'}"></u-icon>
{{ item.linkPhone }}
</div>
</div>
</template>
<template v-if="item.type == 0">
<div class="top" @click="toDetail(1,item)">
<div class="post-info">
<div class="post">{{ item.title }}</div>
<div class="salary">{{ item.salary }}</div>
</div>
<div class="require">{{ item.remark || "" }}</div>
<div class="info">
<div class="tag" style="background-color:#1AAAFF">企业招工</div>
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
</div>
</div>
<div class="bottom">
<div class="company">{{ item.companyName }}</div>
</div>
</template>
</div>
</div>
<AiEmpty v-else></AiEmpty>
<div class="btn-wrapper">
<div class="perAdd" @click="$linkTo('./pubJob')" hover-class="text-hover">个人求职</div>
<div class="compAdd" @click="$linkTo('./addCompJop')" hover-class="text-hover">企业招工</div>
</div>
<u-select v-model="show" :list="selectList" @confirm="onConfirm"></u-select>
</div>
</template>
<script>
export default {
name: "AppJob",
appName: "招工就业",
data() {
return {
show: false,
current: 1,
list: [],
total: 0,
search: {
title: "",
type: "",
typeName: "",
},
tabs: ['全部','我的发布'],
tabIndex: 0,
}
},
onLoad() {
this.$dict.load('yesOrNo')
},
computed: {
selectList() {
return [{
value: '',
label: '全部'
}, {
value: '0',
label: '企业招工'
},
{
value: '1',
label: '个人求职'
}];
}
},
methods: {
preview(index) {
this.$previewImage(this.list, index, "url");
},
phone({linkPhone: phoneNumber}) {
uni.makePhoneCall({phoneNumber});
},
onConfirm(val) {
this.search.typeName = val[0].label;
this.search.type = val[0].value;
this.current = 1;
this.getList();
},
tabClick(index) {
this.current = 1,
this.list = [],
this.tabIndex = index
// this.getList()
},
getList() {
this.$instance.post("/app/appjob/list", null, {
params: {
...this.search,
current: this.current
}
}).then(res => {
if (res?.data) {
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
this.total = res.data.total;
}
})
},
toDetail(val, {id}) {
uni.navigateTo({
url: !!val ? `./compJob?id=${id}` : `./persJob?id=${id}`
})
}
},
onShow() {
this.current = 1;
this.getList();
},
onReachBottom() {
this.current++;
this.getList();
}
}
</script>
<style lang="scss" scoped>
.wrapper {
padding-top: 96px;
}
.tab-select {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 96px;
line-height: 96px;
background: #4181FF;
display: flex;
z-index: 999;
.item{
flex: 1;
text-align: center;
font-size: 40px;
font-family: PingFangSC-Regular, PingFang SC;
color: #CDDCF0;
}
.active{
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
position: relative;
color: #fff;
span{
width: 48px;
height: 4px;
background: #FFF;
position: absolute;
bottom: 14px;
left: 50%;
margin-left: -24px;
}
}
}
.search-wrap {
width: 100%;
height: 124px;
background: #F3F6F9;
box-sizing: border-box;
padding: 0 32px;
display: flex;
align-items: center;
box-sizing: border-box;
color: #333333;
.left {
display: flex;
align-items: center;
font-size: 38px;
& > span {
font-size: 40px;
font-weight: 600;
// color: #FFFFFF;
margin-right: 16px;
}
}
.right {
flex: 1;
height: 64px;
background: #FFFFFF;
border-radius: 32px;
margin-left: 32px;
box-sizing: border-box;
padding: 0 32px;
display: flex;
align-items: center;
}
}
.job-list {
box-sizing: border-box;
padding: 0 32px 156px;
& > header {
box-sizing: border-box;
padding: 48px 0 32px;
display: flex;
align-items: center;
justify-content: space-between;
& > span {
font-size: 38px;
font-weight: 600;
color: #333333;
}
.right {
font-size: 28px;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
& > em {
color: #4181FF;
}
}
}
.card {
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
border-radius: 16px;
margin-bottom: 24px;
.top {
box-sizing: border-box;
padding: 32px;
border-bottom: 1px solid #DDDDDD;
.title {
font-size: 36px;
font-weight: 600;
color: #333333;
line-height: 50px;
margin-bottom: 24px;
}
.job-content {
font-size: 32px;
font-weight: 400;
color: #999999;
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-bottom: 24px;
}
.photo {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
& > img {
width: 204px;
height: 204px;
}
}
.info {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
.tag {
width: 144px;
height: 48px;
background: #42D784;
border-radius: 24px;
font-size: 28px;
font-weight: 400;
color: #FFFFFF;
line-height: 50px;
text-align: center;
}
.date {
font-size: 28px;
font-weight: 400;
color: #999999;
}
}
.post-info {
display: flex;
align-items: center;
justify-content: space-between;
.post {
font-size: 36px;
font-weight: 600;
color: #333333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 16px;
}
.salary {
font-size: 36px;
font-weight: 600;
color: #FF3521;
}
}
.require {
font-size: 32px;
font-weight: 400;
color: #999999;
margin-top: 24px;
}
}
.bottom {
height: 104px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 32px;
.name {
font-size: 28px;
font-weight: 400;
color: #333333;
}
.right {
display: flex;
align-items: center;
font-size: 28px;
font-weight: 400;
color: #4181FF;
}
.company {
font-size: 28px;
font-weight: 400;
color: #333333;
line-height: 40px;
}
}
}
}
.btn-wrapper {
display: flex;
justify-content: space-between;
padding: 20px 32px !important;
box-sizing: border-box;
.perAdd,
.compAdd {
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 16px;
width: 47%;
}
.perAdd {
border: 1px solid #A0C0FF;
}
.compAdd {
background: #4181FF;
color: #fff;
}
}
</style>

193
src/project/grid/AppJob/addCompJop.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<div class="addCompJob">
<div class="card">
<div class="form border">
<em>*</em>
<label>招聘岗位</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkName"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
</div>
</div>
<div class="form border">
<em>*</em>
<label>招聘人数</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
<div class="form">
<em>*</em>
<label>薪资待遇</label>
<div class="right">
<u-input trim placeholder="如5k-10k" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
</div>
<div class="card">
<div class="form border">
<em>*</em>
<label>学历要求</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkName"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
</div>
</div>
<div class="form border">
<em>*</em>
<label>年龄要求</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
<div class="form border">
<em>*</em>
<label>性别要求</label>
<div class="right">
<u-input trim placeholder="如5k-10k" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
<div class="forms">
<label><span>*</span>岗位说明</label>
<div class="bottom">
<u-input type="textarea" auto-height trim placeholder="请输入详细描述信息"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
</div>
<div class="card">
<div class="forms">
<label><span>*</span>单位名称</label>
<div class="bottom">
<u-input trim placeholder="请输入单位名称"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
<div class="form border border-top">
<em>*</em>
<label>联系人</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
<div class="form">
<em>*</em>
<label>联系方式</label>
<div class="right">
<u-input trim placeholder="如5k-10k" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
</div>
<div class="btn-wrapper">
<div class="btn" @click="submit" hover-class="text-hover">提交</div>
</div>
</div>
</template>
<script>
export default {
appName: "我要招员工",
data() {
return {}
},
methods: {},
}
</script>
<style lang="scss" scoped>
.addCompJob {
padding-bottom: 150px;
.card {
box-sizing: border-box;
padding: 0 32px;
background-color: #fff;
margin-bottom: 24px;
.form {
height: 112px;
background: #FFFFFF;
display: flex;
align-items: center;
& > em {
width: 16px;
height: 44px;
font-weight: 400;
color: #FF4466;
line-height: 54px;
font-style: normal;
margin-right: 8px;
}
& > label {
font-size: 32px;
font-weight: 600;
color: #666666;
& > span {
font-size: 28px;
font-weight: 400;
color: #999999;
}
}
.right {
flex: 1;
display: flex;
align-items: center;
flex-direction: row-reverse;
.value {
font-size: 34px;
font-weight: 600;
color: #333333;
}
}
}
.forms {
padding: 24px 0;
label {
color: #666666;
font-size: 32px;
font-weight: 600;
span {
color: #FF4466;
font-weight: normal;
}
}
}
.border-top {
border-top: 1px solid #DDDDDD;
}
.border {
border-bottom: 1px solid #DDDDDD;
}
}
}
</style>

178
src/project/grid/AppJob/compJob.vue Normal file
View File

@@ -0,0 +1,178 @@
<template>
<div class="wrapper">
<div class="card">
<div class="post-info">
<div class="post-name">
<span>{{ detail.title }}</span>
<span>{{ detail.salary }}</span>
</div>
<p>{{ detail.education }} | {{ detail.gender }} | {{ detail.age }}岁</p>
</div>
<div class="form">
<div class="label">招聘企业</div>
<div class="value">{{ detail.companyName }}</div>
</div>
<div class="form">
<div class="label">招聘联系人</div>
<div class="value">{{ detail.linkName }}</div>
</div>
<div class="form">
<div class="label">联系方式</div>
<div class="value phone" @click="phone">
<u-icon name="phone-fill" color="#4181FF" size="32" :custom-stype="{marginRight:'8px'}"></u-icon>
{{ detail.linkPhone }}
</div>
</div>
<template v-if="detail.remark">
<header>岗位要求</header>
<div class="post-require">{{ detail.remark }}
</div>
</template>
</div>
<div class="btn">
<div>撤销发布</div>
</div>
</div>
</template>
<script>
export default {
name: "compJob",
appName: "企业招工详情",
data() {
return {
id: null,
detail: {},
}
},
onLoad({id}) {
this.id = id;
this.getDetail();
},
methods: {
phone() {
uni.makePhoneCall({phoneNumber: this.detail.linkPhone});
},
getDetail() {
this.$instance.post("/app/appjob/detail", null, {
params: {id: this.id}
}).then(res => {
if (res?.data) {
this.detail = res.data;
}
})
}
},
onShareAppMessage() {
return {
title: "企业招工",
path: "/mods/AppJob/compJob?id=" + this.id
}
}
}
</script>
<style lang="scss" scoped>
.wrapper {
padding-bottom: 120px;
.card {
padding: 32px 0 32px 32px;
background-color: #ffffff;
.post-info {
padding-right: 32px;
.post-name {
display: flex;
justify-content: space-between;
line-height: 56px;
& > span:first-child {
font-size: 40px;
font-weight: 600;
color: #333333;
}
& > span:last-child {
font-size: 36px;
font-weight: 600;
color: #FF3521;
flex-shrink: 0;
}
}
& > p {
font-size: 32px;
font-weight: 400;
color: #999999;
margin: 16px 0 32px;
}
}
.form {
height: 112px;
background: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #DDDDDD;
padding-right: 32px;
.label {
font-size: 32px;
font-weight: 400;
color: #999999;
}
.value {
font-size: 32px;
font-weight: 400;
color: #333333;
}
.phone {
font-size: 28px;
color: #4181FF;
}
}
header {
font-size: 38px;
font-weight: 600;
color: #333333;
padding: 32px 0;
}
.post-require {
font-size: 32px;
font-weight: 400;
color: #333333;
line-height: 56px;
padding-right: 20px;
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background: #F3F6F9;
padding: 16px 32px;
box-sizing: border-box;
div {
height: 88px;
line-height: 88px;
text-align: center;
background: #FFFFFF;
border-radius: 16px;
border: 1px solid #FF4466;
}
}
}
</style>

181
src/project/grid/AppJob/persJob.vue Normal file
View File

@@ -0,0 +1,181 @@
<template>
<div class="padding">
<div class="card">
<div class="post-info">{{ detail.title }}
</div>
<div class="date">{{ detail.createTime }}</div>
<div class="form border">
<div class="label">求职联系人</div>
<div class="value">{{ detail.linkName }}</div>
</div>
<div class="form border">
<div class="label">联系方式</div>
<div class="value phone" @click="phone">
<u-icon name="phone-fill" color="#4181FF" size="32" :custom-stype="{marginRight:'8px'}"></u-icon>
{{ detail.linkPhone }}
</div>
</div>
<div class="form">
<div class="label">图片</div>
</div>
<div class="photo border">
<img :src="item.url" alt=""
v-for="(item,index) in detail.files" :key="index" @click="preview(index)">
</div>
<header>详细描述</header>
<div class="post-require">{{ detail.remark }}
</div>
</div>
<div class="btn">
<div>撤销发布</div>
</div>
</div>
</template>
<script>
export default {
name: "persJob",
appName:"个人求职详情",
data() {
return {
id: null,
detail: {},
}
},
onLoad({id}) {
this.id = id;
this.getDetail();
},
methods: {
preview(index) {
this.$previewImage(this.detail.files, index, "url");
},
phone() {
uni.makePhoneCall({phoneNumber: this.detail.linkPhone});
},
getDetail() {
this.$instance.post("/app/appjob/detail", null, {
params: {id: this.id}
}).then(res => {
if (res?.data) {
this.detail = res.data;
}
})
}
},
onShareAppMessage() {
return {
title: "个人求职",
path: "/mods/AppJob/persJob?id=" + this.id
}
}
}
</script>
<style lang="scss" scoped>
.padding {
min-height: 100%;
background-color: #ffffff;
padding-bottom: 120px;
.card {
padding: 32px 0 32px 32px;
background-color: #ffffff;
.post-info {
font-size: 40px;
font-weight: 600;
color: #333333;
line-height: 56px;
padding-right: 32px;
}
.date {
font-size: 32px;
font-weight: 400;
color: #999999;
margin: 16px 0 32px;
}
.form {
height: 112px;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 32px;
.label {
font-size: 32px;
font-weight: 400;
color: #999999;
}
.value {
font-size: 32px;
font-weight: 400;
color: #333333;
}
.phone {
font-size: 28px;
color: #4181FF;
}
}
.border {
border-bottom: 1px solid #DDDDDD;
}
.photo {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding-bottom: 48px;
& > img {
width: 225px;
height: 225px;
}
}
header {
font-size: 38px;
font-weight: 600;
color: #333333;
padding: 32px 0;
}
.post-require {
font-size: 32px;
font-weight: 400;
color: #333333;
line-height: 56px;
padding-right: 20px;
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background: #F3F6F9;
padding: 16px 32px;
box-sizing: border-box;
div {
height: 88px;
line-height: 88px;
text-align: center;
background: #FFFFFF;
border-radius: 16px;
border: 1px solid #FF4466;
}
}
}
</style>

158
src/project/grid/AppJob/pubJob.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div class="wrapper">
<div class="card">
<div class="form">
<em>*</em>
<label>标题</label>
</div>
<u-input type="textarea" trim placeholder="请输入标题" maxlength="100" v-model="form.title"
placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
:custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
<div class="form border-top">
<em>*</em>
<label>详细描述</label>
</div>
<u-input type="textarea" trim placeholder="请输入详细描述信息…" maxlength="500" v-model="form.remark"
placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
:custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
</div>
<div class="card" style="padding-bottom: 20px">
<div class="form">
<label>图片上传
<span>(最多9张)</span>
</label>
</div>
<AiUploader :limit="9" v-model="form.files"></AiUploader>
</div>
<div class="card">
<div class="form border">
<em>*</em>
<label>联系人</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkName"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
</div>
</div>
<div class="form">
<em>*</em>
<label>联系方式</label>
<div class="right">
<u-input trim placeholder="请输入" input-align="right"
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
</div>
</div>
</div>
<div class="btn-wrapper">
<div class="btn" @click="submit" hover-class="text-hover">提交</div>
</div>
</div>
</template>
<script>
export default {
name: "pubJob",
appName: "我要找工作",
data() {
return {
form: {
title: "",
remark: "",
files: [],
linkName: "",
linkPhone: "",
type: 1,
},
flag: false
}
},
methods: {
submit() {
if (!!!this.form.title) return this.$u.toast("请输入标题");
if (!!!this.form.remark) return this.$u.toast("请输入详细描述");
if (!!!this.form.linkName) return this.$u.toast("请输入联系人");
if (!!!this.form.linkPhone) return this.$u.toast("请输入联系方式");
if (this.flag) return
this.flag = true
this.$loading()
this.$instance.post("/app/appjob/addOrUpdate", {
...this.form
}).then(res => {
this.$hideLoading()
this.flag = false
if (res.code == 0) {
this.$u.toast("提交成功");
setTimeout(_ => {
uni.navigateBack();
}, 500)
}
})
}
},
}
</script>
<style lang="scss" scoped>
.wrapper {
padding-bottom: 150px;
}
.card {
box-sizing: border-box;
padding-left: 32px;
background-color: #fff;
margin-bottom: 24px;
.form {
height: 112px;
background: #FFFFFF;
display: flex;
align-items: center;
& > em {
width: 16px;
height: 44px;
font-weight: 400;
color: #FF4466;
line-height: 54px;
font-style: normal;
margin-right: 8px;
}
& > label {
font-size: 32px;
font-weight: 600;
color: #666666;
& > span {
font-size: 28px;
font-weight: 400;
color: #999999;
}
}
.right {
flex: 1;
display: flex;
align-items: center;
flex-direction: row-reverse;
margin-right: 32px;
.value {
font-size: 34px;
font-weight: 600;
color: #333333;
}
}
}
.border-top {
border-top: 1px solid #DDDDDD;
}
.border {
border-bottom: 1px solid #DDDDDD;
}
}
</style>