zdxtLawEnforcementCodeView/src/views/enforceHome.vue

<template>
    <div class="home app_content">
        <!-- 导航栏 -->
        <!-- <div class="header_body">
                    <header-nav :leftArrow="false" titelText="执法监督码"></header-nav>
                </div> -->

        <!-- 中间 -->
        <div class="warp_body">
            <div class="logobox"></div>
            <div class="streamer" @click="">
                <i></i>
                <span class="marquee" :key="freshMap.key">
          <span class="scroll-text" v-for="(item, index) in carouselList">{{ item.planName }}</span>
        </span>

            </div>
            <div class="noticbox" @click="toNoticeView"><i></i><span class="new"></span>通知</div>
            <!-- <refresh-list v-model:freshMap="freshMap" @refresh="onRefresh" @onLoad="onLoad"> -->
            <div class="carousel_box" @onLoad="onLoad">
                <!-- <carousel-card v-if="carouselList.length" v-model:carouselList="carouselList"></carousel-card> -->
            </div>
            <div class="boutique_box">
                <!-- <van-cell :border="false" title="精品" /> -->
                <div class="boutique_body">
                    <!-- <goodsCard :goodsList="boutique" :cardAttr="boutiqueAttr"></goodsCard> -->
                    <div class="box-qr-code" @click="toScanCodeView">
                        <span class="box-qr-code-text">扫码入企</span>
                    </div>
                </div>
                <div class="boutique_body">
                    <!-- <goodsCard :goodsList="boutique" :cardAttr="boutiqueAttr"></goodsCard> -->
                    <div class="box-info" @click="toRegistrationListView">
                        <span class="box-info-text">行政检查信息</span>
                    </div>
                    <div class="box-complaint" @click="toAnalyseView">
                        <span class="box-complaint-text">统计分析</span>
                    </div>
                </div>
            </div>
            <!-- <div class="recommend_box">
                <van-cell :border="false" title="推荐" />
                <div class="recommend_body">
                    <goodsCard :goodsList="recommend"></goodsCard>
                </div>
            </div> -->
            <!-- </refresh-list> -->
        </div>

        <!-- 底部 -->
        <div class="footer_body">
            <footer-enforcement-nav></footer-enforcement-nav>
        </div>
    </div>
</template>

<script setup name="Home">
    import Vconsolefrom from 'vconsole';
    import {getEnterpriseMerchantAuthorization, getSzyptLoginAuth} from '../api/Home';
    import {queryEnforcementInspectionProgramListNoPermission} from "@/api/enforce";

    const {useCommon} = $globalStore;
    const router = useRouter();
    const route = useRoute();
    var carouselList = reactive([]); // 轮播列表
    let boutique = reactive([]); // 精品数据
    let recommend = reactive([]); // 推荐
    let freshMap = reactive({
        refreshLoad: false, // 是否刷新
        listLoading: false, // 是否加载中
        listFinished: false, // 是否加载完成标识
        key: 0,
    });
    const data = reactive({});
    const adviceList = reactive([]);
    const boutiqueAttr = reactive({
        columnNum: 4,
        itemClass: "boutique_item",
        goodsCradclass: "boutique-crad",
    }); // 商品卡片展示

    //获取轮播
    const getCarousel = async () => {
        // const res = await useHome.getCarousel();
        // if (res?.code === 20000) {
        // 	carouselList = res?.data;
        // }
    };

    //精品
    const boutiqueGoods = async () => {
        // const res = await useHome.boutiqueGoods();
        // if (res?.code === 20000) {
        // 	boutique = res?.data;
        // }
    };

    /**扫码入企 */
    const toScanCodeView = async () => {
        router.push({path: "/enforce/scanQrCode"});
    };

    const toRegistrationListView = async () => {
        router.push({
            path: "/historyCheck",
        });
    }
    const toComplaintView = async () => {
        router.push({
            path: "/enterprise/complaint",
        });
    }
    const toAnalyseView = async () => {
        router.push({
            path: "/analyse",
        });
    }
    const toNoticeView = async () => {
        router.push({
            path: "/enforce/enforceNotice",
        });
    }
    const queryList = () =>{
      queryEnforcementInspectionProgramListNoPermission({},success =>{
        console.log(success)
        if(success.data.length > 4 ){
          for (let i = 0; i <= 3; i++) {
            carouselList.push(success.data[i]); 
          }  
        }else{
          carouselList = success.data; 
        }
        freshMap.key = 1
        console.log(carouselList)
      },error =>{

      })
    }

    //下拉刷新
    const onRefresh = () => {
        freshMap.listFinished = false;
        freshMap.listLoading = true;
        freshMap.refreshLoad = true;
        // Promise.all([getCarousel(), boutiqueGoods(), recommendGoods()]).then(() => {
        // 	freshMap.refreshLoad = false;
        // });
    };

    // 触底加载
    const onLoad = () => {
        // recommendGoods(true);
    };

    onMounted(() => {
        new Vconsolefrom();
        let fullUrl = window.location.href;
        let code = fullUrl.substring(fullUrl.indexOf('code=') + 5, fullUrl.indexOf('&state='));
        // getSzyptLoginAuth(route?.query?.code,success =>{
        getSzyptLoginAuth(code, success => {
            console.log(success.data)
            useCommon.SET_USER_ID(success.data.userId);

            // 如果不是执法用户 则跳转
            if (!success.data.lawOfficer) {
                router.push(
                    {
                        path: "/noAccess"
                    });
            }
        }, error => {

        })
        getEnterpriseMerchantAuthorization({merchantTel: useCommon.phonenumber}, success => {
            if (!(success.data == null && success.data.length == 0)) {
                useCommon.SET_USER_ENTERPRISE_NUMBER(success.data[0].enterpriseNumber);
            }
        }, error => {
        })
        queryList();
    });
