公司产品网站,韩国能否出线,大兴模版网站建设公司,建立医防融合工作的机制不包括随着社会的发展和人们生活水平的提高#xff0c;特别是近年来#xff0c;宠物快速进入人们的家中#xff0c;成为人们生活中重要的娱乐内容之一#xff0c;过去宠物只是贵族的娱乐#xff0c;至今宠物在中国作为一种生活方式得到了广泛的认可#xff0c;随着人们精神文明… 随着社会的发展和人们生活水平的提高特别是近年来宠物快速进入人们的家中成为人们生活中重要的娱乐内容之一过去宠物只是贵族的娱乐至今宠物在中国作为一种生活方式得到了广泛的认可随着人们精神文明的提高越来越多的宠物。这个和我们成了好朋友。但我们该如何与他们相处和保护他们毕竟他们和人类很不一样我们应该给他们什么我们应该给他们吃什么大部分人不知道。他们只是知道要像照顾孩子一样照顾他们。但他们不说话。甚至有些人不把他们当作孩子来照顾因此有关宠物服务的信息成为了重要的话题。宠物是我们友好的朋友是人类幸福健康的重要源泉。 养宠物可以让人们的生活更加丰富多彩和幸福同时和宠物一起运动对身体非常好可以有效降低体内的血压和血脂在当今竞争日益激烈的社会宠物可以提供良好的精神支持。尤其是在我们受挫的时候。通过与宠物的沟通我们可以调节情绪管理心理健康缓解生活中遇到的各种压力提高工作效率另一方面饲养可爱的宠物可以培养孩子的责任感、爱心和社交能力当我们的孩子和狗玩得开心的时候狗可以传递很多正能量最重要的是养宠物可以保护我们家庭的财产保护我们的家庭免受盗窃让我们整个家庭都有安全感宠物也可以给我们和后代带来无限的快乐成为快乐和幸福的源泉生活。帮助人们积极外出促进体育锻炼为我们提供了很多与他人交流的机会。现在宠物主人的数量正在迅速增加越来越多的宠物信息网站应运而生。 实现的功能
本系统的功能应该包括用户登录和注册、首页展示、上门服务、宠物社区、后台管理PC浏览器后台等功能。
注册、登录通过获取用户微信昵称,微信账号进行登录。系统允许匿名访问匿名访问只能浏览界面不能预约服务
首页展示首页主要有养宠宝典可进行信息浏览收藏。宠物领养功能和宠物寄养功能可进行详细咨询
上门服务为顾客的爱宠提供提供上门喂养遛宠服务专业洗护基础医疗咨询等4个模块的功能
宠物社区主要是可上传宠物照片分享宠物趣事等
后台管理支持管理员对服务预约管理对订单进行添加删除修改。宠物社区管理对用户发布的趣事对违规的信息进行删除。 用到的技术
后端java语言的SpringBoot框架、MySql数据库、Maven依赖管理等
前端Vue.js语法的UniApp框架。 部分代码展示
templateview classwrapu-navbar :is-backfalse :titletitle title-color#000!-- view classslot-wrap tapnavTo(/pages/pet/city) i classiconfont iconicon-test :classtext- themeColor.name/ view classcity{{city.title}} text classiconfont iconxiajiantou2 //view/view --/u-navbarview classswiper-adv v-ifadvs.index_top.length!-- u-swiper :listadvs.index_top namecover :currentcurrent fieldcontent moderound height300 border-radius15 clicknavToIndex /u-swiper --uni-swiper-dot :infoadvs.index_top :currentcurrent fieldcontent moderound :dotsStyles{ backgroundColor: #FFF, color: themeColor.color, selectedBackgroundColor: themeColor.color, border: none, selectedBorder: none }swiper classswiper-box :currentcurrent circular autoplay :indicator-dotsfalse indicator-color#FFF :indicator-active-colorthemeColor.color animationfinishanimationfinishswiper-item v-for(item, index) in advs.index_top :keyindex clicknavToIndexu-image :srcitem.cover width100% height300 border-radius15 modeaspectFill / /swiper-item/swiper/uni-swiper-dot/view!-- view classswiperview classswiper-boxrf-swipe-dot :infoadvs.index_top modedot :currentcurrent fieldtitleswiper changehandleDotChange autoplaytrueswiper-item v-for(item, index) in advs.index_top tapindexTopToDetailPage(item) :keyindexview classswiper-itemu-image :srcitem.cover width100% height240 border-radius20 modeaspectFill //view/swiper-item/swiper/rf-swipe-dot/view/view!-- 公告 --!-- rf-swiper-slide v-ifnotices.length 0 :listnotices classrf-skeleton navTonavTo(/pages/index/notice/notice)view slotheader classswiper-slide-headertext classiconfont icongonggao :classtext- themeColor.name/text/view/rf-swiper-slide --!-- 频道 --swiper :indicator-active-colorthemeColor.color indicator-color#666 :indicator-dotsfalse classchannel-wrapswiper-item classchannel-listview classchannel v-for(item, index) in channels :keyindex tap.stopnavToChannel(index)view classicon-wrap!-- u-image :src/static/pet/icon- item.key .png width84 height84 borderRadius15 modeaspectFill / -- u-icon :nameitem.icon custom-prefixcustom-icon size66 :colorthemeColor.color //viewview classtext{{ item.name}}/view/view/swiper-item/swiper!--列表--view classpet-wrapview classstickyview classsticky-tabsu-tabs-swiper reftabs :listtabList :currenttabsCurrent changetabsChange :is-scrollfalse bar-height6 bar-width40 :active-colorthemeColor.color/u-tabs-swiper/view/viewviewview classitem v-for(item, index) in items :keyindex tapswitchTab(/pages/pet/pet-view?iditem.id)view classleftu-image :srcgetPicUrl(item.pic1) width100% height220 border-radius20 modeaspectFill //viewview classrightview classtitle u-line-2{{item.title}}/viewview classbase view classtag v-for(item2,index2) in splitTag(item.tag) :keyindex2{{item2}}/view/view!-- view classreward悬赏text classmoney{{item.money}}/text/view --view classsummary u-line-2{{item.content}}/view/viewview classbottomview classdatetime{{item.createTime}}/view!-- view classview{{item.view}}查看/viewview classshare{{item.share}}转发/view --/viewu-line colorinfo :hair-linefalse margin30rpx 0 0 0 //view/view!-- swiper :currentswiperCurrent transitionswiperTransition animationfinishswiperAnimationfinish styleheight:1150rpx;swiper-item v-for(item, tabsIndex) in $mData.types :keytabsIndexpet-index-mescroll-item refmescrollItem :itabsIndex :indextabsIndex :paramsparams :itemsitems/pet-index-mescroll-item/swiper-item/swiper --/viewu-gap height20 /!--备案--!--#ifdef H5--view classcopyright v-ifconfig.web_site_icp{{ config.copyright_desc }}a hrefhttp://www.beian.miit.gov.cn{{ config.web_site_icp }}/a/view!-- #endif --!--页面加载动画--rfLoading isFullScreen :activeloading/rfLoading!-- rf-back-top :scrollTopscrollTop/rf-back-top --!-- rf-back-home/rf-back-home --/view
/templatescript
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(index2){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}}}
};
/script基于SpringBoot和UniAPP宠物服务预约小程序
