xmhjc-applet/pages/home/base/appitem.vue

<template>
	<view>
        <u-swiper v-if="swiperlist.length>0" class="swiperstyle"
            :list="swiperlist"
            indicatorMode="line"
            circular
            indicator
            keyName="fileUrl"
            @click="LinktoDetails"
        ></u-swiper>

        <view class="btnList">
            <view @click="changeType(index)" 
            :class="item.plain ?'btnview': 'checkbtnview'" 
            v-for="(item,index) in btnList" :key="index">
                {{ item.name }}
            </view>
        </view>
    </view>
</template>

<script>
import {carouselList} from '@/http/api/common.js'
export default {
props: {
    listdata: {
        type: Object,
        default: '',
    },
    openType:{
        type: String,
        default: '1',
    },
    curNowdata:{
        type:Object
    },
    current:{
        type:Number,
        default:0
    },
},
watch:{
    listdata: {
        immediate: true,
        handler(val) {
            console.log('vassss',val);
            this.btnList = val.columnMenuSubList
            if (val?.id) {
                this.getCarouselList(val.id)
            }
        },
    },
    current: {
        immediate: true,
        handler(val) {
             //获取轮播图
            // this.getCarouselList()
        },
    },
},
data() {
    return {
        swiperlist:[],
        btnList:[]
    }
},
components: {
    // appitem,
},
onLoad(e) {
    
},

methods: {
    async getCarouselList(id){
        //获取轮播图
        let res = await carouselList({
            modules:'2',
            modulesColumnId:id
        })
        if (res.data.code == 200) {
            let data = res.data.data.rows
            this.swiperlist = data.map(v => {
                return {
                    ...v,
                    fileUrl:v.carouselUrlList[0].fileUrl
                }
            })
        }
    },
    changeType(index) {
        if (this.btnList[index].name == '互动天地') {
            uni.navigateTo({
                url: '/pages/home/exchange'
            });
            return
        }

        this.btnList.forEach(item => {
            item.plain = true
        });
        

        this.btnList[index].plain = false

        let curNowdata = uni.getStorageSync('curNowdata')
		if (curNowdata&&curNowdata!='') {

			curNowdata = JSON.parse(curNowdata)
			curNowdata['curNowsubid'] = this.btnList[index].id

			uni.setStorageSync('curNowdata',JSON.stringify(curNowdata) );
		}
        if (this.openType == 'commodity') {
            //从商场页过来的 选类型 不做跳转
            
        }else{
            uni.switchTab({
                url: '/pages/home/Information',
            });
        }
        
        
    },
    LinktoDetails(e){
        console.log('第',e,this.swiperlist[e]);

        if (this.swiperlist[e] && this.swiperlist[e]?.targetType == '2') {
            // 2=文章；
            // columnId 菜单栏目id/商品大类
            // subId 子栏目id/商品子类
            // articleId 文章id/商品id
            if (this.swiperlist[e]?.articleId) {
                uni.navigateTo({
                    url: '/pages/home/ArticleDetails?id=' + this.swiperlist[e]?.articleId
                });
            }

        }else if(this.swiperlist[e] && this.swiperlist[e]?.targetType == '3'){
            //  3=商品；
            if (this.swiperlist[e]?.articleId) {
                uni.navigateTo({
                    url: '/pages/market/ProductDetails?id=' + this.swiperlist[e]?.articleId
                });
            }
        }else{
            //跳转方式1=栏目；
            uni.switchTab({
                url: '/pages/home/Information',
            });
        }
        
    },

}
}
</script>

<style lang="scss">
.btnList{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.swiperstyle{
    width: 436rpx;
    height: 187rpx;
}
.checkbtnview{
    width: 206rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;

    margin: 20rpx;
}
.btnview{
    width: 206rpx;
    height: 80rpx;
    background: #F1F1F1;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 400;
    color: #666;
    line-height: 80rpx;
    text-align: center;

    margin: 20rpx;
}
</style>