电影订票小程序

个人资源与分享网站：http://xiaocaoshare.com/

1.小程序前端主要实现的功能：

登录、注册、首页电影列表、购票功能，选座，在线支付，地图导航搜索电影院，订单评价，退款等功能

2.后台主要包括用户管理，电影信息管理，文件上传，电影院管理，电影与电影院关联管理，评论管理，订单管理，轮播图管理

后台技术：SpringBoot+Mybatis+js+html+vue+mysql+bootstrap+theaf

小程序主要页面实现代码：

首页电影列表功能的实现代码：

<swiper style="height:300rpx;" autoplay="true" interval="5000" circular="true">

  <block wx:for="{{indexData.swiperImg}}" wx:key="*this">

    <swiper-item>

      <image src="{{item}}" style="height:100%;width:100%;"></image>

    </swiper-item>

  </block>

</swiper>

<block wx:for="{{indexData.moviesList}}">

  <navigator url="./detail/detail?id={{item.id}}">

    <view style="height:216rpx;" class="movie">

      <image src="{{item.filmurl}}" mode="aspectFill" style="height:202rpx;width:152rpx;"></image>

      <view class="intro-warp">

        <view style="font-size:12px" class="intro">

          <view style="font-size:30rpx; color:#222222">{{item.filmname}}</view>

          <view style="font-size:24rpx; color:#686868">{{item.filmtype}}</view>

          <view style="font-size:24rpx;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; color:#686868">主演:{{item.filmman}}</view>

          <!-- <view style="font-size:24rpx; color:#A3A3A3;" wx:if="{{item.onsale}}">今天{{item.counts[0]}}家影院放映{{item.counts[1]}}场</view> -->

          <view style="font-size:24rpx; color:#A3A3A3;" >上映地区:{{item.filmloc}}</view>

        </view>

        <view class="buy">

          <view class="rating" >

            <text>{{item.cusmark}}</text>

            <text style="font-size:18rpx;">分</text>

          </view>

          <!-- <view class="rating" wx:else>

            <text>{{item.numbers}}</text>

            <text style="font-size:18rpx;">人想看</text>

          </view> -->

          <navigator url="../theaterList/theaterList?title={{item.filmname}}&id={{item.id}}" class="buy-nav">购票</navigator>

          <!-- <navigator url="../theaterList/theaterList?title={{item.title}}&id={{item.id}}" class="buy-nav pre" wx:else>预售</navigator> -->

        </view>

      </view>

    </view>

  </navigator>

</block>

请求后台数据接口：

wx.request({

      url: app.globalData.url + 'renren-api/film/list',

      data: {

        'pageSize': 1000

      },

      success: function(res) {

        console.log(res.data)

        var dataList = res.data.page.list

        that.setData({

          'indexData.moviesList': dataList

        })

 

      }

    })

  },

 

电影详情页展示：

<image src="{{des.filmurl}}" class="filter"></image>

<view class="head">

  <view class="cover">

    <navigator url="" class="playUrl">

      <image src="{{des.filmurl}}" style="width:212rpx;height:290rpx;"></image>

    </navigator>

    <view class="jianjie">

      <view>

        <view class="mTitle">{{des.filmname}}</view>

        <view class="enName">{{des.filmenname}}</view>

 

      </view>

      <view class="rater">

        <view class="space">

          <view class="subject">主演:{{des.filmman}}</view>

 

          <text style="color: white;" class="rateN">上映日期:{{des.filmdate}}</text>

          <!-- <text class="rateP">({{des.cusnum}}万人测)</text> -->

        </view>

        <view>

          <!-- <view class="subject">上映日期:{{des.filmdate}}</view> -->

          <!-- <view class="subject">专业评分</view>

          <text class="rateN">{{des.specmark}}</text>

          <text class="rateP">({{des.specnum}}人评)</text> -->

        </view>

      </view>

      <view>

        <view class="area">

          {{des.filmloc}} {{des.filmtype}}

        </view>

        <view class="area">

          {{des.filmyuyan}} {{des.filmtime}}分钟

        </view>

      </view>

    </view>

  </view>

  <!-- <view class="control">

    <view class="islooked like">想看</view>

    <navigator url="" class="like">评分</navigator>

  </view> -->

</view>

<view catchtap="flex">

  <view class="plot {{flexed?'':'flex'}}">{{des.filmdes}}</view>

  <view class="arrow {{flexed?'uparrow':'downarrow'}}"></view>

</view>

