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

src/components/salesRecordItem/index.vue

+<template>
+  <div class="salesRecordItem">
+    <div class="top flex-h">
+      <span>销售名称：</span>
+      <span>{{data.name}}</span>
+      <div class="flex-item">
+        <i class="iconfont icon-jiantou-right"></i>
+      </div>
+    </div>
+    <div class="itemBody flex-h">
+      <div class="flex-item">
+        <div>
+          <span>已发出<em>{{data.cardAndCoupon.usedNum}}</em>张卡券</span>
+          <div class="progress">
+            <div :style="{width: (data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100)}"></div>
+          </div>
+          <a :class="{'grey': data.cardAndCoupon.status === 1}" @click="triggerCardAndCoupon(data)">{{data.cardAndCoupon.status === 1 ? '关闭卡券' : '开启卡券'}}</a>
+        </div>
+      </div>
+      <div class="flex-item">
+        <div>
+          <span>已送出<em>12</em>杯饮品</span>
+          <div class="progress">
+            <div :style="{width: (data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100)}"></div>
+          </div>
+          <a :class="{'grey': data.drink.status === 1}" @click="triggerDrink(data)">{{data.drink.status === 1 ? '关闭饮品' : '开启饮品'}}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: ['data'],
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  components: {
+
+  },
+  created () {
+
+  },
+  methods: {
+    triggerCardAndCoupon (item) { // 切换卡券状态
+      this.$emit('triggerCardAndCoupon', {type: this.data.cardAndCoupon.status === 1 ? 'close' : 'open', data: item})
+    },
+    triggerDrink (item) { // 切换饮品状态
+      this.$emit('triggerDrink', {type: this.data.drink.status === 1 ? 'close' : 'open', data: item})
+    },
+    returnProgressColor (val) { // 返回进度条颜色
+      if (val <= 33) {
+        return '#45bfa1'
+      } else if (val <= 66) {
+        return '#ff9800'
+      } else {
+        return '#ff2b00'
+      }
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/components/salesRecordItem/page.scss

+.salesRecordItem{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: .1rem;
+  background: #fff;
+  box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+  padding: .12rem 0;
+  .top{
+    width: 100%;
+    align-items: center;
+    span{
+      line-height: .28rem;
+      font-size: .12rem;
+      margin-right: .05rem;
+      margin-left: .2rem;
+      &:nth-child(2){
+        margin-left: 0;
+        font-size: .16rem;
+      }
+    }
+    div{
+      text-align: right;
+      margin-right: .2rem;
+      i{
+        font-size: .12rem;
+        color: #666;
+      }
+    }
+  }
+  .itemBody{
+    padding: 0 .2rem;
+    margin: .14rem auto 0;
+    margin-bottom: .12rem;
+    >div{
+      position: relative;
+      overflow: hidden;
+      &:nth-child(1)::after{
+        content: '';
+        width: .01rem;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background: #eee;
+      }
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        span{
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: .26rem;
+          font-size: .12rem;
+          color: #666;
+          em{
+            color: #fb3f19;
+            font-size: .12rem;
+          }
+        }
+        .progress{
+          width: 1.1rem;
+          height: .04rem;
+          position: relative;
+          overflow: hidden;
+          border-radius: .04rem;
+          background: #ccc;
+          margin: .04rem auto 0;
+          >div{
+            position: absolute;
+            height: .04rem;
+            left: 0;
+            top: 0;
+            border-radius: 0 .04rem .04rem 0;
+            background: #ff9800;
+          }
+        }
+        a{
+          width: 1.1rem;
+          display: block;
+          text-align: center;
+          line-height: .34rem;
+          font-size: .15rem;
+          color: #fff;
+          border: .01rem solid #fb3f19;
+          background: #fb3f19;
+          border-radius: .03rem;
+          margin: .16rem auto 0;
+          &.grey{
+            color: #666;
+            border: .01rem solid #666;
+            background: none;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/cardAndCouponNum/index.vue

+<template>
+  <div class="mainPage flex-v">
+    <div class="top flex-h">
+      <span>￥<em>199</em>元</span>
+      <div class="flex-item">
+        <div>
+          <span>健身团课一次体验卡</span>
+          <span>卡券描述卡券描述卡券描述卡券描述卡券描述</span>
+          <span>2018年02月02日 - 2018年02月03日</span>
+        </div>
+      </div>
+    </div>
+    <ul class="numList flex-h">
+      <li class="flex-item">
+        <div>
+          <span>总数量</span>
+          <span>10</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>剩余</span>
+          <span>5</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>用户领取</span>
+          <span>5</span>
+        </div>
+      </li>
+      <li class="flex-item">
+        <div>
+          <span>实际使用</span>
+          <span>2</span>
+        </div>
+      </li>
+    </ul>
+    <div class="flex-item">
+      <div>
+        <div>
+          <ul>
+            <li class="flex-h">
+              <span>销售名称</span>
+              <div class="flex-item">
+                <div>
+                  <span>实际使用</span>
+                </div>
+              </div>
+              <span>用户领取</span>
+            </li>
+            <li class="flex-h" v-for="(item,index) in 10" :key="index">
+              <span>xxx</span>
+              <div class="flex-item">
+                <div>
+                  <span>2</span>
+                </div>
+              </div>
+              <span>5</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/cardAndCouponNum/page.scss

+.mainPage{
+  .top{
+    align-items: center;
+    margin-top: .18rem;
+    position: relative;
+    background: #fff;
+    z-index: 3;
+    >span{
+      font-size: .12rem;
+      color: #fc6243;
+      margin-right: .2rem;
+      margin-left: .2rem;
+      em{
+        font-size: .32rem;
+        font-weight: bolder;
+        color: #fc6243;
+      }
+    }
+    >div{
+      margin-right: .2rem;
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >span{
+          width: 100%;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: .22rem;
+          font-size: .12rem;
+          color: #666;
+          &:first-child{
+            line-height: .28rem;
+            font-size: .15rem;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+  .numList{
+    padding: .25rem .2rem .05rem;
+    position: relative;
+    z-index: 2;
+    background: #fff;
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+    >li{
+      >div{
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        >span{
+          width: 100%;
+          display: block;
+          text-align: center;
+          line-height: .22rem;
+          font-size: .12rem;
+          color: #fc6243;
+          &:first-child{
+            line-height: .2rem;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+  >.flex-item{
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      >div{
+        padding: 0 .2rem;
+        position: relative;
+        height: 100%;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        transform: translateZ(0);
+        -webkit-transform: translateZ(0);
+        ul{
+          margin: .2rem auto 0;
+          li{
+            border-top: .01rem solid #eee;
+            &:first-child{
+              border: none;
+            }
+            span{
+              line-height: .34rem;
+              font-size: .12rem;
+              text-align: center;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            >span{
+              min-width: 1rem;
+              &:last-child{
+                color: #fc6243;
+              }
+            }
+            &:first-child{
+              >span:last-child{
+                color: #333;
+              }
+            }
+            >div{
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                span{
+                  width: 100%;
+                  display: block;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/coffeeIndex/index.vue

               <div class="flex-item">
                 <div>
                   <ul class="areaList">
-                    <li v-for="(item,index) in list" :key="index">
+                    <li v-for="(item,index) in CaseTableList" :key="index">
                       <div class="title">
                         <i class="iconfont icon-yinchenglogo"></i>
-                        <span>{{item.name}}</span>
+                        <span>{{item.AreaName}}</span>
                       </div>
                       <ul class="subAreaList flex-h">
-                        <li class="flex-item flex-h" v-for="(subItem,subIndex) in item.list" :key="subIndex">
+                        <router-link tag="li" class="flex-item flex-h" v-for="(subItem,subIndex) in item.Tables" :key="subIndex" :to="{name: 'placeOrder', query: { tableid: encodeURI(subItem.TableId), tableno: encodeURI(subItem.TableNo), caseid: encodeURI(subItem.CaseId), casename: encodeURI(topCaseInfoData.CaseName), areaid: encodeURI(subItem.AreaId), areaname: encodeURI(item.AreaName)}}">
                           <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
-                        </li>
-                        <li class="flex-item noData" v-if="item.list.length % 2 != 0"></li>
+                        </router-link>
+                        <li class="flex-item noData" v-if="item.Tables.length % 2 != 0"></li>
                       </ul>
                     </li>
                   </ul>
           </li>
           <li :hidden="navActive !== 1" class="my-card">
             <div class="list-box">
+              <div class="cardAndCouponInfo flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>卡券货值总额：</span>
+                    <span>￥1000</span>
+                    <span>万</span>
+                  </div>
+                </div>
+                <router-link :to="{name: 'salesRecord',query: {}}">销售记录</router-link>
+              </div>
               <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
             </div>
           </li>
 import topCaseInfo from '../../../components/topCaseInfo/index'
 import myCard from '../../../components/myCard/myCard'
 import customerCard from '../../../components/customerCard/customerCard'
+const { mapActions: actions } = createNamespacedHelpers('app')
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
 
 export default {
   name: '',
   data () {
     return {
-      navActive: 2,
+      navActive: 1,
       cutNavList: [{
         value: '城咖啡',
         id: '1',
     }
   },
   computed: {
-
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      CaseList: x => x.app.CaseList,
+      CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
+    })
   },
   components: {
     topCaseInfo,
     customerCard
   },
   created () {
-
+    this.getCaseList().then((res) => {
+      this.topCaseInfoData.CaseName = res.cases[0].CaseName
+      this.topCaseInfoData.CaseId = res.cases[0].CaseId
+      this.getCaseTableList({
+        caseid: this.topCaseInfoData.CaseId
+      })
+    })
   },
   methods: {
+    ...actions([
+      'getCaseList',
+    ]),
+    ...caseTableActions([
+      'getCaseTableList',
+    ]),
+    selectCase (val) { // 选择案场
+      this.topCaseInfoData.CaseName = val.CaseName
+      this.topCaseInfoData.CaseId = val.CaseId
+      this.getCaseTableList({
+        caseid: this.topCaseInfoData.CaseId
+      })
+      this.ShowSelect = false
+    },
     cutNav (index) { // 切换nav
       this.navActive = index
     },
-    selectCase (val) { // 选择案场
-      this.caseInfo = val
-      this.topCaseInfoData.caseName = val.value
-      this.topCaseInfoData.caseId = val.id
-      this.showSelect = false
-    },
     share (item) {
       console.log(item)
     }

src/pages/sales/coffeeIndex/page.scss

             }
           }
           &.my-card, &.customer-card{
+            .cardAndCouponInfo{
+              align-items: center;
+              margin: .1rem 0 .15rem;
+              div{
+                font-size: 0;
+                white-space: nowrap;
+                span{
+                  line-height: .3rem;
+                  font-size: .13rem;
+                  display: inline-block;
+                  margin-right: .05rem;
+                  &:nth-child(2){
+                    font-size: .16rem;
+                    color: #fc6243;
+                  }
+                }
+              }
+              a{
+                line-height: .24rem;
+                padding: 0 .1rem;
+                box-sizing: border-box;
+                border: .01rem solid #333;
+                color: #333;
+                border-radius: .04rem;
+                font-size: .12rem;
+              }
+            }
             .list-box{
-              padding: .26rem .2rem;
+              padding: .1rem .2rem .2rem;
             }
           }
         }

src/pages/sales/placeOrder/index.vue

         <div class="bannerInfo flex-h">
           <div class="flex-item">
             <div>
-              <span>项目名称：xxxx</span>
+              <span>项目名称：{{caseName}}</span>
             </div>
           </div>
-          <span>xxx您好！</span>
+          <span>{{userInfo.customer != undefined ? userInfo.customer.CustomerName : ''}}您好！</span>
         </div>
       </div>
       <div class="tableInfo flex-h">
         <div class="flex-item">
           <div>
-            <span>桌号：案场11号桌</span>
-            <span>本月已用：150杯</span>
+            <span>桌号：{{tableNo}}</span>
+            <!-- <span>本月已用：150杯</span> -->
           </div>
         </div>
         <router-link :to="{name: 'coffeeIndex', query: {}}">返回选择桌号</router-link>
           <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>
+      <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList), caseid: encodeURI(caseId), areaid: encodeURI(areaId), areaname: encodeURI(areaName), areaid: encodeURI(areaId), tableid: encodeURI(tableId), tableno: encodeURI(tableNo)}}">下单</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>
 </template>
 
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
 import orderItem from '../../../components/orderItem/index'
 import orderPopup from '../../../components/orderPopup/index'
 import calcMenu from '../../../components/calcMenu/index'
   data () {
     const _self = this
     return {
+      tableNo: decodeURI(this.$route.query.tableno),
+      tableId: decodeURI(this.$route.query.tableid),
+      areaId: decodeURI(this.$route.query.areaid),
+      areaName: decodeURI(this.$route.query.areaname),
+      caseName: decodeURI(this.$route.query.casename),
+      caseId: decodeURI(this.$route.query.caseid),
       totalCupNum: 0, // 共计使用杯数
       showCalcMenu: false, // 显隐已点菜单弹窗
       currentSpec: null, // 当前选择规格
       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: [],
-      }],
+      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',
     }
   },
   computed: {
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      goodsTypeList: x => x.placeOrderForCoffee.goodsTypeList,
+      goodsList: x => x.placeOrderForCoffee.goodsList
+    }),
     MySwiper () {
       return this.$refs.mySwiper.swiper
     },
     orderPopup,
     calcMenu,
   },
-  created () { },
+  created () {
+    this.getGoodsTypeList({
+      caseid: this.caseId,
+    }).then((res) => {
+      // console.log(JSON.stringify(res))
+      this.getGoodsList({
+        caseid: this.caseId,
+      }).then((res) => {
+        // console.log(JSON.stringify(res))
+        this.mapArr()
+      })
+    })
+  },
   methods: {
+    ...caseTableActions([
+      'getGoodsTypeList',
+      'getGoodsList',
+    ]),
+    mapArr () { // 匹配商品规格
+      var aArr = this.goodsTypeList, bArr = this.goodsList
+      for (var n = 0; n < aArr.length; n++) {
+        aArr[n].list = []
+        for (var a = 0; a < bArr.length; a++) {
+          if (aArr[n].TypeId === bArr[a].TypeId) {
+            aArr[n].list.push(bArr[a])
+          }
+        }
+      }
+      this.menuList = []
+      for (var x = 0; x < aArr.length; x++) {
+        this.menuList.push({
+          value: aArr[x].TypeName,
+          eValue: aArr[x].EnglishName,
+          id: aArr[x].TypeId,
+          status: aArr[x].Status,
+          list: []
+        })
+        for (var y = 0; y < aArr[x].list.length; y++) {
+          this.menuList[x].list.push({
+            img: aArr[x].list[y].Images,
+            name: aArr[x].list[y].GoodsName,
+            id: aArr[x].list[y].GoodsId,
+            spec: [],
+            status: aArr[x].list[y].Status,
+            price: aArr[x].list[y].Price,
+          })
+          if(aArr[x].list[y].Specs !== null){
+            for (var z = 0; z < aArr[x].list[y].Specs.length; z++) {
+              this.menuList[x].list[y].spec.push({
+                value: aArr[x].list[y].Specs[z].SpecName,
+                id: aArr[x].list[y].Specs[z].SpecId,
+                num: 0,
+                status: aArr[x].list[y].Specs[z].Status,
+                price: aArr[x].list[y].Specs[z].GoodsPrice,
+              })
+            }
+          }
+        }
+      }
+      // console.log(JSON.stringify(this.menuList))
+    },
     placeOrder () { // 下单
-      this.$router.push({name: 'orderList', query: {}})
+      this.$router.push({ name: 'orderList', query: {} })
     },
     closeCalcMenu () { // 关闭已选菜单
       this.showCalcMenu = false
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-@import "page.scss";
+@import 'page.scss';
 </style>

src/pages/sales/router.js

 import login from './login/index' // 登录
 import coffeeIndex from './coffeeIndex/index' // 点单首页
 import placeOrder from './placeOrder/index' // 城咖啡-点单
+import salesRecord from './salesRecord/index' // 销售记录
+import salesGiveOutDetail from './salesGiveOutDetail/index' // 销售发放详情
+import cardAndCouponNum from './cardAndCouponNum/index' // 卡券数量信息
 
 Vue.use(Router)
 
 const router = new Router({
-  routes: [{
+  routes: [{ // 登录
     path: '/login',
     name: 'login',
     component: login,
     children: []
-  },{
+  }, { // 点单首页
     path: '/coffeeIndex',
     name: 'coffeeIndex',
     component: coffeeIndex,
     children: []
-  },{
+  }, { // 城咖啡-点单
     path: '/placeOrder',
     name: 'placeOrder',
     component: placeOrder,
     children: []
+  }, { // 销售记录
+    path: '/salesRecord',
+    name: 'salesRecord',
+    component: salesRecord,
+    children: []
+  }, { // 销售发放详情
+    path: '/salesGiveOutDetail',
+    name: 'salesGiveOutDetail',
+    component: salesGiveOutDetail,
+    children: []
+  }, { // 卡券数量信息
+    path: '/cardAndCouponNum',
+    name: 'cardAndCouponNum',
+    component: cardAndCouponNum,
+    children: []
   }],
 })
 
 router.beforeEach((to, from, next) => {
-  
+
   next()
 })
 

src/pages/sales/salesGiveOutDetail/index.vue

+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="flex-item flex-v body">
+      <span>销售姓名：<em>柳依依</em></span>
+      <ul class="flex-h">
+        <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">
+          <span>饮品</span>
+          <span>（已赠送12杯）</span>  
+        </li> 
+        <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">
+          <span>卡券</span>
+          <span>（已发出12张）</span>  
+        </li> 
+      </ul>
+      <div class="flex-item">
+        <div>
+          <ul>
+            <li :hidden="activeIndex === 1">
+              <ul class="list">
+                <li class="flex-h" v-for="(item,index) in 40" :key="index">
+                  <div class="flex-item">
+                    <div>
+                      <span>水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡水吧特级调试咖啡</span>
+                    </div>
+                  </div>
+                  <div class="flex-item">
+                    <div>
+                      <span>￥50 * 1</span>
+                    </div>
+                  </div>
+                  <span>2018/03/03 15:02:02</span>
+                </li>
+              </ul>
+            </li>
+            <li :hidden="activeIndex === 0">
+              <ul class="list">
+                <router-link tag="li" class="flex-h" v-for="(item,index) in 40" :key="index" :to="{name: 'cardAndCouponNum', query: {}}">
+                  <div class="flex-item">
+                    <div>
+                      <span>健身团课体验卡</span>
+                    </div>
+                  </div>
+                  <div class="flex-item">
+                    <div>
+                      <span>￥50 * 1</span>
+                    </div>
+                  </div>
+                  <span>2018/03/03 15:02:02</span>
+                </router-link>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      activeIndex: 0,
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+    }
+  },
+  components: {
+    topCaseInfo,
+  },
+  created () {
+
+  },
+  methods: {
+    cutNav (index) {
+      this.activeIndex = index
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/salesGiveOutDetail/page.scss

+.mainPage{
+  .body{
+    >span{
+      width: 100%;
+      display: block;
+      line-height: .28rem;
+      font-size: .12rem;
+      color: #666;
+      text-indent: .2rem;
+      margin: .2rem auto 0;
+      position: relative;
+      z-index: 3;
+      background: #fff;
+      em{
+        font-size: .16rem;
+        font-weight: bolder;
+        color: #333;
+      }
+    }
+    >ul{
+      padding: .05rem .2rem 0;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
+      >li{
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+        position: relative;
+        &.active::after{
+          content: '';
+          width: 1.1rem;
+          height: .02rem;
+          background: #fa2a00;
+          position: absolute;
+          left: 50%;
+          bottom: 0;
+          transform: translateX(-50%);
+          -webkit-transform: translateX(-50%);
+        }
+        >span{
+          display: inline-block;
+          line-height: .42rem;
+          font-size: .15rem;
+          color: #666;
+          &:nth-child(2){
+            font-size: .12rem;
+          }
+        }
+      }
+    }
+    >div{
+      >div{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        >ul{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          >li{
+            padding: 0 .2rem;
+            position: relative;
+            height: 100%;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            .list{
+              width: 100%;
+              padding: .1rem 0;
+              >li{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                border-bottom: .01rem solid #eee;
+                &:last-child{
+                  border: none;
+                }
+                align-items: center;
+                span{
+                  line-height: .38rem;
+                  font-size: .12rem;
+                  color: #666;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  overflow: hidden;
+                }
+                >div{
+                  span{
+                    width: 100%;
+                    display: block;
+                  }
+                  margin-left: .1rem;
+                  &:first-child{
+                    margin-left: 0;
+                  }
+                  &:nth-child(2){
+                    span{
+                      text-align: center;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/sales/salesRecord/index.vue

+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="flex-item body">
+      <div>
+        <ul>
+          <router-link tag="li" v-for="(item,index) in list" :key="index" :to="{name: 'salesGiveOutDetail', query: {}}">
+            <salesRecordItem :data="item" @triggerCardAndCoupon="triggerCardAndCoupon" @triggerDrink="triggerDrink"></salesRecordItem>
+          </router-link>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+import salesRecordItem from '../../../components/salesRecordItem/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+      list: [{
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 0,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '10',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '45',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }, {
+        name: '柳依依',
+        id: '1',
+        cardAndCoupon: {
+          totalNum: '100',
+          usedNum: '35',
+          status: 1,
+        },
+        drink: {
+          totalNum: '100',
+          usedNum: '68',
+          status: 1,
+        },
+      }],
+    }
+  },
+  components: {
+    topCaseInfo,
+    salesRecordItem,
+  },
+  created () {
+
+  },
+  methods: {
+    triggerCardAndCoupon (val) { // 切换卡券状态 type='close'：关闭；type='open'：开启；
+      console.log(val)
+    },
+    triggerDrink (val) { // 切换饮品状态 type='close'：关闭；type='open'：开启；
+      console.log(val)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/salesRecord/page.scss

+.mainPage{
+  .body{
+    >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);
+      >ul{
+        padding: 0 .2rem;
+        position: relative;
+        overflow: visible;
+        margin-bottom: .2rem;
+        >li{
+          width: 100%;
+          position: relative;
+          overflow: visible;
+          margin: .2rem auto 0;
+        }
+      }
+    }
+  }
+}

src/pages/user/placeOrderDetail/index.vue

       </div>
       <span>下单人：{{userInfo.CustomerName}} {{userInfo.Phone}}</span>
       <div class="bottom">
-        <a>取消</a>
+        <a @click="cancel">取消</a>
         <a @click="toPayer">确定</a>
       </div>
     </div>
           TableId: decodeURI(_self.$route.query.tableid),
           TableNo: decodeURI(_self.$route.query.tableno),
           Amount: String(_self.returnAmount()[0]), // 订单金额
-          UserType: 'customer',
           OrdersNum: Number(_self.returnAmount()[1]),
           Remark: '',
         },
         detail: [],
         coupon: [
-        //   {
-        //   OrdersCouponId: '',
-        //   OrdersId: '',
-        //   OrdersNo: '',
-        //   CouponId: '',
-        //   CouponName: '',
-        //   OrgId: '',
-        //   GoodsId: '',
-        //   GoodsName: '',
-        //   UsedAmount: '',
-        //   Status: '',
-        //   CreateDate: '',
-        // }
+          //   {
+          //   OrdersCouponId: '',
+          //   OrdersId: '',
+          //   OrdersNo: '',
+          //   CouponId: '',
+          //   CouponName: '',
+          //   OrgId: '',
+          //   GoodsId: '',
+          //   GoodsName: '',
+          //   UsedAmount: '',
+          //   Status: '',
+          //   CreateDate: '',
+          // }
         ],
       },
       ticketList: [{
       this.postData.info.UserName = this.userInfo.CustomerName
       this.postData.info.PayType = this.postData.coupon.length ? 'coupon' : 'vip'
       var orderInfo = JSON.parse(this.$route.query.info)
+      this.postData.detail = []
       for (var n = 0; n < orderInfo.length; n++) {
         this.postData.detail.push({
           GoodsId: orderInfo[n].id,
         })
       })
     },
+    cancel () {
+      window.history.go(-1)
+    },
   }
 }
 </script>

vue.config.js

       '/api-v2': {
         // target: 'https://dp.huiju360.com.cn/hj_operations',
         // target: 'http://192.168.0.62:8080', //wf
-        // target: 'http://192.168.0.11:8080', //ys
-        target: 'http://dev.ycjcjy.com', //frp
+        target: 'http://192.168.0.11:8080', //ys
+        // target: 'http://dev.ycjcjy.com', //frp
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
         // pathRewrite: {
         //   '^/api': '/api-v2/api'