标签：flex res 微信 电影院 height let Demo setData view

效果：

渲染：

<!-- 中间标志 -->
<view class='view-price'>
  <view class='view-price-num'>
    <image class='view-price-img' src='img/seat.png'></image>可选</view>
  <view class='view-price-num'>
    <image class='view-price-img' src='img/noseat.png'></image>不可选</view>
  <view class='view-price-num'>
    <image class='view-price-img' src='img/select.png'></image>已选</view>
  <view class='view-price-num'>
    <image class='view-price-img' src='img/seatss.png'></image>有人</view>
</view>
<!-- 座位 -->
<view class='view-all'>
  <view class='view-price-column'>
    <block wx:for="{{seatClumn}}">
      <view class='view-price-column-num' style='background:{{item.color}};'>
        <text style='width:100%;text-align:center;'>{{item.name}}</text>
      </view>
    </block>
  </view>
  <view style='width:80%;'>
    <view wx:for="{{seatAll}}" wx:for-item="all" wx:for-index="allIdx" class='view-seat-all'>
      <view class='view-up-seat'>
        <view class='view-left-seat-up'>
          <view wx:for="{{all.A}}" wx:for-index="itemIdx">
            <image bindtap='clickSeat' data-All='{{allIdx}}' data-On='A' data-Item="{{itemIdx}}" class='view-price-img-up' style='transform: rotate(180deg);' src='img/{{item.name == "*" ? "noseat":(item.name ? "seatss":(item.nameSeat == selectSeat ? "select":"seat"))}}.png'></image>
          </view>
        </view>
        <view class='view-left-seat-up'>
          <view wx:for="{{all.B}}" wx:for-index="itemIdx">
            <image bindtap='clickSeat' data-All='{{allIdx}}' data-On='B' data-Item="{{itemIdx}}" class='view-price-img-up' src='img/{{item.name == "*" ? "noseat":(item.name ? "seatss":(item.nameSeat == selectSeat ? "select":"seat"))}}.png'></image>
          </view>
        </view>
      </view>
      <view class='view-bottom-seat'>
        过道
      </view>
    </view>
  </view>
</view>
<i-button bind:click="submitApplication" wx:if="{{selectSeat.length}}" type="primary" size="small">申请座位{{selectSeat}}</i-button>
<i-modal title="持有人" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1">
  <view>{{nameSeatOn}}</view>
</i-modal>
<i-spin size="large" fix wx:if="{{ spinShow }}"></i-spin>
<i-message id="message" />

逻辑层：

const {
  $Message
} = require('../../dist/base/index');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    visible1: false,
    nameSeatOn: '',
    allS: '',
    onS: '',
    itemS: '',
    selectSeat: '',
    seatAll: [],
    seatClumn: [],
    spinShow: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function(options) {
    let _this = this
    const db = wx.cloud.database()
    let tempSeatClumn = []
    let tempSeatAll = []
    _this.setData({
      spinShow: true
    })
    db.collection('sXuns_seatClumn').get().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        tempSeatClumn.push(res.data[i])
      }
      _this.setData({
        seatClumn: tempSeatClumn
      })
    })
    db.collection('sXuns_seatAll').get().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        tempSeatAll.push(res.data[i])
      }
      _this.setData({
        seatAll: tempSeatAll
      })
    })
    setTimeout(res => {
      _this.setData({
        spinShow: false
      })
    }, 1500)
  },
  clickSeat: function(res) {
    let _this = this
    let all = res.currentTarget.dataset.all
    let on = res.currentTarget.dataset.on
    let item = res.currentTarget.dataset.item
    let temp = ''
    if (on == "A") {
      temp = _this.data.seatAll[all].A[item]
    } else {
      temp = _this.data.seatAll[all].B[item]
    }
    if (temp.name) {
      _this.setData({
        nameSeatOn: temp.nameSeat + ":" + temp.name
      })
      this.setData({
        visible1: true
      });
    } else {
      if (_this.data.selectSeat != temp.nameSeat) {
        _this.setData({
          selectSeat: temp.nameSeat
        })
      } else {
        _this.setData({
          allS: all,
          onS: on,
          itemS: item,
          selectSeat: ''
        })
      }
    }
    console.log("数据", _this.data.nameSeatOn)
  },
  handleClose1() {
    this.setData({
      visible1: false
    });
  },
  submitApplication: function() {
    $Message({
      content: '已提交后台审核',
      type: 'success'
    });
  }
})

样式：

.view-price {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 20rpx 0rpx;
  border-bottom: #dcdcdc solid 2rpx;
  background: white;
}

.view-price-num {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  border: #dcdcdc solid 2rpx;
  width: 148rpx;
  text-align: center;
  display: flex;
}

.view-price-img {
  width: 30rpx;
  height: 30rpx;
  padding: 16rpx 10rpx;
}

.view-all {
  display: flex;
  flex-direction: row;
  
}

.view-price-column {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-around;
  padding: 20rpx 10rpx;
  border-bottom: #dcdcdc solid 2rpx;
  background: white;
  width: 20%;
}

.view-price-column-num {
  height: 260rpx;
  line-height: 270rpx;
  font-size: 20rpx;
  border: #dcdcdc solid 1rpx;
  width: 148rpx;
  text-align: center;
  display: flex;
  color: #fff;
}

.view-price-column-num:last-child{
  height: 40rpx;
  line-height: 30rpx;
  font-size: 20rpx;
  border: #dcdcdc solid 1rpx;
  width: 148rpx;
  text-align: center;
  display: flex;
   color: #666;
}


.view-up-seat {
  margin: 0 auto;
  background: #fff;
  height: 170rpx;
  margin-top: 10rpx;
  display: flex;
  flex-direction: column;
}

.view-left-seat-up {
  display: flex;
  flex-direction: row;
}

.view-price-img-up {
  width: 60rpx;
  height: 60rpx;
  margin: 3rpx;
}

.view-bottom-seat{
  background: #ce590c;
  text-align: center;
  color: #fff;
  height: 40rpx;
  line-height: 34rpx;
}

.view-seat-all{
  width: 90%;
  margin: 0 auto;
  font-size: 24rpx;
}

标签：flex,res,微信,电影院,height,let,Demo,setData,view
来源： https://blog.csdn.net/weixin_41593408/article/details/95640618

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。