oil-station/fuintCashierWeb/src/views/cashier/NewComponents/newHome.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: 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>
                  <span style="margin: 0px 5px">{{ chooseVipUser.gradeName }}</span>
                  <el-popover
                    placement="bottom"
                    trigger="hover"
                  >
                    <div> 储值卡：￥{{ chooseVipUser.cardBalance || 0 }}</div>
                    <div v-if="chooseVipUser.userFuels">
                      <div v-for="(item,index) in chooseVipUser.userFuels" :key="index">
                        囤油卡：{{ item.oilNumberName }} {{ item.fuelAmount }}升
                      </div>
                    </div>
                    <div v-if="chooseVipUser.fleetMember">
                      <div>
                        车队卡：￥{{ chooseVipUser.fleetMember.remainingCreditLimit }}
                      </div>
                    </div>
                    <img slot="reference" src="./imgs/kbao.png" style="width: 24px;height: 24px;margin-right: 10px">

                  </el-popover>
                </div>
              </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" v-loading="loadingPreferential">
          <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 == payType }"
               @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" style="font-size: 14px">油品优惠:￥-{{ parseFloat(disOil).toFixed(2)}}</div>-->
          <!--          <div class="price_prefer" style="font-size: 14px">商品优惠:￥-{{ parseFloat(disGoods).toFixed(2) }}</div>-->
          <div class="price_prefer">优惠合计:￥-{{ parseFloat(disTotal).toFixed(2) }}</div>
        </div>
        <div class="anniu" @click="settlement()" :class="{ disabled: !isClickable}">立即结算</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="zo_box" v-for="(item,index) in dataList">
            <div :class=item.classStyle @click="setRefuelingAmount(item)">
              <div>{{ item.oilType }}&nbsp;{{ 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.tankName }}</div>
              </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.memberPrice }}</div>
          <div class="num_name">
            <el-input-number v-model="goodsList[index].num" @change="handleCilone(goodsList[index])" :max=item.stock
                             size="mini" :min="1"
            >
            </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 :close-on-click-modal="false"
               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 :close-on-click-modal="false"
               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 :close-on-click-modal="false"
               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="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 :close-on-click-modal="false"
               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 :close-on-click-modal="false"
               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 :close-on-click-modal="false"
               title="挂账"
               :visible.sync="accountPending"
               width="542px"
               center
    >
      <accountPending v-if="oilGunClearing.amount>0" :amount="oilGunClearing.amount" @changeAmount="changeAmount"
      ></accountPending>
      <span slot="footer" class="dialog-footer">
    <el-button @click="accountPending = false">取 消</el-button>
    <el-button type="primary" @click="addHangbill">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false"
               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 :close-on-click-modal="false"
               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
               @close="onDialogClose"
    >
      <div v-if="isPay"
           v-loading="loading"
      >
        <div v-if="payForm.paymentType != 'fule_card'">
          <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>

        <div v-else>
          <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">
             {{ oilLiter }}  L
          </div>
        </div>

        <div
          v-if="payForm.paymentType === 'ALIPAY'  || payForm.paymentType === 'WECHAT' || payForm.paymentType === 'UNIONPAY' || payForm.paymentType === 'APPLET_CODE'"
        >
          <div>
            <el-input v-model="payForm.authCode"
                      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-if="payForm.paymentType==='card_value' || payForm.paymentType==='fule_card' || payForm.paymentType==='car_card_value'"
        >

          <div style="text-align: right;margin: 10px 0">
            <span v-if="payType != 'fule_card'">卡余额</span>
            <span v-else>卡油量</span>
            <span v-if="payType != 'fule_card'" style="color: red;font-size: 18px"> ￥{{ cardBalance }}</span>
            <span v-else style="color: red;font-size: 18px"> {{ cardBalance }}  L</span>
          </div>
        </div>
        <div v-else>
          <div>
            <el-input v-model.number="payForm.authCode"
                      oninput="value=value.replace(/[^0-9]/g, '').slice(0, 10)"
                      type="number"
                      ref="getFocus"
                      autofocus maxlength="10"
                      @keydown.enter.native="collection1"
                      placeholder="请输入收款金额"
            >
            </el-input>
          </div>
          <div style="text-align: right;margin: 10px 0">
            <span>应找零</span>
            <span style="color: red;font-size: 18px"> ￥{{ getChangeShould }}</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>

    <!--  储值卡  囤油卡  车队卡    -->

    <!--    车队卡支付-->
    <el-dialog :close-on-click-modal="false"
               title="车队卡支付"
               :visible.sync="dialogVisible"
               width="30%"
    >
      <carCard :fleetList="chooseVipUser.fleetInfoUniVos"></carCard>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</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 carCard from './newHomeComponents/carCard.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, printOilOrderReport, printCardValueReport, printFuelDieselReport } from '../../../api/print'
