EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/home/enterpriseHomeV2.vue

<template>
    <div class="home app_content">
        <!-- 顶部蓝色背景区域 -->
        <div class="header-bg">
            <img src="@/assets/images/logo_top.png" class="logo_top-img" alt="" />
            <img src="@/assets/images/label_qyd.png" class="label_qyd-img" alt="" />
            <img src="@/assets/images/slogan_top.png" class="slogan_top-img" alt="" />
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 通知栏 -->
            <div class="notice-bar">
                <img src="@/assets/images/icon_notice.png" class="notice-icon" alt="" />
                <van-notice-bar v-if="noticeList.length > 0" class="notice-scroll"
                    :scrollable="noticeList.length > 1 || (noticeList[0]?.title || '').length > 16"
                    background="transparent" color="#8c8c8c" :text="noticeText" />
                <span v-else class="notice-text">暂无新通知</span>
            </div>

            <!-- 轮播图 -->
            <div class="banner-card">
                <van-swipe :autoplay="3000" indicator-color="rgba(255,255,255,0.9)" :loop="true">
                    <van-swipe-item v-for="(item, index) in bannerList" :key="index">
                        <div class="banner-inner" @click="onBannerClick(item)">
                            <img v-if="item.image" :src="item.image" class="banner-img" alt="" />
                            <div v-else class="banner-placeholder">{{ item.title || '暂无内容' }}</div>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!-- 执法监督码卡片 -->
            <div class="supervision-card" @click="showEnterpriseQRCode">
                <div class="card-title">执法监督码</div>
                <div class="qr-icon-wrap">
                    <img src="@/assets/images/icon_jdm.jpg" class="qr-image" alt="" />
                </div>
            </div>

            <!-- 双卡片行 -->
            <div class="card-row">
                <!-- 历史执法信息 -->
                <div class="info-card" @click="toEnforcementRegistrationListView">
                    <div class="card-title">历史执法信息</div>
                    <div class="card-icon">
                        <img src="@/assets/images/icon_zfxx.jpg" class="card-icon-img" alt="" />
                    </div>
                </div>

                <!-- 执法案件信息 -->
                <div class="info-card info-enforce" @click="toEnforcementCaseInfoView">
                    <div class="card-title">执法案件信息</div>
                    <div class="card-icon">
                        <img src="@/assets/images/icon_ajxx.jpg" class="card-icon-img" alt="" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="footer_body">
            <footer-nav></footer-nav>
        </div>
    </div>
</template>

<script setup name="enterpriseHome">
import * as w6s from 'szient-js-sdk';
import sha1 from 'crypto-js/sha1';
import { getEnterpriseMerchantAuthorization, getSiqLoginAuth, getSiqLoginAuthMock, siqCode, getCarouselBannerList, getSystemNoticeList } from '../../../api/enterprise';
import 'vant/es/toast/style';
import Vconsolefrom from 'vconsole';

const { useCommon } = $globalStore;
const router = useRouter();
const isLoading = ref(true);

// ========== 轮播图数据 ==========
const bannerList = ref([]);
const onBannerClick = (item) => {
    if (item.id) {
        router.push({
            path: '/enterprise/bannerDetail',
            query: { id: item.id },
        });
    }
};

// 调用轮播图接口并填充 bannerList、兼容多种字段名
const fetchBannerList = () => {
    getCarouselBannerList({ target_platform:'1' }, (res) => {
        const rows = res?.rows || res?.data?.rows || res?.data || [];
        if (!Array.isArray(rows)) return;
        bannerList.value = rows.map(item => ({
            id: item.id || '',
            title: item.title || '',
            image: (import.meta.env.VITE_FILE_URL || '') + (item.imageUrl || ''),
            link: item.linkUrl || '',
            raw: item,
        }));
    }, () => { });
};

// ========== 系统通知公告 ==========
const noticeList = ref([]);
// 多条通知拼接（van-notice-bar 使用单一文本滚动展示）
const noticeText = computed(() => {
    return noticeList.value
        .map(it => it.title)
        .filter(Boolean)
        .join('     ');
});

// 调用系统通知接口并填充 noticeList、兼容多种字段名
const fetchNoticeList = () => {
    getSystemNoticeList({ pageNum: 1, pageSize: 10 }, (res) => {
        const rows = res?.rows || res?.data?.rows || res?.data?.list || res?.data || [];
        if (!Array.isArray(rows)) return;
        noticeList.value = rows.map(item => ({
            id: item.noticeId || item.id || '',
            title: item.noticeTitle || item.title || item.noticeContent || '',
            type: item.noticeType || item.type || '',
            createTime: item.createTime || item.publishTime || '',
            raw: item,
        }));
    }, () => { });
};
let freshMap = reactive({
    refreshLoad: false, // 是否刷新
    listLoading: false, // 是否加载中
    listFinished: false, // 是否加载完成标识
});

