<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: 32px;height: 32px;margin-right: 10px">
<div >
<div style="font-weight: bold;margin-bottom: 2px">{{chooseVipUser.name||'匿名'}}</div>
<div class="d-s">
<span>{{chooseVipUser.mobile}}</span>
<sapn style="margin: 0px 5px">普通会员</sapn>
<el-popover
placement="bottom"
trigger="hover">
<div> 储值卡：￥1000.00 </div>
<div> 储值卡：￥1000.00 </div>
<div> 储值卡：￥1000.00 </div>
<div> 储值卡：￥1000.00 </div>
<div> 储值卡：￥1000.00 </div>
<img slot="reference" src="./imgs/kbao.png" style="width: 24px;height: 24px;margin-right: 10px">
</el-popover>
</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%; "
:fetch-suggestions="getUser"
placeholder="请输入会员手机号"
>
<template slot-scope="{ item }">
<div class="name" @click="chooseUser(item)">{{ item.name+" "+item.mobile }}</div>
</template>
</el-autocomplete>
<i class="el-icon-search" style="font-size: 18px;margin-right: 10px" ></i>
</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">油品:￥{{ oilGunClearing.amount || 0.00 }}</div>
<div style="color: #F4F5F9">|</div>
<div class="three_box">商品:￥{{ getGoodsNum }}</div>
<div style="color: #F4F5F9">|</div>
<div class="three_box">合计:￥{{ orderAmount }}</div>
</div>
<div class="d-top">
<div class="d-b">
<el-checkbox v-model="showAct">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
<div class="or_num"></div>
</div>
<!-- 下拉列表插入-->
<div v-if="showAct == true">
<div v-if="activityList.length>0">
<el-radio-group style="width: 100%" v-model="chooseActId" @change="handleChangeAct">
<div class="x-d-b" v-for="(item,index) in activityList">
<el-radio :label="item.id">{{null==item.ruleName?item.actName:item.ruleName}}<div class="or_num">-￥{{item.disAmount}}</div></el-radio>
</div>
</el-radio-group>
</div>
<div v-if="activityList.length==0">
暂无可用优惠活动
</div>
</div>
<div class="d-b">
<el-checkbox v-model="showCoupon">优惠券 <i class="el-icon-arrow-down"></i></el-checkbox>
<div class="or_num"></div>
</div>
<!-- 下拉列表插入-->
<div v-if="showCoupon == true">
<div v-if="couponList.length>0">
<el-radio-group style="width: 100%" v-model="chooseCouponId" @change="handleChangeCoupon">
<div class="x-d-b" v-for="(item,index) in couponList">
<el-radio :label="item.id">{{item.name}}<div class="or_num">-￥{{item.disAmount}}</div></el-radio>
</div>
</el-radio-group>
</div>
<div v-if="couponList.length==0">
暂无可用优惠券
</div>
</div>
</div>
<div class="er-box"></div>
<div class="wrap-box" style="position: absolute;bottom: 0;">
<div class="f-box" v-for="(item,index) in payList" :class="{'f-acvite' : item.dictValue == payWay }"
@click="setindex(item.dictValue)" :key="item.dictValue"
>{{ item.dictLabel }}
</div>
<div style="width: 31%"></div>
</div>
</div>
<div class="box-bottom">
<div>
<div class="price_">￥{{realAmount}}</div>
<div class="price_prefer">优惠合计:￥{{disTotal}}</div>
</div>
<div class="anniu" @click="settlement()">立即结算</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;justify-content: space-between ">
<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 style=" position: absolute;bottom: 0px; width: 100%;">
<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>
<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="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="u-price_name">{{ item.retailPrice }}</div>
<div class="num_name"> <el-input-number v-model="goodsList[index].num" @change="handleCilone" :max="9999" size="mini" ></el-input-number></div>
<div class="orerate_name">
<span style="color: red;cursor: pointer" @click="deleteGoods(item.id)">删除</span>
</div>
</div>
<div style=" position: absolute;bottom: 0px; width: 100%;">
<div class="bottom-b-d">
<div>商品总数 <span style="color: #FF9655">{{ getGoodsListNum }}件</span></div>
<div>商品总金额 <span style="color: #FF9655">￥{{ getGoodsNum }}</span></div>
</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" style="margin-top: -20px">
<div class="left_tc">
<div class="t-tc">
<div style="font-size: 18px;font-weight: bold">所有卡券</div>
</div>
<div class="wrap-tc">
<div class="tc_wa" :class="{'tc-active' : item.id == sendCoupon.id }" @click="setFreeIndex(item)" v-for="(item,index) in sendCouponList">
{{ 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">
{{sendCoupon.name}}
</div>
<div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 10px">{{sendCoupon.type}}</div>
<div style="display: flex">
<div style="width: 70px">日期规则：</div>
<div style="width: 150px"> {{sendCoupon.dateText}}</div>
</div>
<div style="font-weight: 600;font-size: 16px;color: #333333;margin-bottom: 5px">使用规则</div>
<div>{{sendCoupon.ruleText}}</div>
<div style="margin-top: 20px;text-align: end">
</div>
</div>
</div>
<div style="display: flex;justify-content: center">
<el-button type="primary" @click="sendCouponClick()" >确定赠送</el-button>
</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="rechargeConfirm()">确认充值</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>
<!-- 确认充值-->
<el-dialog :close-on-click-modal="false" title="确认充值" :visible.sync="openConfirm" width="500px" append-to-body>
<div v-if="isPay"
v-loading="loading">
<div style="text-align: center;font-size: 15px;font-weight: bold">付款金额</div>
<div style="text-align: center;font-size: 30px;font-weight: bold;color: red;margin: 10px 0">
￥{{ payForm.realyPayBills }}
</div>
<!-- <div style="text-align: center;margin-bottom: 10px">赠送金额</div> -->
<div v-if="payForm.paymentType !== 'CASH' ">
<div>
<el-input v-model="payForm.authCode"
v-focus ref="getFocus"
autofocus
@keydown.enter.native="collection1"
placeholder="扫描或输入付款码、支持微信、支付宝、云闪付">
<i
slot="suffix">
<svg t="1697791915471" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1479" width="32" height="32">
<path
d="M149.333333 170.858667A21.546667 21.546667 0 0 1 170.858667 149.333333H384V106.666667H170.858667A64.213333 64.213333 0 0 0 106.666667 170.858667V384h42.666666V170.858667zM170.858667 874.666667A21.546667 21.546667 0 0 1 149.333333 853.141333V640H106.666667v213.141333A64.213333 64.213333 0 0 0 170.858667 917.333333H384v-42.666666H170.858667zM853.12 149.333333A21.546667 21.546667 0 0 1 874.666667 170.858667V384h42.666666V170.858667A64.213333 64.213333 0 0 0 853.141333 106.666667H640v42.666666h213.141333zM874.666667 853.141333A21.546667 21.546667 0 0 1 853.141333 874.666667H640v42.666666h213.141333A64.213333 64.213333 0 0 0 917.333333 853.141333V640h-42.666666v213.141333zM106.666667 490.666667h810.666666v42.666666H106.666667v-42.666666z"
fill="#3D3D3D" p-id="1480"></path>
</svg>
</i>
</el-input>
</div>
<div class="demo-image">
<div class="block" style="text-align: center">
<el-image
style="width: 200px; height: 200px"
fit="cover"
src="https://oil.wudb.cn/static/img/scan-demo.fcb8b1ab.png"></el-image>
</div>
</div>
</div>
<div v-else>
<div>
<el-input v-model="payForm.authCode"
v-focus ref="getFocus"
autofocus maxlength="10"
@input="changeSeekZero1"
@keydown.enter.native="collection1"
oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
placeholder="请输入收款金额">
</el-input>
</div>
<div style="text-align: right;margin: 10px 0">
<span>应找零</span>
<span style="color: red;font-size: 18px"> ￥{{ payForm.seekZero }}</span>
</div>
</div>
<el-divider></el-divider>
<div style="display: flex;justify-content: space-around">
<el-button @click="cancelCollection">取消收款</el-button>
<el-button type="primary" @click="collection1">确定收款</el-button>
</div>
</div>
<div v-else>
<div v-if="isPaySuccess">
<el-result icon="success" title="收款成功">
<template slot="extra">
<el-button type="primary" @click="handClose1">关 闭</el-button>
</template>
</el-result>
</div>
<div v-else-if="isAwait">
<el-result icon="warning" title="支付等待超时，请前往订单列表查看是否支付成功！">
<template slot="extra">
<el-button type="primary" @click="handClose1">关 闭</el-button>
</template>
</el-result>
</div>
<div v-else>
<el-result icon="error" title="支付失败，请重新支付">
<template slot="extra">
<el-button type="primary" @click="handClose1">关 闭</el-button>
</template>
</el-result>
</div>
</div>
</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,
getActivityList,
getCouponList,
getCanUseCoupon,
sendCouponFun
} from '@/api/newHome/newHome.js'
import {QRCodeByStoreId} from "@/api/staff/qrcode";
import {userListByPhone} from "@/api/cashier/user";
import { VueClipboard } from 'vue-clipboard2';
import {getDicts} from "@/api/dict/data";
import {
getCheckTheStatusOfYourPaymentApi,
rechargeCard
} from "@/api/cashier/cardSet";
import {getReturnCode} from "@/api/print";
export default {
dicts: ['CardCoupon_type'],
data() {
return {
payForm:{
realyPayBills:0.00,
paymentType:'ALIPAY',
authCode:null,
seekZero:0.00
},
sendCoupon:{},
//可参加的活动
activityList:[],
//可用优惠券
couponList:[],
//选中的活动 actId_ruleId
chooseActId:"",
//选中的优惠券id
chooseCouponId:"",
//选中的活动对象
chooseAct:{},
//选中的优惠券对象
chooseCoupon:{},
//支付方式--默认支付宝
payWay: "ALIPAY",
//订单总金额
orderAmount:0.00,
//加油升数
oilLiter:0.00,
//订单实付金额
realAmount:0.00,
//优惠合计金额
disTotal:0.00,
openConfirm:false,
// 是否支付
isPay:false,
isPaySuccess:false,
isAwait: false,
rechargeBalCard:false,
isQuery:true,
loading:false,
// 门店二维码
collectionImg: '',
baseUrl: process.env.VUE_APP_BASE_API,
//
value: '',
userMobile:null,
//商品子组件选中时 容器
sonGoodsList: [],
//油枪 父传子
oilGun: '',
//油枪结算 容器
oilGunClearing: '',
//商品列表
goodsList: [],
restaurants: [],
state: '',
//挂单数据容器
pendingOrdersList: [],
//是否显示可用优惠活动
showAct: true,
//是否显示可用优惠券
showCoupon: true,
freeTicket:false,
freeIndex:0,
nums:0,
payList: [
],
//油枪数据 初始化容器
tabList: {
'01': [],
'02': [],
'03': [],
'04': []
},
//油枪列表数据
dataList: {},
userInfo: false,//判断登录状态
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:{},
couponTypeList:[],
cardValueForm:{
cardValueId: '', // 储值卡id
mtStaffId: '', //
realName: '',
staffMobile: '',
amount: '', // 自定义充值字段
bidBalance: '', // 储值卡面值
rechargeBalance: '', // 实际支付
giftBalance: '',// 赠送金额
points: '', //赠送积分
growthValue: '', // 赠送成长值
remark: '',
paymentType: 'WECHAT', // 支付方式
royaltyType: '',// 提成类型
percentageCommissions: null,
amountCommission: null,
rechargeType: '0'
},
selectCard:{},
flag:1,
jishuqi:0,
continuePolling: true, // 控制轮询的变量
sendCouponList:[]
}
},
watch: {
//监听选择的活动
chooseActId: {
handler(newVal) {
console.log("选择的活动发生变化", newVal);
//计算优惠金额
this.getDisTotal()
},
deep: true,
immediate: true,
},
//监听选择的优惠券
chooseCouponId: {
handler(newVal) {
console.log("选择的优惠券发生变化", newVal);
//计算优惠金额
this.getDisTotal()
},
deep: true,
immediate: true,
},
//监听订单总金额
orderAmount: {
handler(newVal) {
console.log("订单总金额发生变化", newVal);
//计算实付金额
this.realAmount = (this.orderAmount - this.disTotal).toFixed(2)
},
deep: true,
immediate: true,
},
//监听优惠总金额
disTotal:{
handler(newVal) {
console.log("优惠总金额发生变化", newVal);
//计算实付金额
this.realAmount = (this.orderAmount - this.disTotal).toFixed(2)
},
deep: true,
immediate: true,
},
//监听子弹窗成功 提交了 然后再隐藏子元素标签
oilGunClearing: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
console.log('油枪发生变化', newValue);
if(newValue && newValue.hasOwnProperty("oilNameId")){
this.orderAmount = (Number(newValue.amount)+Number(this.getGoodsNum)).toFixed(2)
}else{
this.orderAmount = this.getGoodsNum
}
this.refuelingAmount = false
//查询可用优惠活动
this.getActivity()
//查可用优惠券
this.getCoupon()
}
},
//监听商品总金额发生变化
getGoodsNum(newVal, oldVal) {
console.log('商品总金额发生变化', newVal);
// 商品总金额发生变化，重查优惠券
if(this.oilGunClearing!='' && this.oilGunClearing.hasOwnProperty("oilNameId")){
this.orderAmount = (Number(newVal)+Number(this.oilGunClearing.amount)).toFixed(2)
}else {
this.orderAmount = newVal
}
//刷新可用优惠券
this.getCoupon()
}
},
components: {
pickUp,
accountPending,
memberRecharge,
refuelingAmount
},
created() {
//初始化 油枪 商品
this.getOilList()
this.getGoodsList()
this.getQRCodeInfoByStoreId(0);
this.getPayList()
this.getCouponType()
},
computed: {
getGoodsItem() {
if (this.oilGunClearing.amount && this.oilGunClearing.amount !== undefined) {
// 保留两位小数
this.oilLiter = (this.oilGunClearing.amount / this.oilGunClearing.oilPrice).toFixed(2)
// 8号枪（21.03L/191.7936元）
return `${this.oilGunClearing.gunName}（${this.oilLiter}L/${this.oilGunClearing.amount}元）`
} else {
return ''
}
},
//总金额
getGoodsNum() {
let total = 0
this.goodsList.forEach(item => {
total += item.retailPrice * item.num
})
return total.toFixed(2)
},
//总数量
getGoodsListNum() {
let total = 0
this.goodsList.forEach(item => {
total += item.num
})
return total
}
},
methods: {
sendCouponClick(){
//this.sendCoupon this.chooseVipUser.id
this.sendCoupon.mtUserId = this.chooseVipUser.id
this.sendCoupon.fromType = "4"
this.sendCoupon.cardCouponId = this.sendCoupon.id
sendCouponFun(this.sendCoupon).then(
res=>{
this.$message.success("赠送成功")
this.freeTicket = false
}
)
},
handleCilone(value){
console.log(value)
},
/**
* 获取优惠总金额
* */
getDisTotal(){
this.disTotal = 0.00
if(""!=this.chooseCouponId){
this.disTotal += this.chooseCoupon.disAmount
}
if(""!=this.chooseActId){
this.disTotal += this.chooseAct.disAmount
}
this.disTotal = (this.disTotal).toFixed(2)
},
/**
* 监听活动选择切换
* */
handleChangeAct(value){
this.chooseAct = this.activityList.filter(item=>item.id === value)[0]
if(""!=this.chooseCouponId){
//判断已选择的优惠券是否可以与其他活动共用
if("0"==this.chooseCoupon.useWithOther){
//优惠券不能与本活动共用
this.chooseCouponId = ""
this.chooseCoupon = {}
}
}
this.getDisTotal()
console.log("选中的活动",this.chooseAct)
},
/**
* 监听优惠券选择切换
* */
handleChangeCoupon(value){
this.chooseCoupon = this.couponList.filter(item=>item.id === value)[0]
if("0"==this.chooseCoupon.useWithOther){
//本优惠券不能与其他活动一起用
this.chooseAct = {}
this.chooseActId = ""
}
this.getDisTotal()
console.log("选中的优惠券",this.chooseCoupon)
},
// 关闭支付窗口
handClose1() {
this.isPay = true,
this.isPaySuccess = false,
this.isQuery = true
this.openConfirm = false
this.payForm.authCode = null
this.payForm.seekZero = 0
this.iniz()
},
iniz() {
this.cardValueForm = {
cardValueId: '', // 储值卡id
mtStaffId: '', //
realName: '',
staffMobile: '',
amount: '', // 自定义充值字段
bidBalance: '', // 储值卡面值
rechargeBalance: '', // 实际支付
giftBalance: '',// 赠送金额
points: '', //赠送积分
growthValue: '', // 赠送成长值
remark: '',
paymentType: 'WECHAT', // 支付方式
royaltyType: '',// 提成类型
percentageCommissions: null,
amountCommission: null,
rechargeType: '0'
}
},
async collection1() {
let makeChange = 0
if (!this.payForm.authCode && this.payForm.paymentType !== "CASH") {
this.$message.error('请先扫码');
return
}
// 会员id 会员名字会员手机号码
if (this.chooseVipUser.id){
this.payForm.mtUserId = this.chooseVipUser.id
}
// 现金找零金额
this.payForm.seekZero = makeChange
this.payForm.payChannel = 'cashier'
let id;
await rechargeCard(this.payForm).then(response => {
if (response.data != null) {
this.loading = true;
id = response.data.id
}
});
let this_ = this
//
let timer = setInterval(async () => {
await getCheckTheStatusOfYourPaymentApi(id).then(async response => {
if (response.data != null) {
const payStatus = response.data.payStatus
if (payStatus === "unpaid") {
this_.isQuery = true;
} else if (payStatus === "paid") {
// 当支付成功时
this_.isPaySuccess = true;
this_.isQuery = false;
this_.rechargeBalCard = true
// await this_.printLocally1()
await this_.cardValueReport()
await this_.getMemberAfter();
clearInterval(timer);
} else if (payStatus === "payFail") {
this_.isPaySuccess = false;
this_.isQuery = false;
clearInterval(timer);
}
}
await this_.getMemberAfter();
})
}, 1000);
let timer2 = setInterval(function () {
if (!this_.isQuery || !this_.openConfirm) {
this_.loading = false;
this_.isPay = false;
clearInterval(timer);
clearTimeout(timer3);
}
}, 500)
var timer3 = setTimeout(function () {
clearInterval(timer2);
clearInterval(timer);
this_.loading = false;
this_.isPay = false;
this_.isPaySuccess = false;
this_.isAwait = true;
}, 15000)
this.$forceUpdate();
},
cancelCollection(){
this.openConfirm = false
},
// 获取支付方式
getPayList(){
getDicts("payment_type").then( response => {
this.payList = response.data;
})
},
// 确认充值
async rechargeConfirm() {
let selectCard = this.$refs.rechargeRef.selectCard
if (!selectCard.paymentType) {
this.$message.error('请选择支付方式');
return
}
if (!selectCard.rechargeBalance) {
this.$message.error('请选择输入充值本金');
return
}
this.payForm.rechargeBalance = selectCard.rechargeBalance
this.payForm.realyPayBills = selectCard.rechargeBalance
this.payForm.selectCardId = selectCard.id
this.payForm.cardType = selectCard.cardType
this.payForm.paymentType = selectCard.paymentType
this.payForm.giftBalance = selectCard.giftBalance
this.payForm.points = selectCard.points
this.payForm.growthValue = selectCard.growthValue
this.payForm.chooseStaff = selectCard.chooseStaff
this.payForm.desc = selectCard.desc
this.payForm.giftCardNo = selectCard.giftCardNo
this.payForm.giftCardPwd = selectCard.giftCardPwd
this.payForm.cardCouponList = selectCard.cardCouponList
if (selectCard.cardType == 0){
this.flag = 1
}else if(selectCard.cardType == 1){
this.flag = 2
}
// // 发送扫码机请求（易联云网络下发）
// await this.getSendPrintIndex(this.realyPayBills);
this.memberRecharge = false
this.openConfirm = true;
this.isPay = true
//this.getCode(this.realyPayBills, this.flag)
},
// 立即结算
async settlement(){
this.payForm.realyPayBills = this.realAmount
this.payForm.paymentType = this.payWay
this.flag = 3
this.openConfirm = true;
this.isPay = true
},
// 网络下发之后获取条码
getCode(amount,flag) {
console.log("payType",this.payForm.payType) // 现金不参与
if (this.payForm.payType == "CASH" && flag == 1) {
return
}
// if (this.cardValueForm.paymentType == "CASH" && flag == 1)
// this.jishuqi++;
if (this.jishuqi == 30) {
this.jishuqi = 0
return
}
this.continuePolling = true;
getReturnCode ({payAmount:amount}).then(res=>{
if (res.data === "300" && this.continuePolling) {
setTimeout(() => {
this.getCode(amount); // 重新发起请求
}, 1000); // 停顿一秒
}else {
this.payForm.authCode = res.data
}
})
},
/**
* @description 油枪金额和商品金额发生变化，请求后端查询可用优惠活动
* 传入后台的参数，会员的用户id、加油油号、加油订单金额（不包括商品金额）、加油订单总金额（包括商品金额）、加油总升数
* @author vinjor-m
* @date 2024年9月19日
*/
getActivity(){
this.chooseActId=''
//组装请求参数
if(this.oilGunClearing!='' && this.oilGunClearing.hasOwnProperty("oilNameId") && this.chooseVipUser.hasOwnProperty("id")){
//油枪已结算，且已选择会员
let dataObj = {
userId: this.chooseVipUser.id,
oilId: this.oilGunClearing.oilNameId,
oilPrice:this.oilGunClearing.oilPrice,
oilAmount: this.oilGunClearing.amount,
orderAmount: this.orderAmount,
payWay: this.payWay,
oilLiter: this.oilLiter
}
getActivityList(dataObj).then(res => {
console.log("返回的可参加活动",res)
this.activityList = res.data
})
}else {
//可用活动清空
this.activityList =[]
}
},
/**
* @description 油枪金额和商品金额发生变化，请求后端查询可用优惠券
* 传入后台的参数，会员的用户id、加油油号、加油订单金额（不包括商品金额）、加油订单总金额（包括商品金额）、加油总升数
* @author vinjor-m
* @date 2024年9月19日
*/
getCoupon(){
this.chooseCouponId=''
//组装请求参数
if(this.chooseVipUser.hasOwnProperty("id") && (this.goodsList.length>0 || (this.oilGunClearing!='' && this.oilGunClearing.hasOwnProperty("oilNameId")))){
//已选择会员且（选了商品或者加了油）
let dataObj = {
userId: this.chooseVipUser.id,
payWay: this.payWay
}
if(this.oilGunClearing!='' && this.oilGunClearing.hasOwnProperty("oilNameId")){
//加油油枪有值
dataObj['oilId'] = this.oilGunClearing.oilNameId
dataObj['oilAmount'] = this.oilGunClearing.amount
dataObj['oilLiter'] = this.oilLiter
}
if(this.goodsList.length>0){
let goodsArray = []
for (let i = 0; i < this.goodsList.length; i++) {
let thisGoods = this.goodsList[i]
let goods = {
id: thisGoods.id,
num:thisGoods.num,
price:thisGoods.retailPrice,
amount:thisGoods.retailPrice * thisGoods.num
}
goodsArray.push(goods)
dataObj['goods'] = JSON.stringify(goodsArray)
}
console.log(dataObj)
}
getCouponList(dataObj).then(res => {
console.log("返回的可用的优惠券",res)
this.couponList = res.data
})
}else{
this.couponList=[]
}
},
restVipUser(){
this.userInfo = false
this.chooseVipUser = {}
this.userMobile = ''
this.getActivity()
this.getCoupon()
},
chooseUser(data){
if (data){
//选择会员
this.userInfo = true
this.chooseVipUser = data
//选择会员，查询可用优惠活动和优惠券
this.getActivity()
this.getCoupon()
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(data){
//根据字段处理显示
let dateText="";
if (data.availableOrUn==0){
dateText+="适用时间 "
}else {
dateText+="不适用时间 "
}
if (data.availableType==1){
//每周
dateText+="每周 "
}else {
dateText+="每月 "
}
if (data.availableOrUn==0){
dateText+=data.availableDay +" 可用"
}else {
dateText+=data.availableDay +" 不可用"
}
data.dateText = dateText
let amountRule = "";
if (data.type==1){
amountRule += "消费条件： "
if (data.useType=="1"){
amountRule +="订单金额"
}else {
amountRule +="实收金额"
}
amountRule +="满足金额 "+data.reachAmount
amountRule +="优惠 "+data.reduceAmount
}else if (data.type==2){
amountRule += "兑换内容： "+data.exchangeContent
}else if (data.type==3) {
amountRule = "";
amountRule += "优惠条件： "
if (data.useType == "1") {
amountRule += "订单金额"
} else {
amountRule += "实收金额"
}
amountRule += "金额起 " + data.zkStartAmount
amountRule += "金额止 " + data.zkEndAmount
amountRule += data.zkData * 10 + "折"
}else if (data.type==4) {
amountRule = "";
amountRule += "消费条件： "
if (data.useType == "1") {
amountRule += "订单金额"
} else {
amountRule += "实收金额"
}
amountRule += "金额满 " + data.reachAmount+" 每"+data.ljOilNum +"L,减"+data.ljOilAmount+"元"
}else if (data.type==5) {
amountRule += "消费条件： "
if (data.useType=="1"){
amountRule +="订单金额"
}else {
amountRule +="实收金额"
}
amountRule +="满足金额 "+data.reachAmount
amountRule +="优惠 "+data.reduceAmount
}
data.ruleText = amountRule
console.log(amountRule,dateText,this.couponTypeList)
let tempType=""
for (const item of this.couponTypeList) {
if (item.dictValue==data.type){
tempType = item.dictLabel
}
}
data.type = tempType
this.sendCoupon = data
},
// 获取支付方式
getCouponType(){
getDicts("CardCoupon_type").then( response => {
this.couponTypeList = response.data;
})
},
addFreeTicket(){
getCanUseCoupon().then(res=>{
this.sendCouponList = res.data
})
this.freeTicket = true
},
addMemberRecharge() {
this.memberRecharge = true
this.$nextTick(res=>{
this.$refs.rechargeRef.getCardValueList();
})
},
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]
}
}
}
},
/**
* 设置选中的支付方式
* @param value
*/
setindex(value) {
this.payWay = value
//支付方式发生变化，查询可用优惠券和优惠活动
this.getActivity()
this.getCoupon()
},
setRefuelingAmount(item) {
this.refuelingAmount = true
//赋值 传给子组件的油枪对象
this.oilGun = item
},
//必须是异步方法
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;
box-sizing: border-box;
padding: 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: 86vh;
background: #fff;
margin-bottom: 5px;
position: relative;
}
.box-bottom {
height: 10vh;
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: 95%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 15px 0px;
margin-left: 4%;
}
.d-top {
width: 100%;
box-sizing: border-box;
padding: 0 40px 20px 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 {
display: flex;
position: absolute;
bottom: 0px;
width: 100%;
flex-wrap: wrap;
box-sizing: border-box;
padding: 20px;
justify-content: space-between ;
}
.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-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: 31%;
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: 0 auto;
margin-bottom: 2%;
cursor: pointer;
}
.card0 {
width: 31%;
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: 0 auto;
margin-bottom: 2%;
}
.card98 {
width: 31%;
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: 0 auto;
margin-bottom: 2%;
cursor: pointer;
}
.card95 {
width: 31%;
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: 0 auto;
margin-bottom: 2%;
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 {
width: 100%;
display: flex;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 20px;
font-size: 16px;
color: #777777;
border-top: 2px solid #F4F5F9;
}
.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: 25%;
}
.stock_name {
width: 10%;
text-align: center;
}
.u-price_name {
width: 10%;
text-align: center;
}
.num_name {
width: 30%;
text-align: center;
}
.orerate_name {
width: 15%;
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: 80%;
overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-radius: 8px;
color: white;
border: 1px solid #fff;
::v-deep.el-input__inner {
background: transparent !important;
border: transparent 1px solid;
color: #fff;
.el-input__placeholder{
color: #fff !important;
}
}
::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: 30%;
margin-bottom: 4%;
margin-right: 3%;
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;
}
.el-radio-group label{
width: 100%;
}
.el-radio-group .or_num{
float: right;
}
.el-dialog__body{
padding-top: 0px !important;
}
</style>