wechat/src/pages/user/placeOrder/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="flex-item flex-v">
      <div class="banner">
        <img src="" class="centerLabel cover" alt="">
        <div class="bannerInfo flex-h">
          <div class="flex-item">
            <div>
              <span>项目名称：{{caseName}}</span>
            </div>
          </div>
          <span>{{userInfo.customer != undefined ? userInfo.customer.CustomerName : ''}}您好！</span>
        </div>
      </div>
      <div class="tableInfo flex-h">
        <div class="flex-item">
          <div>
            <span>桌号：{{tableNo}}</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), 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>
  </div>
</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'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: '',
  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, // 当前选择规格
      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: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      goodsTypeList: x => x.placeOrderForCoffee.goodsTypeList,
      goodsList: x => x.placeOrderForCoffee.goodsList
    }),
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
    MySubSwiper () {
      return this.$refs.mySubSwiper.swiper
    },
  },
  components: {
    swiper,
    swiperSlide,
    orderItem,
    orderPopup,
    calcMenu,
  },
  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: {} })
    },
    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>