const showEnterpriseQRCode = async () => {
    router.push({
        path: "/enterprise/qrCode",
        query: {
            enterpriseNumber: useCommon.enterpriseNumber,
        }
    });
};

const toEnforcementRegistrationListView = async () => {
    router.push({
        path: "/enterprise/enforcementRegistrationList",
    });
}
const toDemoList = () => {
    router.push({ path: "/demo/enfDemoList" });
};

const toComplaintView = async () => {
    router.push({
        path: "/enterprise/complaint",
        query: {
            comOrOpi: 0,
            isSelect: true
        }
    });
}

const toEnforcementCaseInfoView = async () => {
    router.push({
        path: "/enterprise/enforcementCaseInfo",
    });
}

//下拉刷新
const onRefresh = () => {
    freshMap.listFinished = false;
    freshMap.listLoading = true;
    freshMap.refreshLoad = true;
};

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

const generateRandomNumber = () => {
    const min = 100000;
    const max = 999999;
    const randomNum = (Math.floor(Math.random() * (max - min + 1)) + min);
    return randomNum.toString().padStart(6, '0');
}

const getEnterpriseMerchant = (enterpriseNum, phoneNumber) => {
    getEnterpriseMerchantAuthorization({ enterpriseNumber: enterpriseNum, merchantTel: phoneNumber }, success => {
        if (success.data != null && success.data.length > 0) {
            useCommon.SET_USER_ENTERPRISE_NUMBER(success.data[0].enterpriseNumber);
        }
    }, error => {
    })
}

// 判断用户信息是否已完整（企业端登录后已写入store）
const hasUserInfo = () => {
    return useCommon.userId
        && useCommon.enterpriseName
        && useCommon.enterpriseNumber
        && useCommon.enterpriseId;
};

onMounted(() => {
    console.log("企业端 Home onMounted");
    // new Vconsolefrom();
    //debugger;
    console.log(useCommon.firstLoad);
    console.log(useCommon);
    isLoading.value = useCommon.firstLoad;

    // 首页轮播图加载
    fetchBannerList();
    // 首页系统通知加载
    fetchNoticeList();

    // 如果store中已存在完整的用户和企业信息，则跳过w6s鉴权
    if (hasUserInfo()) {
        console.log("用户信息已存在，跳过w6s鉴权");
        isLoading.value = false;
        getEnterpriseMerchant(useCommon.enterpriseNumber.toString(), useCommon.phonenumber.toString());
        useCommon.SET_IS_FIRST_LOAD(false);
        return;
    }

    siqCode(null, success => {
        let access_key = "";
        let access_secret = "";
        if (success.success) {
            access_key = success.data.accessKey;
            access_secret = success.data.accessSecret;
        }

        console.log("获取深i企认证信息成功", { access_key, access_secret });

        const nonce = generateRandomNumber();
        const timestamp = `${Date.now()}`;

        const str = [access_secret, nonce, timestamp]
            .sort()
            .reduce((str, item) => str += item, '');

        // 最终还需要转成全小写
        const signature = sha1(str).toString().toLowerCase();

        if (!access_key || !access_secret) {
            console.log("获取深i企认证信息错误!", "access_key 或 access_secret 为空");
        }

        console.log("生成鉴权参数", { nonce, timestamp, signature });

        // ========== 深i企登录：生产环境模式 ==========
        console.log("开始w6s鉴权，参数:", { access_key, nonce, timestamp, signature });
        w6s.config({
            access_key: access_key,
            nonce: nonce,
            timestamp: timestamp,
            signature: signature,
        }).then((res) => {
            console.log("鉴权成功", res);
        }).catch((err) => {
            console.log("鉴权失败", err);
        });

        w6s.ready(() => {
            console.log("w6s ready");
            w6s.header.setTitle('深圳市行政执法监督码');
            w6s.szient.getAuthCode({
                success: function (res) {
                    console.log(res)
                    console.log("认证", res);
                    console.log("code: " + res.result.result.code);
                    // getSiqLoginAuth({ code: "13b6a16b-1d08-4e9c-b4b6-4cc2101cd770" }, success => {
                    getSiqLoginAuth({ code: res.result.result.code }, success => {
                        useCommon.SET_USER_PHONENUMBER(success.data.phonenumber.toString());
                        useCommon.SET_USER_ID(success.data.userId);
                        useCommon.SET_USER_ENTERPRISE_NUMBER(success.data.enterpriseNumber);
                        console.log(success.data);
                        useCommon.SET_TOKEN(success.data.token);
                        console.log(useCommon.userId);
                        console.log(useCommon.firstLoad);
                        if (useCommon.firstLoad) {
                            isLoading.value = false;
                        }
                        //设置已经初始化
                        useCommon.SET_IS_FIRST_LOAD(false)
                        getEnterpriseMerchant(success.data.enterpriseNumber.toString(), success.data.phonenumber.toString());
                        if (useCommon.firstLoad) {
                            isLoading.value = false;
                        }
                    }, error => {
                        console.log("认证失败", error)
                    })
                },
                fail: function (err) {
                    console.log(err)
                    console.log("认证失败", err);
                },
            });
        });

    });
    const { VITE_BASE_URL, access_key, access_secret } = import.meta.env;
    console.log(VITE_BASE_URL);
    const apiUrl = ref(import.meta.env.accessKey);
    console.log(access_key);
    console.log(access_secret);
});
</script>

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

