xcx

src/components/caseTableItem/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="caseTableItem flex-h">
+    <i class="iconfont icon-yinchenglogo"></i>
+    <div class="itemNo">
+      <a>
+        <div class="centerLabel">
+          <i v-if="String(index + 1).length < 2" class="iconfont icon-0"></i>
+          <i class="iconfont" v-for="(numItem,numIndex) in String(index + 1).length" :key="numIndex" :class="'icon-' + String(index + 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>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['item','index'],
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+    
+  },
+  components: {
+    
+  },
+  created () {
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/caseTableItem/page.scss

@@ -0,0 +1,69 @@
+.caseTableItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+  &>i{
+    display: inline-block;
+    position: absolute;
+    right: .1rem;
+    top: .05rem;
+    font-size: .36rem;
+    z-index: 1;
+    color: rgba(255, 0, 0, .1);
+  }
+  .itemNo{
+    width: .44rem;
+    position: relative;
+    overflow: hidden;
+    margin-left: .15rem;
+    z-index: 2;
+    a{
+      width: 100%;
+      display: block;
+      padding-bottom: 100%;
+      box-sizing: border-box;
+      border: .01rem solid #eee;
+      border-radius: 100%;
+      position: relative;
+      overflow: hidden;
+      div{
+        width: 100%;
+        text-align: center;
+        font-size: 0;
+        white-space: nowrap;
+        i{
+          display: inline-block;
+          font-size: .13rem;
+          color: #666;
+        }
+      }
+    }
+  }
+  &>div.flex-item{
+    margin: 0 .1rem;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    &>div{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      span{
+        width: 100%;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: .13rem;
+        color: #666;
+        line-height: .24rem;
+      }
+      a{
+        line-height: .22rem;
+        color: #fb6b2f;
+        font-size: .13rem;
+      }
+    }
+  }
+}

src/module/sales/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="app"></div>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>

src/module/sales/coffeeIndex/index.vue

@@ -0,0 +1,115 @@
+<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 v-if="navActive === 0">
+            1
+          </li>
+          <li v-if="navActive === 1">
+            2
+          </li>
+          <li v-if="navActive === 2">
+            3
+          </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'
+
+export default {
+  name: '',
+  data () {
+    return {
+      navActive: 0,
+      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: [{}, {}, {}, {}, {}],
+      }]
+    }
+  },
+  computed: {
+
+  },
+  components: {
+    topCaseInfo,
+    caseTableItem,
+  },
+  created () {
+
+  },
+  methods: {
+    cutNav (index) { // 切换nav
+      this.navActive = index
+    },
+    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>

src/module/sales/coffeeIndex/page.scss

@@ -0,0 +1,54 @@
+.mainPage{
+  .top{
+    position: relative;
+    overflow: hidden;
+  }
+  >nav{
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    background: #fff;
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .1);
+    a{
+      text-align: center;
+      line-height: .4rem;
+      font-size: .14rem;
+      color: #ccc;
+      position: relative;
+      &.active{
+        color: #333;
+        &::after{
+          content: '';
+          width: 50%;
+          height: .02rem;
+          background: #fc6243;
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          -webkit-transform: translateX(-50%);
+        }
+      }
+    }
+  }
+  .content{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      
+    }
+  }
+  .selectCase{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .3);
+    z-index: 100;
+  }
+}

