添加页面
This commit is contained in:
523
packageRc/pages/daiban/bangfuList.vue
Normal file
523
packageRc/pages/daiban/bangfuList.vue
Normal file
@@ -0,0 +1,523 @@
|
||||
<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" backgroundColor="#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 "@/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>
|
||||
Reference in New Issue
Block a user