dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
76d4ace2eb
oil-station/fuintCashierWeb/src/views/cashier/index.vue

1539 lines
50 KiB
Vue
Raw Normal View History

init
2023-10-09 11:06:01 +08:00
<template>
123
2023-10-24 18:52:17 +08:00
<!-- <div id="app" class="app-container">-->
<!-- <el-drawer-->
<!-- :withHeader="false"-->
<!-- :visible.sync="isOpen"-->
<!-- direction="ttb"-->
<!-- size="100%"-->
<!-- :show-close="false">-->
<!-- <div class="main">-->
<!-- <div class="left-side">-->
<!-- <div class="logo">-->
<!-- <i class="logout el-icon-d-arrow-left" @click="logout"></i>-->
<!-- <div class="title">收银台</div>-->
<!-- <div class="store" v-if="storeInfo">({{ storeInfo.name }})</div>-->
<!-- <div class="account">您好，{{ accountInfo.realName }}！</div>-->
<!-- </div>-->
<!-- <div class="cate">-->
<!-- <ul class="nav">-->
<!-- <li class="nav-item" v-for="menu in menuList">-->
<!-- <a :class="'nav-link' + (activeMenu == menu.key ? ' active' : '')" href="javascript:;" @click="switchMenu(menu.key)">-->
<!-- <img class="cate-logo" :src="menu.logo">-->
<!-- <span>{{ menu.name }}</span>-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!--&lt;!&ndash; 翻新&ndash;&gt;-->
<!-- <div class="cart-container" v-if="activeMenu == 'cashier'">-->
<!-- <div class="container-top">-->
<!-- <div class="vip-bottom" @click="switchMember()">-->
<!-- <span>会员登录</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--&lt;!&ndash; 中间部分&ndash;&gt;-->
<!--&lt;!&ndash; <div class="cart-container" v-if="activeMenu == 'cashier'">&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!--&lt;!&ndash; <div class="title">&ndash;&gt;-->
<!--&lt;!&ndash; &ndash;&gt;-->
<!--&lt;!&ndash; <div class="logo">&ndash;&gt;-->
<!--&lt;!&ndash; <img class="avatar" v-if="!memberInfo || !memberInfo.avatar" src="@/assets/images/avatar.png" />&ndash;&gt;-->
<!--&lt;!&ndash; <img class="avatar" v-else :src="memberInfo.avatar"/>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="member-info">&ndash;&gt;-->
<!--&lt;!&ndash; <span class="name" v-if="memberInfo">{{ memberInfo.mobile ? memberInfo.mobile : memberInfo.name }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; <span class="none" v-if="!memberInfo">身份</span>&ndash;&gt;-->
<!--&lt;!&ndash; <el-button size="mini" class="switch" type="danger" icon="el-icon-refresh" @click="switchMember()">关联会员</el-button>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!--&lt;!&ndash; <div class="carts">&ndash;&gt;-->
<!--&lt;!&ndash; <div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="tab">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="cart-list" v-if="cartList.length > 0">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="cart-item" v-for="cartInfo in cartList">&ndash;&gt;-->
<!--&lt;!&ndash; <img class="image" :src="cartInfo.logo"/>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="info">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="name">{{ cartInfo.name }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="spec" v-if="cartInfo.specList && cartInfo.specList.length > 0">&ndash;&gt;-->
<!--&lt;!&ndash; <span class="item" v-for="spec in cartInfo.specList" :title="spec.value">{{ spec.value }}</span>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="num"><el-input-number class="input" @change="changeBuyNum(cartInfo)" v-model="cartInfo.buyNum" :min="1" :max="1000"/></div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="option">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="remove el-icon-delete" @click="removeFromCart(cartInfo.cartId)"></div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="total">￥{{ (cartInfo.price * cartInfo.buyNum).toFixed(2) }}</div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="empty" v-if="cartList.length < 1">&ndash;&gt;-->
<!--&lt;!&ndash; <el-empty description="暂无结算商品" :image-size="40"></el-empty>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="footer">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="number">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="total-num">总件数：<b class="num">{{ cartTotalNum }}</b></div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="total-price">总金额：<b class="num">￥{{ cartTotalPrice.toFixed(2) }}</b></div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="options">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="cash" @click="hangUp()">挂单 / 取单</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="submit" v-if="cartTotalNum > 0" @click="doSettlement()">提交结算</div>&ndash;&gt;-->
<!--&lt;!&ndash; <div class="submit" v-if="cartTotalNum == 0" @click="doCashier()">无商品收款</div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; 右侧部分&ndash;&gt;-->
<!-- <div class="main-list" v-if="activeMenu == 'cashier'">-->
<!-- <div class="title">-->
<!-- <el-form class="search-form" ref="searchForm" :inline="true" :model="searchForm">-->
<!-- <el-form-item class="form-item" label="" prop="keyword">-->
<!-- <el-input v-model="searchForm.keyword" prefix-icon="el-icon-full-screen" class="input-item" placeholder="请输入商品关键字：商品名称、条码、商品ID..." clearable maxlength="100" />-->
<!-- </el-form-item>-->
<!-- <el-button class="search-goods" @click="doQueryGoods()" icon="el-icon-search">查询商品</el-button>-->
<!-- </el-form>-->
<!-- <el-tabs class="tab-box" type="card" v-model="navTab" @tab-click="switchTab">-->
<!-- <el-tab-pane label="全部" name="0"></el-tab-pane>-->
<!-- <el-tab-pane v-for="tab in tabList" :label="tab.name" :key="tab.id+''" :name="tab.id+''"></el-tab-pane>-->
<!-- </el-tabs>-->
<!-- </div>-->
<!-- <div class="goods-list">-->
<!-- <div class="goods-item" v-for="goodsInfo in activeGoodsList">-->
<!-- <div class="item" @click="clickGoods(goodsInfo)">-->
<!-- <img class="image" lazy :src="imagePath + goodsInfo.logo">-->
<!-- <div class="goods-name">{{ goodsInfo.name }}</div>-->
<!-- <div class="goods-price">￥{{ goodsInfo.price }}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-empty v-if="activeGoodsList.length == 0" description="暂无商品..."></el-empty>-->
<!-- </div>-->
<!-- </div>-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash; 订单列表组件 start&ndash;&gt;-->
<!-- <orderList v-if="activeMenu == 'order'" @doPayOrder="doPayOrder"></orderList>-->
<!-- &lt;!&ndash; 订单列表组件 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash; 会员列表组件 start&ndash;&gt;-->
<!-- <memberList v-if="activeMenu == 'member'"></memberList>-->
<!-- &lt;!&ndash; 会员列表组件 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash; 卡券核销组件 start&ndash;&gt;-->
<!-- <couponConfirm v-if="activeMenu == 'coupon'"></couponConfirm>-->
<!-- &lt;!&ndash; 卡券核销组件 end&ndash;&gt;-->
<!-- </div>-->
<!-- </el-drawer>-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash; 规格详情 start&ndash;&gt;-->
<!-- <el-dialog title="选择商品规格" :visible.sync="openGoodsDialog" class="common-dialog" append-to-body>-->
<!-- <div class="goods-info">-->
<!-- <div class="name">{{ goodsInfo.name }}</div>-->
<!-- <div class="price">￥{{ goodsInfo.price }}</div>-->
<!-- <div class="num"><el-input-number class="input" v-model="goodsNum" :min="1" :max="1000"/></div>-->
<!-- <div class="spec-list" v-if="goodsInfo.isSingleSpec == 'N'">-->
<!-- <div class="spec-item" v-for="specInfo in goodsInfo.specList">-->
<!-- <div class="spec-name">{{ specInfo.name }}</div>-->
<!-- <div class="values">-->
<!-- <span v-for="value in specInfo.child" :class="goodsSpecIds.includes(value.id) ? 'value active' : 'value'" @click="selectGoodsSpec(value.id)">{{ value.name }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" class="main-button" @click="addToCart()">加入结算</el-button>-->
<!-- <el-button @click="closeGoodsDialog()">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 规格详情 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash;关联会员对话框 start&ndash;&gt;-->
<!-- <switchMemberDialog :show-dialog="openSwitchMemberDialog" @doSwitchMember="doSwitchMember"/>-->
<!-- &lt;!&ndash;关联会员对话框 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash;结算对话框 start&ndash;&gt;-->
<!-- <settlementDialog :show-dialog="openSettlementDialog" :memberInfo="memberInfo" :totalPrice="cartTotalPrice" :remarks="cartRemark" :orderInfo="orderInfo" :couponList="couponList" @submit="submitSettlement" @switchMember="switchMember" @closeDialog="closeDialog"/>-->
<!-- &lt;!&ndash;结算对话框 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash;扫码付款对话框 start&ndash;&gt;-->
<!-- <scanPayCodeDialog ref="scanPayCodeDialog" :show-dialog="openScanPayCodeDialog" :memberInfo="memberInfo" :orderId="orderId" :payType="payType" :payAmount="payAmount" @closeDialog="closeDialog" @showPayResult="showPayResult"/>-->
<!-- &lt;!&ndash;扫码付款对话框 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash;支付结果对话框 start&ndash;&gt;-->
<!-- <payResultDialog :show-dialog="openPayResultDialog" :payResult="payResult" @showOrderPrint="showOrderPrint" @closeDialog="closeDialog"/>-->
<!-- &lt;!&ndash;支付结果对话框 end&ndash;&gt;-->
init
2023-10-09 11:06:01 +08:00
123
2023-10-24 18:52:17 +08:00
<!-- &lt;!&ndash;打印订单对话框 start&ndash;&gt;-->
<!-- <orderPrintDialog :show-dialog="openOrderPrintDialog" :storeInfo="storeInfo" :orderInfo="orderInfo" @closeDialog="closeDialog"/>-->
<!-- &lt;!&ndash;打印订单对话框 end&ndash;&gt;-->
<!-- &lt;!&ndash;挂单对话框 start&ndash;&gt;-->
<!-- <hangUpDialog :show-dialog="openHangUpDialog" :memberInfo="memberInfo" :cartList="cartList" @getHangNo="getHangNo" @doHangUp="doHangUp" @closeDialog="closeDialog"/>-->
<!-- &lt;!&ndash;挂单对话框 end&ndash;&gt;-->
<!-- &lt;!&ndash; 无商品收款组件 start&ndash;&gt;-->
<!-- <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>-->
<!-- &lt;!&ndash; 无商品收款组件 end&ndash;&gt;-->
<!-- </div>-->
<div class="app-containers">
<div class="app-left">
<div class="app-left-top">
<div class="app-left-img">
<img src="../../assets/images/lanlogo.png" alt="">
</div>
<div class="app-left-title">蓝鲸油站收银 </div>
</div>
<div class="app-left-box" v-for="(item,index) in tabarr" :key="index"> <spen style="cursor: pointer">{{item.name}}</spen> </div>
</div>
<div class="app-center">
<div class="center-left">
<div class="center-vh">
<div class="center-left-top">
<div class="vip-bottom">
<div>会员登录</div>
</div>
</div>
<div class="center-left-hj">
<div class="hj-box" style="justify-content: left">油品:￥200.00</div>
<div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
<div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
</div>
<div class="center-left-hj">
<div>满减活动</div>
<div>-￥2.87</div>
</div>
<div class="center-left-th">
<div class="th-box">
<div>扫码支付</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>找零</div>
<div class="bule">394.7</div>
</div>
<div class="th-box">
<div>加油员</div>
<div >加油员名称</div>
</div>
</div>
</div>
<div class="center-left-wrap">
<div class="wrap-box" v-for="(item,index) in 6" :key="index">
<div>支付方式</div>
</div>
</div>
<div class="center-left-bottom">
<div>
<div class="bottom-price">￥349.78</div>
<div class="price-red">优惠合计：5.74元</div>
</div>
<div class="center-left-lv">立即结算</div>
</div>
</div>
<div class="center-app">
<div class="center-top">
<div class="center-top-title">非油商品</div>
<div class="center-top-input">
<input type="text" placeholder="请输入商品名称，条码，商品关键词">
</div>
</div>
<div class="center-left-bottom">
<div class="bottom-qk">清空</div>
<div style="display: flex">
<div class="bottom-qd">取单</div>
<div class="bottom-gd">挂单</div>
</div>
</div>
</div>
<div class="center-right">
<div class="center-top">
<div>选择油号</div>
</div>
<div class="center-left-bottom">
<div class="bottom-gd">新增订单</div>
<div class="bottom-qk">解锁</div>
</div>
</div>
</div>
<!-- <div class="app-right"></div>-->
</div>
init
2023-10-09 11:06:01 +08:00
</template>
<script>
import { init, getGoodsInfo, searchGoods, getCartList, saveCart, removeFromCart, submitSettlement, doPay, getMemberInfoById } from "@/api/cashier";
import { getOrderInfo } from "@/api/order";
import { getUserId, setUserId, removeUserId } from '@/utils/auth';
import switchMemberDialog from "./components/switchMemberDialog";
import settlementDialog from "./components/settlementDialog";
import scanPayCodeDialog from "./components/scanPayCodeDialog";
import payResultDialog from "./components/payResultDialog";
import orderPrintDialog from "./components/orderPrintDialog";
import hangUpDialog from "./components/hangUpDialog";
import orderList from "./components/orderList";
import memberList from "./components/memberList";
import couponConfirm from "./components/couponConfirm";
import noGoodsCashier from "./components/noGoodsCashier";
export default {
name: "Cashier",
components: {
switchMemberDialog,
settlementDialog,
scanPayCodeDialog,
payResultDialog,
orderPrintDialog,
hangUpDialog,
orderList,
memberList,
couponConfirm,
noGoodsCashier
},
data() {
return {
123
2023-10-24 18:52:17 +08:00
tabarr:[
{name:'收银台'},
{name:'充值'},
{name:'订单'},
{name:'会员'},
{name:'核销'},
{name:'挂账'},
{name:'积分'},
{name:'交班'},
],
init
2023-10-09 11:06:01 +08:00
// 系统名称
systemName: process.env.VUE_APP_TITLE,
// 导航tab
navTab: '0',
isOpen: true,
openGoodsDialog: false,
openSwitchMemberDialog: false,
openSettlementDialog: false,
openNoGoodsCashierDialog: false,
openScanPayCodeDialog: false,
openPayResultDialog: false,
openOrderPrintDialog: false,
openHangUpDialog: false,
searchForm: { keyword: '' },
payResult: { isSuccess: false, payAmount: 0, orderId: 0 },
goodsForm: {},
// 左侧菜单
menuList: [{ name: '收银主页', key: 'cashier', logo: require('../../assets/images/cashier.png') },
{ name: '订单管理', key: 'order', logo: require('../../assets/images/order.png') },
{ name: '会员管理', key: 'member', logo: require('../../assets/images/hot.png') },
{ name: '卡券核销', key: 'coupon', logo: require('../../assets/images/life.png') }],
// 激活菜单
activeMenu: 'cashier',
// 导航栏tab
tabList: [],
// 当前操作会员
memberInfo: null,
// 当前登录用户
accountInfo: {},
// 当前门店信息
storeInfo: {},
// 当前操作商品
goodsInfo: { num : 1, specList : [], skuList: [] },
// 当前选择属性
goodsSpecIds: [],
// 商品数量
goodsNum: 1,
// 当前分类
cateId: 0,
// 图片目录
imagePath: '',
// 商品分类列表
cateList: [],
// 商品列表
goodsList: [],
// 当前分类商品列表
activeGoodsList: [],
// 购物车列表
cartList: [],
// 订单列表
orderList: [],
// 总金额
cartTotalPrice: 0,
// 购物车备注
cartRemark: '',
// 总件数
cartTotalNum: 0,
// 支付金额
payAmount: 0,
// 当前订单号
orderId: 0,
// 支付方式
payType: '',
// 当前订单
orderInfo: {},
// 可用卡券列表
couponList: [],
// 挂单序号
hangNo: '',
isSearch: false
};
},
mounted() {
const app = this;
// 监听扫码枪按键
let code = '';
let lastTime, nextTime; // 上次时间、最新时间
let lastCode, nextCode; // 上次按键、最新按键
document.onkeypress = (e) => {
// 获取按键
if (window.event) { // IE
nextCode = e.keyCode;
} else if (e.which) { // Netscape/Firefox/Opera
nextCode = e.which;
}
// 如果触发了回车事件(扫码结束时间)
if (nextCode === 13) {
if (code.length < 3) {
return;
}
if (app.openScanPayCodeDialog == true) {
app.$refs.scanPayCodeDialog.submit(code);
return false;
}
if (app.openSwitchMemberDialog == true) {
return false;
}
if (app.openSettlementDialog == true) {
app.$alert("请点击确定收款！");
return false;
}
app.addToCart(code);
code = '';
lastCode = '';
lastTime = '';
return true;
}
nextTime = new Date().getTime(); // 记录最新时间
if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
code += e.key; // 执行叠加操作
}
// 如果有上次时间及上次按键
if (lastCode && lastTime && nextTime - lastTime > 30) {
code = e.key;
} else if (lastCode && lastTime) {
code += e.key;
}
lastCode = nextCode;
lastTime = nextTime;
}
},
created() {
123
2023-10-24 18:52:17 +08:00
// this.initCashier();
// this.getCartList();
init
2023-10-09 11:06:01 +08:00
},
methods: {
// 初始化数据
initCashier() {
const app = this;
const userId = getUserId() > 0 ? getUserId() : 0;
init(userId).then( response => {
app.cateList = response.data.cateList;
app.tabList = response.data.cateList;
app.goodsList = response.data.goodsList;
app.activeGoodsList = this.goodsList;
app.imagePath = response.data.imagePath;
app.storeInfo = response.data.storeInfo;
app.accountInfo = response.data.accountInfo;
app.memberInfo = response.data.memberInfo;
app.loading = false;
app.hangNo = '';
}
).catch((err) => {
// empty
});
},
// 菜单切换
switchMenu(menuKey) {
this.activeMenu = menuKey;
return menuKey;
},
// tab切换
switchTab(el) {
this.navTab = el.name;
this.filterCate(this.navTab);
},
// 过滤分类商品
filterCate(cateId) {
this.cateId = cateId;
const dataList = [];
this.goodsList.forEach(function(goods) {
if (cateId == goods.cateId && cateId > 0) {
dataList.push(goods);
} else if (cateId == 0) {
dataList.push(goods);
}
})
this.activeGoodsList = dataList;
},
// 购物车列表
getCartList() {
const app = this;
if (app.loading) {
return false;
}
app.loading = true;
app.cartList = [];
getCartList({ userId: getUserId(), hangNo: app.hangNo }).then( response => {
const cartList = response.data.list;
if (cartList && cartList.length > 0) {
cartList.forEach(function(item) {
const specList = [];
if (item.specList && item.specList.length > 0) {
item.specList.forEach(function (spec) {
specList.push({name: spec.specName, value: spec.specValue});
})
}
const cartInfo = { cartId: item.id, skuId: item.skuId, goodsId: item.goodsInfo.id, name: item.goodsInfo.name, logo: item.goodsInfo.logo, price: item.goodsInfo.price, buyNum: item.num, specList: specList };
app.cartList.push(cartInfo);
})
}
app.cartTotalPrice = response.data.totalPrice;
app.cartTotalNum = response.data.totalNum;
app.couponList = response.data.couponList;
app.loading = false;
}).catch((err) => {
// empty
});
},
// 查询商品
doQueryGoods() {
const app = this;
if (!app.searchForm.keyword) {
app.activeGoodsList = app.goodsList;
return false;
}
app.loading = true;
searchGoods({ keyword: app.searchForm.keyword }).then( response => {
app.loading = false;
if (response.data && response.data.length > 0) {
app.activeGoodsList = response.data;
} else {
app.$alert("抱歉，未查询到商品信息！");
return false;
}
}).catch(() => {
// empty
});
},
// 点击商品规格弹框
clickGoods(goodsInfo) {
const app = this;
if (app.loading) {
return false;
}
app.loading = true;
getGoodsInfo(goodsInfo.id).then( response => {
app.goodsInfo = response.data.goodsInfo;
app.goodsInfo.specList = response.data.specList;
app.goodsInfo.skuList = response.data.skuList;
app.goodsNum = 1;
app.loading = false;
if (app.goodsInfo.isSingleSpec == 'N') {
app.openGoodsDialog = true;
} else {
app.addToCart(false);
}
}).catch(() => {
// empty
});
},
// 关闭规格弹框
closeGoodsDialog() {
this.openGoodsDialog = false;
},
// 选择商品属性
selectGoodsSpec(specId) {
const app = this;
let specIds = [];
app.goodsInfo.specList.forEach(function() {
specIds.push(0);
})
app.goodsInfo.specList.forEach(function(specItem, index) {
const children = [];
specItem.child.forEach(function(child) {
children.push(child.id)
})
if (children.includes(specId)) {
specIds[index] = specId
} else {
specIds[index] = app.goodsSpecIds[index] == undefined ? 0 : app.goodsSpecIds[index];
}
})
app.goodsSpecIds = specIds;
},
// 加入购物车
addToCart(skuNo) {
const app = this;
app.isSearch = false;
// 扫码枪扫描商品条码，直接加入购物车
if (skuNo) {
searchGoods({ keyword: skuNo }).then( response => {
app.loading = false;
if (response.data && response.data.length == 1) {
app.clickGoods(response.data[0]);
app.isSearch = true;
return false;
} else {
app.$alert("抱歉，未查询到商品信息！");
return false;
}
}).catch(() => {
// empty
});
}
if (app.loading || app.isSearch || !app.goodsInfo.id || app.goodsNum <= 0) {
return false;
}
const specIds = app.goodsSpecIds.join('-');
let skuId = 0;
app.goodsInfo.skuList.forEach(function(skuInfo) {
if (skuInfo.specIds == specIds) {
skuId = skuInfo.id;
}
})
if (app.goodsInfo.isSingleSpec == 'N' && skuId <= 0) {
app.$alert("请先确认商品规格！");
return false;
}
// 添加到购物车
const cartInfo = { goodsId: app.goodsInfo.id,
name: app.goodsInfo.name,
logo: app.goodsInfo.logo,
price: app.goodsInfo.price,
skuId: skuId,
userId: getUserId(),
hangNo: app.hangNo,
buyNum: app.goodsNum };
app.loading = true;
saveCart(cartInfo).then(response => {
app.loading = false;
if (response.data.cartId) {
app.getCartList();
app.openGoodsDialog = false;
app.goodsSpecIds = [];
app.goodsNum = 0;
}
}).catch(() => {
app.loading = false;
});
},
// 删除购物车
removeFromCart(cartId) {
const app = this;
removeFromCart({ cartId: [cartId], userId: getUserId() }).then(response => {
if (response.data) {
app.getCartList();
}
}).catch(() => {
// empty
});
},
// 购物车数量变化
changeBuyNum(cartInfo) {
const app = this;
const param = { goodsId: cartInfo.goodsId,
skuId: cartInfo.skuId,
cartId: cartInfo.cartId,
action: '=',
userId: app.memberInfo ? app.memberInfo.id : null,
hangNo: app.hangNo,
buyNum: cartInfo.buyNum };
app.loading = true;
saveCart(param).then(response => {
app.loading = false;
if (response.data.cartId) {
app.getCartList();
app.openGoodsDialog = false;
app.goodsSpecIds = [];
}
}).catch(() => {
app.loading = false;
app.getCartList();
});
},
// 弹出关联会员
switchMember() {
this.openSwitchMemberDialog = true;
},
// 确认关联会员
doSwitchMember(memberInfo) {
this.openSwitchMemberDialog = false;
if (memberInfo != 0) {
this.memberInfo = memberInfo;
if (memberInfo) {
setUserId(memberInfo.id);
} else {
removeUserId();
}
this.getCartList();
}
},
logout() {
this.$router.push( '/' );
},
// 发起结算
doSettlement() {
if (this.cartList.length < 1) {
this.$alert("请先添加结算商品！");
return false;
}
this.getCartList();
this.orderInfo = {};
this.openSettlementDialog = true;
},
// 无商品结算
doCashier() {
this.orderInfo = {};
this.openNoGoodsCashierDialog = true;
},
submitCashier(param) {
this.orderInfo = {};
this.openSettlementDialog = true;
this.cartTotalPrice = parseFloat(param.amount);
this.cartRemark = param.remark;
this.openNoGoodsCashierDialog = false;
},
// 确认结算
submitSettlement(param) {
const app = this;
// 已生成的订单支付
if (app.orderInfo.id) {
// 微信、支付宝支付
if (param.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
app.payAmount = app.orderInfo.payAmount;
app.orderId = app.orderInfo.id;
app.openScanPayCodeDialog = true;
app.openSettlementDialog = false;
app.payType = param.payType;
}
// 现金、余额支付
if (param.payType == 'CASH' || param.payType == 'BALANCE') {
doPay({ orderId: app.orderId, payType: param.payType, cashierPayAmount: param.totalPrice, cashierDiscountAmount: param.discountPrice, userId: getUserId() }).then( response => {
app.openSettlementDialog = false;
if (response.data.orderInfo.payStatus == 'B') {
app.showPayResult({ isSuccess: true, payAmount: response.data.orderInfo.payAmount, orderId: response.data.orderInfo.id });
} else {
app.$alert(response.data.message ? response.data.message : "抱歉，订单操作异常！");
}
})
}
return false;
}
// 购物车提交结算
let cartIds = [];
app.cartList.forEach(function(cart){
cartIds.push(cart.cartId);
})
const data = { cashierPayAmount: param.totalPrice,
cashierDiscountAmount: param.discountPrice,
cartIds: cartIds.join(','),
orderMode: 'oneself',
payType: param.payType,
remark: param.remark,
type: app.cartList.length > 0 ? 'goods' : 'payment',
couponId: param.userCouponId ? param.userCouponId : 0,
userId: getUserId() };
if (app.loading) {
return false;
}
app.loading = true;
submitSettlement(data).then( response => {
app.loading = false;
app.doSwitchMember(null);
app.initCashier();
app.getCartList();
// 微信支付，弹出扫码框
if (response.data.orderInfo.payType == 'MICROPAY' || param.payType == 'ALISCAN') {
app.payAmount = response.data.orderInfo.payAmount;
app.orderId = response.data.orderInfo.id;
app.openScanPayCodeDialog = true;
app.openSettlementDialog = false;
app.payType = param.payType;
return false;
}
// 现金、余额支付
if (response.data.orderInfo.payType == 'CASH' || response.data.orderInfo.payType == 'BALANCE') {
app.openSettlementDialog = false;
if (response.data.orderInfo.payStatus == 'B') {
app.showPayResult({ isSuccess: true, payAmount: response.data.orderInfo.payAmount, orderId: response.data.orderInfo.id });
} else {
app.$alert(response.data.message);
}
return false;
}
if (response.code == '201') {
app.$alert(response.data.message);
}
return false;
}).catch(() => {
app.loading = false;
});
},
// 点击挂单/取单
hangUp() {
this.openHangUpDialog = true;
},
// 取单
getHangNo(data) {
this.openHangUpDialog = false;
this.hangNo = data.hangNo;
this.getCartList();
// 关联会员信息
if (data.hangNo && data.hangNo.length > 0 ) {
this.doSwitchMember(data.memberInfo);
}
},
// 执行挂单
doHangUp() {
this.hangNo = '';
this.getCartList();
removeUserId();
this.memberInfo = null;
},
// 关闭对话框
closeDialog(dialog) {
if (dialog == 'settlementDialog') {
this.openSettlementDialog = false;
} else if (dialog == 'switchMemberDialog') {
this.openSwitchMemberDialog = false;
} else if (dialog == 'scanPayCodeDialog') {
this.openScanPayCodeDialog = false;
} else if (dialog == 'payResultDialog') {
this.openPayResultDialog = false;
} else if (dialog == 'printOrder') {
this.openOrderPrintDialog = false;
} else if (dialog == 'hangUpDialog') {
this.openHangUpDialog = false;
} else if (dialog == 'openNoGoodsCashierDialog') {
this.openNoGoodsCashierDialog = false;
}
},
// 展示支付结果
showPayResult(payResult) {
this.payResult = payResult;
this.openPayResultDialog = true;
},
// 订单支付
doPayOrder(orderInfo) {
const app = this;
app.payAmount = orderInfo.amount;
app.orderId = orderInfo.id;
app.orderInfo = orderInfo;
let userId = 0
if (orderInfo.isVisitor !== "Y") {
userId = app.orderInfo.userInfo.id;
}
getMemberInfoById(userId).then(response => {
if (response.data.memberInfo) {
app.memberInfo = response.data.memberInfo;
} else {
app.memberInfo = null;
}
}).catch(() => {
// empty
});
app.doSwitchMember(app.memberInfo);
app.openSettlementDialog = true;
},
// 打印小票
showOrderPrint(orderId) {
const app = this;
getOrderInfo(orderId).then(response => {
if (response.data.orderInfo) {
app.orderInfo = response.data.orderInfo;
app.openOrderPrintDialog = true;
}
}).catch(() => {
// empty
});
}
}
};
</script>
<style lang="scss" scoped>
123
2023-10-24 18:52:17 +08:00
.app-containers{
width: 100%;
height: 100%;
background: #f6f8f9;
display: flex;
}
.app-center{
width: 100%;
display: flex;
box-sizing: border-box;
padding: 10px;
}
.center-left{
width: 33%;
border-radius: 8px;
overflow: hidden;
/*height: 70vh;*/
/*box-sizing: border-box;*/
/*padding: 10px;*/
}
.center-app{
width: 33%;
border-radius: 8px;
overflow: hidden;
/*background: white;*/
margin: 0px 10px;
}
.center-right{
width: 33%;
border-radius: 8px;
overflow: hidden;
}
.center-top{
width: 100%;
height: 86vh;
background: white;
margin-bottom: 10px;
box-sizing: border-box;
padding: 10px;
}
.center-top-title{
box-sizing: border-box;
padding: 10px 0px;
padding-bottom: 15px;
border-bottom: 1px solid #ececec;
font-size: 22px;
}
.center-top-input{
width: 100%;
height: 60px;
background: #f8f8f8;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
input{
border: none;
outline: none;
background-color:transparent;
}
}
.center-left-top{
width: 100%;
background: #5393ff;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.center-vh{
height: 68vh;
}
.center-left-hj{
background: white;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 15px;
margin-bottom: 2px;
}
.center-left-th{
background: white;
box-sizing: border-box;
padding: 15px;
margin: 10px auto;
}
.center-left-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
/*margin-top: 280px;*/
}
.wrap-box{
width: 31%;
background-color: white;
border-radius: 8px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.center-left-bottom{
width: 100%;
background-color: white;
border-radius: 8px;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-qk{
border: 1px solid #99a9bf;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #99a9bf;
margin: 15px 0px ;
}
.bottom-qd{
border: 1px solid #13ce66;
background: #13ce66;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-gd{
border: 1px solid #5393ff;
background: #5393ff;
box-sizing: border-box;
padding: 14px 20px;
border-radius: 50px;
color: #ffffff;
margin: 15px 10px ;
}
.bottom-price{
font-size: 26px;
font-weight: bold;
}
.price-red{
color: red;
}
.center-left-lv{
width: 60%;
height: 80px;
background-color: #13ce66;
color: white;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.th-box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f6f8f9;
box-sizing: border-box;
padding: 10px 0px;
}
.hj-box{
width: 33%;
display: flex;
align-items: center;
justify-content: center;
}
.bule{
font-weight: 700;
color: #5393ff;
}
.vip-bottom{
border: 1px solid #ffffff;
box-sizing: border-box;
padding: 5px 15px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
.app-left{
width: 180px;
height: 100vh;
background: #ffffff;
box-shadow: 0 4px 4px 4px rgba(0,21,41,.08);
box-sizing: border-box;
padding: 10px;
}
.app-left-title{
color: #53a0ff;
font-weight: bold;
}
.app-left-top{
height: 60px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.app-left-img{
width: 28px;
height: 24px;
img{
width: 100%;
height: 100%;
}
}
.app-left-box{
width: 100%;
height: 60px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
}
.container-top{
width: 100%;
height: 98px;
background: #5393ff;
display: flex;
align-items: center;
justify-content: center;
}
init
2023-10-09 11:06:01 +08:00
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
.left-side {
width: 160px;
height: 100%;
123
2023-10-24 18:52:17 +08:00
background: #5393ff;
init
2023-10-09 11:06:01 +08:00
border-right: #888888 solid 2px;
position: absolute;
left: 0;
top: 0px;
padding: 0px;
color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
display: block;
text-align: center;
.logo {
height: 90px;
padding: 20px 12px 10px 12px;
font-weight: bold;
.logout {
float: left;
height: 20px;
line-height: 20px;
text-align: left;
width: 100%;
cursor: pointer;
}
.store {
font-size: 12px;
}
.account {
font-size: 12px;
border: solid 2px #FFFFFF;
background: #6c757d;
cursor: pointer;
margin-top: 6px;
padding: 2px;
border-radius: 2px;
}
}
.cate {
text-align: center;
margin-left: 14px;
margin-top: 10px;
.nav {
list-style: none;
display: block;
margin: 0px;
padding: 5px;
text-align: center;
.nav-item {
margin-top: 20px;
font-size: 14px;
width: 120px;
text-align: center;
.nav-link {
position: relative;
padding: .5356875rem .9375rem;
white-space: nowrap;
text-align: center;
font-weight: 600;
color: #666666;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 5px;
transition: color .2s linear;
background: #f5f5f5;
border: 2px solid #FFFFFF;
.cate-logo {
display: block;
width: 50px;
height: 50px;
}
}
.active {
font-weight: bold;
border: 4px #ff5b57 solid;
}
}
}
}
}
123
2023-10-24 18:52:17 +08:00
init
2023-10-09 11:06:01 +08:00
.cart-container {
width: 310px;
height: 100%;
background: #FFFFFF;
display: block;
position: absolute;
left: 165px;
top: 0px;
overflow-x: hidden;
overflow-y: auto;
border: #cccccc solid 1px;
.title {
height: 70px;
width: 310px;
123
2023-10-24 18:52:17 +08:00
background: #5393ff;
init
2023-10-09 11:06:01 +08:00
border-bottom: #CCCCCC 2px solid;
color: #FFFFFF;
padding-top: 16px;
padding-left: 1px;
display: block;
position: fixed;
top: 0px;
z-index: 999;
clear: both;
.logo {
float: left;
font-size: 24px;
.avatar {
width: 30px;
height: 30px;
border-radius: 40px;
margin: 5px 0px 5px 5px;
}
}
.member-info {
float: left;
margin-top: 5px;
.name {
margin-left: 2px;
margin-right: 3px;
}
.none {
margin-left: 2px;
margin-right: 5px;
font-size: 13px;
}
.switch {
padding: 8px 8px 8px 4px;
}
}
}
.carts {
display: block;
width: 100%;
color: #666666;
margin-bottom: 120px;
margin-top: 70px;
padding: 0px;
.tab {
width: 50%;
.cart-list {
margin-bottom: 60px;
.cart-item {
border-bottom: dashed 1px #cccccc;
height: 110px;
width: 310px;
padding-top: 5px;
.image {
width: 50px;
height: 50px;
margin-left: 5px;
border-radius: 5px;
border: solid 1px #ccc;
float: left;
margin-top: 20px;
}
.info {
float: left;
padding-left: 5px;
margin-top: 5px;
.name {
font-weight: bold;
font-size: 12px;
width: 160px;
max-height: 30px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.spec {
font-size: 12px;
width: 160px;
height: 20px;
margin-top: 2px;
.item {
margin-right: 2px;
border-radius: 5px;
text-align: center;
max-width: 50px;
height: 20px;
line-height: 20px;
float: left;
display: block;
overflow: hidden;
color: #606266;
cursor: pointer;
background: #cceeee;
padding: 0px 3px 0px 3px;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.input {
width: 120px;
margin-top: 2px;
}
}
.option {
float: right;
text-align: right;
margin-right: 10px;
.remove {
font-size: 12px;
cursor: pointer;
}
.total {
margin-top: 10px;
font-size: 16px;
color: #ff5b57;
}
}
}
}
.empty {
margin-top: 200px;
width: 310px;
}
}
}
.footer {
position: fixed;
z-index: 999;
background: #6c757d;
bottom: 0;
height: 120px;
width: 100%;
padding-top: 5px;
padding-right: 15px;
color: #FFFFFF;
display: block;
width: 310px;
border: solid 3px #cccccc;
.number {
float: right;
margin: 5px;
font-size: 13px;
.total-price {
margin-top: 3px;
.num {
color: #ff5b57;
font-size: 20px;
}
}
}
.options {
text-align: center;
cursor: pointer;
float: right;
color: #FFFFFF;
.cash {
float: left;
height: 50px;
123
2023-10-24 18:52:17 +08:00
border: solid 1px #5393ff;
init
2023-10-09 11:06:01 +08:00
padding-top: 15px;
width: 135px;
border-radius: 5px;
123
2023-10-24 18:52:17 +08:00
background: #5393ff;
init
2023-10-09 11:06:01 +08:00
font-weight: bold;
}
.submit {
float: left;
height: 50px;
border: solid 1px #ff5b57;
margin-left: 10px;
padding-top: 15px;
width: 135px;
border-radius: 5px;
background: #ff5b57;
font-weight: bold;
}
}
}
}
.main-list {
height: 100%;
width: 100%;
min-width: 760px;
margin-left: 475px;
margin-right: 2px;
overflow: auto;
display: block;
background: #FFFFFF;
margin-bottom: 10px;
.title {
position: fixed;
height: 106px;
width: calc(100% - 465px);
min-width: 700px;
background: #ffffff;
padding: 5px;
color: red;
top: 0px;
.search-form {
height: 50px;
.form-item {
margin-right: -2px;
}
.input-item {
min-width: 456px;
}
.search-goods {
height: 50px;
123
2023-10-24 18:52:17 +08:00
background: #5393ff;
init
2023-10-09 11:06:01 +08:00
margin-left: 3px;
color: #fff;
}
}
.tab-box {
margin-top: 3px;
width: 100%;
}
}
.goods-list {
height: 100%;
width: 100%;
margin-top: 103px;
margin-left: 2px;
margin-bottom: 20px;
.goods-item {
width: 33.3%;
min-height: 300px;
min-width: 220px;
padding: 3px;
float: left;
background: #ffffff;
text-align: left;
cursor: pointer;
.item {
background: #ffffff;
padding: 5px;
border-radius: 5px;
border: solid 1px #cccccc;
margin: 0px;
.goods-name {
margin-top: 10px;
font-size: 18px;
color: #666666;
height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-price {
color: #ff5b57;
font-size: 18px;
font-weight: bold;
}
.image {
width: 100%;
height: 220px;
border-radius: 3px;
}
}
}
}
}
}
.goods-info {
border: solid 1px #ccc;
padding: 30px;
border-radius: 5px;
.name {
height: 40px;
font-weight: bold;
font-size: 20px;
}
.price {
height: 40px;
color: #ff5b57;
font-size: 16px;
}
.spec-list {
border: solid 1px #ccc;
padding: 20px;
margin-top: 10px;
border-radius: 6px;
.spec-item {
margin-bottom: 20px;
.spec-name {
font-weight: bold;
font-size: 16px;
}
.values {
display: block;
padding-top: 10px;
margin-left: 0px;
padding-left: 0px;
font-size: 12px;
.value {
border: solid 1px #cceeee;
margin-right: 10px;
padding: 8px 15px 5px 15px;
cursor: pointer;
border-radius: 4px;
background: rgba(0, 172, 172, 0.1);
color: #666666;
}
.active {
border: solid 1px #ff5891;
background: #ff5b57;
color: #FFFFFF;
}
}
}
}
}
</style>
<style scoped>
.input-item >>> .el-input__inner {
123
2023-10-24 18:52:17 +08:00
border: #5393ff solid 2px;
init
2023-10-09 11:06:01 +08:00
line-height: 50px;
height: 50px;
}
.form-item >>> .el-form-item__label {
line-height: 50px;
height: 50px;
}
.el-tabs--border-card {
box-shadow: none;
border: none;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
padding: 0px;
}
</style>
Reference in New Issue Copy Permalink