EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/src/views/enterprise/enterpriseHomeV2.vue

<template>
    <div class="home app_content">
        <!-- 顶部蓝色背景区域 -->
        <div class="header-bg">
            <div class="logobox-title" style="position: absolute;top: 10px;left: 50%;transform: translateX(-50%);background: #0d8ddb;z-index: 100;padding: 10px 20px;color: #fff;border-radius: 8px;" @click="toDemoList">demo-list</div>
            <div class="orbit-line"></div>
            <div class="orbit-line"></div>
            <div class="cityscape"></div>

            <!-- 盾牌图标 -->
            <div class="shield-wrapper">
                <div class="shield">
                    <div class="shield-icon">
                        <div class="shield-text">执法<br>监督</div>
                    </div>
                </div>
            </div>

            <!-- 企业端标签 -->
            <div class="enterprise-tag">企业端</div>

            <!-- 标语 -->
            <div class="slogan">
                <span class="white-text">执法受监督</span>&nbsp;
                <span class="gold-text">入企须扫码</span>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content-area">
            <!-- 通知栏 -->
            <div class="notice-bar">
                <svg class="notice-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                </svg>
                <span 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">
                <h3>执法监督码</h3>
                <div class="qr-icon-wrap">
                    <!-- 左侧大QR图标 -->
                    <div class="qr-main">
                        <div class="qr-grid">
                            <span v-for="i in 25" :key="i"></span>
                        </div>
                        <div class="qr-check">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </div>
                    </div>
                    <!-- 右侧小QR装饰 -->
                    <div class="qr-small">
                        <span v-for="i in 25" :key="i"></span>
                    </div>
                </div>
            </div>

            <!-- 双卡片行 -->
            <div class="card-row">
                <!-- 历史执法信息 -->
                <div class="info-card" @click="toEnforcementRegistrationListView">
                    <h4>历史执法信息</h4>
                    <div class="card-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="18" rx="2"/>
                            <line x1="7" y1="8" x2="17" y2="8"/>
                            <line x1="7" y1="12" x2="14" y2="12"/>
                            <line x1="7" y1="16" x2="11" y2="16"/>
                        </svg>
                        <div class="card-icon-check">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </div>
                    </div>
                    <!-- 放大镜装饰 -->
                    <svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                    </svg>
                </div>

                <!-- 执法案件信息 -->
                <div class="info-card" @click="toComplaintView">
                    <h4>执法案件信息</h4>
                    <div class="card-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16v16H4z" rx="2"/>
                            <path d="M8 2v4M16 2v4"/>
                            <line x1="7" y1="10" x2="17" y2="10"/>
                            <line x1="7" y1="14" x2="13" y2="14"/>
                        </svg>
                        <div class="card-icon-check">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </div>
                    </div>
                    <!-- 星星装饰 -->
                    <svg class="bg-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                    </svg>
                </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, siqCode} from '../../api/enterprise';
import 'vant/es/toast/style';

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

// ========== 轮播图数据 ==========
const bannerList = ref([
    { title: '执法监督 阳光执法', image: '', link: '' },
    { title: '入企须扫码 执法受监督', image: '', link: '' },
    { title: '优化营商环境 规范执法行为', image: '', link: '' },
]);
const onBannerClick = (item) => {
    if (item.link) {
        router.push(item.link);
    }
};
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 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(useCommon.firstLoad);
    console.log(useCommon);
    isLoading.value = useCommon.firstLoad;

    // 如果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;
        }

        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();

        w6s.config({
            access_key: access_key,
            nonce: nonce,
            timestamp: timestamp,
            signature: signature,
        }).then((res) => {
            console.log("鉴权", res);
        }).catch((err) => {
            console.log("鉴权", err);
        });

        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: 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 : " + 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: #f0f6ff;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ===== 顶部蓝色背景区域 ===== */
.header-bg {
    background: linear-gradient(180deg, #2b7de9 0%, #5ba3f5 40%, #a0cdf8 70%, #dceefb 90%, #eef5ff 100%);
    padding: 20px 20px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3));
    }
}

