ks-app-employment-service/packageRc/pages/daiban/daiban.vue

<!--
 * @Date: 2025-10-16 15:15:47
 * @LastEditors: shirlwang
 * @LastEditTime: 2025-11-06 16:09:23
-->
<template>
  <view>
  <!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
  <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <view style="padding: 40rpx 28rpx;">
      <view class="kinggang">
        <view>
          <view class="num-title" style="color: #1A62CE">重点毕业生数</view>
          <view>{{infoData.allPersonCount}}</view>
        </view>
        <text style="color: #B5C1D1;">｜</text>
        <view>
          <view class="num-title" style="color: #16ACB7">累计需求数</view>
          <view>{{infoData.demandNum}}</view>
        </view>
        <text style="color: #B5C1D1;">｜</text>
        <view>
          <view class="num-title" style="color: #6A57D1">累计服务数</view>
          <view>{{infoData.fwNum}}</view>
        </view>
      </view>
      <view class="trace-line">
        <view class="trace">
          <view class="title">
            <image src="../../../packageRc/static/trace.png"/>
            毕业生追踪
          </view>
          <view style="display: flex;justify-content: space-between;" @click="goPersonalList">
            <view>点击查看</view>
            <uni-icons color="#639AEB" type="arrow-right" size="16"></uni-icons>
          </view>
        </view>
        <!-- <view class="sendManager">
          <view class="title">
            <image src="../../../packageRc/static/sendManager.png"/>
            任务下发管理员
          </view>
          <view style="display: flex;justify-content: space-between;">
            <view>点击查看</view>
            <uni-icons color="#DBAA4E" type="arrow-right" size="16"></uni-icons>
          </view>
        </view> -->
      </view>
      <view class="titles">
        <view class="title-item active"><view>待办需求预警列表</view></view>
        <view>共 {{jobList1count}}条信息</view>
      </view>
      <view v-for="(item, index) in jobList1" :key="index" class="job-list" @click="toNeedDetail(item)">
        <view class="title">{{ item.personName }} {{ item.deptName }}</view>
        <view class="info">
          {{getDictLabel(item.demandType, qcjy_xqlx)}}_{{ item.jobDescription }}
        </view>
        <view class="bottom-line">
          <view>发起时间：{{item.createTime}}</view>
          <view style="color: #EF7325;">{{getDictLabel(item.currentStatus, qcjy_xqlc)}}</view>
        </view>
      </view>
      <view class="view-more-btn" @click="viewMore">查看更多内容</view>
      <view class="titles">
        <view class="title-item active"><view>待服务毕业生列表</view></view>
        <view>共 {{jobListcount}} 条信息</view>
      </view>
      <view v-for="(item, index) in jobList" :key="index" class="person-list">
        <view class="top-info">
          <image v-if="index%2==0" src="../../../packageRc/static/personIcon.png"/>
          <image v-else src="../../../packageRc/static/personIconFe.png"/>
          <view class="top-right">
            <view class="name-line">
              <view class="name">{{item.name}}<view   class="tag">{{item.zy}}</view></view>
              <view class="service-status" v-if="item.fwzt == 0">•未服务</view>
              <view class="service-status" v-if="item.fwzt == 1">•已服务</view>
              <view class="service-status" v-if="item.fwzt == 2">•联系不上</view>
              <view class="service-status" v-if="item.fwzt == 3">•拒绝服务</view>
              <view class="service-status" v-if="item.isReturn == 1">•被退回</view>
            </view>
            <view class="info-line" style="display: flex;">
              <view style="margin-right: 24rpx;"><text>年龄：</text>{{item.age}}岁</view>
              <view><text>服务次数：</text>{{item.operateNum}}次</view>
            </view>
          </view>
        </view>
        <view class="info-line">
          <view><text>联系电话：</text>{{item.phone || '--'}}</view>
          <view><text>详细地址：</text>{{item.xxdz}}</view>
        </view>
        <view class="services">
          <view @click="showReturnReasonPopup(item.id)">退回</view>
          <view @click="tiao(item)">服务</view>
        </view>
      </view>
      <view class="view-more-btn" @click="goPersonalList">查看更多内容</view>
    </view>
  </scroll-view>
    
    <!-- 退回原因弹窗 -->
    <uni-popup ref="returnReasonPopup" position="center"  round>
      <view class="popup-content" style="background:rgb(248, 248, 248);">
        
        <textarea 
          v-model="returnReason"
          class="reason-textarea" 
          placeholder="请输入退回原因"
          placeholder-class="placeholder-style"
          rows="5"
          maxlength="200"
        ></textarea>
        <view class="popup-footer">
          <button class="cancel-btn" @click="cancelReturn">取消</button>
          <button class="confirm-btn" @click="confirmReturn">确认退回</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { personInfoList,personAlertList } from '../../api/personinfo/index'
