Commit bf95d38d authored by xinzhedeai's avatar xinzhedeai

add: 提醒模块开发

parent d7d4dbeb
......@@ -272,6 +272,7 @@ body {
}
.check-module {
position: relative;
width: 3rem;
height: 1.8rem;
padding: 0.2rem;
......
......@@ -26,6 +26,76 @@
display: none;
}
</style>
<style>
/* 新增提醒模块样式 */
.info-reminder {
width: 6.9rem;
height: 2.54rem;
background: #FFFFFF;
border-radius: 0.2rem;
margin: 0.3rem auto;
padding: 0.24rem 0.3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.reminder-item {
position: relative;
width: 2.2rem;
height: 100%;
text-align: center;
}
.new-badge{
position: absolute;
top: 0.15rem;
right: 0.1rem;
min-width: .8rem;
text-align: center;
height: 0.4rem;
line-height: 0.26rem;
/* padding: 0 0.12rem; */
/* border-radius: 0.2rem; */
font-size: 0.12rem;
color: #FFFFFF;
background-image: url(image/code/home/tip.png);
background-size: contain;
background-repeat: no-repeat;
}
.reminder-badge {
position: absolute;
top: -0.15rem;
right: 0.2rem;
min-width: 0.4rem;
height: 0.4rem;
line-height: 0.4rem;
padding: 0 0.12rem;
border-radius: 0.2rem;
font-size: 0.24rem;
color: #FFFFFF;
background: #00AEF1; /* 默认红色 */
}
.reminder-badge.orange-badge {
background: #FF9C01; /* 橙黄色 */
}
.reminder-badge.red-badge {
background: #FF4D4F; /* 红色 */
}
.reminder-img {
width: 1.2rem;
height: 1.2rem;
margin-bottom: 0.16rem;
}
.reminder-text {
font-size: 0.28rem;
color: #333333;
line-height: 1.2;
}
</style>
<!-- 在 includeHead.js 之后添加环境判断 -->
<script src="./sdk/includeHead.js"></script>
</head>
......@@ -181,6 +251,36 @@
</div>
</div>
<!-- 第三层统计信息之后新增提醒模块(商户专属) -->
<div class="info-reminder">
<!-- 第一个提醒项:整改未通过 -->
<div class="reminder-item">
<div class="reminder-badge">3</div>
<img src="./image/code/home/icon1.png" class="reminder-img" alt="整改未通过">
<p class="reminder-text">整改未通过</p>
</div>
<!-- 第二个提醒项:即将超期 -->
<div class="reminder-item">
<div class="reminder-badge orange-badge">5</div>
<img src="./image/code/home/icon2.png" class="reminder-img" alt="整改未通过">
<p class="reminder-text">即将超期</p>
</div>
<!-- 第三个提醒项:整改超期 -->
<div class="reminder-item">
<div class="reminder-badge red-badge">2</div>
<img src="./image/code/home/icon3.png" class="reminder-img" alt="整改未通过">
<p class="reminder-text">整改超期</p>
</div>
</div>
<!-- 原第三层统计信息 -->
<div class="third-layer" v-cloak>
<!-- ... 原有统计内容保持不变 ... -->
</div>
<!-- 第四层:检查专区 -->
<div
class="fourth-layer"
......@@ -197,6 +297,7 @@
>
<p>{{item.title}} <van-icon name="arrow" /></p>
<p class="module-intro">{{item.remark}}</p>
<div class="new-badge">new</div>
</div>
</div>
</div>
......
html,
body {
letter-spacing: .01rem;
background: #F5F6FA;
}
.wrapper {}
.header {
background-color: #fff;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
background: #F5F6FA;
border-radius: 0.01rem;
margin: 0 auto;
padding: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
}
.detail .van-col {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #F5F6FA;
border-radius: 8px;
margin: 0.2rem 0.2rem;
}
.van-list .van-cell {
margin-bottom: .2rem;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
</head>
<div id="app">
<div class="wrapper" v-cloak>
<!-- 商户头部信息 -->
<div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch">
<template #action>
<div @click="onSearch"></div>
</template>
</van-search>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;">
<van-tab title="检查记录" name="1"></van-tab>
<van-tab title="自查记录" name="2"></van-tab>
</van-tabs>
</div>
<van-list>
<van-cell v-for="item in hazardList" :key="item.id" @click="viewDetail(item.id)">
<div style="width: 100%;">
<!-- 第一行:隐患描述 -->
<div style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">九小场所消防安全检查清单</div>
<!-- ">{{ item.remark }}</div> -->
<!-- 第二行:状态和时间 -->
<div style="display: flex; justify-content: start; gap: .34rem; margin: 8px 0;">
<span style="color: #737373; font-size: 0.28rem;">检查时间:{{ item.checkDate }}</span>
</div>
<!-- 第三行:商家和箭头 -->
<div style="display: flex; justify-content: start; gap: .4rem; align-items: center;">
<span>检查人:{{item.checkPeopleName}}</span>
<span>隐患数:{{item.hiddenCount}}</span>
<span>未整改:{{item.notRectifiedCount}}</span>
</div>
</div>
</van-cell>
</van-list>
</div>
</body>
</html>
\ No newline at end of file
var VUE = null
window.addEventListener('load', function () {
VUE = new Vue({
el: '#app',
data() {
return {
merName: '',
// 新增子Tab数据
activeTab: '1',
hazardList: [
// 更多示例数据...
],
// 新增以下数据
userInfo: {},
userData: {
checkCount: 0, //检查数
checkSelfCount: 0, //自查数
hiddenCount: 0, //隐患数
hiddenNoReCount: 0, //未整改数
},
page: 1,
size: 10,
merId: null, // 商户id
unitName: '', // 单位名称
smallPlaceTypeName: '', // 场所类型
}
},
created() {
let urlParams = gemhoUtil.getUrlParams()
this.merId = urlParams.merId
this.unitName = urlParams.unitName
this.smallPlaceTypeName = urlParams.smallPlaceTypeName
this.init()
},
computed: {},
methods: {
resetSearchPara(){
this.page = 1
this.size = 10
},
onSearch() {
console.log('xxxx', this.merName)
this.resetSearchPara()
this.getMerchantSelfCheckData()
},
//初始化页面
init() {
this.getMerchantSelfCheckData()
},
tabChange(){
this.resetSearchPara()
this.getMerchantSelfCheckData()
},
//获取商户自查数据
getMerchantSelfCheckData() {
// 更多示例数据...
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['page']['id'],
interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: {
sign: 1,
type: this.activeTab,
merId: this.merId,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
merName: this.merName,
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后,分页数恢复上一次请求的值
setTimeout(() => {
this.getMerchantSelfCheckData()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
if (result.code !== 200 && result.data == null) {
return
}
this.hazardList = result.rows
if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据
}
}
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0)
this.$nextTick(() => {
// 滚动条跳转位置
window.scrollTo(0, gemhoUtil.getCookie('scrollPosition'))
})
}
)
}, 0)
},
viewDetail(id) {
let urlParams = gemhoUtil.getUrlParams()
let param = {
...urlParams,
id: id,
flag: 'JC_XQ',
pageName: '_checkrecord',
}
let url = gemhoUtil.setParameter('_check_info.html', param)
gemhoUtil.navigatePage(url, '跳转中...')
// 这里添加跳转逻辑
},
},
})
})
......@@ -471,7 +471,7 @@
<!-- 消费者安全建议列表 -->
<div v-if="activeTab==2">
<van-list>
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<van-cell
v-for="(item, index) in consumerSuggestList"
:key="item.id"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment