Browse Source

代码重构

dev-V1.0.1
庄锐波 7 months ago
parent
commit
1fd01a1474
  1. 656
      zdxt-web-client/zdxt-enforcement-code-app/source/测试转html/企业端首页.html
  2. 6
      zdxt-web-client/zdxt-enforcement-code-app/src/components/enterprise/footerNav.vue
  3. 2
      zdxt-web-client/zdxt-enforcement-code-app/src/router/enterprise-app/ent-main-router.js
  4. 747
      zdxt-web-client/zdxt-enforcement-code-app/src/views/enterprise/enterpriseHomeV2.vue

656
zdxt-web-client/zdxt-enforcement-code-app/source/测试转html/企业端首页.html

@ -0,0 +1,656 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>企业端首页</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #f0f6ff;
max-width: 430px;
margin: 0 auto;
min-height: 100vh;
position: relative;
padding-bottom: 70px;
overflow-x: hidden;
}
/* ===== 顶部蓝色背景区域 ===== */
.header-bg {
background: linear-gradient(180deg, #2b7de9 0%, #5ba3f5 40%, #a0cdf8 70%, #dceefb 90%, #eef5ff 100%);
padding: 40px 20px 30px;
text-align: center;
position: relative;
overflow: hidden;
}
/* 城市天际线装饰 */
.header-bg::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%);
}
.cityscape::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;
}
.cityscape::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);
}
/* 盾牌图标 */
.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);
box-shadow: 0 4px 15px rgba(29,78,216,0.4);
}
.shield-icon::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;
}
/* QR码装饰 */
.qr-decoration {
width: 55px;
height: 55px;
margin: -5px auto 6px;
position: relative;
z-index: 1;
opacity: 0.6;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 2px;
}
.qr-decoration span {
background: rgba(255,255,255,0.7);
border-radius: 1px;
}
.qr-decoration span:nth-child(odd) {
background: rgba(255,255,255,0.4);
}
/* 轨道线装饰 */
.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;
}
.orbit-line:nth-child(2) {
width: 260px;
height: 155px;
border-color: rgba(255,255,255,0.12);
}
/* 企业端标签 */
.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;
}
.slogan .white {
color: #ffffff;
text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.slogan .gold {
color: #fbbf24;
text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
/* ===== 内容区域 ===== */
.content {
padding: 0 16px;
margin-top: -10px;
position: relative;
z-index: 2;
}
/* 搜索栏 */
.search-bar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
border-radius: 25px;
padding: 14px 20px;
margin-bottom: 14px;
display: flex;
align-items: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border: 1px solid rgba(255,255,255,0.9);
}
.search-bar .search-icon {
width: 18px;
height: 18px;
margin-right: 10px;
color: #9ca3af;
}
.search-bar input {
border: none;
background: transparent;
font-size: 14px;
color: #999;
outline: none;
width: 100%;
}
/* 轮播图 */
.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;
}
.banner-inner::before {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 70%;
height: 120%;
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
transform: rotate(-15deg);
border-radius: 20px;
}
.banner-inner::after {
content: '';
position: absolute;
bottom: 10%;
left: 10%;
width: 80%;
height: 60%;
background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
transform: skewX(-10deg);
border-radius: 10px;
}
/* 轮播指示器 */
.banner-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 1;
}
.banner-dots .dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: rgba(255,255,255,0.5);
transition: all 0.3s;
}
.banner-dots .dot.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);
}
.supervision-card h3 {
font-size: 17px;
color: #1a1a2e;
font-weight: 600;
margin-bottom: 12px;
}
.supervision-card .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-main .qr-grid {
width: 60px;
height: 60px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 3px;
}
.qr-grid span {
background: rgba(255,255,255,0.85);
border-radius: 2px;
}
.qr-grid span: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;
}
.qr-check 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;
}
.qr-small span {
background: #6b7280;
border-radius: 1px;
}
.qr-small span:nth-child(even) {
background: #9ca3af;
}
/* 卡片背景装饰 */
.supervision-card::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%;
}
/* 底部双卡片 */
.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: 130px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.info-card h4 {
font-size: 15px;
color: #1a1a2e;
font-weight: 600;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.info-card .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);
}
.info-card .card-icon svg {
width: 26px;
height: 26px;
color: white;
}
.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;
}
.card-icon-check svg {
width: 11px;
height: 11px;
color: white;
}
/* 卡片右下角装饰图标 */
.info-card .bg-icon {
position: absolute;
bottom: 8px;
right: 8px;
width: 50px;
height: 50px;
opacity: 0.15;
color: #6b7280;
}
/* ===== 底部导航栏 ===== */
.tab-bar {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 430px;
background: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
padding: 8px 0 12px;
box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
z-index: 100;
border-top: 1px solid #f0f0f0;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
cursor: pointer;
flex: 1;
}
.tab-item svg {
width: 24px;
height: 24px;
color: #9ca3af;
}
.tab-item span {
font-size: 11px;
color: #9ca3af;
}
.tab-item.active svg { color: #2563eb; }
.tab-item.active span { color: #2563eb; font-weight: 600; }
</style>
</head>
<body>
<!-- 顶部蓝色背景区域 -->
<div class="header-bg">
<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>
<!-- QR码装饰 -->
<div class="qr-decoration">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
<!-- 企业端标签 -->
<div class="enterprise-tag">企业端</div>
<!-- 标语 -->
<div class="slogan">
<span class="white">执法受监督</span>&nbsp;
<span class="gold">入企须扫码</span>
</div>
</div>
<!-- 内容区域 -->
<div class="content">
<!-- 搜索栏 -->
<div class="search-bar">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
</svg>
<input type="text" placeholder="搜索..." readonly>
</div>
<!-- 轮播图 -->
<div class="banner-card">
<div class="banner-inner"></div>
<div class="banner-dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<!-- 执法监督码卡片 -->
<div class="supervision-card">
<h3>执法监督码</h3>
<div class="qr-icon-wrap">
<!-- 左侧大QR图标 -->
<div class="qr-main">
<div class="qr-grid">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></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></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<!-- 双卡片行 -->
<div class="card-row">
<!-- 历史执法信息 -->
<div class="info-card">
<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">
<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="tab-bar">
<!-- 首页 -->
<div class="tab-item active">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3l9 8v10a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-5h-4v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11l9-8z"/>
</svg>
<span>首页</span>
</div>
<!-- 法律查询 -->
<div class="tab-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="4" y="2" width="16" height="20" rx="2"/>
<line x1="8" y1="7" x2="16" y2="7"/>
<line x1="8" y1="11" x2="16" y2="11"/>
<line x1="8" y1="15" x2="13" y2="15"/>
</svg>
<span>法律查询</span>
</div>
<!-- 消息 -->
<div class="tab-item">
<svg 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>消息</span>
</div>
<!-- 我的 -->
<div class="tab-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
<span>我的</span>
</div>
</div>
</body>
</html>

6
zdxt-web-client/zdxt-enforcement-code-app/src/components/enterprise/footerNav.vue

@ -5,13 +5,13 @@
$t("common.lang_home")
}}</van-tabbar-item>
<van-tabbar-item name="Classify" replace icon="bell" to="/enterprise/enterpriseInspectionNotice">
行政执法预告
法律查询
</van-tabbar-item>
<van-tabbar-item name="Classify" replace icon="todo-list" to="/enterprise/complaintList">
投诉进度查询
消息
</van-tabbar-item>
<van-tabbar-item name="Classify" replace icon="todo-list" to="/enterprise/systemNotice">
通知
我的
</van-tabbar-item>
<!-- <van-tabbar-item name="My" replace icon="manager-o" to="">{{
$t("common.lang_my")

2
zdxt-web-client/zdxt-enforcement-code-app/src/router/enterprise-app/ent-main-router.js

@ -13,7 +13,7 @@ const routes = [
{
path: "/enterprise/enterpriseHome",
name: "enterpriseHome",
component: () => import("@/views/enterprise/enterpriseHome.vue"),
component: () => import("@/views/enterprise/enterpriseHomeV2.vue"),
meta: {
isKeepAlive: false,
},

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

@ -0,0 +1,747 @@
<template>
<div class="home app_content">
<!-- 顶部蓝色背景区域 -->
<div class="header-bg">
<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">
<div class="banner-inner">
<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>
<div class="banner-dots">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</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="toRegistrationListView">
<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);
let freshMap = reactive({
refreshLoad: false, // 是否刷新
listLoading: false, // 是否加载中
listFinished: false, // 是否加载完成标识
});
const showEnterpriseQRCode = async () => {
router.push({
path: "/enterprise/qrCode",
query: {
enterpriseNumber: useCommon.enterpriseNumber,
}
});
};
const toRegistrationListView = async () => {
router.push({
path: "/enterprise/registrationList",
});
}
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;
&::before {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 70%;
height: 120%;
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
transform: rotate(-15deg);
border-radius: 20px;
}
&::after {
content: '';
position: absolute;
bottom: 10%;
left: 10%;
width: 80%;
height: 60%;
background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.05));
transform: skewX(-10deg);
border-radius: 10px;
}
}
/* 轮播指示器 */
.banner-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 1;
.dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: rgba(255,255,255,0.5);
transition: all 0.3s;
&.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>
Loading…
Cancel
Save