电影订票小程序

深碍√TFBOYSˉ_ 2021-09-24 07:44 354阅读 0赞

个人资源与分享网站：[http://xiaocaoshare.com/][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;" >上映地区:\{ \{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>

</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>

</view>

<view>

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

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

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

</view>

<view>

<view class="area">

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

</view>

<view class="area">

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

</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>

</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 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>

</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>

</view>

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

<view class="dToa">

<view>\{ \{item.createtime\}\}</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 class="conts">

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

</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

[http_xiaocaoshare.com]: http://xiaocaoshare.com/

电影订票小程序

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关电影院订票选座小程序,电影购票小程序,微信小程序电影院订票系统毕设作品

相关基于JavaWeb的电影订票及评论网站设计与实现

相关旅游景区订票小程序系统设计与实现

相关基于ssm框架实现的在线电影订票系统

相关用Python实现一个电影订票系统

相关基于JSP微信小程序汽车票订票售票系统设计与实现

相关电影院订票选座小程序电影小程序毕业设计毕业论文开题报告和效果图

相关电影院订票选座小程序开题报告

相关电影订票小程序

相关前端微信小程序电影类仿淘票票微信小程序