Browse Source

feat: 添加工种选择组件示例和表单字段

feat(userDetail): 添加学历显示和电话显示条件
feat(addResume): 添加工龄字段及相关逻辑
docs(JobTypePickerDemo): 新增工种选择组件示例页面
master
前端-胡立永 2 weeks ago
parent
commit
6f26425bb5
3 changed files with 277 additions and 2 deletions
  1. +255
    -0
      pages/demo/JobTypePickerDemo.vue
  2. +11
    -0
      pages_order/work/addResume.vue
  3. +11
    -2
      pages_order/work/userDetail.vue

+ 255
- 0
pages/demo/JobTypePickerDemo.vue View File

@ -0,0 +1,255 @@
<template>
<view class="page">
<navbar title="工种选择组件示例" leftClick @leftClick="$utils.navigateBack" />
<view class="content">
<view class="demo-section">
<view class="section-title">单选模式</view>
<view class="demo-item">
<uv-cell
title="选择工种(单选)"
rightIconStyle="fontSize: 30rpx;"
:value="singleResult.fullJobType || '请选择工种'"
@click="openSinglePicker"
isLink
></uv-cell>
<view v-if="singleResult.selectedId" class="result-info">
<text>选中ID: {{ singleResult.selectedId }}</text>
<text>选中工种: {{ singleResult.selectedJobType?.name }}</text>
</view>
</view>
</view>
<view class="demo-section">
<view class="section-title">多选模式</view>
<view class="demo-item">
<uv-cell
title="选择工种(多选)"
rightIconStyle="fontSize: 30rpx;"
:value="multipleResult.fullJobType || '请选择工种'"
@click="openMultiplePicker"
isLink
></uv-cell>
<view v-if="multipleResult.selectedIds && multipleResult.selectedIds.length > 0" class="result-info">
<text>选中ID数组: {{ multipleResult.selectedIds.join(',') }}</text>
<text>选中数量: {{ multipleResult.selectedIds.length }}</text>
</view>
</view>
</view>
<view class="demo-section">
<view class="section-title">只选择到二级工种</view>
<view class="demo-item">
<uv-cell
title="选择工种(二级)"
rightIconStyle="fontSize: 30rpx;"
:value="subTypeResult.fullJobType || '请选择工种'"
@click="openSubTypePicker"
isLink
></uv-cell>
<view v-if="subTypeResult.selectedId" class="result-info">
<text>选中ID: {{ subTypeResult.selectedId }}</text>
<text>选中工种: {{ subTypeResult.selectedJobType?.name }}</text>
</view>
</view>
</view>
<view class="demo-section">
<view class="section-title">"选择整个工种"选项</view>
<view class="demo-item">
<uv-cell
title="选择工种(整个工种)"
rightIconStyle="fontSize: 30rpx;"
:value="wholeTypeResult.fullJobType || '请选择工种'"
@click="openWholeTypePicker"
isLink
></uv-cell>
<view v-if="wholeTypeResult.selectedId" class="result-info">
<text>选中ID: {{ wholeTypeResult.selectedId }}</text>
<text>选中工种: {{ wholeTypeResult.selectedJobType?.name }}</text>
</view>
</view>
</view>
<view class="demo-section">
<view class="section-title">使用说明</view>
<view class="usage-info">
<text class="usage-title">组件属性</text>
<text> multiple: 是否支持多选</text>
<text> onlySubType: 是否只选择到二级工种</text>
<text> showSelectWholeType: 是否显示"选择整个工种"选项</text>
<text class="usage-title">返回数据</text>
<text> selectedId: 单选时的工种ID</text>
<text> selectedIds: 多选时的工种ID数组</text>
<text> fullJobType: 完整的工种名称文本</text>
<text> selectedJobType: 选中的工种对象</text>
</view>
</view>
</view>
<!-- 工种选择组件 -->
<JobTypePicker
ref="singlePicker"
@confirm="onSingleConfirm"
/>
<JobTypePicker
ref="multiplePicker"
:multiple="true"
@confirm="onMultipleConfirm"
/>
<JobTypePicker
ref="subTypePicker"
:onlySubType="true"
@confirm="onSubTypeConfirm"
/>
<JobTypePicker
ref="wholeTypePicker"
:showSelectWholeType="true"
@confirm="onWholeTypeConfirm"
/>
</view>
</template>
<script>
import JobTypePicker from '@/components/JobTypePicker.vue'
export default {
components: {
JobTypePicker
},
data() {
return {
singleResult: {}, //
multipleResult: {}, //
subTypeResult: {}, //
wholeTypeResult: {} //
}
},
onLoad() {
//
this.$store.commit('getJobTypeList')
},
methods: {
//
openSinglePicker() {
this.$refs.singlePicker.open()
},
//
openMultiplePicker() {
this.$refs.multiplePicker.open()
},
//
openSubTypePicker() {
this.$refs.subTypePicker.open()
},
//
openWholeTypePicker() {
this.$refs.wholeTypePicker.open()
},
//
onSingleConfirm(result) {
console.log('单选结果:', result)
this.singleResult = result
},
//
onMultipleConfirm(result) {
console.log('多选结果:', result)
this.multipleResult = result
},
//
onSubTypeConfirm(result) {
console.log('二级工种结果:', result)
this.subTypeResult = result
},
//
onWholeTypeConfirm(result) {
console.log('整个工种结果:', result)
this.wholeTypeResult = result
}
}
}
</script>
<style scoped lang="scss">
.page {
background: #f5f5f5;
min-height: 100vh;
}
.content {
padding: 20rpx;
}
.demo-section {
margin-bottom: 40rpx;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
.section-title {
padding: 30rpx 30rpx 20rpx;
font-size: 32rpx;
font-weight: bold;
color: #333;
border-bottom: 1px solid #f0f0f0;
}
.demo-item {
padding: 0;
.result-info {
padding: 20rpx 30rpx;
background: #f8f9fa;
border-top: 1px solid #f0f0f0;
text {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
}
}
.usage-info {
padding: 30rpx;
text {
display: block;
font-size: 26rpx;
color: #666;
line-height: 1.6;
margin-bottom: 10rpx;
&.usage-title {
font-weight: bold;
color: #333;
margin-top: 20rpx;
margin-bottom: 15rpx;
&:first-child {
margin-top: 0;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
</style>

+ 11
- 0
pages_order/work/addResume.vue View File

@ -58,6 +58,15 @@
v-model="form.age" />
</view>
<view class="form-sheet-cell">
<view class="label">
您的工龄
</view>
<input placeholder="请输入年龄"
type="number"
v-model="form.workTime" />
</view>
<view class="form-sheet-cell">
<view class="label">
您的性别
@ -269,6 +278,7 @@
expectAddress : '请选择工作的地区',
natureId : '请选择工作的性质',
age : '请输入您的年龄',
workTime : '请输入您的工龄',
sex : '请选择性别',
nation : '请输入您的民族',
salaryLow : '请输入期望薪资下限',
@ -285,6 +295,7 @@
expectAddress : this.form.expectAddress,
natureId : this.form.natureId,
age : this.form.age,
workTime : this.form.workTime,
nation : this.form.nation,
salaryLow : this.form.salaryLow,
salaryUp : this.form.salaryUp,


+ 11
- 2
pages_order/work/userDetail.vue View File

@ -24,7 +24,7 @@
</view>
</view>
<view class="right">
<view class="phone"
<view v-if="showPhone" class="phone"
@click.stop="callPhone">
<image src="/static/image/home/phone.png" mode=""></image>
联系他
@ -93,7 +93,16 @@
</view>
</view>
<view class="line">
<view class="line" v-if="detail.qualification">
<view class="left">
学历
</view>
<view class="right">
{{ detail.qualification }}
</view>
</view>
<view class="line" v-if="detail.ipAddress">
<view class="left">
IP归属地
</view>


Loading…
Cancel
Save