market-app-ui/pages/index/index.vue

<template>
	<view>
		<image src="../../static/images/my.png" mode="widthFix" class="top"></image>
		<view class="cmain">
			<view class="vsearch">
				<view class="vse">
					<u-search placeholder="搜索资讯" v-model="keyword" @search="search" :actionStyle="{ color: 'white' }" :animation="true" actionText="取消"></u-search>
				</view>
				<view class="icon" @click="message()">&#xe60d;</view>
				<view class="bage" v-if="count > 0"></view>
			</view>
			<!--轮播图-->
			<u-swiper circular :radius="5" :indicator="true" keyName="image" :list="bannerList" :height="110" class="uni-swiper" @click="click"></u-swiper>
			<!--通知公告-->
			<view class="notice">
				<u-notice-bar color="#848484" :text="noticeList" :step="true" direction="column" mode="link" bgColor="white" speed="300" url="/pages/notice/index"></u-notice-bar>
			</view>
			<!--菜单-->
			<view class="menu">
				<view class="msn" v-for="(item, index) in menuList" :key="index" @click="navTo(item.path)">
					<view class="out">
						<view class="int">
							<image :src="item.icon" mode="widthFix" style="width: 54px; height: 54px"></image>
							<view class="tit">{{ item.menuName }}</view>
						</view>
					</view>
				</view>
				<view class="clear"></view>
			</view>
			<!--最新资讯-->
			<view class="news">
				<view class="vlabel">
					<view class="tag"></view>
					<text class="title">最新资讯</text>
					<text class="more" @click="navTo('/pages/news/list')">更多</text>
				</view>
				<view class="list animated fadeInDown">
					<view class="news_item" v-for="(item, index) in newsList" :key="index" @click="go('/pages/news/detail?id=' + item.id)">
						<image src="../../static/tp.jpg" mode="aspectFill" class="img"></image>
						<view class="con">
							<view class="title ellip">{{ item.title }}</view>
							<view class="source omit">
								<text class="icon">&#xe639;</text>
								<text>{{ item.readCount }}</text>
							</view>
							<view class="releaseTime">{{ item.releaseTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			bannerList: [],
			newsList: [],
			noticeList: ['边民互市贸易APP上线了', '关于边民互市贸易开通注意事项'],
			roleMenu: [],
			menuList: [],
			count: 0
		};
	},
	onLoad() {
		this.getBannerList();
		this.getNewsList();
		this.getMenu();
	},
	onShow() {
		this.keyword = '';
		this.getRead();
	},
	methods: {
		getRead() {
			this.http.request({
				url: '/sp-admin/app/TbMessage/getRead',
				loading: 'false',
				success: res => {
					if (res.data.data.count > 0) {
						this.count = res.data.data.count;
						uni.setTabBarBadge({ index: 1, text: res.data.data.count });
					}
				}
			});
		},
		getBannerList() {
			this.http.request({
				url: '/level-one-server/app/TbBanner/getList',
				success: res => {
					this.bannerList = res.data.data;
				}
			});
		},
		getMenu() {
			let menu = uni.getStorageSync('menu');
			this.http.request({
				url: '/sp-admin/app/AppMenu/getList',
				success: res => {
					let data = res.data.data;
					menu.map((item2, index1) => {
						data.map((item1, index) => {
							if (parseInt(item1.id) == parseInt(item2)) {
								this.menuList.push(item1);
							}
						});
					});
				}
			});
		},
		getNewsList() {
			this.http.request({
				url: '/level-one-server/app/TbPortNews/getNewestList',
				data: { limit: 5 },
				success: res => {
					this.newsList = res.data.data;
				}
			});
		},
		//点击轮播图
		click(index) {
			uni.navigateTo({ url: '/pages/news/detail?id=8' });
		},
		message() {
			uni.switchTab({ url: '/pages/message/message' });
		},
		search() {
			uni.navigateTo({ url: '/pages/news/list?keyword=' + this.keyword });
		},
		navTo(url) {
			uni.navigateTo({
				url: url,
				fail: res => {
					console.log('zx:' + JSON.stringify(res));
					uni.showModal({ content: '功能还在开发中', showCancel: false });
				}
			});
		},
		go(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $pg;
}
.top {
	width: 100%;
	position: relative;
}
.cmain {
	padding: 10px 15px 10px 15px;
	margin-top: -193px;
	position: relative;
	.vsearch {
		margin-bottom: 13px;
		position: relative;
		.vse {
			width: 82% !important;
		}
		.icon {
			position: absolute;
			right: 0px;
			top: 0px;
			color: white;
			font-size: 25px;
			top: 5px;
		}
		.bage {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #f44336;
			top: 0px;
			right: 0px;
			position: absolute;
		}
	}
	.uni-swiper {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.notice {
		margin-top: 10px;
		border-radius: 5px !important;
		overflow: hidden;
	}
	.news {
		margin-top: 15px;
	}
}
</style>