src/module/sales/placeOrder/index.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="flex-item flex-v">
+      <div class="banner">
+        <img src="" class="centerLabel cover" alt="">
+        <div class="bannerInfo flex-h">
+          <div class="flex-item">
+            <div>
+              <span>项目名称：xxxx</span>
+            </div>
+          </div>
+          <span>xxx您好！</span>
+        </div>
+      </div>
+      <div class="tableInfo flex-h">
+        <div class="flex-item">
+          <div>
+            <span>桌号：案场11号桌</span>
+            <span>本月已用：150杯</span>
+          </div>
+        </div>
+        <router-link :to="{name: 'coffeeIndex', query: {}}">返回选择桌号</router-link>
+      </div>
+      <div class="content flex-item flex-h">
+        <div class="slideMenus">
+          <div>
+            <ul>
+              <li v-for="(item,index) in menuList" :key="index" :class="{'active': slideMenusActive == index}" @click="cutMenu(index)">
+                <span>{{item.value}}</span>
+                <span>{{item.eValue}}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="flex-item">
+          <div>
+            <swiper :options="swiperOption" ref="mySwiper">
+              <swiper-slide class="swiper-slide" v-for="(item,index) in menuList" :key="index">
+                <div class="flex-v">
+                  <h4>{{item.value + ' ' + item.eValue}}</h4>
+                  <div class="flex-item">
+                    <div>
+                      <swiper :options="subSwiperOption" ref="mySubSwiper">
+                        <swiper-slide class="swiper-slide" v-for="(subItem,subIndex) in item.list" :key="subIndex">
+                          <orderItem :data="subItem" @returnData="calcMenus" @selectSpec="selectSpec"></orderItem>
+                        </swiper-slide>
+                      </swiper>
+                    </div>
+                  </div>
+                </div>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-h">
+      <div class="flex-item">
+        <div>
+          <span>总计</span>
+          <span>{{totalNum}}</span>
+          <span>杯</span>
+          <span>共</span>
+          <span>{{totalPrice}}</span>
+          <span>元</span>
+          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>
+        </div>
+      </div>
+      <!-- <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList)}}">下单</router-link> -->
+      <a @click="showCalcMenu = true">下单</a>
+    </div>
+    <orderPopup :show="showPopup" :data="currentSpec" @closePopup="closePopup" @returnData="calcMenus"></orderPopup>
+    <calcMenu :show="showCalcMenu" :totalNum="totalCupNum" :data="settlementList" @returnData="calcMenus" @emptyMenus="emptyMenus" @closeCalcMenu="closeCalcMenu" @placeOrder="placeOrder"></calcMenu>
+  </div>
+</template>
+
+<script>
+import orderItem from '../../../components/orderItem/index'
+import orderPopup from '../../../components/orderPopup/index'
+import calcMenu from '../../../components/calcMenu/index'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+
+export default {
+  name: '',
+  data () {
+    const _self = this
+    return {
+      totalCupNum: 0, // 共计使用杯数
+      showCalcMenu: false, // 显隐已点菜单弹窗
+      currentSpec: null, // 当前选择规格
+      showPopup: false, // 显隐选规格弹窗
+      totalNum: 0, // 总杯数
+      totalPrice: 0, // 总价格
+      settlementList: [], // 商品选择清单
+      slideMenusActive: 0, // 左侧菜单选中索引值
+      menuList: [{ // 商品数据
+        value: '咖啡',
+        eValue: 'Coffee',
+        id: '1',
+        status: 1,
+        list: [{
+          img: '',
+          name: '商品名称',
+          id: '1-1',
+          status: 1,
+          spec: [{
+            value: '去冰',
+            id: '1-1-1',
+            num: 0,
+            status: 0,
+            price: '10',
+          }, {
+            value: '少冰',
+            id: '1-1-2',
+            num: 0,
+            status: 1,
+            price: '15',
+          }, {
+            value: '正常',
+            id: '1-1-3',
+            num: 0,
+            status: 1,
+            price: '20',
+          }, {
+            value: '多冰',
+            id: '1-1-4',
+            num: 0,
+            status: 1,
+            price: '25',
+          }],
+          price: '100',
+        }, {
+          img: '',
+          name: '商品名称',
+          id: '1-2',
+          spec: [],
+          status: 0,
+          price: '100',
+        }, {
+          img: '',
+          name: '商品名称',
+          id: '1-3',
+          spec: [],
+          status: 1,
+          price: '100',
+        }, {
+          img: '',
+          name: '商品名称',
+          id: '1-4',
+          spec: [],
+          status: 1,
+          price: '100',
+        }, {
+          img: '',
+          name: '商品名称',
+          id: '1-5',
+          spec: [],
+          status: 1,
+          price: '100',
+        }, {
+          img: '',
+          name: '商品名称',
+          id: '1-6',
+          spec: [],
+          status: 1,
+          price: '100',
+        }],
+      }, {
+        value: '咖啡一',
+        eValue: 'Coffee',
+        id: '2',
+        status: 1,
+        list: [],
+      }, {
+        value: '咖啡二',
+        eValue: 'Coffee',
+        id: '3',
+        status: 1,
+        list: [],
+      }, {
+        value: '咖啡三',
+        eValue: 'Coffee',
+        id: '4',
+        status: 1,
+        list: [],
+      }, {
+        value: '咖啡四',
+        eValue: 'Coffee',
+        id: '5',
+        status: 1,
+        list: [],
+      }],
+      swiperOption: {
+        observer: true,
+        direction: 'vertical',
+        on: {
+          transitionEnd () {
+            _self.slideMenusActive = this.activeIndex
+          },
+        }
+      },
+      subSwiperOption: {
+        observer: true,
+        direction: 'vertical',
+        nested: true,
+        slidesPerView: 'auto',
+        freeMode: true,
+        freeModeMomentumVelocityRatio: 2,
+      },
+    }
+  },
+  computed: {
+    MySwiper () {
+      return this.$refs.mySwiper.swiper
+    },
+    MySubSwiper () {
+      return this.$refs.mySubSwiper.swiper
+    },
+  },
+  components: {
+    swiper,
+    swiperSlide,
+    orderItem,
+    orderPopup,
+    calcMenu,
+  },
+  created () { },
+  methods: {
+    placeOrder () { // 下单
+      this.$router.push({name: 'orderList', query: {}})
+    },
+    closeCalcMenu () { // 关闭已选菜单
+      this.showCalcMenu = false
+    },
+    emptyMenus () { // 清空菜单
+      this.settlementList = []
+    },
+    closePopup () { // 关闭规格弹窗
+      this.showPopup = false
+      this.currentSpec = null
+    },
+    selectSpec (val) { // 选规格
+      this.currentSpec = val
+      this.showPopup = true
+    },
+    cutMenu (index) { // 切换菜单
+      this.MySwiper.slideTo(index, 300)
+    },
+    calcMenus (val) { // 计算清单
+      var bool = true, arr = this.settlementList.slice()
+      if (val.specId === null) {
+        for (var n = 0; n < arr.length; n++) {
+          if (arr[n].id === val.id && arr[n].specId === null) {
+            bool = false
+            arr[n] = val
+          }
+        }
+        if (bool) {
+          arr.push(val)
+        }
+      } else {
+        for (var n = 0; n < arr.length; n++) {
+          if (arr[n].specId === val.specId) {
+            bool = false
+            arr[n] = val
+          }
+        }
+        if (bool) {
+          arr.push(val)
+        }
+      }
+      for (var n = 0; n < arr.length; n++) {
+        if (arr[n].num === 0 || arr[n].defaultNum === 0) {
+          arr.splice(n, 1)
+        }
+      }
+      this.settlementList = arr
+      // console.log(JSON.stringify(this.settlementList))
+      this.calcTotalNum()
+    },
+    calcTotalNum () { // 计算总数量、价格
+      var num = 0, price = 0
+      if (!this.settlementList.length) {
+        this.totalNum = 0
+        this.totalPrice = 0
+        return
+      }
+      for (var n = 0; n < this.settlementList.length; n++) {
+        if (this.settlementList[n].specId === null) {
+          num += this.settlementList[n].defaultNum
+          price += this.settlementList[n].defaultPrice * this.settlementList[n].defaultNum
+        } else {
+          num += this.settlementList[n].num
+          price += this.settlementList[n].price * this.settlementList[n].num
+        }
+      }
+      this.totalNum = num
+      this.totalPrice = price
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/sales/placeOrder/page.scss

@@ -0,0 +1,241 @@
+.mainPage{
+  &>div.flex-item{
+    position: relative;
+    z-index: 1;
+    .banner{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      padding-bottom: 35%;
+      background: #eee;
+      img{
+        z-index: 1;
+      }
+      .bannerInfo{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        z-index: 2;
+        &>div{
+          margin-left: .2rem;
+          &>div{
+            width: 100%;
+            font-size: 0;
+            white-space: nowrap;
+            span{
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              font-size: .15rem;
+              color: #fff;
+              line-height: .4rem;
+            }
+          }
+        }
+        &>span{
+          font-size: .15rem;
+          color: #fff;
+          line-height: .4rem;
+          margin-right: .2rem;
+          margin-left: .1rem;
+        }
+      }
+    }
+    .tableInfo{
+      align-items: center;
+      border-bottom: .01rem solid #eee;
+      &>div{
+        margin-left: .2rem;
+        &>div{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          font-size: 0;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          span{
+            display: inline-block;
+            line-height: .4rem;
+            font-size: .13rem;
+            margin-right: .1rem;
+          }
+        }
+      }
+      &>a{
+        line-height: .22rem;
+        font-size: .13rem;
+        color: #fc6243;
+        border: .01rem solid #fc6243;
+        border-radius: .04rem;
+        padding: 0 .05rem;
+        margin-right: .2rem;
+      }
+    }
+    .content{
+      .slideMenus{
+        width: 24%;
+        min-width: .9rem;
+        position: relative;
+        overflow: hidden;
+        &>div{
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          background: #f7f7f7;
+          ul{
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+            &>li{
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              padding: .18rem 0;
+              &.active{
+                background: #fff;
+              }
+              span{
+                width: 100%;
+                display: block;
+                text-align: center;
+                line-height: .22rem;
+                font-size: .14rem;
+              }
+            }
+          }
+        }
+      }
+      &>div.flex-item{
+        &>div{
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          overflow: hidden;
+          &>div{
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
+            &>div{
+                &>.swiper-slide{
+                  &>div{
+                    width: 100%;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    overflow: hidden;
+                    &>h4{
+                      width: 100%;
+                      display: block;
+                      line-height: .24rem;
+                      font-size: .11rem;
+                      text-indent: .1rem;
+                      margin-top: .1rem;
+                    }
+                    &>div{
+                      &>div{
+                        width: 100%;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        bottom: 0;
+                        overflow: hidden;
+                        &>div{
+                          width: 100%;
+                          position: absolute;
+                          left: 0;
+                          top: 0;
+                          bottom: 0;
+                          .swiper-slide{
+                            height: auto !important;
+                            padding: .15rem 0;
+                            position: relative;
+                            &::after{
+                              content: '';
+                              width: 100%;
+                              height: .01rem;
+                              background: #eee;
+                              position: absolute;
+                              left: 0;
+                              bottom: 0;
+                              z-index: 1;
+                            }
+                            &::before{
+                              content: '';
+                              width: .36rem;
+                              height: .01rem;
+                              background: #fff;
+                              position: absolute;
+                              left: 0;
+                              bottom: 0;
+                              z-index: 2;
+                            }
+                          }
+                        }
+                      }
+                    }
+                    .menuItem{
+                      width: 100%;
+                      position: relative;
+                      overflow: hidden;
+                    }
+                  }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &>div.flex-h{
+    padding: .1rem 0;
+    box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .05);
+    position: relative;
+    z-index: 100;
+    a{
+      line-height: .4rem;
+      background: #fc6243;
+      color: #fff;
+      padding: 0 .5rem;
+      border-radius: .4rem;
+      font-size: .15rem;
+      margin-right: .2rem;
+    }
+    div{
+      font-size: 0;
+      white-space: nowrap;
+      span{
+        display: inline-block;
+        line-height: .4rem;
+        vertical-align: middle;
+        font-size: .13rem;
+        margin-left: .05rem;
+        &:first-child{
+          margin-left: .2rem;
+        }
+        &:nth-child(2){
+          font-size: .18rem;
+        }
+      }
+      i{
+        display: inline-block;
+        line-height: .4rem;
+        vertical-align: middle;
+        font-size: .13rem;
+        margin-left: .1rem;
+      }
+    }
+  }
+}

src/module/sales/router.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+import coffeeIndex from './coffeeIndex/index' // 点单首页
+import placeOrder from './placeOrder/index' // 城咖啡-点单
+
+Vue.use(Router)
+
+const router = new Router({
+  routes: [{
+    path: '/coffeeIndex',
+    name: 'coffeeIndex',
+    component: coffeeIndex,
+    children: []
+  },{
+    path: '/placeOrder',
+    name: 'placeOrder',
+    component: placeOrder,
+    children: []
+  }],
+})
+
+router.beforeEach((to, from, next) => {
+  
+  next()
+})
+
+export default router

src/module/sales/sales.html

@@ -2,7 +2,9 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>sales</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8" />
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_w203meltjv9.css">
+  <title>城的空间</title>
 </head>
 <body>
 <div id="app"></div>

src/module/sales/sales.js

@@ -2,12 +2,23 @@ import Vue from 'vue'
 import App from './App'
 import Vant from 'vant'
 import 'vant/lib/vant-css/index.css'
+import router from './router'
+import store from '../../store/index'
+import Vuex from 'vuex'
+import Ajax from '../../util/ajax'
+import api from '../../util/api'
+import toolClass from '../../util/util'
 
 Vue.use(Vant)
-
+Vue.use(Vuex)
+Vue.prototype.$api = api
+Vue.prototype.$ajax = Ajax
+Vue.prototype.toolClass = toolClass
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   template: '<App/>',
-  components: { App }
+  components: { App },
+  router,
+  store,
 })

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mainPage flex-v">
     <div class="top">
-      <topCaseInfo :data="topCaseInfoData" @selectCase="selectCase"></topCaseInfo>
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
     </div>
     <div class="content flex-item">
       <div>
@@ -15,21 +15,7 @@
                 </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>
+                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
                   </li>
                   <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>
                 </ul>
@@ -52,6 +38,7 @@
 </template>
 
 <script>
+import caseTableItem from '../../../../components/caseTableItem/index'
 import topCaseInfo from '../../../../components/topCaseInfo/index'
 
 export default {
@@ -59,13 +46,13 @@ export default {
   data () {
     return {
       topCaseInfoData: {
-        caseName: 'xxx',
+        caseName: '',
         caseId: '',
         showSelect: true,
         userName: 'xxx'
       },
       caseInfo: {
-        value: '案场一',
+        value: '',
         id: ''
       },
       showSelect: false,
@@ -96,6 +83,7 @@ export default {
   },
   components: {
     topCaseInfo,
+    caseTableItem,
   },
   created () {
 
@@ -103,6 +91,8 @@ export default {
   methods: {
     selectCase (val) { // 选择案场
       this.caseInfo = val
+      this.topCaseInfoData.caseName = val.value
+      this.topCaseInfoData.caseId = val.id
       this.showSelect = false
     },
   }

src/module/user/mainPage/coffeeIndex/page.scss

@@ -2,35 +2,6 @@
   .top{
     position: relative;
     overflow: hidden;
-    // align-items: center;
-    // background: rgba(0, 0, 0, .3);
-    // padding: .05rem 0;
-    // &>*{
-    //   margin-left: .05rem;
-    //   line-height: .2rem;
-    //   font-size: .12rem;
-    //   color: #fff;
-    // }
-    // i{
-    //   font-size: .15rem;
-    // }
-    // a{
-    //   color: #fb6b2f;
-    //   text-decoration: underline;
-    //   margin-left: .1rem;
-    // }
-    // &>*:first-child{
-    //   margin-left: .2rem;
-    // }
-    // &>div{
-    //   text-align: right;
-    //   margin-right: .2rem;
-    //   font-size: 0;
-    //   span{
-    //     font-size: .12rem;
-    //     color: #fff;
-    //   }
-    // }
   }
   .content{
     &>div{
@@ -79,7 +50,6 @@
                 box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
                 min-width: 40%;
                 margin-top: .2rem;
-                align-items: center;
                 &:nth-child(2n){
                   margin-left: .2rem;
                 }
@@ -87,69 +57,6 @@
                   box-shadow: none;
                   background: none;
                 }
-                &>i{
-                  display: inline-block;
-                  position: absolute;
-                  right: .1rem;
-                  top: .05rem;
-                  font-size: .36rem;
-                  z-index: 1;
-                  color: rgba(255, 0, 0, .1);
-                }
-                .itemNo{
-                  width: .44rem;
-                  position: relative;
-                  overflow: hidden;
-                  margin-left: .15rem;
-                  z-index: 2;
-                  a{
-                    width: 100%;
-                    display: block;
-                    padding-bottom: 100%;
-                    box-sizing: border-box;
-                    border: .01rem solid #eee;
-                    border-radius: 100%;
-                    position: relative;
-                    overflow: hidden;
-                    div{
-                      width: 100%;
-                      text-align: center;
-                      font-size: 0;
-                      white-space: nowrap;
-                      i{
-                        display: inline-block;
-                        font-size: .13rem;
-                        color: #666;
-                      }
-                    }
-                  }
-                }
-                &>div.flex-item{
-                  margin: 0 .1rem;
-                  position: relative;
-                  overflow: hidden;
-                  z-index: 2;
-                  &>div{
-                    width: 100%;
-                    position: relative;
-                    overflow: hidden;
-                    span{
-                      width: 100%;
-                      display: block;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      white-space: nowrap;
-                      font-size: .13rem;
-                      color: #666;
-                      line-height: .24rem;
-                    }
-                    a{
-                      line-height: .22rem;
-                      color: #fb6b2f;
-                      font-size: .13rem;
-                    }
-                  }
-                }
               }
             }
           }