xmhjc-applet/pages/index/base/head.vue

<template>
    <view>
        <view class="bg">
			<view class="search" style="margin-top: 10rpx;">
				<u-search bgColor='#fff' placeholder="请输入关键词" 
                :showAction='false'
                @custom="Linkto('Information')" @click="Linkto('Information')" 
                :disabled='true' v-model="searchword"></u-search>
                <view class="searchBtn">搜索</view>
			</view>
			<view class="margintb w700" >
				<u-tabs keyName='subIdName'
                    :activeStyle="{
                            color:'#000',
                            fontSize: '42rpx',
                            transform: 'scale(1.05)'
                        }"
                     @click="clicktabs" :list="list1"></u-tabs>
			</view>
            <view class="swiperstyle">
                <u-swiper 
                    style="width:702rpx"
                    height="300rpx"
					:list="swiperlist"
					indicatorMode="line"
					circular
					indicator
                    keyName="fileUrl"
                    @click="LinktoDetails"
				></u-swiper>
            </view>
            
			
		</view>
		<view v-if="showNoticeBar" class="margintop40 w750 flexjc" >
            <view class="noticeBar">
                <view class="noticeBar_1">
                    <u--image width="40rpx" height="40rpx" src="/static/index/btn_xiaox.png" ></u--image>
                    最新消息
                </view>
                <view @click="openDetails" class="noticeBar_2">
                    {{noticeDetails.title}}
                </view>
                <view>
                    <u--image @click="showNoticeBar = false" width="40rpx" height="40rpx" src="/static/index/icomx_sahnchu1.png" ></u--image>
                </view>
            </view>
			<!-- <u-notice-bar :url="'/pages/myinfo/notifiesPageDetails?id=' + noticeDetails.id" :text="noticeDetails.title" mode="closable"></u-notice-bar> -->
		</view>
    
        <view class="menus">
          <view @click="clicktabs(item)" v-for="item in menuslist" :key="item.id">
            <view class="menus_item">
              <u--image width="80rpx" height="80rpx" :src="item.imgUrl" ></u--image>
              <view style="margin-top: 16rpx;">{{item.subIdName}}</view>
            </view>
          </view>
        </view>
    </view>
</template>
<script>
import {carouselList,moduleByOne,moduleByTwo,notifiesPage} from '@/http/api/common.js'
export default {
data() {
return {
    list1:[
        {
            subIdName: '推荐',
        }
    ],
    swiperlist:[],
    searchword:'',
    noticebarmsg: '测试公告测试公告测试公告测试公告',
    menuslist:[],
    noticeDetails:{
        title:''
    },
    actionStyle:{
        width:'100rpx',
        color:'#333'
    },
    inputStyle:{
        width:'300rpx'
    },
    showNoticeBar:true
}
},
async mounted() {
   this.getCarouselList()
   this.getmoduleByOne()
   this.getmoduleByTwo()
   this.getnotifiesPage()
},
methods: {
    async getnotifiesPage(){
        let res = await notifiesPage({
            pageSize:1,
            pageNum:1,
        })
        if (res.data.code == 200) {
            this.noticeDetails = res.data.data?.rows[0]
        }
    },
    openDetails(){
        uni.navigateTo({
             url: '/pages/myinfo/notifiesPageDetails?id=' + this.noticeDetails.id
        });
    },
    Linkto(key){
        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',
            });
        }
        
    },
    async getCarouselList(){
        //获取轮播图
        let res = await carouselList({
            modules:'1'
        })
        if (res.data.code == 200) {
            let data = res.data.data.rows
            this.swiperlist = data.map(v => {
                return {
                    ...v,
                    fileUrl:v.carouselUrlList[0].fileUrl
                }
            })
        }
    },
    async getmoduleByOne(){
        //获取模块1
        let res = await moduleByOne()
        
        if (res.data.code == 200) {
            this.list1 = [
                {
                    subIdName: res.data.data.title,
                }
            ]
            this.list1 = [
                ...this.list1,
                ...res.data.data.subList
            ]
        }
    },
    async getmoduleByTwo(){
        //获取模块1
        let res = await moduleByTwo()
        this.menuslist = []
        if (res.data.code == 200) {
            this.menuslist = res.data.data.subList.map(v =>{
                return {
                    ...v,
                    imgUrl:v.coverList[0].fileUrl
                }
            })

        }
    },
    clicktabs(item){
        if (item.subIdName != '推荐') {
            let data = {
                curNowid:item.columnId,
                curNowsubid:item.subId,
            }
            uni.setStorageSync('curNowdata',JSON.stringify(data) );
            uni.switchTab({
                url: '/pages/home/Information',
            });
        }
    }
}
}
</script>

<style>
.w700{
    width: 702rpx;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bg{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #A3D1FC 0%, #FFFFFF 50%);
    opacity: 1;
    width: 750rpx;
}
.u-notice-bar{
    width: 702rpx !important;
    height: 40rpx !important;
    background: #FFFFFF;
    margin: 0 auto !important;
}
/* .u-search{
    width: 702rpx !important;
    height: 80rpx !important;
} */

.margintb{
    margin: 16rpx 0;
}
.margintop40{
    margin-top: 40rpx;
}
.menus_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 45rpx;
}
.menus{
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-around;
    width: 90vw;
    margin: 0 auto;
    margin-top: 40rpx;
}
.swiperstyle{
    width: 702rpx;
    height: 300rpx;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    border-radius: 16rpx;
}

.noticeBar{
    width: 702rpx;
    height: 90rpx;
    background: linear-gradient(90deg, #FFF4E5 0%, #FFFFFF 100%);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;

    display: flex;
    align-items: center;
}
.noticeBar_1{
    width: 216rpx;
    display: flex;
    font-size: 28rpx;
    font-weight: bold;
    color: #000000;
    justify-content: space-evenly;
    align-items: center;
    border-right: 1rpx solid #ccc;
}
.noticeBar_2{
    margin-left: 16rpx;
    width: 430rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #000000;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>