<!--积分-->
<template>
    <div class="app-center">
      <div class="center-left">
        <div class="center-vh">
          <div class="center-left-top">
            <div class="vip-bottom" v-if="isMember == false" @click="dialogVisiblevip = true">
              <div>会员搜索</div>
            </div>
            <div v-else style="width: 96%;margin: 0 auto;display: flex;justify-content: space-between">
              <div
                style="display: flex;color: white;justify-content: space-around;width: 55%;
                 height: 90%;border-radius: 10px;
                 padding-top: 10px;
                 background-color: rgb(67,119,204)">
                <div>
                  <template>
                    <img v-if="member.avatar" class="list-avatar" :src="baseUrl + member.avatar">
                    <img v-else class="list-avatar" src="@/assets/images/avatar.png">
                  </template>
                </div>
                <div style="text-align: center">
                  <span style="margin-bottom: 10px">{{ member.name }}</span><br/>
                  <span>{{ member.mobile }}</span>
                </div>
                <div style="background-color: rgba(46,82,142,0.65);width: 50px;height: 45px;padding-top: 5px;
                    border-radius: 5px;text-align: center">
                  <el-tooltip placement="top">
                    <div slot="content">
                      <p>会员储值账户余额：{{ member.cardBalance }}</p>
                      <p>积分余额：{{ member.points }}</p>
                    </div>
                    <i class="el-icon-bank-card" style="font-size: 35px"></i>
                  </el-tooltip>
                </div>
                <div style="background-color: rgba(46,82,142,0.65);width: 50px;height: 45px;padding-top: 5px;
                    border-radius: 5px;text-align: center">
                  <el-tooltip placement="top">
                    <div slot="content">
                      会员等级：{{ gradeName }}
                    </div>
                    <i class="el-icon-medal" style="font-size: 35px"></i>
                  </el-tooltip>
                </div>
              </div>
              <div class="vip-bottom" style="height: 40px;margin-top: 10px" @click="resetMember">
                <div>重置会员</div>
              </div>
            </div>

          </div>
<!--          <div class="center-left-hj">-->
<!--            <div class="hj-box" style="justify-content: left">油品:￥200.00</div>-->
<!--            <div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>-->
<!--          </div>-->
          <div class="center-left-hj">
            <div>使用积分</div>
            <div>-{{allPoints}}</div>
          </div>
<!--          <div class="center-left-hj" v-show="isMember">-->
<!--            <div>-->
<!--              电子储值卡-->
<!--              <span>（账户余额：{{ balance }}元）</span>-->
<!--            </div>-->
<!--            <div>-￥{{ allAmout }}</div>-->
<!--          </div>-->

            <div class="center-left-hj" v-show="isMember">
              <div>
                积分余额
                <span>（账户余额：{{ member.points }}积分）</span>
                <span v-if="!isTheBalanceIsSufficient" style="color: red">积分余额不足</span>
              </div>
              <div>-{{ allPoints }}</div>
            </div>
          <div class="center-left-th">
            <div class="th-box">
              <div>扫码支付</div>
              <div class="bule">{{allPoints}}</div>
            </div>
<!--            <div class="th-box">-->
<!--              <div>找零</div>-->
<!--              <div class="bule">394.7</div>-->
<!--            </div>-->
            <div class="th-box">
              <div @click="dialogVisible = true">加油员</div>
              <div style="cursor: pointer;color: crimson" @click="dialogVisible = true" >{{ staff.realName }}</div>
            </div>
          </div>
        </div>
        <div class="bottom-posi">
          <div class="center-left-wrap">
            <div class="wrap-box" v-for="item in payList"
                 v-if="item.dictValue!=='APPLET_CODE'"
                 :key="item.dictValue"
                 :value="item.dictValue"
                 :class="{ 'wrap-box2': item.dictValue === paymentType }"
            >
              <span @click="payMethod(item)">{{ item.dictLabel }}</span>
            </div>
          </div>
          <div class="center-left-bottom">
            <div>
              <div class="bottom-price">￥{{allAmout}}</div>
              <div class="price-red">积分合计：{{allPoints}}</div>
            </div>
            <div v-if="!isMember" style="background-color: #ffa6a6;" class="center-left-lv" >请先登录会员</div>
            <div v-if="isMember && !isTheBalanceIsSufficient" style="background-color: #a9fcce;" class="center-left-lv" >余额不足</div>
            <div v-if="isMember && isTheBalanceIsSufficient" class="center-left-lv" @click="settlement">立即结算</div>
          </div>
        </div>

      </div>
      <div class="center-right"
      >
        <div class="center-right-top">
          <el-tabs v-model="queryParams.categoryId" @tab-click="handleClick">
            <el-tab-pane label="全部" name='first'></el-tab-pane>
            <el-tab-pane v-for="(item,index) in giftCategoryList" :label="item.categoryName" :name='item.id.toString()'></el-tab-pane>
          </el-tabs>
          <div style="width: 200px; ">
            <el-input v-model="queryParams.giftName" @input="getGift()" placeholder="请输入内容"></el-input>
          </div>

        </div>

        <div class="wrap-right">
          <div class="ts-box">
              <div class="wrap-right-box" v-for="(item,index) in giftList" :key="item.id" @click="addGift(item)">
                <el-card shadow="hover" >
                  <el-badge :hidden="!item.markPurchases>0" :value="item.markPurchases" class="item">
                    <div class="box-six">
                      <img :src="imagePath+item.coverImage" >
                    </div>
                    <div class="box-four">
                      <div class="title-red" >
                        <span v-if="item.exchangeMethod == '积分' || item.exchangeMethod == '积分+金额' || item.exchangeMethod == '积分+加钱购'">{{item.exchangePoints}}积分</span>
                        <span v-if="item.exchangeMethod == '积分+金额'">+</span>
                        <span v-if="item.exchangeMethod == '金额' || item.exchangeMethod == '积分+金额'">￥{{item.exchangeAmount}}</span>
