wechat/src/pages/user/mainPage/coffeeIndex/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
    </div>
    <div class="content flex-item">
      <div>
        <div class="flex-h">
          <div class="flex-item">
            <ul class="areaList">
              <li v-for="(item,index) in list" :key="index">
                <div class="title">
                  <i class="iconfont icon-yinchenglogo"></i>
                  <span>{{item.name}}</span>
                </div>
                <ul class="subAreaList flex-h">
                  <li class="flex-item flex-h" v-for="(subItem,subIndex) in item.list" :key="subIndex">
                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
                  </li>
                  <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="selectCase" :hidden="!showSelect"></div>
    <van-picker :hidden="!showSelect"
      show-toolbar
      title="选择案场"
      :columns="caseList"
      @cancel="showSelect = false"
      @confirm="selectCase"
      value-key="value"
    />
  </div>
</template>

<script>
import caseTableItem from '../../../../components/caseTableItem/index'
import topCaseInfo from '../../../../components/topCaseInfo/index'

export default {
  name: '',
  data () {
    return {
      topCaseInfoData: {
        caseName: '',
        caseId: '',
        showSelect: true,
        userName: 'xxx'
      },
      caseInfo: {
        value: '',
        id: ''
      },
      showSelect: false,
      caseList: [{
        value: '案场一',
        id: ''
      }, {
        value: '案场二',
        id: ''
      }, {
        value: '案场三',
        id: ''
      }, {
        value: '案场四',
        id: ''
      }],
      list: [{
        name: '案场名称1',
        list: [{}, {}, {}, {}, {}],
      }, {
        name: '案场名称2',
        list: [{}, {}, {}, {}, {}],
      }]
    }
  },
  computed: {

  },
  components: {
    topCaseInfo,
    caseTableItem,
  },
  created () {

  },
  methods: {
    selectCase (val) { // 选择案场
      this.caseInfo = val
      this.topCaseInfoData.caseName = val.value
      this.topCaseInfoData.caseId = val.id
      this.showSelect = false
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>