微信小程序：电影选票系统 （简易版） 可以选择场次座位并生成订单
简介：这本来是一个课设作品，完整版连接了JAVA后台数据库，但因为我基本只负责微信小程序的后端数据交互，所以只发一个没有连接数据库，用静态数据作为代替的简易版，但还是保留了部分连接数据库的代码，大家可以看看。这个选票系统功能简洁完备，但还是有点问题，因为时间问题没有完成，就是通过点击不同电影生成不同场次座位页面，大家可以继续改进，这些页面也参考了一些其他CSDN文章，但现在实在找不到是哪篇了-。-
book页面效果展示
book.js
//index.js
var i=0
var flag=0
//获取应用实例
var that = this
var seat=0;
Page({
// 事件处理函数
bindViewTap() {
if (this.data.list.length <= this.data.minFieldLen - 1) {
wx.showToast({
title: `最少选择${this.data.minFieldLen}张`,
icon: 'none',
duration: 2000
})
return
}
if(i!=0)
this.data.orderList=wx.getStorageSync("orderList")||[];
this.data.payList=wx.getStorageSync('payList')||[];
this.data.myDate=wx.getStorageSync('myDate');
this.data.mySession=wx.getStorageSync('mySession');
this.data.dataList=wx.getStorageSync('movie');
for(var index in this.data.payList){
if(this.data.payList[index].row!="0排"&&this.data.payList[index].column!="0列"){
console.log(this.data.mySession.id);
this.data.orderList.push({"id":i,"hall":this.data.mySession.id+"号厅","time":this.data.myDate.title+" "+this.data.myDate.subTitle+" "+this.data.mySession.name,
"name":this.data.dataList.goods_title,"status":this.data.payList[index].row+this.data.payList[index].column+" ","money":this.data.dataList.goods_price})
wx.setStorageSync("orderList",this.data.orderList);
console.log(this.data.orderList[i].id)
console.log(this.data.orderList[i].hall)
//下面是给JAVA端发数据
wx.request({
url: 'http://localhost:8080/XCXTEST/demo',
data:{
id:this.data.orderList[i].id,//号
hall:this.data.orderList[i].hall,
time:this.data.orderList[i].time,
name:this.data.orderList[i].name,
price:this.data.orderList[i].money,
column:this.data.payList[index].column,
row:this.data.payList[index].row
},
method:'GET',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
"Accept": "application/json;charset=utf-8"
}
})
i++
}}
for(var index in this.data.chosenObj){
console.log(this.data.chosenObj[index].x)
console.log(this.data.chosenObj[index].y)
if(this.data.chosenObj[index].x!=-1&&this.data.chosenObj[index].y!=-1){
this.data.obj[ this.data.chosenObj[index].x][ this.data.chosenObj[index].y].status=2;
console.log(this.data.obj[ this.data.chosenObj[index].x][ this.data.chosenObj[index].y].status)
console.log(this.data.obj[ this.data.chosenObj[index].x][ this.data.chosenObj[index].y].status)
console.log(this.data.obj[ this.data.chosenObj[index].x][ this.data.chosenObj[index].y].status)
}
}
wx.setStorageSync('obj',this.data.obj)
this.setData({
obj:this.data.obj
})
wx.redirectTo({
url: '../order/order',
})
},
/**
* 页面的初始数据
*/
data: {
dataList:[],
orderList:[],
myDate:'1',//纪录日期
mySession:'1',//记录场次
payList:[
{
row:"0排",//排
column:"0列"//列
},
{ b
row:"0排",//排
column:"0列"//列
},
{
row:"0排",//排
column:"0列"//列
},
{
row:"0排",//排
column:"0列"//列
},
{
row:"0排",//排
column:"0列"//列
}
],
requestAreaId: 0,
requestDate: '',
/**
* 选中的位置
*/
list: [],
// 0 已预定
// 1 可预订
// 2 已售
//
chosenObj:[
{ x:-1,
y:-1
},
{ x:-1,
y:-1
},
{ x:-1,
y:-1
},
{ x:-1,
y:-1
},
{ x:-1,
y:-1
},
],
obj: [
[{
"status":1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
}
]
],
time: [
"1排",
"2排",
"3排",
"4排",
"5排",
"6排",
"7排",
"8排",
"9排"
],
area: [
"1列",
"2列",
"3列",
"4列",
"5列",
"6列",
"7列",
"8列",
"9列"
],
/**
* 场次
*/
session: [{
name: 'A场(9:00)',
id: 1
},
{
name: 'B场(10:00)',
id: 2
},
{
name: 'C场(13:00)',
id: 3
},
{
name: 'D场(15:00)',
id: 4
},
{
name: 'E场(17:00)',
id: 5
},
{
name: 'F场(18:00)',
id: 6
},
{
name: 'G场(20:00)',
id: 7
},
{
name: 'H场(21:00)',
id: 8
},
],
date: [{
title: '今天',
subTitle: '03月14日'
},
{
title: '周五',
subTitle: '03月15日'
},
{
title: '周六',
subTitle: '03月16日'
},
{
title: '周日',
subTitle: '03月17日'
},
{
title: '周一',
subTitle: '03月18日'
},
],
submitTitle: '提交订单',
/**
* 日期选中
*/
datePosition: 0,
/**
* 场次选中
*/
sessionPosition: 0,
/**
* 上拖动效果越界
*/
offsetTop: 0,
/**
* 做拖动效果越界
*/
offsetLeft: 0,
/**
* 调整左边的滚动条位置
*/
left: 0,
/**
* 调整上的滚动条位置
*/
top: 0,
/**
* 选座区域最小高度
*/
min: 100,
/**
* 选座区域最大高度
*/
max: 600,
/**
* 场地价格
*/
price: 0,
/**
* 当前场地id
*/
id: 0,
/**
* 最大可选场地
*/
maxFieldLen: 4,
/**
* 最小可选场地
*/
minFieldLen: 1,
/**
* 默认时间选择滚动条位置
*/
dateScrollX: 0,
scrollItemW: 0,
screenW: 0,
isFirstScroll: false
},
/**
* 选择日期
*/
chooseDate: function(e) {
var index = parseInt(e.currentTarget.id)
if (index != this.data.datePosition) {
this.setData({
datePosition: index,
})
this.data.myDate=this.data.date[this.data.datePosition];//设置日期
console.log( this.data.myDate); console.log(this.data.myDate.title);
wx.setStorageSync("myDate",this.data.myDate);
// this.data.payList[0].date=this.data.date[this.data.datePosition];//设置日期
//console.log( this.data.payList[0].date); console.log( this.data.payList[0].date.title);
}
},
/**
* 选择场次
*/
chooseSession: function(e) {
var index = parseInt(e.currentTarget.id)
if (index != this.data.sessionPosition) {
this.setData({
contentX: 0,
contentY: 0,
sessionPosition: index,
requestAreaId: this.data.id,
submitTitle: '提交订单',
})
this.data.mySession=this.data.session[this.data. sessionPosition];//设置场次
console.log( this.data.mySession); console.log( this.data.mySession.name);
wx.setStorageSync("mySession",this.data.mySession);
// this.data.payList[0]. session=this.data.session[this.data. sessionPosition];//设置场次
//console.log( this.data.payList[0].session); console.log( this.data.payList[0].session.name);
// this.getData(this.data.session[index].id, this.data.date[this.data.datePosition].value, this.data.id)
}
},
/**
* 点击事件
*/
bindChange: function(e) {
var x = e.detail.x
var y = e.detail.y
var offsetTop = 0;
if (y > 0) {
offsetTop += y
}
var offsetLeft = 0;
if (x > 0) {
offsetLeft += x;
}
this.setData({
left: x,
offsetLeft: offsetLeft,
offsetTop: offsetTop,
top: y
})
},
/**
* 座位选择
*/
choose: function(e) {
var p = e.currentTarget.id.split(",")
var i = parseInt(p[0])
var j = parseInt(p[1])
var id = i + ',' + j // 1,2
var item = this.data.obj[i][j]
var status=item.status
// 0 已预定
// 1 可预订
// 2 已售
//
/* this.data.obj[i][j].status=2
if(flag==1)
item.status=2;*/
/**
* 可预订
*/
if (status == 1) {
//判断数组长度最多选6个座位
if (this.data.list.length == this.data.maxFieldLen) {
wx.showToast({
title: '最多选择' + this.data.maxFieldLen + '张',
icon: 'none',
duration: 2000
})
return
}
/**
* 判断上下是否是靠近的
* i,j
* 可以选择
* 0,0
* 1,0
* 不能选择
* 0,0
* 1,2
*/
var arithmeticList = []
var isAdd = false
for (var index in this.data.list) {
var temp = this.data.list[index].id.split(",");
var x = parseInt(temp[0])
var y = parseInt(temp[1])
arithmeticList.push(x)
isAdd = true
};
/**
* 判断等差数列
*/
if (null != arithmeticList && isAdd && arithmeticList.length > 0) {
var tempArithmeticList = arithmeticList
tempArithmeticList.push(i)
}
item.status = 0
for(var index in this.data.chosenObj){
if(this.data.chosenObj[index].x==-1&&this.data.chosenObj[index].y==-1){
this.data.chosenObj[index].x=i;
this.data.chosenObj[index].y=j;
break;
}
}
/**
* 生成框里的数据
*/
this.data.list.push({
price:this.data.dataList.goods_price,
time: this.data.time[i] + this.data.area[j],
area: this.data.area[j].name,
id: id,
fieldId: this.data.area[j].id
})
console.log(this.data.time[i])
console.log(this.data.area[j])
if(seat<this.data.maxFieldLen){
while(this.data.payList[seat].row!="0排"&&this.data.payList[seat].column!="0列"){
seat++;
if(seat>=this.data.maxFieldLen)
seat=seat%this.data.maxFieldLen
}
this.data.payList[seat].row=this.data.time[i]
this.data.payList[seat].column=this.data.area[j]
console.log(this.data.payList[seat].row)
console.log(this.data.payList[seat].column)
console.log(this.data.payList)
wx.setStorageSync("payList",this.data.payList);
seat++;
console.log(seat)
}
let tempO = 'obj[' + i + '][' + j + ']'
// console.log(tempO)
/**
* 计算价格
*/
var title = this.getTitle(this.data.list)
this.setData({
submitTitle: title,
// obj: this.data.obj,
[tempO]: item,
list: this.data.list
})
} else if (status == 0) {//已选择
//i j
var arithmeticList = []
var isAdd = false
for (var index in this.data.list) {
var temp = this.data.list[index].id.split(",");
var x = parseInt(temp[0])
var y = parseInt(temp[1])
arithmeticList.push(x)
isAdd = true
console.log(this.data.time[i])
console.log(this.data.area[j])
seat=0;
for(var index2 in this.data.payList)
if(this.data.payList[index2 ].row==this.data.time[i]&&this.data.payList[index2].column==this.data.area[j]){
this.data.payList[index2 ].row="0排";
this.data.payList[index2 ].column="0列";
// console.log(this.data.payList[index2 ].row )
wx.setStorageSync("payList",this.data.payList);
}else console.log(123)
}
};
console.log(this.data.payList)
/**
* 已选择 取消选择
*/
item.status = 1
for(var index in this.data.chosenObj){
if(this.data.chosenObj[index].x==i&&this.data.chosenObj[index].y==y){
this.data.chosenObj[index].x=-1;
this.data.chosenObj[index].y=-1;
break;
}
}
for (var m = 0; m < this.data.list.length; m++) {
if (this.data.list[m].id == id) {
this.data.list.splice(m, 1)
break;
}
}
let tempO = 'obj[' + i + '][' + j + ']'
/**
* 计算价格
*/
var title = this.getTitle(this.data.list)
this.setData({
submitTitle: title,
// obj: this.data.obj,
[tempO]: item,
list: this.data.list
})
} else if (status == 2) {
wx.showToast({
title: '已售',
icon: 'none',
duration: 2000
})
}
},
getTitle: function(list) {
if (list.length <= 0) {
this.setData({
price: 0
})
return '提交订单'
}
console.log(this.data.dataList.goods_price)
console.log(list.length)
//this.data.price = 0
// for (var index in list) {
this.data.price = this.data.dataList.goods_price*list.length
// }console.log(this.data.price)
/* this.setData({
price:this.data.price
})*/
console.log(this.data.price)
return '￥' + this.data.price + '提交订单'
},
/**
* 判断是否为等差数列
*/
isArithmeticList: function(list) {
var tempArithmeticList = this.sortarr(list)
for (var i = 0; i < tempArithmeticList.length - 1; i++) {
var res = tempArithmeticList[i + 1] - tempArithmeticList[i]
if (res < 0) res = res * -1;
if (res != 1) {
return false
}
}
return true
},
/**
* 排序
*/
sortarr: function(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// wx.setStorageSync('obj', this.data.obj)
if(flag==0)
wx.setStorageSync('obj',this.data.obj)
this.data.obj=wx.getStorageSync('obj');
flag++
console.log(this.data.mySession)
this.data.dataList=wx.getStorageSync('movie')|| [];
// console.log(51254);
this.data.mySession=this.data.session[0]
wx.setStorageSync("mySession",this.data.mySession)
this.data.myDate=this.data.date[0]
wx.setStorageSync("myDate", this.data.myDate)
console.log( this.data.mySession);
console.log(this.data.dataList.goods_price);
that = this
/**
* 屏幕宽度
* 16 + 182 scrollW
*/
let scrollItemW = this.rpx2px(16 + 182)
let screenW = this.rpx2px(750)
let blockW = this.rpx2px(96)
let blockH = this.rpx2px(58)
// console.log(scrollItemW)
for(var i in this.data.obj){
for (var j in this.data.obj[i]){
this.data.obj[i][j].price=this.data.dataList.goods_price
}
}
// console.log(options)
this.setData({
scrollItemW: scrollItemW,
screenW: screenW,
blockH: blockH,
blockW: blockW,
max: this.rpx2px(that.data.max),
min: this.rpx2px(that.data.min),
maxW: this.rpx2px(650),
})
this.getData(this.data.requestAreaId, this.data.requestDate, this.data.id)
this.getData(this.data.mySession.id, this.data.date[this.data.datePosition].value, this.data.id)
},
/**
* 获取数据
*/
getData: function (areaId, date, id) {
var that = this
var time = this.data.time
var area = this.data.area
var h = time.length
var w = area.length
// console.log('h',h)
// console.log('w', w)
var offsetH = h * that.data.blockH
var offsetW = w * that.data.blockW
var currentH = offsetH
let currentW = offsetW
/**
* 设置最高高度
*/
if (offsetH > this.data.max) {
currentH = this.data.max
}
if (currentW > this.data.maxW) {
currentW = this.data.maxW
}
let datePosition = 0
// console.log('requestDate', that.data.requestDate)
if (that.data.requestDate) {
for (let i = 0; i < data.data.dateList.length; i++) {
if (that.data.requestDate == data.data.dateList[i].value) {
datePosition = i
break
}
}
}
let disableRow = 0 //判断前几行不能选择
/**
* 16 + 182
*/
that.setData({
contentX: 0,
contentY: (that.data.blockH + 1) * disableRow * -1,
offsetTop: 0,
offsetLeft: 0,
datePosition: datePosition,
left: 0,
top: 0,
maxFieldLen:5,
minFieldLen: 1,
date: that.data.date,
session: that.data.session,
area: that.data.area,
time: that.data.time,
obj: that.data.obj,
offsetH: offsetH,
offsetW: offsetW,
currentH: currentH,
currentW: currentW,
list: [],
price: 0,
})
if (!that.data.isFirstScroll) {
let dateScrollX = 0
if (that.data.screenW < datePosition * that.data.scrollItemW) {
dateScrollX = datePosition * that.data.scrollItemW - that.data.scrollItemW * 3
}
// console.log(dateScrollX)
that.setData({
dateScrollX: dateScrollX,
isFirstScroll: true
})
}
},
/**
* rpx 转 px
*/
rpx2px(rpx) {
return rpx / 750 * wx.getSystemInfoSync().windowWidth;
},
/**
* px 转 rpx
*/
px2rpx(px) {
// px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
return px * 750 / wx.getSystemInfoSync().windowWidth;
}
})
book.wxml代码
<wxs module="itema">
var getTypeByStatus = function(obj) {
switch (obj.status) {
case 0:
return 'mine'
break;
case 1:
return 'reservation'
break;
case 2:
return 'soldout'
break;
}
}
module.exports.getTypeByStatus = getTypeByStatus;
wxs>
<scroll-view scroll-x class='date ' scroll-left='{{dateScrollX}}'>
<view class='common-flex-row data-margin'>
<view class='common-flex-row' id='{{index}}' bindtap='chooseDate' wx:for='{{date}}' wx:for-index="index" wx:key='item'>
<view class="common-flex-column {{datePosition==index?'time-select':'time-unselect'}}">
<text>{{item.title}}text>
<text>{{item.subTitle}}text>
view>
<view class='w16rpx' />
view>
view>
scroll-view>
<scroll-view scroll-x>
<view class='common-flex-row session'>
<view class='common-flex-row' wx:for='{{session}}' wx:for-index="index" wx:key='item'>
<text class="{{sessionPosition==index?'session-select':'session-unselect'}}" bindtap='chooseSession' id='{{index}}'>{{item.name}}text>
<view class='w80rpx' />
view>
view>
scroll-view>
<view class='item'>
<view class='mask' />
<movable-area class='movable-area-left' style='height:{{currentH + blockH+10}}px;'>
<movable-view animation='' y="{{top}}" direction="vertical" out-of-bounds class='movable-view-left' disabled='false' style='height:{{offsetH+100+blockH/2}}px;'>
<view style='margin:{{offsetTop}}px 0px 0px 0px; '>
<view class='h29rpx' />
<text class='left' wx:for='{{time}}' wx:key='i'>{{item}}-text>
view>
movable-view>
movable-area>
<view class='item-right' style='height:{{currentH + blockH}}px; '>
<movable-area class='movable-area-top' style='width:{{currentW}}px;'>
<movable-view animation='' direction="horizontal" out-of-bounds class='movable-view-top' x="{{left}}" disabled='false' style='width: {{offsetW+1000+blockW/2}}px;'>
<view style='margin-left:{{offsetLeft}}px;' class='item-right-top'>
<view class='common-flex-row' wx:key='j' wx:for='{{area}}'>
<text class='top'>{{item}}text>
<view class='w2rpx' />
view>
view>
movable-view>
movable-area>
<view class='h2rpx' />
<movable-area class='movable-area-content' style='height:{{currentH}}px;width:{{currentW}}px;'>
<movable-view direction="all" out-of-bounds bindchange='bindChange' class='movable-view-content' style='width:{{offsetW }}px;height:{{offsetH}}px' x="{{contentX}}" y="{{contentY}}">
<view class='common-flex-row' wx:key='m' wx:for='{{obj}}' wx:for-index='i'>
<block wx:key='n' wx:for='{{obj[i]}}' wx:for-index='j'>
<text class='content {{itema.getTypeByStatus(item)}}' wx:if='{{item.status==2}}' bindtap='choose' id='{{i}},{{j}}'>text>
<view class='lock-big' wx:elif='{{item.status==5}}' bindtap='choose' id='{{i}},{{j}}'>
<image src='/img/lock_big.png' class='lock-img-big'>image>
view>
<text bindtap='choose' id='{{i}},{{j}}' class='content {{itema.getTypeByStatus(item)}}' wx:else>
￥{{item.price}}
text>
block>
view>
movable-view>
movable-area>
view>
view>
<view class='common-flex-row middle-item-tip'>
<view class='common-flex-row middle-item-tip-center'>
<view class='reservation middle-item-tip-img' />
<text class='item-text'>可预订text>
view>
<view class='common-flex-row middle-item-tip-center'>
<view class='soldout middle-item-tip-img' />
<text class='item-text'>已售text>
view>
<view class='common-flex-row middle-item-tip-center'>
<view class='mine middle-item-tip-img' />
<text class='item-text'>我的预订text>
view>
view>
<text class='tip' wx:if='{{list.length==0}}'>最多可预订{{maxFieldLen}}张票，请尽量保持座位连续text>
<scroll-view scroll-x>
<view class='common-flex-row l40rpx'>
<view class='common-flex-row' wx:for='{{list}}' wx:key='{{item}}'>
<view class='common-flex-column list-item'>
<text>{{item.time}}text>
<text>{{item.area}}text>
view>
<view class='w24rpx' />
view>
view>
scroll-view>
<view bindtap="bindViewTap" class='common-flex-column center'>
<text class='confirm' bindtap='confirm'>{{submitTitle}}text>
<view class='h24rpx' />
view>
book.wxss代码
/**index.wxss**/
page {
width: 100%;
}
.mask {
position: absolute;
width: 96rpx;
height: 48rpx;
top: 0;
left: 0;
z-index: 99;
background-color: #f5f5f5;
}
.left {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: flex-end;
height: 58rpx;
width: 96rpx;
color: #101010;
margin: 0rpx 2rpx 2rpx 0rpx;
}
.content {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #fff;
margin: 0rpx 2rpx 2rpx 0rpx;
background-color: #4cae62;
}
.top {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #131313;
}
.item {
width: 100%;
display: flex;
position: relative;
/* height: 700rpx; */
flex-direction: row;
background-color: #f5f5f5;
}
.item-right {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
/* .flex-row {
display: flex;
flex-direction: row;
} */
.item-right-top {
width: 100%;
height: 58rpx;
display: flex;
flex-direction: row;
}
.movable-view-left {
display: flex;
flex-direction: column;
color: #fff;
width: 96rpx;
/** 调高 可以有上拉的空间*/
/* height: 1860rpx; */
}
.movable-area-left {
height: 700rpx;
width: 96rpx;
flex-shrink: 0;
overflow: hidden;
}
.movable-view-top {
display: flex;
flex-direction: column;
/** 调宽 可以有右拉的空间*/
width: 1750rpx;
height: 58rpx;
}
.movable-area-top {
height: 58rpx;
width: 654rpx;
overflow: hidden;
}
.movable-view-content {
display: flex;
flex-direction: column;
/**动态修改 内容区的宽高**/
width: 1568rpx;
/**动态修改 内容区的宽高**/
height: 992rpx;
}
.movable-area-content {
height: 100%;
width: 100%;
overflow: hidden;
}
.item-text {
margin-left: 10rpx;
font-size: 22rpx;
font-family: PingFang-SC-Regular;
color: rgba(119, 118, 118, 1);
}
/* * status
* 1 可预订
* 2 已售完
* 3 已选择
* 4 我的预订
* 5 锁定*/
/* 已售完 */
.soldout {
background-color: #cdcdcd;
}
/* 可预订 */
.reservation {
background-color: #4cae62;
}
/* 已选择 */
.select {
background-color: #b7c147;
}
/* 我的预订 */
.mine {
background-color: #f6843b;
}
.lock {
background-color: #57c2f8;
}
.lock-small {
display: flex;
justify-content: center;
align-items: center;
width: 42rpx;
height: 26rpx;
}
.lock-big {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #fff;
margin: 0rpx 2rpx 2rpx 0rpx;
background-color: #57c2f8;
}
.session {
margin-left: 20rpx;
align-items: center;
padding-top: 23rpx;
padding-bottom: 29rpx;
}
.session-select {
flex-shrink: 0;
font-size: 28rpx;
color: rgba(7, 158, 99, 1);
}
.session-unselect {
flex-shrink: 0;
font-size: 28rpx;
color: rgba(33, 33, 33, 1);
}
.time-select {
width: 182rpx;
height: 100rpx;
justify-content: center;
align-items: center;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
background: rgba(76, 174, 99, 1);
}
.time-unselect {
width: 182rpx;
/* border: 1rpx solid rgb(250, 248, 248); */
height: 100rpx;
justify-content: center;
align-items: center;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
background: #fff;
box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(220, 220, 220, 1);
}
.time-select text {
font-size: 28rpx;
color: #fff;
}
.time-unselect text {
font-size: 28rpx;
color: #0d0d0d;
}
.confirm {
display: flex;
align-items: center;
justify-content: center;
width: 620rpx;
height: 88rpx;
background: #53AD4B;
border-radius: 44px;
color: #fff;
font-size: 34rpx;
align-self: center;
}
.list-item {
width: 148rpx;
height: 98rpx;
background: rgba(255, 255, 255, 1);
border: 2rpx solid rgba(246, 132, 59, 1);
border-radius: 10rpx;
align-items: center;
justify-content: center;
margin-bottom: 33rpx;
margin-top: 27rpx;
}
.list-item text {
color: #f86b24;
font-size: 22rpx;
}
.tip {
font-size: 22rpx;
color: rgba(71, 71, 71, 1);
align-self: center;
justify-content: center;
display: flex;
margin-top: 25rpx;
margin-bottom: 95rpx;
}
.center {
align-items: center;
justify-content: center;
}
.date {
display: flex;
/* margin-left: 20rpx; */
margin-top: 15rpx;
height: 110rpx;
}
.w16rpx {
width: 16rpx;
}
.h24rpx {
height: 24rpx;
}
.w2rpx {
width: 2rpx;
}
.w24rpx {
width: 24rpx;
}
.w80rpx {
width: 80rpx;
}
.h22rpx {
height: 22rpx;
}
.h29rpx {
height: 29rpx;
}
.h2rpx {
height: 2rpx;
}
.l40rpx {
margin-left: 40rpx;
}
.data-margin {
margin-top: 5rpx;
margin-left: 20rpx;
}
.middle-item {
padding-top: 10rpx;
background-color: #f5f5f5;
}
.middle-item-tip {
justify-content: space-around;
padding-bottom: 21rpx;
margin-top: 21rpx;
}
.middle-item-tip-center {
align-items: center;
}
.middle-item-tip-img {
width: 42rpx;
height: 26rpx;
}
.lock-img {
width: 12rpx;
height: 16rpx;
}
.lock-img-big {
width: 21rpx;
height: 28rpx;
}
movie界面效果展示
movie.js代码
Page({
/**
* 页面的初始数据
*/
data: {
dataList:[
{
goods_id:1,
goods_title:'你好，李焕英',
goods_img:'../img/movie1.png',
goods_score:'9.5',
goods_director:'贾玲',
goods_actor:'贾玲，张小斐，沈腾...',
goods_price:100
},{
goods_id:2,
goods_title:'人潮汹涌',
goods_img:'../img/movie2.png',
goods_score:'9.1',
goods_director:'饶晓志',
goods_actor:'刘德华，肖央，万茜...' ,
goods_price:100
}, {
goods_id:3,
goods_title:'唐人街探案3',
goods_img:'../img/movie3.png',
goods_score:'8.8',
goods_director:'陈思诚',
goods_actor:'王宝强，李昊然，妻夫木聪...'
,
goods_price:100
}, {
goods_id:4,
goods_title:'刺杀小说家',
goods_img:'../img/movie4.png',
goods_score:'8.6',
goods_director:'路阳',
goods_actor:'雷佳音，杨幂，董子健...',
goods_price:100
}, {
goods_id:5,
goods_title:'封神榜：哪吒重生',
goods_img:'../img/movie5.png',
goods_score:'8.7',
goods_director:'赵霁',
goods_actor:'杨天翔，张赫，宣晓鸣...',
goods_price:100
}
],
},
onLoad(){
wx.request({
url: 'http://localhost:8080/XCXTEST/demo',
data:{
},
method:'GET',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
"Accept": "application/json;charset=utf-8"
},
success :(res)=> {
},
fail:function(res){
console.log(".....fail.....");
}
})
},
// 事件处理函数
navigateToPage:function(e) {//e是获取到的点击数据
wx.setStorageSync("dataList",this.data.dataList);
// var name= e.currentTarget.dataset.name
console.log(e.currentTarget.id)
console.log( e.currentTarget.dataset.name);
for(var index in this.data.dataList){//循环遍历数组
if(e.currentTarget.id==this.data.dataList[index]. goods_id){//如果点击的下标与电影id对应
wx.setStorageSync('movie', this.data.dataList[index])//则将该电影数组以键值对方式存入缓存
console.log(this.data.dataList[index])
}
}
wx.redirectTo({
url: '../book/book',
})
}
})
movie.wxml代码
<view class='list'>
<block wx:for='{{dataList}}' wx:key='list' wx:for-item="item">
<view class="list_item">
<navigator url='{{item.goods_id}}' bindtap="navigateToPage" data-name='{{item.goods_title}}' id='{{item.goods_id}}' data-showType='{{item.showType}}'>
<view class='img'>
<image src="{{item.goods_img}}" mode="scaleToFill"/>
view>
<view class='info'>
<view class='title'>{{item.goods_title}}view>
<view class='score'>评分：{{item.goods_score}}view>
<view class='actor'>导演：{{item.goods_director}}view>
<view class="actor">主演：{{item.goods_actor}}view>
<view class="price">价格：￥{{item.goods_price}}view>
view>
navigator>
<view class='clear'>view>
view>
block>
view>
movie.wxss代码
.clear{
clear: both;
overflow: hidden;
}
navigator{
display:inline;
}
.list{
margin-top:5px;
}
.list .list_item{
margin-top:5px;
padding:10px;
height:120px;
border-bottom:1px solid #E8E8E8;
}
.list .list_item .img{
float:left;
width:30%;
height:100%;
}
.list .list_item .img image{
width:80%;
height:100%;
margin-left: 5px;
}
.list .list_item .info{
width:65%;
float:left;
height:100px;
position:relative;
margin-bottom: 17px;
}
.list .list_item .info .title{
color:#333;
margin-left:5px;
font-size: 15px;
}
.list .list_item .info .score{
color: #FF8C00;
margin-left:5px;
margin-top:10px;
font-size:10px;
}
.list .list_item .info .actor{
color:#747474;
margin-left:5px;
margin-top: 10px;
font-size:10px;
}
.list .list_item .info .price{
color:#d62b72;
margin-left:5px;
margin-top: 10px;
font-size:10px;
}
order页面效果展示
order.js代码
var order="";
var i=0;
// pages/order/order.js
Page({
/**
* 页面的初始数据
*/
data: {
myDate:'',
mySession:'',
payList:[],
dataList:[],
currtab: 0,
orderList:[
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
this.data. orderList=wx.getStorageSync("orderList")||[];
console.log( this.data. orderList)
this.setData(
{
orderList:this.data.orderList
})
}
})
order.wxml代码
<view class="swiper-tab">
<text color='white'>我的订单text>
view>
<block wx:for='{{orderList}}' wx:key='list' wx:for-item="item">
<view class="list_item">
<view class="orderListTitle">
<text class="userHall">{{item.hall}}text>
<text class="orderStatus">{{item.state}}text>
view>
<view class="orderListDetails">
<text class="userName">{{item.name}}text>
<view class="productTime">电影场次: {{item.time}}view>
<text class="productStatus">座位：{{item.status}}text>
view>
<view class="productCount">
<view>
<text>合计：￥{{item.money}}text>
view>
view> view>
block>
order.wxss代码
.swiper-tab {
height: 40px;
line-height: 40px;
background: #e26a80;
color:rgb(0, 0, 0) ;
display: flex;
position: relative;
z-index: 2;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom:1px solid white;
}
.swiper-tab-list {
margin: 0 30px;
padding: 0 4px;
font-size: 15px;
}
.on {
border-bottom:2px solid #fff;
color: #f5f5f5;
}
.navTopList {
display: flex;
width: 100%;
height: 70rpx;
background: #fff;
border-bottom: 1rpx solid #BEBEBE ;
margin-top:5px;
}
.navTopList .order-info {
text-align: center;
}
.navTopList .order-info view {
width: 56rpx;
height: 56rpx;
margin-left: 31rpx;
}
.navTopList .order-info text {
font-size: 34rpx;
}
.navTopList .order-info text.active {
color: #ff6662;
}
.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
flex: 1;
}
/*订单列表*/
.orderDetails {
background: #fff;
border-bottom: 20rpx solid #f5f5f5;
}
.orderListTitle {
height: 100rpx;
line-height: 100rpx;
border-bottom: 1rpx solid #BEBEBE;
}
.orderListTitle .userHall {
padding-right: 50rpx;
margin-left:20px;
}
.orderListTitle .orderStatus {
float: right;
margin-right: 20rpx;
color: #74c56b;
font-size: 34rpx;
}
.orderListTitle .unorderStatus {
float: right;
margin-right: 20rpx;
color: #e04343;
font-size: 34rpx;
}
.orderListDetails {
margin-top: 15rpx;
height: 200rpx;
border-bottom: 1rpx solid #f3f3f3;
}
.orderListDetails .userName {
width: 100%;
margin-top: 10rpx;
margin-left: 20rpx;
color: #e26a80;
}
.orderListDetails .productTime {
width: 100%;
font-size:15px;
margin-top: 20rpx;
margin-left: 20rpx;
}
.orderListDetails .productStatus {
font-size:15px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
margin-left: 20rpx;
}
.productCount {
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #f3f3f3;
}
.productCount>view {
float: right;
margin-right: 30rpx;
}
json文件就是默认的