<!--                        <span v-if="item.exchangeMethod == '积分+加钱购'">+{{item.moneyRatio}}加钱比例</span>-->
                      </div>
                      <div class="title-hui">
                        <span>库存:{{item.remainingInventory === -1?"不限":item.remainingInventory}}</span>
                      </div>
                      <div class="title-goods">
                        <el-tag type="danger" size="mini"  effect="dark">{{item.exchangeMethod}}</el-tag>
<!--                        <span style="margin-left: 5px">{{item.giftName}}</span>-->
                        <el-tooltip class="item" effect="dark" :content="item.giftName" placement="top-start">

                        <span style="margin-left: 5px; display: inline-block; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.giftName }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                  </el-badge>
                </el-card>
              </div>
          </div>
        </div>
        <div class="wrap-right-bottom">
          <div class="chongzhi" @click="reset()"> <i class="el-icon-refresh"></i> 重置</div>
          <div style="display: flex;align-items: center">
            <div class="ddjil" @click="orderHistoryMethod">订单记录</div>
            <div class="gwuc" @click="shoppingCartMethod()">
              <el-badge :hidden="markPurchasesAll<1" :value="markPurchasesAll" class="item">
                <i class="el-icon-shopping-cart-2"></i> <span style="margin-left: 5px">购物车</span>
              </el-badge>
            </div>
          </div>

        </div>

      </div>
