uniapp微信小程序场馆预约系统

视频演示

小程序毕业设计-体育场馆预约系统

1.效果展示

1.1前端展示

场馆预约平台用到的一些技术和开发环境的简介，用到开发技术主要包括：
（1）前端用到Element UI组件库和Vue框架
（2）后端用到Node
（3）包管理器Npm
（4）中间件Express
（5）数据库MySQL
系统开发环境主要是：前端开发工具Vscode，Hbuilder、操作系统Win10、CPU i5-9300H、内存8G。

1.2 后端展示

系统管理员拥有绝对的权利可以对系统的数据相应的操作。主要包括对用户模块、轮播图模块、预约场地模块、预约表模块和动态模块。

2.代码

<template>
	<view class="login">
		<view class="login-title">场馆预约</view>
		<view class="login-content">
			<el-form :model="form" :rules="rules" ref="form" label-width="40px" class="demo-ruleForm">
				<el-form-item prop="phone">
					<el-input v-model="form.phone" placeholder="用户名/手机号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="form.password" placeholder="密码" type="password"></el-input>
				</el-form-item>
			</el-form>
		</view>
		<view class="login-button"><el-button type="info" round @click="onsubmit">登录</el-button></view>
		<view class="login-botton">
			<view class="login-password" @click="findPassword">找回密码</view>
			<span>|</span>
			<view class="login-zhuce" @click="Registration">注册账号</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			form: {
				phone: '',
				password: ''
			},
			rules: {
				phone: [{ required: true, message: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		// ...mapMutations(['user_Login']),
		//登录
		onsubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					uni.request({
						url: '/api/login/loginUser',
						method: 'POST',
						data: this.form,
						success: res => {
							console.log(res.data.data.data);
							if (res.data.code == 200) {
								this.$store.commit("userLogin",res.data.data.data );
							 //页面跳转
								this.$router.push('/pages/index/index');

								uni.showToast({
									title: res.data.data.msg,
									icon: 'none'
							 });
							} else {
								uni.showToast({
									title: res.data.data.msg,
									icon: 'none'
								});
							}
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		Registration() {
			console.log('hah ');
			uni.navigateTo({
				url: '../../pages/login/registration'
			});
		},
		findPassword() {
			console.log('hah ');
			this.$router.push('/pages/login/findPassword');
		}
	}
};
</script>

<style lang="less">
.login {
	 background-image: linear-gradient(120deg, #05ee28, #6a3dad);
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #464646;
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	height: 1535rpx;
	opacity: 0.8;
	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: center;
		font-weight: 700;
		font-size: 40rpx;
		color: #fff;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}
	.demo-ruleForm {
		width: 90%;
		height: 60rpx;
	}
	/deep/.el-input__inner {
		height: 100rpx;
		border-radius: 50rpx;
		padding-left: 40rpx;
	}
	.login-botton {
	}
	/deep/.el-button--info {
		width: 80%;
		margin-left: 12%;
		margin-top: 260rpx;
		height: 80rpx;
	}
	.login-botton {
		display: flex;
		margin-top: 100rpx;
		justify-content: center;
		.login-password {
			padding-right: 20rpx;
			color: #fff;
		}
		.login-zhuce {
			padding-left: 20rpx;
			color: #fff;
		}
	}
}
</style>

<template>
	<view class="content">
		<view v-for="item in newList" :key="item.id">
			<view class="title">{{ item.name }}</view>
			<view class="time">{{item.uploadTime}}</view>
			<rich-text :nodes="item.desc" class="text"></rich-text>
			<view class="img" @click="previewImg(item.imgUrl)"><img :src="item.imgUrl" alt="" /></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			newList: [],
		};
	},
	onLoad(res) {
		uni.showLoading({
			title: '加载中',
			mask:true
		});
		uni.request({
			url: '/api/index/searchNews?id=' + res.id,
			method: 'POST',
			success: res => {
				console.log(res.data);
				this.newList = res.data;
				uni.setNavigationBarTitle({
					title:this.newList[0].name
				})
				setTimeout(function () {
					uni.hideLoading();
				}, 200);
			},
			fail: () => {},
			complete: () => {}
		});
	},
	methods: {
		previewImg(urlimg) {
			let _this = this;
			let imgsArray = [];
			imgsArray[0] = urlimg;
			uni.previewImage({
				current: 0,
				urls: imgsArray
			});
		},
	}
};
</script>

<style lang="less">
page {
	background-color: #efefef;
}
.content {
	margin-top: 20rpx;
	border-radius: 20rpx;
	margin-left: 2%;
	width: 90%;
	background-color: white;
	padding: 10rpx 20rpx;
	.title {
		padding: 10rpx 0;
		font-size: 35rpx;
		font-weight: 700;
	}
	.time {
		padding: 10rpx 0;
		font-size: 20rpx;
		color: gray;
	}
	.item {
		font-size: 30rpx;
		color: gray;
		text-indent: 2em;
		text-align: justify;
		line-height: 50rpx;
	}
	.img img {
		width: 100%;
		border-radius: 20rpx;
	}
	.text{
		text-indent: 2em;
		letter-spacing: 2rpx;
		line-height: 55rpx;
		color: #666;
	}
}
</style>

3.获取源码

加 code8896