1709 lines
46 KiB
Vue
1709 lines
46 KiB
Vue
<template>
|
||
<div class="new-contoner">
|
||
<div class="left-box">
|
||
<div class="box-top">
|
||
<div class="o-top" v-if="userInfo">
|
||
<div style="width: 50%">
|
||
<div class="d-s">
|
||
<img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
|
||
<div >
|
||
<div style="font-weight: bold">{{chooseVipUser.name||'匿名'}}</div>
|
||
<div class="d-s">
|
||
<span>{{chooseVipUser.mobile}}</span>
|
||
<img src="./imgs/fz.png" @click="copyToClipboard(chooseVipUser.mobile)" style="width: 17px;height: 17px;margin: 0px 10px">
|
||
<img src="./imgs/vipicon.png" style="width: 23px;height: 19px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-s" >
|
||
<div style="font-size: 12px;margin-right: 5px">储值卡：￥{{chooseVipUser.cardBalance}} </div>
|
||
<div style="font-size: 12px">囤油卡：￥1000.000</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-s" style="width: 50%">
|
||
<div class="an_bor" @click="addMemberRecharge()">会员充值</div>
|
||
<div class="an_bor" @click="restVipUser">重置会员</div>
|
||
<div class="an_bor" @click="addFreeTicket()" >赠送优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="o-top" v-if="!userInfo">
|
||
<div class="left_input">
|
||
<el-autocomplete
|
||
v-model="userMobile"
|
||
style="width: 95%;margin: 15px "
|
||
:fetch-suggestions="getUser"
|
||
placeholder="请输入会员手机号"
|
||
|
||
>
|
||
<template slot-scope="{ item }">
|
||
<div class="name" @click="chooseUser(item)">{{ item.name+" "+item.mobile }}</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="an_bor" @click="addVip()">新增会员</div>
|
||
</div>
|
||
|
||
<!-- 渲染会员列表 -->
|
||
<div class="taber-box" v-for="(item,index) in vipUserList" :key="index">
|
||
<div class="goods_name">
|
||
<!-- <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">-->
|
||
{{ item.name }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="t-top">
|
||
<div class="three_box">油品:￥0.00</div>
|
||
<div style="color: #F4F5F9">|</div>
|
||
<div class="three_box">商品:￥0.00</div>
|
||
<div style="color: #F4F5F9">|</div>
|
||
<div class="three_box">合计:￥0.00</div>
|
||
</div>
|
||
<div class="d-top">
|
||
<div class="d-b">
|
||
|
||
<el-checkbox v-model="checkAll">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<!-- 下拉列表插入-->
|
||
<div v-if="checkAll == true">
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll1">优惠1</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll2">优惠2</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll3">优惠3</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-b">
|
||
|
||
<el-checkbox v-model="checkAll">优惠券 <i class="el-icon-arrow-down"></i></el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<!-- 下拉列表插入-->
|
||
<div v-if="checkAll == true">
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll1">优惠券1</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll2">优惠券2</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll3">优惠券3</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="three-top">
|
||
<div class="addbor">
|
||
<div class="">扫码支付</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
<div class="addbor">
|
||
<div class="">找零</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
<div class="addbor">
|
||
<div class="">加油员</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
</div>
|
||
<div class="er-box"></div>
|
||
<div class="wrap-box">
|
||
<div class="f-box" v-for="(item,index) in cardList" :class="{'f-acvite' : index == ruleIndex }"
|
||
@click="setindex(index)" :key="index"
|
||
>{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="box-bottom">
|
||
<div>
|
||
<div class="price_">￥0.00</div>
|
||
<div class="price_prefer">优惠合计:￥0.00元</div>
|
||
</div>
|
||
<div class="anniu">立即结算</div>
|
||
</div>
|
||
</div>
|
||
<div class="cont-box">
|
||
<div class="box-top">
|
||
<div class="cont-tab">
|
||
<div class="tab-box" v-for="(value,key,index) in tabList" :key="index" @click="setTabindex(key,index)">
|
||
<div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ key }}</div>
|
||
<div class="gang" :class="{ 'active_gang' : tabIndex == index }"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-kuang" style="flex-wrap: wrap">
|
||
<div :class=item.classStyle v-for="(item,index) in dataList" @click="setRefuelingAmount(item)">
|
||
<div>{{ item.oilType }} {{ item.oilName }}</div>
|
||
<div class="card-title">{{ item.gunName }}</div>
|
||
<div class="c-b-d">
|
||
<img :src=item.img style="width: 16px;height: 16px">
|
||
<div>{{ item.oilName }} {{ item.oilType + '罐' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="c-bottom">
|
||
{{ getGoodsItem }}
|
||
</div>
|
||
<div class="bottom-b-d">
|
||
<!-- <div>订单笔数 <span style="color: #FF9655">0件</span></div>-->
|
||
<div>油品金额 <span style="color: #FF9655">￥{{ oilGunClearing.amount || 0.00 }}</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="anniu-c" @click="oilGunReset()">
|
||
重置
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="box-top">
|
||
<div class="r-top">非油商品</div>
|
||
|
||
<el-autocomplete
|
||
style="width: 95%;margin: 15px "
|
||
popper-class="my-autocomplete"
|
||
v-model="state"
|
||
:fetch-suggestions="querySearchAsync"
|
||
placeholder="请输入内容"
|
||
@select="handleSelect"
|
||
>
|
||
<template slot-scope="{ item }">
|
||
<div class="name">{{ item.name }}</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
|
||
|
||
<div class="taber-top">
|
||
<div class="goods_name">商品</div>
|
||
<div class="stock_name">库存</div>
|
||
<div class="u-price_name">单价</div>
|
||
<div class="num_name">数量</div>
|
||
<div class="orerate_name">操作</div>
|
||
</div>
|
||
<!-- 渲染商品列表 -->
|
||
<div class="taber-box" v-for="(item,index) in goodsList" :key="index">
|
||
<div class="goods_name">
|
||
<!-- <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">-->
|
||
{{ item.name }}
|
||
</div>
|
||
<div class="stock_name">{{ item.stock }}</div>
|
||
<div class="u-price_name">{{ item.retailPrice }}</div>
|
||
<div class="num_name">{{ item.num }}</div>
|
||
<div class="orerate_name">
|
||
<span style="color: red;cursor: pointer" @click="deleteGoods(item.id)">删除</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-b-d">
|
||
<div>商品总数 <span style="color: #FF9655">{{ getGoodsListNum }}件</span></div>
|
||
<div>商品总金额 <span style="color: #FF9655">￥{{ getGoodsNum }}</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="anniu-c" @click="goodsReset()">
|
||
重置
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="anniu-lv" @click="invokePickUpTheOrder">取单</div>
|
||
<div class="anniu-lan" @click="invokeHangingAnOrder">挂单</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 弹窗-->
|
||
<el-dialog
|
||
title="送券"
|
||
:visible.sync="freeTicket"
|
||
width="800px"
|
||
|
||
>
|
||
<div class="ds-tc">
|
||
<div class="left_tc">
|
||
<div class="t-tc">
|
||
<div style="font-size: 18px;font-weight: bold">所有卡券</div>
|
||
<div style="font-size: 16px;color: #ff9655">打印所有二维码</div>
|
||
</div>
|
||
<div class="wrap-tc">
|
||
<div class="tc_wa" :class="{'tc-active' : freeIndex == index }" @click="setFreeIndex(index)"
|
||
v-for="(item,index) in freeTicketList">{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_tc">
|
||
<div style="font-weight: 600;font-size: 16px;color: #333333;text-align: center;margin-bottom: 15px">
|
||
优惠价格固定1元
|
||
</div>
|
||
<div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 10px">油品立减券</div>
|
||
<div style="margin-bottom: 10px">可用时间：周一至周日 全天</div>
|
||
<div style="display: flex">
|
||
<div style="width: 70px">可用日期：</div>
|
||
<div style="width: 150px">2024-09-01 12:00:00至2024-09-01 12:00:00</div>
|
||
</div>
|
||
<div style="text-align: center;margin: 15px auto ">
|
||
<img src="./imgs/ewm.png" style="width: 200px;height: 200px">
|
||
<div>请顾客使用微信扫码领取</div>
|
||
</div>
|
||
<div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 5px">使用规则</div>
|
||
<div>优惠说明：价值10元代金券一张消费满100可用</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="新增会员"
|
||
:visible.sync="newMember"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div>请顾客扫码领取会员卡</div>
|
||
<img id="collection" class="qrcode" :src="baseUrl + collectionImg"/><br/>
|
||
|
||
<div class="red-size">微信扫一扫</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="handleDownloadqrCode('collection')">下载二维码</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="扫码支付"
|
||
:visible.sync="ScanCodePayment"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div class="title_">收款： <span style="color: #F44522">¥0.00</span></div>
|
||
<img src="./imgs/smzf.png" style="width: 171px;height: 122px;">
|
||
<div>请顾客出示付款码，或者刷脸支付</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="ScanCodePayment = false">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="现金支付"
|
||
:visible.sync="cashPayment"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div class="title_">应收款： <span style="color: #F44522">¥98.00</span></div>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="收款金额" prop="name">
|
||
<el-input v-model="ruleForm.name">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="t-size">
|
||
应找零：<span style="color: #F44522">¥20.00</span>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="cashPayment = false">确定收款</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="挂单"
|
||
:visible.sync="hangingAnOrder"
|
||
width="542px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="挂单名称" prop="name">
|
||
<el-input v-model="ruleForms.name">
|
||
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="h-size">
|
||
挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、取单
|
||
时，可根据挂单名称取单
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="hangingAnOrder = false">取 消</el-button>
|
||
<el-button type="primary" @click="pendingOrders()">确定挂单</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="支付结果"
|
||
:visible.sync="paymentResults"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
|
||
<div class="hui-box">
|
||
<div class="hui-box-bt">
|
||
<div>支付方式</div>
|
||
<div>现金</div>
|
||
</div>
|
||
<div class="hui-box-bt">
|
||
<div>实付金额</div>
|
||
<div>¥0.00</div>
|
||
</div>
|
||
<div class="hui-box-bt">
|
||
<div>订单金额</div>
|
||
<div>¥10.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="paymentResults = false">关闭（3s)</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="取单"
|
||
:visible.sync="pickUpTheOrder"
|
||
width="910px"
|
||
center
|
||
>
|
||
<!-- 商品挂单 子组件 -->
|
||
<pickUp :pendingOrdersList="pendingOrdersList" @fatherPendingOrdersList="fatherPendingOrdersList"
|
||
@fatherPendingOrdersName="fatherPendingOrdersName"
|
||
></pickUp>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="pickUpTheOrder = false">取消</el-button>
|
||
<!-- pendingOrdersList pickUpTheOrder = false pickUpTheOrder = false -->
|
||
<el-button type="primary" @click="deletePendingOrdersList">作废</el-button>
|
||
<el-button type="primary" @click="getPendingOrdersList">取单</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="挂账"
|
||
:visible.sync="accountPending"
|
||
width="542px"
|
||
center
|
||
>
|
||
<accountPending></accountPending>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="accountPending = false">取 消</el-button>
|
||
<el-button type="primary" @click="accountPending = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="会员充值"
|
||
:visible.sync="memberRecharge"
|
||
width="910px"
|
||
center
|
||
>
|
||
<memberRecharge :userId="chooseVipUser.id" ref="rechargeRef"></memberRecharge>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="memberRecharge = false">取 消</el-button>
|
||
<el-button type="primary" @click="memberRecharge = false">确认充值</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="加油金额"
|
||
:visible.sync="refuelingAmount"
|
||
width="542px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<refuelingAmount :goodsItem="oilGun" ref="refuelingAmount" @fatherMethod="fatherMethod"></refuelingAmount>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="refuelingAmount = false">取 消</el-button>
|
||
<el-button type="primary" @click="sonButton()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from 'qrcode'
|
||
import html2canvas from "html2canvas";
|
||
import pickUp from './newHomeComponents/pickUpTheOrder.vue'
|
||
import accountPending from './newHomeComponents/accountPending.vue'
|
||
import memberRecharge from './newHomeComponents/memberRecharge.vue'
|
||
import refuelingAmount from './newHomeComponents/refuelingAmount.vue'
|
||
import {cashRegisterList, cashRegisterGoodsList} from '@/api/newHome/newHome.js'
|
||
import {QRCodeByStoreId} from "@/api/staff/qrcode";
|
||
import {userListByPhone} from "@/api/cashier/user";
|
||
|
||
import { VueClipboard } from 'vue-clipboard2';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 门店二维码
|
||
collectionImg: '',
|
||
baseUrl: process.env.VUE_APP_BASE_API,
|
||
//
|
||
value: '',
|
||
userMobile:null,
|
||
//商品子组件选中时 容器
|
||
sonGoodsList: [],
|
||
//油枪 父传子
|
||
oilGun: '',
|
||
//油枪结算 容器
|
||
oilGunClearing: '',
|
||
//商品列表
|
||
goodsList: [],
|
||
restaurants: [],
|
||
state: '',
|
||
//挂单数据容器
|
||
pendingOrdersList: [],
|
||
timeout: null,
|
||
boxShow: true,
|
||
boxShow1: true,
|
||
boxShow2: true,
|
||
checkList: [],
|
||
checkAll: true,
|
||
checkAll1: false,
|
||
checkAll2: false,
|
||
checkAll3: false,
|
||
isIndeterminate: true,
|
||
freeTicket:false,
|
||
freeIndex:0,
|
||
freeTicketList:[
|
||
{
|
||
name: '油品券',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '储值卡券',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '会员卡券',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '油品券',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '储值卡券',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '会员卡券',
|
||
num: '0'
|
||
},
|
||
],
|
||
cardList: [
|
||
{
|
||
name: '储值卡',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '支付宝',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '微信',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '银联二维码',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '现金',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '小程序码',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '挂账',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '囤油卡',
|
||
num: '0'
|
||
}
|
||
],
|
||
//油枪数据 初始化容器
|
||
tabList: {
|
||
'01': [],
|
||
'02': [],
|
||
'03': [],
|
||
'04': []
|
||
},
|
||
//油枪列表数据
|
||
dataList: {},
|
||
userInfo: false,//判断登录状态
|
||
ruleIndex: 0,
|
||
tabIndex: 0,
|
||
newMember: false,
|
||
ScanCodePayment: false,
|
||
cashPayment: false,
|
||
ruleForm: {
|
||
name: ''
|
||
},
|
||
ruleForms: {
|
||
name: ''
|
||
},
|
||
rules: {
|
||
name: [
|
||
{ required: true, message: '请输入挂单名称', trigger: 'blur' }
|
||
]
|
||
},
|
||
refuelingAmount: false,
|
||
hangingAnOrder: false,
|
||
paymentResults: false,
|
||
pickUpTheOrder: false,
|
||
accountPending: false,
|
||
memberRecharge: false,
|
||
//会员搜索列表
|
||
vipUserList:[],
|
||
chooseVipUser:{}
|
||
|
||
}
|
||
},
|
||
watch: {
|
||
//监听子弹窗成功 提交了 然后再隐藏子元素标签
|
||
oilGunClearing: {
|
||
immediate: true,
|
||
deep: true,
|
||
handler(newValue, oldValue) {
|
||
this.refuelingAmount = false
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
pickUp,
|
||
accountPending,
|
||
memberRecharge,
|
||
refuelingAmount
|
||
},
|
||
created() {
|
||
//初始化 油枪 商品
|
||
this.getOilList()
|
||
this.getGoodsList()
|
||
this.getQRCodeInfoByStoreId(0);
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
computed: {
|
||
getGoodsItem() {
|
||
if (this.oilGunClearing.amount && this.oilGunClearing.amount !== undefined) {
|
||
// 保留两位小数
|
||
let l = this.oilGunClearing.amount / this.oilGunClearing.oilPrice
|
||
// 8号枪（21.03L/191.7936元）
|
||
return `${this.oilGunClearing.gunName}（${l.toFixed(2)}L/${this.oilGunClearing.amount}元）`
|
||
|
||
} else {
|
||
return ''
|
||
}
|
||
|
||
},
|
||
//总金额
|
||
getGoodsNum() {
|
||
let total = 0
|
||
this.goodsList.forEach(item => {
|
||
total += item.retailPrice * item.num
|
||
})
|
||
return total
|
||
},
|
||
|
||
//总数量
|
||
getGoodsListNum() {
|
||
let total = 0
|
||
this.goodsList.forEach(item => {
|
||
total += item.num
|
||
})
|
||
return total
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
copyToClipboard(textToCopy) {
|
||
|
||
VueClipboard(textToCopy).then(() => {
|
||
this.$message.success("复制成功")
|
||
// 复制成功的操作
|
||
}, () => {
|
||
console.log('复制失败');
|
||
// 复制失败的操作
|
||
});
|
||
},
|
||
restVipUser(){
|
||
this.userInfo = false
|
||
this.chooseVipUser = {}
|
||
},
|
||
chooseUser(data){
|
||
if (data){
|
||
//选择会员
|
||
this.userInfo = true
|
||
this.chooseVipUser = data
|
||
console.log(this.chooseVipUser,598)
|
||
}
|
||
|
||
},
|
||
// 根据手机号查询会员信息
|
||
getUser(queryString, cb){
|
||
userListByPhone({mobile:queryString}).then( response => {
|
||
if (response.data){
|
||
cb(response.data)
|
||
console.log(response.data,608)
|
||
}else {
|
||
this.$modal.msgError("会员信息不存在")
|
||
}
|
||
})
|
||
},
|
||
// 获取二维码信息
|
||
getQRCodeInfoByStoreId(type) {
|
||
QRCodeByStoreId({type: type}).then(response => {
|
||
this.collectionImg = response.data;
|
||
})
|
||
},
|
||
// 根据字符串获取二维码图片url地址
|
||
getQRcode() {
|
||
let opts = {
|
||
errorCorrectionLevel: "L",//容错级别
|
||
type: "image/png",//生成的二维码类型
|
||
quality: 0.3,//二维码质量
|
||
margin: 0,//二维码留白边距
|
||
width: 180,//宽
|
||
height: 180,//高
|
||
text: "http://www.xxx.com",//二维码内容
|
||
color: {
|
||
dark: "#666666",//前景色
|
||
light: "#fff"//背景色
|
||
}
|
||
};
|
||
if (this.qrcode.length > 0) {
|
||
//this.QRlink 生成的二维码地址url
|
||
QRCode.toDataURL(this.qrcode[0].collection, opts, (err, url) => {
|
||
if (err) throw err
|
||
//将生成的二维码路径复制给data的QRImgUrl
|
||
this.collectionImg = url
|
||
})
|
||
QRCode.toDataURL(this.qrcode[0].payment, opts, (err, url) => {
|
||
if (err) throw err
|
||
//将生成的二维码路径复制给data的QRImgUrl
|
||
this.paymentImg = url
|
||
})
|
||
}
|
||
},
|
||
// 根据dom生成图片并下载到本地
|
||
handleDownloadqrCode(id) {
|
||
html2canvas(document.getElementById(id)).then((canvas) => {
|
||
let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
|
||
let a = document.createElement('a')
|
||
a.href = imgUrl;
|
||
if (id == 'collection') {
|
||
a.download = "门店二维码"; //文件名
|
||
} else {
|
||
a.download = "收款二维码"; //文件名
|
||
}
|
||
document.body.appendChild(a);
|
||
a.click(); // 触发点击
|
||
document.body.removeChild(a); // 然后移除
|
||
});
|
||
},
|
||
|
||
//油枪初始化
|
||
getOilList() {
|
||
cashRegisterList().then(res => {
|
||
|
||
this.tabList = res.data
|
||
//加上全部选项
|
||
this.tabList = {
|
||
'全部': 'all',
|
||
...this.tabList
|
||
}
|
||
|
||
for (const key in this.tabList) {
|
||
// 循环为 不同油号 赋值不同图片样式
|
||
if (key == '0#') {
|
||
this.tabList[key].forEach(item => {
|
||
item.img = './imgs/0oil.png'
|
||
item.classStyle = 'card0'
|
||
})
|
||
|
||
}
|
||
if (key == '98#') {
|
||
this.tabList[key].forEach(item => {
|
||
item.img = './imgs/98oil.png'
|
||
item.classStyle = 'card98'
|
||
})
|
||
|
||
}
|
||
if (key == '95#') {
|
||
this.tabList[key].forEach(item => {
|
||
item.img = './imgs/95oil.png'
|
||
item.classStyle = 'card95'
|
||
})
|
||
}
|
||
if (key == '92#') {
|
||
this.tabList[key].forEach(item => {
|
||
item.img = './imgs/92oil.png'
|
||
item.classStyle = 'card92'
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
// 调用一下油枪数据列表 初始化
|
||
this.setTabindex('全部', 0)
|
||
|
||
})
|
||
},
|
||
|
||
//商品初始化
|
||
async getGoodsList() {
|
||
const res = await cashRegisterGoodsList()
|
||
this.restaurants = res.data
|
||
|
||
},
|
||
|
||
invokePickUpTheOrder() {
|
||
//获取存储数据
|
||
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
|
||
|
||
this.pickUpTheOrder = true
|
||
},
|
||
//确定挂单
|
||
pendingOrders() {
|
||
this.$refs['ruleForm'].validate((valid) => {
|
||
if (valid) {
|
||
// 1.先取出之前的转 json 然后追加 将 JSON 字符串解析回对象
|
||
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
|
||
// 2.商品列表没有数据不允许添加
|
||
if (!this.goodsList.length) {
|
||
this.$message.error('商品列表为空，请添加商品')
|
||
return
|
||
}
|
||
// 3.如果名称重复则不允许添加
|
||
let bo1 = true
|
||
|
||
this.pendingOrdersList.forEach(item => {
|
||
if (item.name == this.ruleForms.name) {
|
||
this.$message.error('名称重复，请重新输入')
|
||
bo1 = false
|
||
return
|
||
}
|
||
})
|
||
// 4.追加数据
|
||
if (bo1) {
|
||
this.pendingOrdersList.push(
|
||
{
|
||
name: this.ruleForms.name,
|
||
list: this.goodsList
|
||
}
|
||
)
|
||
|
||
// 将当前 商品订单表 放入 sessionStorage
|
||
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
|
||
|
||
// 清空当前商品
|
||
this.goodsList = []
|
||
|
||
//重置表单 关闭弹窗
|
||
this.ruleForms = {
|
||
name: ''
|
||
}
|
||
this.hangingAnOrder = false
|
||
|
||
this.$message({
|
||
message: '挂单成功',
|
||
type: 'success'
|
||
});
|
||
}
|
||
|
||
} else {
|
||
console.log('error submit!!')
|
||
return false
|
||
}
|
||
})
|
||
|
||
},
|
||
//挂单
|
||
invokeHangingAnOrder() {
|
||
this.hangingAnOrder = true
|
||
//必须 输入 挂单名称 将数据临时存储在 sessionStorage 刷新自动取消
|
||
},
|
||
addVip() {
|
||
this.newMember = true
|
||
},
|
||
setFreeIndex(index){
|
||
this.freeIndex = index
|
||
},
|
||
addFreeTicket(){
|
||
this.freeTicket = true
|
||
},
|
||
addMemberRecharge() {
|
||
this.memberRecharge = true
|
||
this.$nextTick(res=>{
|
||
this.$refs.rechargeRef.getCardValueList();
|
||
})
|
||
|
||
},
|
||
changeBox() {
|
||
this.boxShow = !this.boxShow
|
||
},
|
||
changeBox1() {
|
||
this.boxShow1 = !this.boxShow1
|
||
},
|
||
changeBox2() {
|
||
this.boxShow2 = !this.boxShow2
|
||
},
|
||
setTabindex(key, index) {
|
||
//列表选中样式
|
||
this.tabIndex = index
|
||
|
||
if (key == '全部') {
|
||
this.dataList = []
|
||
for (const tabKey in this.tabList) {
|
||
this.dataList = this.dataList.concat(this.tabList[tabKey])
|
||
}
|
||
//因为 页面展示多加了一个 全部 要删掉第一个元素
|
||
this.dataList.shift()
|
||
|
||
} else {
|
||
for (const tabKey in this.tabList) {
|
||
if (key == tabKey) {
|
||
this.dataList = this.tabList[tabKey]
|
||
}
|
||
}
|
||
}
|
||
|
||
},
|
||
setindex(index) {
|
||
this.ruleIndex = index
|
||
},
|
||
setRefuelingAmount(item) {
|
||
this.refuelingAmount = true
|
||
//赋值 传给子组件的油枪对象
|
||
this.oilGun = item
|
||
|
||
},
|
||
loadAll() {
|
||
return [
|
||
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
|
||
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
|
||
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
||
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
|
||
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
|
||
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
|
||
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
|
||
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
|
||
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
|
||
{ 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
|
||
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
|
||
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
|
||
{ 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
|
||
{ 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
|
||
{ 'value': 'NONO JUICE 鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
|
||
{ 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
|
||
{ 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
|
||
{ 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
|
||
{ 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
|
||
{ 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
|
||
{ 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
|
||
{ 'value': '钱记', 'address': '上海市长宁区天山西路' },
|
||
{ 'value': '壹杯加', 'address': '上海市长宁区通协路' },
|
||
{ 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
|
||
{ 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
|
||
{ 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
|
||
{ 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
|
||
{ 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
|
||
{ 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
|
||
{ 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
|
||
{ 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
|
||
{ 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
|
||
{ 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
|
||
{ 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
|
||
{ 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
|
||
{ 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
|
||
{ 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
|
||
{ 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
|
||
{ 'value': '浏阳蒸菜', 'address': '天山西路430号' },
|
||
{ 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
|
||
{ 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
|
||
{ 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
|
||
{ 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
|
||
{ 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
|
||
{ 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
|
||
{ 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
|
||
{ 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
|
||
{ 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
|
||
]
|
||
},
|
||
//必须是异步方法
|
||
querySearchAsync(queryString, cb) {
|
||
const restaurants = this.restaurants
|
||
let results
|
||
|
||
if (queryString) {
|
||
results = restaurants.filter(this.createFilter(queryString))
|
||
} else {
|
||
results = restaurants
|
||
}
|
||
cb(results)
|
||
},
|
||
createFilter(queryString) {
|
||
return (restaurant) => {
|
||
return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
||
}
|
||
},
|
||
|
||
//取单 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
|
||
getPendingOrdersList() {
|
||
//并且删除 父传子数据容器 以及 重新存储sessionStorage
|
||
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
|
||
if (this.pendingOrdersList.length) {
|
||
|
||
let found = false
|
||
this.pendingOrdersList = this.pendingOrdersList.filter(item => {
|
||
if (item.name === this.value) {
|
||
if (!found) {
|
||
this.goodsList = item.list
|
||
found = true
|
||
}
|
||
return false // 不保留匹配的项
|
||
}
|
||
return true // 保留不匹配的项
|
||
})
|
||
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
|
||
|
||
this.pickUpTheOrder = false
|
||
|
||
this.$message({
|
||
message: '取单成功',
|
||
type: 'success'
|
||
});
|
||
|
||
} else {
|
||
this.$message.error('当前无存单 请存单后再取单')
|
||
}
|
||
},
|
||
//作废 下拉框是子组件 子组件通过数据监听 将数据发送给父组件
|
||
deletePendingOrdersList() {
|
||
//并且删除 父传子数据容器 以及 重新存储sessionStorage
|
||
this.pendingOrdersList = JSON.parse(window.sessionStorage.getItem('pendingOrders')) || []
|
||
if (this.pendingOrdersList.length) {
|
||
|
||
this.pendingOrdersList = this.pendingOrdersList.filter(item => {
|
||
return item.name !== this.value
|
||
})
|
||
|
||
window.sessionStorage.setItem('pendingOrders', JSON.stringify(this.pendingOrdersList))
|
||
this.$message({
|
||
message: '作废成功',
|
||
type: 'success'
|
||
});
|
||
} else {
|
||
this.$message.error('当前无存单 请存单后再作废')
|
||
}
|
||
|
||
},
|
||
// 接受子组件列表数据变化
|
||
fatherPendingOrdersList(list) {
|
||
this.sonGoodsList = list
|
||
},
|
||
// 接受子组件下拉选中名字变化
|
||
fatherPendingOrdersName(value) {
|
||
this.value = value
|
||
},
|
||
//删除商品
|
||
deleteGoods(id) {
|
||
//根据id删除数组元素
|
||
this.goodsList = this.goodsList.filter(item => item.id != id)
|
||
|
||
},
|
||
// 子组件提交调用父组件方法
|
||
fatherMethod(list) {
|
||
//将当前选中油枪 放入 油枪订单容器 (需要被数据监听)
|
||
this.oilGunClearing = { amount: list, ...this.oilGun }
|
||
|
||
},
|
||
//获取子组件数据
|
||
sonButton() {
|
||
//调用子组件方法
|
||
this.$refs.refuelingAmount.submitForm('ruleForm')
|
||
|
||
},
|
||
handleSelect(row) {
|
||
let bo1 = true
|
||
// 如果 item 存在 goodsList 则 属性+1 不存在直接添加到数组
|
||
// 使用 map 生成新数组 防止vue监听不到数组内数据变化
|
||
this.goodsList = this.goodsList.map(
|
||
item => {
|
||
if (item.id == row.id) {
|
||
bo1 = false
|
||
return { ...item, num: item.num + 1 }
|
||
|
||
} else {
|
||
return item
|
||
}
|
||
|
||
}
|
||
)
|
||
|
||
if (bo1) {
|
||
//如果没有先添加数量属性 默认1
|
||
row.num = 1
|
||
this.goodsList.push(row)
|
||
}
|
||
|
||
},
|
||
|
||
// 油枪重置
|
||
oilGunReset() {
|
||
this.oilGunClearing = {}
|
||
},
|
||
// 收银重置
|
||
goodsReset() {
|
||
this.goodsList = []
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
input {
|
||
width: 100%;
|
||
border: none;
|
||
outline: none;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
margin: 0;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
.new-contoner {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 100vh;
|
||
padding: 20px 0px;
|
||
padding-right: 20px;
|
||
padding-bottom: 0px;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.left-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cont-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
margin: 0px 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.right-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box-top {
|
||
height: 84vh;
|
||
background: #fff;
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
|
||
.box-bottom {
|
||
height: 12vh;
|
||
background: #fff;
|
||
z-index: 9;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between
|
||
}
|
||
|
||
.o-top {
|
||
width: 100%;
|
||
height: 80px;
|
||
background: #FF9655;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.an_bor {
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
border: 1px solid #fff;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
justify-content: center;
|
||
margin: 0px 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.t-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 20px 0px;
|
||
border-bottom: #F4F5F9 1px solid;
|
||
}
|
||
|
||
.three_box {
|
||
width: 33%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
}
|
||
|
||
.d-b {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px 0px;
|
||
}
|
||
|
||
.x-d-b {
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px 0px;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.d-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0px 40px;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
border-bottom: #f6f8f9 4px solid;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1px solid #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.d_text {
|
||
color: #555555;
|
||
margin-left: 10px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.or_num {
|
||
color: #FF9655;
|
||
}
|
||
|
||
.active {
|
||
background: #FF9655 !important;
|
||
color: #FFFFFF !important;
|
||
border: 1px solid #FF9655;
|
||
}
|
||
|
||
.three-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-bottom: #f6f8f9 4px solid;
|
||
}
|
||
|
||
.addbor {
|
||
border-bottom: 1px solid #f6f8f9;
|
||
padding: 15px 40px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.er-box {
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.wrap-box {
|
||
height: 190px;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
|
||
.f-box {
|
||
width: 31%;
|
||
height: 44px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
margin-right: 2%;
|
||
margin-bottom: 2%;
|
||
border-radius: 10px;
|
||
border: 1px solid #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.f-acvite {
|
||
background: #409eff !important;
|
||
color: #fff !important;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.anniu {
|
||
width: 160px;
|
||
height: 60px;
|
||
background: linear-gradient(312deg, #FF945B 0%, #FEB37C 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.price_ {
|
||
font-size: 24px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price_prefer {
|
||
font-size: 16px;
|
||
color: #FF4347;
|
||
}
|
||
|
||
.cont-tab {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
padding: 0px 20px;
|
||
padding-top: 25px;
|
||
}
|
||
|
||
.r-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
padding: 0px 20px;
|
||
padding-top: 15px;
|
||
padding-bottom: 10px;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
}
|
||
|
||
.input-box {
|
||
width: 90%;
|
||
height: 40px;
|
||
background: #FAFAFA;
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.gang {
|
||
width: 24px;
|
||
height: 3px;
|
||
//background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%);
|
||
border-radius: 3px 3px 3px 3px;
|
||
}
|
||
|
||
.active_gang {
|
||
background: linear-gradient(90deg, #FF8646 0%, #FFA360 100%) !important;
|
||
}
|
||
|
||
.tab-box {
|
||
margin-right: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active_name {
|
||
font-size: 14px;
|
||
color: #555555;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-kuang {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-content: flex-start;
|
||
flex-wrap: wrap;
|
||
overflow: auto;
|
||
height: 68vh;
|
||
|
||
}
|
||
|
||
.card92 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(255, 150, 85, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #FF9655;
|
||
color: #FF9655;
|
||
font-size: 12px;
|
||
color: #FF9655;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card0 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(255, 181, 25, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #FFB519;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: #FFB519;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
}
|
||
|
||
.card98 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(64, 158, 255, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #409EFF;
|
||
font-size: 12px;
|
||
color: #409EFF;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card95 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(13, 194, 145, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #0DC291;
|
||
font-size: 12px;
|
||
color: #0DC291;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 24px;
|
||
color: #555555;
|
||
margin: 6px auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.c-b-d {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.c-bottom {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
border-bottom: 2px solid #F4F5F9;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
|
||
}
|
||
|
||
.bottom-b-d {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
font-size: 16px;
|
||
color: #777777;
|
||
}
|
||
|
||
.anniu-c {
|
||
width: 80px;
|
||
height: 36px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #777777;
|
||
}
|
||
|
||
.anniu-lv {
|
||
width: 80px;
|
||
height: 36px;
|
||
background: linear-gradient(312deg, #9CDCA0 0%, #5BC557 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.anniu-lan {
|
||
cursor: pointer;
|
||
width: 80px;
|
||
height: 36px;
|
||
background: linear-gradient(312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
margin: 0px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.taber-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 5px 20px;
|
||
background: #f4f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.taber-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid #f4f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.goods_name {
|
||
width: 35%;
|
||
|
||
|
||
}
|
||
|
||
.stock_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.u-price_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
}
|
||
|
||
.num_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
}
|
||
|
||
.orerate_name {
|
||
width: 20%;
|
||
text-align: center;
|
||
}
|
||
|
||
.tc-box {
|
||
text-align: center;
|
||
}
|
||
.ds-tc{
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
.left_tc{
|
||
width: 500px;
|
||
|
||
}
|
||
.right_tc{
|
||
width: 300px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
|
||
}
|
||
.t-tc{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.red-size {
|
||
font-size: 18px;
|
||
color: #F44522;
|
||
}
|
||
|
||
.title_ {
|
||
font-size: 28px;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.r-size {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.t-size {
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.h-size {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-left: 100px;
|
||
text-align: left;
|
||
}
|
||
|
||
.hui-box {
|
||
width: 282px;
|
||
|
||
background: #FAFAFA;
|
||
margin: 15px auto;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.hui-box-bt {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.left_input {
|
||
width: 70%;
|
||
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px 5px;
|
||
border-radius: 8px;
|
||
color: white;
|
||
|
||
::v-deep.el-input__inner {
|
||
background: transparent !important;
|
||
border: white 1px solid;
|
||
.el-input__placeholder{
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
::v-deep input:-moz-placeholder,
|
||
::v-deep textarea:-moz-placeholder {
|
||
color: #fff;
|
||
}
|
||
::v-deep input:-ms-input-placeholder,
|
||
::v-deep textarea:-ms-input-placeholder {
|
||
color: #fff;
|
||
}
|
||
::v-deep input::-webkit-input-placeholder,
|
||
::v-deep textarea::-webkit-input-placeholder {
|
||
color: #fff ;
|
||
}
|
||
}
|
||
.wrap-tc{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 15px;
|
||
}
|
||
.tc_wa{
|
||
width: 32%;
|
||
margin-bottom: 4%;
|
||
margin-right: 1%;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
background: url("./imgs/dx.png") no-repeat;
|
||
height: 65px;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.tc-active{
|
||
background: url("./imgs/zxz.png") no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
color: #fff !important;
|
||
}
|
||
.qrcode {
|
||
width: 350px;
|
||
margin-top: 0px;
|
||
}
|
||
</style>
|