<!--    会员登录-->
      <el-dialog
        title="会员信息"
        :visible.sync="dialogVisiblevip"
        width="30%"
        :close-on-click-modal="false">
        <div >
          <el-input placeholder="会员手机号、用户昵称" v-model="userNo"
                    clearable
                    @keyup.enter.native="getUser"
                    class="input-with-select" style="text-align: center;">
            <el-select v-model="select1" slot="prepend" placeholder="请选择" style="width: 120px">
              <el-option label="会员手机号" value="会员手机号"></el-option>
              <el-option label="用户昵称" value="用户昵称"></el-option>
            </el-select>
            <el-button slot="append" @click="getUser">查询</el-button>
          </el-input>
        </div>
        <el-row>
          <el-descriptions title="会员信息" :column="2">
            <el-descriptions-item label="手机号">{{member.mobile ? member.mobile : "--"}}</el-descriptions-item>
            <el-descriptions-item label="会员昵称">{{member.name ? member.name : "--"}}</el-descriptions-item>
            <el-descriptions-item label="积分">{{member.points ? member.points : "--"}}</el-descriptions-item>
            <!--          <el-descriptions-item label="加油金余额">0</el-descriptions-item>-->
            <el-descriptions-item label="车牌号">{{member.carNo ? member.carNo : "--"}}</el-descriptions-item>
            <el-descriptions-item label="会员备注">{{member.remark ? member.remark : "--"}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="会员等级">
            <el-descriptions-item label="等级名称">{{member.gradeId ? getGradeName(gradeList,member.gradeId) : "--"}}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="储值余额">
            <template slot="extra">
<!--              <span style="color: red;margin-right: 20px">余额充值</span>-->
              <span style="font-weight: bold">￥{{member.cardBalance ? member.cardBalance : "--"}}</span>
            </template>
            <el-descriptions-item v-if="member.cardBalance!=0" label="账户余额">{{member.cardBalance ? member.cardBalance : "--"}}元</el-descriptions-item>
          </el-descriptions>
        </el-row>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblevip = false">取 消</el-button>
        <el-button type="primary" @click="chooseUser(member.mobile,member.id)">确 定</el-button>
      </span>
      </el-dialog>
<!--    模糊查询会员列表信息-->
      <el-dialog
        title="请选择会员"
        :visible.sync="dialogVisibleMember"
        :close-on-click-modal="false">
        <div class="wrap-wrap" style="height:700px;overflow-y: scroll;">
          <el-table ref="tables" :data="memberList">
            <el-table-column label="ID" align="center" prop="id" width="80" />
            <el-table-column label="头像" align="center" width="70">
              <template slot-scope="scope">
                <img v-if="scope.row.avatar" class="list-avatar" :src="baseUrl + scope.row.avatar">
                <img v-else class="list-avatar" src="@/assets/images/avatar.png">
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="mobile"/>
            <el-table-column label="注册时间" align="center" prop="createTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  type="primary" round
                  @click="handleChoose(scope.row)"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
<!--    加油员姓名-->
      <el-dialog
        title="选择加油员"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false">
        <div class="wrap-wrap">
          <div class="of-box" v-for="(item,index) in staffList" :key="index"
               @click="chooseStaff(item),dialogVisible = false"
               :style="{'background-color': item.color}">
            <div class="of-title">{{ item.realName }}</div>
            <div style="text-align: center;font-size: 17px">{{ item.mobile }}</div>
          </div>
        </div>
<!--        <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">关 闭</el-button>-->
<!--          &lt;!&ndash;        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>&ndash;&gt;-->
<!--      </span>-->
      </el-dialog>
<!--      购物车-->
      <el-dialog title="购物车" :visible.sync="openShoppingCart" width="50%">
        <el-alert
          style="margin-bottom: 5px"
          title="“加钱够”商品仅支持在单商品结算时支持积分不足情况下使用加钱购进行付款,多个商品结算不支持“加钱够”计算"
          type="warning"
          :closable="false">
        </el-alert>
        <el-table
          :data="shoppingCart"
          stripe
          align="center"
          style="width: 100%">
          <el-table-column  align="center" prop="date" label="商品信息">
            <el-table-column align="center" prop="date" label="商品图">
              <template slot-scope="scope">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="imagePath+scope.row.coverImage"
                  fit="cover"></el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="giftName" label="商品名称" ></el-table-column>
            <el-table-column align="center" prop="remainingInventory" label="库存">
              <template slot-scope="scope">
                {{scope.row.remainingInventory === -1?"不限":scope.row.remainingInventory}}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="date" label="价格">
              <template slot-scope="scope">
                <span v-if="scope.row.exchangeMethod == '积分' || scope.row.exchangeMethod == '积分+金额' || scope.row.exchangeMethod == '积分+加钱购'">{{scope.row.exchangePoints}}积分</span>
                <span v-if="scope.row.exchangeMethod == '积分+金额'">+</span>
                <span v-if="scope.row.exchangeMethod == '金额' || scope.row.exchangeMethod == '积分+金额'">￥{{scope.row.exchangeAmount}}</span>
                <span v-if="scope.row.exchangeMethod == '积分+加钱购'">+{{scope.row.moneyRatio}}加钱比例</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="name" label="购买数量" width="200px">
            <template slot-scope="scope">

              <el-input-number :disabled="scope.row.markPurchases>=scope.row.remainingInventory" v-model="scope.row.markPurchases" @change="changePurchases(scope.row),changeCompute" :min="1" :max="10000" label="" style="width: 130px" size="small"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="totalPoints_sum" label="合计">
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delShooping(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
<!--    立即结算-->
      <el-dialog
        :title="payType"
        :visible.sync="dialogVisiblej"
        width="30%"
        :close-on-click-modal="false">
        <div v-if="isPay == true"
             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">
            ￥{{allAmout}}
          </div>
          <div style="text-align: center;margin-bottom: 10px">
            减去积分：{{ allPoints }}
          </div>
          <template v-if="paymentType !== 'CASH' ">
          <template v-if="allAmout != 0 ">

          <div>
            <el-input
              v-model="authCode"
                      v-focus ref="getFocus"
                      autofocus="autofocus"
                      @keydown.enter.native="collection"
                      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>
          </template>
          </template>

          <template  v-else-if="allAmout>0">
            <div>
              <el-input v-model="authCode"
                        v-focus ref="getFocus"
                        autofocus
                        @input="changeSeekZero"
                        @keydown.enter.native="collection"
                        placeholder="请输入收款金额">
              </el-input>
            </div>
            <div style="text-align: right;margin: 10px 0">
              <span>应找零</span>
              <span style="color: red;font-size: 18px"> ￥{{ seekZero }}</span>
            </div>
          </template>

          <el-divider></el-divider>
          <span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around">
          <el-button @click="dialogVisiblej = false, visflg = true" class="but">取 消</el-button>
          <el-button type="primary" class="but" @click="collection">确 定 收 款</el-button>
        </span>
        </div>
        <div v-else>
          <div v-if="isPaySuccess">
            <el-result icon="success" title="收款成功">
              <template slot="extra">
                <el-button type="primary" @click="handClose">关 闭</el-button>
              </template>
            </el-result>
          </div>
          <div v-else-if="isAwait">
            <el-result icon="warning" title="支付等待超时，请前往订单列表查看是否支付成功！">
              <template slot="extra">
                <el-button type="primary" @click="handClose">关 闭</el-button>
              </template>
            </el-result>
          </div>
          <div v-else>
            <el-result icon="error" title="支付失败，请重新支付">
              <template slot="extra">
                <el-button type="primary" @click="handClose">关 闭</el-button>
              </template>
            </el-result>
          </div>
        </div>
      </el-dialog>
<!--      订单记录-->
      <el-drawer title="订单记录" :visible.sync="openOrderHistory" direction="rtl" size="1300px">
        <PointsCashier></PointsCashier>
      </el-drawer>


      <div id="reportSuccess" ref="report" class="box-center" v-show="false">
        <div class="box-title">积分商城订单</div>
        <div class="box-ge">
          <div v-for="item in shoppingCart" :key="item.id">
            <div class="input-box">
              <div>商品名称</div>
              <div>{{ item.giftName }}</div>
            </div>
            <div class="input-box">
              <div>商品数量</div>
              <div>{{ item.markPurchases }}</div>
            </div>
            <div class="input-box">
              <div>价格</div>
              <span v-if="item.exchangeMethod == '积分' || item.exchangeMethod == '积分+金额' || item.exchangeMethod == '积分+加钱购'">{{item.exchangePoints}}积分</span>
              <span v-if="item.exchangeMethod == '积分+金额'">+</span>
              <span v-if="item.exchangeMethod == '金额' || item.exchangeMethod == '积分+金额'">￥{{item.exchangeAmount}}</span>
              <span v-if="item.exchangeMethod == '积分+加钱购'">+{{item.moneyRatio}}加钱比例</span>            </div>
          </div>
          <hr/>

          <div class="input-box">
            <div>积分合计：</div>
            <div>{{allPoints}}</div>
          </div>
        <div class="input-box" v-if="allAmout">
          <div>总价合计：</div>
          <div>￥{{allAmout}}</div>
        </div>
        </div>
      </div>



    </div>
</template>

<script>
import {
  getCheckTheStatusOfYourPaymentByIntegralApi, getDetermineTheInventoryOfTheProductApi,
  getGiftApi,
  getGiftCategoryApi,
  getIntegralOrdersProcessingApi
} from "@/api/cashier/integral";
  import BigNumber from 'bignumber.js';
  import PointsCashier from "@/views/cashier/NewComponents/integralOrder/pointsCashier";
  import {getDicts} from "@/api/dict/data";
import {getUserInfoMobile, getUserVoMobile, getUserVoName} from "@/api/cashier/user";
import {getUserGrade, listUserGrade} from "@/api/cashier/usergrade";
  import {queryStaffs, staffInfo} from "@/api/cashier/staff";
import {connectFlag, getLodop} from "@/api/LodopFuncs";
import {listCardFavorableRecord} from "@/api/cashier/cardfavorablerecord";
import {getReturnCode, printIntegralReport, sendPrintIndex} from "@/api/print";

  export default {
      name: "Integral",
      components: {PointsCashier},
      dict: [],
      data(){
          return{
            seekZero :0,

            baseUrl:process.env.VUE_APP_BASE_API,
            shoppingCart:[],
            giftList:'',
            giftCategoryList:'',
            queryParams: {
              categoryId:'',
              giftName:'',
              deliveryMethod:'门店自提',
              page: 1,
              pageSize: 10000,
            },
            markPurchasesAll: 0,
            // 图片根目录
            imagePath: process.env.VUE_APP_SERVER_URL,
            activeName:"first",
            input:'',

            allPoints:0,
            allAmout:0,
            allMoneyRatio:0,

            dialogVisible: false, //员工选择
            dialogVisiblevip:false, // 会员查询
            dialogVisibleMember: false,// 模糊查询会员
            dialogVisiblej: false,// 支付方式
            visflg: false,// 支付方式
            openShoppingCart: false,
            openOrderHistory: false,
            // 会员相关
            isMember: false, //是否为会员
            balance:0, // 账户余额
            member:{}, // 会员信息
            memberList:[], // 会员列表信息
            select1:'会员手机号',
            // 会员信息
            userNo:"",
            gradeName:"",
            gradeList:"",
            // 员工相关
            staffList:[],
            staff:"",
            //支付方式
            payList:[],
            authCode:'',
            isPay:true,
            isPaySuccess:false,
            isAwait: false,

            loading:false,
            paymentType : 'ALIPAY', // 默认支付宝
            payType:'支付宝支付'
            // isTheBalanceIsSufficient:false,  //余额是否充足
          }

      },
      created() {
        this.getGiftCategory();
        this.getGift();
        this.getPayList()
        this.getStaffList();
        this.getStaff();
        this.getCouponList();

      },
    directives: {
      // 注册一个局部的自定义指令 v-focus
      focus: {
        // 指令的定义
        inserted: function (el) {
          // 聚焦元素
          el.querySelector('input').focus()
        },
      },
    },
      methods:{
        changeSeekZero(){

            this.seekZero = (this.authCode - this.allAmout).toFixed(2)

        },
        // 获取所有积分商品
        async getGift() {
          if (this.queryParams.categoryId ==='first') {
            this.queryParams.categoryId = null
          }
          await getGiftApi(this.queryParams).then(res=>{
            this.giftList = res.data.records;
          })
          console.log("imagePath",this.imagePath)
        },
        // 获取商品分类
        getGiftCategory() {
          getGiftCategoryApi().then(res=>{
            this.giftCategoryList = res.data.records;
          })
        },
        // 获取支付方式
        getPayList() {
          getDicts("payment_type").then(response => {
            this.payList = response.data;
          })
        },
        payMethod(payType){
          this.paymentType = payType.dictValue
          this.payType = payType.dictLabel +"支付"
        },
        // 点击商品增加库存
        async addGift(data) {
          // if (data.giftType  === "实物商品") {
          //   //判断商品库存(原库存)是否足够
          //
          //   let stock = 1;
          //   if (data.markPurchases) {
          //     stock = data.markPurchases+1
          //   }
          //   await getDetermineTheInventoryOfTheProductApi({id:data.goodsId,
          //     stock:stock}).then(res=> {
          //     if (!res.data) {
          //       // data.markPurchases = data.markPurchases-1
          //       this.$message.error('该商品库存不足');
          //       return
          //     }
          //   })
          // }


          if (this.shoppingCart.length != 0) {
            // 只能订购加钱购
            let flag = false
            this.shoppingCart.forEach(res => {
              if (res.exchangeMethod == "积分+加钱购") {
                flag = true
              }
            })

            if (data.exchangeMethod == "积分+加钱购" || flag) {
              flag = false
              this.shoppingCart.forEach(res => {
                if (res.id != data.id ) {
                  flag = true

                  return
                }
              })
            }
            if (flag){
              this.$message.error('“加钱购”商品仅支持在单商品结算时支持积分不足情况下使用加钱购进行付款,多个商品结算不支持“加钱够”计算');
              return
            }
          }


            if (data.markPurchases) {
            if (data.markPurchases>=data.remainingInventory){
              this.$message.error('库存不足');
              return
            }
            data.markPurchases = data.markPurchases+1
          }else {
            if (data.remainingInventory == 0) {
              this.$message.error('库存不足');
              return
            }
            this.$set(data, "markPurchases", 1);
          }
          this.markPurchasesAll++
          console.log("addGift",data)




          // 计算总额
          this.dataChange(data);




          if (this.shoppingCart.length === 0) {
            this.shoppingCart.push(data);
          } else {
            let flag = false;
            this.shoppingCart.forEach(shopp=>{
              if (data.id === shopp.id) {
                flag = true;
              }
            })
            if (!flag) {
              this.shoppingCart.push(data);
            }
          }
          this.allData();


          // 计算余额是否足够
        },
        handleClick(tab, event){
          this.getGift()
        },
        // 选择会员
        chooseUser(mobile,id){
          console.log("this.member",this.member)
          if (this.member.id) {
            this.dialogVisiblevip = false
            this.isMember = true;
            // this.map.payUser = mobile;
            // this.map.userId = id;
            this.balance = this.member.cardBalance;
            if (this.balance>=(this.oilAmount - this.oilDiscount)){
              this.consumeAmount = this.oilAmount - this.oilDiscount;
              this.oilActualPay = 0;
            }else {
              this.consumeAmount = this.balance;
              this.oilActualPay = this.oilAmount - this.oilDiscount - this.balance;
            }
          }else {
            this.$message.error('请先选择会员');

          }

        },
        // 选择会员信息
        handleChoose(data){
          this.member = data;
          this.dialogVisibleMember = false;
          this.allData();
        },
        // 根据手机号查询会员信息
        getUser(){
          if(this.select1=="会员手机号"){
            getUserInfoMobile({mobile:this.userNo}).then( response => {
              if (response.data!=null){
                this.member = response.data
              }else {
                this.$modal.msgError("会员信息不存在")
              }
            })
          }else {
            getUserVoName({name:this.userNo}).then( response => {
              this.memberList = response.data.userVo
            })
            this.dialogVisibleMember = true;
          }
        },
        // 获取会员等级信息
        // getGrade(id){
        //   getUserGrade(id).then( response => {
        //     this.gradeName = response.data.name;
        //   })
        //   return this.gradeName;
        // },
        // 重置会员
        resetMember(){
          this.member = {};
          this.isMember = false;
          this.userNo = "";
        },
        // 获取当前账户信息
        getStaff(){
          staffInfo().then( response => {
            // this.staff = response.data;
            console.log("response",response.data)
            this.staff = response.data;
            // this.map.staffId = this.staff.id;
          })
        },
        // 选择员工信息
        chooseStaff(data){
          this.staff = data;
          // this.map.staffId = this.staff.id;
        },
        // 获取员工列表
        getStaffList(){
          queryStaffs().then( response => {
            this.staffList = response.data
          })
        },
        // 重置
        async reset() {
          this.shoppingCart=[]
          this.markPurchasesAll = 0
          this.allPoints=0
          this.allAmout=0
          this.allMoneyRatio=0
          this.giftList = ''
          this.getGiftCategory();

          await this.getGift();
          // this.paymentType = ''
          this.resetMember()
        },
        // 打开购物车
        shoppingCartMethod() {
          if (this.shoppingCart == [] || this.shoppingCart.length < 1) {
            this.$message({
              message: '请先选择商品！',
              type: 'warning'
            });
          } else {
            this.openShoppingCart = true
            this.dataChange(this.shoppingCart[0])
          }
        },
        // 购物车页面计算
        changePurchases(data) {
          //计算总积分
          this.dataChange(data);
          this.allData()
        },
        changeCompute(newValue,oldValue){
          this.markPurchasesAll = this.markPurchasesAll + (newValue - oldValue)
        },
        // 删除商品
        delShooping(data) {

          if (this.markPurchasesAll >= data.markPurchases) {
            this.markPurchasesAll = this.markPurchasesAll - data.markPurchases
          }
          data.markPurchases = 0;
          this.shoppingCart = this.shoppingCart.filter(item => item.id !== data.id);
          this.allData()
        },
        allData() {
          this.allPoints = 0
          this.allAmout = 0
          let allPoints = new BigNumber(this.allPoints)
          let allAmout = new BigNumber(this.allAmout)
          let allMoneyRatio = new BigNumber(this.allMoneyRatio)

          console.log("this.shoppingCart",this.shoppingCart)

          this.shoppingCart.forEach(res => {
            if (res.exchangePoints_sum) {
              let exchangePoints_sum = new BigNumber(res.exchangePoints_sum);
              allPoints = allPoints.plus(exchangePoints_sum);
            }
            // todo   计算
            if (res.exchangeAmount_sum) {
              let exchangeAmount_sum = new BigNumber(res.exchangeAmount_sum);
              allAmout = allAmout.plus(exchangeAmount_sum);
            }
          });

          // 计算加钱购
          if (this.shoppingCart && this.shoppingCart.length === 1 && this.shoppingCart[0].exchangeMethod === '积分+加钱购' && this.shoppingCart[0].moneyRatio) {
            let data = this.shoppingCart[0];
            // 计算加钱购商品一共多少积分
            let markPurchases = new BigNumber(data.markPurchases);
            let exchangePoints = markPurchases.multipliedBy(new BigNumber(data.exchangePoints));
            // 拿到总的积分
            this.member.points = this.member.points?this.member.points:0
            let points = this.member.points - exchangePoints.toNumber(); // 使用 toNumber() 获取 BigNumber 的数值
            if (this.member.points<0) {
              points = 0
            }
            // 以及分等一多少
            if (points < 0) {

              // 计算需要的金额
              points = Math.abs(points);


              allAmout = points * data.moneyRatio; // 直接使用 JavaScript 中的乘法
              this.allAmout = allAmout.toFixed(2);
              this.allPoints = this.member.points;
            } else {
              console.log("计算加钱购",exchangePoints)
              console.log("计算加钱购",this.member.points)

              this.allAmout = 0
              this.allPoints = exchangePoints.toNumber();
            }
            return
          }


          // 更新组件的值
          this.allPoints = Number(allPoints).toFixed(2);
          this.allAmout = Number(allAmout).toFixed(2);
        },
        dataChange(data) {
          // 判断支付方式 (计算积分)
          if (data.exchangeMethod =='积分'){
            let exchange = new BigNumber(data.exchangePoints);
            let mark = new BigNumber(data.markPurchases);
            let exchangePoints_sum = exchange.multipliedBy(mark);
            if (data.exchangePoints_sum) {
              data.exchangePoints_sum = Number(exchangePoints_sum);
            }else {
              this.$set(data, "exchangePoints_sum", exchangePoints_sum);
            }
            if (data.totalPoints_sum) {
              data.totalPoints_sum = exchangePoints_sum.toString()+"积分";
            }else {
              this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分");
            }
          }else if (data.exchangeMethod =='金额') {
            let amount = new BigNumber(data.exchangeAmount);
            let mark = new BigNumber(data.markPurchases);
            let exchangeAmount_sum = amount.multipliedBy(mark);

            if (data.exchangeAmount_sum) {
              data.exchangeAmount_sum = Number(exchangeAmount_sum);
            }else {
              this.$set(data, "exchangeAmount_sum", exchangeAmount_sum);
            }
            if (data.totalPoints_sum) {
              data.totalPoints_sum = "￥"+exchangeAmount_sum.toString();
            }else {
              this.$set(data, "totalPoints_sum", "￥"+exchangeAmount_sum);
            }
          }else if (data.exchangeMethod =='积分+金额') {
            let exchange = new BigNumber(data.exchangePoints);
            let mark = new BigNumber(data.markPurchases);
            let exchangePoints_sum = exchange.multipliedBy(mark);

            if (data.exchangePoints_sum) {
              data.exchangePoints_sum = Number(exchangePoints_sum);
            }else {
              this.$set(data, "exchangePoints_sum", exchangePoints_sum);
            }

            let amount = new BigNumber(data.exchangeAmount);
            let exchangeAmount_sum = amount.multipliedBy(mark);

            if (data.exchangeAmount_sum) {
              data.exchangeAmount_sum = Number(exchangeAmount_sum);
            }else {
              this.$set(data, "exchangeAmount_sum", exchangeAmount_sum);
            }
            if (data.totalPoints_sum) {
              data.totalPoints_sum = exchangePoints_sum.toString()+"积分"+"+"+"￥"+exchangeAmount_sum.toString();
            }else {
              this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+"￥"+exchangeAmount_sum);
            }

          }else if (data.exchangeMethod =='积分+加钱购') {


            let exchangePoints_sum = 0
            let exchangeAmount_sum = 0

            // let data1 = this.shoppingCart[0];
            // 计算加钱购商品一共多少积分
            let markPurchases = new BigNumber(data.markPurchases);
            let exchangePoints = markPurchases.multipliedBy(new BigNumber(data.exchangePoints));
            // 拿到总的积分
            this.member.points = this.member.points?this.member.points:0
            let points = this.member.points - exchangePoints.toNumber(); // 使用 toNumber() 获取 BigNumber 的数值
            console.log("points",points)
            // 以及分等一多少
            if (points < 0) {

              // 计算需要的金额
              points = Math.abs(points);


              exchangeAmount_sum = points * data.moneyRatio; // 直接使用 JavaScript 中的乘法
              exchangeAmount_sum = exchangeAmount_sum.toFixed(2);

              exchangePoints_sum = this.member.points;
            } else {
              exchangeAmount_sum = 0
              exchangePoints_sum = exchangePoints.toNumber();
            }
            this.$set(data, "exchangePoints_sum", exchangePoints_sum)
            this.$set(data, "exchangeAmount_sum", exchangeAmount_sum)


            if (data.totalPoints_sum) {
              data.totalPoints_sum = exchangePoints_sum+"积分"+"+"+exchangeAmount_sum+"";
            }else {
              this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+exchangeAmount_sum+"");

            }
            console.log("数据",data)
            return

            //
            // let exchange = new BigNumber(data.exchangePoints);
            // let mark = new BigNumber(data.markPurchases);
            // let exchangePoints_sum = exchange.multipliedBy(mark);
            // this.$set(data, "exchangePoints_sum", exchangePoints_sum);
            //
            // if (data.exchangePoints_sum) {
            //   data.exchangePoints_sum = Number(exchangePoints_sum);
            // }else {
            //   this.$set(data, "exchangePoints_sum", exchangePoints_sum);
            // }
            //
            // let ratio = new BigNumber(data.moneyRatio);
            // let moneyRatio_sum = ratio.multipliedBy(mark);
            // this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"");
            //
            // if (data.moneyRatio_sum) {
            //   data.moneyRatio_sum = moneyRatio_sum;
            // }else {
            //   this.$set(data, "moneyRatio_sum", moneyRatio_sum);
            // }
            // if (data.totalPoints_sum) {
            //   data.totalPoints_sum = exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"";
            // }else {
            //   this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"");
            //
            // }
            // console.log("data积分",data)
          }
        },
        // 打开订单记录
        orderHistoryMethod() {
          this.openOrderHistory = true
        },
        // 立即结算
        async settlement(){
          if (this.shoppingCart.length <1){
            this.$message.error('请先选择商品');
            return
          } else if(!this.paymentType) {
            this.$message.error('请先选择支付方式');
            return
          }
          this.isPay = true;
          this.dialogVisiblej = true
          if (this.paymentType !== 'CASH') {
            if (this.allAmout != 0) {
              // 发送扫码机请求（易联云网络下发）
              await this.getSendPrintIndex(this.allAmout);
              this.getCode(this.allAmout)

            }

          }
        },
        // 网络下发之后获取条码
        getCode(amount) {
          this.jishuqi++;
          if (this.jishuqi == 30) {
            this.jishuqi = 0
            return
          }
          getReturnCode ({payAmount:amount}).then(res=>{
            if (res.data === "300") {
              setTimeout(() => {
                this.getCode(amount); // 重新发起请求
              }, 1000); // 停顿一秒
            }else {
              this.authCode = res.data
            }
          })
        },
        getSendPrintIndex(amount) {
          sendPrintIndex({payAmount:amount}).then(ress=>{
            if (ress.data != "success") {
              this.$modal.msgError("扫码机发起付款失败！")
              return;
            }
          })
        },
        integralReport() {
          let shoppingCart = []
          this.shoppingCart.forEach(res=>{
            let price = ''
            if (res.exchangeMethod == '积分' || res.exchangeMethod == '积分+金额' || res.exchangeMethod == '积分+加钱购') {
              price = res.exchangePoints+"积分"
            }
            if (res.exchangeMethod == '积分+金额'){
              price = price+"+"
            }
            if (res.exchangeMethod == '金额' || res.exchangeMethod == '积分+金额'){
              price = price+"￥"+res.exchangeAmount
            }
            if (res.exchangeMethod == '积分+加钱购'){
              price = price +"+"+res.moneyRatio+"加钱比例"
            }
            let a = {
              giftName:res.giftName,
              markPurchases:res.markPurchases,
              price:price
            }
            shoppingCart.push(a)
          })
          let f = {
            shoppingCart:shoppingCart,
            allPoints:this.allPoints,
            allAmout:this.allAmout
          }
          printIntegralReport(f).then(res=>{

          })

        },


        // 确定收款
        async collection() {
          let isPayFlag = false

          let this_ = this

          let actualPayment = 0
          let makeChange = 0
          if (this_.paymentType === "CASH") {
            actualPayment = this.authCode
            makeChange = this.seekZero
          }

          // this_.authCode
          let integralOrdersList = []
          if (this_.shoppingCart.length >0) {
            //数组组装
            console.log("this_.shoppingCart",this_.shoppingCart)
            this_.shoppingCart.forEach(res =>{
              let integralOrders = {
                userId : this_.member.id,
                giftId : res.id,
                amount : res.exchangeAmount_sum,
                integral : res.exchangePoints_sum,
                exchangeQuantity : res.markPurchases,
                orderType : 1,
                staffId: this_.staff.id,
                paymentType : this_.paymentType,
                actualPayment : actualPayment,
                makeChange : makeChange
              }
              integralOrdersList.push(integralOrders)
            })
            let flag = false
            let orderNumber = '';
            await getIntegralOrdersProcessingApi({
              integralOrdersList:integralOrdersList,
              authCode:this_.authCode,
              paymentType:this_.paymentType,
              allAmout:this_.allAmout,
              allPoints:this_.allPoints,
            }).then(response=> {
              if (response.data!=null){
                this_.loading = true;
                orderNumber = response.data.orderNumber
                if (response.data.status == "un") {
                  this.$message.error('积分已不足');
                  this_.loading = false;
                  flag = true
                }
              }
            });
            if (flag) return
            let timer = setInterval(async () => {
              await getCheckTheStatusOfYourPaymentByIntegralApi({orderNumber:orderNumber}).then(response => {
                if (response.data!=null){
                  if (response.data.status == "unpaid"){
                    this_.isQuery = true;
                  }
                  if (response.data.status == "paid"){
                    this_.isPaySuccess = true;
                    isPayFlag = true
                    this_.isQuery = false;
                    clearInterval(timer);
                    // this_.printLocally()
                  }
                  if (response.data.status == "payFail"){
                    this_.isPaySuccess = false;
                    this_.isQuery = false;
                  }
                }
              })
            }, 500);

            let timer2 = setInterval(function () {
              if (this_.isQuery == false) {
                this_.loading = false;
                this_.isPay = false;
                console.log("isPayFlag",isPayFlag)
                if (isPayFlag) {
                  // this_.printLocally()
                  this_.integralReport()
                  isPayFlag = false
                }
                clearInterval(timer);
                clearInterval(timer2);
                clearTimeout(timer3);
              }
            },500)

            let timer3 = setTimeout(function (){
              clearInterval(timer2);
              clearInterval(timer);
              this_.loading = false;
              this_.isPay = false;
              this_.isAwait = true;

              this.isPaySuccess = false;

            },15000)

            // console.log("isPayFlag",isPayFlag)

          }


          // this.paymentType = ''
        },
        // 获取优惠券列表信息
        getCouponList(){
          listCardFavorableRecord().then(response => {
            this.couponList = response.data.records
          })
          let map = {
            page:1,
            pageSize:20,
          }
          listUserGrade(map).then(response => {
            this.gradeList = response.data.records
          })
        },
        // 获取会员等级id
        getGradeName(list,id){
          let name = "";
          list.forEach(item => {
            if (item.id == id){
              name = item.name
            }
          })
          this.gradeName = name;
          return name;
        },
        // 清楚数据
        handClose(){
          // if(this.isPaySuccess){
          //   this.oilAmount = 0;
          //   this.oilActualPay = 0;
          //   this.oilDiscount = 0;
          //   this.goodsAmount = 0;
          //   this.goodsActualPay = 0;
          //   this.goodsDiscount = 0;
          //   this.consumeAmount = 0;
          //   this.oilTotal = 0;
          //   this.goodsTotal = 0;
          // }
          this.isPay=true,
          this.isPaySuccess=false,
          this.isQuery=true,
          this.openConfirm = false
          this.openRecharge = false

          // this.reset()
          this.dialogVisiblej = false
          this.visflg = false
          this.authCode = '';
        },
        async printLocally(data) {
          if (!connectFlag){
            return
          }
          //初始化打印函数
          let LODOP = getLodop(); // 初始化打印
          LODOP.PRINT_INIT();
          var bodyStyle = `<style>
            .input-box{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 5px 0px;
              }
             .box-ge{
                border-bottom: 1px solid #000000 ;
                box-sizing: border-box;
                padding: 10px;
              }
              .box-title{
                font-size: 18px;
                text-align: center;
                align-items: center;
                margin-top: 15px;
              }
              .input-hui{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 15px 0px;
                background: #b2b2b2;
                box-sizing: border-box;
                padding: 5px 0px;
              }
              .input-hui-frou{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 15px 0px;
                background: #b2b2b2;
                box-sizing: border-box;
                padding: 5px 0px;
                div{
                  width: 25%;
                  text-align: left;
                }
              }
              .input-box-frou{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                margin: 5px 0px;
                div{
                  width: 25%;
                  text-align: left;
                }
              }
              .box-center{
                height: 500px;
              }
            </style>
            `
          // var fromHtml = bodyStyle+this.$refs.report.innerHTML
          var fromHtml = ''

          fromHtml = bodyStyle+this.$refs.report.innerHTML


          // LODOP.PRINT_INITA(0, 0, 665, 600, '模板设计')
          LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);
          // LODOP.SET_PRINT_PAGESIZE(100,100,100,100)

          LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true);

          // LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
          // let preview = LODOP.PREVIEW();
          // console.log("preview",preview);
          LODOP.PRINT();

        },
      },
    watch: {
      dialogVisiblej(newValue) {
        if (!newValue && !this.visflg) {
          console.log("newValue",newValue)

          this.queryParams= {
            categoryId:'',
            giftName:'',
            deliveryMethod:'门店自提',
            page: 1,
            pageSize: 10000,
          },
            this.seekZero = 0
          this.handClose()
          this.reset()

        } else {
          this.visflg = false
        }
      }
    },
    computed: {
      isTheBalanceIsSufficient(){
        if (this.member && this.member.points !== undefined) {
          const allPoints = new BigNumber(this.allPoints);
          const points = new BigNumber(this.member.points);
          return points.minus(allPoints).toNumber() >= 0;
        }
        return false;
      }
    }
    }