<!-- <view class="warp" style="height:346rpx;">

  <view class="tBar">演职人员</view>

  <scroll-view scroll-x style="width:100%">

    <view class="actorLi">

      <view wx:for="{{des.actors}}" class="acItem">

        <image src="{{item[2]}}" style="width:134rpx;height:172rpx;margin-bottom:18rpx;"></image>

        <view class="textOver">{{item[0]}}</view>

        <view style="color:#9B9B9B;" class="textOver">{{item[1]}}</view>

      </view>

    </view>

  </scroll-view>

</view> -->

<view class="warp" style="height:258rpx;padding-bottom:20rpx;">

  <view class="tBar">票房/评分</view>

  <view class="rankWarp">

    <view>

      <view style="color:#FFD700" class="rankNum">{{des.cusmark}}</view>

      <view class="rankB">观众评分(分)</view>

    </view>

    <view>

      <view style="color:#FFD700" class="rankNum">{{des.specmark}}</view>

      <view class="rankB">专业评分(分)</view>

    </view>

    <view>

      <view class="rankNum">{{des.filmtotal}}</view>

      <view class="rankB">累计票房(元)</view>

    </view>

  </view>

</view>

<!-- <view class="warp" style="height:278rpx;">

  <view class="tBar">

    <view>视频和剧照</view>

    <view class="videoN">{{des.video.counts}}</view>

  </view>

  <scroll-view scroll-x class="scr-H">

    <view class="spa scr-H-item"></view>

    <navigator class="img-item scr-H-item" url="" wx:for="{{des.video.video}}" hover-class="none">

      <image src="{{item}}" class="{{index==0?'long':'short'}}"></image>

    </navigator>

    <view class="spa scr-H-item"></view>

  </scroll-view>

</view> -->

<view class="audience">

  <view class="mark-head">

    <view class="au-mark">观众评论</view>

    <!-- <navigator url="" class="my-mark">我的短评</navigator> -->

  </view>

  <view>

    <view wx:for="{{comment}}" class="audience-item">

      <view class="avatarUrl">

        <image src="{{item.avatar}}" style="width:58rpx;height:58rpx; border-radius: 50%;"></image>

      </view>

      <view class="audienceD">

        <view>

          <view class="nickName">{{item.username}}  </view>

            <view style="display:inline-block;" wx:for="{{item.wjxscore}}" wx:for-index="idx2" wx:for-item="item2">

                  

                      <image style="width:25rpx;height:25rpx;margin-top:8rpx;margin-right:5rpx" src="../../../img/sx.png"></image>

                  

                  </view>

          <!-- <text style="margin-left:30rpx;">{{+'分'}}</text> -->

          <view></view>

        </view>

        <view class="pWord">{{item.comment}}</view>

        <view class="dToa">

          <view>{{item.createtime}}</view>

         

        </view>

      </view>

    </view>

  </view>

  <navigator url=""></navigator>

</view>

<navigator url="../../theaterList/theaterList?id={{des.id}}&title={{des.filmname}}" class="buy">优惠购票</navigator>

<view style="height:100px;"></view>

请求后台数据接口：

 wx.request({

      url: app.globalData.url + 'renren-api/film/info/' + id,

 

      success: function(res) {

        console.log(res.data)

        var dataList = res.data.film

        dataList.filmdate = dataList.filmdate.split(' ')[0]

        that.setData({

          des: dataList

        })

 

      }

    })

 

评价页面：

<!--服务评价-->

<view class="service">

  <view class='comment'>{{wjxScore}}.0分</view>

  <!--评分-->

  <view class='score'>

    <view class='left'>

      评分

    </view>

    <view class='right'>

       <view bindtap="starTap" data-index="{{index}}"  class="star" wx:for="{{userStars}}" wx:key="index">

        <image src="{{item}}"></image>

      </view>

    

    </view>

  </view>

 

</view>

<!--textarea-->

<view class="conts">

    <textarea class="areas" placeholder='更多评价请写在这里（最多300字）' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 

        <!-- <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> -->

    </textarea>

</view>

<!--提交评价-->

<button class='btn' bindtap='handleBtn'>提交评价</button>

后台接口：

 

项目演示地址：

需要源码的小伙伴可以加qq:3083155908,相互交流学习技术，提供技术支持

小程序演示地址：

链接：https://pan.baidu.com/s/19-VRYcrOPAZ2eVYVcWCevA
提取码：70mk

后台管理系统演示地址：

链接：https://pan.baidu.com/s/1bc1HGXVVPfqhOa9RzRzWig
提取码：7afo