xcx

src/common/css/reset.css

 
 .van-toast div{
 	color: white;
+}
+
+.van-picker{
+	z-index: 101;
 }

src/components/calcMenu/index.vue

+<template>
+  <div class="calcMenu" :class="{'show':show}">
+    <div>
+      <div class="top">
+        <i class="iconfont icon-guanbi"></i>
+        <span>当前已点菜单</span>
+      </div>
+      <div class="content">
+        <span class="noData" v-if="!data.length">暂未选择任何商品哦~~~快去下单！</span>
+        <div class="emptyMenus">
+          <a>
+            <i class="iconfont icon-qingkong"></i>
+            <span>清空已点菜单</span>
+          </a>
+        </div>
+        <div class="list flex-h">
+          <div class="flex-item">
+            <div>
+              <ul>
+                <li class="flex-h" v-for="(item,index) in data" :key="index">
+                  <span>{{item.name}}</span>
+                  <span v-if="item.specName !== null">{{item.specName}}</span>
+                  <span>{{item.defaultPrice !== null ? item.defaultPrice : item.price}}元/份</span>
+                  <div class="flex-item">
+                    <div>
+                      <i class="iconfont icon-jian" @click="subtract(item)"></i>
+                      <input type="tel" v-if="item.defaultNum !== null" v-model="item.defaultNum">
+                      <input type="tel" v-else v-model="item.num">
+                      <i class="iconfont icon-jia active" @click="add(item)"></i>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['show', 'data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    add (item) { // 增加
+      this.calc(item, true)
+    },
+    subtract (item) { // 减
+      this.calc(item, false)
+    },
+    calc (item, bool) { // 增减
+      var target = null
+      if (item.defaultPrice === null) {
+        bool ? item.num += 1 : item.num > 0 ? item.num -= 1 : item.num = 0
+        target = {
+          name: item.name,
+          id: item.id,
+          specId: item.specId,
+          specName: item.specName,
+          num: item.num,
+          defaultNum: null,
+          price: item.price,
+          defaultPrice: null,
+        }
+      } else {
+        bool ? item.num += 1 : item.num > 0 ? item.num -= 1 : item.num = 0
+        target = {
+          name: item.name,
+          id: item.id,
+          specId: null,
+          specName: null,
+          num: null,
+          defaultNum: item.defaultNum,
+          price: null,
+          defaultPrice: item.defaultPrice,
+        }
+      }
+      this.$emit('returnData', target)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/calcMenu/page.scss

+.calcMenu{
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, .5);
+  z-index: 500;
+  display: none;
+  &.show{
+    display: block;
+  }
+  &>div{
+    width: 100%;
+    border-top-left-radius: .1rem;
+    border-top-right-radius: .1rem;
+    background: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    overflow: hidden;
+    .top{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      text-align: right;
+      padding: .05rem 0;
+      border-bottom: .01rem solid #eee;
+      i{
+        font-size: .2rem;
+        color: #666;
+        display: inline-block;
+        position: absolute;
+        right: .1rem;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        z-index: 501;
+      }
+      span{
+        width: 100%;
+        display: block;
+        line-height: .4rem;
+        text-align: center;
+        font-size: .15rem;
+        color: #666;
+        position: relative;
+        z-index: 500;
+      }
+    }
+    .content{
+      width: 100%;
+      max-height: 3rem;
+      position: relative;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      padding-bottom: .1rem;
+      &>span.noData{
+        width: 100%;
+        line-height: .4rem;
+        text-align: center;
+        display: block;
+        font-size: .13rem;
+        color: #ccc;
+      }
+      .emptyMenus{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        text-align: right;
+        a{
+          font-size: 0;
+          white-space: nowrap;
+          display: inline-block;
+          margin-right: .1rem;
+          margin-top: .1rem;
+          &>*{
+            line-height: .2rem;
+            vertical-align: middle;
+            font-size: .13rem;
+            color: #666;
+            margin-left: .05rem;
+          }
+        }
+      }
+      .list{
+        &>div.flex-item{
+          margin: 0 .1rem;
+          &>div{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            ul{
+              margin: .1rem auto 0;
+              li{
+                align-items: center;
+                padding: .1rem 0;
+                span{
+                  line-height: .24rem;
+                  font-size: .13rem;
+                  color: #666;
+                  margin-right: .1rem;
+                  &:nth-child(1){
+                    max-width: 1.5rem;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                  &:nth-child(2),
+                  &:nth-child(3){
+                    font-size: .11rem;
+                    color: #ccc;
+                  }
+                }
+                &>*{
+                  margin-right: .05rem;
+                  &:last-child{
+                    margin-right: 0;
+                  }
+                }
+                i{
+                  font-size: .2rem;
+                  color: #ccc;
+                  line-height: .24rem;
+                  display: inline-block;
+                  vertical-align: middle;
+                  &.active{
+                    color: #fc6243;
+                  }
+                }
+                &>div{
+                  font-size: 0;
+                  text-align: right;
+                  white-space: nowrap;
+                  input{
+                    width: .3rem;
+                    text-align: center;
+                  }
+                  &>*{
+                    vertical-align: middle;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/orderItem/index.vue

+<template>
+  <div class="orderItem flex-h">
+    <div class="img">
+      <a>
+        <img src="" class="centerLabel cover" alt="">
+      </a>
+    </div>
+    <div class="content flex-item flex-v">
+      <div class="flex-item">
+        <div>
+          <span>{{data.name}}</span>
+        </div>
+      </div>
+      <div class="flex-h">
+        <div class="flex-item">
+          <div>
+            <span>￥{{data.price}}</span>
+          </div>
+        </div>
+        <i class="iconfont icon-jian" @click="subtract" v-if="!data.spec.length && data.status === 1"></i>
+        <input v-if="!data.spec.length && data.status === 1" type="tel" @input="input" v-model="defaultNum">
+        <i class="iconfont icon-jia" :class="{'active': defaultNum > 0}" @click="add" v-if="!data.spec.length && data.status === 1"></i>
+        <a v-if="data.spec.length && data.status === 1" @click="selectSpec">选规格</a>
+        <span v-if="data.status !== 1">已售罄</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+      defaultNum: 0,
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    add () { // 增加
+      this.defaultNum += 1
+      this.select()
+    },
+    subtract () { // 减少
+      if (this.defaultNum > 0) this.defaultNum -= 1; this.select()
+    },
+    input () { // 输入
+      if (Number(this.defaultNum)) {
+        this.select()
+      } else {
+
+      }
+    },
+    select () { // 返回数据
+      this.$emit('returnData', {
+        name: this.data.name,
+        id: this.data.id,
+        specId: null,
+        specName: null,
+        num: null,
+        defaultNum: Number(this.defaultNum),
+        price: null,
+        defaultPrice: this.data.price,
+      })
+    },
+    selectSpec () { // 选规格
+      this.$emit('selectSpec', this.data)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/orderItem/page.scss

+.orderItem{
+  .img{
+    width: .72rem;
+    position: relative;
+    overflow: hidden;
+    margin: 0 .1rem;
+    a{
+      width: 100%;
+      display: block;
+      padding-bottom: 100%;
+      background: #eee;
+      border-radius: .04rem;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+  &>.flex-item{
+    margin-right: .15rem;
+    &>div.flex-item{
+      &>div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          display: block;
+          line-height: .22rem;
+          font-size: .13rem;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    &>div.flex-h{
+      &>div{
+        &>div{
+          span{
+            width: 100%;
+            line-height: .2rem;
+            font-size: .11rem;
+          }
+        }
+      }
+      i{
+        font-size: .18rem;
+        line-height: .2rem;
+        color: #ccc;
+        &.active{
+          color: red;
+        }
+      }
+      input{
+        width: .4rem;
+        line-height: .18rem;
+        text-align: center;
+        margin: 0 .05rem;
+      }
+      a{
+        display: inline-block;
+        line-height: .2rem;
+        font-size: .11rem;
+        padding: 0 .15rem;
+        border-radius: .2rem;
+        background: #fc6243;
+        color: #fff;
+      }
+      &>span{
+        font-size: .13rem;
+        color: #666;
+      }
+    }
+  }
+}

src/components/orderPopup/index.vue

+<template>
+  <div class="orderPopup" :class="{'show':show}">
+    <div class="centerLabel" v-if="data !== null">
+      <div class="top">
+        <span>{{data.name}}</span>
+        <i class="iconfont icon-guanbi" @click="close"></i>
+      </div>
+      <div class="content flex-h">
+        <div class="flex-item">
+          <div>
+            <span>规格：</span>
+            <ul>
+              <li v-for="(item,index) in data.spec" :class="{'active': index === activeIndex, 'grey': item.status !== 1}" :key="index" @click="selectItem(item, index)">{{item.value}}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="bottom flex-h">
+        <div class="flex-item">
+          <div>
+            <span>￥{{price * num}}</span>
+          </div>
+        </div>
+        <i class="iconfont icon-jian" @click="subtract"></i>
+        <input type="tel" v-model="num">
+        <i class="iconfont icon-jia" @click="add"></i>
+        <a @click="sure">确定</a>
+      </div>
+      <!-- <a class="sure">确定</a> -->
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['show', 'data'],
+  data () {
+    return {
+      activeIndex: '',
+      price: 0,
+      num: 1,
+      specId: '',
+      specName: '',
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    sure () { // 确定
+      if (this.activeIndex === '' || this.price === 0 || this.num < 1) {
+        return false
+      }
+      this.$emit('returnData', {
+        name: this.data.name,
+        id: this.data.id,
+        specId: this.specId,
+        specName: this.specName,
+        num: this.num,
+        defaultNum: null,
+        price: this.price,
+        defaultPrice: null,
+      })
+      this.close()
+    },
+    subtract () { // 减
+      if (this.num > 1) {
+        this.num -= 1
+      }
+    },
+    add () { // 加
+      this.num += 1
+    },
+    selectItem (item, index) { // 选择规格
+      if (item.status === 1) {
+        if (this.activeIndex === index) {
+          this.activeIndex = ''
+          this.price = 0
+          this.specId = ''
+          this.specName = ''
+        } else {
+          this.activeIndex = index
+          this.price = item.price
+          this.specId = item.id
+          this.specName = item.value
+        }
+      }
+    },
+    close () { // 关闭弹窗
+      this.$emit('closePopup')
+      this.resetData()
+    },
+    resetData () { // 重置状态
+      this.activeIndex = ''
+      this.price = 0
+      this.num = 1
+      this.specName = ''
+      this.specId = ''
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/orderPopup/page.scss

+.orderPopup{
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, .5);
+  z-index: 500;
+  display: none;
+  &.show{
+    display: block;
+  }
+  &>.centerLabel{
+    width: 3.35rem;
+    background: #fff;
+    border-radius: .08rem;
+    overflow: hidden;
+    .top{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin: .1rem auto 0;
+      span{
+        width: 100%;
+        display: block;
+        line-height: .28rem;
+        text-align: center;
+        font-size: .17rem;
+      }
+      i{
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        right: .1rem;
+        font-size: .2rem;
+        color: #999;
+      }
+    }
+    .content{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      &>div{
+        margin: 0 .2rem;
+        &>div{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          &>span{
+            width: 100%;
+            display: block;
+            line-height: .26rem;
+            font-size: .14rem;
+            color: #666;
+            margin: .24rem auto 0;
+          }
+          ul{
+            font-size: 0;
+            li{
+              display: inline-block;
+              line-height: .32rem;
+              padding: 0 .15rem;
+              font-size: .14rem;
+              color: #666;
+              border: .01rem solid #eee;
+              border-radius: .04rem;
+              margin: .1rem .1rem 0 0;
+              &.active{
+                color: #fc6243;
+                border-color: #fc6243;
+              }
+              &.grey{
+                color: #ccc;
+                border-color: #eee;
+                border-style: dashed;
+              }
+            }
+          }
+        }
+      }
+    }
+    .bottom{
+      background: #f2f2f2;
+      margin-top: .3rem;
+      align-items: center;
+      &>div{
+        &>div{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          span{
+            width: 100%;
+            display: block;
+            text-indent: .2rem;
+            line-height: .5rem;
+            font-size: .15rem;
+            color: #fc6243;
+          }
+        }
+      }
+      i{
+        font-size: .2rem;
+        color: #fc6243;
+        margin-left: .1rem;
+        &:last-child{
+          margin-right: .2rem;
+        }
+      }
+      input{
+        width: .3rem;
+        background: none;
+        line-height: .2rem;
+        font-size: .13rem;
+        text-align: center;
+        margin-left: .1rem;
+      }
+      a{
+        display: inline-block;
+        line-height: .5rem;
+        background: #fc6243;
+        color: #fff;
+        font-size: .15rem;
+        padding: 0 .3rem;
+        margin-left: .3rem;
+      }
+    }
+    .sure{
+      width: 100%;
+      display: block;
+      line-height: .5rem;
+      text-align: center;
+      background: #fc6243;
+      color: #fff;
+      font-size: .15rem;
+    }
+  }
+}

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

   <div class="mainPage flex-v">
     <div class="top flex-h">
       <i class="iconfont icon-dingwei"></i>
-      <span>南京</span>
-      <a>请选择</a>
+      <span>{{caseInfo.value}}</span>
+      <a @click="showSelect = true">请选择</a>
       <div class="flex-item">
         <span>Alise您好！</span>
       </div>
         <div class="flex-h">
           <div class="flex-item">
             <ul class="areaList">
-              <li v-for="(item,index) in 10" :key="index">
+              <li v-for="(item,index) in list" :key="index">
                 <div class="title">
                   <i class="iconfont icon-yinchenglogo"></i>
-                  <span>悦见山区域一</span>
+                  <span>{{item.name}}</span>
                 </div>
                 <ul class="subAreaList flex-h">
-                  <li class="flex-item flex-h" v-for="(subItem,subIndex) in 10" :key="subIndex">
+                  <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" v-html="returnNo(subIndex)"></div>
+                        <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>
-                        <a>选择点单</a>
+                        <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 class="selectCase" :hidden="!showSelect"></div>
+    <van-picker :hidden="!showSelect"
+      show-toolbar
+      title="选择案场"
+      :columns="caseList"
+      @cancel="showSelect = false"
+      @confirm="selectCase"
+      value-key="value"
+    />
   </div>
 </template>
 
   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: {
 
   },
   methods: {
-    returnNo (index) { // 返回桌号
-      index = String(index + 1)
-      let aHtml = ''
-      for (var n = 0; n < index.length; n++) {
-        aHtml += '<i class="iconfont icon-' + index.substring(n, n + 1) + '" style="display: inline-block;font-size: .13rem;color: #666;"></i>'
-      }
-      return index.length > 1 ? aHtml : '<i class="iconfont icon-0" style="display: inline-block;font-size: .13rem;color: #666;"></i>' + aHtml
+    selectCase (val) { // 选择案场
+      this.caseInfo = val
+      this.showSelect = false
     },
   }
 }

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

                 &:nth-child(2n){
                   margin-left: .2rem;
                 }
+                &.noData{
+                  box-shadow: none;
+                  background: none;
+                }
                 &>i{
                   display: inline-block;
                   position: absolute;
       }
     }
   }
+  .selectCase{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .3);
+    z-index: 100;
+  }
 }

src/module/user/placeOrder/index.vue

+<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>
+      <calcMenu :show="showCalcMenu" :data="settlementList" @returnData="calcMenus"></calcMenu>
+    </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 icon-jiantou-up"></i>
+        </div>
+      </div>
+      <a>下单</a>
+    </div>
+    <orderPopup :show="showPopup" :data="currentSpec" @closePopup="closePopup" @returnData="calcMenus"></orderPopup>
+  </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 {
+      showCalcMenu: true, // 显隐已点菜单弹窗
+      currentSpec: null, // 当前选择规格
+      showPopup: false, // 显隐选规格弹窗
+      totalNum: 0, // 总杯数
+      totalPrice: 0, // 总价格
+      settlementList: [{
+    "name": "商品名称",
+    "id": "1-1",
+    "specId": "1-1-3",
+    "specName": "正常",
+    "num": 3,
+    "defaultNum": null,
+    "price": "20",
+    "defaultPrice": null
+}, {
+    "name": "商品名称",
+    "id": "1-1",
+    "specId": "1-1-4",
+    "specName": "多冰",
+    "num": 1,
+    "defaultNum": null,
+    "price": "25",
+    "defaultPrice": null
+}, {
+    "name": "商品名称",
+    "id": "1-3",
+    "specId": null,
+    "specName": null,
+    "num": null,
+    "defaultNum": 2,
+    "price": null,
+    "defaultPrice": "100"
+}, {
+    "name": "商品名称",
+    "id": "1-4",
+    "specId": null,
+    "specName": null,
+    "num": null,
+    "defaultNum": 3,
+    "price": null,
+    "defaultPrice": "100"
+}], // 商品选择清单
+      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: {
+    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
+      // this.$set(this.settlementList, arr)
+      console.log(arr.length)
+      console.log(this.settlementList.length)
+      // 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/user/placeOrder/page.scss

+.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/user/router.js

 import majorProjects from './majorProjects/index' // 项目专题
 import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
+import placeOrder from './placeOrder/index' // 城咖啡-点单
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
       component: userCenter,
       children: []
     }]
+  },{ // 城咖啡-点单
+    path: '/placeOrder',
+    name: 'placeOrder',
+    component: placeOrder,
+    children: []
   },{ // 项目专题
     path: '/majorProjects',
     name: 'majorProjects',

src/module/user/user.html

 <head>
   <meta charset="utf-8">
   <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_mdkkdwmio2.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_w203meltjv9.css">
   <title>城的空间</title>
 </head>
 <body>