<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 : "--"}}</el-descriptions-item>-->
<!-- <el-descriptions-item label="绑定信息">--</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="储值优惠">--</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>