当地特色旅游系统 计算机毕业设计 微信小程序开发

于 2022-09-30 19:34:04 发布
阅读量864 收藏 30
点赞数 3
分类专栏： 计算机毕业设计100套 微信小程序项目实战 php项目开发实战 文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hepingyundanfengqing/article/details/127125570
版权

一、技术介绍

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 用户预订管理

用户预订的酒店信息、景点信息在这个菜单版块便可进行管理

除了以上的功能外，管理员端还有相应的：旅游新闻管理；用户反馈管理

平姐设计
关注
  • 3
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

平姐设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值