|
@@ -0,0 +1,205 @@
|
|
|
+<script setup>
|
|
|
+import {setHightLightText} from '@/hooks/common'
|
|
|
+import {reactive, ref, watch} from 'vue'
|
|
|
+import apiETAForum from '@/api/etaForum'
|
|
|
+import { showToast } from 'vant'
|
|
|
+import { vInfiniteScroll } from '@vueuse/components'
|
|
|
+import { useNoAuth } from '@/hooks/useNoAuth'
|
|
|
+
|
|
|
+const emits=defineEmits(['update'])
|
|
|
+
|
|
|
+const searchVal=ref('')
|
|
|
+
|
|
|
+const listState=reactive({
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ list:[],
|
|
|
+ finished:false,
|
|
|
+ loading:false
|
|
|
+})
|
|
|
+
|
|
|
+async function getChartList(){
|
|
|
+ const params={
|
|
|
+ Keyword:searchVal.value,
|
|
|
+ CurrentIndex:listState.page,
|
|
|
+ PageSize:listState.pageSize,
|
|
|
+ }
|
|
|
+ listState.loading=true
|
|
|
+
|
|
|
+ let res = await apiETAForum.getAIPredictChartList(params)
|
|
|
+
|
|
|
+ listState.loading=false
|
|
|
+ if(res.Ret===200){
|
|
|
+ const arr=res.Data.List||[]
|
|
|
+ arr.forEach(item => {
|
|
|
+ listState.list.push({
|
|
|
+ ...item,
|
|
|
+ UniqueCode:`isETAForumChart_${item.UniqueCode}`,//在获取图表详情时通过前缀区分
|
|
|
+ HaveOperaAuth:true
|
|
|
+ })
|
|
|
+ });
|
|
|
+ listState.finished=res.Data?.Paging.IsEnd
|
|
|
+ }
|
|
|
+}
|
|
|
+getChartList()
|
|
|
+// 触底加载更多
|
|
|
+function onLoadMore(){
|
|
|
+ if(listState.finished||listState.loading||!listState.Keyword) return
|
|
|
+ listState.page++
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+
|
|
|
+function handleRefreshList(){
|
|
|
+ listState.list=[]
|
|
|
+ listState.page=1
|
|
|
+ listState.finished=false
|
|
|
+ selectChartList.value=[]
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+
|
|
|
+const selectChartList=ref([])
|
|
|
+function handleSelect(item){
|
|
|
+ const index=selectChartList.value.indexOf(item.UniqueCode)
|
|
|
+ if(index!==-1){
|
|
|
+ selectChartList.value.splice(index,1)
|
|
|
+ }else{
|
|
|
+ selectChartList.value.push(item.UniqueCode)
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ ()=>selectChartList.value,
|
|
|
+ ()=>{
|
|
|
+ emits('update',selectChartList.value)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate:true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="ETA-chart-wrap">
|
|
|
+ <div class="sticky-box">
|
|
|
+ <van-search v-model="searchVal" shape="round" placeholder="请输入图表名称" @search="handleRefreshList" @clear="handleRefreshList" />
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div v-if="listState.list.length==0&&listState.finished">
|
|
|
+ <img class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
|
|
|
+ <p style="text-align:center;color:#999999;font-size:12px">暂无图表</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="chart-list" v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]">
|
|
|
+ <li
|
|
|
+ :class="['chart-item',selectChartList.includes(item.UniqueCode)&&'active']"
|
|
|
+ v-for="item in listState.list"
|
|
|
+ :key="item.ChartInfoId"
|
|
|
+ @click="handleSelect(item)"
|
|
|
+ >
|
|
|
+ <div class="van-multi-ellipsis--l2 title" v-html="setHightLightText(item.ChartName,searchVal)"></div>
|
|
|
+ <img style="max-height: 120px;" :src="item.ChartImage ? item.ChartImage : useNoAuth().noImg" alt="">
|
|
|
+
|
|
|
+ <svg v-if="selectChartList.includes(item.UniqueCode)" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M14.5 28C22.232 28 28.5 21.732 28.5 14C28.5 6.26801 22.232 0 14.5 0C6.76801 0 0.5 6.26801 0.5 14C0.5 21.732 6.76801 28 14.5 28ZM7.5 14.413L8.913 13L12.5 16.586L20.085 9L21.5 10.415L12.5 19.414L7.5 14.413Z" fill="#0052D9"/>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ <li class="chart-item" style="height:0;border:none;margin-bottom:0;padding:0"></li>
|
|
|
+ <li class="chart-item" style="height:0;border:none;margin-bottom:0;padding:0"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ETA-chart-wrap{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .content-box{
|
|
|
+ overflow: hidden;
|
|
|
+ flex: 1;
|
|
|
+ padding: var(--van-padding-sm);
|
|
|
+ min-height: 300PX;
|
|
|
+ }
|
|
|
+ .chart-list{
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .chart-item{
|
|
|
+ width: 48%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 3px solid $border-color;
|
|
|
+ box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.03);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ max-height: 336px;
|
|
|
+ .title{
|
|
|
+ font-size: 28px;
|
|
|
+ min-height: 60px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ border-color: $theme-color;
|
|
|
+ svg{
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ position: absolute;
|
|
|
+ right: 22px;
|
|
|
+ bottom: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.sticky-box{
|
|
|
+ flex-shrink: 0;
|
|
|
+ // position: sticky;
|
|
|
+ // top: 0;
|
|
|
+ // z-index: 10;
|
|
|
+ background-color: #fff;
|
|
|
+ .van-tabs{
|
|
|
+ border-bottom: 1px solid $border-color;
|
|
|
+ }
|
|
|
+ .van-checkbox{
|
|
|
+ margin: var(--van-padding-sm);
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (min-width:$media-width){
|
|
|
+ .ETA-chart-wrap{
|
|
|
+ .chart-list{
|
|
|
+
|
|
|
+ .chart-item{
|
|
|
+ width: 260px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 7px;
|
|
|
+ max-height: 220px;
|
|
|
+ .title{
|
|
|
+ font-size: 14px;
|
|
|
+ min-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ svg{
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ right: 11px;
|
|
|
+ bottom: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|