index.vue

<template>
  <!-- 工作区域 -->
  <div class="workRegion">
    <div class="list">
      <div class="item flex" v-for="(item, index) in list" :key="index" @click="selectItem(item,index)">
        <div class="select" :class="{ selected: item.selected}">
          <i class="iconfont icon-icon_duihao-mian" v-if="item.selected"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="seat"></div>
    <div class="btm flex">
      <div class="btn" :class="{ btn1: onInput }" @click="confirm">确定</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "workRegion",
  data() {
    return {
      list: [],
      selectList: [],
    };
  },
  components: {},
  computed: {
    selectListIds() {
      return this.selectList.map(item=>item.id)
    },
    listIds() {
      return this.list.map(item=>item.id)
    }
  },
  onReady() {
    wx.setNavigationBarTitle({ title: "工作区域" });
  },
  onLoad() {
    console.log("---onLoad");
  },
  onShow() {
    for(let i = 0; i<20;i++){
      this.list.push({
        id:i,
        name: `云顶大酒店${i}`,
        selected: false,
      })
    }
    console.log("---onready");
    let workAreaList = wx.getStorageSync('wo-selectWorkAreaList');
    if(workAreaList){
      this.selectList = JSON.parse(workAreaList);
    }
    console.log(this.selectList,this.selectListIds,'--this.selectList')
    this.list.forEach(item=>{
      if(this.selectListIds.includes(item.id)){
        item.selected = true;
      } else {
        item.selected = false;
      }
    })
    console.log(this.list,'---------------63')
    console.log("---onShow");
  },
  methods: {
    selectItem(item,index){
      item.selected = !item.selected
      console.log(item,index,'----56')
      console.log(this.selectListIds,'----57')
      if(this.selectListIds.includes(item.id)) {
        this.selectList.splice(this.selectListIds.indexOf(item.id),1);
      } else {
        this.selectList.push(item);
      }
    },
    confirm() {
      console.log(this.selectList,'--selectList')
      wx.setStorageSync('wo-selectWorkAreaList', JSON.stringify(this.selectList));
      wx.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.workRegion {
  .list {
    .item {
      padding: 18px 24px;
      border-bottom: 1px solid #d8d8d8;
      align-items: center;
      .select {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #d8d8d8;
        i {
          font-size: 20px;
          color: #229df1;
        }
      }
      .selected {
        border-color: transparent;
      }
      .name {
        margin-left: 10px;
        flex: 1;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
      }
    }
  }
  .seat {
    width: 100%;
    height: 60px;
  }
  .btm {
    position: fixed;
    bottom: 0;
    height: 60px;
    background: #fff;
    width: 100%;
    justify-content: center;
    align-items: center;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: 46px;
      border-radius: 4px;
      color: #fff;
      background: #229df1;
    }
  }
}
</style>