微信小程序实现可视化选座——存一份笔记

最新推荐文章于 2023-09-13 10:30:00 发布
最新推荐文章于 2023-09-13 10:30:00 发布
阅读量300 收藏 2
点赞数
文章标签： 微信小程序 笔记 notepad++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60199926/article/details/131446040
版权 
wxml:

<!--pages/three-a/three-a.wxml-->

<!-- 座位状态 -->
<view class="rem">
  <text class="title1">         {{area}}</text>
  <text class="title2">区</text>
  <text>
    <text class="cuIcon-square lg size color1"></text>
    <text>禁选</text>
  </text>
  <text>
    <text class="cuIcon-square lg size color4"></text>
    <text>未选</text>
  </text>
  <text>
    <text class="cuIcon-squarecheckfill lg size color2"></text>
    <text>已选</text>
  </text>
  <text>
    <text class="cuIcon-squarecheckfill lg size color5"></text>
    <text>自己选</text>
  </text>
</view>
<button class="getB" bindtap="aa">点击查看座位情况</button>

<!-- class="cuIcon-square lg size3 color4"  -->
<view class="for0" wx:for="{{floorquantity}}" wx:key="index" wx:for-index="i">
  <view class="place">

    <view  wx:for="{{seatList}}" wx:key="seatId" wx:for-index="j">
      
        <view class="table1">
          <view wx:if="{{item.did==i+seatList[0].did&&j%2==0}}">
            <view bindtap="getB" wx:if="{{seatList[j].dstatus==1}}" data-info="{{j}}" class="cuIcon-square lg size3 color4"></view>
            <view bindtap="getB" wx:if="{{seatList[j].dstatus==9}}" data-info="{{j}}" class="cuIcon-squarecheckfill lg size3 color4"></view>
            <view bindtap="getB" wx:if="{{seatList[j].dstatus==8}}" data-info="{{j}}" class="cuIcon-squarecheckfill lg size3 color5"></view>
            <view bindtap="" wx:if="{{seatList[j].dstatus == 2}}" data-info="{{j}}" class="cuIcon-square lg size3 color1" ></view>
          </view>
          <view wx:if="{{item.did==i+seatList[0].did&&j%2==0}}">
            <view bindtap="getB" wx:if="{{seatList[j+1].dstatus==1}}" data-info="{{j+1}}" class="cuIcon-square lg size3 color4" ></view>
            <view bindtap="getB" wx:if="{{seatList[j+1].dstatus==9}}" data-info="{{j+1}}" class="cuIcon-squarecheckfill lg size3 color4"></view>
            <view bindtap="getB" wx:if="{{seatList[j+1].dstatus==8}}" data-info="{{j+1}}" class="cuIcon-squarecheckfill lg size3 color5"></view>
            <view bindtap="" wx:if="{{seatList[j+1].dstatus == 2}}" data-info="{{j+1}}" class="cuIcon-square lg size3 color1"></view>
          </view>
          <view wx:if="{{(j+1)%2==0&&(j+1)%4!=0&&item.did==i+seatList[0].did}}" bindtap="getB">
              <view class="aa">
              <view class="table"></view> 
            </view>
          </view>
        </view>
    </view>
  </view>
</view>

