payment/src/views/amount/index.vue

<template>
  <div class="mianBox" v-if="order">
    <van-row class="headerBox"  >
      <van-icon name="arrow-left" @click="fanhuiBtn" v-if="erp"/>
      {{title}}
    </van-row>
    <template v-if="erp">
      <!-- 充值 -->
      <div class="recharge" v-if="erp">
        <div class="cardId" v-loading="cardLoading">
          <van-col span="12">卡号：<span style="color:#000">{{cardId}}</span></van-col>
        </div>
        <div class="balance" v-loading="balanceLoading">
          <van-col span="12">余额：<span style="color:rgba(242, 46, 60, 1)">{{cardBalance ? cardBalance : '0.00'}}</span>元</van-col>
        </div>
        <van-row class="rechargeInput" style="padding-top: 10px">
          <div class="jg">
            <span class="jgLabel">￥</span>
            <van-field
              readonly
              label=" "
              placeholder="请输入充值金额（ 元 ）"
              label-width="10px"
              clickable
              :value="money"
              @touchstart.native.stop="show = true"
            />
            <van-number-keyboard
              theme="custom"
              :show="show"
              :title="'￥' + money"
              :hide-on-click-outside="false"
              :maxlength="8"
              extra-key="."
              @input="handleInput"
              @delete="handleDelete"
              @close="handleClose"
              close-button-text="确定"
              @blur="show = false"
            ></van-number-keyboard>
          </div>
        </van-row>
        <van-overlay :show="overlayShow" @click="overlayShow = false" />
        <van-row class="rechargeSelect" gutter="26px">
          <van-col span="8" @click="btn50" :style="state1" data="50">50</van-col>
          <van-col span="8" @click="btn100" :style="state2" data="100">100</van-col>
          <van-col span="8" @click="btn150" :style="state3" data="150">150</van-col>
          <van-col span="8" @click="btn200" :style="state4" data="200">200</van-col>
          <van-col span="8" @click="btn250" :style="state5" data="250">250</van-col>
          <van-col span="8" @click="btn300" :style="state6" data="300">300</van-col>
        </van-row>
        <van-row class="arrival" type="flex" justify="space-around">
          <van-col span="12" class="left">到账金额</van-col>
          <van-col span="12" class="right">￥{{ (Number((100 - (100 -  proportion * 100)) * money) / 100 ).toFixed(2) }}元</van-col>
        </van-row>
        <van-row class="tip">
          服务费 ￥{{ (Number((100 - proportion * 100) * money) / 100 ).toFixed(2) || 0.00}}元 <br>
          费率 {{ Number(100 - proportion * 100).toFixed(2)  || 0.00}}%
        </van-row>
        <van-button   type="danger" @click="recharge"
          >立即充值</van-button
        >
      </div>
    </template>
    <div class="recharge2" v-if="noerp">
      <van-row class="rechargeInput" style="padding-top: 10px">
        <div class="jg">
          <span class="jgLabel">￥</span>
          <van-field
            readonly
            label=" "
            placeholder="请输入充值金额（ 元 ）"
            label-width="10px"
            clickable
            :value="money"
            @touchstart.native.stop="show = true"
          />
          <van-number-keyboard
            theme="custom"
            :show="show"
            :title="'￥' + money"
            :hide-on-click-outside="false"
            :maxlength="8"
            extra-key="."
            @input="handleInput"
            @delete="handleDelete"
            @close="handleClose"
            close-button-text="确定"
            @blur="show = false"
          ></van-number-keyboard>
        </div>
      </van-row>
      <van-overlay :show="overlayShow" @click="overlayShow = false" />
      <van-row class="rechargeSelect" gutter="26px">
        <van-col span="8" @click="btn50" :style="state1" data="50">50</van-col>
        <van-col span="8" @click="btn100" :style="state2" data="100">100</van-col>
        <van-col span="8" @click="btn150" :style="state3" data="150">150</van-col>
        <van-col span="8" @click="btn200" :style="state4" data="200">200</van-col>
        <van-col span="8" @click="btn250" :style="state5" data="250">250</van-col>
        <van-col span="8" @click="btn300" :style="state6" data="300">300</van-col>
      </van-row>
      <van-row class="arrival" type="flex" justify="space-around">
        <van-col span="12" class="left">到账金额</van-col>
        <van-col span="12" class="right">￥{{ (Number((100 - (100 -  proportion * 100)) * money) / 100 ).toFixed(2) }}元</van-col>
      </van-row>
      <van-row class="tip">
         服务费 ￥{{ (Number((100 - proportion * 100) * money) / 100 ).toFixed(2) || 0.00}}元 <br>
          费率 {{ (100 - proportion * 100) .toFixed(2)  || 0.00}}%
      </van-row>
      <van-button   type="danger" @click="recharge"
        >立即充值</van-button
      >
    </div>
    <template v-if="erp">
    <!-- 交易记录 -->
      <div class="record" v-if="erp">
        <van-row class="recordTitle">
           <van-col span="16" class="left">交易记录</van-col>
           <van-icon name="arrow"  class="right" @click="record"/>
        </van-row>
        <van-row class="list" v-loading="listLoading">
          <van-list
              class="listData"
              :immediate-check="false"
            >
              <van-row class="listBoxCell" v-for="(item, index) in recordList" :key="index">
                <van-col span="14">
                  <van-row class="jlName">{{ item.shopName }}</van-row>
                  <van-row class="jlTime">时间：{{ item.createTime }}</van-row>
                </van-col>
                <van-col span="10" class="jlMoney negative">
                  <van-row class="jlBalance2" v-if="item.type==1">- {{ item.amt }}元</van-row>
                  <van-row class="jlMoney just" v-if="item.type==3">+ {{ item.amt }}元</van-row>
                  <van-row class="jlBalance2" v-if="item.type==1001">+ {{ Math.abs(item.amt) }}元</van-row>
                  <van-row class="jlBalance" style="color:#000">余额：{{ item.balance }} 元</van-row></van-col>
              </van-row>
          </van-list>
          <p class="loading" v-if="more" @click="record">点击查看更多</p>
          <p class="loading" v-if="noMore">没有更多了</p>
        </van-row>
      </div>
    </template>
    <van-loading
        size="24px"
        v-if="loadingErp"
        color="#fff"
        vertical
        style="z-index: 999999; position: fixed; top: 40%; left: 0; right: 0;color:rgba(242, 46, 60, 1) !important"
        >加载中...</van-loading
      >
      <van-overlay :show="loadingErp" style="z-index: 100; position: fixed" />
  </div>
