ks-app-employment-service/packageRc/pages/daiban/bangfuList.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 "@/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>