1334 lines
45 KiB
Vue
1334 lines
45 KiB
Vue
<template>
|
||
<!-- <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>-->
|
||
<!--<!– 翻新–>-->
|
||
<!-- <div class="cart-container" v-if="activeMenu == 'cashier'">-->
|
||
<!-- <div class="container-top">-->
|
||
<!-- <div class="vip-bottom" @click="switchMember()">-->
|
||
<!-- <span>会员登录</span>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!--<!– 中间部分–>-->
|
||
<!--<!– <div class="cart-container" v-if="activeMenu == 'cashier'">–>-->
|
||
|
||
<!--<!– <div class="title">–>-->
|
||
<!--<!– –>-->
|
||
<!--<!– <div class="logo">–>-->
|
||
<!--<!– <img class="avatar" v-if="!memberInfo || !memberInfo.avatar" src="@/assets/images/avatar.png" />–>-->
|
||
<!--<!– <img class="avatar" v-else :src="memberInfo.avatar"/>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="member-info">–>-->
|
||
<!--<!– <span class="name" v-if="memberInfo">{{ memberInfo.mobile ? memberInfo.mobile : memberInfo.name }}</span>–>-->
|
||
<!--<!– <span class="none" v-if="!memberInfo">身份</span>–>-->
|
||
<!--<!– <el-button size="mini" class="switch" type="danger" icon="el-icon-refresh" @click="switchMember()">关联会员</el-button>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
|
||
<!--<!– <div class="carts">–>-->
|
||
<!--<!– <div>–>-->
|
||
<!--<!– <div class="tab">–>-->
|
||
<!--<!– <div class="cart-list" v-if="cartList.length > 0">–>-->
|
||
<!--<!– <div class="cart-item" v-for="cartInfo in cartList">–>-->
|
||
<!--<!– <img class="image" :src="cartInfo.logo"/>–>-->
|
||
<!--<!– <div class="info">–>-->
|
||
<!--<!– <div class="name">{{ cartInfo.name }}</div>–>-->
|
||
<!--<!– <div class="spec" v-if="cartInfo.specList && cartInfo.specList.length > 0">–>-->
|
||
<!--<!– <span class="item" v-for="spec in cartInfo.specList" :title="spec.value">{{ spec.value }}</span>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="num"><el-input-number class="input" @change="changeBuyNum(cartInfo)" v-model="cartInfo.buyNum" :min="1" :max="1000"/></div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="option">–>-->
|
||
<!--<!– <div class="remove el-icon-delete" @click="removeFromCart(cartInfo.cartId)"></div>–>-->
|
||
<!--<!– <div class="total">￥{{ (cartInfo.price * cartInfo.buyNum).toFixed(2) }}</div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="empty" v-if="cartList.length < 1">–>-->
|
||
<!--<!– <el-empty description="暂无结算商品" :image-size="40"></el-empty>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="footer">–>-->
|
||
<!--<!– <div class="number">–>-->
|
||
<!--<!– <div class="total-num">总件数：<b class="num">{{ cartTotalNum }}</b></div>–>-->
|
||
<!--<!– <div class="total-price">总金额：<b class="num">￥{{ cartTotalPrice.toFixed(2) }}</b></div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– <div class="options">–>-->
|
||
<!--<!– <div class="cash" @click="hangUp()">挂单 / 取单</div>–>-->
|
||
<!--<!– <div class="submit" v-if="cartTotalNum > 0" @click="doSettlement()">提交结算</div>–>-->
|
||
<!--<!– <div class="submit" v-if="cartTotalNum == 0" @click="doCashier()">无商品收款</div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– </div>–>-->
|
||
<!--<!– 右侧部分–>-->
|
||
<!-- <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>-->
|
||
|
||
<!-- <!– 订单列表组件 start–>-->
|
||
<!-- <orderList v-if="activeMenu == 'order'" @doPayOrder="doPayOrder"></orderList>-->
|
||
<!-- <!– 订单列表组件 end–>-->
|
||
|
||
<!-- <!– 会员列表组件 start–>-->
|
||
<!-- <memberList v-if="activeMenu == 'member'"></memberList>-->
|
||
<!-- <!– 会员列表组件 end–>-->
|
||
|
||
<!-- <!– 卡券核销组件 start–>-->
|
||
<!-- <couponConfirm v-if="activeMenu == 'coupon'"></couponConfirm>-->
|
||
<!-- <!– 卡券核销组件 end–>-->
|
||
<!-- </div>-->
|
||
<!-- </el-drawer>-->
|
||
|
||
<!-- <!– 规格详情 start–>-->
|
||
<!-- <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>-->
|
||
<!-- <!– 规格详情 end–>-->
|
||
|
||
<!-- <!–关联会员对话框 start–>-->
|
||
<!-- <switchMemberDialog :show-dialog="openSwitchMemberDialog" @doSwitchMember="doSwitchMember"/>-->
|
||
<!-- <!–关联会员对话框 end–>-->
|
||
|
||
<!-- <!–结算对话框 start–>-->
|
||
<!-- <settlementDialog :show-dialog="openSettlementDialog" :memberInfo="memberInfo" :totalPrice="cartTotalPrice" :remarks="cartRemark" :orderInfo="orderInfo" :couponList="couponList" @submit="submitSettlement" @switchMember="switchMember" @closeDialog="closeDialog"/>-->
|
||
<!-- <!–结算对话框 end–>-->
|
||
|
||
<!-- <!–扫码付款对话框 start–>-->
|
||
<!-- <scanPayCodeDialog ref="scanPayCodeDialog" :show-dialog="openScanPayCodeDialog" :memberInfo="memberInfo" :orderId="orderId" :payType="payType" :payAmount="payAmount" @closeDialog="closeDialog" @showPayResult="showPayResult"/>-->
|
||
<!-- <!–扫码付款对话框 end–>-->
|
||
|
||
<!-- <!–支付结果对话框 start–>-->
|
||
<!-- <payResultDialog :show-dialog="openPayResultDialog" :payResult="payResult" @showOrderPrint="showOrderPrint" @closeDialog="closeDialog"/>-->
|
||
<!-- <!–支付结果对话框 end–>-->
|
||
|
||
<!-- <!–打印订单对话框 start–>-->
|
||
<!-- <orderPrintDialog :show-dialog="openOrderPrintDialog" :storeInfo="storeInfo" :orderInfo="orderInfo" @closeDialog="closeDialog"/>-->
|
||
<!-- <!–打印订单对话框 end–>-->
|
||
|
||
<!-- <!–挂单对话框 start–>-->
|
||
<!-- <hangUpDialog :show-dialog="openHangUpDialog" :memberInfo="memberInfo" :cartList="cartList" @getHangNo="getHangNo" @doHangUp="doHangUp" @closeDialog="closeDialog"/>-->
|
||
<!-- <!–挂单对话框 end–>-->
|
||
|
||
<!-- <!– 无商品收款组件 start–>-->
|
||
<!-- <noGoodsCashier :show-dialog="openNoGoodsCashierDialog" @submit="submitCashier" @closeDialog="closeDialog"></noGoodsCashier>-->
|
||
<!-- <!– 无商品收款组件 end–>-->
|
||
<!-- </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" :class="{'bule': leftindex == index }" :key="index" @click="gocomponents(index)">
|
||
<i :class="item.icon" style="font-size: 18px" ></i> <div style="cursor: pointer;margin-left: 10px">{{item.name}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<homeindex v-if="leftindex == 0"></homeindex>
|
||
<Recharge v-if="leftindex == 1"></Recharge>
|
||
<Order v-if="leftindex == 2"></Order>
|
||
<vip v-if="leftindex == 3"></vip>
|
||
<WriteOff v-if="leftindex == 4"></WriteOff>
|
||
<credit v-if="leftindex == 5"></credit>
|
||
<Integral v-if="leftindex == 6"></Integral>
|
||
<Handover v-if="leftindex == 7"></Handover>
|
||
<div style="width: 100%;padding:200px " v-if="leftindex != 0 && leftindex != 1 && leftindex != 2 && leftindex != 3 && leftindex != 4 && leftindex != 5 && leftindex != 6 && leftindex != 7">
|
||
<el-empty description="暂未开发"></el-empty>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</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";
|
||
import homeindex from "./NewComponents/homeindex";
|
||
import Recharge from "./NewComponents/Recharge";
|
||
import Order from "./NewComponents/Order";
|
||
import Vip from "./NewComponents/Vip";
|
||
import WriteOff from "./NewComponents/WriteOff";
|
||
import credit from "./NewComponents/credit";
|
||
import Integral from "./NewComponents/Integral";
|
||
import Handover from "./NewComponents/Handover";
|
||
export default {
|
||
name: "Cashier",
|
||
components: {
|
||
switchMemberDialog,
|
||
settlementDialog,
|
||
scanPayCodeDialog,
|
||
payResultDialog,
|
||
orderPrintDialog,
|
||
hangUpDialog,
|
||
orderList,
|
||
memberList,
|
||
couponConfirm,
|
||
noGoodsCashier,
|
||
homeindex,
|
||
Recharge,
|
||
Order,
|
||
Vip,
|
||
WriteOff,
|
||
credit,
|
||
Integral,
|
||
Handover
|
||
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 'second',
|
||
tabarr:[
|
||
{name:'收银台',icon:'el-icon-s-platform'},
|
||
{name:'充值',icon: 'el-icon-s-finance'},
|
||
{name:'订单',icon: 'el-icon-s-order'},
|
||
{name:'会员',icon: 'el-icon-s-custom'},
|
||
{name:'核销',icon: 'el-icon-s-check'},
|
||
{name:'挂账',icon:'el-icon-s-claim'},
|
||
{name:'积分',icon:'el-icon-s-data'},
|
||
{name:'交班',icon: 'el-icon-s-flag'},
|
||
],
|
||
leftindex:0,
|
||
oilList:[
|
||
{color:'#e5f0ff'},
|
||
{color:'#fff2e5'},
|
||
{color:'#e5edf1'},
|
||
{color:'#ecfae5'},
|
||
{color:'#fafafa'}
|
||
],
|
||
num: 1,
|
||
|
||
// 系统名称
|
||
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() {
|
||
// this.initCashier();
|
||
// this.getCartList();
|
||
},
|
||
methods: {
|
||
handleChange(value) {
|
||
console.log(value);
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
},
|
||
gocomponents(index){
|
||
this.leftindex = index
|
||
},
|
||
// 初始化数据
|
||
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>
|
||
.app-containers{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f6f8f9;
|
||
display: flex;
|
||
}
|
||
.bule{
|
||
font-weight: 700;
|
||
color: #5393ff !important;
|
||
}
|
||
.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;
|
||
}
|
||
.main {
|
||
height: 100%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
.left-side {
|
||
width: 160px;
|
||
height: 100%;
|
||
background: #5393ff;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
background: #5393ff;
|
||
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;
|
||
border: solid 1px #5393ff;
|
||
padding-top: 15px;
|
||
width: 135px;
|
||
border-radius: 5px;
|
||
background: #5393ff;
|
||
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;
|
||
background: #5393ff;
|
||
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 {
|
||
border: #5393ff solid 2px;
|
||
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>
|