winhc-demension-vue3/src/components/CommonList.vue

<template>
  <div class="common-list">
    <div class="fixed-num">共
      <span>{{store.totalNum}}</span>
      条{{store.selectDemension.title}}</div>
    <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">
      <div v-for="(item,index) in store.dataList" :key="index" class="card" @click="goDetail(item)">
        <div class="list-container">
          <div v-for="obj in store.selectDemension.viewList" :key="obj.value" class="item">




            <!-- 标题 -->
            <p v-if="obj.name" class="name">{{obj.name}}：</p>


            <div>
              <div v-if="obj.solt" @click="obj.customClick!(item)" v-html="item[obj.value] ? obj.solt : '-'"></div>
              <!-- 时间数据-->
              <p v-else-if="obj.valueType === 'date'">{{item[obj.value] ? dayjs(item[obj.value]).format('YYYY-MM-DD') : '-'}}</p>

              <!-- 多个数据 -->
              <div v-else-if="obj.listVal">

                <!-- 多个数据里面数组有数据 -->
                <div v-if="Array.isArray(item[obj.listVal]) && item[obj.listVal][0]">
                  <p v-for="(listItem,listIndex) in item[obj.listVal]"
                     :key="listIndex" href="javascript:"
                     class="block"
                     :class="obj.companyId && listItem[obj.companyId] ? 'company' : ''"
                     @click.stop="$goCompany(obj,listItem)">
                    {{listItem[obj.value || '-']}}
                  </p>
                </div>
                <!-- 空数组 -->
                <p v-else>-</p>
              </div>

              <p v-else :class="[obj.valueType === 'title' ? 'title' : '',obj.companyId ? 'company' : '']"
                 @click="$goCompany(obj,item)">
                {{item[obj.value] || '-'}}{{ item[obj.value] && obj.valueType === 'w' ? '万元' : ''}}
              </p>
            </div>



          </div>
        </div>
        <van-icon v-if="store.selectDemension.detailList" name="arrow" color="#969696" class="arrow" />
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
  import { useDemensionListStore } from '@/store/demensionList'
  import { $goCompany } from '@/utils/utils'
  import dayjs from 'dayjs'
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const store = useDemensionListStore()
  const loading = ref(false)
  const finished = ref(false)


  const onLoad = () => {
    if (store.totalPage > store.pageNum) {
      loading.value = true
      store.pageNum++
      store.getList()
      setTimeout(() => {
        loading.value = false
      }, 200)
    }else{
      loading.value = false
      finished.value = true
    }
  }

  const goDetail = (item:{id:string,companyName:string}) => {
    if(store.selectDemension.detailList) {
      router.push({
        path: store.selectDemension.routing + 'Det',
        query:{
          id:item.id,
          companyName:item.companyName
        }
      })
      console.log(`跳转详情：${item.id}`)
    }
  }

  watch(() => store.dataList.length,(newVal) => {
    if(!newVal) {
      finished.value = false
    }
  })

</script>

<style lang="scss" scoped>

.card{
  width: 100%;
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  .list-container{
    width: inherit;
    .item{
      display: flex;
      :deep().source-pdf{
        display: flex;
        align-items: center;
        span{
          color: #088BFE;
        }
        img{
          width: 16px;
          padding-left: 6px;
        }
      }

      // align-items: center;
      .title{
        font-weight: bold;
        color: #000;
        font-size: 15px;
        padding: 4px 0;
      }
      .name{
        line-height: 24px;
        color: #969696;
        font-size: 15px;
        width: max-content;
        flex-shrink: 0;
      }
      a{
        color: #088BFE;
        font-size: 15px;
      }
      .company{
        color: #088BFE;
      }
    }
    p,a,div{
      font-size: 15px;
    }
    .arrow{
      // align-items: center;
      // display: flex;
    }

  }

}
.common-list{
  .fixed-num{
    padding: 8px 15px;
    line-height: 20px;
    span{
      color: #EB5953 ;
    }
  }
}
</style>