yizhizan-h5/pages/recruitmentData/index.vue

<template>
  <view class="page">
    <!-- 背景层 -->
    <view class="detail-bg"></view>
    
    <!-- 导航栏 -->
    <nav-bar title="招聘数据"></nav-bar>

    <!-- 可滚动内容区域 -->
    <view class="content">
      <!-- 头部区域 -->
      <view class="header-section">
        <view class="header-content">
          <view class="main-title">我的招聘数据</view>
          <view class="week-data-btn" @click="toggleWeekData">
            <image src="/static/images/zhoushuju.svg" class="week-icon" mode="aspectFit"></image>
            <text class="btn-text">周数据</text>
          </view>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="content-section">
      <!-- 今日数据卡片 -->
      <view class="today-data-card">
        <view class="card-header">
          <view class="card-title">
            <text>今日数据</text>
            <image src="/static/images/qiehuan.svg" class="switch-icon" mode="aspectFit" @click="goToDataCenter"></image>
          </view>
		  <picker @change="changeZw" :value="zwIndex" :range="zwList" :range-key="'name'">
			<view class="filter-btn">
				<text class="filter-text">{{zwList.length?zwList[zwIndex].name:''}}</text>
				<u-icon name="arrow-down" color="#016BF6" size="16"></u-icon>
			</view>
		  </picker>
        </view>
        
        <view class="data-grid">
          <view 
            class="data-item" 
            v-for="(item, index) in todayData" 
            :key="index"
            @click="showDetail(item)"
        >
            <view class="data-title">{{ item.title }}</view>
              <view class="data-compare">
                <view class="data-number">{{ item.number }}</view>
                    <view class="data-compare-text">
                        <text class="compare-text">较昨日</text>
                        <text class="compare-change">{{ item.change }}</text>
                        <u-icon name="arrow-right" color="#999" size="24"></u-icon>
                    </view>
               </view>
            </view>
        </view>
      </view>

      <!-- 今日权益使用量卡片 -->
      <view class="benefits-card">
        <view class="card-title">今日权益使用量</view>
        
        <view class="benefits-list">
          <view 
            class="benefit-item" 
            v-for="(benefit, index) in benefitsData" 
            :key="index"
          >
            <!-- 图标、查看和急聘标签区域 -->
            <view class="benefit-header">
              <view class="benefit-icon-container">
                <image :src="getBenefitIcon(benefit.action)" class="benefit-icon" mode="aspectFit"></image>
                <text class="benefit-action">{{ benefit.action }}</text>
                <text v-if="benefit.isUrgent" class="urgent-tag">急聘</text>
              </view>
            </view>
            
            <!-- 招聘职位和进度条区域 -->
            <view class="benefit-content">
              <view class="benefit-type-container">
                <text class="benefit-type">{{ benefit.type }}</text>
              </view>
              
              <view class="progress-container">
                <u-line-progress 
                  :percent="(benefit.used / benefit.total * 100)"
                  :show-percent="false"
                  :height="12"
                  active-color="#016BF6"
                  inactive-color="#E3E7EC"
                ></u-line-progress>
                <text class="progress-text">{{ benefit.used }}/{{ benefit.total }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  components: {
    navBar
  },
  data() {
    return {
      statusBarHeight: 0,
      todayData: [
        { title: '我看过', number: 0, change: 0 },
        { title: '看过我', number: 0, change: -9 },
        { title: '我沟通', number: 0, change: -9 },
        { title: '求职者沟通', number: 0, change:0 },
        { title: '收获简历', number: 0, change: 0 },
        { title: '交换电话微信', number: 0, change: 0 },
        { title: '接受面试', number: 0, change: 0 }
      ],
      benefitsData: [
        {
          action: '查看',
          type: '招聘职位',
          used: 0,
          total: 10,
          isUrgent: false
        },
        {
          action: '沟通',
          type: '招聘职位',
          used: 0,
          total: 10,
          isUrgent: false
        },
        {
          action: '查看',
          type: '急聘职位',
          used: 0,
          total: 10,
          isUrgent: true
        },
        {
          action: '沟通',
          type: '急聘职位',
          used: 0,
          total: 10,
          isUrgent: true
        }
      ],
	    zwList:[],
	    zwIndex:0,
	  
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight || 0
	// this.getData()
	this.getZwList()
  },
  methods: {
	getZwList(){
	  this.$Request.getT("/app/postPush/getMyPostPush").then(res=>{
		  res.data.records.forEach(item=>{
		  	this.zwList.push({
		  		name:item.ruleClassifyName,
		  		id:item.postPushId
		  	})
		  })
			this.getDataStatics()
	  })
	},
	getDataStatics(){
		let data = {
			postPushId:this.zwList[this.zwIndex].id,
			todayStart:this.formatDateRange(new Date(),new Date())[0],
			todayEnd:this.formatDateRange(new Date(),new Date())[1],
		}
		this.$Request.getT("/app/user/userYesterdayData",data).then(res=>{
      this.todayData[0].number=res.data.iSaw;
      this.todayData[0].change=res.data.tyIsaw;
      this.todayData[1].number=res.data.sawMe;
      this.todayData[1].change=res.data.tySawMe;
      this.todayData[2].number=res.data.iCommunicated;
      this.todayData[2].change=res.data.tyICommunicated;
      this.todayData[3].number=res.data.tyCandidateCommunicated;
      this.todayData[3].change=res.data.tyCandidateCommunicated;
      this.todayData[4].number=res.data.receivedResumes;
      this.todayData[4].change=res.data.tyReceivedResumes;
      this.todayData[5].number=res.data.exchangedContact;
      this.todayData[5].change=res.data.tyExchangedContact;
      this.todayData[6].number=res.data.acceptedInterview;
      this.todayData[6].change=res.data.tyAcceptedInterview;

    })
	},
	formatDateRange(startDate, endDate) {
	    // 格式化日期为 YYYY-MM-DD 格式
	    const formatDate = (date) => {
	        const year = date.getFullYear();
	        const month = String(date.getMonth() + 1).padStart(2, '0');
	        const day = String(date.getDate()).padStart(2, '0');
	        return `${year}-${month}-${day}`;
	    };
	    
	    // 创建开始日期的 00:00:00
	    const startDateTime = `${formatDate(startDate)} 00:00:00`;
	    
	    // 创建结束日期的 23:59:59
	    const endDateTime = `${formatDate(endDate)} 23:59:59`;
	    
	    return [startDateTime, endDateTime];
	},
	changeZw (e){
		this.zwIndex=e.detail.value
	},
    getBenefitIcon(action) {
      switch(action) {
        case '查看':
          return '/static/images/eye.svg'
        case '沟通':
          return '/static/images/goutong.svg'
        default:
          return '/static/images/eye.svg'
      }
    },
    goBack() {
      uni.navigateBack()
    },
    goToDataCenter() {
      uni.navigateTo({
        url: '/pages/recruitmentData/dataCenter'
      })
    },
    toggleWeekData() {
      // 切换周数据视图
      console.log('切换周数据')
	  uni.navigateTo({
	    url: '/pages/recruitmentData/dataCenter'
	  })
    },
    showDetail(item) {
      // 显示详情
      console.log('显示详情:', item)
    },
	getData(){
		this.$Request.getT("/app/user/userData").then(res=>{
			
		})
	},
  }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.detail-bg {
    height: 327px;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
    position: absolute;
}

.content {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 80rpx;
  left: 0;
  right: 0;
  z-index: 1000;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 20rpx;
}

.navbar-left {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.navbar-title {
    color: rgba(255, 255, 255, 1);  
    font-family: DM Sans;
    font-size: 30rpx;
    font-weight: 700;
    line-height: 52rpx;
    letter-spacing: 0.5%;
    text-align: center;
}

.navbar-right {
  width: 44px;
}

/* 头部区域 */
.header-section {
  padding: 40rpx 32rpx 0rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-title {
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 48rpx;
    font-weight: 700;
    line-height: 60rpx;
    letter-spacing: 0px;
    text-align: left;
}

.week-data-btn {
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  padding: 12rpx 28rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.week-icon {
  width: 32rpx;
  height: 32rpx;
}

.btn-text {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0%;
    text-align: left;
}

.calendar-icon {
  color: white;
  font-size: 12px;
}

/* 内容区域 */
.content-section {
  padding: 32rpx;
}

/* 今日数据卡片 */
.today-data-card {
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
    color: rgba(23, 23, 37, 1);
    font-family: DM Sans;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 44rpx;
    letter-spacing: 0.5%;
    text-align: left;
}

.switch-icon {
  width: 18rpx;
  height: 18rpx;
  margin-left: 12rpx;
}

.filter-btn {
    padding: 8rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(1, 107, 246, 1);
    border-radius: 8rpx;
    background: rgba(252, 233, 220, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
}

.filter-text {
    color: rgba(1, 107, 246, 1);
    font-family: DM Sans;
    font-size: 16rpx;
    font-weight: 400;
    line-height: 20rpx;
}

/* 数据网格 */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.data-item {
    padding: 24rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
}

.data-title {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0%;
    text-align: left;
}

.data-number {
    color: rgba(51, 51, 51, 1);
    font-family: DM Sans;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 52rpx;
    letter-spacing: 0%;
    text-align: left;
}

.data-compare-text {
    gap: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-compare {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-text {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}

.compare-change {
    color: var(--016BF6, rgba(1, 107, 246, 1));
    font-family: DM Sans;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}


/* 权益使用量卡片 */
.benefits-card {
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    border: 0.5px solid rgba(227, 231, 236, 1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
}

.benefits-list {
  margin-top: 32rpx;
}

.benefit-item {
  background: rgba(255, 255, 255, 1);
  border: 0.5px solid rgba(227, 231, 236, 1);
  border-radius: 6px;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.benefit-item:last-child {
  margin-bottom: 0;
}

.benefit-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.benefit-icon-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.benefit-action {
    color: rgba(102, 102, 102, 1);
    font-family: DM Sans;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    letter-spacing: 0%;
    text-align: left;
}

.benefit-icon {
  width: 32rpx;
  height: 32rpx;
}

.benefit-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.benefit-type-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.benefit-type {
    color: rgba(153, 153, 153, 1);
    font-family: DM Sans;   
    font-size: 20rpx;
    font-weight: 400;
    line-height: 26rpx;
    letter-spacing: 0%;
    text-align: left;
}

.urgent-tag {
  background: rgba(236, 225, 253, 1);
  padding: 8rpx;
  border: 1px solid rgba(106, 84, 214, 1);
  border-radius: 8rpx;
  color: rgba(106, 84, 214, 1);
  font-family: DM Sans;
  font-size: 16rpx;
  font-weight: 400;
  line-height: 20rpx;
  letter-spacing: 0%;
  text-align: left;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.progress-text {
  color: rgba(153, 153, 153, 1);
  font-family: DM Sans;
  font-size: 20rpx;
  font-weight: 400;
  line-height: 26rpx;
  min-width: 60rpx;
  text-align: right;
}
</style>