414 lines
11 KiB
Vue
414 lines
11 KiB
Vue
<template>
|
|
<div id="myapp" class="bodyA">
|
|
<!-- 滚动区域 -->
|
|
<div class="searchMode">
|
|
<van-search v-model="searchVal" :clearable="false" placeholder="请输入搜索关键词" @input="searchA" />
|
|
</div>
|
|
<div class="content">
|
|
|
|
<van-pull-refresh v-model="refreshFlag" success-text="刷新成功" @refresh="refreshFn">
|
|
<van-list v-model:loading="listLoadingFlag" :finished="finishFlag"
|
|
:finished-text="listData.length==0?'':'没有更多了'" @load="onLoads">
|
|
|
|
<div class="list" v-for="item in listData" @click="seeDetail(item)">
|
|
<img :src="dicObj.listImg[item.moduleId]" alt="">
|
|
<div class="listCont">
|
|
<div class="listInfo1">
|
|
{{dicObj.modelType[item.moduleId]}}
|
|
<div class="date">{{item.gmtCreated}}</div>
|
|
</div>
|
|
<div class="listInfo2">
|
|
您有新消息请注意查收。
|
|
<div class="status" v-if="item.idRead=='Y'">已读</div>
|
|
<div class="drop" v-else></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</van-list>
|
|
<van-empty :description="descriptionVal" v-if='listData.length == 0' />
|
|
</van-pull-refresh>
|
|
</div>
|
|
<!-- 底部 -->
|
|
<!-- <div class="footer indexFooter">
|
|
<van-button class="footerBtn">按钮</van-button>
|
|
<div class="footerTab" :class="switchCurrent==index?'footerAct':''" v-for="(item,index) in switchTab"
|
|
:key="index" @click="toSwitch(index)">
|
|
<van-icon class="icon" :name="item.icon" />
|
|
<div class="tabName">{{item.title}}</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="popMode" v-if="popFlag">
|
|
<div class="popCont">
|
|
<div class="title">{{dicObj.modelType[popData.moduleId]}}</div>
|
|
<div class="contBox">
|
|
{{popData.messageInfo}}
|
|
<div class="info">
|
|
<p>发送人：{{popData.senderName}}</p>
|
|
<p>发送部门：{{popData.senderDepartment}}</p>
|
|
<p>发送时间：{{parseTime(popData.createTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="footerBtn popfotter" @click="popFlagClose">知道了</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
messageReaded,
|
|
messageList
|
|
} from '@/common/api.js'
|
|
import {
|
|
callbackRequest,
|
|
formatDate
|
|
} from '@/common/util.js'
|
|
import {
|
|
parseTime
|
|
} from '@/common/common.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loadingFlag: '',
|
|
loadingFlag_Tm: 'n',
|
|
|
|
descriptionVal: '暂无数据', // 无数据&异常文本
|
|
refreshFlag: false, // 下拉刷新标识
|
|
noDataFlag: '',
|
|
timer: null,
|
|
pageNum: 1,
|
|
finishFlag: true,
|
|
listLoadingFlag: false,
|
|
// code
|
|
listData: [
|
|
// {
|
|
// title: '就医助手', // 模块名称 可以不传 可以根据类型判断
|
|
// date: '2020-12-12', // 时间
|
|
// msg: '您有新消息请注意查收。', // 消息 可以不传 可以根据类型判断
|
|
// status: 1, // 数据读取状态 1已读 2未读
|
|
// modelType: 1, // 数据类型 1餐券 2访客 3就医 4理发 5外卖
|
|
// },
|
|
// { title: '就医助手1', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 2, },
|
|
// { title: '就医助手2r', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 3 },
|
|
// { title: '就医助手3', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 4 },
|
|
// { title: '就医助手4', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 1 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 1 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 2 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 3 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 4 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 2 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 3 },
|
|
// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 4 },
|
|
],
|
|
dicObj: {
|
|
modelType: {
|
|
1: '临时餐券', // 临时餐券
|
|
2: '就医检查', // 就医检查
|
|
3: '就医手术', // 就医手术
|
|
4: '就医住院', // 就医住院
|
|
5: '就医挂号', // 就医挂号
|
|
6: '理发', // 理发
|
|
7: '员工卡申请', // 员工卡申请
|
|
8: '访客预约', // 访客预约
|
|
9: '临时停车', // 临时停车
|
|
10: '施工申请', // 施工申请
|
|
// 11: '故障报修', // 故障报修- 重复 同18
|
|
12: '固定券领取', // 固定券领取
|
|
13: '快捷券发放', // 快捷券发放
|
|
14: '外卖', // 外卖
|
|
15: '体检', // 体检
|
|
16: '个人中心', // 个人中心
|
|
17: '故障报修', // 故障报修
|
|
18: '咖啡服务', // 咖啡服务
|
|
19: '公务用车', // 公务用车
|
|
20: '口腔挂号', // 口腔挂号
|
|
21: '便捷服务', // 便捷服务
|
|
22: '防疫申领', // 防疫申领
|
|
23: '证件申领',
|
|
24: '办公用品申领',
|
|
25: '洗车申请',
|
|
},
|
|
|
|
listImg: {
|
|
1: '../../static/model/routeIcon_cq.png', // 临时餐券
|
|
2: '../../static/model/routeIcon_jy.png', // 就医检查
|
|
3: '../../static/model/routeIcon_jy.png', // 就医手术
|
|
4: '../../static/model/routeIcon_jy.png', // 就医住院
|
|
5: '../../static/model/routeIcon_jy.png', // 就医挂号
|
|
6: '../../static/model/routeIcon_lf.png', // 理发
|
|
7: '../../static/model/routeIcon_ygk.png', // 员工卡申请
|
|
8: '../../static/model/routeIcon_fk.png', // 访客预约
|
|
9: '../../static/common/close2.png', // 临时停车
|
|
10: '../../static/model/routeIcon_sg.png', // 施工申请
|
|
// 11: '../../static/common/close2.png', // 故障报修
|
|
12: '../../static/model/routeIcon_cq.png', // 固定券领取
|
|
13: '../../static/model/routeIcon_cq.png', // 快捷券发放
|
|
14: '../../static/model/routeIcon_wm.png', // 外卖
|
|
15: '../../static/model/routeIcon_jc.png', // 体检
|
|
16: '../../static/model/routeIcon_grzx.png', // 个人中心
|
|
17: '../../static/model/routeIcon_gz.png', // 故障报修
|
|
18: '../../static/model/routeIcon_kf.png', // 咖啡服务
|
|
19: '../../static/model/routeIcon_yc.png', // 公务用车
|
|
20: '../../static/model/routeIcon_kq.png', // 口腔挂号
|
|
21: '../../static/model/routeIcon_fw.png', // 便捷服务
|
|
22: '../../static/index/area3_fysl.png', // 防疫申领
|
|
},
|
|
},
|
|
searchVal: '',
|
|
switchTab: [{
|
|
title: '首页',
|
|
icon: 'wap-home'
|
|
},
|
|
{
|
|
title: '消息',
|
|
icon: 'chat'
|
|
},
|
|
{
|
|
title: '我的',
|
|
icon: 'manager'
|
|
},
|
|
],
|
|
switchCurrent: 1,
|
|
|
|
// activeName: [],
|
|
popFlag: false,
|
|
popData: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
searchA(e) {
|
|
this.debounce(() => {
|
|
this.listData = [];
|
|
this.pageNum = 1;
|
|
this.getData(e);
|
|
}, 500)
|
|
},
|
|
popFlagClose() {
|
|
this.loadingFlag_Tm = '';
|
|
this.listData = [];
|
|
this.pageNum = 1;
|
|
this.getData();
|
|
this.popFlag = false;
|
|
},
|
|
seeDetail(obj) {
|
|
const _this = this;
|
|
let params = {
|
|
method: messageReaded,
|
|
id: obj.id
|
|
}
|
|
callbackRequest(params).then(res => {
|
|
if (res.returnCode == 1) {
|
|
_this.popFlag = true;
|
|
_this.popData = obj
|
|
} else {
|
|
uni.showToast({
|
|
title: res.returnMsg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// switch跳转
|
|
toSwitch(i) {
|
|
console.log(i);
|
|
let url;
|
|
switch (i) {
|
|
case 0:
|
|
url = './indexIndex.html';
|
|
break;
|
|
case 1:
|
|
url = './indexTab_message.html';
|
|
break;
|
|
case 2:
|
|
url = './indexTab_mine.html';
|
|
break;
|
|
}
|
|
window.location.href = url;
|
|
},
|
|
// 下拉刷新
|
|
refreshFn() {
|
|
setTimeout(() => {
|
|
this.listData = [];
|
|
this.pageNum = 1;
|
|
this.getData();
|
|
}, 1000);
|
|
},
|
|
// 列表加载更多
|
|
onLoads() {
|
|
this.pageNum = this.pageNum + 1;
|
|
this.getData();
|
|
},
|
|
getData(titleA) {
|
|
const that = this;
|
|
let params = {
|
|
method: messageList,
|
|
messageInfo: titleA || '',
|
|
pageNo: this.pageNum,
|
|
pageSize: 10,
|
|
}
|
|
callbackRequest(params).then(res => {
|
|
let msg;
|
|
if (res.returnCode == 1) {
|
|
let resData = res.returnData.list;
|
|
let arr;
|
|
arr = that.listData.concat(resData)
|
|
that.listData = arr;
|
|
that.finishFlag = resData.length < 10;
|
|
that.listLoadingFlag = false;
|
|
that.refreshFlag = false;
|
|
msg = '未查询到数据'
|
|
} else {
|
|
msg = '数据异常'
|
|
}
|
|
that.loadingFlag = 'n'
|
|
that.loadingFlag_Tm = 'n';
|
|
that.descriptionVal = msg;
|
|
})
|
|
},
|
|
back() {},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
font-size: .38*74upx;
|
|
color: #0e1a24;
|
|
padding: .3243*74upx;
|
|
padding-bottom: 1.6216*74upx;
|
|
width: unset;
|
|
}
|
|
|
|
.content .list {
|
|
padding: .36*74upx .3243*74upx;
|
|
background-color: #fff;
|
|
border-radius: .3*74upx;
|
|
margin-bottom: .32*74upx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* .van-collapse-item {
|
|
margin-bottom: .32*74upx;
|
|
border-radius: .3*74upx;
|
|
overflow: hidden;
|
|
} */
|
|
|
|
.content .list img {
|
|
width: 1.2432*74upx;
|
|
height: 1.2432*74upx;
|
|
margin-right: .32*74upx;
|
|
}
|
|
|
|
.content .list .listCont {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.content .list .listInfo1,
|
|
.content .list .listInfo2 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content .list .listInfo1 {
|
|
margin-bottom: .2*74upx;
|
|
font-size: .43*74upx;
|
|
color: #0e1a24;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content .list .listInfo2 {
|
|
color: #97A5B1;
|
|
}
|
|
|
|
.content .list .listInfo1 .date,
|
|
.content .list .listInfo2 .status {
|
|
margin-left: auto;
|
|
font-size: .32*74upx;
|
|
font-weight: normal;
|
|
color: #97A5B1;
|
|
}
|
|
|
|
.content .list .listInfo2 .drop {
|
|
width: .22*74upx;
|
|
height: .22*74upx;
|
|
border-radius: 50%;
|
|
background-color: #fb8107;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.popMode {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.popMode .popCont {
|
|
background-color: #fff;
|
|
width: 100%;
|
|
margin: 1.0811*74upx .5405*74upx;
|
|
height: 7.027*74upx;
|
|
border-radius: .3*74upx;
|
|
padding: .3243*74upx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.popMode .popCont .title {
|
|
font-size: .4054*74upx;
|
|
color: #0e1a24;
|
|
text-align: center;
|
|
height: .8649*74upx;
|
|
line-height: .8649*74upx;
|
|
flex-grow: 1;
|
|
font-weight: bold;
|
|
background-image: linear-gradient(to right, #eafdf9, #daf1fc);
|
|
border-radius: .2*74upx;
|
|
}
|
|
|
|
.popMode .popCont .contBox {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
padding: .3243*74upx 0;
|
|
font-size: .3784*74upx;
|
|
color: #0e1a24;
|
|
position: relative;
|
|
line-height: .6486*74upx;
|
|
}
|
|
|
|
.popMode .popCont .contBox .info {
|
|
text-align: right;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: .3243*74upx;
|
|
color: #97A5B1;
|
|
line-height: normal;
|
|
}
|
|
|
|
.popMode .popCont .contBox .info p {
|
|
margin-top: .1081*74upx;
|
|
}
|
|
|
|
.popMode .popCont .popfotter {
|
|
background-color: aquamarine;
|
|
height: .8649*74upx;
|
|
line-height: .8649*74upx;
|
|
font-size: .3784*74upx;
|
|
}
|
|
|
|
.van-cell--clickable {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |