524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template>
|
||
<view class="job-list" style="background-image: url('/packageRc/static/pageBg.png');">
|
||
<!-- <view class="top_box_bg">
|
||
<image src="/packageRc/static/pageBg.png" width="750rpx" height="496rpx" />
|
||
</view> -->
|
||
<view class="job-list__content" style="height: calc(-32rpx + 100vh)">
|
||
<view style="display: flex; justify-content: space-between;">
|
||
<input style="border: 1px solid #e4e4e4;height: 64rpx;padding: 0 16rpx;flex-grow: 1;border-radius: 30rpx;"
|
||
placeholder="输入经办人姓名进行搜索"
|
||
border="surround"
|
||
v-model="queryParams.agentUserName"
|
||
shape="circle"
|
||
:customStyle="customInputStyle"
|
||
/>
|
||
<!-- <view slot="suffix">
|
||
<u-icon
|
||
@tap="handleSearch"
|
||
name="search"
|
||
color="#2979ff"
|
||
size="28"
|
||
></u-icon>
|
||
</view> -->
|
||
<button
|
||
class="custom-style"
|
||
@click="openshow"
|
||
>{{ filterTotal > 0 ? '筛选+' + filterTotal : '筛选' }}</button>
|
||
</view>
|
||
<view
|
||
v-if="total"
|
||
style="position: relative; padding-top: 16px; color: #000"
|
||
>
|
||
<text>共 {{ total }} 条</text>
|
||
</view>
|
||
<scroll-view
|
||
class="job-list__scroll"
|
||
scroll-y="true"
|
||
@scrolltolower="loadMoreJobs"
|
||
>
|
||
<view
|
||
class="jobSearchListview"
|
||
v-for="(item, index) in tableList"
|
||
:key="item.id"
|
||
@click="goNeedsDetail(item)"
|
||
>
|
||
|
||
<view class="custom_timeline_marker">
|
||
<view class="custom_timeline_line" :class="{ last: index === item.length - 1 }"></view>
|
||
<view class="custom_timeline_point active"></view>
|
||
</view>
|
||
<view class="job-list__item inner">
|
||
<view class="job-list__item-detail" style="margin: 0">{{ item.practicalSolutionTime }}</view>
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<view class="job-list__item-detail" style="color: #333">{{ selectDictLabel(serviceTypeList, item.demandType) }}</view>
|
||
<view class="job-list__item-detail">
|
||
<text>经办人:</text>
|
||
<text>{{ item.agentUserName || "-" }}</text>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<uni-popup ref="show" @close="close" @open="open" background-color="#fff" type="bottom">
|
||
<view class="dialog_div">
|
||
<view class="dialog_div_top">
|
||
<view @click="close">取消</view>
|
||
<view @click="handleSearch">确定</view>
|
||
</view>
|
||
<view>
|
||
<view class="df_flex">
|
||
<view class="text">服务类别：</view>
|
||
<view class="df_flex_items">
|
||
<view
|
||
class="item"
|
||
@click="handleServiceStatus('demandType', item)"
|
||
:class="
|
||
item.dictValue == queryParams.demandType ? 'item-active' : ''
|
||
"
|
||
v-for="item in serviceTypeList"
|
||
:key="item.dictValue"
|
||
>{{ item.dictLabel }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dialog_div_btn">
|
||
<u-button class="reset-style" text="重 置" @click="reset"></u-button>
|
||
<u-button
|
||
class="sure-style"
|
||
text="确 定"
|
||
@click="handleSearch"
|
||
></u-button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { timeList } from "@/packageRc/apiRc/timeLine";
|
||
export default {
|
||
name: "serviceRecord",
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
tableList: [],
|
||
serviceTypeList: [
|
||
{
|
||
dictLabel: "全部",
|
||
dictValue: "",
|
||
},
|
||
],
|
||
loading: false,
|
||
status: "more", // 加载更多状态
|
||
customInputStyle: {
|
||
background: "#fff",
|
||
height: "40rpx",
|
||
},
|
||
filterTotal: 0,
|
||
show: false,
|
||
userId:"",
|
||
queryParams: {
|
||
page: 1,
|
||
size: 10,
|
||
demandType: "",
|
||
serviceObjectName: "",
|
||
userId:""
|
||
},
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.queryParams.userId = options.userId;
|
||
this.userId = options.userId;
|
||
this.$getDict("qcjy_fwlx").then((res) => {
|
||
this.serviceTypeList = this.serviceTypeList.concat(res.data);
|
||
});
|
||
},
|
||
mounted() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
openshow() {
|
||
this.$refs.show.open();
|
||
},
|
||
selectDictLabel(datas, value) {
|
||
if (value === undefined) {
|
||
return ''
|
||
}
|
||
var actions = []
|
||
Object.keys(datas).some((key) => {
|
||
if (datas[key].dictValue == ('' + value)) {
|
||
actions.push(datas[key].dictLabel)
|
||
return true
|
||
}
|
||
})
|
||
if (actions.length === 0) {
|
||
actions.push(value)
|
||
}
|
||
return actions.join('')
|
||
},
|
||
open() {
|
||
// console.log('open');
|
||
},
|
||
reset() {
|
||
this.queryParams = {
|
||
page: 1,
|
||
size: 10,
|
||
demandType: "",
|
||
serviceObjectName: "",
|
||
userId:this.userId
|
||
};
|
||
this.filterTotal = 0;
|
||
},
|
||
close() {
|
||
this.$refs.show.close();
|
||
// console.log('close');
|
||
},
|
||
goNeedsDetail(item) {
|
||
let needsType = "";
|
||
// 走访调查和电话沟通，统一页面，不查需求
|
||
if (item.demandType == 4||item.demandType == 5) {
|
||
uni.navigateTo({
|
||
url: `/pages/community/investigationDetails?id=${item.id}`,
|
||
});
|
||
} else {
|
||
if (item.demandType == 1) {
|
||
needsType = 1;
|
||
}
|
||
if (item.demandType == 2) {
|
||
needsType = 3;
|
||
}
|
||
if (item.demandType == 3) {
|
||
needsType = 4;
|
||
}
|
||
if (item.demandType == 9) {
|
||
needsType = 5;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: `/packageRc/pages/needs/needDetail?id=${item.businessId}&type=${needsType}&showTab=1`,
|
||
});
|
||
}
|
||
},
|
||
handleServiceStatus(label, item) {
|
||
this.filterTotal = 0;
|
||
this.queryParams[label] = item.dictValue;
|
||
for (const key in this.queryParams) {
|
||
if (key == "demandType" || key == "personType" || key == "gender") {
|
||
this.filterTotal += this.queryParams[key] ? 1 : 0;
|
||
}
|
||
}
|
||
},
|
||
// 加载更多
|
||
loadMoreJobs() {
|
||
if (this.tableList.length >= this.total || this.status === "noMore")
|
||
return;
|
||
this.queryParams.pageNum += 1;
|
||
this.getList();
|
||
},
|
||
// 获取列表
|
||
async getList(reset = false) {
|
||
if (this.loading) return;
|
||
this.loading = true;
|
||
|
||
// 重置数据
|
||
if (reset) {
|
||
this.tableList = [];
|
||
this.queryParams.pageNum = 1;
|
||
}
|
||
const { code, rows, total } = await timeList(this.queryParams);
|
||
if (code === 200) {
|
||
this.tableList = [...this.tableList, ...rows];
|
||
this.tableList.forEach((element) => {
|
||
this.$set(element, "isEye", false);
|
||
});
|
||
this.total = total;
|
||
this.status = this.tableList.length >= this.total ? "noMore" : "more";
|
||
}
|
||
this.loading = false;
|
||
},
|
||
// 搜索功能处理
|
||
handleSearch() {
|
||
console.log(this.queryParams,"查询参数")
|
||
this.show = false;
|
||
this.$refs.show.close();
|
||
this.getList(true);
|
||
},
|
||
getTimeList() {
|
||
timeList(this.queryParams).then((res) => {
|
||
if (res.code == 200) {
|
||
this.tableList = res.rows;
|
||
this.total = res.total;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.job-list__content {
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
.job-list {
|
||
padding:32rpx;
|
||
background-color: #f4f4f4;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
background-repeat: no-repeat;
|
||
&__navbar {
|
||
height: 80rpx;
|
||
}
|
||
|
||
&__content {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding: 32rpx;
|
||
z-index: 10;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
border: 1px solid #fff;
|
||
}
|
||
|
||
&__scroll {
|
||
margin-top: 10rpx;
|
||
height: calc(100vh - 320rpx);
|
||
}
|
||
|
||
&__item {
|
||
position: relative;
|
||
padding: 32rpx;
|
||
background-color: #d0dcee;
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
|
||
.tips {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
min-width: 40rpx;
|
||
padding: 0 24rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
color: #1ace62;
|
||
border-radius: 0px 16rpx 0px 16rpx;
|
||
background-color: #d9f9ed;
|
||
border: 1px solid #58e6a2;
|
||
}
|
||
}
|
||
|
||
&__item-detail {
|
||
margin-top: 20rpx;
|
||
color: #8e8e8e;
|
||
|
||
view,
|
||
text:last-child {
|
||
margin-left: 10rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.tab_list {
|
||
margin-top: 30rpx;
|
||
height: 86rpx;
|
||
color: #ce6b1a;
|
||
border-top: 1px solid #eff2f6;
|
||
}
|
||
|
||
.items {
|
||
margin-top: 30rpx;
|
||
border-top: 1px solid #d0dcee;
|
||
}
|
||
|
||
.post_job_btn {
|
||
position: fixed;
|
||
bottom: 120rpx;
|
||
right: 16rpx;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 50%;
|
||
z-index: 20;
|
||
background: url("https://rc.jinan.gov.cn/qcwjyH5/static/images/addPersonnel.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.dialog_form {
|
||
padding: 30rpx;
|
||
width: 80vw;
|
||
|
||
.tadio {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
.jobSearchListview {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
// padding: 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.inner{
|
||
flex-grow: 1;flex-shrink: 1;
|
||
border-radius: 8px;
|
||
// background: #ffffff;
|
||
}
|
||
.custom_timeline_marker {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 40rpx;
|
||
// width: 16rpx;
|
||
|
||
/* 虚线样式 */
|
||
.custom_timeline_line {
|
||
position: absolute;
|
||
width: 4rpx;
|
||
top: 0;
|
||
bottom: 0;
|
||
height: 160rpx;
|
||
background: repeating-linear-gradient(to bottom,
|
||
#76A0DF 0px,
|
||
#76A0DF 8rpx,
|
||
transparent 8rpx,
|
||
transparent 16rpx);
|
||
|
||
&.last {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.custom_timeline_point {
|
||
z-index: 1;
|
||
/* 确保点覆盖在线条之上 */
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
border: 10rpx solid #e0e0e0;
|
||
|
||
&.active {
|
||
border: 10rpx solid #007aff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jobSearchListview_currentStatus {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 40rpx;
|
||
}
|
||
.jobSearchListview_name {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
color: #282828;
|
||
}
|
||
.salaryExpectation {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.salary {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
color: #fa6553;
|
||
}
|
||
}
|
||
}
|
||
.job-list__item-btn {
|
||
height: 60rpx;
|
||
margin-top: 40rpx;
|
||
border-top: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #1a62ce;
|
||
font-size: 26rpx;
|
||
.btn {
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100%;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.custom-style {
|
||
background-color: #4d89e3;
|
||
width: 150rpx;
|
||
color: #fff;
|
||
margin-left: 30rpx;
|
||
line-height: 64rpx;
|
||
font-size: 24rpx;
|
||
border: 1px solid #1a62ce;
|
||
border-radius: 50px;
|
||
}
|
||
.dialog_div {
|
||
.dialog_div_top {
|
||
height: 100rpx;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #077dfe;
|
||
}
|
||
.df_flex_items {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
}
|
||
.df_flex {
|
||
display: flex;
|
||
margin-top: 30rpx;
|
||
margin-left: 30rpx;
|
||
.text {
|
||
width: 140rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.item-active {
|
||
background: linear-gradient(90deg, #1a62ce 0%, #1d8ace 100%) !important;
|
||
color: #fff;
|
||
}
|
||
.item {
|
||
background: #f2f4f7;
|
||
margin: 0 20rpx;
|
||
margin-bottom: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
.dialog_div_btn {
|
||
display: flex;
|
||
margin: 40rpx;
|
||
.reset-style {
|
||
width: 200rpx;
|
||
background: #ffffff;
|
||
margin-right: 40rpx;
|
||
color: #3d3d3d;
|
||
}
|
||
.sure-style {
|
||
background: linear-gradient(270deg, #4370e5 0%, #53a0ea 100%);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.describe {
|
||
//最多显示两行
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
</style>
|