wxjs:
// pages/three-a/three-a.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    s:" ",
    staTime:"",
    stpTime:"",
    dataTime:"",
    floor:'',
    area:'',
    seatList: [],
    BookingList:"",
    bookingLists:"",
    buseful:"",
    floorquantity: 0,
    remaining: 0,
    i:0,
    j:0,
    time:0,
    a_company:''
  },
  
  getB(e){
    this.setData({
      j:e.currentTarget.dataset.info
    })
    console.log("jjjjj",this.data.seatList[this.data.j].seatId);
    var that=this;
    wx.showModal({
    content: '确定要预约'+that.data.dataTime+that.data.time+'时间段的'+(that.data.seatList[that.data.j].seatsId)+'吗？',
      success: function (sm) {
        if (sm.confirm) {
          // let str1 = that.data.date1+" "+that.data.time1+":00";
          // let str2 = that.data.date2+" "+that.data.time2+":00";
          wx.request({
            url: 'https://cyf.kuku26.top/booking-bean/bookingPeriodSeat',
            method:'POST',
            dataType:"json",
            header:{
            'content-type':'application/json;charset=utf-8',
            'token' : getApp().globalData.token
            },
            data:{
              b_end_time : that.data.stpTime,
              b_start_time : that.data.staTime,
              seatId : that.data.seatList[that.data.j].seatId,
              // uId : '202008324103',
            },
        
            success:function(res){
              console.log("t="+that.data.t)
              console.log(res)
              if(res.statusCode==200){
                if(res.data.message=="预约成功"){
                  wx.showToast({
                    title: '预约成功!',
                    icon: '',
                    duration: 2000//持续的时间
               
                  })
                  
                  that.setData({
                    t:1,
                  })
                }
                if(res.data.message=="查找的座位已被预约"){
                  wx.showToast({
                    title: '查找的座位已被预约',
                    icon: 'success',
                    duration: 2000//持续的时间
               
                  })
                }
                if(res.data.message=="已预约同时间段其他座位"){
                  wx.showToast({
                    title: '已预约同时间段其他座位',
                    icon: 'success',
                    duration: 2000//持续的时间
               
                  })
                  
                  
                  that.setData({
                    t:1,
                  })
                }
                  
              }
              console.log(that.data.t)
 
              // console.log(that.data.place)
            }
          })
          
          setTimeout(()=>{
            that.getBooking()
            setTimeout(()=>{
              that.aa()
            }, 100)
          }, 100)
        } else if (sm.cancel) {
          console.log('用户点击取消')
        }
      }
    })

  },

  
  getBooking(){
    var that = this
    wx.request({
      url: 'https://cyf.kuku26.top/booking-bean/selectedBooking',
      method:'POST',
      dataType:"json",

      header:{
        'content-type':'application/json;charset=utf-8',
        'token' : getApp().globalData.token
      },
      
      data:{
        aname:that.data.area,
        fnum: that.data.floor,
        bstartTime: that.data.staTime
      },
  
      success:function(res){
        that.setData({
          bookingLists: res.data.data
        })
        // console.log("bookingLists=",that.data.bookingLists)
        if(res.statusCode==200){
            that.setData({
              t:1,
            })
        }

        // console.log(that.data.place)
      }
    })
  
  },


  getSeatList(){
    var that = this
    wx.request({
      url: 'https://cyf.kuku26.top/seats-bean/selectedSeatState',
      method:'POST',
      dataType:"json",
      header:{
        'content-type':'application/json;charset=utf-8',
        'token' : getApp().globalData.token
      },
      data:{
        fid: that.data.floor,
        aName: that.data.area
      },
      
      success:(res) => {
        that.setData({
          seatList: res.data.data,
          floorquantity: parseInt(res.data.data.length/4),
          remaining:res.data.data.length%4,
        }),
        console.log("seatList=",that.data.seatList)
        console.log('a===',res)
        if (that.data.remaining>0) {
          that.setData({
            floorquantity: that.data.floorquantity+1,
          })
        }
      },
    })
  },

  aa(){
    var that = this
    this.getBooking()
    for(var i=0;i<that.data.seatList.length;i++){
      for(var j=0;j<that.data.bookingLists.length;j++){
          if(that.data.seatList[i].seatId==that.data.bookingLists[j].seatId){
            
            if(that.data.bookingLists[j].buseful!=0){
              if(that.data.bookingLists[j].uid!=that.data.uId){
                that.setData({
                  ['seatList[' + i + '].dstatus'] : 9
                })
              }else{
                that.setData({
                  ['seatList[' + i + '].dstatus'] : 8
                })
              }
            }
            
          }
      }
    }
    console.log("seatList",that.data.seatList)
    console.log("bookinList",that.data.bookingLists)
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      floor:options.floor,
      area:options.area,
      time:options.time,
      dataTime:options.dataTime,
      staTime:options.dataTime+this.data.s+options.time.substring(0, 8),
      stpTime:options.dataTime+this.data.s+options.time.substring(9, 17)
    })
    console.log("asdasd",this.data.area,this.data.s,this.data.floor)
    this.getSeatList()
    this.getBooking()
    setTimeout(()=>
    {
      this.getBooking()
      setTimeout(()=>{
        this.aa()
       }, 100)
    }, 100)

},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
      
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

wxss

/* pages/three-a/three-a.wxss */
page{
	background-color: rgb(255, 255, 255);
}
 
.size{
	font-size: x-large;
	text-align: center;
}

.title1{
	font-size: x-large;
	margin-right: 10rpx;
	color: rgb(172, 168, 168);
}

.title2{
	font-size: larger;
	color: rgb(172, 168, 168);
}


.color1{
	color: rgb(255, 125, 125);
	margin-left: 100rpx;
}

.color4{
	color: rgb(66, 255, 168);
	margin-left: 50rpx
}

.color2{
	color: rgb(66, 255, 168);
	margin-left: 50rpx
	
}

.aa{
	display: flex;
	justify-content: center;
}

.place{
	display: flex;
	flex-wrap: wrap; 
	margin-left: 75rpx;
}
.size3{
	display: flex;
	font-size: 103rpx;
	text-align: center; 
  /* margin: 25rpx; */
  margin: 100rpx;
	/*margin-bottom: 155rpx; */
	margin-bottom: 50rpx;
	
}

