一、技术介绍
1、基于微信小程序的当地特色旅游小程序的管理员后台的技术:
- 前端使用html+css+js+bootstrop组件进行开发
- 后端使用php laravel框架进行开发
- 数据库使用的是myql
2、小程序用户端的技术:
- 微信开发者语言:js+json+wxss+wxml
二、功能介绍
当地特色旅游系统分为两个角色:小程序用户、管理员
1、小程序用户功能
1.1 小程序首页
小程序的首页有滚动的banner图片展示、功能菜单的入口展示区、根据地区推荐的景区展示、最新发布的酒店推荐。截图如下图所示:
1.2 使用微信进行授权登录
使用微信授权登录的功能需要开发者进行小程序的账号注册,注册成功之后小程序的官方后台会提供给开发者小程序账号的唯一标识appid和appsercet两个码,使用这两个码进行小程序的第三方接口通讯,便可拿到小程序的openid,和相关的用户数据。部分代码如下图所示:
$client = new Client();
$response = $client->get('https://api.weixin.qq.com/sns/jscode2session', [
'query' => [
'appid' => config('wechat.appid'),
'secret' => config('wechat.secret'),
'js_code' => $request->input('code'),
'grant_type' => 'authorization_code'
],
'verify' => false
]);
功能截图如下:
1.3 景点预订
用户点击进入景点列表,选择自己需要预订的酒店,进入详情页,便可进行预订,在详情页面也查看景点的最新特价、原价格、所在地点、详细介绍等信息。这里展示景点详情页面的wxml和wxss代码:
页面wxml代码如下:
<view class="container">
<view class="container-body space-content">
<view class="space-top">
<view class="space-banner" bindtap="imgPreview">
<swiper
autoplay="{{true}}" interval="{{4000}}" duration="{{1000}}" bindchange="setCurrent">
<block>
<swiper-item>
<image src="{{host}}{{pic}}" mode="aspectFill" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
<view class="space-info">
<view class="space-title">{{title}}</view>
<view class="space-tags">
<text >{{tag}}</text>
</view>
<view class="space-list">
<view class="space-item">
<text class="text-left">价格:</text>
<text class="text-right">
<text class="text-orange">¥{{price}}</text>
</text>
</view>
<view class="space-item">
<text class="text-left">原价:</text>
<text class="text-right">¥{{origin_price}}</text>
</view>
<view class="space-item">
<text class="text-left">所在地区: </text>
<text class="text-right">{{address}}</text>
</view>
</view>
</view>
</view>
<view class="space-block">
<view class="space-block-title">相关介绍</view>
<view class="space-block-content">
<view class="space-passage">
<block>
<rich-text nodes="{{description}}">
</rich-text>
</block>
</view>
</view>
</view>
</view>
<view class="container-footer">
<text class="apply-btn" bindtap="addOrder">预订</text>
</view>
</view>
页面样式文件wxss代码如下:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding: 0px;
text-align: left;
align-items:'';
}
.container-body{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.container-footer{
width: 100%;
display: flex;
height: 88rpx;
border-top: 1rpx solid #ddd;
background: #fff;
}
.container-footer text{
flex: 1;
display: block;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-size: 34rpx;
border-left: 1rpx solid #ddd;
}
.container-footer text:first-child{
border-left: none;
}
.container-footer .btn-block{
border-radius: 0;
}
.container-footer .btn-block:after{
border: none;
}
.container-gray{
background: #f9f9f9;
}
.space-content{
background: #f9f9f9;
}
.space-top,.space-block{
padding: 20rpx;
background: #fff;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #ddd;
}
.space-block{
border-top: 1rpx solid #ddd;
}
.space-banner{
position: relative;
}
.space-banner swiper{
width: 100%;
height: 360rpx;
}
.space-banner .slide-image{
width: 100%;
height: 360rpx;
}
.number-banner{
position: absolute;
right: 40rpx;
margin-top: -80rpx;
padding: 0 16rpx;
background: rgba(0,0,0,.3);
border-radius: 6rpx;
color: #fff;
font-size: 36rpx;
}
.number-banner text:last-child{
color: rgba(255,255,255,.6);
font-size: 30rpx;
}
.space-title{
font-size: 44rpx;
line-height: 2;
}
.space-tags{
margin-bottom: 10rpx;
}
.space-tags text{
padding: 6rpx 16rpx;
border: 1rpx solid #f7982a;
line-height: 1;
color: #f7982a;
font-size: 28rpx;
border-radius: 4rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
white-space: nowrap;
}
.space-item{
display: flex;
font-size: 32rpx;
color: #555;
padding: 16rpx 0;
border-bottom: 1rpx solid #eee;
}
.space-item .text-left{
white-space: nowrap;
}
.space-item .text-orange{
font-size: 40rpx;
color: #f7982a;
line-height: 1;
}
.space-item .text-right{
color: #777;
}
.container-footer text.apply-btn{
background: #f7982a;
color: #fff;
flex: 1.5;
}
.space-block-title{
font-size: 40rpx;
}
.space-block-title:before{
content: '';
display: inline-block;
vertical-align: -6rpx;
width: 6rpx;
height: 40rpx;
background: #f7982a;
margin-right: 8rpx;
}
.space-block-content .space-list{
overflow: hidden;
}
.space-block-content .space-list .space-item{
width: 50%;
float: left;
}
.space-passage{
font-size: 30rpx;
text-indent: 2em;
margin-top: 20rpx;
}
.action{
background: white;
padding-top: 10px;
padding-bottom: 10px;
padding-left:5px;
}
界面功能截图如下:
预订功能展示:
接口通讯js代码如下:
wx.request({
url: api.post_appointment + '/'+ userInfo.id,
method: 'post',
dataType: 'json',
data: data,
success: (response)=>{
if(response.statusCode == 200){
if(response.data.code != 0){
wx.showToast({
title: '账户余额不足',
icon: 'none'
})
return;
}else{
//清除购物车
wx.setStorageSync('carts', [])
wx.showModal({
title: '支付提示',
content: '您确定现在支付吗',
success (res) {
if (res.confirm) {
app.data.utils.request({
url: app.data.api.orderScenicsStatus + response.data.data.id,
data: {status: 2},
method: 'post',
success: (data) => {
wx.redirectTo({
url: '/pages/donate-list/index',
})
}
})
} else if (res.cancel) {
wx.showLoading({
title: '您取消了支付',
})
wx.redirectTo({
url: '/pages/donate-list/index',
})
}
1.4 酒店预订
酒店预订和景点预订的逻辑是一样的,只是根据传递的参数type不同儿展示不同的数据,这里就不多做解释了。
1.5 特产购买
用户可以进行特色产品的按照关键字搜索,按照分类进行查看,点击进入详情进行下单购买,在线模拟支付等操作。功能界面如下:
1.6 账户余额充值
用户的在线支付有两种方式,一种是通过支付宝微信进行支付、一种是通过账户余额进行支付,所以一单账户余额不够,便可在线模拟充值,功能截图如下:
1.7 完善个人信息
用户在线完善真实名字、手机号码等信息。
1.8 收藏特产
用户进入特产详情页面之后,可对特产进行收藏。在我的收藏中可进行查看,删除操作。
1.9 在线意见反馈
用户对平台有什么建议啥的,可在线进行反馈。
1.10 旅游新闻资讯展示
用户可查看管理员在后端发布的旅游新闻资讯信息。
2、管理员端(网页端)
2.1 管理员登录注册
系统默认一个超级账号,在这个账号下面可以增加子管理员账号。可以进行重置密码,删除操作
2.2 小程序用户管理
凡是使用过小程序的用户,都可以在后台进行管理。
2.3 景点信息发布管理
管理员在后台需要事先设置好地区,然后发布景点的时候选择设置好的地区信息,然后编辑景点的名称、价格、简介等信息便可发布成功。功能截图如下所示:
2.4 酒店信息发布管理
管理员在后台需要事先设置好地区,然后发布酒店信息的时候选择设置好的地区信息,然后编辑酒店的名称、价格、简介等信息便可发布成功。功能截图如下所示:
2.5 特产信息管理
管理员通过后台添加按钮发布特产信息,还需要提前设置好特产的分类。功能截图如下:
2.6 商品订单管理
在用户的订单中,管理员可根据线下物流情况进行订单的状态信息更新:订单的待发货,已发货,待确认、已确认等状态信息。功能截图如下所示:
2.7 用户预订管理
用户预订的酒店信息、景点信息在这个菜单版块便可进行管理
除了以上的功能外,管理员端还有相应的:旅游新闻管理;用户反馈管理