store-v1/src/renderer/views/cashier/index.vue

<template>
  <div id="app" class="app-container">
    <el-drawer
      :withHeader="false"
      :visible.sync="isOpen"
      direction="ttb"
      size="100%"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="main">
        <div class="top-nav">{{ $t('huan-ying-shi-yong') }} {{ systemName }}</div>
        <div class="left-side">
          <div class="logo">
            <!-- <i class="logout el-icon-d-arrow-left" @click="logout"></i> -->
            <div class="title">
              {{ $t('cashierDesk') }}
            </div>
            <div class="store" v-if="storeInfo">({{ storeInfo.name }})</div>
            <div class="account">{{ $t('hello') }},{{ accountInfo.realName }}！</div>
          </div>
          <div class="cate">
            <ul class="nav">
              <li class="nav-item" v-for="menu in menuList">
                <a
                  :class="'nav-link' + (activeMenu == menu.key ? ' active' : '')"
                  href="javascript:;"
                  @click="switchMenu(menu.key)"
                >
                  <div class="cate-logo-div">
                    <img class="cate-logo" :src="menu.logo" />
                  </div>

                  <span>{{ menu.name }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="cart-container" v-if="activeMenu == 'cashier'">
          <div class="title">
            <div class="avatar">
              <img
                class="w-full h-full object-cover"
                v-if="!memberInfo || !memberInfo.avatar"
                src="@/assets/images/avatar.png"
              />
              <img class="w-full h-full object-cover" v-else :src="memberInfo.avatar" />
            </div>
            <div class="member-info">
              <span class="name" v-if="memberInfo">
                {{ memberInfo.mobile ? memberInfo.mobile : memberInfo.name }}
              </span>
              <span class="none" v-if="!memberInfo">当前为游客</span>
              <el-button v-if="hangNo" size="mini" class="switch" type="danger">
                {{ hangNo }}
              </el-button>
            </div>
            <LangTab style="position: absolute; right: 10px" size="mini"></LangTab>
          </div>
          <div class="carts">
            <div>
              <div class="tab">
                <div class="cart-list" v-if="cartList.length > 0">
                  <div class="cart-item" v-for="cartInfo in cartList">
                    <img class="image" :src="cartInfo.logo" />
                    <div class="info">
                      <div class="name">
                        <template v-if="hangNo">{{ hangNo }}-</template>
                        {{ cartInfo.name }}
                      </div>
                      <div class="spec" v-if="cartInfo.specList && cartInfo.specList.length > 0">
                        <span class="item" v-for="spec in cartInfo.specList" :title="spec.value">
                          {{ spec.value }}
                        </span>
                      </div>
                      <div class="num">
                        <el-input-number
                          class="input"
                          @change="changeBuyNum(cartInfo)"
                          v-model="cartInfo.buyNum"
                          :min="1"
                          :max="1000"
                        />
                      </div>
                    </div>
                    <div class="option">
                      <div
                        class="remove el-icon-delete"
                        @click="removeFromCart(cartInfo.cartId)"
                      ></div>
                      <div class="total">￥{{ (cartInfo.price * cartInfo.buyNum).toFixed(2) }}</div>
                    </div>
                  </div>
                </div>
                <div class="empty" v-if="cartList.length < 1">
                  <el-empty
                    :description="$t('zan-wu-jie-suan-shang-pin')"
                    :image-size="40"
                  ></el-empty>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="number">
              <div class="total-num">
                {{ $t('zong-jian-shu') }}：
                <b class="num">{{ cartTotalNum }}</b>
              </div>
              <div class="total-price">
                {{ $t('zong-jin-e') }}：
                <b class="num">￥{{ cartTotalPrice ? cartTotalPrice.toFixed(2) : '0.00' }}</b>
              </div>
            </div>
            <div class="options">
              <div
                :title="`${$t('gua-dan')} / ${$t('qu-dan')}`"
                class="cash truncate"
                @click="hangUp()"
              >
                {{ $t('gua-dan') }} / {{ $t('qu-dan') }}
              </div>
              <div class="submit truncate" v-if="cartTotalNum > 0" @click="doSettlement()">
                {{ $t('ti-jiao-jie-suan') }}
              </div>
              <div class="submit truncate" v-if="cartTotalNum == 0" @click="doCashier()">
                {{ $t('wu-shang-pin-shou-kuan') }}
              </div>
            </div>
          </div>
        </div>
        <div class="main-list" v-if="activeMenu == 'cashier'">
          <div class="title">
            <div class="flex justify-between">
              <el-input
                v-model="searchForm.keyword"
                prefix-icon="el-icon-full-screen"
                @keyup.enter.native="doQueryGoods"
                :placeholder="`${$t('searchTips')}...`"
                clearable
                class="flex-1 mr-2 min-w-5"
              />
              <el-button
                class="search-goods mr-5 bg-[#f67f20] text-white"
                size="small"
                @click="doQueryGoods()"
                icon="el-icon-search"
              >
                {{ $t('cha-xun-shang-pin') }}
              </el-button>
            </div>
            <!-- <el-form class="search-form " ref="searchForm" :inline="true" :model="searchForm">
              <el-form-item   prop="keyword">
                <el-input
                  v-model="searchForm.keyword"
                  prefix-icon="el-icon-full-screen"
                  @keyup.enter.native="doQueryGoods"
                  placeholder="请输入商品关键字：商品名称、条码、商品ID..."
                  clearable
                  style="width: 600px;"
                />
              </el-form-item>
              <el-button class="search-goods mr-5"  size="small" @click="doQueryGoods()" icon="el-icon-search">
                查询商品
              </el-button>
            </el-form> -->
            <el-tabs class="tab-box" v-model="navTab" @tab-click="switchTab">
              <el-tab-pane :label="$t('all')" name="0"></el-tab-pane>
              <el-tab-pane
                v-for="tab in tabList"
                :label="tab.name"
                :key="tab.id + ''"
                :name="tab.id + ''"
              ></el-tab-pane>
            </el-tabs>
          </div>
          <!-- <div class="grid grid-cols-3 gap-4">
            <div
              v-for="goodsInfo in goodsList"
              :key="product"
              class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer hover:shadow-md transition"
              @click="clickGoods(goodsInfo)"
            >
              <img lazy :src="imagePath + goodsInfo.logo" class="w-full h-48 object-cover" />
              <div class="p-3">
                <h3 class="font-medium mb-2">{{ goodsInfo.name }}</h3>
                <div class="text-[#e74c3c]">¥{{ product.price }}</div>
              </div>
            </div>
          </div> -->
          <div class="goods-list">
            <div class="goods-item" v-for="goodsInfo in goodsList">
              <div
                class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer hover:shadow-md transition"
                @click="clickGoods(goodsInfo)"
              >
                <!-- <img class="image" lazy :src="imagePath + goodsInfo.logo" />
                <div class="goods-name">{{ goodsInfo.name }}</div>
                <div class="goods-price">￥{{ goodsInfo.price }}</div> -->
                <img lazy :src="imagePath + goodsInfo.logo" class="w-full h-48 object-cover" />
                <div class="p-3">
                  <h3 class="font-medium mb-2">{{ goodsInfo.name }}</h3>
                  <div class="text-[#e74c3c]">¥{{ goodsInfo.price }}</div>
                </div>
              </div>
            </div>

            <pagination
              v-show="totalGoods > 0"
              :total="totalGoods"
              class="pagination"
              :page.sync="page"
              :limit.sync="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @pagination="initCashier"
            />

            <el-empty
              v-if="goodsList.length == 0"
              :description="`${$t('zan-wu-shang-pin')}...`"
            ></el-empty>
          </div>
        </div>

        <!-- 订单列表组件 start-->
        <orderList v-if="activeMenu == 'order'" @doPayOrder="doPayOrder"></orderList>
        <!-- 订单列表组件 end-->

        <!-- 会员列表组件 start-->
        <memberList v-if="activeMenu == 'member'"></memberList>
        <!-- 会员列表组件 end-->

        <!-- 卡券核销组件 start-->
        <couponConfirm v-if="activeMenu == 'coupon'"></couponConfirm>
        <!-- 卡券核销组件 end-->
      </div>
    </el-drawer>

    <!-- 规格详情 start-->
    <el-dialog
      :title="$t('xuan-ze-shang-pin-gui-ge')"
      :visible.sync="openGoodsDialog"
      class="common-dialog"
      append-to-body
    >
      <div class="goods-info">
        <div class="name">{{ goodsInfo.name }}</div>
        <div class="price">￥{{ goodsInfo.price }}</div>
        <div class="num">
          <el-input-number class="input" v-model="goodsNum" :min="1" :max="1000" />
        </div>
        <div class="spec-list" v-if="goodsInfo.isSingleSpec == 'N'">
          <div class="spec-item" v-for="specInfo in goodsInfo.specList">
            <div class="spec-name">{{ specInfo.name }}</div>
            <div class="values">
              <span
                v-for="value in specInfo.child"
                :class="goodsSpecIds.includes(value.id) ? 'value active' : 'value'"
                @click="selectGoodsSpec(value.id)"
              >
                {{ value.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="main-button" @click="addToCart()">
          {{ $t('jia-ru-jie-suan') }}
        </el-button>
        <el-button @click="closeGoodsDialog()">{{ $t('qu-xiao') }}</el-button>
      </div>
    </el-dialog>
    <!-- 规格详情 end-->

    <!--关联会员对话框 start-->
    <switchMemberDialog :show-dialog="openSwitchMemberDialog" @doSwitchMember="doSwitchMember" />
    <!--关联会员对话框 end-->

    <!--关联员工对话框 start-->
    <bindStaffDialog
      :show-dialog="openBindStaffDialog"
      @doBindStaff="doBindStaff"
      @closeDialog="closeDialog"
    />
    <!--关联员工对话框 end-->

    <!--结算对话框 start-->
    <settlementDialog
      :show-dialog="openSettlementDialog"
      :memberInfo="memberInfo"
      :staffInfo="staffInfo"
      :totalPrice="cartTotalPrice"
      :remarks="cartRemark"
      :orderInfo="orderInfo"
      :couponList="couponList"
      @submit="submitSettlement"
      @switchMember="switchMember"
      @bindStaff="bindStaff"
      @closeDialog="closeDialog"
    />
    <!--结算对话框 end-->

    <!--扫码付款对话框 start-->
    <scanPayCodeDialog
      ref="scanPayCodeDialog"
      :show-dialog="openScanPayCodeDialog"
      :memberInfo="memberInfo"
      :orderId="orderId"
      :payType="payType"
      :payAmount="payAmount"
      @closeDialog="closeDialog"
      @showPayResult="showPayResult"
    />
    <!--扫码付款对话框 end-->

    <!--支付结果对话框 start-->
    <payResultDialog
      :show-dialog="openPayResultDialog"
      :payResult="payResult"
      @showOrderPrint="showOrderPrint"
      @closeDialog="closeDialog"
    />
    <!--支付结果对话框 end-->

    <!--打印订单对话框 start-->
    <orderPrintDialog
      :show-dialog="openOrderPrintDialog"
      :storeInfo="storeInfo"
      :orderInfo="orderInfo"
      @closeDialog="closeDialog"
    />
    <!--打印订单对话框 end-->

    <!--挂单对话框 start-->
    <hangUpDialog
      :show-dialog="openHangUpDialog"
      :memberInfo="memberInfo"
      :cartList="cartList"
      @getHangNo="getHangNo"
      @doHangUp="doHangUp"
      @closeDialog="closeDialog"
    />
    <!--挂单对话框 end-->

    <!-- 无商品收款组件 start-->
    <noGoodsCashier
      :show-dialog="openNoGoodsCashierDialog"
      @submit="submitCashier"
      @closeDialog="closeDialog"
    ></noGoodsCashier>
    <!-- 无商品收款组件 end-->
  </div>
</template>

<script>
import {
  init,
  getGoodsInfo,
  searchGoods,
  getCartList,
  saveCart,
  removeFromCart,
  submitSettlement,
  doPay,
  getMemberInfoById,
} from '@/api/cashier'
import { getOrderInfo } from '@/api/order'
import { useUserStore } from '@/store/user'
import { getUserId, setUserId, removeUserId } from '@/utils/auth'
import switchMemberDialog from './components/switchMemberDialog'
import settlementDialog from './components/settlementDialog'
import scanPayCodeDialog from './components/scanPayCodeDialog'
import payResultDialog from './components/payResultDialog'
import orderPrintDialog from './components/orderPrintDialog'
import hangUpDialog from './components/hangUpDialog'
import orderList from './components/orderList'
import memberList from './components/memberList'
import couponConfirm from './components/couponConfirm'
import noGoodsCashier from './components/noGoodsCashier'
import bindStaffDialog from './components/bindStaffDialog'
import LangTab from '@/components/LangTab/index.vue'
import { Message } from 'element-ui'
const { logOut } = useUserStore()
export default {
  name: 'Cashier',
  components: {
    switchMemberDialog,
    settlementDialog,
    scanPayCodeDialog,
    payResultDialog,
    orderPrintDialog,
    hangUpDialog,
    orderList,
    memberList,
    couponConfirm,
    noGoodsCashier,
    bindStaffDialog,
    LangTab,
  },
  data() {
    return {
      // 系统名称
      systemName: this.$t('app.title'),
      // 导航tab
      navTab: '0',
      isOpen: true,
      page: 1,
      pageSize: 9,
      totalGoods: 0,
      openGoodsDialog: false,
      openSwitchMemberDialog: false,
      openBindStaffDialog: false,
      openSettlementDialog: false,
      openNoGoodsCashierDialog: false,
      openScanPayCodeDialog: false,
      openPayResultDialog: false,
      openOrderPrintDialog: false,
      openHangUpDialog: false,
      searchForm: { keyword: '' },
      payResult: { isSuccess: false, payAmount: 0, orderId: 0 },
      goodsForm: {},
      // 左侧菜单
      menuList: [
        {
          name: this.$t('shou-yin-zhu-ye'),
          key: 'cashier',
          logo: require('../../assets/images/menu-cooker1.png'),
        },
        {
          name: this.$t('ding-dan-guan-li'),
          key: 'order',
          logo: require('../../assets/images/menu-cooker2.png'),
        },
        {
          name: this.$t('tui-chu'),
          key: 'exit',
          logo: require('../../assets/images/menu-cooker3.png'),
        },
        //  { name: '会员管理', key: 'member', logo: require('../../assets/images/hot.png') },
        //  { name: '卡券核销', key: 'coupon', logo: require('../../assets/images/life.png') }
      ],
      // 激活菜单
      activeMenu: 'cashier',
      // 导航栏tab
      tabList: [],
      // 当前操作会员
      memberInfo: null,
      // 当前登录用户
      accountInfo: {},
      // 绑定的员工
      staffInfo: null,
      // 当前门店信息
      storeInfo: {},
      // 当前操作商品
      goodsInfo: { num: 1, specList: [], skuList: [] },
      // 当前选择属性
      goodsSpecIds: [],
      // 商品数量
      goodsNum: 1,
      // 当前分类
      cateId: 0,
      // 图片目录
      imagePath: '',
      // 商品分类列表
      cateList: [],
      // 商品列表
      goodsList: [],
      // 购物车列表
      cartList: [],
      // 订单列表
      orderList: [],
      // 总金额
      cartTotalPrice: 0,
      // 购物车备注
      cartRemark: '',
      // 总件数
      cartTotalNum: 0,
      // 支付金额
      payAmount: 0,
      // 当前订单号
      orderId: 0,
      // 支付方式
      payType: '',
      // 当前订单
      orderInfo: {},
      // 可用卡券列表
      couponList: [],
      // 挂单序号
      hangNo: '',
      isSearch: false,
    }
  },
  mounted() {
    const app = this
    // 监听扫码枪按键
    let code = ''
    let lastTime, nextTime // 上次时间、最新时间
    let lastCode, nextCode // 上次按键、最新按键
    document.onkeypress = (e) => {
      // 获取按键
      if (window.event) {
        // IE
        nextCode = e.keyCode
      } else if (e.which) {
        // Netscape/Firefox/Opera
        nextCode = e.which
      }
      // 如果触发了回车事件(扫码结束时间)
      if (nextCode === 13) {
        if (code.length < 3) {
          return
        }
        if (app.openScanPayCodeDialog == true) {
          app.$refs.scanPayCodeDialog.submit(code)
          return false
        }
        if (app.openSwitchMemberDialog == true) {
          return false
        }
        if (app.openSettlementDialog == true) {
          app.$alert(this.$t('qing-dian-ji-que-ding-shou-kuan'))
          return false
        }
        if (app.activeMenu == 'cashier') {
          app.addToCart(code)
        }
        code = ''
        lastCode = ''
        lastTime = ''
        return true
      }
      nextTime = new Date().getTime() // 记录最新时间
      if (!lastTime && !lastCode) {
        // 如果上次时间和上次按键为空
        code += e.key // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (lastCode && lastTime && nextTime - lastTime > 30) {
        code = e.key
      } else if (lastCode && lastTime) {
        code += e.key
      }
      lastCode = nextCode
      lastTime = nextTime
      return true
    }
  },
  created() {
    this.initCashier()
    this.getCartList()
  },
  methods: {
    // 初始化数据
    initCashier() {
      const app = this
      const userId = getUserId() > 0 ? getUserId() : 0
      init(userId, app.cateId, app.page, app.pageSize)
        .then((response) => {
          app.cateList = response.data.cateList
          app.tabList = response.data.cateList
          app.goodsList = response.data.goodsList
          app.imagePath = response.data.imagePath
          app.storeInfo = response.data.storeInfo
          app.accountInfo = response.data.accountInfo
          app.memberInfo = response.data.memberInfo
          app.totalGoods = response.data.totalGoods
          app.loading = false
          app.hangNo = ''
          app.staffInfo = null
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 菜单切换
    switchMenu(menuKey) {
      if (menuKey == 'exit') {
        this.$confirm(this.$t('que-ding-zhu-xiao-bing-tui-chu-xi-tong-ma'), this.$t('ti-shi'), {
          confirmButtonText: this.$t('que-ding'),
          cancelButtonText: this.$t('qu-xiao'),
          type: 'warning',
        })
          .then(() => {
            logOut().then(() => {
              Message({
                message: this.$t('tui-chu-cheng-gong'),
                type: 'success',
              })
              removeUserId()
              this.$router.push('/login')
            })
          })
          .catch(() => {})
      } else {
        this.activeMenu = menuKey
        return menuKey
      }
    },
    // tab切换
    switchTab(el) {
      this.navTab = el.name
      this.filterCate(this.navTab)
    },
    // 过滤分类商品
    filterCate(cateId) {
      this.cateId = cateId
      this.initCashier()
    },
    // 购物车列表
    getCartList(cartIds) {
      const app = this
      if (app.loading) {
        return false
      }
      app.loading = true
      app.cartList = []
      const switchCartIds = cartIds ? cartIds.join(',') : ''
      getCartList({ userId: getUserId(), hangNo: app.hangNo, cartIds: switchCartIds })
        .then((response) => {
          const cartList = response.data.list
          if (cartList && cartList.length > 0) {
            cartList.forEach(function (item) {
              const specList = []
              if (item.specList && item.specList.length > 0) {
                item.specList.forEach(function (spec) {
                  specList.push({ name: spec.specName, value: spec.specValue })
                })
              }
              const cartInfo = {
                cartId: item.id,
                skuId: item.skuId,
                goodsId: item.goodsInfo.id,
                name: item.goodsInfo.name,
                logo: item.goodsInfo.logo,
                price: item.goodsInfo.price,
                buyNum: item.num,
                specList: specList,
              }
              app.cartList.push(cartInfo)
            })
          }
          app.cartTotalPrice = response.data.payPrice
          app.cartTotalNum = response.data.totalNum
          app.couponList = response.data.couponList
          app.loading = false
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 查询商品
    doQueryGoods() {
      const app = this
      if (!app.searchForm.keyword) {
        app.initCashier()
        return false
      }
      app.loading = true
      searchGoods({ keyword: app.searchForm.keyword })
        .then((response) => {
          app.loading = false
          if (response.data && response.data.length > 0) {
            app.goodsList = response.data
          } else {
            app.$alert(this.$t('bao-qian-wei-cha-xun-dao-shang-pin-xin-xi'))
            return false
          }
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 点击商品规格弹框
    clickGoods(goodsInfo) {
      const app = this
      if (app.loading) {
        return false
      }
      app.loading = true
      getGoodsInfo(goodsInfo.id)
        .then((response) => {
          app.goodsInfo = response.data.goodsInfo
          app.goodsInfo.specList = response.data.specList
          app.goodsInfo.skuList = response.data.skuList
          app.goodsNum = 1
          app.loading = false
          if (app.goodsInfo.isSingleSpec == 'N') {
            app.openGoodsDialog = true
          } else {
            app.addToCart(false)
          }
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 关闭规格弹框
    closeGoodsDialog() {
      this.openGoodsDialog = false
    },
    // 选择商品属性
    selectGoodsSpec(specId) {
      const app = this
      let specIds = []
      app.goodsInfo.specList.forEach(function () {
        specIds.push(0)
      })
      app.goodsInfo.specList.forEach(function (specItem, index) {
        const children = []
        specItem.child.forEach(function (child) {
          children.push(child.id)
        })
        if (children.includes(specId)) {
          specIds[index] = specId
        } else {
          specIds[index] = app.goodsSpecIds[index] == undefined ? 0 : app.goodsSpecIds[index]
        }
      })
      app.goodsSpecIds = specIds
    },
    // 加入购物车
    addToCart(skuNo) {
      const app = this
      app.isSearch = false
      // 扫码枪扫描商品条码，直接加入购物车
      if (skuNo) {
        searchGoods({ keyword: skuNo })
          .then((response) => {
            app.loading = false
            if (response.data && response.data.length > 0) {
              app.clickGoods(response.data[0])
              app.isSearch = true
              return false
            } else {
              app.$alert(this.$t('bao-qian-wei-cha-xun-dao-shang-pin-xin-xi'))
              return false
            }
          })
          .catch((err) => {
            app.loading = false
            console.log(err.toString())
          })
      }
      if (app.loading || app.isSearch || !app.goodsInfo.id || app.goodsNum <= 0) {
        return false
      }
      const specIds = app.goodsSpecIds.join('-')
      let skuId = 0
      app.goodsInfo.skuList.forEach(function (skuInfo) {
        if (skuInfo.specIds == specIds) {
          skuId = skuInfo.id
        }
      })
      if (app.goodsInfo.isSingleSpec == 'N' && skuId <= 0) {
        app.$alert(this.$t('qing-xian-que-ren-shang-pin-gui-ge'))
        return false
      }
      // 添加到购物车
      const cartInfo = {
        goodsId: app.goodsInfo.id,
        name: app.goodsInfo.name,
        logo: app.goodsInfo.logo,
        price: app.goodsInfo.price,
        skuId: skuId,
        userId: getUserId(),
        hangNo: app.hangNo,
        buyNum: app.goodsNum,
      }
      app.loading = true
      saveCart(cartInfo)
        .then((response) => {
          app.loading = false
          if (response.data.cartId) {
            app.getCartList()
            app.openGoodsDialog = false
            app.goodsSpecIds = []
            app.goodsNum = 0
          }
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 删除购物车
    removeFromCart(cartId) {
      const app = this

      this.$confirm(this.$t('ci-cao-zuo-jiang-qing-kong-shi-fou-ji-xu'), this.$t('ti-shi'), {
        confirmButtonText: this.$t('que-ding'),
        cancelButtonText: this.$t('qu-xiao'),
        type: 'warning',
      })
        .then(() => {
          removeFromCart({ cartId: [cartId], userId: getUserId() })
            .then((response) => {
              if (response.data) {
                app.getCartList()
                this.$message({
                  type: 'success',
                  message: this.$t('shan-chu-cheng-gong'),
                })
              }
            })
            .catch((err) => {
              app.loading = false
              console.log(err.toString())
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('yi-qu-xiao-shan-chu'),
          })
        })
    },
    // 购物车数量变化
    changeBuyNum(cartInfo) {
      const app = this
      const param = {
        goodsId: cartInfo.goodsId,
        skuId: cartInfo.skuId,
        cartId: cartInfo.cartId,
        action: '=',
        userId: app.memberInfo ? app.memberInfo.id : null,
        hangNo: app.hangNo,
        buyNum: cartInfo.buyNum,
      }
      app.loading = true
      saveCart(param)
        .then((response) => {
          app.loading = false
          if (response.data.cartId) {
            app.getCartList()
            app.openGoodsDialog = false
            app.goodsSpecIds = []
          }
        })
        .catch(() => {
          app.loading = false
          app.getCartList()
        })
    },
    // 弹出关联会员
    switchMember() {
      this.openSwitchMemberDialog = true
    },
    // 弹出关联员工
    bindStaff() {
      this.openBindStaffDialog = true
    },
    // 确认关联会员
    doSwitchMember(memberInfo) {
      this.openSwitchMemberDialog = false
      if (memberInfo != 0) {
        this.memberInfo = memberInfo
        if (memberInfo) {
          let cartIds = []
          if (this.cartList && this.cartList.length > 0) {
            this.cartList.forEach(function (cart) {
              cartIds.push(cart.cartId)
            })
          }
          setUserId(memberInfo.id)
          this.getCartList(cartIds)
        } else {
          removeUserId()
          this.getCartList()
        }
      }
    },
    // 确认绑定员工
    doBindStaff(staff) {
      this.openBindStaffDialog = false
      this.staffInfo = staff
    },
    // 退出登录
    logout() {
      this.$router.push('/')
    },
    // 发起结算
    doSettlement() {
      if (this.cartList.length < 1) {
        this.$alert(this.$t('qing-xian-tian-jia-jie-suan-shang-pin'))
        return false
      }
      this.getCartList()
      this.orderInfo = {}
      this.openSettlementDialog = true
    },
    // 无商品结算
    doCashier() {
      this.orderInfo = {}
      this.openNoGoodsCashierDialog = true
    },
    // 提交结算
    submitCashier(param) {
      this.orderInfo = {}
      this.openSettlementDialog = true
      this.cartTotalPrice = parseFloat(param.amount)
      this.cartRemark = param.remark
      this.openNoGoodsCashierDialog = false
    },
    // 确认结算
    submitSettlement(param) {
      const app = this
      // 已生成的订单支付
      if (app.orderInfo.id) {
        // 微信、支付宝支付
        if (param.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
          app.payAmount = app.orderInfo.payAmount
          app.orderId = app.orderInfo.id
          app.openScanPayCodeDialog = true
          app.openSettlementDialog = false
          app.payType = param.payType
        }
        // 现金、余额支付
        if (param.payType == 'CASH' || param.payType == 'BALANCE') {
          doPay({
            orderId: app.orderId,
            payType: param.payType,
            cashierPayAmount: param.totalPrice,
            cashierDiscountAmount: param.discountPrice,
            userId: getUserId(),
          }).then((response) => {
            app.openSettlementDialog = false
            if (response.data.orderInfo.payStatus == 'B') {
              app.showPayResult({
                isSuccess: true,
                payAmount: response.data.orderInfo.payAmount,
                orderId: response.data.orderInfo.id,
              })
            } else {
              app.$alert(
                response.data.message
                  ? response.data.message
                  : this.$t('bao-qian-ding-dan-cao-zuo-yi-chang'),
              )
            }
          })
        }
        return false
      }
      // 购物车提交结算
      let cartIds = []
      app.cartList.forEach(function (cart) {
        cartIds.push(cart.cartId)
      })
      const data = {
        cashierPayAmount: param.totalPrice,
        cashierDiscountAmount: param.discountPrice,
        cartIds: cartIds.join(','),
        orderMode: 'oneself',
        payType: param.payType,
        remark: param.remark,
        type: app.cartList.length > 0 ? 'goods' : 'payment',
        couponId: param.userCouponId ? param.userCouponId : 0,
        userId: getUserId(),
        staffId: app.staffInfo ? app.staffInfo.id : 0,
      }
      if (app.loading) {
        return false
      }
      app.loading = true
      submitSettlement(data)
        .then((response) => {
          app.loading = false
          app.doSwitchMember(null)
          app.initCashier()
          app.getCartList()
          // 微信支付，弹出扫码框
          if (response.data.orderInfo.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
            app.payAmount = response.data.orderInfo.payAmount
            app.orderId = response.data.orderInfo.id
            app.openScanPayCodeDialog = true
            app.openSettlementDialog = false
            app.payType = param.payType
            return false
          }
          // 现金、余额支付
          if (
            response.data.orderInfo.payType == 'CASH' ||
            response.data.orderInfo.payType == 'BALANCE'
          ) {
            app.openSettlementDialog = false
            if (response.data.orderInfo.payStatus == 'B') {
              app.showPayResult({
                isSuccess: true,
                payAmount: response.data.orderInfo.payAmount,
                orderId: response.data.orderInfo.id,
              })
            } else {
              app.$alert(response.data.message)
            }
            return false
          }
          if (response.code == '201') {
            app.$alert(response.data.message)
          }
          return false
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 点击挂单/取单
    hangUp() {
      this.openHangUpDialog = true
    },
    // 取单
    getHangNo(data) {
      this.openHangUpDialog = false
      this.hangNo = data.hangNo
      this.getCartList()
      // 关联会员信息
      if (data.hangNo && data.hangNo.length > 0) {
        this.doSwitchMember(data.memberInfo)
      }
    },
    // 执行挂单
    doHangUp() {
      this.hangNo = ''
      this.getCartList()
      removeUserId()
      this.memberInfo = null
    },
    // 关闭对话框
    closeDialog(dialog) {
      if (dialog == 'settlementDialog') {
        this.openSettlementDialog = false
      } else if (dialog == 'switchMemberDialog') {
        this.openSwitchMemberDialog = false
      } else if (dialog == 'scanPayCodeDialog') {
        this.openScanPayCodeDialog = false
      } else if (dialog == 'payResultDialog') {
        this.openPayResultDialog = false
      } else if (dialog == 'printOrder') {
        this.openOrderPrintDialog = false
      } else if (dialog == 'hangUpDialog') {
        this.openHangUpDialog = false
      } else if (dialog == 'openNoGoodsCashierDialog') {
        this.openNoGoodsCashierDialog = false
      } else if (dialog == 'openBindStaffDialog') {
        this.openBindStaffDialog = false
      }
    },
    // 展示支付结果
    showPayResult(payResult) {
      this.payResult = payResult
      this.openPayResultDialog = true
    },
    // 订单支付
    doPayOrder(orderInfo) {
      const app = this
      app.navTab = 0
      app.payAmount = orderInfo.amount
      app.orderId = orderInfo.id
      app.orderInfo = orderInfo
      let userId = 0
      if (orderInfo.isVisitor !== 'Y') {
        userId = app.orderInfo.userInfo.id
      }
      getMemberInfoById(userId)
        .then((response) => {
          if (response.data.memberInfo) {
            app.memberInfo = response.data.memberInfo
          } else {
            app.memberInfo = null
          }
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
      app.doSwitchMember(app.memberInfo)
      app.openSettlementDialog = true
    },
    // 打印小票
    showOrderPrint(orderId) {
      const app = this
      getOrderInfo(orderId)
        .then((response) => {
          if (response.data.orderInfo) {
            app.orderInfo = response.data.orderInfo
            app.openOrderPrintDialog = true
          }
        })
        .catch((err) => {
          app.loading = false
          console.log(err.toString())
        })
    },
    // 确认关闭
    handleClose() {
      return false
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  .pagination {
    position: absolute;
    bottom: 10px;
    height: 50px;
    min-width: 750px;
    line-height: 50px;
    right: 10px;
    margin-top: 10px;
    display: block;
    background-color: transparent !important;
    border-color: transparent !important;

    color: #000;
    border-radius: 5px;
    z-index: 99999;
  }
  .top-nav {
    display: block;
    clear: both;
    height: 45px;
    width: 100%;
    background: #f5f5f5;
    border-bottom: #cccccc solid 1px;
    position: absolute;
    padding: 10px 0px 0px 40px;
    top: 0;
  }
  .left-side {
    width: 160px;
    height: 100vh;
    // background: #113a28;
    // border-right: #888888 solid 2px;
    position: absolute;
    left: 0;
    top: 45px;
    padding: 0px;
    // color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    text-align: center;
    .logo {
      height: 90px;
      padding: 20px 12px 10px 12px;
      font-weight: bold;
      .logout {
        float: left;
        height: 20px;
        line-height: 20px;
        text-align: left;
        width: 100%;
        cursor: pointer;
      }
      .store {
        font-size: 12px;
      }
      .account {
        font-size: 12px;
        // border: solid 2px #ffffff;
        // background: #6c757d;
        cursor: pointer;
        margin-top: 6px;
        padding: 2px;
        border-radius: 2px;
      }
    }
    .cate {
      text-align: center;
      margin-left: 14px;
      margin-top: 10px;
      height: calc(100vh - 190px);
      .nav {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 0px;
        padding: 5px;
        text-align: center;
        height: 100%;

        .nav-item {
          margin-top: 20px;
          font-size: 14px;
          width: 120px;
          text-align: center;
          .nav-link {
            position: relative;
            padding: 0.5356875rem 0.9375rem;
            white-space: nowrap;
            text-align: center;
            font-weight: 400;
            color: #333;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            border-radius: 5px;
            transition: color 0.2s linear;
            border: 2px solid #ffffff;
            .cate-logo-div {
              width: 60px;
              height: 60px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              .cate-logo {
                display: block;
                width: 50px;
                height: 50px;
              }
            }
          }
          .active {
            font-weight: bold;

            .cate-logo-div {
              background-color: #f67f20;
              box-shadow: 0px 12px 38px 0px rgba(234, 124, 105, 0.32);
            }
          }
        }
      }
    }
  }
  .cart-container {
    width: 310px;
    height: 100%;
    background: #ffffff;
    display: block;
    position: absolute;
    left: 165px;
    top: 45px;
    overflow-x: hidden;
    overflow-y: auto;
    border: #cccccc solid 1px;
    border-top-color: transparent !important;
    .title {
      height: 70px;
      width: 310px;
      border-bottom: #cccccc 1px solid;
      // padding-top: 16px;
      padding-left: 1px;
      display: flex;
      align-items: center;
      // position: fixed;
      // top: 45px;
      z-index: 999;
      clear: both;

      .avatar {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 5px 0px 5px 5px;
        overflow: hidden;
      }

      .member-info {
        display: inline-block;
        margin-left: 5px;
        border-top: none;
        .name {
          margin-left: 2px;
          margin-right: 3px;
        }
        .none {
          margin-left: 2px;
          margin-right: 5px;
          font-size: 13px;
        }
        .switch {
          padding: 8px 8px 8px 4px;
        }
      }
    }
    .carts {
      display: block;
      width: 100%;
      color: #666666;
      margin-bottom: 120px;
      // margin-top: 70px;
      padding: 0px;
      .tab {
        width: 50%;
        .cart-list {
          margin-bottom: 60px;
          .cart-item {
            border-bottom: dashed 1px #cccccc;
            height: 110px;
            width: 310px;
            padding-top: 5px;
            .image {
              width: 50px;
              height: 50px;
              margin-left: 5px;
              border-radius: 5px;
              border: solid 1px #ccc;
              float: left;
              margin-top: 20px;
            }
            .info {
              float: left;
              padding-left: 5px;
              margin-top: 5px;
              .name {
                font-weight: bold;
                font-size: 12px;
                width: 160px;
                max-height: 30px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              .spec {
                font-size: 12px;
                width: 160px;
                height: 20px;
                margin-top: 2px;
                .item {
                  margin-right: 2px;
                  border-radius: 5px;
                  text-align: center;
                  max-width: 50px;
                  height: 20px;
                  line-height: 20px;
                  float: left;
                  display: block;
                  overflow: hidden;
                  color: #606266;
                  cursor: pointer;
                  background: #cceeee;
                  padding: 0px 3px 0px 3px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
              .input {
                width: 120px;
                margin-top: 2px;
              }
            }
            .option {
              float: right;
              text-align: right;
              margin-right: 10px;
              .remove {
                font-size: 12px;
                cursor: pointer;
              }
              .total {
                margin-top: 10px;
                font-size: 16px;
                color: #ff5b57;
              }
            }
          }
        }
        .empty {
          margin-top: 200px;
          width: 310px;
        }
      }
    }
    .footer {
      position: fixed;
      z-index: 999;
      bottom: 0;
      height: 120px;
      padding-top: 5px;
      padding-right: 15px;
      display: block;
      width: 310px;
      margin-bottom: 10px;
      .number {
        float: right;
        margin: 5px;
        font-size: 13px;
        .total-price {
          margin-top: 3px;
          .num {
            color: #ff5b57;
            font-size: 20px;
          }
        }
      }
      .options {
        text-align: center;
        cursor: pointer;
        float: right;
        color: white;
        // box-sizing: border-box;
        // padding-bottom: 20px;
        .cash {
          float: left;
          height: 50px;
          border: solid 1px #f67f20;
          // padding-top: 15px;
          padding: 15px 5px 0px 5px;
          width: 135px;
          border-radius: 5px;
          color: #f67f20;
          // background: #113a28;
          font-weight: bold;
        }
        .submit {
          float: left;
          height: 50px;
          border: solid 1px #ff5b57;
          margin-left: 10px;
          padding: 15px 5px 0px 5px;
          width: 135px;
          border-radius: 5px;
          background: #ff5b57;
          font-weight: bold;
        }
      }
    }
  }
  .main-list {
    height: 100%;
    width: 100%;
    min-width: 760px;
    margin-left: 475px;
    margin-right: 2px;
    overflow: auto;
    display: block;
    background: #ffffff;
    margin-bottom: 10px;
    .title {
      position: fixed;
      height: 106px;
      width: calc(100% - 475px);
      min-width: 700px;
      background: #ffffff;
      padding: 5px;
      color: red;
      top: 45px;
      .search-form {
        height: 50px;
        .form-item {
          margin-right: -2px;
          width: 100%;
        }
        .input-item {
          min-width: 456px;
          width: 100%;
        }
        .search-goods {
          height: 40px;
          background: #f67f20;
          color: #fff;
        }
      }
      .tab-box {
        margin-top: 3px;
        width: 100%;
      }
    }
    .goods-list {
      height: 100%;
      width: 100%;
      margin-top: 148px;
      margin-left: 2px;
      margin-bottom: 200px;
      .goods-item {
        width: 33.3%;
        min-height: 300px;
        min-width: 220px;
        padding: 3px;
        float: left;
        background: #ffffff;
        text-align: left;
        cursor: pointer;
        .item {
          background: #ffffff;
          padding: 5px;
          border-radius: 5px;
          border: solid 1px #cccccc;
          margin: 0px;
          .goods-name {
            margin-top: 10px;
            font-size: 18px;
            color: #666666;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .goods-price {
            color: #ff5b57;
            font-size: 18px;
            font-weight: bold;
          }
          .image {
            width: 100%;
            height: 220px;
            border-radius: 3px;
          }
        }
      }
    }
  }
}
.goods-info {
  border: solid 1px #ccc;
  padding: 30px;
  border-radius: 5px;
  .name {
    height: 40px;
    font-weight: bold;
    font-size: 20px;
  }
  .price {
    height: 40px;
    color: #ff5b57;
    font-size: 16px;
  }
  .spec-list {
    border: solid 1px #ccc;
    padding: 20px;
    margin-top: 10px;
    border-radius: 6px;
    .spec-item {
      margin-bottom: 20px;
      .spec-name {
        font-weight: bold;
        font-size: 16px;
      }
      .values {
        display: block;
        padding-top: 10px;
        margin-left: 0px;
        padding-left: 0px;
        font-size: 12px;
        .value {
          border: solid 1px #cceeee;
          margin-right: 10px;
          padding: 8px 15px 5px 15px;
          cursor: pointer;
          border-radius: 4px;
          background: rgba(0, 172, 172, 0.1);
          color: #666666;
        }
        .active {
          border: solid 1px #ff5891;
          background: #ff5b57;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
<style scoped>
.input-item >>> .el-input__inner {
  border: #e6e6e6 solid 1px;
  line-height: 50px;
  height: 50px;
}
.form-item >>> .el-form-item__label {
  line-height: 50px;
  height: 50px;
}
.el-tabs--border-card {
  box-shadow: none;
  border: none;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0px;
}
::v-deep .el-pagination.is-background span {
  /* color: #fff; */
}
</style>