</script>

<style lang="less" scoped>
    .home {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #f4f4f4;

        .warp_body {
            position: relative;
            background: url("../assets/images/bg_el.jpg");
            background-size: cover;
            overflow-x: hidden;

            .carousel_box {
                height: 150px;
                width: 100%;
                padding-bottom: 10px;

            }

        }

        .boutique_box {
            position: absolute;
            width: 100%;
            bottom: 1%;

            .boutique_body {
                padding: 0px 0px 10px 0px;
                display: flex;
                justify-content: center;
            }
        ;

            .box-qr-code {
                width: 90%;
                text-align: right;
                height: 3.66667rem;
                background-color: #ff976a;
                border-radius: 10px;
                background: url("../assets/images/item_scan.png");
                background-size: cover;

                .box-qr-code-text {
                    margin: 0.35rem 0.5rem 0 0;
                    display: block;
                    font-size: 17px
                }
            }

            .box-info {
                width: 52%;
                text-align: right;
                height: 3.66667rem;
                background-color: #ff976a;
                border-radius: 10px;
                background: url("../assets/images/item_checkc.png");
                background-size: cover;

                .box-info-text {
                    margin: 0.35rem 0.5rem 0 0;
                    display: block;
                    font-size: 17px
                }
            }

            .box-complaint {
                width: 36%;
                text-align: right;
                height: 3.66667rem;
                background-color: #ff976a;
                border-radius: 10px;
                margin-left: 2%;
                background: url("../assets/images/item_count.png");
                background-size: cover;

                .box-complaint-text {
                    margin: 0.35rem 0.5rem 0 0;
                    display: block;
                    font-size: 17px
                }
            }
        }

        .recommend_box {
            .recommend_body {
                width: 100%;
            }
        }
    }


    .streamer, .noticbox {
        display: flex;
        position: absolute;
        top: calc(1% + 10vh);
        right: 3%;
        z-index: 999;
        padding: 0 0.25rem;
        width: 90%;
        min-height: 1rem;
        background-color: rgba(249, 238, 219, .9);
        border-radius: 0.5rem;
        color: #c35b01;
        font-size: 0.45rem;
        line-height: 1.0rem;
        white-space: nowrap;
        box-sizing: content-box;
    }

    .noticbox {
        top: 33%;
        right: 0;
        padding: 0 0.2rem;
        width: 1.9rem;
        min-height: 1rem;
        background-color: rgba(249, 238, 219, .7);
        border-radius: 0.5rem 0 0 0.5rem;
        color: #000;
    }

    .streamer > i, .noticbox > i {
        display: inline-block;
        position: relative;
        top: 0.18rem;
        margin: 0 0.3rem 0 0;
        width: 0.6rem;
        height: 0.6rem;
        background: url("../assets/images/icon_notice.png") no-repeat;
        background-size: auto 100%;
    }

    .noticbox > i {
        top: 0.1rem;
        margin: 0 0.2rem 0 0;
        width: 0.8rem;
        height: 0.8rem;
        background: url("../assets/images/icon_notice3.png") no-repeat;
        background-size: auto 100%;
    }

    .streamer .marquee {
        display: inline-block;
        width: calc(100% - 1rem); /* 或者你想要的宽度 */
        overflow: hidden;
        white-space: nowrap;
    }

    ::v-deep .scroll-text {
        display: inline-block;
        padding-left: 100%; /* 初始时隐藏在右侧 */
        animation: marquee 5s linear infinite; /* 设置动画 */
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }
        /* 动画开始时 */
        100% {
            transform: translateX(-100%);
        }
        /* 动画结束时，文字完全移动到左侧并重新开始 */
    }

    .noticbox span.new {
        display: block;
        position: absolute;
        top: 0.1rem;
        left: 0.85rem;
        width: 0.2rem;
        height: 0.2rem;
        background: #ff1414;
        border-radius: 50%;
    }

    .logobox {
        position: relative;
        top: 4%;
        left: 5%;
        z-index: 99;
        width: 82%;
        height: 10vh;
        background: url("../assets/images/logo.png") no-repeat;
        background-size: 100% auto;
    }
</style>