Summary
Today, information technology is developing rapidly, and its footprints can be seen everywhere in our lives. It affects our various needs such as food, clothing, housing and transportation. The influence is also gradually increasing, gradually penetrating into all walks of life. In this context, after field investigation, in order to make the management of wedding photos more efficient and convenient, I decided to develop a studio reservation management system. With the progress of society and the development of the times, science and technology continue to develop forward. In the 21st century, this is an era of information technology. The era of computer technology is changing with each passing day. Computers are changing the face of the world in unprecedented innovative ways. People's modernization speed is getting faster and faster, and unprecedented new changes have taken place in their lifestyles. The number of problems that computers can solve has greatly increased, real problems can be dealt with more effectively, and a lot of time can be saved. To this end, the design of the studio photography reservation system is in line with the current reality.
Implemented functions
This system is divided into two roles: ordinary users and administrators. Ordinary users are on the mini program side, and administrators are on the PC browser side.
Functions should include: registration and login, photography reservation function, scene management order selection, photo sharing community, personal center and other functions.
Registration and login: Unregistered users can register, and after having an account, they can log in to the mini program;
Appointment photography function: After logging in through the mini program, users can choose to make an appointment for photography;
Select scene management orders: manage your own reservation information according to different orders;
Photo sharing community: mainly users can share their favorite photos, and it can also serve as a source of traffic and promotion for photo studios;
Personal Center: Users can manage their personal information.
technology used
Back-end Java language SpringBoot framework, MySql database, Maven dependency management;
UniApp framework for front-end Vue.js syntax.
Partial code display
<template>
<view class="container">
<!-- 小程序头部兼容 -->
<!-- #ifdef MP -->
<view class="mp-search-box">
<input @confirm="search" class="ser-input" type="text" value="输入关键字搜索" />
</view>
<!-- #endif -->
<!-- 头部轮播 -->
<view class="carousel-section">
<!-- 标题栏和状态栏占位符 -->
<view class="titleNview-placing"></view>
<!-- 背景色区域 -->
<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
<swiper class="carousel" circular @change="swiperChange">
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})">
<image mode="aspectFill" :src="item.src" />
</swiper-item>
</swiper>
<!-- 自定义swiper指示器 -->
<view class="swiper-dots">
<text class="num">{
{swiperCurrent+1}}</text>
<text class="sign">/</text>
<text class="num">{
{swiperLength}}</text>
</view>
</view>
<view class="block-wrap">
<u-grid :col="4" :border="false" >
<u-grid-item index="0" @click="changeType(0)" >
<image class="gn-icon" src="/static/picture-album.png"></image>
<view class="grid-text" :class="tab==0?'selTab':''">摄影服装</view>
</u-grid-item>
<u-grid-item index="1" @click="changeType(1)" >
<image class="gn-icon" src="/static/map-draw.png"></image>
<view class="grid-text" :class="tab==1?'selTab':''">拍摄场地</view>
</u-grid-item>
<u-grid-item index="2">
<image class="gn-icon" @click="toOrder()" src="/static/camera.png"></image>
<view class="grid-text">预约拍摄</view>
</u-grid-item>
</u-grid>
</view>
<!-- 分类 -->
<!-- <view class="cate-section">
<view class="cate-item" v-for="(item,index) in typeList" :key="item.id" @click="navTo(item.id)">
<image :src="'/static/temp/t'+(index+1)+'.png'"></image>
<text>{
{item.name}}</text>
</view>
</view> -->
<!-- <view class="ad-1">
<image src="/static/temp/hot.png" mode="scaleToFill"></image>
</view> -->
<!-- 猜你喜欢 -->
<view class="f-header m-t">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">{
{ tab == 0?"服装列表":"场地列表" }}</text>
<text class="tit2">{
{ tab == 0?"Cloth":"Place" }}</text>
</view>
<!-- <text class="yticon icon-you"></text> -->
</view>
<view class="guess-section">
<view
v-for="(item, index) in dataList" :key="index"
class="guess-item"
@click="toInfo(item)"
>
<view class="image-wrapper">
<image :src="picUrl+item.pic1" mode="aspectFill"></image>
</view>
<text class="title clamp">{
{item.name}}</text>
<view class="base" >
<view v-if="index2<3" class="tag" v-for="(item2,index2) in splitTag(item.tag)" :key="index2">{
{item2}}</view>
</view>
<text class="price">{
{tab==0?"服装":"影棚"}}租金：￥{
{item.price}}</text>
</view>
</view>
</view>
</template>
<script>
import appRequest from "@/common/appRequestUrl.js";
export default {
data() {
return {
tab:0,
picUrl:appRequest.urlMap.getPicById,
titleNViewBackground: '',
swiperCurrent: 0,
swiperLength: 0,
carouselList: [],
dataList: [],
user:"",
typeList:[],
userInfo:"",
name:""
};
},
onLoad() {
this.getData();
// this.getType();
//options
},onShow() {
// this.user = appRequest.getUserInfo();
// this.getGoods();
},
onNavigationBarSearchInputConfirmed(e) {
if(e.text){
this.name = e.text;
this.getData();
}
},
methods: {
toOrder(){
uni.navigateTo({
url:"/pages/order/order"
})
},
search(e) {
this.name = e.detail.value;
this.getData();
},
splitTag(text){
return text.split(" ");
},
changeType(index){
this.tab = index;
if(index<2){
this.getData();
}
},
toLogin(){
let _this = this;
let userInfo = appRequest.getUserInfo();
if(!userInfo){
wx.login({
success(res) {
if (res.code) {
let code = res.code;
uni.showModal({
title: "登录",
content: "请授权获取微信信息用于登录",
success: function(res) {
if (res.confirm) {
_this.getUserLogin(code);
}
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
}else{
this.userInfo = userInfo;
}
},getUserLogin(code){
let _this = this;
uni.clearStorage();
wx.getUserProfile({
desc: '使用前需要微信授权登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(JSON.stringify(res));
appRequest.request({
method: "GET",
data: {
code: code,
enData: res.encryptedData,
iv:res.iv,
userInfo:res.userInfo
},
url: appRequest.urlMap.loginCheck,
success: function(res) {
if(res.data.code == 200){
try {
uni.setStorageSync('userInfo', res.data.data);
uni.switchTab({
url:"/pages/index/index"
})
} catch (e) {
//callback()
uni.clearStorage();
}
}else{
//callback()
}
},
fail: function(res) {
//callback();
}
})
},fail: (err) => {
console.log(err);
}
})
},
toInfo(item){
uni.navigateTo({
url:"../product/product?id="+item.id
})
},
navTo(id){
try {
uni.setStorageSync('currId', id);
} catch (e) {
}
uni.switchTab({
url:"../category/category"
})
},
getData(){
let _this = this;
appRequest.request({
method: "POST",
url: appRequest.urlMap.findPhClothPlaceList,
data:{
type:_this.tab,
validFlag:1,
name:_this.name
},
success: function(res) {
if(res.data.code == 200){
_this.dataList = res.data.data;
_this.carouselList = [];
_this.swiperLength = 3;
for(var i=0;i<3;i++){
var obj = _this.dataList[i];
if(obj){
_this.carouselList.push({
src: _this.picUrl+obj.pic1,
background: "rgb(203, 87, 60)"
});
}
}
}else{
_this.$api.msg(res.data.msg);
}
},
fail: function(res) {
_this.$api.msg("请求异常");
}
})
},
/**
* 请求静态数据只是为了代码不那么乱
* 分次请求未作整合
*/
async loadData() {
let carouselList = await this.$api.json('carouselList');
this.titleNViewBackground = carouselList[0].background;
this.swiperLength = 5;
this.carouselList = carouselList;
// let goodsList = await this.$api.json('goodsList');
// this.goodsList = goodsList || [];
},
//轮播图切换修改背景色
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
this.titleNViewBackground = this.carouselList[index].background;
},
//详情页
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.title;
uni.navigateTo({
url: `/pages/product/product?id=${id}`
})
}
}
}
</script>Demo video
Studio photography appointment app based on SpringBoot and UniAPP