menduner-uniapp/pagesA/student/internshipRecord.vue

<template>
  <view class="defaultBgc">
    <uni-segmented-control :current="current" :values="controlList" @clickItem="handleChange" styleType="text" activeColor="#00B760" style="background-color: #fff;"></uni-segmented-control>
    <scroll-view class="scrollBox defaultBgc" scroll-y="true" @scrolltolower="loadingMore" style="height: calc(100vh - 36px);">
      <view v-if="dataList.length">
        <uni-card v-for="(val, index) in dataList" :key="index" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
          <!-- 企业信息 -->
          <view class="entInfoBox d-flex align-center ss-p-10 ss-p-l-20 ss-m-b-20">
            <image class="enterAvatar" :src="val.enterprise.logoUrl ? val.enterprise.logoUrl : 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
            <view class="ellipsis ss-m-l-20" style="flex: 1;">
              <view class="enterpriseName font-size-16 ellipsis">{{ formatName(val.enterprise.anotherName || val.enterprise.name) }}</view>
              <!-- <view class="ss-m-t-5">
                <span class="color-999">{{ val.enterprise?.industryName || '' }}</span>
                <span class="divider tag-gap1" v-if="val.enterprise?.industryName && val.enterprise?.scaleName"> | </span>
                <span class="color-999">{{ val.enterprise?.scaleName || '' }}</span>
              </view> -->
            </view>
          </view>
          <!-- 职位信息 -->
          <view class="list-shape ss-p-b-10" >
            <view class="titleBox my-5">
              <view class="job-name font-size-16" :style="{'max-width': !val.job.payFrom && !val.job.payTo ? '65vw' : '50vw'}">{{ formatName(val.job.name) }}</view>
              <span v-if="!val.job.payFrom && !val.job.payTo" class="salary-text">面议</span>
              <span v-else class="salary-text">{{ val.job.payFrom }}-{{ val.job.payTo }}{{ val.job.payName ? '/' + val.job.payName : '' }}</span>
            </view>
            <view style="font-size: 13px;" class="ss-m-t-10">
              <span class="tag-gap" style="color: #808080;">
                <span>{{ val.job.area?.str ?? '全国' }}</span>
                <span class="ss-m-x-10" v-if="val.job.eduName">|</span>
                <span>{{ val.job.eduName }}</span>
                <span class="ss-m-x-10" v-if="val.job.expName">|</span>
                <span>{{ val.job.expName }}</span>
              </span>
            </view>
          </view>
          <view>实习时间：{{ timesTampChange(val?.startTime, 'Y-M-D') }} 至 {{ timesTampChange(val?.endTime, 'Y-M-D') }}</view>
          <view class="line ss-m-y-20"></view>
          <view>
            <button @tap="null" class="mini-btn ss-m-x-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#fb8c00;borderColor:#fb8c00">实习报告</button>
            <button class="mini-btn ss-m-x-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#00b760;borderColor:#00b760">实习证书</button>
            <button class="mini-btn ss-m-x-10" type="warning" size="mini" style="color:#ffffff; backgroundColor:#00897b;borderColor:#00897b">企业推荐信</button>
          </view>
        </uni-card>
        <uni-load-more :status="more" />
      </view>
      <view v-else class="nodata-img-parent">
        <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getDict } from '@/hooks/useDictionaries'
import { getStudentPage } from '@/api/student'
import { formatName } from '@/utils/getText'
import { timesTampChange } from '@/utils/date'
import { dealDictObjData } from '@/utils/position'

const more = ref('more')
const current = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10
})

const dataList = ref([])
const getData = async () => {
  try {
    const params = {
      status: tabList.value[current.value]?.value,
      ...query.value
    }
    if (!params?.status) return
    const { data } = await getStudentPage(params)
    const list = data?.list?.length && data.list || []

    list.forEach(e => {
      e.enterprise = dealDictObjData({}, e.enterprise)
      e.job = dealDictObjData({}, e.job)
    })
    //
    dataList.value = dataList.value.concat(list)
    more.value = dataList.value?.length === data?.total ? 'noMore' : 'more'
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
}

const handleChange = (e) => {
  current.value = e.currentIndex
  query.value.pageNo = 1
  dataList.value = []
  getData()
}

// 加载更多
const loadingMore = () => {
  more.value = 'loading'
  query.value.pageNo++
  getData()
}

const tabList = ref([])
const controlList = ref([])
const getTabList = async () => {
  const { data } = await getDict('student_practice_status')
  if (data.code !== 0) {
    return
  }
  tabList.value = data?.data?.length && data.data || []
  controlList.value = tabList.value.map(e => e.label) || []
  console.log('123456:',  data.data )
  if (tabList.value?.length) getData()
}
getTabList()

</script>

<style scoped lang="scss">
:deep(.segmented-control) {
  background-color: #fff !important;
}
.enterpriseName {
  color: #0E100F;
  // font-weight: 700;
}
.enterAvatar {
  width: 25px;
  height: 25px;
  // border-radius: 50%;
  margin: auto;
}
.line {
  border-top: 1px solid #ccc;
}
.list-shape {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.salary-text {
	float: right;
  font-size: 15px;
	color: #00B760;
  font-weight: 700;
}
.job-name {
  font-size: 30rpx;
  // font-weight: 700;
  color: #0E100F;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.entInfoBox {
  background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
}
</style>