1001 lines
34 KiB
Vue
1001 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container" style="border-box:box-sizing;">
|
|||
|
|
<el-row :gutter="30">
|
|||
|
|
|
|||
|
|
<!-- 左侧菜单-->
|
|||
|
|
<el-col :span="2">
|
|||
|
|
<el-menu :default-active="menu" class="el-menu-vertical-demo" @select="leftMenuSelect">
|
|||
|
|
<el-menu-item index="1">
|
|||
|
|
<i class="el-icon-goods">普通收银</i>
|
|||
|
|
</el-menu-item>
|
|||
|
|
|
|||
|
|
<el-menu-item :disabled="app.isEmpty(member.memberId)" index="2" style="border-top: none;">
|
|||
|
|
<i class="el-icon-bank-card">开卡</i>
|
|||
|
|
</el-menu-item>
|
|||
|
|
|
|||
|
|
<el-menu-item :disabled="app.isEmpty(memberCard.memberCardId)" index="3" style="border-top: none;">
|
|||
|
|
<i class="el-icon-bank-card">续卡</i>
|
|||
|
|
</el-menu-item>
|
|||
|
|
</el-menu>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="13">
|
|||
|
|
<!-- 中间 会员信息-->
|
|||
|
|
<el-autocomplete
|
|||
|
|
style="width: 35%"
|
|||
|
|
popper-class="my-autocomplete"
|
|||
|
|
v-model="querySearchStr"
|
|||
|
|
:fetch-suggestions="querySearch"
|
|||
|
|
placeholder="会员检索"
|
|||
|
|
@select="handleMemberSelect">
|
|||
|
|
<i
|
|||
|
|
class="el-icon-search el-input__icon"
|
|||
|
|
slot="prefix"
|
|||
|
|
>
|
|||
|
|
</i>
|
|||
|
|
<template slot-scope="{ item }">
|
|||
|
|
<div v-if="item.errorMsg">
|
|||
|
|
{{item.errorMsg}}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template v-else>
|
|||
|
|
<div class="name">
|
|||
|
|
<i class="el-icon-user"></i>
|
|||
|
|
{{ item.memberName }}
|
|||
|
|
</div>
|
|||
|
|
<span class="addr">
|
|||
|
|
<i class="el-icon-phone"></i>
|
|||
|
|
{{ item.memberPhone }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</el-autocomplete>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-autocomplete
|
|||
|
|
style="width: 35%;margin-left: 50px;"
|
|||
|
|
popper-class="my-autocomplete"
|
|||
|
|
v-model="queryCardSearchStr"
|
|||
|
|
:fetch-suggestions="queryCardSearch"
|
|||
|
|
placeholder="会员卡号检索"
|
|||
|
|
@select="handleMemberCardSelect">
|
|||
|
|
<i
|
|||
|
|
class="el-icon-search el-input__icon"
|
|||
|
|
slot="prefix"
|
|||
|
|
>
|
|||
|
|
</i>
|
|||
|
|
<template slot-scope="{ item }">
|
|||
|
|
<div v-if="item.errorMsg">
|
|||
|
|
{{item.errorMsg}}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template v-else>
|
|||
|
|
<div class="name">
|
|||
|
|
<i class="el-icon-bank-card"></i>
|
|||
|
|
{{ item.cardNo }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="name">
|
|||
|
|
<i class="el-icon-user"></i>
|
|||
|
|
{{ item.member.memberName }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span class="addr">
|
|||
|
|
<i class="el-icon-phone"></i>
|
|||
|
|
{{ item.member.memberPhone }}
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</el-autocomplete>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-descriptions :column="2" border title="用户信息" v-if="member.memberId"
|
|||
|
|
style="margin-top: 20px;margin-bottom: 20px;">
|
|||
|
|
<el-descriptions-item :labelStyle="{ 'width': '80px' }" label="用户名">{{member.memberName}}
|
|||
|
|
<el-button style="margin-left: 30px;" size="mini" type="success" plain @click="clearMember">重选</el-button>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item :labelStyle="{ 'width': '80px' }" label="手机号">{{member.memberPhone}}
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item :span="2" :labelStyle="{ 'width': '80px' }" label="备注">
|
|||
|
|
<el-input
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="2"
|
|||
|
|
placeholder="请输入内容"
|
|||
|
|
v-model="member.remark">
|
|||
|
|
</el-input>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item :span="2" label="会员卡" :labelStyle="{ 'height': '100px' }">
|
|||
|
|
<el-collapse v-if="app.isNotEmpty(memberCard.memberCardId)" v-model="collapseItem"
|
|||
|
|
style="border-top: none;">
|
|||
|
|
<el-collapse-item name="1">
|
|||
|
|
<el-tag
|
|||
|
|
slot="title"
|
|||
|
|
class="el-tag"
|
|||
|
|
@click="chooseMemberCard(item)"
|
|||
|
|
type="danger"
|
|||
|
|
effect="light">
|
|||
|
|
卡号：{{memberCard.cardNo}} 卡名：{{ memberCard.cardName }} <br/>余额：{{memberCard.amount}}
|
|||
|
|
赠送金额：{{memberCard.giveAmount}}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<el-tag
|
|||
|
|
class="el-tag"
|
|||
|
|
@click="chooseMemberCard(item)"
|
|||
|
|
v-for="item in memberCardList"
|
|||
|
|
:key="item.memberCardId"
|
|||
|
|
type="danger"
|
|||
|
|
:effect="memberCard.memberCardId==item.memberCardId?'light':'plain'">
|
|||
|
|
卡号：{{item.cardNo}} 卡名：{{ item.cardName }} <br/>余额：{{item.amount}} 赠送金额：{{item.giveAmount}}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-collapse-item>
|
|||
|
|
</el-collapse>
|
|||
|
|
<span v-else class="info-text" style="cursor: pointer;" @click="menu = '2'">去开卡</span>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
</el-descriptions>
|
|||
|
|
|
|||
|
|
<el-descriptions border title="用户信息" v-else style="margin-top: 20px;margin-bottom: 20px;">
|
|||
|
|
<el-descriptions-item label="用户名">散客
|
|||
|
|
|
|||
|
|
<el-button style="margin-left: 30px;" size="mini" type="success" plain @click="addMember">快速建档</el-button>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
</el-descriptions>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 中间 购物车信息-->
|
|||
|
|
<div class="grid-content bg-purple">
|
|||
|
|
<el-table
|
|||
|
|
v-if="menu == '1'"
|
|||
|
|
border
|
|||
|
|
height="270"
|
|||
|
|
max-height="270"
|
|||
|
|
:data="shopCart"
|
|||
|
|
style="width: 100%;margin-bottom: 20px;">
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="categoryName"
|
|||
|
|
label="分类"
|
|||
|
|
width="100">
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="productName"
|
|||
|
|
label="商品名"
|
|||
|
|
width="120"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="productAmount"
|
|||
|
|
label="价格"
|
|||
|
|
width="80"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span v-if="app.isEmpty(member.memberId)" class="price-text">{{ scope.row.productAmount }}</span>
|
|||
|
|
<span v-else="member.memberId" class="price-text">{{ scope.row.productMemberAmount }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
v-if="app.isNotEmpty(memberCard.memberCardId)"
|
|||
|
|
align="center"
|
|||
|
|
label="折扣"
|
|||
|
|
width="80"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="price-text">{{ scope.row.discount}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
label="折后价"
|
|||
|
|
width="80"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="price-text">{{ scope.row.realAmount}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="count"
|
|||
|
|
label="数量"
|
|||
|
|
width="155"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input-number size="mini" :min="0" :max="100" v-model="scope.row.count"
|
|||
|
|
@change="handleShopCartChange($event,scope)"></el-input-number>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="totalRealAmount"
|
|||
|
|
label="总金额"
|
|||
|
|
width="80"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<span class="price-text">{{ scope.row.totalRealAmount }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
label="关联员工"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
|
|||
|
|
<el-tag
|
|||
|
|
v-for="tag in scope.row.serverList"
|
|||
|
|
:key="tag.serverId"
|
|||
|
|
closable
|
|||
|
|
@close="handleServerClose(scope.row.serverList,index)"
|
|||
|
|
type="warning">
|
|||
|
|
{{tag.serverName}}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<el-button size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
v-if="menu == '2'"
|
|||
|
|
border
|
|||
|
|
height="200"
|
|||
|
|
max-height="200"
|
|||
|
|
:data="shopCart"
|
|||
|
|
style="width: 100%;margin-bottom: 20px;">
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardName"
|
|||
|
|
label="卡名"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardNo"
|
|||
|
|
label="设置卡号"
|
|||
|
|
width="200"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input placeholder="请输入卡号" v-model="scope.row.cardNo">
|
|||
|
|
<!-- <template slot="append">.com</template>-->
|
|||
|
|
</el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardDiscount"
|
|||
|
|
label="卡折扣"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="todos"
|
|||
|
|
label="工本费"
|
|||
|
|
>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardAmount"
|
|||
|
|
label="开卡金额"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.cardAmount"
|
|||
|
|
@keyup.native="app.clearNoNum"
|
|||
|
|
placeholder="请输入"></el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="giveAmount"
|
|||
|
|
label="赠送金额"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.giveAmount"
|
|||
|
|
@keyup.native="app.clearNoNum"
|
|||
|
|
placeholder="请输入"></el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
label="关联员工"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
|
|||
|
|
<el-tag
|
|||
|
|
v-for="tag in scope.row.serverList"
|
|||
|
|
:key="tag.serverId"
|
|||
|
|
closable
|
|||
|
|
@close="handleServerClose(scope.row.serverList,index)"
|
|||
|
|
type="warning">
|
|||
|
|
{{tag.serverName}}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<el-button size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
v-if="menu == '3'"
|
|||
|
|
border
|
|||
|
|
height="200"
|
|||
|
|
max-height="200"
|
|||
|
|
:data="shopCart"
|
|||
|
|
style="width: 100%;margin-bottom: 20px;">
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardName"
|
|||
|
|
label="卡名"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="cardNo"
|
|||
|
|
label="设置卡号"
|
|||
|
|
width="200"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="discount"
|
|||
|
|
label="卡折扣"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="chargedCardAmount"
|
|||
|
|
label="续卡金额"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.chargedCardAmount"
|
|||
|
|
@keyup.native="app.clearNoNum"
|
|||
|
|
placeholder="请输入"></el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
prop="chargedGiveAmount"
|
|||
|
|
label="赠送金额"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-input
|
|||
|
|
v-model="scope.row.chargedGiveAmount"
|
|||
|
|
@keyup.native="app.clearNoNum"
|
|||
|
|
placeholder="请输入"></el-input>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
align="center"
|
|||
|
|
label="关联员工"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
|
|||
|
|
<el-tag
|
|||
|
|
v-for="tag in scope.row.serverList"
|
|||
|
|
:key="tag.serverId"
|
|||
|
|
closable
|
|||
|
|
@close="handleServerClose(scope.row.serverList,index)"
|
|||
|
|
type="warning">
|
|||
|
|
{{tag.serverName}}
|
|||
|
|
</el-tag>
|
|||
|
|
|
|||
|
|
<el-button size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-divider></el-divider>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
总金额: <span class="price-text">{{app.getFloatStr(getTotalRealAmount)}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-input placeholder="不填则自动生成" size="small " v-model="sellNo"
|
|||
|
|
style="width: 300px;margin-bottom: 15px;margin-top: 10px;">
|
|||
|
|
<template slot="prepend">订单号</template>
|
|||
|
|
</el-input>
|
|||
|
|
|
|||
|
|
<el-row>
|
|||
|
|
<el-button @click="pay" type="success">结算</el-button>
|
|||
|
|
<el-button @click="pendingOrder" type="warning">挂单</el-button>
|
|||
|
|
<el-button @click="takePendingOrder" type="primary">取单</el-button>
|
|||
|
|
|
|||
|
|
<pay-type ref="payTypeRef" @ok="getPayList"/>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- 右侧商品卡项选择-->
|
|||
|
|
<el-col :span="9">
|
|||
|
|
<div class="grid-content bg-purple">
|
|||
|
|
<el-tabs v-if="menu == 1" v-model="activeName" @tab-click="handleCategoryClick" type="border-card"
|
|||
|
|
style="height: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;">
|
|||
|
|
<el-tab-pane
|
|||
|
|
v-for="(item, index) in categoryList"
|
|||
|
|
:key="item.categoryId"
|
|||
|
|
:label="item.categoryName"
|
|||
|
|
:name="item.categoryId"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<el-row :gutter="20" style="" v-if="productList.length>0">
|
|||
|
|
<el-col @click.native="chooseProduct(item)" :span="8" v-for="item in productList"
|
|||
|
|
:key="item.productId" style="margin-top: 10px;cursor: pointer;">
|
|||
|
|
<el-card class="product-card" :body-style="{ padding: '0px' }" style="height: 210px;">
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
style="height: 110px;display: flex;align-items: center;justify-content: center; box-sizing: border-box;">
|
|||
|
|
<img style="width:85%;height: 90px;border-radius: 5px;border: 1px solid #eee;"
|
|||
|
|
:src="baseUrl + item.productImageUrl" class="image"/>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding:10px 0 0 10px;font-size: 16px;">
|
|||
|
|
{{item.productName}} <br/><span style="font-size: 12px;" class="gray-text"
|
|||
|
|
v-show="item.stockControl==1">库存：{{item.productCount}} </span>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding:5px 0 0 10px;">
|
|||
|
|
<span style="font-size: 14px;"> 散客价： <span
|
|||
|
|
class="price-text">¥ {{item.productAmount}}</span></span><br/>
|
|||
|
|
<span style="font-size: 14px;"> 会员价： <span
|
|||
|
|
class="price-text">¥ {{item.productMemberAmount}}</span></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div v-else>
|
|||
|
|
<el-empty description="该分类商品为空">
|
|||
|
|
</el-empty>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
<el-tabs v-if="menu == 2" v-model="cardActiveName" @tab-click="handleCardClick" type="border-card"
|
|||
|
|
style="height: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;">
|
|||
|
|
<el-tab-pane
|
|||
|
|
v-for="(item, index) in cardTypeList"
|
|||
|
|
:key="item.cardType"
|
|||
|
|
:label="item.cardName"
|
|||
|
|
:name="item.cardType"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<el-row :gutter="20" style="" v-if="cardList.length>0">
|
|||
|
|
<el-col @click.native="chooseCard(item)" :span="8" v-for="item in cardList" :key="item.cardId"
|
|||
|
|
style="margin-top: 10px;cursor: pointer;">
|
|||
|
|
<el-card class="product-card" :body-style="{ padding: '0px' }" style="height: 190px;">
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
style="height: 110px;display: flex;align-items: center;justify-content: center; box-sizing: border-box;">
|
|||
|
|
<i style="font-size:60px !important;border-radius: 5px;color: #409EFF;"
|
|||
|
|
class="el-icon-bank-card"></i>
|
|||
|
|
<!-- <img style="width:85%;height: 140px;border-radius: 5px;border: 1px solid #eee;" :src="baseUrl + item.productImageUrl" class="image"/>-->
|
|||
|
|
</div>
|
|||
|
|
<div style="padding:10px 0 0 10px;font-size: 16px;">
|
|||
|
|
{{item.cardName}}
|
|||
|
|
</div>
|
|||
|
|
<div style="padding:5px 0 0 10px;">
|
|||
|
|
<span style="font-size: 14px;"> 开卡金额： <span
|
|||
|
|
class="price-text">¥ {{item.cardAmount}}</span></span><br/>
|
|||
|
|
<span style="font-size: 14px;"> 赠送金额： <span
|
|||
|
|
class="price-text">¥ {{item.giveAmount}}</span></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div v-else>
|
|||
|
|
<el-empty description="该分类商品为空">
|
|||
|
|
</el-empty>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<choose-sell ref="chooseSellRef" @ok="getPendingSell"/>
|
|||
|
|
<add-member ref="addMemberRef" @ok="getAddMember"/>
|
|||
|
|
<choose-server ref="chooseServerRef" @ok="getServer"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {addSelljson} from "@/api/business/sellJson/sellJson";
|
|||
|
|
import addMember from "@/views/business/member/addMember";
|
|||
|
|
|
|||
|
|
import {accAdd, accMul, isEmpty, isNotEmpty, getFormattedTimeAsSerialNumber, getSelectObj, deepClone} from "@/utils";
|
|||
|
|
import confirm from "@/utils/confirm";
|
|||
|
|
import {getCategoryList} from "@/api/business/category/category";
|
|||
|
|
import {getProductList} from "@/api/business/product/product";
|
|||
|
|
import {getMemberList,getMemberSearchList} from "@/api/business/member/member";
|
|||
|
|
import {getCardList} from "@/api/business/card/card";
|
|||
|
|
import PayType from "@/views/business/cashier/payType";
|
|||
|
|
import {buildCard, productPay, chargedCard} from "@/api/business/pay/pay";
|
|||
|
|
import {getMemberCardList,getMemberCardSearchList} from "@/api/business/memberCard/memberCard";
|
|||
|
|
import ChooseSell from "@/views/business/cashier/chooseSell";
|
|||
|
|
import ChooseServer from "@/views/business/cashier/chooseServer";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "cashierDesk",
|
|||
|
|
components: {ChooseServer, ChooseSell, PayType,addMember},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//基础信息
|
|||
|
|
menu: "",
|
|||
|
|
cardTypeList: [
|
|||
|
|
{cardType: "1", cardName: '折扣卡'}
|
|||
|
|
],
|
|||
|
|
categoryList: [],
|
|||
|
|
cardList: [],
|
|||
|
|
productList: [],
|
|||
|
|
//商品分类当前激活菜单
|
|||
|
|
activeName: "",
|
|||
|
|
cardActiveName: "",
|
|||
|
|
//会员信息
|
|||
|
|
collapseItem: 1,
|
|||
|
|
member: {},
|
|||
|
|
memberCard: {},
|
|||
|
|
memberCardList: [],
|
|||
|
|
//搜索信息
|
|||
|
|
querySearchStr: '',
|
|||
|
|
queryCardSearchStr: '',
|
|||
|
|
//结算相关
|
|||
|
|
shopCart: [],
|
|||
|
|
shopCartIndex:0,
|
|||
|
|
sellNo: '',
|
|||
|
|
//挂单id
|
|||
|
|
pendingSellId: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
//初始化 获取相关信息
|
|||
|
|
this.getCategoryList()
|
|||
|
|
this.getCardList()
|
|||
|
|
this.menu = '1'
|
|||
|
|
this.cardActiveName = this.cardTypeList[0].cardType
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
//计算总支付金额
|
|||
|
|
getTotalRealAmount() {
|
|||
|
|
let totalRealAmount = 0;
|
|||
|
|
if (this.shopCart.length == 0) {
|
|||
|
|
return totalRealAmount;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.menu == "1") {
|
|||
|
|
for (let product of this.shopCart) {
|
|||
|
|
const noMember = isEmpty(this.member.memberId)
|
|||
|
|
let productTotalRealAmount
|
|||
|
|
if (noMember) {
|
|||
|
|
this.$set(product, 'realAmount', product.productAmount);
|
|||
|
|
productTotalRealAmount = accMul(product.productAmount, product.count)
|
|||
|
|
} else if (isNotEmpty(this.memberCard.memberCardId)) {
|
|||
|
|
let realDiscount = accMul(this.memberCard.discount, 0.1);
|
|||
|
|
this.$set(product, 'discount', realDiscount)
|
|||
|
|
let realAmount = accMul(product.productMemberAmount, realDiscount);
|
|||
|
|
this.$set(product, 'realAmount', realAmount)
|
|||
|
|
productTotalRealAmount = accMul(realAmount, product.count)
|
|||
|
|
} else {
|
|||
|
|
this.$set(product, 'realAmount', product.productMemberAmount);
|
|||
|
|
productTotalRealAmount = accMul(product.productMemberAmount, product.count)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$set(product, 'totalRealAmount', productTotalRealAmount)
|
|||
|
|
totalRealAmount = accAdd(totalRealAmount, productTotalRealAmount);
|
|||
|
|
}
|
|||
|
|
} else if (this.menu == "2") {
|
|||
|
|
let cardAmount = this.shopCart[0].cardAmount
|
|||
|
|
let todos = this.shopCart[0].todos
|
|||
|
|
totalRealAmount = accAdd(cardAmount, todos);
|
|||
|
|
this.$set(this.shopCart[0], 'totalRealAmount', totalRealAmount)
|
|||
|
|
} else if (this.menu == "3") {
|
|||
|
|
totalRealAmount = this.shopCart[0].chargedCardAmount
|
|||
|
|
this.$set(this.shopCart[0], 'totalRealAmount', totalRealAmount)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return totalRealAmount;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
//监听购物车改变 暂时没用到
|
|||
|
|
shopCart(newVal, oldVal) {
|
|||
|
|
let showCardList = newVal
|
|||
|
|
console.log('这是监听属性新的')
|
|||
|
|
},
|
|||
|
|
//会员改变时 会员卡信同时改变
|
|||
|
|
member(newVal, oldVal) {
|
|||
|
|
console.log('这是监听属性新的')
|
|||
|
|
console.log(newVal)
|
|||
|
|
if (isEmpty(newVal.memberId)) {
|
|||
|
|
console.log('member为空了')
|
|||
|
|
this.memberCard = this.$options.data().memberCard
|
|||
|
|
this.memberCardList = this.$options.data().memberCardList
|
|||
|
|
//没有会员自然跳转到商品结算页
|
|||
|
|
this.menu = '1'
|
|||
|
|
}
|
|||
|
|
//当会员切换时 清空购物车
|
|||
|
|
// this.shopCart = this.$options.data().shopCart
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//添加会员
|
|||
|
|
addMember(){
|
|||
|
|
this.$refs.addMemberRef.open()
|
|||
|
|
},
|
|||
|
|
getAddMember(e){
|
|||
|
|
this.member = e
|
|||
|
|
},
|
|||
|
|
clearMember() {
|
|||
|
|
this.member = this.$options.data().member
|
|||
|
|
this.shopCart = this.$options.data().shopCart
|
|||
|
|
},
|
|||
|
|
//搜索会员
|
|||
|
|
querySearch(queryString, cb) {
|
|||
|
|
if (queryString) {
|
|||
|
|
getMemberSearchList({querySearch: queryString}).then(res => {
|
|||
|
|
// 调用 callback 返回建议列表的数据
|
|||
|
|
if(res.data.length>0){
|
|||
|
|
cb(res.data);
|
|||
|
|
}else{
|
|||
|
|
cb([
|
|||
|
|
{errorMsg: '暂无数据'}
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
cb([
|
|||
|
|
{errorMsg: '暂无数据'}
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleMemberSelect(e) {
|
|||
|
|
console.log(e)
|
|||
|
|
this.member = e
|
|||
|
|
this.getMemberCardList()
|
|||
|
|
},
|
|||
|
|
queryCardSearch(queryString, cb) {
|
|||
|
|
if (queryString) {
|
|||
|
|
getMemberCardSearchList({querySearch: queryString}).then(res => {
|
|||
|
|
// 调用 callback 返回建议列表的数据
|
|||
|
|
if(res.data.length>0){
|
|||
|
|
cb(res.data);
|
|||
|
|
}else{
|
|||
|
|
cb([
|
|||
|
|
{errorMsg: '暂无数据'}
|
|||
|
|
])
|
|||
|
|
};
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
cb([
|
|||
|
|
{errorMsg: '暂无数据'}
|
|||
|
|
])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleMemberCardSelect(e) {
|
|||
|
|
console.log(e)
|
|||
|
|
this.member = e.member
|
|||
|
|
this.getMemberCardList(e.memberCardId)
|
|||
|
|
},
|
|||
|
|
//获取基本信息
|
|||
|
|
getCategoryList() {
|
|||
|
|
getCategoryList({categoryStatus:0}).then(res => {
|
|||
|
|
this.categoryList = res.data
|
|||
|
|
if (this.categoryList.length > 0) {
|
|||
|
|
this.activeName = this.categoryList[0].categoryId
|
|||
|
|
getProductList({categoryId: this.activeName,productStatus:0}).then(res => {
|
|||
|
|
this.productList = res.data
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleCategoryClick(e) {
|
|||
|
|
//拿到分类id
|
|||
|
|
const categoryId = e.name
|
|||
|
|
getProductList({categoryId: categoryId}).then(res => {
|
|||
|
|
this.productList = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleCardClick(e) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getCardList() {
|
|||
|
|
getCardList().then(res => {
|
|||
|
|
this.cardList = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
chooseCard(e) {
|
|||
|
|
let card = e;
|
|||
|
|
let findCardIndex = this.shopCart.findIndex(p => p.cardId == card.cardId);
|
|||
|
|
console.log(findCardIndex)
|
|||
|
|
if (findCardIndex == -1) {
|
|||
|
|
card.cardNo = getFormattedTimeAsSerialNumber()
|
|||
|
|
this.shopCart.push(deepClone(card))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//选择商品添加购物车
|
|||
|
|
chooseProduct(e) {
|
|||
|
|
let product = e;
|
|||
|
|
let findProductIndex = this.shopCart.findIndex(p => p.productId == product.productId);
|
|||
|
|
console.log(findProductIndex)
|
|||
|
|
if (findProductIndex == -1) {
|
|||
|
|
this.$set(product, 'count', 1)
|
|||
|
|
this.shopCart.push(product)
|
|||
|
|
} else {
|
|||
|
|
this.shopCart[findProductIndex].count += 1
|
|||
|
|
}
|
|||
|
|
console.log(this.shopCart)
|
|||
|
|
},
|
|||
|
|
handleShopCartChange(e, scope) {
|
|||
|
|
console.log(e)
|
|||
|
|
console.log(scope.$index)
|
|||
|
|
if (e == 0) {
|
|||
|
|
confirm('要删除该条目吗？').then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
this.shopCart.splice(scope.$index, 1)
|
|||
|
|
} else {
|
|||
|
|
this.shopCart[scope.$index].count = 1
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取某个会员下的所有会员卡 传入则选中目标卡项
|
|||
|
|
getMemberCardList(memberCardId) {
|
|||
|
|
if (isEmpty(this.member.memberId)) return
|
|||
|
|
// 发送请求获取会员卡列表
|
|||
|
|
getMemberCardList({memberId: this.member.memberId}).then(response => {
|
|||
|
|
console.log('getMemberCardList===>' + response.data)
|
|||
|
|
// 如果获取到的列表长度为 0
|
|||
|
|
if (response.data.length == 0) {
|
|||
|
|
// 恢复默认的会员卡列表和会员卡信息
|
|||
|
|
this.memberCardList = this.$options.data().memberCardList
|
|||
|
|
this.memberCard = this.$options.data().memberCard
|
|||
|
|
} else {
|
|||
|
|
// 设置获取到的会员卡列表
|
|||
|
|
this.memberCardList = response.data
|
|||
|
|
// 如果会员卡id不为空
|
|||
|
|
if (isNotEmpty(memberCardId)) {
|
|||
|
|
// 根据会员卡id获取选中的对象
|
|||
|
|
const memberCard = getSelectObj(memberCardId, this.memberCardList, 'memberCardId')
|
|||
|
|
this.memberCard = memberCard
|
|||
|
|
} else {
|
|||
|
|
// 否则设置为列表中的第一个会员卡
|
|||
|
|
this.memberCard = this.memberCardList[0]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//选择某个会员卡
|
|||
|
|
chooseMemberCard(item) {
|
|||
|
|
this.memberCard = item
|
|||
|
|
|
|||
|
|
if (this.menu == '3') {
|
|||
|
|
this.shopCart = this.$options.data().shopCart
|
|||
|
|
|
|||
|
|
let memberCard = this.memberCard;
|
|||
|
|
let findCardIndex = this.shopCart.findIndex(p => p.meberCardId == memberCard.meberCardId);
|
|||
|
|
console.log(findCardIndex)
|
|||
|
|
if (findCardIndex == -1) {
|
|||
|
|
//使用克隆 避免改变会员卡原始信息
|
|||
|
|
this.shopCart.push(deepClone(memberCard))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//左侧菜单切换
|
|||
|
|
leftMenuSelect(e) {
|
|||
|
|
this.menu = e
|
|||
|
|
//切换时清空购物车
|
|||
|
|
this.shopCart = this.$options.data().shopCart
|
|||
|
|
|
|||
|
|
if (this.menu == '3') {
|
|||
|
|
let memberCard = this.memberCard;
|
|||
|
|
let findCardIndex = this.shopCart.findIndex(p => p.meberCardId == memberCard.meberCardId);
|
|||
|
|
console.log(findCardIndex)
|
|||
|
|
if (findCardIndex == -1) {
|
|||
|
|
//使用克隆 避免改变会员卡原始信息
|
|||
|
|
this.shopCart.push(deepClone(memberCard))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//打开支付页
|
|||
|
|
pay() {
|
|||
|
|
this.$refs.payTypeRef.open(this.getTotalRealAmount, this.memberCard, this.menu)
|
|||
|
|
},
|
|||
|
|
//商品页面支付完成
|
|||
|
|
payDone(sell) {
|
|||
|
|
//支付完成清空购物车
|
|||
|
|
this.shopCart = this.$options.data().shopCart
|
|||
|
|
this.sellNo = this.$options.data().sellNo
|
|||
|
|
this.pendingSellId = this.$options.data().pendingSellId
|
|||
|
|
this.member = {}
|
|||
|
|
if (isNotEmpty(this.member.memberId)) {
|
|||
|
|
//传入memberCardId 则默认选中
|
|||
|
|
this.getMemberCardList(sell.memberCardId)
|
|||
|
|
}
|
|||
|
|
this.getCategoryList()
|
|||
|
|
},
|
|||
|
|
//充卡页面支付完成
|
|||
|
|
payCardDone(sell) {
|
|||
|
|
//支付完成清空购物车
|
|||
|
|
this.shopCart = this.$options.data().shopCart
|
|||
|
|
this.sellNo = this.$options.data().sellNo
|
|||
|
|
this.pendingSellId = this.$options.data().pendingSellId
|
|||
|
|
if (isNotEmpty(this.member.memberId)) {
|
|||
|
|
//传入memberCardId 则默认选中
|
|||
|
|
this.getMemberCardList(sell.memberCardId)
|
|||
|
|
}
|
|||
|
|
//支付完成跳转
|
|||
|
|
this.menu = '1'
|
|||
|
|
this.getCategoryList()
|
|||
|
|
},
|
|||
|
|
//打开取单
|
|||
|
|
takePendingOrder() {
|
|||
|
|
this.$refs.chooseSellRef.open()
|
|||
|
|
},
|
|||
|
|
addServer(shopCartIndex) {
|
|||
|
|
this.$refs.chooseServerRef.open()
|
|||
|
|
this.shopCartIndex = shopCartIndex
|
|||
|
|
},
|
|||
|
|
handleServerClose(serverList,index){
|
|||
|
|
serverList.splice(index,1);
|
|||
|
|
//取消选中状态
|
|||
|
|
},
|
|||
|
|
getServer(e){
|
|||
|
|
console.log(e)
|
|||
|
|
if(!this.shopCart[this.shopCartIndex].serverList){
|
|||
|
|
this.$set(this.shopCart[this.shopCartIndex],'serverList',[])
|
|||
|
|
}
|
|||
|
|
this.shopCart[this.shopCartIndex].serverList = this.shopCart[this.shopCartIndex].serverList.concat(e)
|
|||
|
|
},
|
|||
|
|
getPendingSell(e) {
|
|||
|
|
console.log(e)
|
|||
|
|
const data = JSON.parse(e.sellJson)
|
|||
|
|
Object.assign(this.$data, data)
|
|||
|
|
this.pendingSellId = e.jsonId
|
|||
|
|
//重新获取用户卡余额
|
|||
|
|
this.getMemberCardList()
|
|||
|
|
},
|
|||
|
|
//保存挂单
|
|||
|
|
handleAddSelljson() {
|
|||
|
|
const data = {
|
|||
|
|
sellJson: JSON.stringify(this.$data),
|
|||
|
|
memberName: isEmpty(this.member.memberName) ? '散客' : this.member.memberName,
|
|||
|
|
memberPhone: this.member.memberPhone,
|
|||
|
|
//如果传入原始挂单id 则为修改
|
|||
|
|
jsonId: this.pendingSellId
|
|||
|
|
}
|
|||
|
|
addSelljson(data).then(response => {
|
|||
|
|
this.payDone()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
pendingOrder() {
|
|||
|
|
confirm("确定要挂单吗?挂单后稍后可继续结算").then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
if (isNotEmpty(this.pendingSellId)) {
|
|||
|
|
confirm('该订单已是待结算订单，继续则覆盖之前挂单信息？').then(res => {
|
|||
|
|
if (res) {
|
|||
|
|
this.handleAddSelljson()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.handleAddSelljson()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//支付支付支付
|
|||
|
|
getPayList(e) {
|
|||
|
|
console.log(e)
|
|||
|
|
console.log(this.$options.data())
|
|||
|
|
//结算传输相关参数
|
|||
|
|
//会员信息 开卡信息 支付信息
|
|||
|
|
const pay = {
|
|||
|
|
sellNo: '',
|
|||
|
|
memberCardId: this.memberCard.memberCardId,
|
|||
|
|
memberId: this.member.memberId,
|
|||
|
|
memberName: this.member.memberName,
|
|||
|
|
sellAmount: this.getTotalRealAmount,
|
|||
|
|
sellPayList: e,
|
|||
|
|
sellJson: JSON.stringify(this.$data),
|
|||
|
|
jsonId: this.pendingSellId
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.menu == '1') {
|
|||
|
|
pay.productFormList = this.shopCart
|
|||
|
|
|
|||
|
|
productPay(pay).then(response => {
|
|||
|
|
console.log(response)
|
|||
|
|
this.payDone(response.data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//开卡续卡不刷新 可能会去结算
|
|||
|
|
if (this.menu == '2') {
|
|||
|
|
pay.buildCardForm = this.shopCart[0]
|
|||
|
|
|
|||
|
|
buildCard(pay).then(response => {
|
|||
|
|
console.log(response)
|
|||
|
|
this.payCardDone(response.data)
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
if (this.menu == '3') {
|
|||
|
|
pay.chargedCardForm = this.shopCart[0]
|
|||
|
|
|
|||
|
|
chargedCard(pay).then(response => {
|
|||
|
|
console.log(response)
|
|||
|
|
this.payCardDone(response.data)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
|||
|
|
height: 50px;
|
|||
|
|
line-height: 50px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*左侧菜单*/
|
|||
|
|
.el-menu-vertical-demo {
|
|||
|
|
border-right: none;
|
|||
|
|
padding-left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-menu-vertical-demo .el-menu-item {
|
|||
|
|
padding: 0 16px !important;
|
|||
|
|
border: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-menu-vertical-demo .el-menu-item [class^=el-icon-] {
|
|||
|
|
font-size: 15px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*会员卡*/
|
|||
|
|
.el-tag {
|
|||
|
|
white-space: normal;
|
|||
|
|
height: auto;
|
|||
|
|
margin: 5px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*会员卡折叠无边框*/
|
|||
|
|
::v-deep .el-collapse-item__header {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-collapse-item__content {
|
|||
|
|
padding-top: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|