xtu_mall/templates/xtu/cms/list_job.html

{include file="header" /}
<link rel="stylesheet" href="/assets/xtu/job.css?v=20260506-2118">

{php}
$jobHeroTitle = trim((string)($category['catname'] ?? cms_t('job_join_us','加入我们')));
$jobHeroDesc = trim((string)($category['description'] ?? cms_t('job_default_list_intro','与 XTU 一起探索技术与行业应用的更多可能。')));
{/php}

<main class="job-page job-list-page job-simple-list-page">
  <section class="job-simple-hero">
    <div class="content-1300-wrap">
      <nav class="job-dji-breadcrumb job-simple-breadcrumb" aria-label="breadcrumb">
        <a href="{:cms_lang_url(addon_url('cms/index/index'))}">{:cms_t('home','首页')}</a>
        <span>/</span>
        <em>{$jobHeroTitle}</em>
      </nav>
      <h1>{$jobHeroTitle}</h1>
      {if $jobHeroDesc !== ''}<p>{$jobHeroDesc}</p>{/if}
    </div>
  </section>

  <section class="job-simple-list-section">
    <div class="content-1300-wrap">
      <div class="job-simple-tools">
        <div class="job-simple-search">
          <i class="bi bi-search"></i>
          <input type="search" id="jobKeyword" placeholder="{:cms_t('job_search_placeholder','搜索岗位名称、地点或类型')}" autocomplete="off">
        </div>
        <div class="job-simple-filter" aria-label="{:cms_t('job_category_switch','招聘栏目切换')}">
          {if !empty($category['parentid'])}
          {yzn module="cms" action="category" catid="$category['parentid']" cache="3600" order="listorder DESC,id ASC" num="20" return="jobTabs"}
          {volist name="jobTabs" id="tab"}
          <a class="job-filter-chip {if $tab.id==$catid}is-active{/if}" href="{$tab.url}" target="{$tab.target|default='_self'}">{$tab.catname}</a>
          {/volist}
          {/yzn}
          {/if}
        </div>
      </div>

      <div class="job-list-wrap job-simple-list-wrap" id="jobListWrap">
        {yzn module="cms" action="lists" catid="$catid" order="listorder DESC,publish_time DESC,id DESC" num="12" page="$page" return="data" moreinfo="1"}
        {volist name="data" id="vo"}
        <a class="job-card job-simple-row" href="{$vo.url}" data-title="{$vo.title|default=''}" data-address="{$vo.address|default=''}" data-jobtype="{$vo.jobtype|default=''}">
          <div class="job-simple-row-title">{$vo.title}</div>
          <div class="job-simple-row-meta">
            {if !empty($vo.address)}<span><i class="bi bi-geo-alt"></i>{$vo.address}</span>{/if}
            {if !empty($vo.jobtype)}<span><i class="bi bi-briefcase"></i>{$vo.jobtype}</span>{/if}
            {if !empty($vo.publish_time)}<span><i class="bi bi-clock"></i>{$vo.publish_time|date='Y-m-d'}</span>{/if}
          </div>
          <span class="job-simple-row-link">{:cms_t('job_view_detail','查看详情')} <i class="bi bi-arrow-right"></i></span>
        </a>
        {/volist}
        {/yzn}
        <div class="job-empty" id="jobEmpty" hidden>
          <h3>{:cms_t('job_no_match','暂无匹配岗位')}</h3>
          <p>{:cms_t('job_no_match_desc','请尝试更换关键词或筛选条件。')}</p>
        </div>
      </div>

      {if !empty($pages)}
      <div class="job-pagination">{$pages|raw}</div>
      {/if}
    </div>
  </section>

  {include file="footer-links" /}
</main>

<script>
(function(){
  var input = document.getElementById('jobKeyword');
  var wrap = document.getElementById('jobListWrap');
  var empty = document.getElementById('jobEmpty');
  if (!wrap) return;
  var cards = Array.prototype.slice.call(wrap.querySelectorAll('.job-card'));
  function normalize(v){ return (v || '').toString().toLowerCase().replace(/\s+/g,''); }
  function applyFilter(){
    var kw = normalize(input ? input.value : '');
    var visible = 0;
    cards.forEach(function(card){
      var text = normalize([card.dataset.title, card.dataset.address, card.dataset.jobtype].join(' '));
      var show = !kw || text.indexOf(kw) !== -1;
      card.style.display = show ? '' : 'none';
      if (show) visible++;
    });
    if (empty) empty.hidden = visible !== 0;
  }
  if (input) input.addEventListener('input', applyFilter);
})();
</script>
{include file="footer" /}