首页登录ui，高速列表接口

pages.json

@@ -12,21 +12,28 @@
 		}
 	},
 	"pages": [
+		{
+			"path": "pages/home/index",
+			"style": {
+				"navigationBarTitleText": "首页"
+			}
+		},
 		{
 			"path": "pages/login/login",
 			"style": {
-				"navigationBarTitleText": "登录",
+				"navigationBarTitleText": "登录"
-				"app-plus": {
-					"bounce": "vertical",
-					"titleNView": {
-						"buttons": [{
-							"text": "\ue534",
-							"fontSrc": "/static/uni.ttf",
-							"fontSize": "22px",
-							"color": "#FFFFFF"
-						}]
 			}
+		},
+		{
+			"path": "pages/highWay/runData/list",
+			"style": {
+				"navigationBarTitleText": "高速运行数据"
 			}
+		},
+		{
+			"path": "pages/highWay/runStatusData/list",
+			"style": {
+				"navigationBarTitleText": "高速运行情况"
 			}
 		},
 		// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

pages/highWay/runData/form.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="login_form_warp">
+		<view class="login_form_item">
+			<input class="login_form_input" v-model="form.username" placeholder="请输入账号" maxlength="20" />
+		</view>
+		<view class="login_form_item">
+			<input class="login_form_input" v-model="form.password" type="password" placeholder="请输入密码" maxlength="20" />
+		</view>
+		<view class="login_form_item">
+			<input class="login_form_input" v-model="form.verCode" placeholder="请输入图形验证码" maxlength="20" />
+			<image :src="codeImg" @click="getVerCode" style="width: 100upx; height: 40upx;"></image>
+		</view>
+		<button type="primary" class="page-body-button" @click="doLogin">登录</button>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					username: '',
+					password: '',
+					verCode: '',
+					vercodeType: 5
+				}, //登录form
+				codeImg: '', //图形验证码
+			}
+		},
+		onLoad() {
+			this.getVerCode();
+		},
+		methods: {
+			//获取图形验证码
+			getVerCode() {
+				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + new Date(), {}, 'GET').then(res => {
+					if(res.code == 200) {
+						this.codeImg = res.data.img;
+					}
+				}).catch(() => {
+					console.log('vercode err')
+				})
+			},
+			//登录
+			doLogin() {
+				if(this.form.username == '' || this.form.password == '') {
+					uni.showToast({
+						title: '用户名密码不能为空',
+						icon: 'none'
+					})
+					return;
+				} else if(this.form.verCode == '') {
+					uni.showToast({
+						title: '验证码不能为空',
+						icon: 'none'
+					})
+					return;
+				}
+				uni.showLoading({
+					title: '登录中...',
+					mask: true
+				})
+				this.$request1(getApp().globalData.baseUrl + '/api/login/auth', this.form, 'POST').then(res => {
+					uni.hideLoading();
+					if(res.code == 200) {
+						uni.setStorageSync('satoken', res.data.satoken);
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login_form_warp{
+		.login_form_item {
+			display: flex;
+			align-items: center;
+			.login_form_input {
+				padding: 8upx 10upx;
+			}
+		}
+	}
+	button {
+		background-color: #007aff;
+		color: #ffffff;
+	}
+</style>

pages/highWay/runData/list.vue

@@ -0,0 +1,92 @@
+<template>
+	<view>
+		<view class="text" v-for="(item,index) in data" :key="index">
+			<view>
+				<view>{{item.organizationName}}</view>
+				<view>{{item.statDate}}{{item.statPeriod}}</view>
+			</view>
+		</view>
+		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore" :contentText="contentText"></uni-load-more>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				data: [],
+				current: 0,
+				size: 10,
+				hasMore: true,
+				status: '',
+				query: {
+					statDateStart: '',
+					statDateEnd: '',
+					statPeriod: ''
+				},
+				contentText: {
+					contentdown: "点击查看更多",
+					contentrefresh: "正在加载...",
+					contentnomore: "没有更多数据了",
+				},
+			}
+		},
+		onLoad() {
+			this.loadMore();
+		},
+		onUnload() {
+			this.hasMore = true;
+			this.data = [];
+		},
+		onPullDownRefresh() {
+			console.log('onPullDownRefresh');
+			this.data = [];
+			this.current = 0;
+			this.hasMore = true;
+			this.loadMore();
+		},
+		methods: {
+			loadMore() {
+				if (this.hasMore) {
+					this.current = this.current + 1;
+					this.status = 'loading';
+					let params = '';
+					Object.keys(this.query).map(key => {
+						params = params + '&' + key + '=' + this.query[key]
+					})
+					this.$request(getApp().globalData.baseUrl + '/api/biz/highwayParentDataController/list?page=' + this.current +
+						'&pageSize=' + this.size + '&_t=' + Date.parse(new Date()) + params, {}, 'GET').then(res => {
+						if (res.code == 200) {
+							this.data = this.data.concat(res.data.list);
+							if (res.data.list.length == 0 || res.data.totalCount < this.size) {
+								this.hasMore = false;
+								this.status = 'nomore';
+							} else {
+								this.status = 'more';
+							}
+							uni.stopPullDownRefresh();
+						} else {
+							this.status = 'more';
+							uni.stopPullDownRefresh();
+						}
+					}).catch(() => {
+						this.status = 'more';
+						uni.stopPullDownRefresh();
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.text {
+		margin: 16rpx 0;
+		width: 100%;
+		background-color: #fff;
+		height: 120rpx;
+		line-height: 120rpx;
+		text-align: center;
+		color: #555;
+		border-radius: 8rpx;
+	}
+</style>

pages/highWay/runStatusData/list.vue

@@ -0,0 +1,92 @@
+<template>
+	<view>
+		<view class="text" v-for="(item,index) in data" :key="index">
+			<view>
+				<view>{{item.organizationName}}</view>
+				<view>{{item.statDate}}{{item.statPeriod}}</view>
+			</view>
+		</view>
+		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore" :contentText="contentText"></uni-load-more>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				data: [],
+				current: 0,
+				size: 10,
+				hasMore: true,
+				status: '',
+				query: {
+					statDateStart: '',
+					statDateEnd: '',
+					statPeriod: ''
+				},
+				contentText: {
+					contentdown: "点击查看更多",
+					contentrefresh: "正在加载...",
+					contentnomore: "没有更多数据了",
+				},
+			}
+		},
+		onLoad() {
+			this.loadMore();
+		},
+		onUnload() {
+			this.hasMore = true;
+			this.data = [];
+		},
+		onPullDownRefresh() {
+			console.log('onPullDownRefresh');
+			this.data = [];
+			this.current = 0;
+			this.hasMore = true;
+			this.loadMore();
+		},
+		methods: {
+			loadMore() {
+				if (this.hasMore) {
+					this.current = this.current + 1;
+					this.status = 'loading';
+					let params = '';
+					Object.keys(this.query).map(key => {
+						params = params + '&' + key + '=' + this.query[key]
+					})
+					this.$request(getApp().globalData.baseUrl + '/api/biz/highSpeedOperationController/list?page=' + this.current +
+						'&pageSize=' + this.size + '&_t=' + Date.parse(new Date()) + params, {}, 'GET').then(res => {
+						if (res.code == 200) {
+							this.data = this.data.concat(res.data.list);
+							if (res.data.list.length == 0 || res.data.totalCount < this.size) {
+								this.hasMore = false;
+								this.status = 'nomore';
+							} else {
+								this.status = 'more';
+							}
+							uni.stopPullDownRefresh();
+						} else {
+							this.status = 'more';
+							uni.stopPullDownRefresh();
+						}
+					}).catch(() => {
+						this.status = 'more';
+						uni.stopPullDownRefresh();
+					})
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.text {
+		margin: 16rpx 0;
+		width: 100%;
+		background-color: #fff;
+		height: 120rpx;
+		line-height: 120rpx;
+		text-align: center;
+		color: #555;
+		border-radius: 8rpx;
+	}
+</style>

pages/home/index.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="home_warp">
+		<view class="home_box">
+			<view class="home_item" v-for="(item, index) in routeData" :index="index" :key="index">
+				<image :src="item.img" class="img"></image>
+				<view class="txt">{{item.title}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				routeData: [{
+						name: "highway",
+						title: "高速",
+						img: '/static/image/highway.png',
+						children: [{
+							name: 'runData',
+							title: '高速运行数据'
+						}, {
+							name: 'runStatusData',
+							title: '高速运行情况'
+						}]
+					},
+					{
+						name: "roadTransport",
+						title: "道路运输",
+						img: '/static/image/roadTransport.png',
+						children: [{
+							name: 'transportData',
+							title: '道路运输数据'
+						}, {
+							name: 'dataSubmission',
+							title: '综合运输数据报送'
+						}, {
+							name: 'quantitySent',
+							title: '道路运输发送量'
+						}]
+					},
+					{
+						name: "railway",
+						title: "铁路",
+						img: '/static/image/railway.png',
+						children: [{
+							name: 'railwayRunData',
+							title: '铁路运行数据'
+						}, {
+							name: 'runStatus',
+							title: '铁路运行情况'
+						}]
+					},
+					{
+						name: "bus",
+						title: "公交",
+						img: '/static/image/bus.png',
+						children: [{
+							name: 'busDataInfo',
+							title: '公交投入数据'
+						}]
+					},
+					{
+						name: "water",
+						title: "水运",
+						img: '/static/image/water.png',
+						children: [{
+							name: 'TransportData',
+							title: '水运运输数据'
+						}, {
+							name: 'transportation',
+							title: '水运运输情况'
+						}, {
+							name: 'waterWay',
+							title: '水路(陆岛)'
+						}]
+					},
+					{
+						name: "portShipping",
+						title: "港口",
+						img: '/static/image/portShipping.png',
+						children: [{
+							name: 'pilotStation',
+							title: '引航站'
+						}]
+					},
+					{
+						name: "airport",
+						title: "机场",
+						img: '/static/image/airport.png',
+						children: [{
+							name: 'runData',
+							title: '机场运行数据'
+						}, {
+							name: 'runStatus',
+							title: '机场运行情况'
+						}]
+					},
+					{
+						name: "metro",
+						title: "地铁",
+						img: '/static/image/metro.png',
+						children: [{
+							name: 'pilotStation',
+							title: '引航站'
+						}]
+					},
+				], //路由权限
+			}
+		},
+		onLoad() {
+			if (uni.getStorageSync('satoken')) {
+
+			} else {
+				// uni.navigateTo({
+				// 	url: '/pages/login/login'
+				// })
+			}
+		},
+		methods: {
+			//获取图形验证码
+			getVerCode() {
+				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + Date.parse(new Date()), {},
+					'GET').then(res => {
+					if (res.code == 200) {
+						this.codeImg = res.data.img;
+					}
+				}).catch(() => {
+					console.log('vercode err')
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.home_warp {
+		height: calc(100vh - 60rpx);
+		padding: 30rpx 50rpx;
+		background-color: #fff;
+
+		.home_box {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+
+		.home_item {
+			width: 300rpx;
+			height: 300rpx;
+			text-align: center;
+			background: #FFFFFF;
+			box-shadow: 4rpx 10rpx 30rpx 1rpx rgba(0, 0, 0, 0.06);
+			border-radius: 20rpx;
+
+			.img {
+				width: 128rpx;
+				height: 128rpx;
+				margin: 50rpx auto 12rpx;
+			}
+
+			.txt {
+				color: #333;
+				line-height: 40rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC-Bold, PingFang SC;
+				font-weight: bold;
+			}
+		}
+	}
+
+	button {
+		background-color: #007aff;
+		color: #ffffff;
+	}
+</style>

pages/login/login.vue

@@ -1,17 +1,22 @@
 <template>
+	<view class="page">
 		<view class="login_form_warp">
 			<view class="login_form_item">
+				<uni-icons type="person" size="30" color="#979797"></uni-icons>
 				<input class="login_form_input" v-model="form.username" placeholder="请输入账号" maxlength="20" />
 			</view>
 			<view class="login_form_item">
+				<uni-icons type="locked" size="30" color="#979797"></uni-icons>
 				<input class="login_form_input" v-model="form.password" type="password" placeholder="请输入密码" maxlength="20" />
 			</view>
 			<view class="login_form_item">
+				<text class="vercode_label">验证码：</text>
 				<input class="login_form_input" v-model="form.verCode" placeholder="请输入图形验证码" maxlength="20" />
-			<image :src="codeImg" @click="getVerCode" style="width: 100upx; height: 40upx;"></image>
+				<image :src="codeImg" @click="getVerCode" style="width: 244rpx; height:59rupx;"></image>
 			</view>
 			<button type="primary" class="page-body-button" @click="doLogin">登录</button>
 		</view>
+	</view>
 </template>
 <script>
 	export default {
@@ -27,12 +32,12 @@
 			}
 		},
 		onLoad() {
-			this.getVerCode();
+			// this.getVerCode();
 		},
 		methods: {
 			//获取图形验证码
 			getVerCode() {
-				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + new Date(), {}, 'GET').then(res => {
+				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + Date.parse(new Date()), {}, 'GET').then(res => {
 					if(res.code == 200) {
 						this.codeImg = res.data.img;
 					}
@@ -73,17 +78,58 @@
 </script>
 
 <style lang="scss" scoped>
+	.page{
+		position: relative;
+		height: vh;
+		background: #2D8CF0;
+	}
 	.login_form_warp{
+		position: absolute;
+		left: 0;
+		right:0;
+		bottom:0;
+		background-color: #fff;
+		box-shadow: 0rpx -25rpx 46rpx 1rpx rgba(0,0,0,0.13);
+		border-radius: 40rpx 40rpx 0rpx 0rpx;
+		padding: 50rpx;
+		.login_title{
+			color: #333;
+			line-height: 59rpx;
+			font-size: 42rpx;
+			font-family: PingFang SC-Bold, PingFang SC;
+			font-weight: bold;
+		}
+		.sub_title{
+			color: #666;
+			line-height: 33rpx;
+			font-size: 24rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			margin: 10rpx 0 60rpx;
+		}
 		.login_form_item {
 			display: flex;
 			align-items: center;
+			background: #F6F6F6;
+			border-radius: 10rpx;
+			padding: 16rpx 20rpx 15rpx;
+			margin-bottom: 50rpx;
+			.vercode_label{
+				color: #333;
+				line-height: 59rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				font-weight: 400;
+			}
 			.login_form_input {
-				padding: 8upx 10upx;
+				padding: 0 10rpx;
+				line-height: 59rpx;
 			}
 		}
 	}
 	button {
 		background-color: #007aff;
 		color: #ffffff;
+		margin: 48rpx 50rpx 10rpx;
 	}
 </style>

util/request.js

@@ -3,10 +3,9 @@ const request = (url, data, method = 'GET') => {
 		let header = {
 			"Content-Type": "application/json"
 		}
-		const res = uni.getStorageSync('storage_key');
+		const satoken = uni.getStorageSync('satoken');
-		const token = res.token
+		if (satoken) {
-		if (token) {
+			header['satoken'] = satoken;
-			header['Authorization'] = token
 		}
 		console.log(url)
 		uni.request({
@@ -26,7 +25,7 @@ const request = (url, data, method = 'GET') => {
 					} else {
 						resolve(res.data)
 						uni.showToast({
-							title: res.data.message,
+							title: res.data.msg,
 							icon: "none"
 						})
 					}