基于JAVA SpringBoot和UniAPP的宠物服务预约小程序

随着社会的发展和人们生活水平的提高，特别是近年来，宠物快速进入人们的家中，成为人们生活中重要的娱乐内容之一，过去宠物只是贵族的娱乐，至今宠物在中国作为一种生活方式得到了广泛的认可，随着人们精神文明的提高，越来越多的宠物。这个和我们成了好朋友。但我们该如何与他们相处和保护他们？毕竟，他们和人类很不一样，我们应该给他们什么？我们应该给他们吃什么？大部分人不知道。他们只是知道要像照顾孩子一样照顾他们。但他们不说话。甚至有些人不把他们当作孩子来照顾！因此，有关宠物服务的信息成为了重要的话题。宠物是我们友好的朋友，是人类幸福健康的重要源泉。

养宠物可以让人们的生活更加丰富多彩和幸福，同时和宠物一起运动对身体非常好，可以有效降低体内的血压和血脂，在当今竞争日益激烈的社会，宠物可以提供良好的精神支持。尤其是在我们受挫的时候。通过与宠物的沟通，我们可以调节情绪，管理心理健康，缓解生活中遇到的各种压力，提高工作效率，另一方面，饲养可爱的宠物可以培养孩子的责任感、爱心和社交能力，当我们的孩子和狗玩得开心的时候，狗可以传递很多正能量，最重要的是，养宠物可以保护我们家庭的财产，保护我们的家庭免受盗窃，让我们整个家庭都有安全感，宠物也可以给我们和后代带来无限的快乐，成为快乐和幸福的源泉，生活。帮助人们积极外出促进体育锻炼，为我们提供了很多与他人交流的机会。现在宠物主人的数量正在迅速增加，越来越多的宠物信息网站应运而生。

实现的功能：

本系统的功能应该包括：用户登录和注册、首页展示、上门服务、宠物社区、后台管理（PC浏览器后台）等功能。

注册、登录：通过获取用户微信昵称,微信账号进行登录。系统允许匿名访问，匿名访问只能浏览界面，不能预约服务；

首页展示：首页主要有养宠宝典可进行信息浏览，收藏。宠物领养功能和宠物寄养功能，可进行详细咨询；

上门服务：为顾客的爱宠提供，提供上门喂养，遛宠服务，专业洗护，基础医疗咨询等4个模块的功能；

宠物社区：主要是可上传宠物照片，分享宠物趣事等；

后台管理：支持管理员对服务预约管理对订单进行添加，删除，修改。宠物社区管理对用户发布的趣事，对违规的信息进行删除。

用到的技术：

后端：java语言的SpringBoot框架、MySql数据库、Maven依赖管理等；

前端：Vue.js语法的UniApp框架。

部分代码展示

