3114 lines
80 KiB
Vue
3114 lines
80 KiB
Vue
<!-- eslint-disable no-empty -->
|
||
<template>
|
||
<div class="">
|
||
<el-dialog
|
||
:title="title"
|
||
fullscreen
|
||
:visible.sync="informationdialogshow"
|
||
@close="reset"
|
||
>
|
||
<div class="head-container search-box flex">
|
||
<div style="width: 300px">
|
||
<el-input
|
||
v-model="goods.query.productId"
|
||
size="small"
|
||
clearable
|
||
placeholder="请输入商品名称"
|
||
style="width: 100%"
|
||
class="filter-item"
|
||
suffix-icon="el-icon-search"
|
||
/>
|
||
<!-- @keyup.enter.native="getGoods" -->
|
||
</div>
|
||
|
||
<div
|
||
style="display: flex; justify-content: flex-end; margin-left: 10px"
|
||
>
|
||
<!-- <el-button style="margin-right: 10px" type="primary" @click="getGoods"
|
||
>查询</el-button
|
||
>
|
||
<el-button @click="reset">重置</el-button> -->
|
||
<div style="width: 100px; margin-left: 20px">
|
||
<el-select v-model="layout.sel" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in layout.list"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
:disabled="item.disabled"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="diancan">
|
||
<div class="order">
|
||
<div class="relative">
|
||
<div style="padding-right: 14px">
|
||
<div class="choose-user flex">
|
||
<el-button
|
||
type="success"
|
||
v-if="vipUser.id === ''"
|
||
@click="refChooseUserOpen"
|
||
>选择用户</el-button
|
||
>
|
||
<template v-else>
|
||
<div class="flex cur-pointer" @click="refChooseUserOpen">
|
||
<img class="headimg" :src="vipUser.headImg" alt="" />
|
||
<div>
|
||
<div class="ft-13 color-000">{{ vipUser.nickName }}</div>
|
||
<div style="margin-top: 2px" class="color-666 ft-12">
|
||
余额：{{ vipUser.amount }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="flex row-between">
|
||
<!-- <div class="tableId" @click="chooseTableOpen"> -->
|
||
<div class="tableId">
|
||
{{ table ? "桌台号：" + table.name : "桌台号/取餐号" }}
|
||
</div>
|
||
|
||
<el-button
|
||
@click="clearCart"
|
||
type="text"
|
||
size="mini"
|
||
:disabled="order.list.length <= 0"
|
||
>清空</el-button
|
||
>
|
||
<!-- <div
|
||
class="clear cur-pointer color-000 flex"
|
||
@click="clearCart"
|
||
>
|
||
清空
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom">
|
||
<div class="flex row-right youhui" v-if="giftLen">
|
||
<span> 已优惠￥{{ allGiftMoney | to2 }} </span>
|
||
<i class="el-icon-arrow-right"></i>
|
||
</div>
|
||
|
||
<div class="flex row-between">
|
||
<el-checkbox
|
||
v-model="order.allPack"
|
||
:disabled="!this.order.list.length"
|
||
>打包</el-checkbox
|
||
>
|
||
<div class="flex">
|
||
<span class="color-666" style="margin-right: 5px"
|
||
>共{{ allNumber }}件</span
|
||
>
|
||
<span class="color-000 ft-18">￥{{ allPrice }} </span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex mt-14">
|
||
<!-- <button class="my-btn flex-1 success" v-if="!isCreateOrder">
|
||
<span>仅下单</span>
|
||
</button> -->
|
||
<template v-if="isCreateOrder">
|
||
<button
|
||
class="my-btn flex-1 default"
|
||
@click="createOrderClose"
|
||
>
|
||
<span>加菜/返回</span>
|
||
</button>
|
||
<div style="width: 15px"></div>
|
||
<button class="my-btn flex-1 success" @click="payOrder">
|
||
<span>立即支付</span>
|
||
</button>
|
||
</template>
|
||
<template v-else>
|
||
<el-dropdown
|
||
split-button
|
||
size="medium"
|
||
type="success"
|
||
@command="changeIsPrint"
|
||
>
|
||
{{ isPrint ? "下单并打印制作单" : "仅下单(不打印)" }}
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item :command="false"
|
||
>仅下单(不打印)</el-dropdown-item
|
||
>
|
||
<el-dropdown-item :command="true"
|
||
>下单并打印制作单</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div style="width: 15px"></div>
|
||
<div class="flex-1">
|
||
<el-button
|
||
size="medium"
|
||
:disabled="!order.list.length"
|
||
@click="createOrderShow"
|
||
>
|
||
去结账
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- <button
|
||
class="my-btn flex-1 success"
|
||
:class="{ disabled: !order.list.length }"
|
||
:disabled="!order.list.length"
|
||
@click="createOrderShow"
|
||
>
|
||
<span>去结账</span>
|
||
</button> -->
|
||
</template>
|
||
</div>
|
||
|
||
<!-- <div class="flex mt-14">
|
||
<button class="my-btn flex-1 success" v-if="!isCreateOrder">
|
||
<span>仅下单</span>
|
||
</button>
|
||
<button
|
||
class="my-btn flex-1 default"
|
||
v-else
|
||
@click="createOrderClose"
|
||
>
|
||
<span>加菜/返回</span>
|
||
</button>
|
||
<div style="width: 15px"></div>
|
||
<button
|
||
class="my-btn flex-1 default"
|
||
:class="{ disabled: !order.list.length }"
|
||
:disabled="!order.list.length"
|
||
@click="createOrderShow"
|
||
>
|
||
<span>去结账</span>
|
||
</button>
|
||
</div> -->
|
||
</div>
|
||
<div class="list">
|
||
<div
|
||
v-for="(item, index) in order.list"
|
||
:key="index"
|
||
class="flex order-item relative"
|
||
:class="{ active: order.selIndex === index }"
|
||
@click="changeOrderSel(index)"
|
||
>
|
||
<span class="absolute pack" v-if="item.isPack === 'true'">
|
||
包
|
||
</span>
|
||
<div class="flex">
|
||
<div class="img">
|
||
<img :src="item.coverImg" class="" alt="" />
|
||
</div>
|
||
<div class="good-info">
|
||
<div class="flex lh-16">
|
||
<div class="name">{{ item.name }}</div>
|
||
<span
|
||
class="good_info_discount"
|
||
v-if="item.isGift === 'true'"
|
||
>赠</span
|
||
>
|
||
</div>
|
||
<div v-if="item.specSnap" class="specSnap">
|
||
{{ item.specSnap }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<div class="order-number-box">
|
||
<div class="color-999" style="">X{{ item.number }}</div>
|
||
<div class="absolute">
|
||
<div class="order-input-number">
|
||
<i
|
||
class="icon-remove"
|
||
@click="changeOrderNumber(index, '-')"
|
||
></i>
|
||
<div style="width: 40px" class="number-box">
|
||
<el-input
|
||
:min="0"
|
||
type="number"
|
||
v-model="item.number"
|
||
placeholder="0"
|
||
></el-input>
|
||
</div>
|
||
<i
|
||
class="el-icon-circle-plus icon-add"
|
||
@click="changeOrderNumber(index)"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-333 total-price">
|
||
￥{{ item.salePrice }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="order.gift.list.length">
|
||
<div class="carts_list_title">以下是优惠菜品</div>
|
||
</div>
|
||
|
||
<div v-if="!order.list.length">
|
||
<el-empty description="点餐列表为空"></el-empty>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order_remark" v-if="note.content">
|
||
订单备注： {{ note.content }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<div class="numberbox">
|
||
<div class="reduce" @click="changeOrderGoodsNumber('-')">-</div>
|
||
<div class="input relative">
|
||
<div
|
||
class="disabled-box"
|
||
v-if="order.selIndex >= 0"
|
||
@click="changeKeyboradShow(true)"
|
||
></div>
|
||
<!-- <input type="number" :disabled="order.selIndex<0" v-model="order.number" /> -->
|
||
<input
|
||
type="number"
|
||
disabled
|
||
v-model="order.number"
|
||
style="display: none"
|
||
/>
|
||
<input type="number" disabled v-model="order.cacheNumber" />
|
||
</div>
|
||
<div class="add" @click="changeOrderGoodsNumber()">+</div>
|
||
</div>
|
||
<!-- <div class="btn" v-for="(item, index) in order.btns" :key="index" :class="{ disabled: item.disabled }" @click="orderBtnsClick(index,item)">
|
||
{{ item.text }}
|
||
</div> -->
|
||
<div
|
||
class="btn"
|
||
:class="{ disabled: !isSku }"
|
||
@click="orderBtnsClick('sku')"
|
||
>
|
||
规格
|
||
</div>
|
||
<div
|
||
class="btn"
|
||
:class="{ disabled: order.selIndex < 0 }"
|
||
@click="orderBtnsClick('gift')"
|
||
>
|
||
{{ returnGiftText }}
|
||
</div>
|
||
<div
|
||
class="btn"
|
||
:class="{ disabled: order.selIndex < 0 }"
|
||
@click="orderBtnsClick('pack')"
|
||
>
|
||
{{ returnPackText }}
|
||
</div>
|
||
<div
|
||
class="btn"
|
||
:class="{ disabled: order.selIndex < 0 }"
|
||
@click="orderBtnsClick('del')"
|
||
>
|
||
删除
|
||
</div>
|
||
|
||
<div
|
||
class="btn"
|
||
:class="{ disabled: !order.list.length }"
|
||
@click="saveOrder"
|
||
>
|
||
存单
|
||
</div>
|
||
<div
|
||
class="btn relative"
|
||
:class="{ disabled: !prveOrder.list.length }"
|
||
@click="cacheOrderShow"
|
||
>
|
||
取单
|
||
<span class="prve-car-len" v-if="prveOrder.list.length">{{
|
||
prveOrder.list.length
|
||
}}</span>
|
||
</div>
|
||
|
||
<!-- <div
|
||
class="btn"
|
||
:class="{ disabled: !order.list.length }"
|
||
@click="orderBtnsClick('save')"
|
||
>
|
||
存单
|
||
</div>
|
||
|
||
<div
|
||
class="btn relative"
|
||
:class="{ disabled: !prveOrder.list.length }"
|
||
@click="orderBtnsClick('getOrder')"
|
||
>
|
||
取单
|
||
<span class="prve-car-len" v-if="prveOrder.list.length">{{
|
||
prveOrder.list.length
|
||
}}</span>
|
||
</div> -->
|
||
|
||
<div class="btn" @click="refNoteShow">整单备注</div>
|
||
</div>
|
||
</div>
|
||
<div class="goods">
|
||
<template v-if="!isCreateOrder">
|
||
<div class="flex categoty">
|
||
<div
|
||
class="show_more_btn"
|
||
:class="{ showAll: category.showAll }"
|
||
@click="toggleShowAll"
|
||
>
|
||
<div class="flex">
|
||
<div class="flex">
|
||
<i class="el-icon-arrow-down"></i>
|
||
</div>
|
||
<span>展开</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex categorys"
|
||
:class="{ 'flex-wrap': category.showAll }"
|
||
>
|
||
<div
|
||
v-for="(item, index) in category.list"
|
||
:key="index"
|
||
@click="changeCategoryId(item)"
|
||
>
|
||
<el-tag
|
||
size="medium"
|
||
type="success"
|
||
effect="dark"
|
||
v-if="goods.query.categoryId === item.id"
|
||
>{{ item.name }}</el-tag
|
||
>
|
||
<el-tag size="medium" type="success" v-else effect="plain">{{
|
||
item.name
|
||
}}</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="no-search-result"
|
||
v-if="search.list.length <= 0 && goods.query.productId !== ''"
|
||
>
|
||
未找到相关商品
|
||
</div>
|
||
<div class="goods-list" v-if="goods.list.length">
|
||
<div
|
||
class="goods-item"
|
||
:class="{
|
||
'layout-img-and-text': layout.sel === 'img-and-text',
|
||
'layout-text': layout.sel === 'text',
|
||
none:
|
||
(goods.query.categoryId !== '') &
|
||
(goods.query.categoryId != item.categoryId),
|
||
}"
|
||
@click="goodsClick(item)"
|
||
v-for="(item, index) in goods.list"
|
||
:key="index"
|
||
>
|
||
<img class="goods-img" :src="item.coverImg" alt="" />
|
||
<div class="typeEnum">
|
||
<span>{{ item | returntypeName }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<div class="name">{{ item.name }}</div>
|
||
<div class="stockNumber"></div>
|
||
<div class="">￥{{ item.lowPrice }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <el-pagination :total="goods.total" :current-page="goods.query.page + 1" :page-size="goods.query.size"
|
||
layout="total, sizes, prev, pager, next, jumper" @current-change="paginationChangeinformation" @size-change="
|
||
(e) => {
|
||
goods.query.size = e;
|
||
goods.query.page = 0;
|
||
getGoods();
|
||
}
|
||
" /> -->
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div class="cashier_box goods_classify_list">
|
||
<div class="cashier_left">
|
||
<div class="title">选择优惠</div>
|
||
<div class="detail_box">
|
||
<div class="usercard">
|
||
<span
|
||
class="el-avatar el-avatar--square"
|
||
style="height: 50px; width: 50px; line-height: 50px"
|
||
><img v-if="vipUser.id" :src="vipUser.headImg"
|
||
/></span>
|
||
<div class="info">
|
||
<div class="nickname">
|
||
<span class="txt">{{
|
||
vipUser.id ? vipUser.nickName : "服务员下单"
|
||
}}</span>
|
||
</div>
|
||
<div class="other_info">
|
||
<div class="item">余额：{{ vipUser.amount | to2 }}</div>
|
||
<div class="item">积分：{{ vipUser.totalScore }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="forms">
|
||
<el-form
|
||
ref="form"
|
||
:model="createOrder.form"
|
||
label-width="60px"
|
||
>
|
||
<el-form-item label="优惠券">
|
||
<el-select
|
||
style="margin-right: 10px"
|
||
v-model="createOrder.quan.sel"
|
||
placeholder="选择优惠券"
|
||
>
|
||
</el-select>
|
||
<el-button size="medium " type="text">
|
||
查看不可用券
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div> -->
|
||
</div>
|
||
<div class="btn_group">
|
||
<el-button size="medium"> 整单打折/减免 </el-button>
|
||
<el-button size="medium "> 免单 </el-button>
|
||
</div>
|
||
|
||
<pay-type ref="refPayType" v-model="order.payType"> </pay-type>
|
||
<!-- <div class="flex row-right">
|
||
<el-button size="medium" type="success" @click="payOrder"
|
||
>确认支付</el-button
|
||
>
|
||
</div> -->
|
||
<!-- <div class="title">选择支付方式</div>
|
||
<div class="btn_group">
|
||
<div class="price_select">
|
||
<div class="pay_btns">
|
||
<el-button size="medium" type="success">
|
||
微信支付/支付宝
|
||
</el-button>
|
||
<el-button size="medium"> 余额支付 </el-button>
|
||
<el-button size="medium"> 现金支付 </el-button>
|
||
<el-button size="medium"> 挂账 </el-button>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="cashier_left cashier_right">
|
||
<div class="title">账单明细</div>
|
||
<div class="detail_form">
|
||
<!---->
|
||
<div class="detail_form_item">
|
||
<div class="left">会员优惠</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">门店优惠</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">满减优惠</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">优惠券</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">整单改价</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<!---->
|
||
<div class="detail_form_item">
|
||
<div class="left">桌位费/附加费</div>
|
||
<div class="right">￥0.00</div>
|
||
</div>
|
||
<!----><!----><!---->
|
||
<div class="detail_form_item">
|
||
<div class="left">总价</div>
|
||
<div class="right">
|
||
￥{{ createOrder.data.amount | to2 }}
|
||
</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">抹零</div>
|
||
<div class="right">-￥0.00</div>
|
||
</div>
|
||
<div class="detail_form_item">
|
||
<div class="left">应付金额</div>
|
||
<div class="right redfont">
|
||
￥{{ createOrder.data.amount | to2 }}
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <slot name="footer">
|
||
<div style="display: flex; justify-content: flex-end">
|
||
<el-button style="margin-right: 20px" @click="haocaiCancel">取消</el-button>
|
||
<el-button type="primary" @click="haocaiConfirm">确定</el-button>
|
||
</div>
|
||
</slot> -->
|
||
</el-dialog>
|
||
|
||
<!-- 选择规格 -->
|
||
<el-dialog
|
||
width="410px"
|
||
:title="selGoods.title"
|
||
:visible.sync="selGoods.show"
|
||
@close="onSelGoodsSkuClose"
|
||
>
|
||
<div class="tag-group">
|
||
<div
|
||
class="tag-item"
|
||
v-for="(item, index) in selGoods.skuList"
|
||
:key="index"
|
||
>
|
||
<div class="tag-name">
|
||
{{ item.name }}
|
||
<span v-if="item.values.length >= 2"
|
||
>({{ item.values.length }}选1)</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<span
|
||
style="margin: 0 10px 10px 0"
|
||
v-for="(val, valIndex) in item.values"
|
||
:key="valIndex"
|
||
>
|
||
<el-tag
|
||
v-if="val === item.sel"
|
||
size="medium "
|
||
@click="changeTagSel(index, val)"
|
||
effect="dark"
|
||
type="success"
|
||
>
|
||
<!-- :effect="val === item.sel ? 'dark' : 'light '" -->
|
||
|
||
{{ val }}
|
||
</el-tag>
|
||
<el-tag
|
||
v-else
|
||
size="medium"
|
||
type="success"
|
||
@click="changeTagSel(index, val)"
|
||
effect="light"
|
||
>
|
||
{{ val }}
|
||
</el-tag>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div slot="footer">
|
||
<div class="flex row-between">
|
||
<div>
|
||
<div class="price">￥{{ skuGoods.data.salePrice | to2 }}</div>
|
||
<div class="sku-group-text">
|
||
<span> {{ skuText }}</span>
|
||
<span>库存：{{ skuGoods.data.stockNumber || "" }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex">
|
||
<i class="icon-remove" @click="skuNumberReduce"></i>
|
||
<div style="width: 40px" class="number-box">
|
||
<el-input
|
||
:min="skuGoods.data.suit"
|
||
type="number"
|
||
v-model="skuGoods.number"
|
||
placeholder="0"
|
||
></el-input>
|
||
</div>
|
||
<!-- <i class="el-icon-remove"></i> -->
|
||
<i class="el-icon-circle-plus icon-add" @click="skuNumberAdd"></i>
|
||
</div>
|
||
</div>
|
||
<div class="flex" style="margin-top: 14px">
|
||
<button
|
||
class="my-btn disabled flex-1"
|
||
v-if="!skuGoods.data.isGrounding"
|
||
disabled
|
||
>
|
||
已下架
|
||
</button>
|
||
<button
|
||
class="my-btn success flex-1"
|
||
v-else
|
||
:disabled="CanConfirm"
|
||
@click="chooseSkuConfirm"
|
||
>
|
||
确定
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 数字键盘 -->
|
||
<el-dialog width="410px" title="数量" :visible.sync="keyborad.show">
|
||
<div class="simple-Keyboard-number">
|
||
<div class="carts">
|
||
<div class="title font-bold">
|
||
<span class="color-000">数量</span>
|
||
<i class="el-icon-close" @click="changeKeyboradShow(false)"></i>
|
||
</div>
|
||
<div class="box_status">{{ keyborad.number }}</div>
|
||
<div class="number_list_box">
|
||
<div class="yd-keyboard">
|
||
<div class="mini-number-box1">
|
||
<div class="mini-number">
|
||
<div class="key-line">
|
||
<div class="key" @click="keyboradAdd('1')">1</div>
|
||
<div class="key" @click="keyboradAdd('2')">2</div>
|
||
<div class="key" @click="keyboradAdd('3')">3</div>
|
||
</div>
|
||
<div class="key-line">
|
||
<div class="key" @click="keyboradAdd('4')">4</div>
|
||
<div class="key" @click="keyboradAdd('5')">5</div>
|
||
<div class="key" @click="keyboradAdd('6')">6</div>
|
||
</div>
|
||
<div class="key-line">
|
||
<div class="key" @click="keyboradAdd('7')">7</div>
|
||
<div class="key" @click="keyboradAdd('8')">8</div>
|
||
<div class="key" @click="keyboradAdd('9')">9</div>
|
||
</div>
|
||
<div class="key-line">
|
||
<div class="key"></div>
|
||
<div class="key" @click="keyboradAdd('0')">0</div>
|
||
<div
|
||
class="key"
|
||
style="font-size: 31px"
|
||
@click="keyboradReduce"
|
||
>
|
||
<svg
|
||
t="1723453480343"
|
||
class="icon"
|
||
viewBox="0 0 1664 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="1467"
|
||
width="32"
|
||
height="32"
|
||
>
|
||
<path
|
||
d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
|
||
fill="#333333"
|
||
p-id="1468"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="submit" @click="keyboradConfirm">确认</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 取单 -->
|
||
<el-dialog width="550px" title="取单" :visible.sync="prveOrder.show">
|
||
<div class="take_order_list">
|
||
<div class="tol_left_list">
|
||
<div
|
||
class="tolll_item"
|
||
:class="{ active: prveOrder.sel === index }"
|
||
@click="changePrveOrder(index)"
|
||
v-for="(item, index) in prveOrder.list"
|
||
:key="index"
|
||
>
|
||
<div class="tollli_index">{{ index + 1 }}</div>
|
||
<div class="tollli_price">￥{{ item.totalAmount }}</div>
|
||
<div class="tollli_time_and_num">
|
||
<div class="tollli_time">{{ item.created_at || "" }}</div>
|
||
<div class="tollli_num">({{ item.totalNumber }}件)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="tol_right_list"
|
||
v-if="prveOrder.list.length && prveOrder.sel >= 0"
|
||
>
|
||
<div
|
||
class="tolrl_item"
|
||
v-for="(item, index) in prveOrder.selCart"
|
||
:key="index"
|
||
>
|
||
<div class="tolrli_img">
|
||
<img :src="item.coverImg" alt="" />
|
||
</div>
|
||
<div class="tolrli_right">
|
||
<div class="tr_top">
|
||
<div class="trt_name">{{ item.name }}</div>
|
||
<div class="trt_num">x{{ item.number }}</div>
|
||
<div class="trt_price">￥{{ item.totalAmount || 0 }}</div>
|
||
</div>
|
||
<div class="tr_bottom">
|
||
<span class="trb_item">
|
||
{{ item.specSnap | formatSpecSnap }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div slot="footer" class="flex row-center">
|
||
<div style="margin-right: 20px">
|
||
<el-button
|
||
size="medium"
|
||
type="success"
|
||
@click="confirmChoosePrveOrder"
|
||
>确认此单</el-button
|
||
>
|
||
</div>
|
||
<el-button size="medium" @click="delPrveOrder">删除此单</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<choose-user
|
||
ref="refChooseUser"
|
||
@chooseUser="chooseUserConfirm"
|
||
></choose-user>
|
||
<choose-table
|
||
ref="refChooseTable"
|
||
@confirm="chooseTableConfirm"
|
||
></choose-table>
|
||
<order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import chooseUser from "./choose-user.vue";
|
||
import payType from "./pay-type.vue";
|
||
import chooseTable from "./table-diancan-components/choose-table-master.vue";
|
||
import orderNote from "./table-diancan-components/note.vue";
|
||
import dayjs from "dayjs";
|
||
import {
|
||
getGoodsLists,
|
||
addCart,
|
||
getCart,
|
||
$clearCart,
|
||
$removeCart,
|
||
$updateCart,
|
||
$allPack,
|
||
$createOrder,
|
||
$getMasterId,
|
||
$cacheOrder,
|
||
$getCacheOrder,
|
||
$delOrder,
|
||
$setUser
|
||
} from "@/api/table";
|
||
import { tbShopCategoryGet } from "@/api/shop";
|
||
function returnReverseVal(val, isReturnString = true) {
|
||
const isBol = typeof val === "boolean";
|
||
const isString = typeof val === "string";
|
||
let reverseNewval = "";
|
||
if (isBol) {
|
||
reverseNewval = !val;
|
||
}
|
||
if (isString) {
|
||
reverseNewval = val === "true" ? "false" : "true";
|
||
}
|
||
return reverseNewval;
|
||
}
|
||
|
||
export default {
|
||
components: {
|
||
chooseUser,
|
||
chooseTable,
|
||
payType,
|
||
orderNote,
|
||
},
|
||
data() {
|
||
return {
|
||
//是否打印
|
||
isPrint: false,
|
||
// 备注
|
||
note: {
|
||
content: "",
|
||
isShow: false,
|
||
},
|
||
isCreateOrder: false,
|
||
$goodsData: "",
|
||
search: {
|
||
list: [],
|
||
},
|
||
skuGoods: {
|
||
number: 1,
|
||
data: {
|
||
stockNumber: 0,
|
||
salePrice: 0,
|
||
},
|
||
},
|
||
selGoods: {
|
||
isEdit: false,
|
||
data: {},
|
||
skuList: [],
|
||
skuMap: [],
|
||
title: "",
|
||
show: false,
|
||
},
|
||
dayjs,
|
||
dialogshow: false, //弹框显示
|
||
dialogtitle: "", //文字显示
|
||
informationdialogshow: false,
|
||
informationdialogshowedit: false,
|
||
goods: {
|
||
list: [],
|
||
query: {
|
||
productId: "",
|
||
categoryId: "",
|
||
page: 1,
|
||
size: 300,
|
||
},
|
||
loading: false,
|
||
total: 0,
|
||
},
|
||
order: {
|
||
payType: "",
|
||
allPack: false,
|
||
btns: [
|
||
{
|
||
text: "规格",
|
||
disabled: false,
|
||
},
|
||
{
|
||
text: "赠送",
|
||
disabled: false,
|
||
},
|
||
{
|
||
text: "打包",
|
||
disabled: false,
|
||
},
|
||
{
|
||
text: "删除",
|
||
disabled: false,
|
||
},
|
||
],
|
||
list: [],
|
||
gift: {
|
||
list: [],
|
||
selIndex: -1,
|
||
},
|
||
query: {
|
||
page: 1,
|
||
size: 20,
|
||
},
|
||
number: 1,
|
||
cacheNumber: 1,
|
||
selIndex: -1,
|
||
total: 0,
|
||
},
|
||
table: "",
|
||
category: {
|
||
list: [],
|
||
showAll: false,
|
||
},
|
||
keyborad: {
|
||
show: false,
|
||
number: "0",
|
||
},
|
||
prveOrder: {
|
||
list: [],
|
||
show: false,
|
||
sel: 0,
|
||
selCart: [],
|
||
},
|
||
layout: {
|
||
list: [
|
||
{ label: "经典布局", value: "default" },
|
||
{ label: "图文显示", value: "img-and-text" },
|
||
{ label: "文字显示", value: "text" },
|
||
],
|
||
sel: "default",
|
||
},
|
||
// 选择用户
|
||
vipUser: {
|
||
id: "",
|
||
},
|
||
//餐桌号
|
||
masterId: "",
|
||
canUpdate: true,
|
||
//下单
|
||
createOrder: {
|
||
form: {},
|
||
data: {},
|
||
quan: {
|
||
list: [],
|
||
sel: "",
|
||
},
|
||
},
|
||
timer: null,
|
||
};
|
||
},
|
||
computed: {
|
||
title() {
|
||
return this.table ? "代客下单" + `(${this.table.name})` : "代客下单";
|
||
},
|
||
allGiftMoney() {
|
||
const price = this.order.list
|
||
.filter((v) => v.isGift === "true")
|
||
.reduce((a, b) => {
|
||
return a + b.number * b.salePrice;
|
||
}, 0);
|
||
return price;
|
||
},
|
||
giftLen() {
|
||
return this.order.list.filter((v) => v.isGift === "true").length;
|
||
},
|
||
isSku() {
|
||
if (this.order.selIndex < 0 || this.order.list.length <= 0) {
|
||
return false;
|
||
}
|
||
return this.order.list[this.order.selIndex].specSnap;
|
||
},
|
||
returnGiftText() {
|
||
if (this.order.selIndex < 0) {
|
||
return "赠送";
|
||
}
|
||
return this.order.list[this.order.selIndex].isGift === "true"
|
||
? "取消赠送"
|
||
: "赠送";
|
||
},
|
||
returnPackText() {
|
||
if (this.order.selIndex < 0) {
|
||
return "打包";
|
||
}
|
||
return this.order.list[this.order.selIndex].isPack === "true"
|
||
? "取消打包"
|
||
: "打包";
|
||
},
|
||
skuText() {
|
||
const result = this.selGoods.skuList.reduce((a, b) => {
|
||
return a + b.sel + "+";
|
||
}, "");
|
||
return result.substring(0, result.length - 1);
|
||
},
|
||
allPrice() {
|
||
const price = this.order.list
|
||
.filter((v) => v.isGift !== "true")
|
||
.reduce((a, b) => {
|
||
return a + b.number * b.salePrice;
|
||
}, 0);
|
||
return price.toFixed(2);
|
||
},
|
||
allNumber() {
|
||
return this.order.list.reduce((a, b) => {
|
||
return a + b.number;
|
||
}, 0);
|
||
},
|
||
selGoodsHide() {
|
||
this.selGoods.show = false;
|
||
},
|
||
CanConfirm() {
|
||
if (!this.selGoods.skuList.length) {
|
||
return true;
|
||
}
|
||
return (
|
||
this.selGoods.skuList.filter((v) => v.sel !== "").length !==
|
||
this.selGoods.skuList.length
|
||
);
|
||
},
|
||
},
|
||
filters: {
|
||
formatSpecSnap(str) {
|
||
if (str === "" || str === null || str === undefined) {
|
||
return "";
|
||
}
|
||
return str.replaceAll(",", " / ");
|
||
},
|
||
to2(n) {
|
||
if (n === undefined) {
|
||
return "";
|
||
}
|
||
return Number(n).toFixed(2);
|
||
},
|
||
returntypeName(item) {
|
||
return item.typeEnum === "sku" ? "多规格" : "单规格";
|
||
},
|
||
},
|
||
watch: {
|
||
"vipUser.id":async function(val){
|
||
this.masterId= await this.getMasterId()
|
||
$setUser({
|
||
tableId:this.table.tableId,
|
||
masterId:this.masterId,
|
||
vipUserId:val,
|
||
type:val===''?1:0
|
||
})
|
||
},
|
||
"prveOrder.list.length": function (val) {
|
||
if (val !== 0) {
|
||
this.prveOrder.selCart =
|
||
this.prveOrder.list[this.prveOrder.sel].carList;
|
||
} else {
|
||
this.prveOrder.selCart = [];
|
||
}
|
||
console.log(this.prveOrder.selCart);
|
||
},
|
||
"prveOrder.sel": function (val) {
|
||
this.prveOrder.selCart =
|
||
this.prveOrder.list.length !== 0
|
||
? this.prveOrder.list[val].carList
|
||
: [];
|
||
console.log(this.prveOrder.selCart);
|
||
if (val < 0) {
|
||
this.prveOrde.show = false;
|
||
}
|
||
},
|
||
// 本地缓存版本
|
||
// "prveOrder.list.length": function (val) {
|
||
// console.log(val);
|
||
// if (val !== 0) {
|
||
// this.prveOrder.selCart = this.prveOrder.list[this.prveOrder.sel].cart;
|
||
// localStorage.setItem(
|
||
// "orderList",
|
||
// JSON.stringify(
|
||
// this.prveOrder.list.map((v) => {
|
||
// return { ...v, cart: JSON.stringify(v.cart) };
|
||
// })
|
||
// )
|
||
// );
|
||
// } else {
|
||
// this.prveOrder.selCart = [];
|
||
// localStorage.removeItem("orderList");
|
||
// }
|
||
// console.log(this.prveOrder.selCart);
|
||
// },
|
||
// "prveOrder.sel": function (val) {
|
||
// this.prveOrder.selCart =
|
||
// this.prveOrder.list.length !== 0 ? this.prveOrder.list[val].cart : [];
|
||
// console.log(this.prveOrder.selCart);
|
||
// },
|
||
"order.allPack": function (val) {
|
||
console.log(val);
|
||
if (this.order.list.length <= 0) {
|
||
return;
|
||
}
|
||
$allPack({
|
||
masterId: this.masterId,
|
||
tableId: this.table.tableId,
|
||
state: val ? 1 : 0,
|
||
}).then((res) => {
|
||
this.order.list.map((v) => {
|
||
v.isPack = `${val}`;
|
||
});
|
||
});
|
||
},
|
||
"order.selIndex": function (val, oldval) {
|
||
console.log(val);
|
||
if (val === -1) {
|
||
// return (this.order.number = 1);
|
||
this.order.cacheNumber = 1;
|
||
} else {
|
||
this.order.cacheNumber = this.order.list[val].number;
|
||
// this.order.number = this.order.list[val].number;
|
||
}
|
||
},
|
||
"order.list.length": function (val) {
|
||
if (val <= 0) {
|
||
this.order.selIndex = -1;
|
||
}
|
||
if (this.order.selIndex >= 0) {
|
||
this.order.cacheNumber = this.order.list[this.order.selIndex].number;
|
||
// this.order.number = this.order.list[this.order.selIndex].number;
|
||
}
|
||
},
|
||
"order.number": function (newval) {
|
||
if (this.order.list.length <= 0 || this.order.selIndex < 0) {
|
||
return;
|
||
}
|
||
this.createOrderClose();
|
||
|
||
let item = this.order.list[this.order.selIndex];
|
||
console.log(item.specSnap);
|
||
const { productId, skuId, isPack, isGift, number } = item;
|
||
$updateCart({
|
||
cartId: item.id,
|
||
productId,
|
||
skuId,
|
||
tableId: this.table.tableId,
|
||
num: this.order.number, // 0会删除此商品
|
||
}).then((res) => {
|
||
this.$set(this.order.list, this.order.selIndex, {
|
||
...res,
|
||
specSnap: item.specSnap,
|
||
});
|
||
});
|
||
return;
|
||
this.updateOrder({
|
||
num: newval, // 0会删除此商品
|
||
});
|
||
},
|
||
"goods.query.productId": function (newval) {
|
||
console.log(newval);
|
||
if (newval === "") {
|
||
this.goods.list = this.$goodsData.records || [];
|
||
} else {
|
||
const newarr = this.$goodsData.records.filter((v) =>
|
||
v.name.includes(newval)
|
||
);
|
||
this.search.list = newarr;
|
||
this.goods.list = newarr.length ? newarr : this.$goodsData.records;
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getGoods();
|
||
this.getCategory();
|
||
},
|
||
methods: {
|
||
//改变是否打印
|
||
changeIsPrint(e) {
|
||
console.log(e);
|
||
this.isPrint = e;
|
||
},
|
||
refOrderNoteConfirm(note) {
|
||
this.note.content = note;
|
||
},
|
||
refNoteShow() {
|
||
this.$refs.refOrderNote.open(this.note.content);
|
||
},
|
||
// 支付订单
|
||
async payOrder() {
|
||
return this.payOrderSuccess();
|
||
console.log({
|
||
orderId: this.createOrder.data.id,
|
||
payType: this.order.payType,
|
||
});
|
||
const res = await $clearCart({
|
||
tableId: this.table.tableId,
|
||
masterId: this.masterId,
|
||
orderId: this.createOrder.data.id,
|
||
payType: this.order.payType,
|
||
});
|
||
this.payOrderSuccess();
|
||
},
|
||
payOrderSuccess() {
|
||
this.$notify({
|
||
title: "更新成功",
|
||
type: "success",
|
||
});
|
||
this.reset();
|
||
},
|
||
chooseTableConfirm(item) {
|
||
console.log(item);
|
||
this.table = item;
|
||
},
|
||
chooseTableOpen() {
|
||
this.$refs.refChooseTable.open();
|
||
},
|
||
chooseUserConfirm(user) {
|
||
console.log(user);
|
||
if (user) {
|
||
this.vipUser = user;
|
||
} else {
|
||
this.vipUser = { id: "" };
|
||
}
|
||
},
|
||
refChooseUserOpen() {
|
||
this.$refs.refChooseUser.open();
|
||
},
|
||
createOrderClose() {
|
||
this.isCreateOrder = false;
|
||
},
|
||
async createOrderShow() {
|
||
this.order.payType;
|
||
this.isCreateOrder = true;
|
||
const res = await $createOrder({
|
||
masterId: this.masterId,
|
||
vipUserId: this.vipUser.id,
|
||
tableId: this.table.tableId,
|
||
note: this.note.content,
|
||
});
|
||
this.createOrder.data = res;
|
||
const masterId = await this.getMasterId();
|
||
this.masterId = masterId;
|
||
},
|
||
|
||
// 获取取餐号
|
||
getMasterId() {
|
||
return $getMasterId({
|
||
tableId: this.table.tableId,
|
||
vipUserId: this.vipUser.id,
|
||
});
|
||
},
|
||
onSelGoodsSkuClose() {
|
||
this.selGoods.isEdit = false;
|
||
},
|
||
changePrveOrder(index) {
|
||
this.prveOrder.sel = index;
|
||
},
|
||
updateOrder(par = {}) {
|
||
let item = this.order.list[this.order.selIndex];
|
||
console.log(item.specSnap);
|
||
const { productId, skuId, isPack, isGift, number } = item;
|
||
addCart({
|
||
masterId: this.masterId,
|
||
vipUserId: this.vipUser.id,
|
||
productId,
|
||
skuId,
|
||
tableId: this.table.tableId,
|
||
num: number,
|
||
isPack: isPack === "true" ? true : false,
|
||
isGift: isGift === "true" ? true : false,
|
||
...par,
|
||
}).then((res) => {
|
||
this.$set(this.order.list, this.order.selIndex, {
|
||
...res,
|
||
specSnap: item.specSnap,
|
||
});
|
||
});
|
||
},
|
||
keyboradAdd(n) {
|
||
if (Number(this.keyborad.number) === 0) {
|
||
return (this.keyborad.number = n);
|
||
}
|
||
this.keyborad.number += n;
|
||
},
|
||
keyboradReduce() {
|
||
if (this.keyborad.number.length <= 1) {
|
||
return (this.keyborad.number = "0");
|
||
}
|
||
this.keyborad.number = this.keyborad.number.substring(
|
||
0,
|
||
this.keyborad.number.length - 1
|
||
);
|
||
},
|
||
keyboradConfirm() {
|
||
const orderGoods = this.order.list[this.order.selIndex];
|
||
// 如果设置为0,商品数量减1
|
||
if (this.keyborad.number == 0) {
|
||
this.changeOrderNumber(this.order.selIndex, true);
|
||
} else {
|
||
orderGoods.number = Number(this.keyborad.number);
|
||
}
|
||
this.order.cacheNumber = orderGoods.number;
|
||
this.order.number = orderGoods.number;
|
||
this.changeKeyboradShow(false);
|
||
},
|
||
changeKeyboradShow(show) {
|
||
if (show) {
|
||
this.keyborad.number = `${this.order.list[this.order.selIndex].number}`;
|
||
}
|
||
this.keyborad.show = show;
|
||
},
|
||
// 获取本地缓存挂单
|
||
// getPrveCart() {
|
||
// const arr = localStorage.getItem("orderList")
|
||
// ? JSON.parse(localStorage.getItem("orderList"))
|
||
// : [];
|
||
// this.prveOrder.list = arr.map((v) => {
|
||
// return { ...v, cart: JSON.parse(v.cart) };
|
||
// });
|
||
// },
|
||
orderBtnsClick(key) {
|
||
const orderGoods = this.order.list[this.order.selIndex];
|
||
this.createOrderClose();
|
||
if (key === "sku") {
|
||
this.selGoods.title = orderGoods.name;
|
||
this.selGoods.isEdit = true;
|
||
const item = this.goods.list.find((v) => v.id == orderGoods.productId);
|
||
console.log(item);
|
||
return this.showSelGoods({ ...item, ...orderGoods });
|
||
}
|
||
if (key === "gift") {
|
||
const isGift = orderGoods.isGift === "true" ? "flase" : "true";
|
||
this.updateOrder({ isGift: isGift === "true" ? true : false });
|
||
return;
|
||
}
|
||
if (key === "pack") {
|
||
const isPack = orderGoods.isPack === "true" ? "flase" : "true";
|
||
this.updateOrder({ isPack: isPack === "true" ? true : false });
|
||
return;
|
||
}
|
||
if (key === "del") {
|
||
return this.removeCart();
|
||
}
|
||
if (key === "save") {
|
||
this.prveOrder.list.push({
|
||
cart: this.order.list,
|
||
id: Date.now(),
|
||
created_at: `${new Date().getHours()}:${new Date().getMinutes()}`,
|
||
goods_num: this.allNumber,
|
||
order_total: this.allPrice,
|
||
});
|
||
localStorage.setItem(
|
||
"orderList",
|
||
JSON.stringify(
|
||
this.prveOrder.list.map((v) => {
|
||
return { ...v, cart: JSON.stringify(v.cart) };
|
||
})
|
||
)
|
||
);
|
||
this.order.list = [];
|
||
this.order.selIndex = -1;
|
||
return;
|
||
}
|
||
if (key === "getOrder") {
|
||
this.prveOrder.show = true;
|
||
this.getPrveCart();
|
||
return;
|
||
}
|
||
},
|
||
//选择挂单确认
|
||
async confirmChoosePrveOrder() {
|
||
if (this.prveOrder.list.length <= 0) {
|
||
return;
|
||
}
|
||
// const { sel } = this.prveOrder;
|
||
// const order=this.prveOrder.list[sel];
|
||
// const res=await $cacheOrder({
|
||
// orderId:order.orderId,
|
||
// isPending:false,
|
||
// tableId:this.table.tableId,
|
||
// masterId:order.carList[0].masterId
|
||
// })
|
||
const {masterId,tableId,userId}= await $cacheOrder({orderId:this.prveOrder.list[this.prveOrder.sel].orderId,isPending:false})
|
||
|
||
getCart({
|
||
masterId,
|
||
tableId,
|
||
vipUserId:userId?userId:''
|
||
})
|
||
return
|
||
this.order.list = this.prveOrder.list[this.prveOrder.sel].carList;
|
||
this.delPrveOrder();
|
||
this.prveOrder.show = false;
|
||
},
|
||
//删除挂单
|
||
async delPrveOrder() {
|
||
const { sel } = this.prveOrder;
|
||
const order = this.prveOrder.list[sel];
|
||
const res = await $delOrder({
|
||
orderId: order.orderId
|
||
});
|
||
this.$notify({
|
||
message: "删除成功",
|
||
type: "success",
|
||
});
|
||
this.prveOrder.list.splice(sel, 1);
|
||
this.prveOrder.sel = sel - 1 <= 0 ? 0 : sel - 1;
|
||
},
|
||
cacheOrderShow() {
|
||
this.prveOrder.show = true;
|
||
},
|
||
//获取挂起订单
|
||
async getCacheOrder() {
|
||
const res = await $getCacheOrder();
|
||
console.log(res);
|
||
this.prveOrder.list = res;
|
||
},
|
||
async saveOrder() {
|
||
const res = await $cacheOrder({
|
||
masterId: this.masterId,
|
||
tableId: this.table.tableId,
|
||
vipUserId: this.vipUser.id,
|
||
isPending: true,
|
||
});
|
||
this.order.list = [];
|
||
this.order.selIndex = -1;
|
||
const masterId = await this.getMasterId();
|
||
this.masterId = masterId;
|
||
this.$nextTick(() => {
|
||
this.getCacheOrder();
|
||
});
|
||
},
|
||
// 删除购物车商品
|
||
removeCart() {
|
||
const orderGoods = this.order.list[this.order.selIndex];
|
||
$removeCart({
|
||
cartId: orderGoods.id,
|
||
tableId: this.table.tableId,
|
||
});
|
||
this.order.list.splice(this.order.selIndex, 1);
|
||
const newval = this.order.selIndex - 1;
|
||
this.order.selIndex = newval <= 0 ? 0 : newval;
|
||
|
||
// this.$message({
|
||
// type: "success",
|
||
// message: "清除成功!",
|
||
// });
|
||
},
|
||
async changeOrderNumber(index, isReduce) {
|
||
if (index < 0) {
|
||
return;
|
||
}
|
||
this.order.selIndex = index;
|
||
console.log(index);
|
||
const item = this.order.list[index];
|
||
const mumber = item.number * 1;
|
||
const newval = mumber + (isReduce ? -1 : 1);
|
||
if (newval <= 0) {
|
||
return this.removeCart();
|
||
}
|
||
if (newval >= 100000) {
|
||
return;
|
||
}
|
||
// const res= await addCart({
|
||
// productId: item.productId,
|
||
// skuId: item.skuId,
|
||
// tableId: this.table.tableId,
|
||
// num: newval, // 0会删除此商品
|
||
// isPack: false, // 是否打包
|
||
// })
|
||
this.order.list[index].number = newval;
|
||
this.order.number = newval;
|
||
this.order.cacheNumber = newval;
|
||
},
|
||
changeOrderGoodsNumber(isReduce) {
|
||
if (this.order.selIndex < 0) {
|
||
return;
|
||
}
|
||
const item = this.order.list[this.order.selIndex];
|
||
console.log(item);
|
||
const mumber = item.number * 1;
|
||
const newval = mumber + (isReduce ? -1 : 1);
|
||
if (newval <= 0) {
|
||
return;
|
||
}
|
||
if (newval >= 100000) {
|
||
return;
|
||
}
|
||
console.log(newval);
|
||
|
||
// this.order.list[this.order.selIndex].number = newval;
|
||
this.order.number = newval;
|
||
this.order.cacheNumber = newval;
|
||
},
|
||
clearCart() {
|
||
if (this.order.list.length <= 0) {
|
||
return;
|
||
}
|
||
this.$confirm("确定要清空点餐列表吗?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
$clearCart({
|
||
masterId: this.masterId,
|
||
tableId: this.table.tableId,
|
||
}).then((res) => {
|
||
this.order.list = [];
|
||
this.order.selIndex = -1;
|
||
this.$message({
|
||
type: "success",
|
||
message: "清除成功!",
|
||
});
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
skuNumberAdd() {
|
||
const number = Number(this.skuGoods.number);
|
||
if (number > 10000) {
|
||
return;
|
||
}
|
||
this.skuGoods.number = number + 1;
|
||
},
|
||
skuNumberReduce() {
|
||
if (this.skuGoods.number - 1 <= 0) {
|
||
return;
|
||
}
|
||
this.skuGoods.number -= 1;
|
||
},
|
||
toggleShowAll() {
|
||
this.category.showAll = !this.category.showAll;
|
||
},
|
||
changeCategoryId(item) {
|
||
this.goods.query.categoryId = item.id;
|
||
},
|
||
async getCategory() {
|
||
const { content } = await tbShopCategoryGet({
|
||
page: 0,
|
||
size: 100,
|
||
sort: "id",
|
||
shopId: localStorage.getItem("shopId"),
|
||
});
|
||
this.category.list = content.reduce((prve, cur) => {
|
||
prve.push(cur);
|
||
return [...prve, ...cur.childrenList];
|
||
}, []);
|
||
this.category.list.unshift({
|
||
id: "",
|
||
name: "全部",
|
||
});
|
||
console.log(this.category.list);
|
||
},
|
||
changeOrderSel(index) {
|
||
this.order.selIndex = index;
|
||
},
|
||
chooseSkuConfirm() {
|
||
if (this.timer) {
|
||
return;
|
||
}
|
||
this.skuGoodsAdd();
|
||
this.timer = setTimeout(() => {
|
||
clearTimeout(this.timer);
|
||
this.timer = null;
|
||
}, 500);
|
||
console.log(this.timer);
|
||
},
|
||
async skuGoodsAdd() {
|
||
let name = this.selGoods.skuList.reduce((prve, cur) => {
|
||
return prve + cur.sel + ",";
|
||
}, "");
|
||
name = name.substring(0, name.length - 1);
|
||
// const item = this.selGoods.data.specList.find((v) => v.specSnap === name);
|
||
const item = this.selGoods.skuMap[name];
|
||
if (!item.isGrounding) {
|
||
//该商品已经下架
|
||
return this.$notify({
|
||
title: "该商品规格已经下架",
|
||
type: "error",
|
||
});
|
||
}
|
||
let res = "";
|
||
|
||
console.log(orderGoods);
|
||
//更改购物车订单商品规格数量
|
||
if (this.selGoods.isEdit) {
|
||
res = await $updateCart({
|
||
cartId: this.order.list[this.order.selIndex].id,
|
||
productId: this.selGoods.data.productId,
|
||
skuId: item.id,
|
||
tableId: this.table.tableId,
|
||
num: this.skuGoods.number, // 0会删除此商品
|
||
});
|
||
this.$set(this.order.list, this.order.selIndex, {
|
||
...res,
|
||
specSnap: name,
|
||
});
|
||
this.$notify({
|
||
title: "更新成功",
|
||
type: "success",
|
||
});
|
||
this.selGoods.show = false;
|
||
return;
|
||
}
|
||
|
||
const orderGoodsIndex = this.order.list.findIndex((V) => {
|
||
return V.skuId == item.id && V.productId == this.selGoods.data.id;
|
||
});
|
||
const orderGoods =
|
||
orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
|
||
console.log(orderGoods);
|
||
if (orderGoods) {
|
||
//更新
|
||
res = await $updateCart({
|
||
cartId: orderGoods.id,
|
||
productId: this.selGoods.data.id,
|
||
skuId: item.id,
|
||
tableId: this.table.tableId,
|
||
num: orderGoods.number * 1 + this.skuGoods.number, // 0会删除此商品
|
||
isPack: false, // 是否打包
|
||
});
|
||
orderGoods.number += this.skuGoods.number;
|
||
this.order.selIndex = orderGoodsIndex;
|
||
this.order.cacheNumber = orderGoods.number;
|
||
} else {
|
||
//添加
|
||
res = await addCart({
|
||
masterId: this.masterId,
|
||
vipUserId: this.vipUser.id,
|
||
productId: this.selGoods.data.id,
|
||
skuId: item.id,
|
||
tableId: this.table.tableId,
|
||
num: this.skuGoods.number, // 0会删除此商品
|
||
isPack: false, // 是否打包
|
||
});
|
||
this.orderListPush({ ...res, specSnap: name });
|
||
// this.orderListPush({
|
||
// skuId: item.id,
|
||
// number: this.skuGoods.number,
|
||
// specSnap: name,
|
||
// });
|
||
}
|
||
|
||
this.$notify({
|
||
title: orderGoods ? "更新成功" : "添加成功",
|
||
type: "success",
|
||
});
|
||
this.selGoods.show = false;
|
||
},
|
||
orderListPush(item) {
|
||
const { isPack, isGift } = item;
|
||
// const isPack=item.isPack==='false'?false:true
|
||
// const isGift=item.isGift==='false'?false:true
|
||
this.order.list.push({ ...item, isPack, isGift });
|
||
this.order.selIndex = this.order.list.length - 1;
|
||
},
|
||
changeTagSel(index, val) {
|
||
this.$set(this.selGoods.skuList[index], "sel", val);
|
||
let specSnap = this.selGoods.skuList.reduce((a, b) => {
|
||
return a + b.sel + ",";
|
||
}, "");
|
||
specSnap = specSnap.substring(0, specSnap.length - 1);
|
||
const skuGoods = this.selGoods.skuMap[specSnap];
|
||
this.skuGoods.data = skuGoods;
|
||
this.skuGoods.number = skuGoods.suit || 1;
|
||
},
|
||
reset() {
|
||
// this.goods.list = [];
|
||
this.order.list = [];
|
||
this.order.query.page = 1;
|
||
this.goods.total = 0;
|
||
this.order.list = [];
|
||
this.isCreateOrder = false;
|
||
this.note.content = "";
|
||
this.vipUser = { id: "" };
|
||
this.allPack = false;
|
||
this.note.content = "";
|
||
},
|
||
//获取购物车数据
|
||
async getCart() {
|
||
const res = await getCart({
|
||
...this.order.query,
|
||
masterId: this.masterId,
|
||
tableId: this.table.tableId,
|
||
});
|
||
this.order.list = res.records;
|
||
this.order.total = res.total;
|
||
},
|
||
showSelGoods(item) {
|
||
console.log(item);
|
||
this.selGoods.data = item;
|
||
this.selGoods.skuMap = {};
|
||
const specList = item.specList;
|
||
for (let i in specList) {
|
||
this.selGoods.skuMap[specList[i].specSnap] = specList[i];
|
||
}
|
||
console.log(this.selGoods.skuMap);
|
||
let specSnap = "";
|
||
let specSnapArr = item.specSnap ? item.specSnap.split(",") : [];
|
||
this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map(
|
||
(v, index) => {
|
||
const values = v.value.split(",");
|
||
specSnap += values[0] + ",";
|
||
return {
|
||
...v,
|
||
values: values,
|
||
sel: specSnapArr.length ? specSnapArr[index] : values[0],
|
||
};
|
||
}
|
||
);
|
||
specSnap = item.specSnap
|
||
? item.specSnap
|
||
: specSnap.substring(0, specSnap.length - 1);
|
||
const skuGoods = this.selGoods.skuMap[specSnap];
|
||
this.skuGoods.data = skuGoods;
|
||
console.log(skuGoods);
|
||
this.skuGoods.number = item.number ? item.number : skuGoods.suit || 1;
|
||
console.log(this.skuGoods.data);
|
||
this.selGoods.title = item.name;
|
||
this.selGoods.show = true;
|
||
},
|
||
//根据右侧商品单规格多规格做不同处理
|
||
async goodsClick(item) {
|
||
if (item.typeEnum === "sku") {
|
||
this.selGoods.data = item;
|
||
this.selGoods.skuMap = {};
|
||
const specList = item.specList;
|
||
for (let i in specList) {
|
||
this.selGoods.skuMap[specList[i].specSnap] = specList[i];
|
||
}
|
||
console.log(this.selGoods.skuMap);
|
||
let specSnap = "";
|
||
// const canBudyGoods=specList.filter(v=>v)
|
||
this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map((v) => {
|
||
const values = v.value.split(",");
|
||
specSnap += values[0] + ",";
|
||
return {
|
||
...v,
|
||
values: values,
|
||
sel: values[0],
|
||
};
|
||
});
|
||
specSnap = specSnap.substring(0, specSnap.length - 1);
|
||
const skuGoods = this.selGoods.skuMap[specSnap];
|
||
this.skuGoods.data = skuGoods;
|
||
console.log(skuGoods);
|
||
this.skuGoods.number = skuGoods.suit || 1;
|
||
console.log(this.skuGoods.data);
|
||
this.selGoods.title = item.name;
|
||
this.selGoods.show = true;
|
||
return;
|
||
}
|
||
//单规格
|
||
const orderGoodsIndex = this.order.list.findIndex((V) => {
|
||
return V.skuId == item.specList[0].id && V.productId == item.id;
|
||
});
|
||
const orderGoods =
|
||
orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
|
||
// const orderGoods = this.order.list.find((V) => {
|
||
// return V.skuId == item.specList[0].id && V.productId == item.id;
|
||
// });
|
||
let res = "";
|
||
if (orderGoods) {
|
||
//更新
|
||
// res = await $updateCart({
|
||
// cartId: orderGoods.id,
|
||
// productId: item.id,
|
||
// skuId: item.specList[0].id,
|
||
// tableId: this.table.tableId,
|
||
// num: orderGoods.number * 1 + item.specList[0].suit, // 0会删除此商品
|
||
// });
|
||
orderGoods.number += item.specList[0].suit;
|
||
this.order.number = orderGoods.number;
|
||
this.order.selIndex = orderGoodsIndex;
|
||
} else {
|
||
//增加
|
||
console.log(item);
|
||
res = await addCart({
|
||
masterId: this.masterId,
|
||
vipUserId: this.vipUser.id,
|
||
productId: item.id,
|
||
skuId: item.specList[0].id,
|
||
tableId: this.table.tableId,
|
||
num: item.specList[0].suit, // 0会删除此商品
|
||
isPack: false, // 是否打包
|
||
});
|
||
this.orderListPush(res);
|
||
}
|
||
},
|
||
async getGoods() {
|
||
const res = await getGoodsLists(this.goods.query);
|
||
console.log(res);
|
||
this.goods.list = res.records;
|
||
this.goods.total = res.total;
|
||
this.$goodsData = res;
|
||
},
|
||
async open(item) {
|
||
this.table = item;
|
||
this.informationdialogshow = true;
|
||
const res = await this.getMasterId();
|
||
this.masterId = res.masterId;
|
||
this.getCart();
|
||
// this.getPrveCart();
|
||
this.getCacheOrder();
|
||
},
|
||
close() {
|
||
this.informationdialogshow = false;
|
||
},
|
||
resetCommodityArr() {
|
||
this.commodityArr = [];
|
||
this.$refs.addSelect.resetFields();
|
||
},
|
||
haocaiCancel() {
|
||
this.informationdialogshow = false;
|
||
},
|
||
haocaiConfirm() {
|
||
console.log(haocaiSelectedMap);
|
||
|
||
this.$emit("confirm", haocaiSelectedMap);
|
||
this.informationdialogshow = false;
|
||
return;
|
||
},
|
||
// 分页回调
|
||
paginationChange(e) {
|
||
this.tableData.page = e - 1;
|
||
this.getTableData();
|
||
},
|
||
paginationChangeinformation(e) {
|
||
this.goods.query.page = e;
|
||
this.getGoods();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 针对所有input type="number" */
|
||
input[type="number"]::-webkit-inner-spin-button,
|
||
input[type="number"]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.icon-add {
|
||
color: rgb(34, 191, 100);
|
||
font-size: 22px;
|
||
cursor: pointer;
|
||
}
|
||
.prve-car-len {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
top: 2px;
|
||
right: 2px;
|
||
height: 16px;
|
||
width: 16px;
|
||
font-size: 12px;
|
||
color: rgb(255, 255, 255);
|
||
border-radius: 50%;
|
||
background-color: rgb(250, 85, 85);
|
||
}
|
||
::v-deep .number-box .el-input__inner {
|
||
border: none;
|
||
}
|
||
::v-deep .el-button--text {
|
||
color: #000;
|
||
}
|
||
::v-deep .number-box .el-input__inner {
|
||
border: none;
|
||
padding: 0 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
::v-deep .el-button--success {
|
||
background: #22bf64;
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-tag--dark .el-tag--success {
|
||
background: #22bf64;
|
||
color: #fff;
|
||
}
|
||
::v-deep .flex-1 .el-button{
|
||
width: 100%;
|
||
}
|
||
::v-deep .el-button--medium {
|
||
padding-top: 12px;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
::v-deep .number-box .el-input__inner::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
.carts_list_title {
|
||
padding: 16px 0 12px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
&::after {
|
||
content: "";
|
||
flex: 1;
|
||
height: 1px;
|
||
background-color: #ebebeb;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.lh-16 {
|
||
line-height: 16px;
|
||
}
|
||
.good_info_discount {
|
||
height: 16px;
|
||
padding: 0 3px;
|
||
color: #ff3f3f;
|
||
background-color: rgba(255, 63, 63, 0.1);
|
||
border-radius: 2px;
|
||
margin-left: 6px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
}
|
||
.icon-remove {
|
||
border: 1px solid #d8d8d8;
|
||
width: 22px;
|
||
height: 22px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
|
||
&::after {
|
||
content: "";
|
||
display: block;
|
||
width: 10px;
|
||
height: 1px;
|
||
background: #999;
|
||
}
|
||
}
|
||
.row-center {
|
||
justify-content: center;
|
||
}
|
||
.sku-group-text {
|
||
text-align: left;
|
||
color: #666;
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 18px;
|
||
text-align: left;
|
||
color: rgb(255, 81, 82);
|
||
font-weight: 600;
|
||
}
|
||
.youhui {
|
||
color: #c12a2a;
|
||
font-size: 13px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
::v-deep .el-dialog__footer {
|
||
border-top: 1px solid #efefef;
|
||
}
|
||
|
||
.sku-bottom {
|
||
padding: 14px 12px 5px;
|
||
}
|
||
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
.col-baseline {
|
||
align-items: baseline;
|
||
}
|
||
|
||
.absolute {
|
||
position: absolute;
|
||
}
|
||
|
||
.order-number-box {
|
||
position: relative;
|
||
|
||
.absolute {
|
||
width: 60px;
|
||
height: 40px;
|
||
right: -30px;
|
||
top: -12px;
|
||
position: absolute;
|
||
|
||
.order-input-number {
|
||
position: absolute;
|
||
right: -6px;
|
||
top: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: none;
|
||
background-color: #fff;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
||
padding: 9px 6px;
|
||
background-color: #fff;
|
||
height: 40px;
|
||
}
|
||
|
||
&:hover .order-input-number {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.color-333 {
|
||
color: #333;
|
||
}
|
||
|
||
.color-666 {
|
||
color: #666;
|
||
}
|
||
.ft-13 {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.color-000 {
|
||
color: #000;
|
||
}
|
||
|
||
.color-999 {
|
||
color: #999;
|
||
}
|
||
|
||
.ft-12 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.ft-18 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.transition {
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
::v-deep .el-dialog__header {
|
||
border-bottom: 1px solid #efefef;
|
||
}
|
||
|
||
.tableId {
|
||
padding: 9px 15px;
|
||
border: 1px solid #dcdfe6;
|
||
font-size: 12px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
background-color: rgba(24, 144, 255, 0.1);
|
||
}
|
||
}
|
||
|
||
.cur-pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.mt-14 {
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.my-btn {
|
||
outline: none;
|
||
height: 40px;
|
||
font-size: 14px;
|
||
line-height: 40px;
|
||
color: #000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
padding: 0 5px;
|
||
background-color: #fff;
|
||
position: relative;
|
||
|
||
&.disabled {
|
||
color: #c0c4cc;
|
||
cursor: not-allowed;
|
||
background-color: #fff;
|
||
border-color: #ebeef5;
|
||
}
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex: 1;
|
||
}
|
||
.headimg {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
border-radius: 2px;
|
||
margin-right: 6px;
|
||
}
|
||
.take_order_list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.tol_left_list {
|
||
height: 360px;
|
||
margin-right: 24px;
|
||
overflow-y: scroll;
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
.tolll_item {
|
||
border: 1px solid rgb(247, 247, 250);
|
||
height: 86px;
|
||
width: 130px;
|
||
padding: 10px 14px;
|
||
margin-bottom: 12px;
|
||
border-radius: 4px;
|
||
color: #303133;
|
||
|
||
background-color: #f7f7fa;
|
||
&.active {
|
||
border: 1px solid rgb(0, 194, 95);
|
||
background-color: rgba(0, 194, 95, 0.1);
|
||
color: rgb(0, 194, 95) !important;
|
||
.tollli_time,
|
||
.tollli_num {
|
||
color: rgb(0, 194, 95) !important;
|
||
}
|
||
}
|
||
cursor: pointer;
|
||
.tollli_index {
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
.tollli_price {
|
||
margin-top: 8px;
|
||
font-size: 14px;
|
||
}
|
||
.tollli_time_and_num {
|
||
margin-top: 6px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.tollli_time,
|
||
.tollli_num {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tol_right_list {
|
||
flex: 1;
|
||
height: 360px;
|
||
overflow-y: scroll;
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
.tolrl_item {
|
||
display: flex;
|
||
padding: 2px 2px 13px 2px;
|
||
margin-bottom: 12px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
.tolrli_img {
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
.tolrli_right {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
padding: 1px 0 1px 8px;
|
||
.tr_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.trt_name {
|
||
width: 150px;
|
||
font-size: 14px;
|
||
color: #212121;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.trt_num {
|
||
font-size: 14px;
|
||
color: #212121;
|
||
}
|
||
.trt_price {
|
||
width: 100px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
color: #212121;
|
||
}
|
||
}
|
||
.tr_bottom {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.success {
|
||
color: #fff;
|
||
border-color: #22bf64;
|
||
background-color: rgb(34, 191, 100);
|
||
}
|
||
|
||
.categoty {
|
||
position: relative;
|
||
margin-left: 7px;
|
||
|
||
.show_more_btn {
|
||
padding: 0 10px;
|
||
color: #1890ff;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
user-select: none;
|
||
min-width: 80px;
|
||
background: #f7f7fa;
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 0;
|
||
height: 38px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.el-icon-arrow-down {
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
&.showAll .el-icon-arrow-down {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-left: 12px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
}
|
||
::v-deep .el-dialog__title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
::v-deep .categorys .el-tag--plain.el-tag--success {
|
||
border: 1px solid #dcdfe6;
|
||
color: #000;
|
||
font-weight: 600;
|
||
}
|
||
|
||
::v-deep .el-dialog {
|
||
user-select: none;
|
||
}
|
||
|
||
::v-deep .categorys .el-tag {
|
||
min-width: 80px;
|
||
height: 38px;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
padding: 0 14px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border-radius: 2px;
|
||
user-select: none;
|
||
margin: 0 10px 10px 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
::v-deep .tag-group .el-tag {
|
||
min-width: 80px;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
padding: 0 15px;
|
||
font-size: 14px;
|
||
border-radius: 2px;
|
||
user-select: none;
|
||
margin: 0 10px 10px 0;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::v-deep .tag-group .el-tag--light {
|
||
color: #000;
|
||
background-color: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||
background-color: #22bf64;
|
||
border-color: #22bf64;
|
||
}
|
||
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
|
||
color: #22bf64;
|
||
}
|
||
|
||
::v-deep .tag-group .el-tag--dark {
|
||
background: rgba(34, 191, 100, 0.1);
|
||
color: #22bf64;
|
||
border-color: #22bf64;
|
||
}
|
||
.no-search-result {
|
||
color: #888;
|
||
margin: 0 0 10px 7px;
|
||
}
|
||
.numberbox {
|
||
border: 1px solid #dcdfe6;
|
||
background-color: #fff;
|
||
color: #000;
|
||
min-height: 38px;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
margin: 0 0 10px;
|
||
|
||
.reduce,
|
||
.add {
|
||
font-size: 28px;
|
||
color: #999;
|
||
height: 38px;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
}
|
||
|
||
.input {
|
||
font-size: 30px;
|
||
display: flex;
|
||
overflow: hidden;
|
||
padding: 0 10px;
|
||
height: 50px;
|
||
border-top: 1px solid #dcdfe6;
|
||
border-bottom: 1px solid #dcdfe6;
|
||
|
||
input {
|
||
height: 100%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
outline: none;
|
||
justify-content: center;
|
||
border: none;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tag-group {
|
||
margin-top: 10px;
|
||
|
||
.tag-item {
|
||
margin-bottom: 20px;
|
||
|
||
.tag-name {
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.row-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.row-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.none {
|
||
display: none !important;
|
||
}
|
||
|
||
.handle {
|
||
font-size: 18px;
|
||
color: #999;
|
||
|
||
&:hover {
|
||
cursor: grab;
|
||
}
|
||
}
|
||
|
||
.shop_info {
|
||
display: flex;
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-left: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.tag_wrap {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font-bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.head-container .filter-item {
|
||
margin: 0 5px 0 0;
|
||
}
|
||
|
||
.diancan {
|
||
display: flex;
|
||
height: 80vh;
|
||
|
||
.choose-user {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #ebebeb;
|
||
margin-bottom: 10px;
|
||
}
|
||
.order {
|
||
border-radius: 6px;
|
||
display: flex;
|
||
padding-left: 12px;
|
||
.bottom {
|
||
left: 0;
|
||
right: 0;
|
||
box-sizing: border-box;
|
||
padding: 14px;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
z-index: 10;
|
||
border-top: 1px solid #ebebeb;
|
||
}
|
||
|
||
.list {
|
||
width: 352px;
|
||
padding: 12px 12px 0 0;
|
||
}
|
||
|
||
.controls {
|
||
min-width: 106px;
|
||
width: 106px;
|
||
border-radius: 4px;
|
||
background-color: #f7f7fa;
|
||
padding: 14px 10px;
|
||
position: relative;
|
||
overflow-y: auto;
|
||
|
||
.btn {
|
||
border: 1px solid #dcdfe6;
|
||
background-color: #fff;
|
||
color: #000;
|
||
min-height: 38px;
|
||
line-height: 38px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
margin: 0 0 10px;
|
||
|
||
&.disabled {
|
||
color: #999;
|
||
pointer-events: none;
|
||
cursor: no-drop;
|
||
background-color: rgb(250, 250, 252);
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-item {
|
||
padding: 4px;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
transition: all 0.3s;
|
||
.pack {
|
||
right: 100%;
|
||
width: 18px;
|
||
height: 18px;
|
||
background: #35ac6a;
|
||
border-radius: 4px 0 4px 0;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 17px;
|
||
}
|
||
&.active {
|
||
background-color: rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.total-price {
|
||
width: 94px;
|
||
text-align: right;
|
||
}
|
||
|
||
.good-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
min-width: 70px;
|
||
|
||
.specSnap {
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-top: 3px;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 13px;
|
||
text-align: left;
|
||
color: #212121;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
position: relative;
|
||
margin-right: 10px;
|
||
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
background-color: #f7f7fa;
|
||
margin-left: 20px;
|
||
padding: 14px 20px 0;
|
||
overflow: hidden;
|
||
|
||
.goods-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.goods-item {
|
||
position: relative;
|
||
cursor: pointer;
|
||
min-width: 98px;
|
||
max-width: 100px;
|
||
height: 100px;
|
||
flex: 1;
|
||
opacity: 1;
|
||
margin: 0 7px 14px;
|
||
border-radius: 4px;
|
||
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.typeEnum {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
border-radius: 0 0 0 10px;
|
||
background-color: #46a6ff;
|
||
color: #fff;
|
||
padding: 2px 10px;
|
||
display: none;
|
||
}
|
||
|
||
.info {
|
||
font-size: 14px;
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
&.layout-img-and-text {
|
||
min-width: 116px !important;
|
||
max-width: 136px !important;
|
||
height: 175px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07);
|
||
|
||
img {
|
||
width: 136px;
|
||
height: 125px;
|
||
}
|
||
.info {
|
||
position: inherit;
|
||
background-color: #fff;
|
||
padding: 4px 4px 8px;
|
||
color: #000;
|
||
.name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-bottom: 2px;
|
||
}
|
||
.price {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
&.layout-text {
|
||
margin: 0 5px 10px;
|
||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
|
||
min-width: 128px !important;
|
||
max-width: 148px !important;
|
||
background-color: #fff;
|
||
height: 80px;
|
||
.info {
|
||
background-color: #fff;
|
||
|
||
position: inherit;
|
||
color: #000;
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
color: #000;
|
||
line-height: 22px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
height: 44px;
|
||
}
|
||
|
||
.price {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin: 6px 0 0;
|
||
}
|
||
}
|
||
img {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carts {
|
||
flex-direction: column;
|
||
background: #fff;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.carts .title,
|
||
.carts {
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.carts .title {
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
padding: 20px;
|
||
padding-top: 30px;
|
||
}
|
||
|
||
.carts .title .left {
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: #000;
|
||
}
|
||
|
||
.carts .title .right {
|
||
font-size: 14.4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.carts .box_status {
|
||
width: 370px;
|
||
height: 58px;
|
||
background: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
font-family: MicrosoftYaHei;
|
||
font-size: 20px;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
letter-spacing: 1.25px;
|
||
text-align: center;
|
||
}
|
||
|
||
.carts .box_status span {
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.number_list_box {
|
||
width: 370px;
|
||
background: #fff;
|
||
border-radius: 3px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.submit {
|
||
width: 366px;
|
||
height: 44px;
|
||
background: #22bf64;
|
||
border-radius: 2px;
|
||
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: 400;
|
||
margin-bottom: 40px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.yd-keyboard {
|
||
justify-content: center;
|
||
margin-top: -8px;
|
||
margin-left: -8px;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number,
|
||
.yd-keyboard {
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number {
|
||
margin-left: 8px;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number .key-line {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number .key {
|
||
width: 122px;
|
||
height: 60px;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number .key:not(:last-child) {
|
||
border-right: 1px solid #dcdfe6;
|
||
}
|
||
|
||
.mini-number-box1 .mini-number .key-line:not(:last-child) {
|
||
border-bottom: 1px solid #dcdfe6;
|
||
}
|
||
|
||
.mini-number-box2 {
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
}
|
||
|
||
.mini-number-box2 .key {
|
||
width: 80px;
|
||
height: 70px;
|
||
}
|
||
|
||
.mini-number-box2 .function-button {
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mini-number-box2 .function-button .key {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.key-line {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.key,
|
||
.key-line {
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
}
|
||
|
||
.key {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: #fff;
|
||
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||
border-radius: 4px;
|
||
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
text-align: center;
|
||
line-height: 34px;
|
||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
|
||
cursor: pointer;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.simple-Keyboard-number,
|
||
.simple-Keyboard-weight {
|
||
min-width: 410px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
background: #fff;
|
||
-webkit-box-shadow: 12px 18px 20px 0 rgba(0, 0, 0, 0.23921568627450981);
|
||
box-shadow: 12px 18px 20px 0 rgba(0, 0, 0, 0.23921568627450981);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.submit {
|
||
width: 366px;
|
||
height: 44px;
|
||
background: #22bf64;
|
||
border-radius: 2px;
|
||
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: 400;
|
||
margin-bottom: 40px;
|
||
cursor: pointer;
|
||
}
|
||
.disabled-box {
|
||
position: absolute;
|
||
inset: 0;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.cashier_box {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
flex: 1;
|
||
background: #f7f7fa;
|
||
position: relative;
|
||
margin: 0 24px 0 0;
|
||
border-radius: 4px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cashier_left .el-form-item {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.cashier_left {
|
||
padding: 0 20px 0;
|
||
|
||
flex: 1;
|
||
min-width: 310px;
|
||
}
|
||
|
||
.cashier_left .title {
|
||
font-size: 18px;
|
||
color: #000;
|
||
font-weight: 600;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.cashier_left .detail_box {
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
padding: 0 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cashier_left .detail_box .forms {
|
||
padding: 10px 0;
|
||
border-top: 1px solid #ebebeb;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard {
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 80px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard .info {
|
||
margin-left: 10px;
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard .info .nickname {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard .info .nickname .txt {
|
||
max-width: 120px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
}
|
||
::v-deep .cashier_left .el-form-item__label {
|
||
text-align: left;
|
||
}
|
||
.cashier_left .detail_box .usercard .info .nickname .vip_level {
|
||
font-size: 12px;
|
||
padding: 0 5px;
|
||
background: #f7793d;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard .info .other_info {
|
||
display: flex;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.cashier_left .detail_box .usercard .info .other_info .item {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.cashier_right {
|
||
min-width: 250px;
|
||
border-left: 1px solid #ebebeb;
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.cashier_right .detail_form {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item {
|
||
display: flex;
|
||
|
||
justify-content: space-between;
|
||
position: relative;
|
||
margin-bottom: 16px;
|
||
|
||
align-items: center;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item .left {
|
||
font-size: 14px;
|
||
color: #000;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item .right {
|
||
font-size: 14px;
|
||
color: #000;
|
||
|
||
display: flex;
|
||
margin-right: 40px;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item .right .btn {
|
||
font-size: 14px;
|
||
color: #1890ff;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item .right .dfi_button {
|
||
display: flex;
|
||
|
||
justify-content: center;
|
||
|
||
align-items: center;
|
||
margin-left: 10px;
|
||
width: 98px;
|
||
height: 36px;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
background-color: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cashier_right .detail_form .detail_form_item .redfont {
|
||
color: #fa5555;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.cashier_right .detail_form .line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: #ebebeb;
|
||
margin-top: 4px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cashier_right .pay_btn {
|
||
width: 100%;
|
||
line-height: 44px;
|
||
height: 44px;
|
||
background: #22bf64;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cashier_right .pay_btn:hover {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.btn1 {
|
||
background: #22bf64;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
.pay_btns .el-button + .el-button {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.pay_btns .el-button {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.pay_btns .el-button:disabled {
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
</style>
|