bsdgy-front/src/pages/activity/useActivityStepThree.vue

<template>
  <div style="padding: 0 40px;">
    <div class="selectClass">
      <Checkbox v-model="allSelect" @on-change="isSelectAllCompany">全选</Checkbox>
      <i-input icon="search" placeholder="请输入店铺名称或编码" style="width: 250px"></i-input>
    </div>
    <div class="companyTable">
      <div class="companyListClass">
          <div :class="isSelect[index] == true ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(item,index)" v-for="(item, index) in shopList" :key="index" >{{item.label}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import ActivityManager from "../../services/ActivityManager/ActivityManager"
import store from "../../store/index"
export default {
  name: "useActivityStepThree",
  data() {
		return {
      allSelect: false,
      shopList: [],
      isSelect:[],
      selectValue: [],
      shopListData: []
		}
  },
	mounted() {
    this.getShopInfo()
  },
  methods: {
    getShopInfo() {
      let that = this
      let data = {
        userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId
      }
			ActivityManager.getShop(data, function (data) {
          that.shopList = []
          that.shopListData = data.data.results
          data.data.results.forEach(element => {
            that.isSelect.push('')
            that.selectValue.push('')
            that.shopList.push({
              label: element.name,
              value: element.id
            })
          });
			})
    },
    isSelectAllCompany() {
      if(this.allSelect === true) {
        this.isSelect.forEach((element,index) => {
          this.isSelect.splice(index,1,true)
        })
        this.shopList.forEach((element,index) => {
          this.selectValue.splice(index,1,element.id)
        })
      } else {
        this.isSelect.forEach((element,index) => {
          this.isSelect.splice(index,1,'')
        })
        this.shopList.forEach((element,index) => {
          this.selectValue.splice(index,1,'')
        })
      }
    },
    selectTag(value,index) {
      this.isSelect.splice(index,1,!this.isSelect[index])
      if(this.isSelect[index] === true) {
        this.selectValue.splice(index, 1, value.value)
      } else if(this.isSelect[index] === false) {
        this.selectValue.splice(index, 1, '')
      }
      let selectShopValue = []
      this.isSelect.forEach((element,index) => {
        if(element === true) {
          selectShopValue.push(this.selectValue[index])
        }
      })
      let selectShopValueObject = []
      for(let j=0; j< selectShopValue.length; j++) {
        for(let i = 0; i< this.shopList.length; i++){
          if(this.shopList[i].value === selectShopValue[j]) {
            selectShopValueObject.push(this.shopListData[i])
          }
        }
      }
      store.getters.useData.selectShopValue = selectShopValueObject
    }
  }
}
</script>

<style  scoped>
.selectClass {
  display: flex;
  justify-content: space-between;
}
.companyTable {
  width: 3150px;
  height: 1000px;
  border: 1px solid;
  margin-top: 40px;
  padding: 40px;
  overflow:scroll;
}
.companyListClass {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tagClass {
  width: 31%;
  margin-bottom: 30px;
  height: 120px;
  line-height: 120px;
  border: 1px solid #e3e8ee!important;
  color: #657180!important;
  background: #fff;
  padding: 0 12px;
}
.tagColorClass {
  background: #6ac1d1;
}
</style>