Skip to content

G
GaoQuYingJiH5-ASD
Commit 10631a9e authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：培训演练页面列表页UI开发

parent 3f5d1f8c
Show whitespace changes
Inline Side-by-side
Showing with 268 additions and 244 deletions
src/_peixun_yanlian.css
View file @ 10631a9e
html, html,
body { body {
letter-spacing: .01rem; letter-spacing: 0.01rem;
background: #F5F6FA;
} }
.wrapper {} .wrapper {
/* padding: 0.2rem; */
.header {
background-color: #fff; background-color: #fff;
} }
.header .title { .header {
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; padding: 0.2rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
} }
.detail .van-col {
.func_btn {
width: 7.12rem;
height: 0.8rem;
background: #1081e3;
border-radius: 0.1rem;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 0.28rem; font-size: 0.3rem;
color: #737373; color: #ffffff;
margin: 0 auto;
border-width: 0;
margin-left: 0.2rem;
cursor: pointer;
} }
.detail span { .func_btn span {
font-family: PingFang SC; font-size: 0.5rem;
font-weight: 500; vertical-align: -0.05rem;
font-size: 0.28rem; margin-right: 0.1rem;
color: #737373;
} }
/* 添加以下样式 */ /* 添加以下样式 */
...@@ -64,13 +45,13 @@ body { ...@@ -64,13 +45,13 @@ body {
} }
.van-list { .van-list {
background: #F5F6FA; background: #fff;
border-radius: 8px; border-radius: 8px;
margin: 0.2rem 0.2rem; margin: 0 0.1rem;
} }
.van-list .van-cell { .subNavWrapper .van-cell {
margin-bottom: .2rem; padding: 12px 10px;
} }
.van-tab { .van-tab {
...@@ -84,7 +65,7 @@ body { ...@@ -84,7 +65,7 @@ body {
} }
.van-tab--active { .van-tab--active {
color: #1081E3; color: #1081e3;
} }
.van-field__label { .van-field__label {
...@@ -95,6 +76,71 @@ body { ...@@ -95,6 +76,71 @@ body {
color: #737373; color: #737373;
} }
.subNavWrapper {
background-color: #f5f6fa;
padding: 0.2rem 0.2rem;
margin-top: 0rem;
}
.subNavWrapper .van-tab__text {
color: #5b5b5b;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5b5b5b;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #ffffff;
background: #58a5e8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list {
background: #f5f6fa;
}
.subNavWrapper .van-cell {
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav {
background: #f5f6fa;
margin: 0;
}
.navToBtn {
color: #5b5b5b;
font-size: 0.36rem;
margin-top: 0.04rem;
position: absolute;
right: 0;
}
/* 应急演练提示内容样式 */
.msgTip{
background: rgb(251, 231, 231);
border-radius: 0.04rem;
font-weight: 500;
font-size: 0.28rem;
color: rgb(255, 0, 0);
padding: .2rem .3rem;
}
.tab1-row1{ .tab1-row1{
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -113,51 +159,3 @@ body { ...@@ -113,51 +159,3 @@ body {
.tab1-row2 span{ .tab1-row2 span{
display: inline-block; width: 50%; display: inline-block; width: 50%;
} }
\ No newline at end of file
.reminder-badge {
position: absolute;
top: 0.15rem;
right: 0.1rem;
min-width: .8rem;
text-align: left;
text-indent: .16rem;
height: 0.36rem;
line-height: 0.36rem;
font-size: 0.2rem;
color: #FFFFFF;
background-image: url(../image/code/home/tip.png);
background-size: contain;
background-repeat: no-repeat;
}
/* 应急演练提示内容样式 */
.msgTip{
background: rgb(251, 231, 231);
border-radius: 0.04rem;
font-weight: 500;
font-size: 0.28rem;
color: rgb(255, 0, 0);
padding: .2rem .3rem;
margin-bottom: .2rem;
}
.func_btn {
width: 7.12rem;
height: 0.8rem;
background: #1081e3;
border-radius: 0.1rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.3rem;
color: #ffffff;
margin: 0 auto;
border-width: 0;
margin-left: 0.2rem;
cursor: pointer;
}
.func_btn span {
font-size: 0.5rem;
vertical-align: -0.05rem;
margin-right: 0.1rem;
}
\ No newline at end of file
src/_peixun_yanlian.html
View file @ 10631a9e
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
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>
</head> </head>
<body>
<div id="app"> <div id="app">
<div class="wrapper" v-cloak> <div class="wrapper" v-cloak>
<!-- 商户头部信息 --> <!-- 商户头部信息 -->
...@@ -18,18 +18,25 @@ ...@@ -18,18 +18,25 @@
<div @click="onSearch"></div> <div @click="onSearch"></div>
</template> </template>
</van-search> </van-search>
</div>
<!-- 功能 --> <!-- 功能 -->
<button type="info" class="func_btn" @click="navTo"><span>+</span>新增培训演练</button> <button v-if="userType=='shop'" type="info" class="func_btn" @click="viewDetail"><span>+</span>新增{{clickTab==0?'安全培训':'应急演练'}}</button>
<!-- Tab栏 --> <!-- Tab栏 -->
<van-tabs v-model:active="activeTab" @click="tabChange" title-active-color="#1989fa" line-height="2px" <van-tabs v-model:active="activeTab" @click="clickTab" title-active-color="#1989fa" line-height="2px"
style="margin-bottom: 15px;"> style="margin-bottom: 15px;">
<van-tab title="培训演练" name="0"></van-tab> <van-tab title="安全培训" name="0"></van-tab>
<van-tab title="特种作业培训" name="1"></van-tab> <van-tab title="应急演练" name="1"></van-tab>
</van-tabs>
</div>
<div class="subNavWrapper">
<!-- 隐患记录子Tab -->
<van-tabs v-if="activeTab==0" v-model:active="subActiveTab" type="card">
<van-tab title="全部"></van-tab>
<van-tab title="特种作业"></van-tab>
<van-tab title="常规"></van-tab>
<van-tab title="新员工"></van-tab>
</van-tabs>
<!-- 隐患列表 -->
<van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false"> <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="getList" :immediate-check="false">
<div class="msgTip"> <div class="msgTip">
该商家4/5/6月份未进行特种作业培训 5月份未进行培训演练 该商家4/5/6月份未进行特种作业培训 5月份未进行培训演练
...@@ -46,13 +53,16 @@ ...@@ -46,13 +53,16 @@
<!-- 第三行：监察人 + 检查日期（两列） --> <!-- 第三行：监察人 + 检查日期（两列） -->
<div class="tab1-row2"> <div class="tab1-row2">
<span>培训人数：{{ item.pushDate }}</span> <span v-if="activeTab==0">培训人数：{{ item.pushDate }}</span>
<span v-if="activeTab==1">演练人数：{{ item.pushDate }}</span>
<span>培训人：{{ item.pushPeople }}</span> <span>培训人：{{ item.pushPeople }}</span>
</div> </div>
</div> </div>
</van-cell> </van-cell>
</van-list> </van-list>
</div> </div>
</body>
</div>
</body>
</html> </html>
\ No newline at end of file
src/_peixun_yanlian.js
View file @ 10631a9e
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null var VUE = null
window.addEventListener('load', function () { window.addEventListener("load", function () {
VUE = new Vue({ VUE = new Vue({
el: '#app', el: '#app',
data() { data() {
return { return {
merName: '', merName: '',
userType: gemhoUtil.getCookie('userType'),
// 新增子Tab数据 // 新增子Tab数据
activeTab: '0', subActiveTab: 0,
hazardList: [], hazardList: [// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据 // 新增以下数据
userInfo: {}, showTypePicker: false,
userData: { formData: {
checkCount: 0, //检查数 principal: '',
checkSelfCount: 0, //自查数 phone: '',
hiddenCount: 0, //隐患数 area: '',
hiddenNoReCount: 0, //未整改数 businessHours: '',
type: '', // 新增类型字段
}, },
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
],
merId: '',
loading: false, loading: false,
finished: false, finished: false,
page: 1, page: 1,
size: 6, size: 6,
total: 0, total: 0,
merId: null, // 商户id
unitName: '', // 单位名称
smallPlaceTypeName: '', // 场所类型
} }
}, },
created() { mounted() {
let urlParams = gemhoUtil.getUrlParams() let params = gemhoUtil.getUrlParams()
this.merId = urlParams.merId console.log(params);
this.unitName = urlParams.unitName this.merId = params.merId
this.smallPlaceTypeName = urlParams.smallPlaceTypeName this.init() // 获取隐患记录
this.init()
}, },
computed: {},
methods: { methods: {
reset() { reset() {
this.page = 1 this.page = 1
...@@ -42,36 +58,69 @@ window.addEventListener('load', function () { ...@@ -42,36 +58,69 @@ window.addEventListener('load', function () {
this.total = 0 this.total = 0
this.hazardList = [] this.hazardList = []
}, },
clickTab() {
this.init()
},
onSearch() { onSearch() {
console.log('xxxx', this.merName) console.log('xxxx', this.merName)
this.init() this.init()
}, },
//初始化页面
init() { init() {
this.reset() this.reset()
this.getList() this.getList()
}, },
tabChange() { // 新增选择确认方法
this.init() onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
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, '跳转中...')
}, },
getList() { getList() {
// 更多示例数据...
vant.Toast.loading({ vant.Toast.loading({
message: '正在加载...', message: '正在加载...',
forbidClick: true, forbidClick: true,
loadingType: 'spinner', loadingType: 'spinner',
}) })
setTimeout(() => { setTimeout(() => {
http2.post(
{ {
serviceId: API_KEY_MAP['page']['id'], serviceId: API_KEY_MAP['page']['id'],
interfacePublicKey: API_KEY_MAP['page']['publicKey'], interfacePublicKey: API_KEY_MAP['page']['publicKey'],
interfacePrivateKey: API_KEY_MAP['page']['privateKey'], interfacePrivateKey: API_KEY_MAP['page']['privateKey'],
reqParams: { reqParams: {
sign: 29, sign: 3,
merId: this.merId,
merName: this.merName,
type: this.activeTab, type: this.activeTab,
pageNum: this.page, // 每次请求增加下一页 pageNum: this.page++, // 每次请求增加下一页
pageSize: this.size, pageSize: this.size,
merName: this.merName sort: 'lawId,desc',
}, },
}, },
(res) => { (res) => {
...@@ -80,7 +129,7 @@ window.addEventListener('load', function () { ...@@ -80,7 +129,7 @@ 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
} }
...@@ -94,47 +143,14 @@ window.addEventListener('load', function () { ...@@ -94,47 +143,14 @@ window.addEventListener('load', function () {
this.total = result.total this.total = result.total
if (this.page * this.size >= this.total) { if (this.page * this.size >= this.total) {
this.finished = true // 下滑不在刷新数据 this.finished = true // 下滑不在刷新数据
}else{
this.page++
} }
} }
this.loading = false this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0)
this.$nextTick(() => {
// 滚动条跳转位置
window.scrollTo(0, gemhoUtil.getCookie('scrollPosition'))
})
} }
) )
http2.post( }, 0)
},
navTo(){
let param = {
merId: gemhoUtil.getParameter('merId')||'',
pageName: '_peixun_yanlian',
}
let url = gemhoUtil.setParameter('_peixun_yanlian_detail.html', param)
gemhoUtil.navigatePage(url, '跳转中...')
}, },
viewDetail(item) {
let urlParams = gemhoUtil.getUrlParams()
let param = {
...urlParams,
id: item.id,
flag: item.status,
pageName: '_shangbao-list',
addr: item.addr,
merchantName: item.merName,
} }
let url = gemhoUtil.setParameter('_check_info.html', param) });
gemhoUtil.navigatePage(url, '跳转中...')
// 这里添加跳转逻辑
},
},
})
}) })
\ No newline at end of file
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