電影訂票小程序

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