integrated_traffic_uniapp/pages/news/home.vue

394 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<cu-custom bgColor="bg-gradual-blueness">
<block slot="content">通知公告</block>
</cu-custom>
<view class="top-fixed">
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
{{tabNav[index]}}
</view>
</view>
</scroll-view>
<view class="cu-bar search bg-white">
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input v-model="KEYWORDS" placeholder="请输入关键字"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur radius" @click="getQuery()">搜索</button>
</view>
</view>
<view class="line"></view>
</view>
<block v-if="TabCur==0">
<view class="select-fixed top-fixed">
<view class="cu-bar search bg-white">
<view class="search-form radius" style="margin-left: 0;">
<text class="cuIcon-search"></text>
<input @input="InputBlur" placeholder="请输入关键字"
confirm-type="search"></input>
</view>
<view class="action">
<button class="cu-btn bg-green shadow-blur radius" @click="getQuery">搜索</button>
</view>
</view>
<view class="line"></view>
</view>
<scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
<view v-if="list.length>0" >
<view class="news-list">
<view class="news-item" v-for="item in list" :key="item.NOTICE_ID" @click="$noMultipleClicks(goToDetail,item.NOTICE_ID)">
<view class="news-media-list">
<!-- <image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="aspectFill" class="news-media-logo"></image>-->
<view class="news-media-body">
<view class="news-media-title">
{{item.SYNOPSIS}}
</view>
<view class="news-media-text">
<!-- <text>双控平台</text>-->
<text>{{item.CREATTIME}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else-if="dataFlag=='noData'" class="dy-null">
<view class="dy-null-img">
<image src="../../static/null.png" mode=""></image>
</view>
<view class="dy-null-title">
暂无数据
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</block>
<block v-if="TabCur==1">
<scroll-view class="dy-scroll-nobg" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
<view v-if="pclist.length>0" >
<view class="news-list">
<view class="news-item" v-for="item in pclist" :key="item.NOTICECORP_ID" >
<view class="news-media-list">
<view class="news-media-body">
<view class="news-media-title" @click="$noMultipleClicks(goToPcDetail,item.NOTICECORPUSERID_ID)">
{{item.SYNOPSIS}}
<text style="float:right;">
<template v-if="item.TYPE=='0'">未读</template>
<template v-else-if="item.TYPE=='1'">已读</template>
</text>
</view>
<view class="news-media-text">
<text>{{item.CREATTIME}}</text>
<view v-if="item.TYPE=='1'" style="float:right;">
<button class="cu-btn round bg-red" style="height:40upx;" @click="deleteNotice(item.NOTICECORPUSERID_ID)">删除</button>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else-if="dataFlag=='noData'" class="dy-null">
<view class="dy-null-img">
<image src="../../static/null.png" mode=""></image>
</view>
<view class="dy-null-title">
暂无数据
</view>
</view>
<view class="cu-tabbar-height"></view>
</scroll-view>
</block>
</view>
</template>
<script>
import {
basePath,corpinfoId,loginUserId,loginUser
} from '@/common/tool.js';
export default {
data() {
return {
dataFlag:'noData',
background:{"url":""},
sTop:0,
totalHeight:0,
TabCur: 0,
scrollLeft: 0,
tabNav: ['平台公告', '企业公告'],
noClick:true,
KEYWORDS:'',
list: [],
pclist: [],
page:1,//分页参数--页数
rows:10,//分页参数--每页数据条数
totalCount:0,//分页参数--初始化页数
isEnd:false,//防止多次刷新
totalPage:0,//分页参数--分页数量
showCount :-1,
currentPage:1,
tabCur :0,
}
},
mounted(e){
this.getData();
let that=this;
let CustomBar = this.CustomBar;
uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
success(res) { //成功回调函数
let titleH=uni.createSelectorQuery().select(".top-fixed"); //想要获取高度的元素名class/id
titleH.boundingClientRect(data=>{
that._data.sTop=data.height //计算高度:元素高度=窗口高度-元素距离顶部的距离data.top
that.totalHeight = data.height+CustomBar
}).exec()
}
})
},
// 滑动到底方法
scrolltolower(){
var _this = this;
_this.showCount = -1;
_this.currentPage = _this.currentPage + 1;
_this.isEnd = false;
if("0"==_this.TabCur ){
if(_this.totalPage >= _this.currentPage){
_this.getDate();//开始分页查询
}
}
if ("1"==_this.TabCur){
if(_this.totalPage >= _this.currentPage){
_this.getPcData();//开始分页查询
}
}
},
onReady() {
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
if("1" ==this.TabCur){
this.getPcData();
}
if("0" == this.TabCur){
this.getData();
}
},
getQuery() { //搜索按钮事件
var _this = this;
if(_this.TabCur == 0){
_this.getData();
}else{
_this.getPcData();
}
},
getData() {
var _this = this;
uni.showLoading({
title: '请稍候'
})
uni.request({
url: basePath + '/app/notice/list',
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
showCount : _this.showCount,
currentPage : _this.currentPage,
KEYWORDS:_this.KEYWORDS,
corpinfoId :corpinfoId,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
if("success" == res.data.result){
uni.hideLoading();
_this.list = res.data.varList;
console.log(res.data.varList)
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
getPcData() {
var _this = this;
uni.showLoading({
title: '请稍候'
})
uni.request({
url: basePath + '/app/notice/listForCp',
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
showCount : _this.showCount,
currentPage : _this.currentPage,
KEYWORDS:_this.KEYWORDS,
loginUserId :loginUserId,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
if("success" == res.data.result){
uni.hideLoading();
_this.pclist = res.data.varList;
console.log(res.data.varList)
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
//跳转事件
goToDetail(e) {
uni.navigateTo({
url: '/pages/news/news-list-detail?id='+e+'&type=0',
});
},
goToPcDetail(e){
uni.navigateTo({
url: '/pages/news/news-list-detail?id='+e+'&type=1',
});
},
deleteNotice(ID){
var _this = this;
uni.showModal({
title: '',
content: '确定要删除这条记录?',
cancelColor:"#000000",
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
uni.showLoading({
title: '处理中'
})
uni.request({
url: basePath+'/app/notice/delete',
method: 'POST',
dataType: 'json',
header: {
'Content-type':'application/x-www-form-urlencoded'
},
data: {
NOTICECORPUSERID_ID: ID
},
success: (res) => {
uni.hideLoading();
uni.showToast({
icon: 'none',
title: '删除成功',
duration: 1500
});
_this.getQuery()
},
fail: (err) => {
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
}
}
})
}
}
}
</script>
<style>
.news-list {
background-color: #FFFFFF;
position: relative;
width: 100%;
}
.news-item {
display: flex;
position: relative;
flex-direction: row;
align-items: center;
}
.news-media-list {
padding: 11px 15px;
display: flex;
width: 100%;
flex-direction: row;
}
.news-media-logo {
width: 90px;
height: 70px;
margin-right: 10px;
overflow: hidden;
position: relative;
}
.news-media-body {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.news-media-title {
height: 37px;
font-size: 14px;
overflow: hidden;
width: 100%;
line-height: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news-item::after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 15px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.news-media-text {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
line-height: 15px;
font-size: 13px;
color: #8f8f94;
}
</style>