import { returnPerson} from '@/packageRc/api/personinfo/index'
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
let activeTab = ref(1)
let activeTitle = ref(1)
let jobList = ref([{},{},{},{},{}])
let jobListcount = ref()
let returnItemData = ref()
let jobList1 = ref([{},{}])
let jobList1count = ref()
// 退回原因弹窗相关
let returnReasonPopup = ref(null)
let returnReason = ref('')
let currentItemIndex = ref(-1)
function goPersonalList() {
  console.log('goPersonalList')
  uni.navigateTo({
    url: '/packageRc/pages/personalList/personalList'
  });
}
function toNeedDetail(item) {
  let demandType = item.demandType == 1 ? 1 : item.demandType == 2 ? 3 :item.demandType == 3 ? 4 :item.demandType == 9 ? 5 : '';
  console.log('toNeedDetail', demandType)
  uni.navigateTo({
    url: `/packageRc/pages/needs/needDetail?showTab=1&type=${demandType}&id=${item.id}&name=${item.personName}`
    // url: `/packageRc/pages/demand/demandail?showTab=1&type=${demandType}&id=${item.id}&name=${item.personName}`
  });
};
function back() {
  uni.navigateBack({
    delta: 1
  });
};
function viewMore() {
  uni.navigateTo({
    url: '/packageRc/pages/needs/needsList'
  });
}
let qcjy_xqlx = ref([])
let qcjy_xqlc = ref([])
let infoData = ref({})
import {getDicts} from '@/packageRc/apiRc/system/dict'
import {getStatistic} from '@/packageRc/apiRc/personinfo/index'
onMounted(() => {
  getlist();
  getlistyujing();
  getDicts('qcjy_xqlx').then(res => {
    qcjy_xqlx.value = res.data
  });
  getDicts('qcjy_xqlc').then(res => {
    qcjy_xqlc.value = res.data
  });
  getStatistic().then(res => {
    infoData.value = res.data
  })
});
function getDictLabel(value, list) {
  const item = list.find(item => item.dictValue === value);
  return item ? item.dictLabel : '';
}
async function getlist(){
  
  try {
    const res = await personInfoList({pageNum: 1, pageSize: 5})
    console.log("res", res);
    jobList.value = res.rows || [];
    jobListcount.value=res.total || 0
  } catch (error) {
    console.error("获取数据失败:", error);
    jobList.value = [];
  }
};
async function getlistyujing(){
  
  try {
    const res = await personAlertList({pageNum: 1, pageSize: 5});
    console.log("res", res);
    jobList1.value = res.rows || [];
    jobList1count.value=res.total || 0
  } catch (error) {
    console.error("获取数据失败:", error);
    jobList1.value = [];
  }
};
 
// 显示退回原因弹窗
function showReturnReasonPopup(dd) {
  this.returnItemData.id=dd
    console.log("退回")
  returnReason.value = '' 
  // 使用 ref 控制弹窗显示
  if (returnReasonPopup.value) {
    returnReasonPopup.value.open()
  }
}

function tiao(item){
  console.log('尝试导航到待办详情页面，ID:', item.id, item.userId);
  // 尝试直接使用uni.navigateTo，使用正确的格式并传递id参数
  uni.navigateTo({
    url: `/packageRc/pages/daiban/daibandetail?id=${item.id}&name=${item.name}&userId=${item.userId}`,
    success: function() {
      console.log('导航成功');
    },
    fail: function(err) {
      console.error('导航失败:', err);
    }
  });
}