</script>

<style scoped lang="scss">
  .app-center{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    height: 100vh;
  }
  .center-left{
    width: 33%;
    border-radius: 8px;
    overflow: hidden;
    height: 98vh;
    position: relative;
  }
  .bottom-posi{
    width: 100%;
    position: absolute;
    bottom: 0px;
  }
  .center-app{
    width: 33%;
    border-radius: 8px;
    overflow: hidden;
    /*background: white;*/

  }
  .center-right{
    width: 65%;
    border-radius: 8px;
    overflow: hidden;
    margin: 0px 10px;
    height: 98vh;
    /*background: white;*/
  }
  .center-top{
    width: 100%;
    height: 86vh;
    background: white;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px;
    position: relative;

  }
  .center-top-title{
    box-sizing: border-box;
    padding: 10px 0px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .center-top-tab{
    box-sizing: border-box;
    padding: 15px 0px;

  }
  .center-top-input{
    width: 100%;
    height: 60px;
    background: #f8f8f8;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    input{
      width: 90%;
      font-size: 18px;
      border: none;
      outline: none;
      background-color:transparent;
    }

  }
  .center-top-data{
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;


    /*background-color: #f8f8f8;*/
  }
  .center-top-of{
    width: 100%;
    /*background-color: #99a9bf;*/
    height: 70vh;
    overflow: auto;


  }
  .wrap-wrap{
    display: flex;
    flex-wrap: wrap;
  }
  .of-box{
    width: 31%;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #b4d5ff;
    height: 110px;
    padding: 10px;
    color: #3e4f60;
  }
  .of-title{
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    margin: 13px;
  }
  .data-top{
    width: 100%;
    background-color: #ededed;
    box-sizing: border-box;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .data-top-box{
    width: 100%;
    /*background-color: #ededed;*/
    box-sizing: border-box;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .data-top-three{
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }
  .data-top-title{
    width: 45%;
    overflow: hidden;
  }
  .content-top-bottom{
    position: absolute;
    bottom:-16px;
    width: 98%;
    border-top: 1px solid #ececec;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translate(-50%,-50%);
    left: 50%;
    color: #2c3e50;
    font-size: 18px;
    box-sizing: border-box;
    padding: 15px ;
    background-color: white;


  }
  .center-left-top{
    width: 100%;
    background: #FF9655;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .center-vh{
    /*height: 68vh;*/
  }
  .center-left-hj{
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 2px;
  }
  .center-left-th{
    background: white;
    box-sizing: border-box;
    padding: 15px;
    margin: 10px auto;
  }
  .center-left-wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*margin-top: 280px;*/
  }
  .wrap-box{
    width: 31%;
    background: #ffffff;
    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;

  }
  .wrap-box :hover{
    /*background: #00afff !important;*/
    width: 100%;
    height: 100%;

    border-radius: 8px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #00afff;
    cursor: pointer;
    /*color: white;*/
  }

  .wrap-box2{
    background: #30a1ff !important;
    color: white;
    //width: 100%;
    //height: 100%;
    //border-radius: 8px;
    //height: 80px;
    //display: flex;
    //align-items: center;
    //justify-content: center;
    //border: 1px solid #20b400;
    //cursor: pointer;
    //color: #20b400;
  }

  .center-left-bottom{
    width: 100%;
    background-color: white;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom-qk{
    border: 1px solid #99a9bf;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 50px;
    color: #99a9bf;
    margin: 15px 0px ;
  }
  .bottom-qd{
    border: 1px solid #13ce66;
    background: #13ce66;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 50px;
    color: #ffffff;

    margin: 15px 10px ;
  }
  .bottom-gd{
    border: 1px solid #FF9655;
    background: #FF9655;
    box-sizing: border-box;
    padding: 14px 20px;
    border-radius: 50px;
    color: #ffffff;

    margin: 15px 10px ;
  }

  .bottom-price{
    font-size: 26px;
    font-weight: bold;
  }
  .price-red{
    color: red;
  }
  .center-left-lv{
    width: 60%;
    height: 80px;
    background-color: #13ce66;
    color: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
  }
  .th-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f8f9;
    box-sizing: border-box;
    padding: 10px 0px;
  }
  .hj-box{
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bule{
    font-weight: 700;
    color: #FF9655 !important;
  }
  .vip-bottom{
    border: 1px solid #ffffff;
    box-sizing: border-box;
    padding: 5px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
  }
  .center-right-top{
    width: 100%;
    background: white;
    height: 75px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wrap-right{
    width: 100%;
    height: 78vh;
    background: white;
    overflow: auto;
  }
  .ts-box{
    display: flex;
    flex-wrap: wrap;
  }

  .wrap-right-box{
    width: 205px;
    height: 270px;
    /*margin-right: 10px;*/
    /*margin-bottom: 10px;*/
    margin: 5px;
  }
  .box-six{

    width: 100%;
    height: 160px;
    img{
      width: 100%;
      height: 100%;
    }

  }
  .title-red{
    font-size: 18px;
    font-weight: bold;
    color: rgb(238, 59, 62);
  }
  .title-hui{
    font-size: 14px;
    /*font-weight: bold;*/
    color: #999999;
    margin: 5px 0px;
  }
  .title-goods{
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  .wrap-right-bottom{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 15px;
    justify-content: space-between;
  }
  .chongzhi{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-sizing: border-box;
    padding: 10px 15px;
    border: 1px solid #999999;
    font-size: 20px;
    cursor: pointer;

  }
.ddjil{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 10px 15px;
  border: 1px solid #13ce66;
  font-size: 20px;
  background: #13ce66;
  color: white;
  margin: 8px 10px;
  cursor: pointer;
}
  .gwuc{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    box-sizing: border-box;
    padding: 10px 25px;
    border: 1px solid #FF9655;
    font-size: 20px;
    background: #FF9655;
    color: white;
    margin: 8px 10px;
    cursor: pointer;
  }
</style>
