Skip to content

G
GaoQuYingJiH5-ASD
Commit 3f4f1c74 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：安全常识列表页面

parent a6712e09
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 477 deletions
src/_anquan_changshi.css
View file @ 3f4f1c74
...@@ -139,8 +139,6 @@ body { ...@@ -139,8 +139,6 @@ body {
} }
.van-field__label { .van-field__label {
font-weight: bold; font-weight: bold;
} }
...@@ -149,59 +147,96 @@ body { ...@@ -149,59 +147,96 @@ body {
color: #737373; color: #737373;
} }
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text { .navToBtn {
color: #5B5B5B; color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
} }
.subNavWrapper .van-tab--active span { * {
color: #fff; margin: 0;
font-size: 0.28rem; padding: 0;
box-sizing: border-box;
} }
body {
.subNavWrapper .van-tabs__nav--card { font-family: Arial, sans-serif;
border: none !important; background: #f5f5f5;
} }
.subNavWrapper .van-tabs--card { .container {
margin-bottom: 0.3rem; display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
} }
.subNavWrapper .van-tabs__nav--card .van-tab { .card {
color: #5B5B5B; /* flex: 0 0 calc(50% - 5px); */
border: none !important; flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
} }
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active { .card:hover {
color: #FFFFFF; transform: translateY(-5px);
background: #58A5E8;
border-radius: 0.4rem;
} }
.subNavWrapper .van-list { .image-wrapper {
background: #F5F6FA; position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
} }
.subNavWrapper .van-cell { .image-wrapper img {
margin-bottom: .3rem; position: absolute;
} top: 0;
left: 0;
.subNavWrapper .van-tabs__nav { width: 100%;
background: #F5F6FA; height: 100%;
margin: 0; object-fit: cover;
} }
.image-info {
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute; position: absolute;
bottom: 0;
left: 0;
right: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
/* 新增多行溢出省略样式 */
overflow: hidden; /* 隐藏溢出内容 */
display: -webkit-box; /* 弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 2; /* 限制2行 */
max-height: calc(0.28rem * 1.4 * 2 + 30px); /* 2行高度 + 上下padding（15px*2） */
} }
\ No newline at end of file
src/_anquan_changshi.html
View file @ 3f4f1c74
...@@ -7,95 +7,13 @@ ...@@ -7,95 +7,13 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover"> content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title> <title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script> <script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
justify-content: center;
gap: .2rem;
/* 卡片间距 */
box-sizing: border-box;
padding-bottom: .2rem;
/* padding: 10px;
*/
}
.card {
/* flex: 0 0 calc(50% - 5px); */
flex: 0 0 46%;
/* 每行两个卡片，减去间距的一半 */
background: white;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.image-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
color: white;
font-size: 14px;
}
.card-title {
padding: 15px;
font-size: .28rem;
font-weight: bold;
color: #333;
line-height: 1.4;
}
</style>
</head> </head>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="wrapper" v-cloak> <div class="wrapper" v-cloak>
<div class="header"> <div class="header">
<van-search v-model="merName" show-action placeholder="请输入商家关键词" @search="onSearch"> <van-search v-model="merName" show-action placeholder="请输入安全常识名称" @search="onSearch">
<template #action> <template #action>
<div @click="onSearch"></div> <div @click="onSearch"></div>
</template> </template>
...@@ -103,7 +21,7 @@ ...@@ -103,7 +21,7 @@
</div> </div>
<!-- Tab栏 --> <!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px" <van-tabs v-model:active="activeTab" @change="tabChange" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;"> style="margin-bottom: 15px;">
<van-tab title="常识视频"></van-tab> <van-tab title="常识视频"></van-tab>
<van-tab title="警示视频"></van-tab> <van-tab title="警示视频"></van-tab>
...@@ -111,41 +29,17 @@ ...@@ -111,41 +29,17 @@
<!-- <van-tab title="培训演练"></van-tab> --> <!-- <van-tab title="培训演练"></van-tab> -->
</van-tabs> </van-tabs>
<!-- 隐患列表 --> <!-- 隐患列表 -->
<van-list> <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<div class="container"> <div class="container">
<div class="card" v-for="item in 11"> <div class="card" v-for="item in 11">
<div class="image-wrapper"> <div class="image-wrapper">
<img src="https://dummyimage.com/340x206" alt="视频封面1"> <img src="https://dummyimage.com/340x206" alt="视频封面1">
</div> </div>
<div class="card-title">这是第一个视频标题，展示基本样式效果</div> <div class="card-title">这是第一个视频标题，展示基本，烧烤料上岛咖啡就水电费收快递费就</div>
</div> </div>
</div> </div>
</van-list> </van-list>
<!-- <van-list>
<van-cell v-for="item in 11"
style="position: relative;margin-bottom: 0.25rem;margin-top: 0.25rem;" @click="viewDetail(item)">
<div style="width: 100%;">
<div style="
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #333;
font-size: 0.3rem;
font-weight: bold;
font-family: PingFang SC;
">隐患排查不松懈</div>
<div style="position: relative: flex; justify-content: space-between; margin: 8px 0;">
<span
style="color: #737373; font-size: 0.28rem;">{{ '2025/2/12' }}</span>
<van-icon name="arrow" style="position: absolute; right:0;top:.5rem;font-size:.4rem;" @click="viewDetail(item,'YH_XQ')" />
</div>
</div>
</van-cell>
</van-list> -->
</div> </div>
</body> </body>
......
src/_anquan_changshi.js
View file @ 3f4f1c74
...@@ -9,41 +9,30 @@ window.addEventListener("load", function () { ...@@ -9,41 +9,30 @@ window.addEventListener("load", function () {
el: '#app', el: '#app',
data() { data() {
return { return {
merName: '', merName:'',
userType: gemhoUtil.getCookie('userType'),
shanghuName: '',
// 新增子Tab数据 // 新增子Tab数据
subActiveTab: 0, hazardList: [
hazardList: [// 更多示例数据... // 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
], ],
activeTab: '',
status: '',
merId: '', merId: '',
merInformation: { // 新增商户信息对象 showSearch: false, // 控制搜索框的显示和隐藏
// 整改状态 0：待整改 1：已整改 2：待审核 3：整改逾期
}, tabList: [
jcLisk: [{ // 新增检查列表数据 { name: '', title: '全部', msgNum: 0, },
}], { name: '2', title: '待审核', msgNum: 0, },
UserPermission: false, // 用户是否具有安全检查权限 { name: '0', title: '待整改', msgNum: 0, },
{ name: '1', title: '已整改', msgNum: 0, },
{ name: '3', title: '整改逾期', msgNum: 0, },
],
loading: false,
finished: false,
page: 0,
size: 6,
total: 0,
} }
}, },
created() { created() {
...@@ -52,19 +41,7 @@ window.addEventListener("load", function () { ...@@ -52,19 +41,7 @@ window.addEventListener("load", function () {
this.merId = params.merId this.merId = params.merId
}, },
mounted() { mounted() {
this.getShopInfo() // 获取商户信息
this.getShopDate() // 获取商户统计信息
this.getYhList() // 获取隐患记录
// this.getJcList() // 获取检查列表
this.getUserPermission()//获取用户是否具有安全检查资格
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改', '整改逾期'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.rectificationStatusName === statusMap[this.subActiveTab]
);
}
}, },
methods: { methods: {
onSearch() { onSearch() {
...@@ -72,147 +49,14 @@ window.addEventListener("load", function () { ...@@ -72,147 +49,14 @@ window.addEventListener("load", function () {
this.getList() this.getList()
}, },
getList(){ reset() {
this.page = 0
}, this.size = 6
navTo(url) { this.total = 0
// gemhoUtil.nav2asd(url) this.hazardList = []
let params = gemhoUtil.getUrlParams()
if (url == 'check_info') {
params = {
...params,
flag: 'ADD',
pageName: '_shanghu_home'
}
}
let strurl = gemhoUtil.setParameter(`_${url}.html`, params)
gemhoUtil.navigatePage(strurl, '跳转中...')
},
clickTab() {
if (this.activeTab > 0) {
this.getJcList() // 获取检查列表
}
},
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(item, type) {
let params = {
id: item.id,
merId: this.merId,
pageName: '_shanghu_home'
}
// 这里添加跳转逻辑
if (type === 'YH_XQ') {
params = {
...params,
flag: item.rectificationStatus,
}
} else {
params = {
...params,
flag: 'JC_XQ',
}
}
let url = gemhoUtil.setParameter('_check_info.html', params)
gemhoUtil.navigatePage(url, '跳转中...')
},
//获取商户统计信息
getShopDate() {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 6,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
merId: this.merId,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.merInformation = { ...this.merInformation, ...result.data }
}
}
)
}, 0)
},
//获取商户信息
getShopInfo() {
vant.Toast.loading({
message: '正在加载...',
forbidClick: true,
loadingType: 'spinner',
})
setTimeout(() => {
http2.post(
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 11,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
merId: this.merId,
sort: 'lawId,desc',
},
}, },
(res) => { getList(){
if (!res) { // 这里添加获取数据的逻辑
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.merInformation = { ...this.merInformation, ...result.data }
}
}
)
}, 0)
},
//获取隐患记录
getYhList() {
vant.Toast.loading({ vant.Toast.loading({
message: '正在加载...', message: '正在加载...',
forbidClick: true, forbidClick: true,
...@@ -226,53 +70,12 @@ window.addEventListener("load", function () { ...@@ -226,53 +70,12 @@ window.addEventListener("load", function () {
interfacePrivateKey: API_KEY_MAP['page']['privateKey'], interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: { reqParams: {
sign: 3, sign: 3,
merId: this.merId, // merId: this.merId ? this.merId : '',
status: '', merName: this.shanghuName,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
},
},
(res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => {
// this.getList()
}, 0)
return
}
if (res) {
var result = JSON.parse(res)
this.hazardList = result.rows
console.log(result)
}
}
)
}, 0)
},
//获取检查列表
getJcList() {
// 更多示例数据...
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++, // 每次请求增加下一页 pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size, pageSize: this.size,
sort: 'lawId,desc', sort: 'lawId,desc',
status: this.yhstatus()
}, },
}, },
(res) => { (res) => {
...@@ -281,18 +84,19 @@ window.addEventListener("load", function () { ...@@ -281,18 +84,19 @@ window.addEventListener("load", function () {
vant.Toast.clear() vant.Toast.clear()
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值 this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值
setTimeout(() => { setTimeout(() => {
// this.getList() this.getList()
}, 0) }, 0)
return return
} }
if (res) { if (res) {
var result = JSON.parse(res) var result = JSON.parse(res)
if (result.code !== 200 && result.data == null) { console.log(result, 'result')
return this.loading = false; // 加载状态结束
} this.hazardList.push(...result.rows);
this.jcLisk = result.rows this.total = result.total
if (this.page * this.size >= this.total) { if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据 this.finished = true; // 下滑不在刷新数据
} }
} }
this.loading = false this.loading = false
...@@ -300,67 +104,36 @@ window.addEventListener("load", function () { ...@@ -300,67 +104,36 @@ window.addEventListener("load", function () {
this.$nextTick(() => { this.$nextTick(() => {
vant.Toast.clear() vant.Toast.clear()
}) })
}, 0) }, 0);
this.$nextTick(() => {
// 滚动条跳转位置
window.scrollTo(0, gemhoUtil.getCookie('scrollPosition'))
})
} }
) )
}, 0) }, 0)
}, },
//获取用户是否有安全检查的权限 tabChange(title) {
getUserPermission() { console.log('tab 切换', title)
setTimeout(() => { this.reset()
http2.post( this.getList()
{
serviceId: API_KEY_MAP['no-page']['id'],
interfacePublicKey: API_KEY_MAP['no-page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['no-page']['privateKey'],
reqParams: {
sign: 13,
merId: this.merId,
pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size,
sort: 'lawId,desc',
}, },
init() {
this.getList()
}, },
(res) => { onSearch() {
if (!res) { this.reset()
// 中台返回为undefined 重新请求 this.getList()
vant.Toast.clear() },
this.page = this.page - 1 // 重新请求后，分页数恢复上一次请求的值 // 新增选择确认方法
setTimeout(() => {
// this.getList() viewDetail(item, type) {
}, 0) let param = {
return id: item.id,
} pageName: '_anquan_changshi',
if (res) {
var result = JSON.parse(res)
if (result.code !== 200 && result.data == null) {
return
}
console.log(result.data, result, '获取用户是否具有安全检查资格');
this.UserPermission = result.data.length > 0 ? true : false
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)
} }
let url = gemhoUtil.setParameter('_anquan_changshi-detail.html', param)
console.log(url)
gemhoUtil.navigatePage(url, '跳转中...')
},
} }
}); });
......
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