</template>
<script>
import axios from "axios";
import { Field, NumberKeyboard, Dialog, Toast } from "vant";
import { returnFloat } from '@/assets/js/common.js'
export default {
  data() {
    return {
      loadingErp:false,
      erp:false,
      noerp:false,
      cardBalance:undefined,//余额
      show: false,
      loading: false,
      overlayShow: false,
      money: 0,
      env: null, //识别是否为扫描用户进入,以便直接进入支付跳转
      state1: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state2: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state3: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state4: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state5: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state6: "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      channelId: undefined,
      fanhui: false,
      proportion:0,//到账比例
      order:true,//管理员充值
      title:undefined,
      // 交易记录
      more: false,
      noMore: false,
      finished: false,
      recordList:[],
      cardId:undefined,
      cardLoading:true,
      balanceLoading:true,
      listLoading:true,
    };
  },
  watch: {
    money(val) {
      if (/^0[1-9]/.test(val)) {
        this.money = val.substring(1);
      }
    },
  },
  components: {
    [Field.name]: Field,
    [NumberKeyboard.name]: NumberKeyboard,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
  },
  created() {
    var url = window.location.href;
    localStorage.setItem("amount57",url)
    if(url.indexOf("token") > 1){
      //("app进入")
      if(this.getQueryVariable("token")){
        localStorage.removeItem('type');
        this.erp = true
        this.noerp = false
        this.loadingErp = true
        this.userQuery()
      }else{
        //console.log("app进入")
        Toast(this.getQueryVariable("无token传入！"))
      }
    }else if(this.getQueryVariable("type")){
      //console.log("扫码游客进入")
      localStorage.removeItem('type');
      localStorage.removeItem('user_wt');
      localStorage.setItem("type",this.type)
    }else{
      localStorage.removeItem('user_wt');
      localStorage.removeItem('type');
      //console.log("无user、type、classify进入")
    }
    if (this.$route.query.type) {
      this.erp = false
      this.noerp = true
      this.channelId = this.$route.query.type;
      localStorage.setItem("type",this.channelId)
      //console.log("channelId游客充值=",this.channelId);
      this.title = this.$route.query.channelName + "消费支付"
      // this.proportionData()
    } else if(this.$route.query.backOrder) {
      this.title = "消费支付"
      this.order = false
      const data = JSON.parse(this.$route.query.backOrder)
      var money = data.money
      if(money.toString().indexOf(".")<1){
        money = money + ".00"
      }
      axios.post('/dxtop/order/topScanPayApi', {
          "money": money,
          "payType": data.payType,
          "scene": data.scene,
          "userId":data.userId
      }).then(res => {
        if(res.data.status == "ERROR"){
            Toast(res.data.msg)
          }else{
            window.location.href = res.data.data
          }
      }).catch(() => {
        
      })
      this.proportionData()
    } else if(localStorage.getItem("user_wt")) {
      
      this.title = "充值"
      this.fanhui = true
      this.proportionData()
    }else{
      this.title = "充值"
      this.fanhui = true;
    }
  },
  mouted(){
    var url = window.location.href;
    if(url.indexOf("token") > 1){
      
    }else if(this.getQueryVariable("type")){
      document.title = '中国东信智慧园区'
      
    }else{
      document.title = '中国东信智慧园区'
      
    }
    if (this.$route.query.type) {
      document.title = '中国东信智慧园区'
      
    } else if(this.$route.query.backOrder) {
      document.title = '中国东信智慧园区'
    }
  },
  methods: {

  //用户查询(卡号)
    userQuery(){
      axios({//查询信息
        method: 'get',
        url: 'https://smartpark.caih.com/zkxt/api/thirdparty/v1/user/getZkUserByCipher?cipher=' + this.getQueryVariable("token"),
        timeout: 10000,
      }).then(res =>{
        if(res.data?.data?.id){
          //axios.get(`/dxtop/staff/one?id=0001T110000000002HBL`).then(res2 => { //测试
          axios.get(`/dxtop/staff/one?id=${res.data.data.id}`).then(res2 => { //验证充值信息是否同步
            if(res2.data.data.proportion){
              this.proportion = res2.data.data.proportion
            }else{
              this.proportion = 1
            }
            if(res2.data.data){
              localStorage.setItem("user_wt", res.data.data.id)
              // localStorage.setItem("user_wt", "0001T110000000002HBL") //测试id
              localStorage.setItem("cardId57", res2.data.data.cardId)
              this.cardId = res2.data.data.cardId
              this.cardLoading = false
              this.Balance()
              this.recharge2()
            }else{
              this.userNoAlert()
            }
            this.loadingErp = false
          })
        }else if(res.data?.data?.cardId){
          this.loadingErp = false
          Toast("用户卡号未绑定")
        }else{
          this.loadingErp = false
          this.userNoAlert()
        }
      }).catch(err =>{
        this.loadingErp = false
        this.userNoAlert()
      });
    },
    userNoAlert(){
      Toast("当前账户初始流程中，请耐心等待或联系管理人员查询")
    },
    getQueryVariable(variable){//参数获取 设定微信进入参数
      //window.location.search.substring(1);
      console.log(variable)
      var query = window.location.hash.substring(3);
      var vars = query.split("&");
      if(vars[2]){ //判定微信端进入
        localStorage.setItem("passageway","weixin")
      }else{
        localStorage.removeItem("passageway")
      }
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable || pair[0] =="mount?token"){
          
          if(vars[1] != "classify"){
            // localStorage.removeItem("classify")
          }
          if(variable =="token"){
            this.user = pair[1]
          }else if(variable =="type"){
            this.type = pair[1]
          }
          return pair[1];
        }
      }
      return(false);
    },


    //余额
    Balance(){ 
      this.erp = true
      if(localStorage.getItem("cardId57")){
        //axios.get(`/dxtop/staff/cardBalance?card=3186100745`).then(res => { //测试
        axios.get(`/dxtop/staff/cardBalance?card=${localStorage.getItem("cardId57")}`).then(res => { //验证充值信息是否同步
          if(res.data.data){
            this.cardBalance = returnFloat(res.data.data)
          }else{
            this.cardBalance = "0.00"
          }
          this.balanceLoading = false
        })
      }else{
        this.cardBalance = "0.00"
        this.balanceLoading = false
      }
    },
    //交易记录
    recharge2(){
      this.erp = true
      axios.post(`/dxtop/charge/cordPage`,{
        "startTime":undefined, 
        "endTime":undefined,
        "size":10,
        "current":1,
        "userId":localStorage.getItem("user_wt")
      }).then(res => {
        if (res?.data?.data?.records.length > 0) {
          let data = res.data.data.records
          for(let i =0;i<data.length;i++){
            this.recordList.push(data[i])
            this.recordList[i].balance = returnFloat(data[i].balance)
          }
          if(res.data.data.total>5){
            this.more = true
          }
          this.listLoading = false
        } else {
          this.noMore = true
        }
      })
    },
    //跳转
    record(){
      this.$router.push({ path: "/record"})
    },
    //充值比例
    proportionData(){
      if(localStorage.getItem("user_wt")){
        axios.get(`/dxtop/staff/one`,{params:{"id":localStorage.getItem("user_wt")}}).then(res => {//res.msg
          if(res.data.data.proportion){
            this.proportion = Number(1 - res.data.data.proportion).toFixed(2)
          }
        }).catch(err=>{
          //console.log(err)
        }) 
      }
    },
    handleInput(key) {
      (this.state1 = "color:#000;background: #fff;"),
        (this.state2 = "color:#000;background: #fff;"),
        (this.state3 = "color:#000;background: #fff;"),
        (this.state4 = "color:#000;background: #fff;"),
        (this.state5 = "color:#000;background: #fff;"),
        (this.state6 = "color:#000;background: #fff;"),
        (this.money = this.money + "");
      if (this.money === "" && key === ".") {
        this.money = "0";
      } else if (this.money.indexOf(".") !== -1 && key === ".") {
        return;
      } else if (
        this.money.indexOf("0") !== -1 &&
        this.money.length === 1 &&
        key === 0
      ) {
        return;
      } else if (/\.\d{2}$/.test(this.money)) {
        return;
      }
      this.money += key;
    },
    handleDelete() {
      this.money = this.money + "";
      if (!this.money) {
        return;
      }
      this.money = this.money.substring(0, this.money.length - 1) || 0;
    },
    handleClose() {
      this.money = Number(this.money);
      this.overlayShow = false;
    },
    isWeixinOrAlipay() {
      let ua = window.navigator.userAgent;
      //判断是不是微信
      if (ua.indexOf("MicroMessenger") > 0) {
        this.env = "WeiXin";
      }
      //判断是不是支付宝
      if (ua.indexOf("Alipay") > 0) {
        this.env = "Alipay";
      }
    },
    async pay(money,  topPayType, payType, channelId) {
      if(money.toString().indexOf(".")<1){
        money = money + ".00"
      }
      if(localStorage.getItem("type")){ //充值系统后台扫码充值
        axios.post('/dxtop/order/topScanPayApi', {
            "money": Number(money).toFixed(2),
            "topPayType": topPayType,
            "payType": payType,
            "channelId": channelId,
            "scene": 2,
        }).then(res => {
          this.loading = false;
          if(res.data.status == "ERROR"){
            Toast(res.data.msg)
          }else{
            window.location.href = res.data.data
          }
        })
      }else{ //公众号充值(ERP或外包人员)
        axios.get("dxtop/staff/one",{
          params:{
            id:localStorage.getItem("user_wt")
          }
        }).then(res =>{
          if(res.data?.data?.sid){
            if(localStorage.getItem("classify")){
              let type = localStorage.getItem("classify")
              let channelName =undefined
              if(type == "1"){
                channelName = "外包人员充值"
              }
              if(type == "2"){
                channelName = "ERP人员充值"
              }
              axios.post('/dxtop/order/topScanPayApi', {
                  "money": Number(money).toFixed(2),
                  "topPayType": topPayType,
                  "payType": payType,
                  "channelName":channelName,
                  "scene": 6,
                  "userId": res.data.data.sid
              }).then(res => {
                this.loading = false;
                if(res.data.status == "ERROR"){
                  Toast(res.data.msg)
                }else{
                  window.location.href = res.data.data
                }
              })
            }else{
              axios.post('/dxtop/order/topScanPayApi', {
                  "money": Number(money).toFixed(2),
                  "topPayType": topPayType,
                  "payType": payType,
                  "channelId": channelId,
                  "scene": 2,
              }).then(res => {
                this.loading = false;
                if(res.data.status == "ERROR"){
                  Toast(res.data.msg)
                }else{
                  window.location.href = res.data.data
                }
              })
            }
          }
        })
        }
    },
    jumpMode() {
      console.log(localStorage.getItem("classify"))
      if (this.money) {
        if(this.money == '0' ||  this.money == '0.0' ||  this.money == '0.'){
          Dialog.confirm({
            title: "提示",
            message: "充值金额不能为0元！",
          });
          
        }else if(this.channelId){//游客
            if (this.env == "WeiXin") {
              //console.log("微信环境充值--游客");
              //微信
              this.loading = true;
              this.pay(this.money,  "W06" ,"2", this.channelId);
            }else if (this.env == "Alipay") {
              //console.log("支付宝环境充值--游客");
              //支付宝
              this.loading = true;
              this.pay(this.money,  "A01", "2", this.channelId);
            } else {
              //console.log("有channelId的其他扫描--游客");
              this.$router.push({
                path: "/recharge",
                query: { money: this.money,channelId: undefined},
              });
            }
        }else if(localStorage.getItem("classify")){
          if (this.env == "WeiXin") {
              //console.log("微信环境充值--公众号");
              //微信
              this.loading = true;
              this.pay(this.money,  "W06" ,"6", this.channelId);
          }
          if (this.env == "Alipay") {
              //console.log("支付宝环境充值--公众号");
              //微信
              this.loading = true;
              this.pay(this.money,  "A01" ,"6", this.channelId);
          }
        }else{
          if(localStorage.getItem("user_wt")){
            //console.log("userid 进入")
          }else{
            //console.log("无channelId 进入")
          }
          let money = this.money.toString()
          if(money.indexOf(".")<1){
            money = money + ".00"
          }
          this.$router.push({
            path: "/recharge",
            query: { money: money, channelId: undefined },
          });
        }
      } else {
        Dialog.confirm({
          title: "提示",
          message: "充值金额不能为0元！",
        });
        
      }
    },
    recharge() {
      
      if(this.env == "WeiXin" || this.env == "Alipay"){
        if(this.money == '0' ||  this.money == '0.0' ||  this.money == '0.'){
          Dialog.confirm({
            title: "提示",
            message: "充值金额不能为0元！",
          });
        }
      }else{
        if(this.money == '0' ||  this.money == '0.0' ||  this.money == '0.'){
          Dialog.confirm({
            title: "提示",
            message: "充值金额不能为0元！",
          });
        }else{
          this.isWeixinOrAlipay();
          this.jumpMode();
          // this.$router.push({
          //   path: "/recharge",
          //   query: { money: this.money, channelId: this.channelId },
          // });
        }
        
      }
    },
    btn50() {
      (this.state1 = "color:#fff;background:rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.money = 50);
    },
    btn100() {
      (this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#fff;background: #F22E3C;"),
        (this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.money = 100);
    },
    btn150() {
      (this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state3 = "color:#fff;background: #F22E3C;"),
        (this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.money = 150);
    },
    btn200() {
      (this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state4 = "color:#fff;background: #F22E3C;"),
        (this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.money = 200);
    },
    btn250() {
      (this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state5 = "color:#fff;background: #F22E3C;"),
        (this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.money = 250);
    },
    btn300() {
      (this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);"),
        (this.state6 = "color:#fff;background: #F22E3C;"),
        (this.money = 300);
    },
    //返回上级或app目录页
    fanhuiBtn(){
      this.$router.go(-1)
      // if(localStorage.getItem("passageway")){
      //   this.$router.go(-1)
      // }else{
        // setTimeout(()=>{
        //   this.$router.go(-2)
        // },10)
        
        //window.location.href = "https://smartpark.caih.com/h5/#/home/feature?isApp=true"
      //}
    }
  },
};
</script>
<style lang="scss" scoped>
// .ss {
//   background-color: red;
//   color: #fff;
// }
.mianBox {
  width: 100vw;
  height: 100vh;
  color: #000;
  box-sizing: border-box;
  background-color: #F5F5F5;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  letter-spacing: 1px;
  overflow: hidden;
  //充值
  .recharge{
    padding: 44px 10px 20px 10px;
    background-color: #fff;
    .balance {
      font-size: 16px;
      margin: 12px 0 2px;
      display: inline-block;
      width:50%;
      text-align: right;
      .van-col{
        width:100%;
      }
    }
    .cardId {
      font-size: 16px;
      margin: 12px 0 2px;
      display: inline-block;
      width:50%;
      .van-col{
        width:100%;
      }
    }
    .rechargeInput {
      width: 100%;
      // height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      .jg{
        position: relative;
        .jgLabel{
          color: rgba(242, 46, 60, 1) ;
          font-size: 16px;
          position: absolute;
          top:11px;
          left:8px;
          z-index: 1;
        }
      }
      .van-cell {
        font-size: 16px;
        padding: 10px 6px;
        border: 1px solid rgba(110, 109, 109, 0.2);
      }
      .an-field {
        background-color: #EBEBEB;
      }
    }
    .rechargeSelect{
      margin-top: 0px;
      & > .van-col {
        padding: 10px 0;
        background-color: #fff;
        color: #000;
        text-align: center;
        font-size: 16px;
        border-radius: 2px;
        margin-top: 20px;
        float: left;
        width: 28%;
        box-sizing: border-box;
        border:1px solid rgba(242, 46, 60, 1) !important;
        overflow: hidden;
      }
      & > .van-col.active {
        background: #F22E3C;
        color: #fff;
      }
      & > .van-col:nth-child(3n-1),
      & > .van-col:nth-child(3n) {
        margin-left: 8%;
      }
    }
    .arrival {
      font-size: 16px;
      margin: 16px 0;
      .left {
        text-align: left;
      }
      .right {
        text-align: right;
        color: rgba(242, 46, 60, 1);
      }
    }
    .tip {
      font-size: 13px;
      color: #ccc;
      line-height: 20px;
    }
     .van-button {
      margin-top:20px;
      width: 350px;
      height: 40px;
      border-radius: 10px;
      font-size: 16px;
    }
  }
  .recharge2{
    padding: 44px 10px 0px 10px;
    background-color: #fff;
    height:100%;
    overflow: hidden;
    .balance {
      font-size: 16px;
      margin: 10px 0;
      display: inline-block;
      width:50%;
    }
    
    .rechargeInput {
      width: 100%;
      // height: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      .jg{
        position: relative;
        .jgLabel{
          color: rgba(242, 46, 60, 1) ;
          font-size: 16px;
          position: absolute;
          top:11px;
          left:8px;
          z-index: 100;
        }
      }
      .van-cell {
        font-size: 16px;
        padding: 10px 6px;
        border: 1px solid rgba(110, 109, 109, 0.2);
      }
      .an-field {
        background-color: #EBEBEB;
      }
    }
    .rechargeSelect{
      margin-top: 0px;
      & > .van-col {
        padding: 10px 0;
        background-color: #EBEBEB;
        color: #000;
        text-align: center;
        font-size: 16px;
        border-radius: 6px;
        margin-top: 20px;
        float: left;
        width: 28%;
        border:1px solid rgba(242, 46, 60, 1) !important;
      }
      & > .van-col.active {
        background: #F22E3C;
        color: #fff;
      }
      & > .van-col:nth-child(3n-1),
      & > .van-col:nth-child(3n) {
        margin-left: 8%;
      }
    }
    .arrival {
      font-size: 16px;
      margin: 16px 0;
      .left {
        text-align: left;
      }
      .right {
        text-align: right;
        color: rgba(242, 46, 60, 1);
      }
    }
    .tip {
      font-size: 14px;
      color: #ccc;
    }
     .van-button {

      width: 90%;
      height: 50px;
      border-radius: 10px;
      font-size: 18px;
      position: fixed;
      bottom:30px;
      left:5%
    }
  }

  //交易记录
  .record{
    margin-top:10px;
    padding: 20px 10px 120px 10px;
    background-color: #fff;
    height:100%;
    .recordTitle{
      font-size: 18px;
      position: relative;
      .left{
        padding-left:8px;
        border-left:4px solid  rgba(242, 46, 60, 1);
        line-height:20px;
      }
      .right{
        position: absolute;
        right:0;
        text-align: right;
        font-size: 20px;
        color:#808080;
      }
    }
    .list{
      margin-top:10px;
      -webkit-overflow-scrolling: touch;
      .listData{
        height:100%;
        overflow-y: scroll;
      }
      .loading{
        text-align: center;
        margin:20px auto 10px;
        color:#ccc
      }
      .listBoxCell {
        height: 75px;
        width: 100%;
        padding: 10px 10px 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(237, 237, 237, 1);
        .jlName {
          font-size: 16px;
          color: #000;
        }
        .jlTime {
          margin-top: 10px;
          font-size: 13px;
          color: #ccc;
        }
        .jlBalance {
          margin-top: 5px;
          font-size: 13px;
          color: rgba(242, 46, 60, 1);
        }
        .jlBalance2 {
          margin-top: 5px;
          font-size: 16px;
          color: rgba(242, 46, 60, 1);
        }
        .jlMoney {
          text-align: right;
          font-size: 16px;
        }
        .jlMoney.just {
          color: rgba(56, 129, 253, 1);
        }
        .jlMoney.negative {
          color: rgba(242, 46, 60, 1);
        }
      }
    }
    
  }
  
  
}







/*特殊处理 */


/deep/ .van-field__control{
    color: rgba(242, 46, 60, 1) !important
  }



@media screen and (min-height:550px) and (max-height:570px){
   .list{
      height:120px;
  }
}
@media screen and (min-height:600px) and (max-height:650px){
   .list{
      height:166px;
  }
}
@media screen and (min-height:651px) and (max-height:670px){
   .list{
      height:155px;
  }
}
@media screen and (min-height:680px) and (max-height:740px){
   .list{
      height:175px;
  }
}
@media screen and (min-height:741px){
   .list{
      height:175px;
  }
}

</style>
<style>
.el-loading-mask{
  background-color: transparent;
}
.el-loading-spinner .path{
  stroke:rgb(255, 255, 255)!important
}
</style>