.color3{
	color: rgb(66, 255, 168);

	
}
.color5{
	color: rgb(21, 195, 248);

}

.t-place{
	margin-top: -8355rpx;
	margin-bottom: 51rpx;
	margin-left: 100rpx;
}

.table{
	width: 544rpx;
	height: 200rpx;
	background-color: rgb(202, 203, 204);
	font-size: x-large;
	color: rgb(247, 245, 245);
	display: flex;
	justify-content: center;
}

.table1{
	width: 544rpx;


	font-size: x-large;
	display: flex;
	justify-content: center;
}

js部分还需上一级传值

Ti阿吉仔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小程序选座、在线选座、小程序场地选座 （微信小程序里面的场地选择）
08-19
小程序选座、在线选座、小程序场地选座，微信小程序里面的场地选择，可拖拽，在线选座
微信小程序组件开发——可视化电影选座
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-23 2119
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群一. 简介想必很多人都有陪男女朋友去看电影的经历吧，是不是在每次选座的时候你都要征求女盆友或男盆友的意见，什么？不征...
基于微信小程序的电影院买票选座系统
weixin_52721608的博客
11-08 3135
电影院票务系统利用网络沟通、计算机信息存储管理，有着与传统的方式所无法替代的优点。比如计算检索速度特别快、可靠性特别高、存储容量特别大、保密性特别好、可保存时间特别长、成本特别低等。在工作效率上，能够得到极大地提高，延伸至服务水平也会有好的收获，有了网络，电影院票务系统的各方面的管理更加科学和系统，更加规范和简便。
【计算机毕业设计】电影院订票选座小程序
写代码的人的博客
08-04 89
JAVA SSM+Vue+Uniapp电影院订票选座小程序，实现了用户跟管理员角色，主要实现了电影信息管理、订单管理等功能。
如何做一个基于微信在线教育学习小程序系统毕业设计毕设作品
杭州.黄老师
10-25 8581
如何做一个基于微信在线教育学习小程序系统毕业设计毕设作品
微信 小程序（三）：选座系统2（主要内容：数组的动态更改）
垃圾管理员的垃圾站
08-23 5440
人生无趣且不易，一起找点乐子吧。欢迎评论，和文章无关也没问题。 上篇文章我们主要说到了列表的渲染，给定个数组，循环遍历“画”在界面上，最后我们也提到，如果想要改变界面，只要相应的改变对应数组的内容就可以了。 This time我们来谈下怎样从界面获得点击位置，然后在脚本里处理，并修改数组的相应位置的内容，也就是实现选座，离座的功能。 首先我们先来捋清一下思路，我们的选座需要...
小程序开发——选座小程序
君王羔羊
06-18 4186
const db = wx.cloud.database() const _ = db.command db.collection('seats').doc(_.and( [ { row:"2"}, {column: '2'} ])).update( { data: { status:"booked" }, }) 1、每人最多选一个座位 if (this.data.selectSeatList.length == 2) { .
基于Java+SSM+Vue+uniapp实现微信小程序的电影院订票选座系统小程序
qq_61827376的博客
06-24 1336
通过移动互联网这几年的发展，单独的开发某些APP已经到了日暮西山的地步，原因不在于单个的APP功能丰富与否，而是因为用户生态体系的问题。使用智能手机的用户经过多年的使用习惯，已经越来越不喜欢安装各种的APP，除了正常生活和工作所必须的APP，不喜欢因为喜欢某些内容而被强制安装APP软件了。最近几年，随着微信生态的布局，通过开发微信小程序接口，让广大用户可以通过微信直接访问小程序，不需要去专门安装那些APP，这一点让很多用户喜爱，基本上只要能转向微信生态的业务，许多企业都已经开始拥抱微信小程序。
分享一个基于微信小程序的高校图书馆预约座位小程序 图书馆占座小程序源码 lw 调试
m0_72599287的博客
09-13 540
学生需要能够在小程序上方便地查看图书馆座位的空闲情况，选择合适的座位并进行预约。此外，需要提供座位签到和退签功能，以确保座位的合理利用，防止长时间空置座位。这些功能的实现....
小程序模拟大巴车在线选择座位
不断学习的兔纸
05-13 4014
首先上demo地址：https://github.com/AloneYan/WeChat-SeatSelection 最近公司接了新项目 就有新需求啦 有一个功能是要求在线选座，像是买火车票买电影票哪种 此教程由花花同学友情赞助（为啥酱紫说 是因为花花写的demo 我写教程～） 一个很丑的demo如下图所示！！（为啥这么丑-。-不应该呀） 下面就开始实现它了 具体...
基于微信小程序的电影院订票选座小程序的设计与实现
qq_61827376的博客
09-03 543
电影院订票选座小程序借助微信开发者工具开发用户前端，使用SSM框架和Java语言开发管理员后台，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员管理影院信息，电影信息，电影资讯信息，管理不同状态的订单。总之，电影院订票选座小程序可以更加方便用户在线预订座位并进行电影票的线上支付，也方便了管理员在后台对影院信息，电影以及订单信息进行统一管理。开发语言：Java框架：ssmJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7/8.0。
微信小程序项目实例——今日美食
05-24
微信小程序项目实例——今日美食 今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程
微信小程序电影院订票选座系统设计及实现+ssm.zip
04-11
SSM项目小程序“电影院订票选座系统设计及实现Ssm.zip”是一个基于Spring、Spring MVC和MyBatis（SSM）框架开发的微信小程序，旨在为用户提供一个便捷的电影票预订和座位选择服务。该项目结合了微信小程序的便利性和...
微信小程序——云笔记（截图+源码）.zip
05-05
微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序...
微信小程序电影院订票选座小程序+ssm.zip
最新发布
04-12
微信小程序“电影院订票选座小程序Ssm.zip”是一个基于Spring、Spring MVC和MyBatis（SSM）框架开发的微信小程序，专为电影爱好者提供一个便捷的在线购票和座位选择服务。该项目结合了微信小程序的用户体验和SSM框架...
微信小程序-可视化小程序应用开发和运行平台
08-06
HTML我帮您打造微信小程序web可视化开发者工具是一款的可视化Web应用开发和运行平台。基于浏览器的集成开发环境，可视化和智能化的设计，能轻松完成身微信小程序和面向手机的移动应用开发；高效、稳定和可扩展的特点...
【毕业设计】基于微信小程序的图书馆座位预约系统小程序
qq_15801219的博客
04-05 2586
今天带来的是基于微信小程序的图书馆座位预约小程序 图书馆座位预约小程序，随着高校招生规模不断扩大，每逢备考阶段因图书馆座位资源紧缺而产生大量的占座现象。部分学生奉行“人来有位，人走书占”的原则，使自己只要有需要就能够在图书馆有一席之位，这妨碍了他人正常使用座位资源，使本就不足的阅览室座位利用率降低。另外，因部分高校的图书管理人员对占座现象没有及时有效的监督制止，导致部分学生觉得不占座位就没有座位，自己就会有吃亏的想法。因此占座现象也就慢慢加重，不断衍生。
微信小程序（三）：选座系统（主要内容：列表渲染的应用）
热门推荐
垃圾管理员的垃圾站
08-20 1万+
生活无趣且不易，一起找点乐子吧。欢迎评论，和文章无关的内容也没关系。 从这篇开始，做个简单的选座系统，也就是在界面上画出座位布局，在点击后根据座位情况进行选座或者离坐这么个东西。 其实写这篇文章的目的很简单，其一是因为学校的需要，学习的这点东西虽不算精，但毕竟付出了心血，离别之际，留点东西，没什么，至少证明我来过（笑）。其次，这块的内容在写代码阶段，卡的最久，消耗的精力也最多，这也...
微信小程序云开发实现订坐位功能
小黄同学的博客
10-29 1271
微信小程序云开发实现订坐位功能 本人专注使用云开发，实现一个前端可以做后端以及整个项目的部署与上线。 如果觉得我讲的好就可以给我点个赞。也可以加我微信了解详情。
基于微信小程序的图书馆选座系统经济效益分析
05-05
微信小程序的图书馆选座系统可以提高图书馆的座位利用率，减少座位空置率，从而提高图书馆的经济效益。具体分析如下： 1. 提高座位利用率 传统的图书馆选座方式是手工登记或者在柜台排队，效率较低。而微信小程序的图书馆选座系统可以在线上实现选座，用户可以提前预定座位，或者实时查看座位情况，避免了用户在图书馆门口排队等候选座的情况，提高了选座效率。同时，系统可以根据座位使用情况和预定情况进行智能管理，优化座位分配，提高座位利用率。 2. 减少座位空置率 座位空置率指图书馆中座位的空置情况。传统的选座方式容易导致座位资源的浪费和空置。而微信小程序的图书馆选座系统可以根据座位使用情况和预定情况进行智能管理，及时调整座位分配，避免座位空置，减少座位资源的浪费。 3. 提高图书馆的经济效益 微信小程序的图书馆选座系统可以提高图书馆的座位利用率，减少座位空置率，从而提高图书馆的经济效益。通过系统的智能管理和优化，图书馆可以更好地利用座位资源，提高服务质量，提高用户满意度，增加图书馆的知名度和影响力，进一步提高经济效益。 因此，微信小程序的图书馆选座系统对于提高图书馆的经济效益具有积极作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值