oil-station/fuintAdmin/src/views/member/userInfo.vue

<template>
  <div class="app-container">
    <el-card>
      <div slot="header" style="display: flex;justify-content: space-between;padding-right: 0px">
        <div>
          <el-page-header @back="goBack" content="详情页面"></el-page-header>
        </div>
        <div>
          <el-button type="primary" plain round @click="subCard">子卡管理<i
            class="el-icon-bank-card el-icon--right"></i></el-button>
          <!--          <el-button type="primary" plain round>会员码</el-button>-->
        </div>
      </div>
      <div>基础资料</div>
      <div style="display: flex;margin-top: 20px">
        <div class="left">
          <div>
            <img v-if="form.avatar" :src="baseUrl+form.avatar" style="width: 80px;height: 80px;border-radius: 50%">
            <img v-else src="@/assets/images/avatar.png" style="width: 80px;height: 80px">
          </div>
          <!--          <el-button type="warning" plain round size="mini" style="margin: 10px" @click="bindIdCard">绑定实体卡</el-button><br>-->
          <el-button type="primary" icon="el-icon-bank-card" round style="margin: 10px;width: 50%;height: 40px"
                     @click="userRecharge">会员充值
          </el-button>
        </div>
        <div class="right">
          <el-descriptions>
            <el-descriptions-item label="手机号">{{ form.mobile }}
              <el-tag size="mini" @click="replaceMobile">更换</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="会员昵称">
              <span style="color: #00afff" @click="changeName">{{ form.name ? form.name : "--" }}</span>
            </el-descriptions-item>
            <!--            <el-descriptions-item label="实体卡号">{{form.idcard ? form.idcard : "&#45;&#45;"}}</el-descriptions-item>-->
            <!--            <el-descriptions-item label="绑定信息">&#45;&#45;</el-descriptions-item>-->
            <el-descriptions-item label="会员状态">
              <dict-tag :options="dict.type.zhzt" :value="form.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="加油次数">{{ form.consumeNum }}</el-descriptions-item>
            <el-descriptions-item label="加油总金额">{{ form.refuelMoney ? form.refuelMoney : "--" }}
            </el-descriptions-item>
            <!--            <el-descriptions-item label="所属油站">{{ store.name }}</el-descriptions-item>-->
            <el-descriptions-item label="注册时间">{{ form.createTime }}</el-descriptions-item>
            <el-descriptions-item label="关联子卡">
              <span style="color: #00afff" @click="subCard">子卡管理</span>
            </el-descriptions-item>
            <el-descriptions-item label="会员等级">
              {{ grade ? grade.name : "--" }}
            </el-descriptions-item>
            <!--            <el-descriptions-item label="储值优惠">&#45;&#45;</el-descriptions-item>-->
            <!--            <el-descriptions-item label="每日笔数">-->
            <!--              <span style="color: #00afff" @click="configuration">跟随全局总配置</span>-->
            <!--            </el-descriptions-item>-->
            <el-descriptions-item label="固定等级">
              <span style="color: #00afff" @click="level">
                {{ form.fixingLevel ? fixingLevelinfo(fixingLevelList, form.fixingLevel) : "--" }}
                <!--                <dict-tag :options="dict.type.zcrzdj" :value="form.fixingLevel"/>-->
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="备注信息">{{
                form.description ? form.description : "--"
              }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <el-card style="margin: 20px 0">
      <div>会员资产</div>
      <div>
        <template>
          <div>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :value="form.points"
                    title="累计积分"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :value="form.growthValue"
                    title="成长值">
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="form.cardBalance"
                    title="账户余额"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="sta">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="form.refuelMoney"
                    title="囤油卡余额"
                  >
                    <!--                    <span></span>-->
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
    </el-card>

    <el-card :key="childComponentKey">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="加油订单" name="refuelOrder">
            <oilOrder :key="childComponentKey" :pUserId="form.id"></oilOrder>
          </el-tab-pane>
          <el-tab-pane label="商品订单" name="shopOrder">
            <goodsOrder :key="childComponentKey" :pUserId="form.id"></goodsOrder>
          </el-tab-pane>
          <el-tab-pane label="余额记录" name="balanceRecord">
            <balanceRecord :key="childComponentKey" :pUserId="form.id"></balanceRecord>
          </el-tab-pane>
          <el-tab-pane label="积分记录" name="pointRecord">
            <pointsRecord :key="childComponentKey" :pUserId="form.id"></pointsRecord>
          </el-tab-pane>
          <el-tab-pane label="卡券列表" name="cardList">
            <couponList :key="childComponentKey" :pUserId="form.id"></couponList>
          </el-tab-pane>
          <el-tab-pane label="成长值记录" name="growthValue">
            <growthValueRecord :key="childComponentKey" :pUserId="form.id"></growthValueRecord>
          </el-tab-pane>
          <!-- <el-tab-pane label="加油金记录" name="refuelMoney"> -->
          <!-- <refuelMoneyRecord :pUserId="form.id"></refuelMoneyRecord> -->
          <!-- </el-tab-pane> -->
        </el-tabs>
      </template>
    </el-card>

    <!--    会员充值-->
    <el-dialog :close-on-click-modal="false" width="60%" :title="title" :visible.sync="openRecharge" append-to-body>
      <template>
        <el-tabs v-model="activeRecharge" type="card" @tab-click="handleClick">
          <el-tab-pane label="储值卡" name="balance">
            <div>
              <el-row>
                <el-col :span="1.5">
                  <div style="height: 50px;line-height: 50px">充值金额</div>
                </el-col>
                <el-col :span="22">
                  <div v-if="cardValueList.length>0"
                       style="display: flex;margin: 13px 5px;box-sizing: border-box;flex-wrap: wrap; ">
                    <div class="mon"
                         v-for="(item,index) in cardValueList" :key="index"
                         :class="activeKey === index ? 'select' : ''"
                         @click="rechargeCard(index)">
                      <div class="top1"><span class="amount1">{{ item.rechargeBalance }}</span>元</div>
                      <div>赠送<span class="amount">{{ item.giftBalance }}</span>元</div>
                    </div>
                  </div>

                  <div style="width: 30%;margin-left: 13px;margin-top: 8px;"
                       :class="activeKey === cardValueList.length ? 'select' : ''"
                       @click="rechargeCard(cardValueList.length,-1)">
                    <el-input placeholder="请输入充值金额"
                              size="medium"
                              v-model="cardValueForm.amount"
                              @input="valueAmoutChange(cardValueForm.amount)"
                              oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                    >
                      <template slot="prepend">自定义</template>
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div style="display: flex;justify-content: space-between;margin: 20px 0">
                    <div class="jine">
                      <div class="zeng">赠送金额</div>
                      <div>
                        <el-input placeholder="0.00"
                                  v-model="cardValueForm.giftBalance"
                                  disabled>
                          <template slot="append">元</template>
                        </el-input>
                        <span class="bom">赠送金额 仅自定义金额模式下可手动输入赠送、活动充值赠送金额不可手动更改</span>
                      </div>
                    </div>

                    <div class="jine">
                      <div class="zeng">赠送积分</div>
                      <div>
                        <el-input placeholder="0"
                                  v-model="cardValueForm.points"
                                  disabled>
                          <template slot="append">积分</template>
                        </el-input>
                        <span
                          class="bom">赠送积分 仅自定义金额模式下可手动输入,活动充值赠送积分不可手动更改[需开启积分活动有效]</span>
                      </div>
                    </div>

                    <div class="jine">
                      <div class="zeng" style="width: 100px;">赠成长值</div>
                      <div>
                        <el-input placeholder="0"
                                  v-model="cardValueForm.growthValue"
                                  disabled>
                          <template slot="append">成长值</template>
                        </el-input>
                        <!-- <span class="bom">赠送加油金金额 仅自定义金额模式下可手动输入赠送、活动充值赠送金额不可手动更改</span> -->
                      </div>
                    </div>

                    <div class="jine">
                      <div class="zeng">提成员工</div>
                      <div>
                        <el-input :readonly="true" placeholder="请选择提成员工" v-model="cardValueForm.realName">
                          <el-button slot="append" @click="chooseStaff">选择员工</el-button>
                        </el-input>
                        <span class="bom">仅系统储值档次支持提成员工选择、自定义充值金额匹配低一档次</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div style="display: flex">
                    <div style="width: 7%">充值备注</div>
                    <el-input
                      type="textarea"
                      placeholder=""
                      v-model="cardValueForm.remark"
                      maxlength="255"
                      show-word-limit
                    >
                    </el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div style="display: flex;margin: 20px 0">
                    <div style="width: 7%">支付方式</div>
                    <div>
                      <el-radio v-for="dict in payList" v-model="cardValueForm.paymentType"
                                v-if="dict.dictValue!='APPLET_CODE'"
                                :key="dict.dictValue" :label="dict.dictValue" :value="dict.dictValue" border>
                        {{ dict.dictLabel }}
                      </el-radio>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div style="margin: 20px 0;text-align: center">
                <el-button type="primary" @click="confirm(1)">确认充值</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="存油卡" name="literCard">
            <el-row>
              <el-col :span="24">
                <div style="display: flex">
                  <div style="width: 7%;line-height: 40px">油品类型</div>
                  <el-radio-group v-model="tabOilType" style="margin-bottom: 30px;">
                    <el-radio-button v-for="(item,index) in oilTypeList" :label="item.oilType"
                                     @click.native="tabOilTypeClick(item.oilType)">
                      {{ item.type }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="1.5">
                <div style="height: 50px;line-height: 50px;">充值金额</div>
              </el-col>
              <el-col :span="22">
                <div style="display: flex;margin: 20px 5px;box-sizing: border-box;flex-wrap: wrap;">
                  <div class="mon2"
                       v-for="(item,index) in cardFuelDieselList" :key="index"
                       :class="activeKey === index ? 'select' : ''"
                       @click="recharge(index)">
                    <div class="top1"><span class="amount1">{{ item.incomeLitres }}</span>L</div>
                    <div>售价<span class="amount">{{ item.rechargeBalance }}</span>元</div>
                    <div>锁价<span class="amount">{{ item.lockupPrice }}</span>/升</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="display: flex;margin: 20px 0">
                  <div class="jine">
                    <div class="zeng">赠送积分</div>
                    <div>
                      <el-input placeholder="0" disabled v-model="cardFuelDieselForm.points">
                        <template slot="append">积分</template>
                      </el-input>
                      <span
                        class="bom">升数卡充值不支持自定义积分,选择对应充值活动获得对应积分[需开启积分活动有效]</span>
                    </div>
                  </div>
                  <div style="display:flex;margin-left: 20px">
                    <div style="line-height: 40px;width: 20%">提成员工</div>
                    <div>
                      <el-input :readonly="true" placeholder="请选择提成员工" v-model="cardFuelDieselForm.realName">
                        <el-button slot="append" @click="chooseStaff">选择员工</el-button>
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="display: flex">
                  <div style="width: 7%">充值备注</div>
                  <el-input
                    type="textarea"
                    placeholder=""
                    v-model="rechargeDesc"
                    maxlength="255"
                    show-word-limit
                  >
                  </el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div style="display: flex;margin: 20px 0">
                  <div style="width: 7%">支付方式</div>
                  <div>
                    <el-radio v-for="dict in payList" v-model="cardFuelDieselForm.paymentType"
                              v-if="dict.dictValue!=='APPLET_CODE'"
                              :key="dict.dictValue" :label="dict.dictValue" :value="dict.dictValue" border>{{ dict.dictLabel }}
                    </el-radio>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div style="margin: 20px 0;text-align: center">
              <el-button type="primary" @click="confirm(2)">确认充值</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>

    <!--    选择员工-->
    <el-dialog :close-on-click-modal="false" width="50%" height="50%" title="选择员工" :visible.sync="openStaff"
               append-to-body>
      <select-staff @send-data="handleDataFromChild">

      </select-staff>
    </el-dialog>

    <!--    确认充值-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openConfirm" width="500px" append-to-body>
      <div v-if="isPay"
           v-loading="loading">

        <div style="text-align: center;font-size: 15px;font-weight: bold">付款金额</div>
        <div style="text-align: center;font-size: 30px;font-weight: bold;color: red;margin: 10px 0">
          ￥{{ realyPayBills }}
          <!-- <el-tag
            effect="dark">
            汽油
          </el-tag> -->
        </div>
        <!-- <div style="text-align: center;margin-bottom: 10px">赠送金额</div> -->
        <div>
          <el-input v-model="authCode" @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>
        <el-divider></el-divider>
        <div style="display: flex;justify-content: space-around">
          <el-button @click="cancelCollection">取消收款</el-button>
          <el-button type="primary" @click="collection">确定收款</el-button>
        </div>
      </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>
          <el-result icon="error" title="支付失败，请重新支付">
            <template slot="extra">
              <el-button type="primary" @click="handClose">关 闭</el-button>
            </template>
          </el-result>
        </div>
      </div>

    </el-dialog>

    <!--    更换手机号对话框-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openMobile" style="margin-top: 200px"
               width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="新手机号" prop="mobile" style="width: 420px">
              <el-input v-model.number="form.mobile" placeholder="请输入新手机号" maxlength="30"/>
              <span style="font-size: 12px;color: grey">
                手机号更换后,旧手机号将无法使用,更换后实时生效
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openMobile = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    更换用户昵称对话框-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openName" style="margin-top: 200px"
               width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="会员昵称" prop="name" style="width: 420px">
              <el-input v-model="form.name" type="textarea" placeholder="请输入会员昵称" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openName = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    副卡管理-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openSecondCard" width="60%" append-to-body>
      <div style="display: flex;justify-content: space-between;margin: 10px 0">
        <div style="font-size: 16px">副卡账户</div>
        <el-button type="primary">创建副卡账户</el-button>
      </div>
      <div>
        <el-alert
          type="error"
          title="关于副卡"
          :closable="false">
          <p v-for="(item,index) in aboutSecondCard" :id="index">
            {{ item }}
          </p>
        </el-alert>
      </div>
      <div>
        <el-table ref="tables" v-loading="loading" :data="list">
          <el-table-column prop="date" label="账户ID"/>
          <el-table-column prop="date" label="账户名称"/>
          <el-table-column label="余额">
            <el-table-column prop="name" label="储值卡"/>
            <el-table-column prop="address" label="升数卡"/>
          </el-table-column>
          <el-table-column label="会员等级">
            <el-table-column prop="name" label="汽油"/>
            <el-table-column prop="address" label="柴油"/>
          </el-table-column>
          <el-table-column label="统计">
            <el-table-column prop="name" label="可用积分"/>
            <el-table-column prop="address" label="消费次数"/>
          </el-table-column>
          <el-table-column prop="date" label="实体卡号"/>
          <el-table-column prop="date" label="状态"/>
          <el-table-column prop="date" label="创建时间"/>
        </el-table>

        <pagination
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>

    <!--    绑定实体卡-->
    <el-dialog :close-on-click-modal="false" :title="title" width="450px" :visible.sync="openBindIdCard" append-to-body>
      <div style="text-align: center">
        <img v-if="form.avatar" :src="form.avatar" style="width: 80px;height: 80px">
        <img v-else src="@/assets/images/avatar.png" style="width: 80px;height: 80px">
      </div>
      <p class="idcard" style="color: #00afff">{{ form.name }}</p>
      <p class="idcard" style="font-size: 16px">{{ form.mobile }}</p>
      <p class="idcard" style="font-size: 16px">请绑定实体卡号</p>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <div style="width: 80%;margin: 0 auto">
          <el-input v-model="form.idcard" placeholder="请读卡或输入卡号"></el-input>
          <p style="font-size: 12px;color: grey;">
            实体卡号最低5位且不可重复、绑定后不可删除、如需更换卡号请在会员详情页面内进行卡片重新绑定</p>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openBindIdCard = false">取 消</el-button>
      </div>
    </el-dialog>

<!--    子卡管理-->
    <el-dialog :title="title" :visible.sync="openSubCard" append-to-body>
<!--      <cardValueChild :pUserId="form.id" :handleUpdate="handleUpdate1" :handleAdd="handleAdd1"></cardValueChild>-->
      <el-tabs v-model="subCardActive" @tab-click="handleClick">
        <el-tab-pane label="子卡管理" name="subCardManage">
          <div style="display: flex;justify-content: space-between;margin: 10px 0">
            <div style="font-size: 16px">会员信息：{{form.mobile}}</div>
            <el-button type="primary" :disabled="cardValueChildList.length>=2" @click="handleAdd1">新增子卡</el-button>
          </div>
          <div>
            <el-table ref="tables" v-loading="loading" :data="cardValueChildList">
              <el-table-column label="子卡ID" prop="id" align="center" width="60"/>
              <el-table-column label="子卡手机号" prop="cardChildPhones" align="center"/>
              <el-table-column label="创建时间" align="center" width="160" prop="createTime">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" fixed='right'>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate1(scope.row)"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-document"
                    @click="handleOrder(scope.row)"
                  >交易记录</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--          <pagination-->
            <!--            :total="total"-->
            <!--            :page.sync="queryParams.page"-->
            <!--            :limit.sync="queryParams.pageSize"-->
            <!--            @pagination="getList"-->
            <!--          />-->
          </div>
          <el-alert
            title="关于子卡"
            type="info"
            style="margin-top: 20px"
            :closable="false"
            description="子卡为会员子母卡功能,子卡共享母卡的储值额度及信息,子卡为实体会员卡信息,消费需在小程序中才可进行使用">
          </el-alert>
        </el-tab-pane>
        <el-tab-pane label="子卡消费记录" name="consumption">
          <div style="display: flex;justify-content: space-between;margin: 10px 0">
            <div style="font-size: 16px">
              <el-form :model="subCardList" ref="queryForm" size="small" :inline="true" label-width="85px">
                <el-form-item label="子卡手机号" prop="cardChildPhones">
                  <el-input
                    v-model="subCardList.cardChildPhones"
                    placeholder="请输入子卡手机号"
                    clearable
                    style="width: 240px;"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item label="支付状态" prop="status">
                  <el-select
                    v-model="subCardList.status"
                    placeholder="全部"
                    clearable
                    style="width: 240px"
                  >
                    <el-option
                      v-for="dict in dict.type.pay_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div>
            <el-table ref="tables" v-loading="loading" :data="orderList">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand" style="margin-left: 20px">
                    <el-form-item label="备注信息">
                      <span>{{ props.row.remark }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="ID" prop="id" align="center" width="60"/>
              <el-table-column label="子卡手机号" prop="cardChildPhones" align="center" />
              <el-table-column label="订单号" prop="orderNo" align="center" />
              <el-table-column label="订单金额" prop="amount" align="center" />
              <el-table-column label="消费金额" prop="payAmount" align="center" />
              <el-table-column label="支付状态" prop="status" align="center" >
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.pay_status" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="支付时间" prop="payTime" align="center" >
                <template slot-scope="scope">
                  <span>{{ scope.row.payTime ? parseTime(scope.row.payTime) :"--" }}</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              :total="total"
              :page.sync="subCardList.page"
              :limit.sync="subCardList.pageSize"
              @pagination="getOrderList"
            />
          </div>
          <el-alert
            title="关于子卡"
            type="info"
            style="margin-top: 20px"
            :closable="false"
            description="当前会员的所有子卡消费记录信息,可根据对应子卡卡号进行检索查询">
          </el-alert>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!--    每日交易次数-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openConfig" style="margin-top: 200px"
               width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <div style="margin-bottom: 20px">
              {{ transaction }}
            </div>
            <el-input v-model="config"/>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openConfig = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    固定等级-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openLevel" style="margin-top: 200px"
               width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="变更认证" prop="fixingLevel" style="width: 420px">
              <el-select
                v-model="form.fixingLevel"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="item in fixingLevelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
                <!--                <el-option-->
                <!--                  v-for="dict in dict.type.zcrzdj"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="openLevel = false">取 消</el-button>
      </div>
    </el-dialog>

<!--    添加或修改子卡信息-->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="openSubCard1" width="30%">
      <el-form ref="form1" :model="form1" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="主卡信息" prop="userId" style="width: 420px">
              <el-select
                v-model="form1.userId"
                placeholder="全部"
                clearable
                disabled
                style="width: 100%"
              >
                <el-option
                  :label="form.mobile"
                  :value="form.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="子卡手机号" prop="cardChildPhones" style="width: 420px">
              <el-input
                v-model.number="form1.cardChildPhones"
                placeholder="请输入子卡手机号"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openSubCard1 = false">取 消</el-button>
        <el-button type="primary" @click="submitSubCard">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getUser, updateUser} from "@/api/staff/user/user";
import {ljStoreInfo} from "@/api/staff/store";
import {getUserGrade, getUserGradeInfo} from "@/api/staff/user/usergrade";
import {getList} from "@/api/EventMarketing/oilBlock";
import {
  getCountOilTypeApi,
  getCardValueListApi,
  getPrepaidCardTopUpApi,
  getCheckTheStatusOfYourPaymentApi,
  getDicts,
  getPrepaidFuelTopUpApi,
  getCheckTheStatusOfYourPaymentByFuelApi
} from "@/api/EventMarketing/cardSet";
import {getSysConfig} from "@/api/staff/user/sysconfig";
import item from "../../layout/components/Sidebar/Item.vue";
import SelectStaff from "@/components/local/selectStaff";
import BigNumber from 'bignumber.js';
import oilOrder from "@/views/member/userInfoOrder/oilOrder.vue";
import goodsOrder from "@/views/member/userInfoOrder/goodsOrder.vue";
import balanceRecord from "@/views/member/userInfoOrder/balanceRecord.vue";
import pointsRecord from "@/views/member/userInfoOrder/pointsRecord.vue";
import couponList from "@/views/member/userInfoOrder/couponList.vue";
import growthValueRecord from "@/views/member/userInfoOrder/growthValueRecord.vue";
import refuelMoneyRecord from "@/views/member/userInfoOrder/refuelMoneyRecord.vue";
import cardValueChild from "@/views/member/userInfoOrder/cardValueChild.vue";
import {allFixingLevel, getFixingLevel} from "@/api/staff/user/fixinglevel";
import {
  addCardValueChild,
  cardValueChildInfo,
  editCardValueChild,
  listCardValueChild, listCardValueChildOrder
} from "@/api/staff/user/cardvaluechild";

export default {
  components: {
    SelectStaff,
    oilOrder,
    goodsOrder,
    balanceRecord,
    pointsRecord,
    couponList,
    growthValueRecord,
    refuelMoneyRecord,
    cardValueChild,
  },
  computed: {
    item() {
      return item
    }
  },
  dicts: ['official', 'zhzt', 'zcrzdj', 'payment_type','pay_status'],
  data() {
    return {
      orderList:[],
      openSubCard1:false,
      baseUrl: process.env.VUE_APP_BASE_API,
      flag: null,
      fixingLevelList: [],
      // 充值余额列表
      cardValueList: [],
      cardValueForm: {
        cardValueId: '', // 储值卡id
        mtStaffId: '', //
        realName: '',
        staffMobile: '',
        amount: '', // 自定义充值字段
        bidBalance: '', // 储值卡面值
        rechargeBalance: '', // 实际支付
        giftBalance: '',// 赠送金额
        points: '', //赠送积分
        growthValue: '', // 赠送成长值
        remark: '',
        paymentType: 'WECHAT', // 支付方式
        payType:'',
        royaltyType: '',// 提成类型
        percentageCommissions: null,
        amountCommission: null,
        rechargeType: '0'
      },

      // 存油卡列表
      cardFuelDieselList: [],
      sourceCardFuelDieselList: [],
      cardFuelDieselForm: {
        mtStaffId: '',
        realName: '',
        staffMobile: '',
        points: '',
        remark: '',
        rechargeBalance: '', //实际支付
        paymentType: 'WECHAT',
        payType:'',
        oilType: '',
        type: '',
        chainStorId: '',
        incomeLitres: '',
      },

      childComponentKey:1,

      authCode: '', // 支付码

      timer: null,

      realyPayBills: 0,

      oilTypeList: {},

      isPay: true,
      isPaySuccess: false,
      isQuery: true,

      payList: [],
      // 升数卡
      literCard: [
        {liter: 73.75, amount: 500, lockPrice: 6.78, point: 50},
        {liter: 151.98, amount: 1000, lockPrice: 6.58, point: 100},
        {liter: 318.47, amount: 2000, lockPrice: 6.28, point: 200},
        {liter: 493.42, amount: 3000, lockPrice: 6.08, point: 300},
        {liter: 896.06, amount: 5000, lockPrice: 5.58, point: 500},
        {liter: 1968.50, amount: 10000, lockPrice: 5.08, point: 1000},
      ],
      // 充值金额
      amount: '',
      // 充值备注
      rechargeDesc: '',
      // 支付方式
      payment: '扫码支付',
      activeKey: 0,
      // 每日交易介绍
      transaction: "",
      config: '-1',
      num: 1,
      // 操作类型
      type: 'add',
      title: '',
      // 是否显示修改对话框
      openMobile: false,
      openName: false,
      openRecharge: false,
      openSecondCard: false,
      openBindIdCard: false,
      openSubCard: false,
      openConfig: false,
      openLevel: false,
      openConfirm: false,
      openStaff: false,
      growthValue: 'whole',
      cardList: 'notUse',
      tabPosition: 'giftCard',
      balanceRecord: 'first',
      tabOilType: '92',
      // 关于副卡信息
      aboutSecondCard: [],
      cardValueChildList:[],
      // 遮罩层
      loading: false,
      id: '',
      // 会员信息
      form: {},
      form1: {},
      // 店铺信息
      store: '',
      // 会员等级信息
      grade: '',
      activeName: 'refuelOrder',
      subCardActive: 'subCardManage',
      activeRecharge: 'balance',
      tableData: [],
      total: 0,
      queryParams: {
        page: 1,
        pageSize: 10,
        mobile: '',
        id: '',
        name: '',
        status: '',
      },
      subCardList:{
        page:1,
        pageSize:10,
        cardChildPhones:'',
        userId:'',
        status:''
      },
      list: [],
      // 表单校验
      rules: {
        mobile: [{required: true, message: "请输入手机号", trigger: "blur"}],
        name: [{required: true, message: "请输入会员昵称，内容不可为空", trigger: "blur"}],
        type: [{required: true, message: "请选择操作类型", trigger: "blur"}],
        fixingLevel: [{required: true, message: "请选择认证信息", trigger: "blur"}],
        userId:[{ required: true, message: '请选择主卡信息', trigger: 'change' }],
        cardChildPhones:[{required: true, message: "请输入子卡手机号", trigger: "blur"}],
      }
    }
  },
  mounted() {
    if (this.oilTypeList.length > 0) {
      this.selectOilType(this.oilTypeList[0].oilType);
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getUserInfo();
    this.getInformation();
    this.getFixingLevelList();
    this.getStore();
    this.getCardList()
    this.getOrderList()
  },
  methods: {
    handleQuery(){
      this.subCardList.page = 1;
      this.getOrderList()
    },
    handleOrder(data){
      this.subCardList.cardChildPhones = data.cardChildPhones
      this.subCardActive = "consumption"
      this.subCardList.page = 1;
      this.getOrderList()
    },
    // 查询子卡的交易信息
    getOrderList(){
      this.subCardList.userId = this.id
      listCardValueChildOrder(this.subCardList).then(res => {
        this.orderList = res.data.records
        this.total = res.data.total
      })
    },
    // 查询当前用户的子卡信息
    getCardList(){
      listCardValueChild(this.id).then(res => {
        this.cardValueChildList = res.data
      })
    },
    handleAdd1(){
      this.title = "添加子卡信息"
      this.openSubCard1 = true
    },
    handleUpdate1(data){
      cardValueChildInfo(data.id).then(res => {
        this.form1 = res.data
        this.title = "修改子卡信息"
        this.openSubCard1 = true
      })
    },
    // 添加或修改子卡信息
    submitSubCard(){
      this.$refs["form1"].validate(valid => {
        if (valid) {
          if (this.form1.id) {
            editCardValueChild(this.form1).then(res => {
              if (res.data==1){
                this.$modal.msgSuccess("修改成功!")
                this.openSubCard1 = false
                this.getCardList()
              }else {
                this.$modal.msgError("手机号已存在，请重新添加")
              }
            })
          }else {
            addCardValueChild(this.form1).then(res => {
              if (res.data.success=="添加成功！"){
                this.$modal.msgSuccess("添加成功!")
                this.openSubCard1 = false
                this.getCardList()
              }else {
                this.$modal.msgError(res.data.error)
              }
            })
          }
        }
      })
    },
    fixingLevelinfo(list, id) {
      let name = "";
      list.forEach(item => {
        if (item.id = id) {
          name = item.name;
        }
      })
      return name;
    },
    // 获取固定等级列表信息
    getFixingLevelList() {
      allFixingLevel().then(res => {
        if (res.code == 200) {
          this.fixingLevelList = res.data
          console.log(res.data)
        }
      })
    },
    // 选择员工
    chooseStaff() {
      this.openStaff = true
    },
    // 更换手机号
    replaceMobile() {
      this.openMobile = true;
      this.title = '更换手机号'
    },
    // 更换会员昵称
    changeName() {
      this.openName = true;
      this.title = '会员昵称'
    },
    // 副卡管理
    secondCard() {
      this.openSecondCard = true;
      this.title = this.form.secondCard + '-副卡账户管理'
    },
    // 实体卡绑定
    bindIdCard() {
      this.openBindIdCard = true;
      this.title = '实体卡绑定'
    },
    // 子卡管理
    subCard() {
      this.openSubCard = true;
      this.title = '子卡管理'
    },
    // 每日笔数
    configuration() {
      this.openConfig = true;
      this.title = '每日交易次数'
    },
    // 固定等级
    level() {
      this.openLevel = true;
      this.title = '固定等级(原专车认证)'
    },
    // 储值卡查询
    async getCardValueList() {
      let quy = {
        pageNo: 1,
        pageSize: 10000,
        isonline: 0
      }
      await getCardValueListApi(quy).then(res => {
        this.cardValueList = res.data.records;
        this.cardValueList.sort((a, b) => a.rechargeBalance - b.rechargeBalance);
        console.log("this.grade.name",this.grade)
      })
      console.log("this.cardValueList", this.grade)

      if (this.cardValueList.length > 0) {
        // 过滤
        if (this.grade && this.grade.name) {
          this.cardValueList = this.cardValueList.filter(item => {
            return item.groupOriented === "1" || item.membershipLevel.includes(this.grade.id);
          });
          this.rechargeCard(0);
        } else {
          this.cardValueList = this.cardValueList.filter(item => {
            return item.groupOriented === "1";
          });
        }
      }
    },

    valueAmoutChange(data) {
      // this.cardValueForm.amount = null
      this.$set(this.cardValueForm, 'amount', data);

      console.log("data17.16", this.cardValueForm.amount)
      if (!data) {
        this.cardValueForm.amount = ''

      } else {
        this.cardValueForm.amount = data
      }


      this.cardValueForm.points = ''
      this.cardValueForm.bidBalance = ''
      this.cardValueForm.giftBalance = ''
      this.cardValueForm.growthValue = ''
      this.cardValueForm.rechargeBalance = ''

      this.cardValueForm.royaltyType = ''
      this.cardValueForm.percentageCommissions = ''
      this.cardValueForm.amountCommission = ''
      this.cardValueForm.rechargeType = 1


      this.cardValueForm.rechargeBalance = data

      if (this.cardValueList.length > 0) {
        // const changeList = this.cardValueList
        this.cardValueList.forEach(change => {
          if (data >= change.rechargeBalance) {
            this.cardValueForm.points = change.points
            this.cardValueForm.bidBalance = change.bidBalance
            this.cardValueForm.giftBalance = change.giftBalance
            this.cardValueForm.growthValue = change.growthValue
            this.cardValueForm.rechargeBalance = change.rechargeBalance

            this.cardValueForm.royaltyType = change.royaltyType
            this.cardValueForm.percentageCommissions = change.percentageCommissions
            this.cardValueForm.amountCommission = change.amountCommission
            // this.cardValueForm.rechargeBalance

            // 计算员工提成金额
            if (change.royaltyType === "3") {
              // 当按比例提成时 计算对应的金额
              const percentageCommissions = new BigNumber(change.percentageCommissions);
              const totalAmount = new BigNumber(data);

              const commissionAmount = totalAmount.multipliedBy(percentageCommissions).dividedBy(100).decimalPlaces(2);
              this.cardValueForm.amountCommission = commissionAmount
            }

          }
        })
      }
    },
    // 存油卡查询
    async getCardFuelDieselList() {
      let quy = {
        pageNo: 1,
        pageSize: 10000,
        activeStatus: 1,
        status: 1,
        activityProgress: 1
      }
      await getList(quy).then(res => {
        this.sourceCardFuelDieselList = res.data.records
      })
    },
    handleDataFromChild(data) {
      this.openStaff = false
      // this.cardFuelDieselForm= {
      //   mtStaffId: data.mtStaffId,
      //   realName: data.realName,
      //   staffMobile: data.staffMobile,
      // },

      // this.cardValueForm= {
      //   mtStaffId: data.mtStaffId,
      //   realName: data.realName,
      //   staffMobile: data.staffMobile,
      // },
      // console.log('Received data in parent:', data);

      this.cardFuelDieselForm.mtStaffId = data.mtStaffId,
        this.cardFuelDieselForm.realName = data.realName,
        this.cardFuelDieselForm.staffMobile = data.staffMobile,

        this.cardValueForm.mtStaffId = data.mtStaffId,
        this.cardValueForm.realName = data.realName,
        this.cardValueForm.staffMobile = data.staffMobile

    },
    refStaff() {
      this.cardFuelDieselForm.mtStaffId = ''
      this.cardFuelDieselForm.realName = ''
      this.cardFuelDieselForm.staffMobile = ''

      this.cardValueForm.mtStaffId = ''
      this.cardValueForm.realName = ''
      this.cardValueForm.staffMobile = ''
    },
    // 查询参加存油卡油品
    getCountOilType() {
      getCountOilTypeApi().then(res => {
        this.oilTypeList = res.data
        if (this.oilTypeList.length > 0) {
          // 默认选中第一个
          this.tabOilType = this.oilTypeList[0].oilType
          this.selectOilType(this.oilTypeList[0].status, this.oilTypeList[0].oilType);
        }
      })
    },
    // 根据油品过滤查询存油卡
    async tabOilTypeClick(data) {
      console.log("aaaaaaaaaaaaaa",data)
      await this.getCardFuelDieselList()

      this.cardFuelDieselList = this.sourceCardFuelDieselList.filter(item => {
        return item.oilType === data;
      });
      if (this.cardFuelDieselList.length > 0) {
        this.recharge(0)
      }
    },
    selectOilType(status, oilType) {
      this.tabOilType = oilType;
      console.log("453",oilType)
      this.tabOilTypeClick(oilType);
    },
    // 查询员工

    // 会员充值
    userRecharge() {

      this.getCardFuelDieselList()
      this.getCardValueList()
      this.getCountOilType()

      this.getPayList();
      this.openRecharge = true;
      this.title = '会员充值'

      // 存油卡列表
    },
    // 确认充值
    confirm(flag) {
      this.flag = flag

      if (flag === 1) {
        if (this.cardValueForm.paymentType === '') {
          this.$message.error('请选择支付方式');
          return
        }
        if (this.cardValueForm.amount != null) {
          this.cardValueForm.rechargeType = 1
          if (!this.cardValueForm.amount || this.cardValueForm.amount < 0) {
            this.$message.error('请选择输入自定义金额');
            return
          }
          this.realyPayBills = this.cardValueForm.amount
        } else {
          this.cardValueForm.rechargeType = 0
          this.realyPayBills = this.cardValueForm.rechargeBalance
        }
      } else if (flag === 2) {
        if (this.cardFuelDieselForm.paymentType === '') {
          this.$message.error('请选择支付方式');
          return
        }

        this.realyPayBills = this.cardFuelDieselForm.rechargeBalance
      }
      this.openConfirm = true;
      this.isPay = true

      // console.log("11111",this.isPay)
      // this.isPaySuccess=false

      this.title = this.payment
    },
    // 支付方式
    payMethod(payType, flag) {
      // this.map.payType = payType;
      if (falg === 1) {

      }
      // console.log("payType",payType)
      this.cardValueForm.paymentType = payType
    },
    // 获取副卡信息
    getInformation() {
      getSysConfig('second_card').then(response => {
        this.aboutSecondCard = response.data.split(";")
      });
      getSysConfig('transaction').then(response => {
        this.transaction = response.data
      });
    },
    getList() {

    },
    // 获取详情
    getUserInfo() {
      let _this = this;
      // 获取会员详情
      getUser(this.id).then(response => {
        this.form = response.data;
        console.log(response.data)
        this.getGrade(response.data.gradeId);
      });
    },
    // 获取会员等级详情
    getGrade(id) {
      getUserGradeInfo(id).then(response => {
        this.grade = response.data;
      });
    },
    getStore() {
      // 获取店铺详情
      ljStoreInfo().then(response => {
        this.store = response.data;
      });
    },
    // 选择余额充值金额
    rechargeCard(index, item) {
      console.log("index", index)
      // this.cardValueForm.amount = null,
      this.cardValueForm.rechargeType = 0

      this.activeKey = index;

      if (item === -1) {
        this.cardValueForm.points = 0
        this.cardValueForm.giftBalance = 0
        this.cardValueForm.growthValue = 0
        this.cardValueForm.bidBalance = 0

        // this.cardValueForm.bidBalance = 1
        // this.cardValueForm.amount = 0

      } else {
        if (this.cardValueList <= 0) return
        let file = {}
        // 拿到金额
        file = this.cardValueList[index]

        this.realyPayBills = file.rechargeBalance
        this.cardValueForm.rechargeBalance = file.rechargeBalance
        this.cardValueForm.bidBalance = file.bidBalance
        this.cardValueForm.points = file.points
        this.cardValueForm.giftBalance = file.giftBalance
        this.cardValueForm.growthValue = file.growthValue
        this.cardValueForm.amount = null

        this.cardValueForm.royaltyType = file.royaltyType
        this.cardValueForm.percentageCommissions = file.percentageCommissions
        this.cardValueForm.amountCommission = file.amountCommission

        // console.log("file.royaltyType ", file.royaltyType )

        // 计算员工提成金额
        if (file.royaltyType === "3") {

          // 当按比例提成时 计算对应的金额
          const percentageCommissions = new BigNumber(file.percentageCommissions);
          const totalAmount = new BigNumber(file.rechargeBalance);

          const commissionAmount = totalAmount.multipliedBy(percentageCommissions).dividedBy(100).decimalPlaces(2);
          this.cardValueForm.amountCommission = commissionAmount
        }
      }
    },

    // 选择充值金额
    recharge(index, item) {
      this.activeKey = index;
      let file = {}
      // 拿到金额
      file = this.cardFuelDieselList[index]
      console.log("file",file)
      this.cardFuelDieselForm.points = file.points
      this.cardFuelDieselForm.rechargeBalance = file.rechargeBalance
      this.cardFuelDieselForm.oilType = file.oilType
      this.cardFuelDieselForm.type = file.type
      this.cardFuelDieselForm.chainStorId = file.chainStorId
      this.cardFuelDieselForm.incomeLitres = file.incomeLitres
      this.cardFuelDieselForm.lockupPrice = file.lockupPrice
      this.cardFuelDieselForm.cardFuelId = file.id

      // this.realyPayBills = file.rechargeBalance

    },

    async collection() {

      let userForm = this.form

      if (this.flag === 1) {
        if (!this.authCode && this.cardValueForm.paymentType !== "CASH") {
          this.$message.error('请先扫码');
          return
        }
        // 会员id  会员名字会员手机号码
        this.cardValueForm.mtUserId = userForm.id
        this.cardValueForm.name = userForm.name
        this.cardValueForm.mobile = userForm.mobile
        // 支付码
        this.cardValueForm.authCode = this.authCode
        this.cardValueForm.realyPayBills = this.realyPayBills


        let id;
        await getPrepaidCardTopUpApi(this.cardValueForm).then(response => {
          if (response.data != null) {
            this.loading = true;
            id = response.data.id
          }
        });
        let this_ = this
        //
        let timer = setInterval(async () => {
          await getCheckTheStatusOfYourPaymentApi(id).then(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;
              }else if (payStatus === "payFail") {
                this_.isPaySuccess = false;
                this_.isQuery = false;
              }
            }
          })
        }, 1000);

        let timer2 = setInterval(function () {
          if (!this_.isQuery) {
            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;
        }, 30000)

      } else if (this.flag === 2) {
        if (!this.authCode && this.cardFuelDieselForm.paymentType !== "CASH") {
          this.$message.error('请先扫码');
          return
        }
        console.log("cardFuelDieselForm",this.cardFuelDieselForm)
        this.cardFuelDieselForm.mtUserId = userForm.id
        this.cardFuelDieselForm.name = userForm.name
        this.cardFuelDieselForm.mobile = userForm.mobile
        this.cardFuelDieselForm.authCode = this.authCode
        console.log("this.cardFuelDieselForm",this.cardFuelDieselForm)


        let id;
        await getPrepaidFuelTopUpApi(this.cardFuelDieselForm).then(response => {
          if (response.data != null) {
            this.loading = true;
            id = response.data.id
          }
        });


        let timer = setInterval(async () => {
          getCheckTheStatusOfYourPaymentByFuelApi(id).then(response => {
            if (response.data != null) {
              if (response.data.payStatus == "unpaid") {
                this_.isQuery = true;
              }
              if (response.data.payStatus == "paid") {
                this_.isPaySuccess = true;
                this_.isQuery = false;
              }
              if (response.data.payStatus == "payFail") {
                this_.isPaySuccess = false;
                this_.isQuery = false;
              }
            }
          })
        }, 500);

        let timer2 = setInterval(function () {
          if (this_.isQuery == false) {
            this_.loading = false;
            this_.isPay = false;
            clearInterval(timer);
            clearInterval(timer2);
          }
        }, 500)

        setTimeout(function () {
          clearInterval(timer2);
          clearInterval(timer);
          this_.loading = false;
          this_.isPay = false;
          this.isPaySuccess = false;

        }, 30000)

        let this_ = this
      }
      this.$forceUpdate();

    },

    // 获取支付列表
    getPayList() {
      // console.log("payment_type1")
      getDicts("payment_type").then(response => {
        // console.log("payment_type2",response.data)
        this.payList = response.data;
      })
    },

    // 关闭支付窗口
    handClose() {
      this.isPay = true,
      this.isPaySuccess = false,
      this.isQuery = true,
      this.openConfirm = false
      this.openRecharge = false

      // this.isPaySuccess = false;
      this.authCode = null
      this.activeRecharge = 'balance',

        this.iniz()
      this.cardFuelDieselForm = {}
      this.childComponentKey = this.childComponentKey+1
    },

    iniz() {
      this.cardValueForm = {
        cardValueId: '', // 储值卡id
        mtStaffId: '', //
        realName: '',
        staffMobile: '',
        amount: '', // 自定义充值字段
        bidBalance: '', // 储值卡面值
        rechargeBalance: '', // 实际支付
        giftBalance: '',// 赠送金额
        points: '', //赠送积分
        growthValue: '', // 赠送成长值
        remark: '',
        paymentType: '', // 支付方式
        royaltyType: '',// 提成类型
        percentageCommissions: null,
        amountCommission: null,
        rechargeType: '0'
      }

      // 刷新页面
      this.getUserInfo();
      this.getInformation();
      this.getFixingLevelList();
      this.getStore();
    },

    // 提交按钮
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateUser(this.form).then(response => {
              if (response.data == 1) {
                this.$modal.msgSuccess("修改成功");
                this.openMobile = false;
                this.openName = false;
                this.openConfig = false;
                this.openLevel = false;
                this.openBindIdCard = false;
                this.getUserInfo();
              } else {
                this.$modal.msgError("修改失败");
              }

            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form = {}
    },
    // 取消按钮
    cancel() {
      this.openRecharge = false;

      this.isPay = true;
      this.openConfirm = false
      this.openRecharge = false

      this.isPaySuccess = false;
      this.authCode = null
      this.activeRecharge = 'balance',

        this.cardValueForm = {}
      this.cardFuelDieselForm = {}
    },
    cancelCollection() {
      this.openConfirm = false;
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.refStaff()
      this.realyPayBills = 0
    },
    handleChange(value) {
      // console.log(value);
    },
    // 返回
    goBack() {
      this.$router.back(-1);
    }
    //   积分表、储值卡详情表、积分详情表、储值卡表、储值卡模板表、用户储值卡关联表、
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  background: #f6f8f9;
}

.left {
  width: 20%;
  display: table-cell;
  /*垂直居中 */
  vertical-align: middle;
  /*水平居中*/
  text-align: center;
}

.right {
  flex: 1;
}

.sta {
  height: 100px;
  margin-top: 10px;
  padding-top: 30px;
}

.idcard {
  text-align: center;
  font-weight: bold
}

.mon {
  width: 20%;
  height: 50px;
  border: 0.5px #dadfe6 solid;
  line-height: 25px;
  border-radius: 5px;
  text-align: center;
  margin: 0 10px;
  margin-bottom: 10px;
}

.select {
  position: relative;
  background-color: #fff;
  box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
  border-radius: 5px;
  border: 1px solid #00aaff;
}

.select:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px solid #00aaff;
  border-top-color: transparent;
  border-left-color: transparent;
}

.select:after {
  content: '';
  width: 4px;
  height: 6px;
  position: absolute;
  right: 4px;
  bottom: 3px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

.amount {
  color: #00afff;
}

.amount1 {
  color: #00afff;
  font-size: 20px;
}

.top1 {
  font-size: 16px;
}

.jine {
  width: 24%;
  display: flex;
}

.bom {
  font-size: 12px;
  color: grey;
}

.zeng {
  width: 255px;
  line-height: 40px;
}

.mon2 {
  width: 20%;
  height: 75px;
  border: 0.5px #dadfe6 solid;
  line-height: 25px;
  border-radius: 5px;
  text-align: center;
  margin: 0 10px;
  margin-bottom: 20px;
}
</style>