<template>
|
<view class="container">
|
<!-- 头部 start -->
|
<!-- <view> -->
|
<u-popup v-model="showOnceLogin" mode="center" :closeable="true" :custom-style="OnceLoginStyle"
|
class="OnceLoginStyles">
|
<img class="imgs1" src="../../static/home/img/laba2.png" mode=""></img>
|
<view class="onceBody">
|
<view class="names">
|
管理员{{$store.state.puserName}}:
|
</view>
|
<view class="texts">
|
恭喜您加入洪城义警,
|
我们期待与您共建平安家园,
|
即日起您可参与治安防范巡查等任务,获得积分
|
</view>
|
</view>
|
<!-- <button type="default" class="buts">点击进入</button> -->
|
</u-popup>
|
<!-- <u-button @click="">打开</u-button>
|
<u-button @click="ccc">打开</u-button>
|
<u-button @click="aaa(1)">播放</u-button>
|
<u-button @click="ddd(1)">结束</u-button> -->
|
<!--<u-button @click="bbb(0)">暂停</u-button>
|
<u-button @click="ddd(0)">结束</u-button>
|
<u-button @click="eee(0)">销毁</u-button>
|
<u-button @click="aaa(1)">播放1</u-button>
|
<u-button @click="bbb(1)">暂停1</u-button>
|
<u-button @click="ddd(1)">结束1</u-button>
|
<u-button @click="eee(1)">销毁1</u-button> -->
|
<!-- </view> -->
|
<view class="head">
|
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
|
:background="{ background: '#103289' }">
|
<view class="nav-wrap">
|
<!-- <picker mode="selector" :range="positionArr" range-key="name" @change="changePicker"
|
class="picker-box">
|
{{ position }}
|
<u-icon name="arrow-down" class="arrow" size="18" color="#C9C9C9"></u-icon>
|
</picker> -->
|
<!-- <image src="/static/images/rider.png" class="rider" mode="widthFix" v-if="!focus"></image>
|
|
<view class="search-input" v-else>
|
<u-search height="50" placeholder="关键字" @blur="handleSearchBlur" :show-action="false"
|
v-model="keyword"></u-search>
|
</view>
|
|
<view class="tool">
|
<image src="/static/images/home/search.png" class="icon search-icon" mode="widthFix"
|
@click="handleFocus" v-if="!focus"></image>
|
<image src="/static/images/home/message.png" class="icon message-icon" mode="widthFix"></image>
|
<image src="/static/images/home/qr.png" class="icon qr-icon" mode="widthFix"></image>
|
</view> -->
|
</view>
|
</u-navbar>
|
<view class="head-bg"></view>
|
<swiper class="swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
|
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
<navigator :url="item.url" hover-class="none" class="swiper-item">
|
<image :src="item.img" class="banner"></image>
|
</navigator>
|
</swiper-item>
|
</swiper>
|
</view>
|
<!-- 头部 end -->
|
|
<!-- 服务按钮 start 业务办理-->
|
<view class="service-box">
|
<u-grid :col="4" :border="false">
|
<u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index">
|
<navigator hover-class="none" class="service-item" @click="goBusinessPage(item.url,index)">
|
<image :src="item.img" mode="widthFix" class="img"></image>
|
<u-badge v-if="item.name == '我参与'" :count="cout" :offset="[20, 20]"></u-badge>
|
<view class="name">{{ item.name }}</view>
|
</navigator>
|
</u-grid-item>
|
<!-- <u-grid-item bg-color="transparent" key="8">
|
<navigator url="/pages/service/service" hover-class="none" class="service-item">
|
<image src="/static/images/home/s8.png" mode="widthFix" class="img"></image>
|
<view class="name">更多</view>
|
</navigator>
|
</u-grid-item> -->
|
</u-grid>
|
</view>
|
<!-- 服务按钮 end -->
|
|
|
<!-- 头部按钮 start -->
|
<!-- <view class="nav">
|
<u-grid :col="5" :border="false">
|
<u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
|
<navigator :url="item.url" hover-class="none" class="nav-item">
|
<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
|
<view class="nav-item-name">{{ item.name }}</view>
|
</navigator>
|
</u-grid-item>
|
</u-grid>
|
</view> -->
|
<!-- 头部按钮 end -->
|
|
<!-- 公告 start -->
|
<!-- <view class="notice-box">
|
<image src="/static/images/home/notice.png" class="img" mode="widthFix"></image>
|
<view class="notice-info">
|
<navigator hover-class="none" class="notice-cell" v-for="(item, index) in noticeList" :key="index">
|
<image :src="item.img" class="icon" mode="widthFix"></image>
|
<view class="text">{{item.title}}</view>
|
<u-icon name="arrow-right" size="12" color="#C9C9C9"></u-icon>
|
</navigator>
|
</view>
|
</view> -->
|
<view class="notice-class">
|
<u-notice-bar :speed="160" :duration="2000" :isCircular="true" :more-icon="true" mode="horizontal"
|
type="none" :list="gdlist" @click="wxtsGo"></u-notice-bar>
|
</view>
|
<!-- 公告 end -->
|
|
<!-- 新闻模块 start -->
|
<view class="news">
|
<navigator hover-class="none" url="/pages/news/list" class="cell">
|
<view class="ctitle">资讯</view>
|
<view hover-class="bg-light" class="more" @click="goArticle()">
|
更多
|
<u-icon name="arrow-right" color="#A6ABB5" size="16"></u-icon>
|
</view>
|
</navigator>
|
|
<view class="news-list">
|
<view hover-class="none" class="news-item" @click="goArticleDetail(item)"
|
v-for="(item, index) in newsList" :key="index">
|
<view class="left">
|
<view class="info">
|
{{item.title}}
|
</view>
|
<view class="date">
|
<!-- <image src="/static/images/home/date.png" class="icon" mode=""></image> -->
|
<view class="advisory-title-name">{{item.sourceName}}</view>
|
<view class="advisory-title-time">{{item.createTime.substring(0,11)}}</view>
|
</view>
|
</view>
|
<image :src="item.url" mode="" class="img"></image>
|
</view>
|
<u-loadmore :status="status" />
|
</view>
|
<!-- 新闻模块 end -->
|
</view>
|
<u-toast ref="uToast" />
|
<!-- 底部导航条 -->
|
<u-tabbar :list="tabbar" :mid-button="false" height="50px" icon-size="40"></u-tabbar>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
fakePosition,
|
fakeBannerList,
|
fakeNoticeList,
|
fakeNavButton,
|
fakeServiceButton
|
} from "@/api/mock/home.js";
|
export default {
|
data() {
|
return {
|
position: '',
|
positionArr: [],
|
status: 'loadmore',
|
list: 15,
|
page: 1,
|
cout: 0,
|
pagesize: 2,
|
keyword: '',
|
focus: false,
|
bannerList: [],
|
noticeList: [],
|
newsList: [],
|
navButton: [],
|
serviceButton: [],
|
tabbar: this.$store.state.tabbar,
|
gdlist: [
|
'南昌一波重磅“官宣”！来了！'
|
],
|
showOnceLogin: false, //首次进入显示祝贺信
|
OnceLoginStyle: {
|
// width: '60%',
|
// height: '50%',
|
// backgroundColor: '#fff',
|
// margin: 'auto'
|
},
|
};
|
},
|
onShow() {
|
this.getNum();
|
},
|
onLoad() {
|
// 后续将改为与后端联动
|
// 加载banner数据
|
fakePosition().then(data => {
|
this.position = data.position;
|
this.positionArr = data.positionArr;
|
});
|
// 加载banner数据
|
fakeBannerList().then(data => {
|
this.bannerList = data;
|
});
|
// 加载通知公告数据
|
fakeNoticeList().then(data => {
|
this.noticeList = data;
|
});
|
// 加载顶部按钮数据
|
fakeNavButton().then(data => {
|
this.navButton = data;
|
});
|
// 加载服务按钮数据
|
fakeServiceButton().then(data => {
|
this.serviceButton = data;
|
});
|
//获取新闻信息
|
this.getArtcilePageList();
|
|
//读取是否是第一次进入
|
},
|
onReachBottom() {
|
if (this.status == 'nomore') return;
|
this.page = ++this.page;
|
setTimeout(() => {
|
this.getArtcilePageList();
|
}, 2000);
|
},
|
computed: {
|
firstlogin() {
|
return this.$store.state.firstlogin;
|
},
|
changeTaksState() {
|
return this.$store.state.changeTaksState;
|
}
|
},
|
watch: {
|
firstlogin: {
|
handler(newVal, oldVal) {
|
if (this.$store.state.firstlogin == '1' || this.$store.state.firstlogin == 1) {
|
this.showOnceLogin = true;
|
}
|
},
|
immediate: true
|
},
|
changeTaksState() {
|
// 加载服务按钮数据
|
this.getNum();
|
},
|
showOnceLogin() {
|
if (!this.showOnceLogin) {
|
console.log("窗口已关闭")
|
uni.request({
|
url: this.$store.state.piAPI + '/blade-user/firstLogin?id=' + this.$store.state.puserID,
|
method: 'GET',
|
success: (res) => {
|
// console.log(res)
|
}
|
});
|
}
|
}
|
},
|
methods: {
|
ccc() {
|
let content = `
|
1. 修复badge组件的size参数无效问题<br>
|
2. 新增Modal模态框组件<br>
|
3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
|
4. 修复键盘组件在微信小程序上遮罩无效的问题
|
`;
|
this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?content=" + content +
|
"&src=1345678");
|
},
|
aaa(i) {
|
let key = i == 1 ? 'keke' : 'song1';
|
this.$store.commit("controlAudio", {
|
key: key,
|
method: '$play'
|
})
|
},
|
bbb(i) {
|
let key = i == 1 ? 'keke' : 'song1';
|
this.$store.commit("controlAudio", {
|
key: key,
|
method: '$pause'
|
})
|
},
|
ddd(i) {
|
let key = i == 1 ? 'keke' : 'song1';
|
this.$store.commit("controlAudio", {
|
key: key,
|
method: '$stop'
|
})
|
},
|
eee(i) {
|
let key = i == 1 ? 'keke' : 'song1';
|
this.$store.commit("controlAudio", {
|
key: key,
|
method: '$destroy'
|
})
|
},
|
//温馨提示跳转页面
|
wxtsGo() {
|
//去跳转
|
let detail = {
|
id: "991"
|
};
|
uni.navigateTo({
|
url: '../article/article_detail?detailData=' + JSON.stringify(detail)
|
});
|
},
|
//点击更多跳转资讯页
|
goArticle() {
|
uni.switchTab({
|
url: '../article/article'
|
})
|
},
|
//去跳转详情页面
|
goArticleDetail(e) {
|
let detail = {
|
id: e.id
|
};
|
if (e.articleType.indexOf("ksp") != -1) {
|
//去跳转
|
uni.navigateTo({
|
url: '../article/article_video?detailData=' + (JSON.stringify(e))
|
});
|
} else {
|
//去跳转
|
uni.navigateTo({
|
url: '../article/article_detail?detailData=' + JSON.stringify(detail)
|
});
|
}
|
},
|
changePicker(e) {
|
console.log(this.pickerArr[e.detail.value].name);
|
this.position = this.pickerArr[e.detail.value].name;
|
},
|
handleFocus() {
|
this.focus = !this.focus;
|
},
|
handleSearchBlur() {
|
this.focus = false;
|
},
|
//页面跳转
|
goBusinessPage(url, index) {
|
if (index == 0) {
|
//我要看在tabbar 我参与
|
uni.switchTab({
|
url: url
|
})
|
} else if (this.$store.state.UserData.stype != "1") {
|
this.$refs.uToast.show({
|
title: '功能暂未开放',
|
type: 'warning',
|
})
|
return;
|
} else if (index == 3) {
|
this.$refs.uToast.show({
|
title: '功能研发中',
|
type: 'warning',
|
})
|
return;
|
} else {
|
uni.navigateTo({
|
url: url
|
})
|
}
|
},
|
//获取资讯信息
|
getNum() {
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + '/taskqd/selectNum',
|
method: 'GET',
|
data: {
|
serid: that.$store.state.UserData.user_id,
|
jurisdiction: that.$store.state.UserData.jurisdiction,
|
workjurisdiction: that.$store.state.UserData.workjurisdiction,
|
},
|
success: (res) => {
|
var data = res.data.data;
|
var num = Number(data.px) + Number(data.xcha) + Number(data.xchuan);
|
this.cout = num;
|
}
|
});
|
},
|
//获取资讯信息
|
getArtcilePageList() {
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + '/article/article/selectArticleG',
|
method: 'GET',
|
data: {
|
current: this.page,
|
size: this.pagesize,
|
rolename: this.$store.state.UserData.role_name
|
},
|
success: (res) => {
|
if (res.data.code == 200) {
|
if (res.data.data.records) {
|
//如果总数小于pageSize,不做其他操作
|
if (res.data.data.total < this.pagesize) {
|
that.newsList = res.data.data.records;
|
} else {
|
if (res.data.data.records.length < this.pagesize) {
|
//如果数量小于分页数量，则为最后一页
|
this.status = 'nomore'
|
} else {
|
//如果数量小于分页数量，则为最后一页
|
this.status = 'loading';
|
}
|
res.data.data.records.forEach(item => {
|
that.newsList.push(item);
|
})
|
}
|
}
|
uni.stopPullDownRefresh();
|
}
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.container {
|
background-color: #f7f7f7;
|
min-height: 100vh;
|
overflow: hidden;
|
}
|
|
.head {
|
position: relative;
|
top: 0;
|
left: 0;
|
z-index: 1;
|
}
|
|
.head-bg {
|
position: absolute;
|
left: 0px;
|
top: 0px;
|
z-index: -1;
|
width: 750rpx;
|
height: 270rpx;
|
background: #103289;
|
}
|
|
.nav-wrap {
|
width: 100%;
|
padding: 0 22rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.picker-box {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
font-size: 32rpx;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
|
.arrow {
|
margin-left: 10rpx;
|
}
|
}
|
|
.rider {
|
flex-shrink: 0;
|
width: 131rpx;
|
height: auto;
|
}
|
|
.search-input {
|
width: 300rpx;
|
height: 50rpx;
|
}
|
|
.tool {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
.icon {
|
height: auto;
|
}
|
|
.search-icon {
|
width: 40rpx;
|
margin-right: 34rpx;
|
}
|
|
.message-icon {
|
width: 32rpx;
|
margin-right: 27rpx;
|
}
|
|
.qr-icon {
|
width: 37rpx;
|
}
|
}
|
}
|
|
.swiper-box {
|
margin: 50rpx auto 0;
|
width: 710rpx;
|
height: 253rpx;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
|
.banner {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.nav {
|
margin: 0rpx 0;
|
box-sizing: border-box;
|
padding: 0 10rpx;
|
|
&-item {
|
width: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
height: 130rpx;
|
|
&-img {
|
width: 80rpx;
|
height: 80rpx;
|
}
|
|
&-name {
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 400;
|
color: #585b61;
|
}
|
}
|
}
|
|
.notice-class {
|
background: #ffffff;
|
border-radius: 15px 15px 15px 15px;
|
margin: 0 20rpx;
|
padding: 20rpx 20rpx;
|
}
|
|
.notice-box {
|
display: flex;
|
align-items: center;
|
background: #ffffff;
|
border-radius: 20px 20px 20px 20px;
|
margin: 0 20rpx;
|
padding: 30rpx 20rpx;
|
|
.img {
|
width: 75rpx;
|
height: auto;
|
margin-right: 36rpx;
|
margin-left: 10rpx;
|
}
|
|
.notice-info {
|
flex: 1;
|
|
.notice-cell:first-of-type {
|
margin-bottom: 15rpx;
|
}
|
}
|
|
.notice-cell {
|
display: flex;
|
align-items: center;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #585b61;
|
|
.icon {
|
width: 63rpx;
|
margin-right: 18rpx;
|
}
|
|
.text {
|
flex: 1;
|
min-width: 0;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical;
|
}
|
}
|
}
|
|
.service-box {
|
background: #ffffff;
|
border-radius: 20px 20px 20px 20px;
|
margin: 30rpx 20rpx 30rpx;
|
padding: 0rpx 20rpx;
|
|
.service-item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
height: 120rpx;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #585b61;
|
|
.img {
|
width: 70rpx;
|
height: auto;
|
}
|
}
|
}
|
|
.news {
|
background: #ffffff;
|
border-radius: 20px 20px 20px 20px;
|
margin: 30rpx 20rpx 60rpx;
|
padding: 30rpx 20rpx;
|
|
.cell {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.ctitle {
|
font-size: 32rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #585b61;
|
}
|
|
.more {
|
display: flex;
|
align-items: center;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #a6abb5;
|
}
|
}
|
|
.news-list {
|
margin-top: 30rpx;
|
|
.news-item {
|
&:not(:last-of-type) {
|
padding: 0 0 30rpx;
|
margin-bottom: 30rpx;
|
border-bottom: 1px solid #eeeeee;
|
}
|
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.left {
|
flex: 1;
|
height: 160rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.info {
|
min-width: 0;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
|
font-size: 28rpx;
|
font-family: PingFang SC;
|
font-weight: 550;
|
color: #585b61;
|
line-height: 36rpx;
|
letter-spacing: 1px;
|
}
|
|
.date {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 21rpx;
|
height: 21rpx;
|
margin-right: 9rpx;
|
}
|
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #a6abb5;
|
|
|
.advisory-title-name {
|
font-size: 0.7rem;
|
letter-spacing: 1px;
|
flex: 1;
|
}
|
|
.advisory-title-time {
|
margin-right: 0.1rem;
|
font-size: 0.7rem;
|
}
|
}
|
}
|
|
.img {
|
flex-shrink: 0;
|
width: 232rpx;
|
height: 140rpx;
|
border-radius: 20rpx;
|
background-color: #82848a;
|
margin-left: 0.5rem;
|
}
|
}
|
}
|
}
|
</style>
|