/* ===== 顶部蓝色背景区域 ===== */
.header-bg {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    line-height: 0;
    background: url('@/assets/images/bg_sz_top.png') center center no-repeat, linear-gradient(180deg, #fff 0%, #def0ff 20%, #60baff 100%);
    background-size: cover;
    width: 100%;
    height: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .logo_top-img {
        width: 100%;
        height: 150px;
        display: block;
    }

    .label_qyd-img {
        height: 30px;
        display: block;
        position: absolute;
        top: 93px;
    }

    .slogan_top-img {
        width: 200px;
        height: 30px;
        position: absolute;
        top: 124px;
    }
}

/* ===== 内容区域 ===== */
.content-area {
    padding: 0 10px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 16px;
}

/* 通知栏 */
.notice-bar {
    background: #fffbe6;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 220, 120, 0.4);
    box-sizing: border-box;

    .notice-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 10px;
        object-fit: contain;
    }

    /* 通知滚动 */
    .notice-scroll {
        flex: 1;
        height: 20px !important;
        line-height: 1.4 !important;
        padding: 0 !important;
        font-size: 14px;
    }

    .notice-text {
        font-size: 14px;
        color: #8c8c8c;
    }
}

/* 轮播图 */
.banner-card {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.banner-inner {
    width: 100%;
    height: 130px;
    position: relative;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    height: 100%;
}

.banner-placeholder {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

:deep(.van-swipe__indicator) {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

:deep(.van-swipe__indicator--active) {
    width: 20px;
    background: rgba(255, 255, 255, 0.9);
}

/* 执法监督码卡片 */
.supervision-card {
    background: url('../../../assets/images/bg_jdm.jpg') center center no-repeat, linear-gradient(180deg, #7cc5fe 0%, #fff 100%);
    background-size: 100% 100%;
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    height: 120px;

    .card-title {
        font-size: 16px;
        color: #000;
        // font-weight: 600;
        margin-bottom: 6px;
        margin-top: 6px;
    }

    .qr-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .qr-image {
        width: 100px;
        // height: 100px;
        object-fit: contain;
        border-radius: 40px;
    }
}

/* 双卡片行 */
.card-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.info-card {
    flex: 1;
    border-radius: 16px;
    padding: 8px 16px;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    background: url('../../../assets/images/bg_zfxx.png') center center no-repeat, linear-gradient(180deg, #bbecfd 0%, #fff 100%);
    background-size: 100% 100%;

    .card-title {
        font-size: 14px;
        color: #000;
        margin-bottom: 4px;
        margin-top: 4px;
        position: relative;
        z-index: 1;
    }

    .card-icon {
        width: 60px;
        height: 40px;
        // border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        margin-top: 12px;

        .card-icon-img {
            width: 100%;
            height: 100%;
            border-radius: 50px;
        }
    }
}

.info-enforce {
    background: url('../../../assets/images/bg_ajxx.png') center center no-repeat, linear-gradient(180deg, #a6d1f9 0%, #fff 100%);
    background-size: 100% 100%;
}

/* ===== 底部导航 ===== */
.footer_body {
    flex-shrink: 0;
}
</style>