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

文章目录

- uniapp微信小程序场馆预约系统
- - 1.效果展示
  - - 1.1前端展示
    - 1.2 后端展示
  - 2.部分代码
  - 3.获取源码
vx ==code8896==

1.效果展示

1.1前端展示

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.获取源码

vx code8896

uniapp微信小程序场馆预约系统相关推荐

会议室预订小程序,共享会议室小程序,微信小程序会议室预约系统毕设作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序会议室预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加会议室信息.管理用户信息.管理预约信 ...
与微信小程序专家预约系统有关的国内外研究情况
从近年来的研究可以看出,与微信小程序专家预约系统有关的国内研究主要集中在用户体验.专家预约服务的质量及服务费用等方面:而国外的相关研究则集中在基于智能技术的专家预约服务的构建.智能服务机器人的开发等方 ...
JAVA微信小程序浴室预约系统毕业设计开题报告
本文给出的java微信小程序系统毕业设计开题报告,仅供参考!(具体模板和要求按照自己学校给的要求修改) 选题目的和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序浴室预约系统,前台用户使用 ...
微信小程序挂号预约系统+后台管理系统
<微信小程序挂号预约系统+后台管理系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的挂号预约系统前台和Java做的后台管理系统: 微信小 ...
微信小程序家政预约系统+后台管理系统
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称微信小程序家政预约系统+后台管理系统视频效果 https://www.bili ...
教室预约微信小程序,教室预约系统小程序,教室预约小程序系统毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序实验室预约系统,前台用户使用小程序,后台管理使用Java+Mysql开发,后台使用了springboot框架:通过后台添加实验室类 ...
微信小程序驾校预约系统驾照考试系统Android hbuilderx App毕业设计
本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用Java+VUE 微信小程序--前台涉及技术:WXML 和 WXSS.JavaScript.uniapp Java ...
微信小程序挂号预约系统-JAVA【数据库设计、源码、开题报告】
1. 概述 1.1 选题背景随着"互联网+"的兴起和信息化的不断发展,多种传统行业被冲击,不得不展现出新的发展形态,互联网与各种行业甚至物品联合,使得生活更加方便有效,资源配置的 ...
如何开发微信小程序|基于微信小程序就诊预约系统的设计与实现
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...

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

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

文章目录

1.效果展示

1.1前端展示

1.2 后端展示

2.部分代码

3.获取源码

vx code8896

uniapp微信小程序场馆预约系统相关推荐

最新文章

热门文章