import { addLJGoods, scanAppletQrCode } from '@/api/cashier/oilorder'
import { cashierOrderByOrderNo } from '@/api/cashier/cashierorder'
import { addHangBill } from '../../../api/cashier/hangbill'

export default {
  dicts: ['CardCoupon_type'],
  data() {
    return {
      //用卡支付时候 卡的余额 根据监听器变动
      cardBalance: 0,
      disOil: 0.00,
      disGoods: 0.00,
      loadingPreferential: false,
      dialogVisible: false,
      isClickable: false, // 默认不可点击
      payForm: {
        realyPayBills: 0.00,
        paymentType: 'ALIPAY',
        authCode: null,
        seekZero: 0.00,
        activeAmount: 0.00
      },
      sendCoupon: {},
      //可参加的活动
      activityList: [],
      //可用优惠券
      couponList: [],
      //选中的活动  actId_ruleId
      chooseActId: '',
      //选中的优惠券id
      chooseCouponId: '',
      //选中的活动对象
      chooseAct: {},
      //选中的优惠券对象
      chooseCoupon: {},
      //支付方式--默认支付宝
      payType: '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: {
        amount: 0
      },
      //商品列表
      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,
      // 挂账订单信息
      credit: {},
      //会员搜索列表
      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: {
    //监听 会员登录  刷新一下商品会员价 计算
    chooseVipUser: {
      deep: true,
      handler(newVal) {
        this.goodsList = this.goodsList.map(
          item => {
            return item
          }
        )
      }
    },
    //监听商品列表 变化计算商品优惠
    goodsList: {
      handler(newVal) {
        //如果会员不为空
        if (this.chooseVipUser.hasOwnProperty('id')) {
          this.disGoods = 0.00
          // 计算商品会员价
          console.log('走了啊', this.goodsList)
          this.goodsList.forEach(item => {
            const memberPrice = Number(item.retailPrice - item.memberPrice)
            const num = Number(item.num)
            const product = (memberPrice * num).toFixed(2) // 固定为两位小数
            this.disGoods = (parseFloat(this.disGoods) + parseFloat(product)).toFixed(2)
          })

          // 优惠总金额赋值
          this.disTotal = 0.00
          this.disTotal = (parseFloat(this.disGoods) + parseFloat(this.disOil)).toFixed(2)

        } else {
          this.disGoods = 0.00
          // 计算商品会员价
          console.log('走了啊', this.goodsList)
          this.goodsList.forEach(item => {
            const memberPrice = Number(item.retailPrice - item.memberPrice)
            const num = Number(item.num)
            const product = (memberPrice * num).toFixed(2) // 固定为两位小数
            this.disGoods = (parseFloat(this.disGoods) + parseFloat(product)).toFixed(2)
          })

          // 优惠总金额赋值
          this.disTotal = 0.00
        }
      },
      deep: true
    },
    //监听结算金额 是否获取
    realAmount: {
      handler(newVal) {
        console.log('结算金额', newVal)
        //  判断是否有结算金额
        if (this.realAmount > 0) {
          this.isClickable = true
        } else {
          this.isClickable = false
        }

      }
    },
    //监听选择的活动
    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)
          //  保留两位小数
          this.oilLiter = (this.oilGunClearing.amount / this.oilGunClearing.oilPrice).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
      }
      //商品 没有优惠券了 当前页面不能使用
    }
  },
  components: {
    pickUp,
    accountPending,
    memberRecharge,
    refuelingAmount,
    carCard
  },
  created() {
    //初始化 油枪  商品
    this.getOilList()
    this.getGoodsList()
    this.getQRCodeInfoByStoreId(0)
    this.getPayList()
    this.getCouponType()
  },

  computed: {
    getChangeShould() {
      let change = this.payForm.authCode - this.payForm.realyPayBills
      return change.toFixed(2)
    },
    getGoodsItem() {
      if (this.oilGunClearing.amount && this.oilGunClearing.amount !== undefined) {
        //   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: {

    //结算弹窗 监听关闭 清除表单
    onDialogClose() {
      this.payForm.authCode = null
      this.cardBalance = 0
    },

    sendCouponClick() {
      console.log('数量', this.sendCoupon.tfTotal - this.sendCoupon.tfGetNum)
      if (this.sendCoupon.tfTotal - this.sendCoupon.tfGetNum <= 0) {
        this.$message.error('优惠券已领完')
        return
      }
      //this.sendCoupon this.chooseVipUser.id
      this.sendCoupon.mtUserId = this.chooseVipUser.id
      this.sendCoupon.fromType = '4'
      this.sendCoupon.cardCouponId = this.sendCoupon.id
      //清除 一些  重复字段
      this.sendCoupon.status = null
      this.sendCoupon.createTime = null
      this.sendCoupon.updateTime = null
      this.sendCoupon.updateBy = null
      this.sendCoupon.createBy = null
      sendCouponFun(this.sendCoupon).then(
        res => {
          if (res.code == 200) {
            this.$message.success('赠送成功')
            this.freeTicket = false
          } else {
            this.$message.error(res.msg)
          }

        }
      )
    },
    handleCilone(obj) {
      // 强制组件重新渲染  elementui 组件都是通过监听数据来重新渲染  数据层级太深了 需要手动强刷
      this.$forceUpdate()

      this.goodsList = this.goodsList.map(
        item => {
          if (item.id == obj.id) {
            return { ...item, num: obj.num }

          } else {
            return item
          }

        }
      )

    },
    /**
     * 获取优惠总金额
     * */
    getDisTotal() {
      this.disTotal = 0.00
      this.disOil = 0.00
      if ('' != this.chooseCouponId) {
        this.disOil = parseFloat(this.disOil) + parseFloat(this.chooseCoupon.disAmount)
      }
      if ('' != this.chooseActId) {
        this.disOil = parseFloat(this.disOil) + parseFloat(this.chooseAct.disAmount)
      }

      console.log('油品优惠金额', this.disOil)
      console.log('商品优惠金额', this.disGoods)

      this.disTotal = parseFloat(this.disOil) + parseFloat(this.disGoods)
    },
    /**
     * 监听活动选择切换
     * */
    handleChangeAct(value) {
      this.chooseAct = this.activityList.filter(item => item.id === value)[0]
      console.log('选中的活动', this.chooseAct)
      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]
      console.log('选中的优惠券', this.chooseCoupon)
      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() {
      console.log(this.flag)
      // 这里是收银台结算 下面是会员充值
      if (this.flag == 3) {
        this.collection()
        return
      }
      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
      console.log(this.payForm, 1054)
      //
      let timer = setInterval(async() => {
        let flag = false
        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()
              flag = true
              // await this_.cardValueReport()
              // await this_.getMemberAfter();
              clearInterval(timer)
            } else if (payStatus === 'payFail') {
              this_.isPaySuccess = false
              this_.isQuery = false
              clearInterval(timer)
            }
          }
          // await this_.getMemberAfter();
        })
        if (flag) await this_.cardValueReport()
      }, 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
      console.log("子弹窗表单属性", selectCard)
      if (!selectCard.paymentType) {
        this.$message.error('请选择支付方式')
        return
      }
      if (!selectCard.rechargeBalance) {
        this.$message.error('请选择输入充值本金')
        return
      }
      console.log(selectCard, 1122)
      this.payForm.rechargeBalance = selectCard.rechargeBalance
      this.payForm.lockupPrice = selectCard.lockupPrice
      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)
    },
    // 打印商品支付后的订单
    oilOrderReport() {
      console.log(this.goodsOrder, this.goodsList, 1095)
      //现在油品只有一个了
      let oilOrderR = []
      if (this.oilGunClearing && this.oilGunClearing.amount > 0) {
        oilOrderR = [
          {
            oilName: this.oilGunClearing.oilType + this.oilGunClearing.oilName,
            amount: this.oilGunClearing.amount + ''
          }
        ]
      }

      let goodsOrderR = []
      if (this.goodsList && this.goodsList.length > 0) {
        this.goodsList.forEach(order => {
          let o = {
            oilName: order.name,
            unit: order.num + order.unit,
            // amount : order.memberPrice.toString()
            amount: order.retailPrice.toString()

          }
          goodsOrderR.push(o)
        })
      }
      // 支付方式
      const payTypeMap = {
        'CASH': '现金',
        'WECHAT': '微信',
        'ALIPAY': '支付宝',
        'UNIONPAY': '银联二维码',
        'after_pay': '挂账',
        'fule_card': '囤油卡',
        'card_value': '储值卡',
        'car_card_value': '车队卡'
      }
      let payTypeText = payTypeMap[this.payType] || '小程序码'

      let f = {
        oilOrder: oilOrderR,
        goodsOrder: goodsOrderR,
        payType: payTypeText,
        unitName: '', // 挂账单位

        // consumeAmount:this.consumeAmount,
        creditAmount: this.realAmount,//挂账金额
        // 优惠合计
        discount: this.disTotal, // 油惠合计
        // 储值卡付款
        consumeAmount: this.realAmount,
        // 屯油卡付款
        consumeRefuelMoney: this.realAmount,
        // 实付款
        actualPay: this.realAmount,
        // 找零
        seekZero: this.seekZero ? this.seekZero.toFixed(2) : 0
      }
      if (this.credit && this.credit.unitName) f.unitName = this.credit.unitName
      printOilOrderReport(f).then(res => {
        console.log(res, 1121)
      })
    },
    // 用户余额/礼品卡充值打印
    cardValueReport() {
      // 支付方式
      const payTypeMap = {
        'CASH': '现金',
        'WECHAT': '微信',
        'ALIPAY': '支付宝',
        'UNIONPAY': '银联二维码',
        'after_pay': '挂账',
        'fule_card': '囤油卡',
        'card_value': '储值卡',
        'car_card_value': '车队卡'
      }

      if (this.payForm.cardType == 0 || this.payForm.cardType == 2) {
        console.log(1226)
        let payTypeText = payTypeMap[this.payForm.paymentType]
        let actualPay = this.payForm.paymentType == 'CASH' ? this.payForm.authCode : this.payForm.realyPayBills

        let a = {
          // 充值金额
          realyPayBills: this.payForm.realyPayBills,
          //赠送金额
          giftBalance: this.payForm.giftBalance,
          // 到账金额
          getAmount: Number(this.payForm.giftBalance) + Number(this.payForm.realyPayBills),
          payType: payTypeText,

          // 实付款
          actualPay: actualPay,
          // 找零
          seekZero: this.payForm.seekZero.toFixed(2)
        }
        printCardValueReport(a).then(res => {
          console.log(res, 1245)
        })
      }

      if (this.payForm.cardType == 1) {
        let payTypeText1 = payTypeMap[this.payForm.paymentType]
        console.log(this.payForm, 1256)
        let b = {
          // 充值油品
          oilType: this.payForm.oilName,
          // 充值升数
          incomeLitres: (this.payForm.rechargeBalance / this.payForm.lockupPrice).toFixed(2),
          // 订单金额
          realyPayBills: this.payForm.rechargeBalance,
          // 锁价金额
          lockupPrice: this.payForm.lockupPrice,
          // 支付方式
          payType: payTypeText1,
          // 实付款

          // 找零
          seekZero: this.payForm.seekZero.toFixed(2)
        }

        console.log(b, 1271)
        printFuelDieselReport(b).then(res => {
          console.log(res, 1273)
        })
      }
    },
    //表单重置
    resetting1() {
      console.log('表单重置')
      this.realAmount = 0.00
      //优惠合计金额
      this.disTotal = 0.00
      //请输入手机号输入框重置
      this.userMobile = null
      //油枪重置
      this.oilGunClearing = {}
      //商品重置
      this.goodsList = []

      this.userInfo = false
      //支付方式 默认 支付宝
      this.payType = 'ALIPAY'

      this.loading = false

      this.restVipUser()

    },
    // 查询订单支付状态
    queryPayStatus() {
      let _this = this
      let timer = setInterval(function() {
        // "234520231228115544f073f4"
        cashierOrderByOrderNo({ orderNo: _this.orderNo }).then(response => {
          if (response.data) {
            console.log(1318, response)
            if (response.data.status == 'paid') {
              _this.isPay = false
              _this.isPaySuccess = true
              _this.isQuery = false
              _this.amount = 0

              _this.loading = false
              // _this.printLocally()
              _this.oilOrderReport()

              _this.resetting1()

              if (response.data.oilOrderAmount > 0) {
                // for (let i =0;i<_this.oilPreferentialData.length;i++){
                //   _this.oilPreferentialData[i].oilPreferential.storeId = response.data.storeId
                //   _this.oilPreferentialData[i].oilPreferential.orderAmount = response.data.oilOrderAmount
                //   _this.oilPreferentialData[i].oilPreferential.userId = response.data.userId
                //   _this.oilPreferentialData[i].oilPreferential.oilId = response.data.oils
                //   _this.oilPreferentialData[i].oilPreferential.mtUserLevel = _this.member.gradeId
                //   _this.oilPreferentialData[i].oilPreferential.cardFavorableId = _this.oilPreferentialData[_this.oilPreferentialData.length-1].cardFavorableId
                //   usePaymentActive(_this.oilPreferentialData[i].oilPreferential).then(res => {})
                // }
              }
              clearInterval(timer)
            }
            if (response.data.status == 'payFail') {
              _this.isPaySuccess = false
              // _this.isPay = true;
              _this.isQuery = false

              _this.loading = false
              clearInterval(timer)
            }
            if (response.data.status == 'unpaid') {
              _this.isQuery = true
              _this.dialogVisiblejLoading = true
            }
          }
          // _this.resetting1();
        })
      }, 1000)

      // 如果是为支付状态15后打开去订单页查询的接口
      // if (_this.isQuery){
      //   setTimeout(function () {
      //   },10000)
      // }

      let timer2 = setInterval(function() {
        if (!_this.isQuery || !_this.dialogVisiblej) {
          _this.loading = false
          // _this.isPay = true;
          // _this.countdown()
          clearInterval(timer)
          clearTimeout(timer3)

        }
      }, 1000)

      var timer3 = setTimeout(function() {
        clearInterval(timer2)
        clearInterval(timer)
        _this.loading = false
        _this.isPay = true
        this.isPaySuccess = false
      }, 15000)
    },
    // 确定收款
    async collection() {
      if (this.payForm.payType == 'CASH') {
        if (this.payForm.authCode < ((+this.oilActualPay) + (+this.goodsActualPay)) || this.seekZero < 0) {
          this.$modal.msgError('请输入正确的金额')
          return
        }
        if (!this.payForm.authCode && ((+this.oilActualPay) + (+this.goodsActualPay)) > 0) {
          this.$modal.msgError('请输入正确的金额')
          return
        }
      }
      if (!this.payForm.authCode && ((+this.oilActualPay) + (+this.goodsActualPay)) > 0) {
        this.$modal.msgError('请先扫码')
        return
      }

      //只有在现金时候才会有找零
      if (this.payForm.payType == 'CASH') {
        //找零金额
        this.payForm.seekZero = this.getChangeShould
      } else {
        this.payForm.seekZero = 0
      }

      this.loading = true
      let _this = this
      //小程序码付款
      if (this.payForm.payType == 'APPLET_CODE') {
        if (this.goodsList.length > 0) {
          this.$modal.msgError('非油商品不可使用小程序码支付')
          return
        }
        await scanAppletQrCode(_this.payForm).then(resp => {
          if (resp.data.success == 'success') {
            setTimeout(function() {
              _this.loading = false
              _this.isPaySuccess = true
              _this.isPay = false
              // _this.printLocally()
              _this.oilOrderReport()
              _this.resetting1()
            }, 3000)
          } else {
            setTimeout(function() {
              _this.loading = false
              _this.isPaySuccess = false
              _this.isPay = false
              _this.resetting1()
              this.$modal.msgError(resp.data.error)
            }, 3000)
          }
        })
        return
      }

      let isPaySuccess = false
      console.log(_this.payForm, 1089)
      // 调用 支付接口 并产生 订单 返回订单号
      await addLJGoods(_this.payForm).then(async response => {
        _this.orderNo = response.data.orderNo

        //支付成功 后需要打印小票
        console.log('支付成功', response)

        if (response.data.oilOrder != null) {
          if (response.data.oilOrder.orderStatus == 'paid') {

            _this.isPaySuccess = true
            isPaySuccess = true
            _this.isPay = false
            _this.loading = false
            _this.oilOrderReport()
            _this.resetting1()
            return
          }
        }
        if (response.data.goodsOrder != null) {
          if (response.data.goodsOrder.status == 'paid') {
            _this.isPaySuccess = true
            isPaySuccess = true
            _this.isPay = false
            _this.loading = false
            _this.oilOrderReport()
            _this.resetting1()
            return
          }
        }
        if (response.data.error == 1) {
          this.$modal.msgError('商品库存不足，请重新选择商品')
          this.loading = false
          this.autofocus = false
          this.dialogVisiblej = false
          return
        }
        if (response.data.error && response.data.error != 1) {
          this.$modal.msgError(response.data.error)
          this.loading = false
          // this.dialogVisiblej = false;
          return
        }
      })
      this.loading = true

      if (!isPaySuccess) {
        await _this.queryPayStatus()
        _this.resetting1()
      }
    },
    // 立即结算
    async settlement() {

      this.cardBalance=0
      // 囤油   这时候卡余额是 升
      if (this.payType == 'fule_card') {
        if (this.oilGunClearing.amount > 0) {
          this.chooseVipUser.userFuels.find(
            item => {
              if (item.oilName == this.oilGunClearing.oilNameId) {
                this.cardBalance = item.fuelAmount
              }
            }
          )
        }
      }
      // 车队
      if (this.payType == 'car_card_value') {
        if (this.oilGunClearing.amount > 0) {
          this.cardBalance = this.chooseVipUser.fleetMember.remainingCreditLimit
        }
      }
      // 储值
      if (this.payType == 'card_value') {
        if (this.oilGunClearing.amount > 0) {
          this.cardBalance = this.chooseVipUser.cardBalance
        }
      }

      // 储值卡  小程序码   囤油卡  车队卡    都不可带商品
      if (this.payType == 'card_value' || this.payType == 'APPLET_CODE' || this.payType == 'fule_card' || this.payType == 'car_card_value') {
        if (this.goodsList.length > 0) {
          this.$modal.msgError('当前支付方式不可带商品')
          return
        }
      }

      //   储值卡    车队卡   余额都必须满足支付要求
      if (this.payType == 'card_value'  || this.payType == 'car_card_value') {
        console.log("付款金额",this.payForm.realyPayBills)
        if (this.cardBalance <= 0 || this.cardBalance < this.oilGunClearing.amount) {
          this.$modal.msgError('当前卡 余额 不足')
          return
        }
      }
      // 囤油卡 升数是否满足
      if (this.payType == 'fule_card'){
        if (this.cardBalance <= 0 || this.cardBalance < this.oilLiter) {
          this.$modal.msgError('当前卡 升数 不足')
          return
        }
      }

      //如果是挂账 不可结算
      if (this.payType == 'after_pay') {
        this.$modal.msgError('挂账无需结算')
        return
      }

      // 油品单价
      //  油号id
      //  油枪id
      //  油罐id
      //  活动id
      //  活动类型
      this.loading = false
      console.log(this.oilGunClearing)
      if (this.oilGunClearing && this.oilGunClearing.amount > 0) {
        this.payForm.oilOrder = JSON.stringify({
          oilPrice: this.oilGunClearing.oilPrice,
          oils: this.oilGunClearing.oilNameId,
          oilGunNum: this.oilGunClearing.id,
          tankId: this.oilGunClearing.tankId,
          activeId: this.chooseAct.hasOwnProperty('actId') ? this.chooseAct.activeId : null,
          activeType: this.chooseAct.hasOwnProperty('type') ? this.chooseAct.activeType : null
        })
      } else {
        this.payForm.oilOrder = null
      }

      //商品 集合
      this.payForm.goodsOrder = JSON.stringify(this.goodsList)
      //支付方式
      this.payForm.payType = this.payType
      //油品订单金额
      this.payForm.oilAmount = this.oilGunClearing.amount || 0
      //商品订单金额
      this.payForm.goodsAmount = this.getGoodsNum || 0
      //油品实付金额
      this.payForm.oilActualPay = (this.oilGunClearing.amount || 0) - (this.disOil || 0)
      //商品实付金额
      this.payForm.goodsActualPay = (this.getGoodsNum || 0) - (this.disGoods || 0)
      //油枪id
      this.payForm.oilGunId = this.oilGunClearing.id
      //活动营销优惠金额
      this.payForm.activeAmount = this.chooseAct.disAmount || 0.0

      //优惠卷类型
      this.payForm.couponType = this.chooseCoupon.hasOwnProperty('type') ? this.chooseCoupon.type : null
      //优惠券id
      this.payForm.couponId = this.chooseCoupon.hasOwnProperty('couponId') ? this.chooseCoupon.id : null

      //付款用户
      this.payForm.payUser = this.chooseVipUser.mobile
      //油品优惠金额
      this.payForm.oilDiscount = this.disOil
      //商品优惠金额
      this.payForm.goodsDiscount = this.disGoods

      //会员消费金额 (储值卡需要减少的金额)
      if (this.payForm.payType == 'card_value') {
        this.payForm.consumeAmount = this.realAmount
      } else {
        this.payForm.consumeAmount = 0
      }

      //会员id
      this.payForm.userId = this.chooseVipUser.id
      //终端  默认传PC
      this.payForm.terminal = 'PC'
      //商品 ids
      // 将集合内 所有id 拼接 , 隔开  this.goodsList
      this.payForm.goodsIds = this.goodsList.map(item => item.id).join(',')
      //购买商品的总数量    计算属性
      this.payForm.goodsNum = this.getGoodsListNum
      //油品 + 商品 的实付总额
      this.payForm.allAmount = this.realAmount

      this.payForm.paymentType = this.payType

      //支付弹窗 相关
      this.payForm.realyPayBills = this.realAmount
      this.isPay = true
      this.openConfirm = true
      this.flag = 3

    },
    // 网络下发之后获取条码
    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.payType,
          oilLiter: this.oilLiter
        }
        getActivityList(dataObj).then(res => {
          console.log('返回的可参加活动', res)
          this.activityList = res.data
        })
      } else {
        //可用活动清空
        this.activityList = []
      }
    },
    /**
     * @description 油枪金额和商品金额发生变化，请求后端查询可用优惠券
     * 传入后台的参数，会员的用户id、加油油号、加油订单金额（不包括商品金额）、加油订单总金额（包括商品金额）、加油总升数
     * 修改后  会员的用户id、加油油号、加油订单金额、加油总升数  （现在收银台 使用优惠券 是必须有油品才行）
     * @author vinjor-m
     * @date 2024年9月19日
     */
    getCoupon() {
      this.loadingPreferential = true
      this.chooseCouponId = ''
      //组装请求参数   必须有会员id  以及  商品 和 油品的任意一种
      if (this.chooseVipUser.hasOwnProperty('id') && this.oilGunClearing != '' && this.oilGunClearing.hasOwnProperty('oilNameId')) {
        //已选择会员且（选了商品或者加了油）
        let dataObj = {
          userId: this.chooseVipUser.id,
          payWay: this.payType
        }
        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
          this.loadingPreferential = false
        })
      } else {
        this.couponList = []
        this.loadingPreferential = false
      }
    },
    restVipUser() {
      this.userInfo = false
      this.chooseVipUser = {}
      this.userMobile = ''
      this.getActivity()
      this.getCoupon()
    },
    chooseUser(data) {
      if (data) {
        //选择会员
        this.userInfo = true
        this.chooseVipUser = data
        console.log('会员', this.chooseVipUser)
        //选择会员，查询可用优惠活动和优惠券
        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.setFreeIndex(res.data[0])
      })
      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]
          }
        }
      }

    },
    changeAmount(val) {
      console.log(val, 1807)
      this.credit = val
    },
    // 添加挂账记录
    addHangbill() {
      addHangBill(this.credit).then(async response => {
        if (response.data == 1) {
          await this.addOrder()
          this.$modal.msgSuccess('挂账记录添加成功')
          this.accountPending = false
          // this.printLocally()
          this.oilOrderReport()

          this.payType = 'WECHAT'
          this.restVipUser()
          this.resetting1()
        } else {
          this.$modal.msgError('挂账单位可用额度不足，无法进行挂账')
        }
      })
    },
    // 添加挂账订单信息
    async addOrder() {
      if (this.oilGunClearing) {
        this.payForm.oilOrder = JSON.stringify({
          oilPrice: this.oilGunClearing.oilPrice,
          oils: this.oilGunClearing.oilNameId,
          oilGunNum: this.oilGunClearing.id,
          tankId: this.oilGunClearing.tankId,
          activeId: this.chooseAct.hasOwnProperty('actId') ? this.chooseAct.activeId : null,
          activeType: this.chooseAct.hasOwnProperty('type') ? this.chooseAct.activeType : null
        })
      } else {
        this.payForm.oilOrder = null
      }

      //商品 集合
      this.payForm.goodsOrder = JSON.stringify(this.goodsList)
      //支付方式
      this.payForm.payType = this.payType
      //油品订单金额
      this.payForm.oilAmount = this.oilGunClearing.amount || 0
      //商品订单金额
      this.payForm.goodsAmount = this.getGoodsNum || 0
      //油品实付金额
      this.payForm.oilActualPay = this.oilGunClearing.amount ? this.oilGunClearing.getAmount - this.disOil : 0
      //商品实付金额
      this.payForm.goodsActualPay = this.getGoodsNum ? this.getGoodsNum - this.disGoods : 0
      //油枪id
      this.payForm.oilGunId = this.oilGunClearing.id
      //活动营销优惠金额
      this.payForm.activeAmount = this.chooseAct.disAmount || 0.0

      //优惠卷类型
      this.payForm.couponType = this.chooseCoupon.hasOwnProperty('type') ? this.chooseCoupon.type : null
      //优惠券id
      this.payForm.couponId = this.chooseCoupon.hasOwnProperty('couponId') ? this.chooseCoupon.id : null

      //付款用户
      this.payForm.payUser = this.chooseVipUser.mobile
      //油品优惠金额
      this.payForm.oilDiscount = this.disOil
      //商品优惠金额
      this.payForm.goodsDiscount = this.disGoods

      //会员消费金额 (储值卡需要减少的金额)
      this.payForm.consumeAmount = this.realAmount
      //会员id
      this.payForm.userId = this.chooseVipUser.id
      //终端  默认传PC
      this.payForm.terminal = 'PC'
      //商品 ids
      // 将集合内 所有id 拼接 , 隔开  this.goodsList
      this.payForm.goodsIds = this.goodsList.map(item => item.id).join(',')
      //购买商品的总数量    计算属性
      this.payForm.goodsNum = this.getGoodsListNum
      //油品 + 商品 的实付总额
      this.payForm.allAmount = this.realAmount

      this.payForm.paymentType = this.payType

      console.log('支付类型', this.payForm.paymentType)

      //支付弹窗 相关
      this.payForm.realyPayBills = this.realAmount
      await addLJGoods(this.payForm).then(response => {

      })
    },
    /**
     * 设置选中的支付方式
     * @param value
     */
    setindex(value) {
      if (value == 'after_pay') {
        if (this.getGoodsNum > 0) {
          this.$message.error('商品订单不支持挂账')
          return
        }
        if (this.oilGunClearing.amount <= 0) {
          this.$message.error('请选择挂账订单')
          return
        }
        this.accountPending = true
      }
      if (value == 'card_value' || value == 'fule_card' || value == 'car_card_value') {
        if (!this.userInfo) {
          this.$message.error('请先选择会员')
          return
        }
      }
      console.log('支付方式', value)
      this.payType = 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
      console.log('当前选择的商品', row)
      // 如果 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">

.disabled {
  pointer-events: none; // 禁用鼠标事件
  opacity: 0.6; // 半透明效果表示禁用
}

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;

}

.zo_box {
  width: 33.3%;
  margin-bottom: 1%;
}

.card92 {
  width: 95%;
  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: 95%;
  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: 95%;
  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: 95%;
  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>