WeChat applet component development: Visual movie seat selection function

1. Introduction

I believe many people have the experience of going to the movies with their boyfriend or girlfriend. Do you always ask for your girlfriend or boyfriend’s opinion every time you choose a seat? Why? Not soliciting? ! Then you're done!

In many movie ticketing apps and mini-programs on the market, in order to allow audiences to better choose their favorite seats online, convenient and visual seat selection data is essential. Here, let's take a look at this useful visual seat selection component!

The view effect is as follows:

If you are interested, please continue reading!

1. Component data

First of all, we need to pass two data to the component so that it can be used when displaying the component. One is the number of the cinema hall, and the other is the array of seats, as follows:

Hall number: uppercase numeric string

Seat data: array dot matrix, blank spaces on the left and right are represented by 0, ordinary seats are represented by 1, preferred seats are represented by 2, and seats that have been selected by other viewers are represented by 3. The initial data is as follows:

The data passed must be declared in the component's js file. Different from the page declaration method, the data type needs to be written when declaring data in the component's properties.

  properties:
    seatings: Array,
    hallNumber: String
  },

2. Component page layout

There are movable and immovable parts on the page, and of course some that can be moved by themselves; in this component, the top logo area is a static part and the seat area is movable and can be zoomed in and out with two fingers. The specific structure is as follows:

1. Logo area composition

This area mainly serves as a prompt, providing seat information, including the normal area and the preferred area. Of course, the code can directly steal the WXSS style of the seats in the seat area, using the signs_normal and seat_Excellent class names. Of course, who doesn't like the C position?

    <view class="signs_normal">
      <view class="seatNormal"></view> <text>Normal area</text> 
    </view>
    <view class="signs_excellent">
      <view class="seatExcellent"></view> <text>Preferred area</text> 
    </view>
  </view>

2. Seating area composition

We have divided this section into three small parts: the screen, the cinema introduction and the seating area. Let me tell you in detail!

2.1 Movie Screen:

To achieve the curved screen effect, we can use the masking method, which is very useful! First, use a rectangular box to construct the length and width of the screen, then use the edge of an elliptical pie to display it in the rectangular box, and use the overflow: hidden attribute to cover the rest. Then adjust the background color and border color to achieve the screen effect.

The html is as follows:

<view class="visual_screen">
   <view class="screen"></view>
</view>

wxss is as follows:

.visual_screen {
  height: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10rpx;
}
.screen {
  margin-top: 0;
  padding: 0;
  height: 30vw;
  width: 100vw;
  box-sizing: border-box;
  border: 15rpx solid #c9cdd3;
  border-radius: 50%;
}

2.2 Movie Hall Introduction:

This part is relatively simple. Just insert the transmitted data and fine-tune the style.

wxml:

wxml:
<view class="visual_title">Hall {{hallNumber}} - (Please wear a mask and purchase tickets for children over 1.3 meters tall)</view>
wxss:
.visual_title {
  font-size: 23rpx;
  width: 100%;
  height: 20rpx;
  text-align: center;
  color: #6d6d6d;
  margin-bottom: 30rpx;
}

2.3 Seating Area:

Infrastructure:

Basic unit: Since the width of the seat is set as the basic unit vw, it is convenient to unify the unit and adapt to the model, so I will also design the height in vw here.

Seat style: We know from the seat array transmitted previously that we have five types of seats, namely: seatNormal (ordinary seat), seatExcellent (preferred seat), seatNone (blank seat), seatChosen (unselectable seat) and selected (currently selected seat). The basic styles of the seats here are the same and can be unified, and then write their own unique styles separately. For blank seats, the effect can be achieved by simply setting the border color to transparent.

.seatNormal, .seatExcellent, .seatNone, .seatChosen {
  height: 4vw;
  width: 4vw;
  margin: 1vw;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.seatNormal {
  border: 1rpx solid #63c0c0;
}
.seatChosen {
  border: 1rpx solid red;
  background-color: red;
}
.selected {
  border: 1rpx solid #05ca90;
  background-color: #05ca90;
}
.seatExcellent {
  border: 1rpx solid #f18e14;
}
.seatNone {
  border: 1rpx solid rgba(0, 0, 0, 0);
}

Recommended useful styles: In wxss we use a very useful style "box-sizing: border-box;". This style sets the width and height of the element to determine the border box of the element. That is, any padding and border specified for the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height respectively, making it easier to control the size of the element.

Overall layout: The seating area uses a flexible layout display: flex, and uses flex-wrap: wrap to automatically wrap the seats when they are filled. The large box wraps another box, allowing the box inside to be flexibly centered, achieving an overall centering effect.

.visual_seatings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43vw;
}
.visual_seating {
  width: 90%;
  height: 43vw;
  display: flex;
  flex-wrap: wrap;
}

