You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
533 lines
16 KiB
533 lines
16 KiB
<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>
|
|
|