<!--  {{city.title}}  --><!--  --> <!-- <!--  0" :list="notices" class="rf-skeleton" @navTo="navTo('/pages/index/notice/notice')"> --><!--  -->{{ item.name}}{{item.title}}{{item2}}<!-- 悬赏￥{{item.money}} -->{{item.content}}{{item.createTime}}<!-- {{item.view}}查看{{item.share}}转发 --><!--  -->{{ config.copyright_desc }}{{ config.web_site_icp }}<!--  --><!--  -->import rfSwipeDot from '@/components/rf-swipe-dot';import rfSwiperSlide from '@/components/rf-swiper-slide';import { mapMutations } from 'vuex';import PetIndexMescrollItem from '../pet/mescroll-item/pet-index-mescroll-item';// import { indexList } from '@/api/product';// import { petIndex, petList } from '@/api/pet';import appRequest from "@/common/appRequestUrl.js";// const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');export default {components: {rfSwipeDot,rfSwiperSlide,PetIndexMescrollItem,},data() {return {userInfo:{},items:[],$mData: this.$mData,appName: this.$mSettingConfig.appName,path: '/pages/index/index',title: this.$mSettingConfig.appName + '',qqmapsdk: null,city: { id: 0,title: '全国'},current: 0, // 轮播图indexadvs: {index_top: []}, // 广告图notices: [],channels: [{key: 'find',icon: 'pet',name: '领养寄养',route: '/pages/pet/list',type: 'switchTab'},{key: 'mall',icon: 'ask',name: '养宠宝典',route: '/pages/pet/ask',type: 'switchTab'},{key: 'blocklist',icon: 'forum',name: '分享社区',route: '/pages/pet/forum',type: 'push'},],tabsCurrent: 0, // tabs组件的current值，表示当前活动的tab选项swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的config: {}, // 配置loading: true,scrollTop: 0,kefuShow: true,loadingType: 'more',newsBg: this.$mAssetsPath.newsBg,errorImage: this.$mAssetsPath.errorImage,pages: [1, 1, 1, 1],// type: 1,// cate: 0,moneySymbol: this.moneySymbol,genders: ['不限', '男孩', '女孩'],ages: ['不限', '幼年', '成年', '老年'],sizes: ['不限', '小型', '中型', '大型'],hairs: ['不限', '长毛', '短毛', '无毛'],states: ['不限', '已免疫', '已绝育', '已驱虫'],activeStyle: {background: '#FFCE0C',color: '#01040A'},filterShow: false,params: {},tabList:[{ key: 1, name: '领养', title: '领养', content: 'Ta的故事', tips: '为小可爱找新家' },{ key: 3, name: '寄养', title: '拾得', content: '宠物详情', tips: '为小可爱寻找原主人' },{ key: 4, name: '养宠宝典', title: '拾得', content: '宠物详情', tips: '为小可爱寻找原主人' }]};},onLoad() {// this.qqmapsdk = new QQMapWX({// key: this.$mData.maps[0].key// });//this.initData();this.getData(0);this.advs = {index_top:[ {"cover": "/static/tab/banner01.png"}, {"cover": "/static/tab/banner02.png"}, {"cover": "/static/tab/banner03.png"},]}this.loading = false;},onShow() {let userInfo = appRequest.getUserInfo();if(!userInfo){}else{this.userInfo = userInfo;}// let city = uni.getStorageSync('city');// if (city && this.city.id != city.id) {// this.city = city;// this.$nextTick(() => {// for (let tab of this.$mData.types) {// this.getMescroll(tab.key-1).triggerDownScroll();// }// });// }},onPageScroll(e) {this.scrollTop = e.scrollTop;},/* onReachBottom() {this.mescroll && this.mescroll.onReachBottom();},onPageScroll(e) {this.mescroll && this.mescroll.onPageScroll(e);}, */onPullDownRefresh() {// this.getIndexList('refresh');},onShareAppMessage(res) {return { title: this.title,path: this.path};},computed: {statusBar() {const e = uni.getSystemInfoSync();return e.statusBarHeight;},bottom() {let bottom = 0;/*#ifdef H5*/bottom = 90;/*#endif */return bottom;}},methods: {splitTag(text){return text.split(" ");},getPicUrl(info) {if(info){if( info.length > 10 ){return info;}else {return appRequest.urlMap.getPicById + info;}}else {return "";}},getData(type){var _this = this;appRequest.request({method: "POST",url: appRequest.urlMap.findNmArticleList,data:{validFlag:1,type:type},success: function(res) {if (res.data.code == 200) {let obj = res.data.data;_this.items = obj;}else{uni.showToast({title:"获取失败",icon:"none"})}},fail: function(res) {uni.showToast({title:"网络异常",icon:"none"})}})},// 数据初始化initData() {this.getCity();this.getIndexList();},// 监听轮播图切换handleDotChange(e) {this.current = e.detail.current;},// 通用跳转navTo(route) {this.$mRouter.push({ route });},// Tabbar跳转switchTab(route) {uni.navigateTo({url:route})//this.$mRouter.switchTab({ route });},navToChannel(index) {if(index==2){uni.navigateTo({url:"/pages/pet/public"})}else{index = index == 1 ? 2:index;this.swiperCurrent = index;this.tabsCurrent = index;let jump = index == 2 ? 3 :index;this.getData(jump);}},navToIndex() {switch (this.current) {case 0:this.navTo(`/pages/index/notice/notice`);break;case 1:this.switchTab(`/pages/pet/list`);break;case 2:this.switchTab(`/pages/pet/forum`);break;default:break;}},// 跳至广告图指定页面indexTopToDetailPage(item) {this.$mHelper.handleBannerNavTo(item.jump_type, item.jump_link, item.id);},// 获取主页数据async getIndexList(refresh) {// await this.$http.get(`${indexList}`, {}).then(async r => {// uni.setNavigationBarTitle({ title: this.appName });// if (refresh === 'refresh') uni.stopPullDownRefresh();// this.initIndexData(r.data);// this.loading = false;// }).catch(() => {// this.loading = false;// if (refresh === 'refresh') uni.stopPullDownRefresh();// });},// 首页参数赋值initIndexData(data) {this.advs = {index_top:[ {"cover": "/static/tab/banner01.png"}, {"cover": "/static/tab/banner02.png"}, {"cover": "/static/tab/banner03.png"},]}this.notices = data.announce;this.config = data.config;this.$mHelper.handleWxH5Share(this.share.share_title || this.appName, this.share.share_desc || `欢迎来到${this.appName}`, this.share.share_link || this.$mConfig.hostUrl, this.share.share_cover || this.$mSettingConfig.appLogo);},// 跳转至商品详情页navToDetailPage(data) {const { id } = data;if (!id) return;this.navTo(`/pages/pet/view?id=${id}`);},animationfinish(e) {this.current = e.detail.current;},// tabs通知swiper切换tabsChange(index) {this.swiperCurrent = index;this.tabsCurrent = index;let jump = index == 2 ? 3 :index;this.getData(jump);},// swiper-item左右移动，通知tabs的滑块跟随移动swiperTransition(e) {let dx = e.detail.dx;this.$refs.tabs.setDx(dx);},// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态// swiper滑动结束，分别设置tabs和swiper的状态swiperAnimationfinish(e) {let tabsCurrent = e.detail.current;this.$refs.tabs.setFinishCurrent(tabsCurrent);this.swiperCurrent = tabsCurrent;this.tabsCurrent = tabsCurrent;this.cate = tabsCurrent;},getMescroll(i) {let mescrollItems = this.$refs.mescrollItem;if (mescrollItems) {let item = mescrollItems[i];if (item) return item.mescroll;}return null;},getCity() {let city = uni.getStorageSync('city');if (city) {this.city = city;} else {let _this = this;// #ifdef MPuni.authorize({scope: 'scope.userLocation',success() {// #endifuni.getLocation({type: 'gcj02',geocode: true,success(res) {_this.qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success(res) {let city = {id: res.result.ad_info.city_code - 156000000,title: res.result.ad_info.city}uni.setStorageSync('city', city);_this.city = city;_this.getMescroll(_this.swiperCurrent).triggerDownScroll();},fail(error) {console.error(error);}});},fail(error) {console.error(error);}});// #ifdef MP}});// #endif}}}};

基于SpringBoot和UniAPP宠物服务预约小程序