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

<template>
  <div class="mainPage flex-v">
    <div class="top flex-h">
      <i class="iconfont icon-dingwei"></i>
      <span>{{caseInfo.value}}</span>
      <a @click="showSelect = true">请选择</a>
      <div class="flex-item">
        <span>Alise您好！</span>
      </div>
    </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">
                    <i class="iconfont icon-yinchenglogo"></i>
                    <div class="itemNo">
                      <a>
                        <div class="centerLabel">
                          <i v-if="String(subIndex + 1).length < 2" class="iconfont icon-0"></i>
                          <i class="iconfont" v-for="(numItem,numIndex) in String(subIndex + 1).length" :key="numIndex" :class="'icon-' + String(subIndex + 1).substring(numIndex, numIndex + 1)"></i>
                        </div>
                      </a>
                    </div>
                    <div class="flex-item">
                      <div>
                        <span>案场一号桌</span>
                        <router-link :to="{name: 'placeOrder', query: {}}">选择点单</router-link>
                      </div>
                    </div>
                  </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>

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

  },
  components: {

  },
  created () {

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

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