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="scanCode()">&#xe60d;</view>
			</view>
			<!--轮播图-->
			<u-swiper circular :radius="5" :indicator="true" keyName="image" :list="bannerList" :height="140" 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">
							<u-icon :name="item.icon" color="white" size="25" :custom-style="{ margin: '0 auto' }" class="ioc"></u-icon>
							<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">更多</text>
					<view class="clear"></view>
				</view>
				<view class="list">
					<view class="news_item" v-for="(item, index) in newsList" :key="index" @click="go('/pages/news/detail?id=' + item.id)">
						<image src="../../static/news.jpg" mode="aspectFill" class="img"></image>
						<view class="con">
							<view class="title ellip">{{ item.title }}</view>
							<view class="date">
								<text class="icon">&#xe65c;</text>
								<text>{{ item.readCount }}</text>
							</view>
							<text class="releaseTime">{{ item.releaseTime }}</text>
						</view>
						<view class="clear"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			bannerList: [],
			newsList: [],
			noticeList: ['边民互市贸易APP上线了', '关于边民互市贸易开通注意事项'],
			roleMenu: [],
			menuList: []
		};
	},
	onLoad() {
		this.getBannerList();
		this.getNewsList();
		this.getRoleMenu();
		//this.getMenu();
	},
	methods: {
		getBannerList() {
			this.$api.getBannerList().then(resp => {
				this.bannerList = resp.data;
			});
		},
		getRoleMenu() {
			let menu = uni.getStorageSync('menu');
			this.$api.getRoleMenu().then(res => {
				res.data.map((item1, index) => {
					menu.map((item2, index1) => {
						if (item1.appRoleId == item2) {
							this.roleMenu.push(item1.appMenuId);
						}
					});
				});
				this.getMenu();
			});
		},
		getMenu() {
			this.$api.getMenu().then(res => {
				this.roleMenu.map((item2, index1) => {
					res.data.map((item1, index) => {
						if (parseInt(item1.id) == parseInt(item2)) {
							this.menuList.push(item1);
						}
					});
					this.$forceUpdate();
				});
			});
		},
		getNewsList() {
			this.$api
				.getNewestList({
					limit: 4
				})
				.then(resp => {
					this.newsList = resp.data;
				});
		},
		navTo(path) {
			this.$common.to(path);
		}
	}
};
</script>
<style lang="scss">
.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;
		}
	}
	.uni-swiper {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.notice {
		margin-top: 10px;
		border-radius: 5px !important;
		overflow: hidden;
	}
	.menu {
		background-color: white;
		padding-top: 3px;
		margin-top: 10px;
		padding-bottom: 7px;
		border-radius: 5px;
		.msn {
			float: left;
			width: 25%;
			text-align: center;
			.out {
				padding: 3px;
				.int {
					padding: 5px;
					animation: bounceIn 1s;
					.ioc {
						width: 45px;
						height: 45px;
						background-color: #1c9dff;
						border-radius: 50%;
						margin: 0 auto;
						line-height: 46px;
						.icon {
							font-size: 23px;
							color: white;
						}
					}
					.tit {
						font-size: 14px;
						margin-top: 5px;
						color: $font-c;
					}
				}
			}
		}
	}
	.news {
		background-color: white;
		margin-top: 10px;
		padding: 10px;
	}
}
</style>