网站后台代码,中国人做英文网站,了解wordpress,写网页用什么语言前言 完整版演示 前面我们对会员系统 分类和商品的开发 完成了收银所需的基础信息 下面我们开始完成收银台的开发
简单画了一个收银的流程图大家参考下
从这张图我们可以分析一下几点
可以选择会员或散客收银选择会员使用相应的会员价结算使用会员卡则在价格基础根据卡折扣…前言 完整版演示 前面我们对会员系统 分类和商品的开发 完成了收银所需的基础信息 下面我们开始完成收银台的开发
简单画了一个收银的流程图大家参考下
从这张图我们可以分析一下几点
可以选择会员或散客收银选择会员使用相应的会员价结算使用会员卡则在价格基础根据卡折扣结算
根据上述分析我搭建了一个简单的收银台
左边显示会员和已选择的商品信息右边显示商品的价格信息商品选择后可以修改数字总金额自动计算后续完成挂单功能便于保证收银连续性
开发中运用的组件
Tabs 标签页 和 Card 完成右侧的商品选择el-autocomplete 完成会员的检索InputNumber Table 完成购物车开发
收银台运用过多组件会导致页面很乱 我们后续需要进行组件的封装
templatediv classapp-container styleborder-box:box-sizing;!-- left--el-row :gutter30 styleel-col :span10el-autocompletestylewidth: 100%popper-classmy-autocompletev-modelquerySearchStr:fetch-suggestionsquerySearchplaceholder会员检索selecthandleSelecticlassel-icon-search el-input__iconslotsuffix/itemplate slot-scope{ item }div v-ifitem.errorMsg{{item.errorMsg}}/divtemplate v-elsediv classnamei classel-icon-user/i{{ item.memberName }}/divspan classaddri classel-icon-phone/i{{ item.memberPhone }}/span/template/template/el-autocompleteel-descriptions border title用户信息 v-ifmember.memberId stylemargin-top: 20px;margin-bottom: 20px;el-descriptions-item 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 title用户信息 v-else stylemargin-top: 20px;margin-bottom: 20px;el-descriptions-item 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{{ scope.row.productAmount }}/spanspan v-elsemember.memberId classprice{{ scope.row.productMemberAmount }}/span/template/el-table-columnel-table-columnaligncenterpropcountlabel数量width200template slot-scopescopeel-input-number sizemini :min0 :max100 v-modelscope.row.count changehandleChange($event,scope) /el-input-number/template/el-table-columnel-table-columnaligncenterproptotalPricelabel总金额width100template slot-scopescopespan classprice{{ scope.row.totalPrice }}/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 :span14div classgrid-content bg-purpleel-tabs v-modelactiveName tab-clickhandleClick typeborder-card styleheight: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;el-tab-panev-for(item, index) in categoryList:keyitem.categoryId:labelitem.categoryName:nameitem.categoryIddivel-row :gutter20 style v-ifproductList.length0el-col click.nativechooseProduct(item) :span6 v-foritem in productList :keyitem.productId stylemargin-top: 20px;cursor: pointer;el-card :body-style{ padding: 0px } styleheight: 230px;div styleheight: 150px;display: flex;align-items: center;justify-content: center; box-sizing: border-box;padding-top: 10px;img stylewidth:85%;height: 140px;border-radius: 5px;border: 1px solid #eee; :srcbaseUrl item.productImageUrl classimage//divdiv stylepadding:10px 0 0 10px;font-size: 16px;{{item.productName}}/divdiv stylepadding:5px 0 0 10px;span stylefont-size: 14px; 散客价 span classprice¥ {{item.productAmount}}/span/spanbr/span stylefont-size: 14px; 会员价 span classprice¥ {{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
/templatescriptimport {accAdd, accMul,isEmpty} from /utils;import confirm from /utils/confirm;import {getCategoryList} from /api/business/category/category;import {getProductList} from /api/business/product/product;import {getMemberList} from /api/business/member/member;export default {name: cashierDesk,data(){return{shopCart: [],categoryList: [],productList: [],activeName: ,member: {},querySearchStr: ,}},mounted() {this.getCategoryList()},computed:{getTotalPrice(){let totalPrice 0;for(let product of this.shopCart){const noMember isEmpty(this.member.memberId)let productTotalPriceif(noMember){productTotalPrice accMul(product.productAmount,product.count)}else{productTotalPrice accMul(product.productMemberAmount,product.count)}this.$set(product, totalPrice, productTotalPrice)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 }).then(res{this.productList 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 1}})}},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)},handleSelect(e){console.log(e)this.member e}}}
/scriptstyle scoped::v-deep .el-tabs--border-card.el-tabs__header .el-tabs__item{height: 50px;line-height: 50px;font-size: 14px;}.price{font-weight: bold;color: #ff5b57;}
/style 代码地址 https://gitee.com/ddeatrr/memberShop 然后为了大家预览我把开发板也部署了 大家可以参考 http://store.gbadd.space/
