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 style="display: flex;align-items:center;padding:40rpx 34rpx">
            <van-switch active-color="#E3B377" size="20px" :checked="isHistory" @change="onChange" />
            <text style="margin:-8rpx 0 0 10rpx">历史合约</text>
        </view>
          
        <view class="list-wrap">
            <view class="flex item" v-for="item in clist" :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="!clist||clist.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:''
        },
		  now: {
			  default: ''
		  }
    },
    computed:{
        clist(){
            if(this.isHistory){
                console.log('看历史');
                return this.list
            }

            const now=dayjs(this.now).format('YYMM')//当前时间
            const arr=this.list?JSON.parse(JSON.stringify(this.list)):[]
            let resArr=[]
            if(this.exchange!='郑商所'){
                resArr=arr.map(item=>{
                    item.items=item.items.filter(_item=>{
                        const t=_item.classify_type.substr(-4)
								
								//15号之后过滤非当月合约
								return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
                    })
                    return item
                })
            }else{
                resArr=arr.map(item=>{
                    item.items=item.items.filter(_item=>{
                        // 如果合约编号没有含日期 肯定是少于4位的 因为至少为一个字母加三位数的日期
                        if(_item.classify_type.length<4) return true
                        const t=2+_item.classify_type.substr(-3)
								//15号之后过滤非当月合约
								return Number(this.now.substr(-2)) <= 15 ? Number(t)>=now : Number(t)>now;
                    })
                    return item
                })
            }
            return resArr
        }
    },
    data() {
        return {
            isHistory:false
        }
    },
    methods: {
        onChange(e){
            console.log(e);
            this.isHistory=e.detail
        },
        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>