wechat/src/pages/sales/coffeeIndex/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
    </div>
    <nav class="flex-h">
      <a class="flex-item" v-for="(item,index) in cutNavList" :key="index" :class="{'active': navActive === index}" @click="cutNav(index)">{{item.value}}</a>
    </nav>
    <div class="content flex-item">
      <div>
        <ul>
          <li :hidden="navActive !== 0" class="placeOrder">
            <div class="topInfo flex-h">
              <div class="flex-item">
                <div>
                  <span>共计已使用：{{caseTotal.total}}杯</span>
                </div>
              </div>
              <div class="flex-item">
                <div>
                  <span>本月已用：{{caseTotal.monthtotal}}杯</span>
                </div>
              </div>
              <a>点单记录</a>
            </div>
            <div class="areaListParent flex-h">
              <div class="flex-item">
                <div>
                  <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>
          </li>
          <li :hidden="navActive !== 1" class="my-card">
            <div class="list-box">
              <div class="cardAndCouponInfo flex-h">
                <div class="flex-item">
                  <div>
                    <span>卡券货值总额：</span>
                    <span>￥1000</span>
                    <span>万</span>
                  </div>
                </div>
                <router-link :to="{name: 'salesRecord',query: {}}">销售记录</router-link>
              </div>
              <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
            </div>
          </li>
          <li :hidden="navActive !== 2" class="customer-card">
            <div class="list-box">
              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></customerCard>
            </div>
          </li>
        </ul>
      </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'
import myCard from '../../../components/myCard/myCard'
import customerCard from '../../../components/customerCard/customerCard'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('app')
const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')

export default {
  name: '',
  data () {
    return {
      navActive: 1,
      cutNavList: [{
        value: '城咖啡',
        id: '1',
      }, {
        value: '我的卡券',
        id: '2',
      }, {
        value: '我的客户',
        id: '3',
      }],
      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: [{}, {}, {}, {}, {}],
      }],
      cardList: [
        {
          invalid: true
        },
        {
          invalid: false
        },
        {
          invalid: false
        }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList,
      CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
    }),
    ...mapCaseState({
      caseTotal: x => x.caseTotal,
    })
  },
  components: {
    topCaseInfo,
    caseTableItem,
    myCard,
    customerCard
  },
  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
      })
      this.getCaseTotal({
        caseid: this.topCaseInfoData.CaseId
      })
    })
  },
  methods: {
    ...actions([
      'getCaseList',
    ]),
    ...caseTableActions([
      'getCaseTableList',
    ]),
    ...mapCaseActions([
      'getCaseTotal',
    ]),
    selectCase (val) { // 选择案场
      this.topCaseInfoData.CaseName = val.CaseName
      this.topCaseInfoData.CaseId = val.CaseId
      this.getCaseTableList({
        caseid: this.topCaseInfoData.CaseId
      })
      this.ShowSelect = false
    },
    cutNav (index) { // 切换nav
      this.navActive = index
    },
    share (item) {
      console.log(item)
    }
  }
}
</script>

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