Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/wechat into dev

package-lock.json

@@ -5206,6 +5206,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "better-scroll": "^1.12.6",
     "node-sass": "^4.9.3",
+    "qrcodejs2": "0.0.2",
     "sass-loader": "^7.1.0",
     "swiper": "^4.3.5",
     "vant": "^1.1.16",

src/common/css/reset.css

@@ -65,4 +65,8 @@ select option {
 
 .van-toast div{
 	color: white;
+}
+
+.van-picker{
+	z-index: 101;
 }

src/components/calcMenu/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="calcMenu" :class="{'show':show}">
+    <div class="centerLabel flex-h">
+      <div class="flex-item">
+        <div>
+          <div class="top">
+            <span>确认下单信息</span>
+            <span>下单完成后共计使用<em>{{totalNum}}</em>次</span>
+          </div>
+          <div class="content">
+            <span v-if="!data.length">您还没有点单哦~</span>  
+            <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>
+                <div class="flex-item">
+                  <div>
+                    <span>x{{item.defaultNum === null ? item.num : item.defaultNum}}</span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="bottom">
+            <div class="flex-h" v-if="data.length">
+              <span>备注：</span>
+              <div class="flex-item">
+                <div>
+                  <textarea cols="30" rows="3"></textarea>
+                </div>
+              </div>
+            </div>
+            <ul class="flex-h">
+              <li class="flex-item" @click="close">再看看</li>
+              <li class="flex-item" @click="placeOrder">下单</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['show', 'data', 'totalNum'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    close () { // 关闭菜单
+      this.$emit('closeCalcMenu')
+    },
+    placeOrder () { // 点单
+      this.$emit('placeOrder')
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/calcMenu/page.scss

@@ -0,0 +1,148 @@
+.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: 3.2rem;
+    border-radius: .1rem;
+    background: #fff;
+    position: absolute;
+    overflow: hidden;
+    &>div{
+      margin: 0 .2rem;
+      &>div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        .top{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .1rem auto 0;
+          padding-bottom: .05rem;
+          border-bottom: .01rem solid #eee;
+          span{
+            width: 100%;
+            display: block;
+            text-align: center;
+            font-size: .11rem;
+            color: #666;
+            line-height: .22rem;
+            &:first-child{
+              line-height: .26rem;
+              font-size: .15rem;
+              color: #333;
+            }
+            em{
+              color: #f1644b;
+              font-size: .11rem;
+            }
+          }
+        }
+        .content{
+          width: 100%;
+          max-height: 2rem;
+          position: relative;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          border-bottom: .01rem solid #eee;
+          padding-bottom: .1rem;
+          &>span{
+            width: 100%;
+            display: block;
+            line-height: .4rem;
+            text-align: center;
+            font-size: .15rem;
+            color: #ccc;
+          }
+          ul{
+            margin: .1rem auto 0;
+            li{
+              &>*{
+                line-height: .34rem;
+                font-size: .14rem;
+                &:first-child{
+                  width: 30%;
+                  text-align: center;
+                }
+                &:nth-child(2){
+                  font-size: .11rem;
+                  color: #666;
+                }
+              }
+              &>div{
+                margin-right: .2rem;
+                &>div{
+                  width: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  span{
+                    width: 100%;
+                    display: block;
+                    text-align: right;
+                    font-size: .14rem;
+                    color: #666;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .bottom{
+          margin: .1rem auto 0;
+          &>div.flex-h{
+            align-items: flex-start;
+            &>span{
+              line-height: .2rem;
+              font-size: .13rem;
+              color: #666;
+            }
+            &>div{
+              &>div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                textarea{
+                  width: 100%;
+                  line-height: .2rem;
+                  font-size: .13rem;
+                  color: #666;
+                }
+              }
+            }
+          }
+          ul{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            margin-bottom: .25rem;
+            li{
+              line-height: .36rem;
+              border: .01rem solid #333;
+              padding: 0 .15rem;
+              font-size: .15rem;
+              border-radius: .04rem;
+              text-align: center;
+              &:nth-child(1){
+                margin-right: .1rem;
+              }
+              &:nth-child(2){
+                margin-left: .1rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/orderItem/index.vue

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,74 @@
+.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/orderListItem/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="orderListItem">
+    <div class="title flex-h">
+      <div class="orange" v-if="data.status === 0">
+        <i class="iconfont icon-dengdai"></i><br>
+        <span>制作中</span>
+      </div>
+      <div class="grey" v-if="data.status === 1">
+        <i class="iconfont icon-quxiao"></i><br>
+        <span>已取消</span>
+      </div>
+      <div class="green" v-if="data.status === 2">
+        <i class="iconfont icon-gouxuan"></i><br>
+        <span>已完成</span>
+      </div>
+      <div class="flex-item">
+        <div>
+          <span>{{data.caseName}}</span>
+        </div>
+      </div>
+      <span>{{data.creatTime}}</span>
+    </div>
+    <div class="line">
+      <div>
+        <i v-for="(iconItem,iconIndex) in 40" :key="iconIndex"></i>
+      </div>
+    </div>
+    <div class="list flex-h">
+      <div class="flex-item">
+        <ul>
+          <li v-for="(subItem,subIndex) in data.goodsList" :key="subIndex">
+            <span>{{subItem.name}}</span>
+            <div>
+              <span>￥{{subItem.price === null ? subItem.specPrice : subItem.price}} x {{subItem.num === null ? subItem.specNum : subItem.num}}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  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/orderListItem/page.scss

@@ -0,0 +1,120 @@
+.orderListItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .title{
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    &>div:nth-child(1){
+      width: .5rem;
+      text-align: center;
+      *{
+        display: inline-block;
+        font-size: .1rem;
+        line-height: .17rem;
+      }
+      i{
+        font-size: .15rem;
+      }
+    }
+    &>div:nth-child(1).orange{
+      *{
+        color: #fc6243;
+      }
+    }
+    &>div:nth-child(1).grey{
+      *{
+        color: #ccc;
+      }
+    }
+    &>div:nth-child(1).green{
+      *{
+        color: #63c86f;
+      }
+    }
+    &>div:nth-child(2){
+      margin-right: .1rem;
+      &>div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          display: block;
+          font-size: .14rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    &>span{
+      font-size: .11rem;
+      color: #666;
+      margin-right: .15rem;
+    }
+  }
+  .line{
+    width: 100%;
+    height: .2rem;
+    position: relative;
+    overflow: hidden;
+    &>div{
+      width: 100%;
+      position: absolute;
+      overflow: hidden;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%) translateX(-.035rem);
+      -webkit-transform: translateY(-50%) translateX(-.035rem);
+      font-size: 0;
+      white-space: nowrap;
+      i{
+        display: inline-block;
+        width: .07rem;
+        height: .07rem;
+        position: relative;
+        overflow: hidden;
+        border-radius: 100%;
+        background: #eee;
+        margin-right: .1rem;
+      }
+    }
+  }
+  .list{
+    &>div{
+      margin: 0 .15rem;
+      &>ul{
+        margin: .06rem auto;
+        &>li{
+          font-size: 0;
+          white-space: nowrap;
+          &>*{
+            display: inline-block;
+            vertical-align: middle;
+            width: 50%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &>span{
+            line-height: .26rem;
+            font-size: .14rem;
+            color: #555;
+          }
+          &>div{
+            text-align: right;
+            font-size: 0;
+            span{
+              font-size: .11rem;
+              line-height: .26rem;
+              color: #666;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/components/orderPopup/index.vue

@@ -0,0 +1,115 @@
+<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

@@ -0,0 +1,139 @@
+.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/components/topCaseInfo/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="topCaseInfo flex-h">
+    <i class="iconfont icon-dingwei"></i>
+      <span>{{data.caseName}}</span>
+      <a v-if="data.showSelect" @click="selectCase">请选择</a>
+      <div class="flex-item">
+        <span>{{data.userName}}您好！</span>
+      </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    selectCase () { // 选择案场
+      this.$emit('selectCase')
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/topCaseInfo/page.scss

@@ -0,0 +1,31 @@
+.topCaseInfo{
+  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;
+    }
+  }
+}

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

@@ -1,38 +1,37 @@
 <template>
   <div class="mainPage flex-v">
-    <div class="top flex-h">
-      <i class="iconfont icon-dingwei"></i>
-      <span>南京</span>
-      <a>请选择</a>
-      <div class="flex-item">
-        <span>Alise您好！</span>
-      </div>
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="selectCase"></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 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>
@@ -40,35 +39,71 @@
         </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>
+import topCaseInfo from '../../../../components/topCaseInfo/index'
 
 export default {
   name: '',
   data () {
     return {
-
+      topCaseInfoData: {
+        caseName: 'xxx',
+        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,
   },
   created () {
 
   },
   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

@@ -1,34 +1,36 @@
 .mainPage{
   .top{
-    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;
-      }
-    }
+    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{
@@ -81,6 +83,10 @@
                 &:nth-child(2n){
                   margin-left: .2rem;
                 }
+                &.noData{
+                  box-shadow: none;
+                  background: none;
+                }
                 &>i{
                   display: inline-block;
                   position: absolute;
@@ -151,4 +157,13 @@
       }
     }
   }
+  .selectCase{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .3);
+    z-index: 100;
+  }
 }

src/module/user/orderList/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData"></topCaseInfo>
+    </div>
+    <div class="flex-item">
+      <div class="flex-h">
+        <div class="flex-item">
+          <ul>
+            <li v-for="(item,index) in list" :key="index">
+              <orderListItem :data="item"></orderListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+import orderListItem from '../../../components/orderListItem/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      topCaseInfoData: {
+        caseName: 'xxx',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+      list: [{
+        status: 0,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        },{
+          name: '商品名称2',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称3',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称4',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称5',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称6',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        }],
+      },{
+        status: 1,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      },{
+        status: 2,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      },{
+        status: 0,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      }],
+    }
+  },
+  computed: {},
+  components: {
+    topCaseInfo,
+    orderListItem,
+  },
+  created () { },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/orderList/page.scss

@@ -0,0 +1,150 @@
+.mainPage{
+  &>div.flex-item{
+    &>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);
+      &>div{
+        margin: 0 .25rem;
+        overflow: visible;
+        &>ul{
+          width: 100%;
+          position: relative;
+          overflow: visible;
+          margin-bottom: .25rem;
+          &>li{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            border-radius: .1rem;
+            background: #fff;
+            box-shadow: 0 0 .2rem .02rem rgba(0, 0, 0, .1);
+            padding: .08rem 0;
+            margin: .25rem auto 0;
+            // .title{
+            //   width: 100%;
+            //   position: relative;
+            //   overflow: hidden;
+            //   align-items: center;
+            //   &>div:nth-child(1){
+            //     width: .5rem;
+            //     text-align: center;
+            //     *{
+            //       display: inline-block;
+            //       font-size: .1rem;
+            //       line-height: .17rem;
+            //     }
+            //     i{
+            //       font-size: .15rem;
+            //     }
+            //   }
+            //   &>div:nth-child(1).orange{
+            //     *{
+            //       color: #fc6243;
+            //     }
+            //   }
+            //   &>div:nth-child(1).grey{
+            //     *{
+            //       color: #ccc;
+            //     }
+            //   }
+            //   &>div:nth-child(1).green{
+            //     *{
+            //       color: #63c86f;
+            //     }
+            //   }
+            //   &>div:nth-child(2){
+            //     margin-right: .1rem;
+            //     &>div{
+            //       width: 100%;
+            //       position: relative;
+            //       overflow: hidden;
+            //       span{
+            //         width: 100%;
+            //         display: block;
+            //         font-size: .14rem;
+            //         overflow: hidden;
+            //         text-overflow: ellipsis;
+            //         white-space: nowrap;
+            //       }
+            //     }
+            //   }
+            //   &>span{
+            //     font-size: .11rem;
+            //     color: #666;
+            //     margin-right: .15rem;
+            //   }
+            // }
+            // .line{
+            //   width: 100%;
+            //   height: .2rem;
+            //   position: relative;
+            //   overflow: hidden;
+            //   &>div{
+            //     width: 100%;
+            //     position: absolute;
+            //     overflow: hidden;
+            //     left: 0;
+            //     top: 50%;
+            //     transform: translateY(-50%) translateX(-.035rem);
+            //     -webkit-transform: translateY(-50%) translateX(-.035rem);
+            //     font-size: 0;
+            //     white-space: nowrap;
+            //     i{
+            //       display: inline-block;
+            //       width: .07rem;
+            //       height: .07rem;
+            //       position: relative;
+            //       overflow: hidden;
+            //       border-radius: 100%;
+            //       background: #eee;
+            //       margin-right: .1rem;
+            //     }
+            //   }
+            // }
+            // .list{
+            //   &>div{
+            //     margin: 0 .15rem;
+            //     &>ul{
+            //       margin: .06rem auto;
+            //       &>li{
+            //         font-size: 0;
+            //         white-space: nowrap;
+            //         &>*{
+            //           display: inline-block;
+            //           vertical-align: middle;
+            //           width: 50%;
+            //           overflow: hidden;
+            //           text-overflow: ellipsis;
+            //           white-space: nowrap;
+            //         }
+            //         &>span{
+            //           line-height: .26rem;
+            //           font-size: .14rem;
+            //           color: #555;
+            //         }
+            //         &>div{
+            //           text-align: right;
+            //           font-size: 0;
+            //           span{
+            //             font-size: .11rem;
+            //             line-height: .26rem;
+            //             color: #666;
+            //           }
+            //         }
+            //       }
+            //     }
+            //   }
+            // }
+          }
+        }
+      }
+    }
+  }
+}

src/module/user/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/user/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/user/placeOrderDetail/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="mainPage">
+    <div class="content">
+      <h2>确认下单信息</h2>
+      <div class="list flex-h">
+        <div class="flex-item">
+          <ul>
+            <li class="flex-h" v-for="(item,index) in 10" :key="index">
+              <div class="flex-item">
+                <div><span>美式特浓</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>加冰</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>x1</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>￥20</span></div>
+              </div>
+            </li>
+            <li class="flex-h">
+              <div class="flex-item">
+                <div><span>选择商品券</span></div>
+              </div>
+              <a class="active" @click="showSelect = true">
+                <span>{{postData.ticketName === '' ? '1张饮品券' : postData.ticketName}}</span>
+                <i class="iconfont icon-jiantou-right"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <h6>添加备注</h6>
+      <div class="remark flex-h">
+        <div class="flex-item flex-h">
+          <div class="flex-h">
+            <textarea class="flex-item" cols="30" rows="10"></textarea>
+          </div>
+        </div>
+      </div>
+      <span>下单人：小五子 18267901393</span>
+      <div class="bottom">
+        <a>取消</a>
+        <a>确定</a>
+      </div>
+    </div>
+    <div class="selectLayer" :class="{'show': showSelect}">
+      <div>
+        <van-picker
+          show-toolbar
+          title="选择优惠券"
+          :columns="ticketList"
+          @cancel="showSelect = false"
+          @confirm="onConfirm"
+          value-key="value"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        ticketId: '',
+        ticketName: '',
+      },
+      ticketList: [{
+        value: '优惠券1',
+        id: '1',
+      }, {
+        value: '优惠券2',
+        id: '2',
+      }, {
+        value: '优惠券3',
+        id: '3',
+      }],
+      showSelect: false,
+      orderInfo: JSON.parse(this.$route.query.info)
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    onConfirm (value, index) {
+      this.postData.ticketName = value.value
+      this.postData.ticketId = value.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/user/placeOrderDetail/page.scss

@@ -0,0 +1,170 @@
+.mainPage{
+  >div.content{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    >h2{
+      width: 100%;
+      display: block;
+      line-height: .3rem;
+      font-size: .17rem;
+      text-align: center;
+      margin: .28rem auto 0;
+    }
+    .list{
+      >div.flex-item{
+        margin: 0 .2rem;
+        position: relative;
+        overflow: hidden;
+        &>ul{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .18rem auto 0;
+          &>li{
+            align-items: center;
+            padding: .08rem 0;
+            border-bottom: .01rem solid #eee;
+            >div{
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                >span{
+                  width: 100%;
+                  display: block;
+                  line-height: .26rem;
+                  font-size: .11rem;
+                  text-align: right;
+                }
+              }
+              &:nth-child(1){
+                >div{
+                  span{
+                    text-align: left;
+                    font-size: .14rem;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+                }
+              }
+              &:nth-child(2){
+                margin: 0 .05rem;
+                >div{
+                  span{
+                    text-align: center;
+                    color: #666;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+                }
+              }
+            }
+            a{
+              font-size: 0;
+              white-space: nowrap;
+              *{
+                display: inline-block;
+                line-height: .26rem;
+                font-size: .11rem;
+                color: #ccc;
+              }
+              &.active{
+                *{
+                  color: #fd684a;
+                  font-size: .14rem;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    h6{
+      width: 100%;
+      display: block;
+      line-height: .34rem;
+      font-size: .14rem;
+      text-indent: .2rem;
+      margin: .3rem auto 0;
+    }
+    .remark{
+      >div{
+        margin: 0 .2rem;
+        >div{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          background: #f2f2f2;
+          border-radius: .06rem;
+          textarea{
+            margin: 0 .1rem;
+            width: 100%;
+            line-height: .2rem;
+            padding: .1rem 0;
+            background: none;
+          }
+        }
+      }
+    }
+    >span{
+      width: 100%;
+      display: block;
+      line-height: .36rem;
+      font-size: .13rem;
+      color: #666;
+      text-indent: .2rem;
+    }
+    .bottom{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      font-size: 0;
+      white-space: nowrap;
+      margin: .1rem auto .4rem;
+      a{
+        display: inline-block;
+        line-height: .32rem;
+        border-radius: .05rem;
+        border: .01rem solid #333;
+        padding: 0 .4rem;
+        font-size: .15rem;
+        color: #333;
+        &:nth-child(2){
+          color: #fd684a;
+          border-color: #fd684a;
+          margin-left: .4rem;
+        }
+      }
+    }
+  }
+  .selectLayer{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    background: rgba(0,0,0,.5);
+    display: none;
+    &.show{
+      display: block;
+    }
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+}

src/module/user/router.js

@@ -7,6 +7,9 @@ import fiveA from './fiveA/index' // 5A
 import majorProjects from './majorProjects/index' // 项目专题
 import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
+import placeOrder from './placeOrder/index' // 城咖啡-点单
+import placeOrderDetail from './placeOrderDetail/index' // 城咖啡-点单详情
+import orderList from './orderList/index' // 城咖啡-点单列表
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
@@ -40,6 +43,21 @@ const router = new Router({
       component: userCenter,
       children: []
     }]
+  },{ // 城咖啡-点单
+    path: '/placeOrder',
+    name: 'placeOrder',
+    component: placeOrder,
+    children: []
+  },{ // 城咖啡-点单详情
+    path: '/placeOrderDetail',
+    name: 'placeOrderDetail',
+    component: placeOrderDetail,
+    children: []
+  },{ // 城咖啡-点单列表
+    path: '/orderList',
+    name: 'orderList',
+    component: orderList,
+    children: []
   },{ // 项目专题
     path: '/majorProjects',
     name: 'majorProjects',

src/module/user/user.html

@@ -3,7 +3,7 @@
 <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>