// 确认退回
function confirmReturn() {
  if (!returnReason.value.trim()) {
    uni.showToast({
      title: '请填写退回原因',
      icon: 'none'
    })
    return
  }
   const params = {
        id: this.returnItemData.id,
        opinion: this.returnReason
      }
      const { code, msg } =  returnPerson(params);
      if (code == 200) {
        this.returnDialog = false;
        this.$u.toast(msg);
        this.getList(true);
      }
  
  // 这里可以添加提交退回原因的API调用
  console.log('退回原因:', returnReason.value, '项目索引:', currentItemIndex.value)
  
  // 模拟提交成功
  uni.showToast({
    title: '退回成功'
  })
  
  // 使用 ref 控制弹窗关闭
  if (returnReasonPopup.value) {
    returnReasonPopup.value.close()
  }
}

// 取消退回
function cancelReturn() {
  // 使用 ref 控制弹窗关闭
  if (returnReasonPopup.value) {
    returnReasonPopup.value.close()
  }
}
</script>

<style lang="less" scoped>
view{box-sizing: border-box;display: block;}
.container{
  background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
  height: 100vh;
  min-width: 100vw;
  padding-bottom: 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.kinggang{ 
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 36rpx 32rpx 33rpx 32rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  border: 3rpx solid #FFFFFF;
  margin-bottom: 24rpx;background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 52%);
  >view{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-weight: bold;
    >view{font-size: 50rpx;}
    .num-title{
      font-size: 28rpx;
      margin-top: 16rpx;
      font-weight: normal;
    }

    // text{
    //   font-size: 28rpx;
    // }
  }
  image{
    width: 78rpx;
    // margin-bottom: 15rpx;
    height: 78rpx;
  }
  
  /* 退回原因弹窗样式 */
  .popup-content {
    background: #FFFF;
    border-radius: 24rpx;
    padding: 48rpx;
    width: 88%;
    box-sizing: border-box;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  }
  
  .popup-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #282828;
    margin-bottom: 36rpx;
    text-align: center;
  }
  
  .reason-textarea {
    width: 100%;
    border: 2rpx solid #D8D8D8;
    border-radius: 12rpx;
    padding: 24rpx;
    min-height: 220rpx;
    font-size: 30rpx;
    color: #333333;
    box-sizing: border-box;
    background: #FAFAFA;
  }
  
  .placeholder-style {
    color: #999999;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
  }
  
  .cancel-btn,
  .confirm-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 16rpx;
    font-size: 32rpx;
    text-align: center;
    margin: 0 15rpx;
    font-weight: 500;
  }
  
  .cancel-btn {
    background: #F8F8F8;
    color: #666666;
    border: none;
  }
  
  .confirm-btn {
    background: #1A62CE;
    color: #FFFFFF;
    border: none;
  }
  
  /* 弹窗背景遮罩层样式 */
  ::v-deep(.uni-popup__wrapper) {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.trace-line{
  width: 100%;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  >view{
    padding: 37.5rpx 32rpx;
    width: 100%;
    // width: calc(50% - 12rpx);
    .title{
      font-size: 28rpx;
      font-weight: bold;
      color: #1D6AD7;
      margin-bottom: 16rpx;
      display: flex;
      image{
        width: 46rpx;
        height: 46rpx;
        margin-right: 11rpx;
      }
    }
    .more{
      display: flex;
      justify-content: space-between;
    }
  }
  .trace{
    color: #2E77DF;
    border: 2rpx solid #78ADFF;
    background: linear-gradient(0deg, #FFFFFF 1%, #D0E1FF 100%);
    box-shadow: inset 0px 4rpx 10rpx 0px rgba(255, 255, 255, 0.302);
    .title{
      color: #1D6AD7;
    }
  }
  .sendManager{
    border: 2rpx solid #FFC34B;
    color: #C68412;
    box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.302);
    background: linear-gradient(0deg, #FFFFFF 0%, #FBF4D1 100%);
    .title{color: #CE9523;}

  }
}
.tabs{
  margin-bottom: 29rpx;

	border-radius: 16rpx;
	display: flex;
	background: #fff;
	color: #878787;
	text-align: center;
	width: 100%;
	.tab{
		width: 50%;
		border: 4rpx solid transparent;
		border-radius: 16rpx;
		line-height: 64rpx;
		position: relative;
		&.active{
      border: 4rpx solid #fff;
			color: #fff;
			background: linear-gradient(180deg, #79AFFF 1%, #A2B3FE 100%);
      box-shadow: 0px 4rpx 10rpx 0px rgba(40, 102, 194, 0.4);
		}
	}
}
.titles{
  display: flex;
  margin-bottom: 44rpx;
    display: flex;
    justify-content: space-between;
  .title-item{
    font-size: 32rpx;
    font-weight: bold;
    color: #282828;
    margin-right: 32rpx;
    position: relative;
    >view{
      position: relative;
      z-index: 2;
      padding: 0 16rpx;
    }
    &.active::after{
      content: '';
      position: absolute;
      z-index: 1;
      bottom: -12rpx;
      left: 0;
      width: 120%;
      height: 24rpx;
      border-radius: 50px 0px 0px 50px;
      background: linear-gradient(90deg, #78AEFF 0%, rgba(120, 174, 255, 0.31) 52%, rgba(24, 116, 255, 0) 100%);
    }
  }
}
.job-list{
  width: 100%;
  margin: 0 auto;
  color: #333333;
  border-radius: 24rpx;
  background: #FFFFFF;
  padding: 32rpx;
  margin-bottom: 24rpx;
  position: relative;
  .sign{
    position: absolute;
    font-size: 24rpx;
    right: 0;
    top: 0;
    padding: 4rpx 14rpx;
    border: 1rpx solid #EC4827;
    background: rgba(227, 79, 49, 0.09);
    border-top-right-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
    color: #EC4827;
  }
  .top-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-bottom: 16rpx;
    .salary{
      font-size: 32rpx;
      color: #4C6EFB;
      font-weight: bold;
    }
  }
  .title{
    font-size: 32rpx;
    font-weight: bold;
    color: #282828;
    margin-bottom: 16rpx;
    display: flex;
    image{
      width: 46rpx;
      height: 46rpx;
      margin-right: 11rpx;
    }
  }
  .info{
    font-size: 24rpx;
    margin-bottom: 16rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .bottom-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-top: 12rpx;
  }
}
.view-more-btn{ 
  padding: 10rpx 56rpx;
  background: #FFFFFF;
  color: #4C6EFB;
  border: 1rpx solid #4C6EFB;
  text-align: center;
  border-radius: 40rpx;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.person-list{
  padding-top: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  .top-info{
    padding: 0 32rpx;
    margin-bottom: 24rpx;
    display: flex;
    image{
      width: 86rpx;
      height: 86rpx;
      margin-right: 19rpx;
      display: block;
    }
    .top-right{
      flex-grow: 1;
      flex-shrink: 1;
      .name-line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size: 32rpx;
          display: flex;
          margin-right: 15rpx;
          margin-bottom: 3rpx;
          align-items: center;
          .tag{
            font-size: 24rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            margin-left: 15rpx;
            border-radius: 4rpx;
            background: #4D89E3;
            color: #fff;
            flex-shrink: 0;
          }
        }
        .service-status{
          color: #E0A61F;
          font-weight: bold;
          font-size: 26rpx;
          flex-shrink: 0;
        }
      }
      .info-line{
        padding: 0;
        border: 0;
      }
    }
  }
  .info-line{
    padding: 0 32rpx 32rpx;
    color: #3D3D3D;
    border-bottom: 1px solid #E8E8E8;
    >view{
      text{
        color: #8E8E8E;
      }
      font-size: 26rpx;
    }
  }
  .services{
    line-height: 40rpx;
    padding: 28rpx 32rpx;
    display: flex;
    >view{
      flex-grow: 1;
      font-size: 26rpx;
      color: #1A62CE;
      text-align: center;
      &:first-child{
        color: #E04020;
        border-right: 1px solid #D8D8D8;
      }
    }
  }
}

.view-more-btn{ 
  padding: 10rpx 56rpx;
  background: #FFFFFF;
  color: #4C6EFB;
  border: 1rpx solid #4C6EFB;
  text-align: center;
  border-radius: 40rpx;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
</style>