/* 城市天际线装饰 */
.cityscape {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    opacity: 0.15;
    background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, transparent 100%);

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 8%;
        height: 60px;
        background: rgba(255,255,255,0.4);
        border-radius: 2px 2px 0 0;
    }

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 15%;
        width: 6%;
        height: 100px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px 2px 0 0;
        box-shadow:
            -30px 20px 0 rgba(255,255,255,0.25),
            -55px 35px 0 rgba(255,255,255,0.2),
            30px 40px 0 rgba(255,255,255,0.2),
            60px 15px 0 rgba(255,255,255,0.15);
    }
}

/* 轨道线装饰 */
.orbit-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 120px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    z-index: 0;

    &:nth-child(2) {
        width: 260px;
        height: 155px;
        border-color: rgba(255,255,255,0.12);
    }
}

/* 盾牌图标 */
.shield-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

.shield {
    display: inline-block;
    width: 90px;
    height: 100px;
    position: relative;
}

.shield-icon {
    width: 90px;
    height: 100px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);

    &::before {
        content: '';
        position: absolute;
        inset: 3px;
        background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
        clip-path: polygon(50% 2%, 98% 21%, 98% 64%, 50% 98%, 2% 64%, 2% 21%);
        z-index: -1;
    }
}

.shield-text {
    line-height: 1.3;
    margin-top: 12px;
}

/* 企业端标签 */
.enterprise-tag {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    padding: 5px 22px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 6px 0 12px;
    position: relative;
    z-index: 1;
}

/* 标语 */
.slogan {
    position: relative;
    z-index: 1;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;

    .white-text {
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }

    .gold-text {
        color: #fbbf24;
        text-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }
}

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

/* 通知栏 */
.notice-bar {
    background: #fffbe6;
    border-radius: 25px;
    padding: 12px 20px;
    margin-bottom: 14px;
    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);

    .notice-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 10px;
        color: #faad14;
    }

    .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: 180px;
    background: linear-gradient(135deg, #c8e2f8 0%, #a0c8f0 30%, #7bb3e8 60%, #5a9de0 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.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: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 50%, #c0dbf8 100%);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);

    &::after {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 180px;
        height: 180px;
        background: radial-gradient(circle, rgba(59,130,246,0.08), transparent 70%);
        border-radius: 50%;
    }

    h3 {
        font-size: 17px;
        color: #1a1a2e;
        font-weight: 600;
        margin-bottom: 6px;
        margin-top: 6px;
    }

    .qr-icon-wrap {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.qr-main {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(37,99,235,0.3);

    .qr-grid {
        width: 60px;
        height: 60px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 3px;

        span {
            background: rgba(255,255,255,0.85);
            border-radius: 2px;

            &:nth-child(3n) {
                background: rgba(255,255,255,0.4);
            }
        }
    }
}

.qr-check {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #eaf3ff;

    svg {
        width: 16px;
        height: 16px;
        color: white;
    }
}

.qr-small {
    width: 65px;
    height: 65px;
    opacity: 0.35;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    margin-right: 10px;

    span {
        background: #6b7280;
        border-radius: 1px;

        &:nth-child(even) {
            background: #9ca3af;
        }
    }
}

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

.info-card {
    flex: 1;
    background: linear-gradient(135deg, #eaf3ff 0%, #d6eaff 60%, #c8e0f8 100%);
    border-radius: 16px;
    padding: 18px 16px;
    position: relative;
    overflow: hidden;
    min-height: 90px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);

    h4 {
        font-size: 15px;
        color: #1a1a2e;
        font-weight: 600;
        margin-bottom: 4px;
        margin-top: 4px;
        position: relative;
        z-index: 1;
    }

    .card-icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 4px 12px rgba(37,99,235,0.25);

        svg {
            width: 26px;
            height: 26px;
            color: white;
        }
    }

    .bg-icon {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 50px;
        height: 50px;
        opacity: 0.15;
        color: #6b7280;
    }
}

.card-icon-check {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #eaf3ff;

    svg {
        width: 11px;
        height: 11px;
        color: white;
    }
}

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