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>更多</text>
						<text class="icon">&#xe8f2;</text>
					</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="item.cover" mode="aspectFill" class="img" v-if="item.cover"></image>
						<image src="../../static/tp.jpg" mode="aspectFill" class="img" v-else></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">{{ util.forDate(item.releaseTime,'yyyy-MM-dd HH:mm') }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close()" round="15" mode="center" :closeOnClickOverlay="false"
			:customStyle="{ width: '90%' }">
			<view class="ppopup">
				<u-divider text="交易订单提醒" textSize="16"></u-divider>
				<view class="contents">
					<view class="item omit">
						<text class="label">商品名称:</text>
						<text class="desc">{{ order.goodsNames }}</text>
					</view>
					<view class="item omit">
						<text class="label">数量:</text>
						<text class="desc">{{ order.totalWeight }}</text>
					</view>
					<view class="item omit">
						<text class="label">金额:</text>
						<text class="desc">¥ {{ order.totalPrice }}</text>
					</view>
				</view>
				<button class="btn" @click="confirm()">去处理</button>
			</view>
		</u-popup>
		<u-popup :show="faceRegister" @close="close()" round="15" mode="center" :closeOnClickOverlay="false"
			:customStyle="{ width: '90%' }">
			<view class="reflush" @click="checkFace">刷新</view>
			<view class="ppopup">
				<u-divider text="人脸录入" textSize="16"></u-divider>
				<view class="contents">
					<view class="item omit">
						<text class="label">边民信息:</text>
						<text class="desc">{{ user.name }}({{ user.phone }})</text>
					</view>

					<view style="text-indent: 2rem;line-height: 60rpx;">
						根据相关规定，边民进行互市贸易需要确保为本人实际操作，为了确保后续交易的合规合法话，需要您先录入人脸！</view>
				</view>
				<button class="btn" @click="go('/pages/face/faceRegister')">马上录入</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				bannerList: [],
				newsList: [],
				noticeList: ['边民互市贸易APP上线了', '关于边民互市贸易开通注意事项'],
				roleMenu: [],
				menuList: [],
				count: 0,
				show: false,
				order: {},
				user: {},
				faceRegister: false
			};
		},
		onLoad() {
			let user = this.getUser();
			this.user = user;
			this.getBannerList();
			this.getNewsList();
			this.getMenu();
			uni.$on('getMenu', res => {
				this.getMenu();
			});
		},
		onShow() {
			this.checkFace()
			this.keyword = '';
			this.getRead();
			this.getOrderConfirm();
		},
		methods: {
			checkFace() {
				let user = this.getUser();
				console.log(user);
				if ((user.userType == 1 || user.userType == 2) && user.face == 0) {
					this.faceRegister = true;
					return;
				}
				this.faceRegister=false;
			},
			go(url) {
				uni.navigateTo({
					url: url
				});
			},
			//获取待处理的订单弹出
			getOrderConfirm() {
				let user = this.getUser();
				if (user.userType > 2) {
					return;
				}
				this.http.request({
					url: '/level-one-server/app/TbOrder/getNoConfirmOrder',
					loading: 'false',
					success: res => {
						if (res.data.data) {
							this.order = res.data.data;
							this.show = true;
						}
					}
				});
			},
			confirm() {
				if (this.order.declareType == '1') {
					uni.navigateTo({
						url: '/pages/market/one/leader/handle?orderId=' + this.order.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/market/one/leader/handleThree?orderId=' + this.order.id +
							'&peopleConfirmStatus=' + this.order.peopleConfirmStatus + '&cooperEntrustStatus=' +
							this.order.cooperEntrustStatus + '&applyConfirmStatus=' + this.order.applyConfirmStatus
					});
				}
				this.show = false;
			},
			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
							});
						} else {
							this.count = 0;
						}
					}
				});
			},
			getBannerList() {
				this.http.request({
					url: '/level-one-server/app/TbBanner/getList',
					success: res => {
						this.bannerList = res.data.data;
					}
				});
			},
			getMenu() {
				this.menuList = [];
				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);
								}
							});
						});
						this.menuList.sort((a, b) => a.sort - b.sort);
					}
				});
			},
			getNewsList() {
				this.http.request({
					url: '/level-one-server/app/TbPortNews/getNewestList',
					data: {
						limit: 3
					},
					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) {
				//收购商需要认证才给访问
				if (this.getUser().userType == 3 && !this.hasAuth()) {
					uni.navigateTo({
						url: '/pages/authentication/index'
					});
					return;
				}
				uni.navigateTo({
					url: url,
					fail: res => {
						console.log('zx:' + JSON.stringify(res));
						uni.showModal({
							content: '功能还在开发中',
							showCancel: false
						});
					}
				});
			},
			go(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.getMenu();
			}, 1000);
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $pg;
	}

	.top {
		width: 100%;
		position: relative;
	}

	.cmain {
		padding: 10px 15px 10px 15px;
		margin-top: -183px;
		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;
		}
	}

	.reflush {
		width: 60rpx;
		height: 60rpx;
		float: right;
		position: absolute;
		right: 20rpx;
		padding: 20rpx;
		font-size: 24rpx;
	}

	.ppopup {
		.item {
			padding: 5px 0px 5px 0px;
			color: $font-c;

			.label {
				width: 70px;
				float: left;
				text-align: left;
				padding-right: 10px;
				font-weight: bold;
			}
		}
	}
</style>