可以选择会员或散客收银选择会员使用相应的会员价结算使用会员卡则在价格基础根据卡折扣结算

左边显示会员和已选择的商品信息右边显示商品的价格信息商品选择后可以修改数字总金额自动计算后续完成挂单功能便于保证收银连续性

Tabs

:span10el-autocompletestylewidth:

100%popper-classmy-autocompletev-modelquerySearchStr:fetch-suggestionsquerySearchplaceholder会员检索selecthandleSelecticlassel-icon-search

el-input__iconslotsuffix/itemplate

slot-scope{

v-ifitem.errorMsg{{item.errorMsg}}/divtemplate

v-elsediv

}}/span/template/template/el-autocompleteel-descriptions

border

label用户名{{member.memberName}}/el-descriptions-itemel-descriptions-item

label手机号{{member.memberPhone}}/el-descriptions-itemel-descriptions-item

label备注{{member.remark}}/el-descriptions-item/el-descriptionsel-descriptions

border

label用户名散客/el-descriptions-item/el-descriptionsdiv

classgrid-content

bg-purpleel-tableborderheight400max-height400:datashopCartstylewidth:

100%;margin-bottom:

20px;el-table-columnaligncenterpropcategoryNamelabel分类width100/el-table-columnel-table-columnaligncenterpropproductNamelabel商品名/el-table-columnel-table-columnaligncenterpropproductAmountlabel价格width100template

slot-scopescopespan

v-ifapp.isEmpty(member.memberId)

classprice{{

}}/span/template/el-table-columnel-table-columnaligncenterpropcountlabel数量width200template

si*****i

changehandleChange($event,scope)

/el-input-number/template/el-table-columnel-table-columnaligncenterproptotalPricelabel总金额width100template

slot-scopescopespan

}}/span/template/el-table-column/el-tableel-divider/el-divider总金额:

span

classprice{{app.getFloatStr(getTotalPrice)}}/spanel-divider/el-dividerel-rowel-button

typesuccess结算/el-buttonel-button

typewarning挂单/el-buttonel-button

typeprimary取单/el-button/el-row/div/el-col

!--right--el-col

scroll;overflow:hidden;el-tab-panev-for(item,

index)

categoryList:keyitem.categoryId:labelitem.categoryName:nameitem.categoryIddivel-row

:gutter20

click.nativechooseProduct(item)

:span6

16px;{{item.productName}}/divdiv

stylepadding:5px

{{item.productAmount}}/span/spanbr/span

stylefont-size:

{{item.productMemberAmount}}/span/span/div/el-card/el-col/el-rowdiv

v-elseel-empty

description该分类商品为空/el-empty/div/div/el-tab-pane/el-tabs/div/el-col/el-row/div

{accAdd,

/api/business/category/category;import

{getProductList}

/api/business/product/product;import

{getMemberList}

/api/business/member/member;export

default

cashierDesk,data(){return{shopCart:

[],categoryList:

{this.getCategoryList()},computed:{getTotalPrice(){let

totalPrice

isEmpty(this.member.memberId)let

productTotalPriceif(noMember){productTotalPrice

accMul(product.productAmount,product.count)}else{productTotalPrice

accMul(product.productMemberAmount,product.count)}this.$set(product,

totalPrice,

accAdd(totalPrice,productTotalPrice);}return

totalPrice;}},watch:{shopCart(newVal,oldVal){let

showCardList

newValconsole.log(这是监听属性新的)}},methods:{querySearch(queryString,

cb)

{if(queryString){getMemberList({querySearch:queryString}).then(res{//

callback

返回建议列表的数据cb(res.data);})}else{cb([{errorMsg:暂无数据}])}},getCategoryList(){getCategoryList().then(res{this.categoryList

res.dataif(this.categoryList.length0){this.activeName

this.categoryList[0].categoryIdgetProductList({categoryId:this.activeName

res.data})}})},handleClick(e){//拿到分类idconst

categoryId

e.namegetProductList({categoryId:categoryId}).then(res{this.productList

res.data})},handleChange(e,scope){console.log(e)console.log(scope.$index)if(e0){confirm(要删除该条目吗).then(res{if(res){this.shopCart.splice(scope.$index,1)}else{this.shopCart[scope.$index].count

product

product.productId);console.log(findProductIndex)if(findProductIndex

count,

1)this.shopCart.push(product)}else{this.shopCart[findProductIndex].count

1}console.log(this.shopCart)},handleSelect(e){console.log(e)this.member

e}}}

.el-tabs--border-card.el-tabs__header

50px;line-height:

https://gitee.com/ddeatrr/memberShop