Movable and scalable area: To facilitate seat selection, we set the seat area to be movable and scalable by two fingers, so we need to use an API of WeChat applet: movable-area and movable-view.

movable-area: This area must have width and height attributes set. If not set, the default value is 10px. At the same time, when movable-view is smaller than movable-area, the moving range of movable-view is within movable-area. When movable-view is larger than movable-area, the moving range of movable-view must include movable-area (the x-axis and y-axis directions are considered separately).

movable-view: tag attributes set the moving direction direction="all"; support two-finger zoom scale="{{true}}"; maximum and minimum zoom multiples scale-min="0.3" and scale-max="1.5"; if you want to bind the trigger condition, you can also add a binding method, drag the binding event: bindchange, zoom binding event bindscale, etc.

Little tips: When the movable-view area is enlarged, the x and y coordinates remain unchanged, which will cause the view area to exceed the area. In order to prevent the movable view area from blocking the upper elements, you can reduce the upper limit of the magnification and add some blank area above to increase the aesthetics of the page.

For detailed usage, please refer to the WeChat Mini Program official website manual:
developers.weixin.qq.com/miniprogram…

3. Component business logic

Seat data output: As mentioned last time, seat data is stored in an array, and different seats are represented by different numbers, so we need to make judgments when outputting data. Here, the array data is looped and output through the block tag, and then the array data is judged and output in different formats.

Select seats: When the user clicks on a seat, the seat style changes and the seat data is recorded. First, the index data in the loop needs to be transmitted wx:for="{{seatings}}" wx:key="Index" data-index="index", the selected event is bound to the view of each seat, and the index data is received in the selected method of the js file;

We need to use the total number of selected seats (limited to six) and the index array (to store the clicked seats), so we declare selectedIndex: [], selectedNum: 0 in data, and declare the method in methods;

The logic of the selected method: first save the subscript index, and then check whether the element exists in the subscript array (using the array's indexOf() method). If it exists, it means that it has been selected before and you click Cancel again. If you need to delete it, delete the subscript from the subscript array, and reduce the total number of selected seats by one. Otherwise, if it does not exist, check whether the total number of selected seats is less than 6. If it is less, insert the data into the array, and increase the total number of selected seats by one. If it is not less, it indicates that you can select up to six tickets.

At this point, we have the data in the following table, and we can perform more complex business operations! !

Tip: Since the array does not have a method to remove an element, a remove() method is declared separately to get the element index first and then delete it.

selected(e) {
      let index = e.currentTarget.dataset.index;
      if(this.data.selectedIndex.indexOf(index) != -1){
        let selectedIndex = this.remove(this.data.selectedIndex, index);
        let selectedNum = this.data.selectedNum - 1;
        this.setData({
          selectedIndex,
          selectedNum
        })
      }else{
        if(this.data.selectedNum < 6){
        let selectedNum = this.data.selectedNum + 1;
        let selectedIndex = this.data.selectedIndex.concat(index);
            this.setData({
              selectedIndex,
              selectedNum
            })
        }else{
            wx.showToast({
              title: 'Select up to six tickets',
              })
            }
        }
    },
    remove(arr, ele) {
      var index = arr.indexOf(ele); 
      if (index > -1) { 
      arr.splice(index, 1); 
        }
        return arr;
      }

Selected style changes: In the seat view, we use the ternary operator to judge the data: class="{{tools.indexOf(selectedIndex, index)?'selected': ''}}" If the previous result is true, that is, the index of this data exists in the array, then add the selected class name and the seat style changes; otherwise, add an empty class name.

Tips: Since the indexOf method of array is invalid in wxml, we need to declare an indexOf function in the util folder under the same directory as pages for the ternary operation to call, and do it yourself! When using it, just declare it through wxs src="../../util/indexof.wxs" module="tools", and you can use the tools.indexOf method, which has the same effect as the indexOf method that comes with the array~

// indexOf method function indexOf(arr, value) {
  if (arr.indexOf(value) < 0) {
      return false;
  } else {
      return true;
  }
}
module.exports.indexOf = indexOf;

If you need specific component source code, please get it in gitee!
gitee.com/jensmith/so…

Summarize

This is the end of this article about the visual movie seat selection function developed by WeChat mini-program components. For more relevant mini-program visual movie seat selection content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!