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

<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer != undefined ? userInfo.customer.CustomerName : ''" @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 CaseTableList" :key="index">
                <div class="title">
                  <i class="iconfont icon-yinchenglogo"></i>
                  <span>{{item.AreaName}}</span>
                </div>
                <ul class="subAreaList flex-h">
                  <router-link tag="li" class="flex-item flex-h" v-for="(subItem,subIndex) in item.Tables" :key="subIndex" :to="{name: 'placeOrder', query: { tableid: encodeURI(subItem.TableId), tableno: encodeURI(subItem.TableNo), caseid: encodeURI(subItem.CaseId), casename: encodeURI(topCaseInfoData.CaseName), areaid: encodeURI(subItem.AreaId), areaname: encodeURI(item.AreaName)}}">
                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
                  </router-link>
                  <li class="flex-item noData" v-if="item.Tables.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="CaseName"
    />
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('app')
const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
import caseTableItem from '../../../../components/caseTableItem/index'
import topCaseInfo from '../../../../components/topCaseInfo/index'

export default {
  name: '',
  data () {
    return {
      topCaseInfoData: {
        CaseName: '',
        CaseId: '',
        ShowSelect: true,
      },
      ShowSelect: false,
      list: [{
        name: '案场名称1',
        list: [{}, {}, {}, {}, {}],
      }, {
        name: '案场名称2',
        list: [{}, {}, {}, {}, {}],
      }]
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList,
      CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
    })
  },
  components: {
    topCaseInfo,
    caseTableItem,
  },
  created () {
    this.getCaseList().then((res) => {
      this.topCaseInfoData.CaseName = res.cases[0].CaseName
      this.topCaseInfoData.CaseId = res.cases[0].CaseId
      this.getCaseTableList({
        caseid: this.topCaseInfoData.CaseId
      })
    })
  },
  methods: {
    ...actions([
      'getCaseList',
    ]),
    ...caseTableActions([
      'getCaseTableList',
    ]),
    selectCase (val) { // 选择案场
      this.topCaseInfoData.CaseName = val.CaseName
      this.topCaseInfoData.CaseId = val.CaseId
      this.getCaseTableList({
        caseid: this.topCaseInfoData.CaseId
      })
      this.ShowSelect = false
    },
  }
}
</script>

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