volunteer-4/src/pages-sub/home/wishesList/components/DataTable.vue

<template>
  <!-- 表格 -->
  <view class="w-full">
    <!-- 头部 -->
    <view class="flex items-center gap-[16rpx]">
      <view
        v-for="(headItem, index) in columns"
        :key="index"
        class="text-[24rpx] text-[#505050]"
        :style="{ width: headItem.width }"
      >
        {{ headItem.label }}
        <view
          @click.stop="
            showToast(headItem.key === 'lineDiff' ? 1 : headItem.key === 'rankDiff' ? 2 : 0)
          "
          class="i-carbon-help text-[#86909C]"
          v-if="headItem.key === 'lineDiff' || headItem.key === 'rankDiff'"
        ></view>
      </view>
    </view>

    <!-- 表格内容 -->
    <view>
      <view
        v-for="(item, index) in recompileData"
        class="flex items-center gap-[16rpx]"
        :key="index"
      >
        <view
          v-for="(col, colIndex) in columns"
          class="text-[24rpx] text-[#505050]"
          :style="{ width: col.width }"
          :key="colIndex"
        >
          <view v-if="col.key === 'lineDiff'">
            {{ item['lineDiff'] }}
          </view>
          <view class="flex items-center gap-[8rpx]" v-else-if="col.key === 'rankDiff'">
            {{ item['rankDiff'] }}
            <image
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAATlJREFUSEu11eFNwzAQBeB3gQEyAIV2g67QDewJgBGYgHYCRmhH8AbABHSDRhSJvxmA5sEFtTKuk7jIza9EivP57l0SQcZjY8z0ApgSGAtwI0ApInpdSkYH78bcicjy6JnkOiukQAwj8Jod+rD29qd1K78qkqusUAxRsCEX2aAQIXmviGam58mQTtTEuXVseGLItXNt+zSzAkgbhq0xjxCZg5yPnFv4WB/i3zdY0QHZr/KwAKlB2pFzL7Gqe6EjxMNEpPKmqxZydtXR2jarrhc2QGoNtBB50rc+WDOIdEIhst/tpzHjncizhyUhUagL2VfhYeVQuzqHYQj5gwFlXyZhJIeMUpH/foRb6NxIm5GPEKgK0p7SktQKZWvtG35/VtWOnE2cq1IXn3KfbIwpL4ti+dU0D+dCdEPf+I3M1u2H9e8AAAAASUVORK5CYII="
              mode="scaleToFill"
              class="w-[16rpx] h-[16rpx]"
              v-if="item['rankDiff'] > 0"
            />
            <image
              v-else
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAATCAYAAACORR0GAAAAAXNSR0IArs4c6QAAARRJREFUSEu91EFOhDAYhuH370TXHGGOwMaEuNJM4jnKCYwnEE4yeAoTE0LcsZwb6BE8wFC1OBBGO6UmZboikPTJ9/Uvkj3rtbqkMUqK9nb7xEJLrmv9Bqzt/kaJXgqTrNZawXYIshQmFjgH1kPnwEboP9jVi05XkLZ3VRU6O0dQCGaRixUNkBgo2k1VhmB/IB82RcbhCcSckBMzlEpxb5MckI/hOSTZSciFTVLkXcduqLC/gzPJvJAzGeTt5mcIflfpw2ah6YYGHgZkSBeKBUFzU+XDslo/YniNAp2q0b5XUNCRR4Nc2NiEoYwKebAqOmTPpK/reMU7o8NVcCH203vURDeNTvZ7UhGS7pMUIUFI5ftv8gVvqo+bwdfwaAAAAABJRU5ErkJggg=="
              mode="scaleToFill"
              class="w-[16rpx] h-[16rpx]"
            />
          </view>
          <view v-else>
            {{ item[col.key] }}
          </view>
        </view>
      </view>
    </view>

    <!-- <MessageBox v-model:show="show" title="" :defaultPadding="false" defaultWidth="85%">
      <template>
        <view class="">
          <view class="text-[#000] text-[36rpx] font-700 mt-[40rpx] text-center">{{ title }}</view>
          <view class="text-[28rpx] text-[#333] mt-[34rpx] mx-[32rpx] text-center">
            {{ tipContent }}
          </view>
          <view
            @click.stop="handleSubmit"
            class="py-[32rpx] text-[#1580FF] text-[36rpx] text-center border-t-[2rpx] border-t-solid border-[#F3F3F3] mt-[38rpx]"
          >
            确认
          </view>
        </view>
      </template>
    </MessageBox> -->
  </view>
</template>

<script lang="ts" setup>
// import MessageBox from '@/pages-sub/components/messageBox/MessageBox.vue'

defineOptions({
  inheritAttrs: true,
})
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  score: {
    type: Number,
    default: 0,
  },
})

const title = ref('')
const tipContent = ref('')
const show = ref(false)
const showToast = (type: number) => {
  if (type === 1) {
    title.value = '线差'
    tipContent.value = '根据志愿历年最低分 - 当前批次线的差值得出，线差可为填报提供参考。'
  } else if (type === 2) {
    title.value = '历年位次差'
    tipContent.value =
      '根据考生历年的等效位次 - 志愿历年录取位次的差值得出，位次差可更准确的与历年位次进行比较。'
  }

  uni.showModal({
    title: title.value,
    content: tipContent.value,
    showCancel: false,
    confirmColor: '#1580FF',
  })
  show.value = true
}

// const handleSubmit = () => {
//   show.value = false
// }

const columns = ref([
  { label: '年份', key: 'year', width: '62rpx' },
  { label: '录取', key: 'planCount', width: '54rpx' },
  { label: '线差', key: 'lineDiff', width: '86rpx' },
  { label: '最低分', key: 'score', width: '76rpx' },
  { label: '最低位次', key: 'rankLine', width: '98rpx' },
  { label: '位次差', key: 'rankDiff', width: 'max-content' },
])

const rankDiff = (index: number, item) => {
  return index === props.data.length - 1
    ? item['rankLine']
    : item['rankLine'] - props.data[index + 1]['rankLine']
}

const recompileData = computed(() => {
  if (!props.data) return []
  let _data = props.data.map((item, index) => {
    item['rankDiff'] = rankDiff(index, item)
    item['lineDiff'] = item['score'] - props.score
    return item
  })
  return _data
})
</script>