hongze_yb_xcx/pages/positionAnalysis/components/indexContent.vue

<template>
    <view class="list-content-wrap">
        <view class="top-box">
            <text style="margin-right:20rpx">{{num}}品种</text>
            <text>{{time}}</text>
        </view>
        <view class="list-wrap">
            <view class="flex item" v-for="item in list" :key="item.classify_name">
                <view class="label">{{item.classify_name}}</view>
                <view style="flex:1">
                    <view 
                        class="opt" 
                        v-for="_item in item.items" 
                        :key="_item.classify_type"
                        @click="goDetail(_item,item)"
                    >{{_item.classify_type}}</view>
                </view>
            </view>
        </view>
        <view class="empty-box" v-if="!list||list.length===0">
            <image
                :src="globalImgUrls.chartEmpty"
                mode="widthFix"
            />
            <view>无数据~</view>
        </view>
          
    </view>
      
</template>

<script>
const dayjs=require('@/utils/dayjs.min')
export default {
    name:'IndexContent',
    props:{
        time:{
            default:''
        },
        num:{
            default:''
        },
        list:{
            default:null
        },
        exchange:{
            default:''
        }
    },
    methods: {
        goDetail(_item,item){
            const queryObj={
                classify_name:item.classify_name,
                classify_type:_item.classify_type,
                exchange:this.exchange
            }
            let queryObjStr=''
            for (const key in queryObj) {
                if(!queryObjStr){
                        queryObjStr=`${key}=${queryObj[key]}`
                }else{
                    queryObjStr=`${queryObjStr}&${key}=${queryObj[key]}`
                }
            }
            uni.navigateTo({
                url: `/pages/positionAnalysis/detail?${queryObjStr}`,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
              
        }
    },
    
}
</script>

<style lang="scss" scoped>
.list-content-wrap{
    .top-box{
        background: rgba(207, 192, 159, 0.1);
        padding: 15rpx 45rpx;
    }
    .list-wrap{
        padding: 34rpx 0 34rpx 34rpx;
        .item{
            margin-bottom: 40rpx;

            .label{
                color: #666;
                width: 150rpx;
                padding-top: 15rpx;
            }
            .opt{
                padding: 15rpx 10rpx;
                width: 28%;
                text-align: center;
                display: inline-block;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                background: #F5EFE2;
                font-size: 24rpx;
            }
        }
    }
}
.empty-box{
    text-align: center;
    font-size: 32rpx;
    color: #999;
    padding-top: 150rpx;
    image{
        width: 346rpx;
        margin-bottom: 57rpx;
    }
}
</style>