merchant/src/pages/phoneSubPages/phoneOilCard.vue

<template>
  <div class="oilCard">
    <el-card>
      <!-- 表单 -->
      <el-form ref="form" :model="formData" label-position="left" >
        <el-form-item label="支持油卡的类型：">
          <div style="display:inline-block" class="cardType">
            <img src="../../assets/petroleum.png" alt="">
            <span>中国石油</span>
          </div>
          <div style="display:inline-block" class="cardType">
            <img src="../../assets/petrifaction.png" alt="">
            <span>中国石化</span>
          </div>
        </el-form-item>
        <el-form-item label="充值金额：">
          <template v-if="oil_amount.length">
            <el-button
              :type="idx === curBtn ? 'success' : 'info'"
              v-for="(item,idx) in oil_amount"
              :key="idx"
              @click="hRecharge(item,idx)"
              size="mini">{{item}}</el-button>
          </template>
          <span v-else style="font-size: 13px;color: #909399;">请选择充值金额</span>
        </el-form-item>
        <el-form-item label="卡号：">
            <el-input
              type="textarea"
              placeholder="请填写油卡号，最多一次可以充值30单"
              v-model.trim="formData.code"
              style="width: 80%"
              :rows="8"></el-input>
        </el-form-item>
        <el-form-item style="padding-left:53px;">
            <el-button type="primary" size="small" @click="rechargeBtn" :disabled="disabled">卡号校验</el-button>
            <el-button type="success" size="small" @click="confirmRecharge" :disabled="disabledRecharge">充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:20px">
        <h3 style="margin-bottom:20px">充值结果：</h3>
        <!-- 提示 -->
        <el-alert
          v-if="tableData.length"
          :title="'一共充值 '+all_no+' 条,成功 '+success_no+' 条，失败 '+error_no+' 条'"
          type="info"
          show-icon
          style="margin-top:10px"
          :closable="false">
        </el-alert>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%;margin-top:20px;font-size:13px;"
          v-loading="loading"
          element-loading-text="充值中">
          <el-table-column align="center" prop="card_no" label="卡号" width="170"></el-table-column>
          <el-table-column align="center" label="订单号" width="170">
            <template slot-scope="scope" v-if="scope.row.state == true">
              {{scope.row.err}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="amount" label="充值金额"></el-table-column>
          <el-table-column align="center" label="充值状态" width="85">
            <template slot-scope="scope">
              <el-tag type="success" size="small" v-if="scope.row.state == true">成功提交</el-tag>
              <el-tag type="danger" size="small" v-else>失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="错误原因" width="150">
            <template slot-scope="scope" v-if="scope.row.state != true">
              {{scope.row.err}}
            </template>
          </el-table-column>
        </el-table>
    </el-card>

    <!-- 查看弹层 -->
    <el-dialog
      title="请审核充值卡号是否正确(可编辑)"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleClose">
      <el-input v-for="(item, idx) in input" :key="idx" v-model="input[idx]" style="margin-bottom: 10px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="trueBtn">确认无误</el-button>
      </span>
    </el-dialog>

    <!-- 充值弹层 -->
    <el-dialog
      title="油卡充值"
      :visible.sync="dialogVisibleCard"
      width="80%"
      @close="handleCloseCard">
      <el-input v-for="(item, idx) in input" :key="idx" :value="item" style="margin-bottom: 10px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseCard" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="onSubmit">确认充值</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// getRechargeAmount-充值金额 OilCardRecharge-油卡充值
import { getRechargeAmount, OilCardRecharge } from '@/api'
export default {
  name: 'phoneOilCard',
  data() {
    return {
      formData: {
        code: ''
      },
      // 充值金额
      oil_amount: [],
      // 点击的按钮
      curBtn: '',
      curMoney: '',
      // 表格数据
      tableData: [],
      // 分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      // 卡号确认弹层
      dialogVisible: false,
      dialogVisibleCard: false,
      // 卡号
      input: [],
      // 第一位字符
      firstStr: '',
      // 文本域字符
      codeStr: '',
      // 分割后字符
      splitStr: '',
      loading: false,
      // 充值数
      all_no: 0,
      // 成功数
      success_no: 0,
      // 失败数
      error_no: 0,
      disabled: false,
      disabledRecharge: false
    }
  },
  created() {
    this.getRechargeAmount()
  },
  watch: {
    codeStr(newVal) {
      console.log('newVal', newVal);
      // 判断是否有，或者；
      // console.log('newVal.substr(0,1)',newVal.substr(0,1) == '，');
      if (newVal.substr(0,1) == "，" || newVal.substr(0,1) == "," || newVal.substr(0,1) == "；" || newVal.substr(0,1) == ";") {
        this.codeStr = this.codeStr.replace(/[,，;；]/, "")
        console.log('替换', this.codeStr);
      }
      if (this.codeStr.length > 0) {
        this.firstStr = this.codeStr.substr(0,1)
        // 1-中石化19位 9-中石油16位
        if (this.firstStr == '1') {
          if (this.codeStr.length < 19) {
            this.dialogVisible = false
            this.dialogVisibleCard = false
            this.splitStr = ""
            this.$message.error('请输入合法卡号')
            return
          }
          this.splitStr = this.splitStr == '' ? this.splitStr.concat(this.codeStr.substring(0,19)) : this.splitStr.concat(',' + this.codeStr.substring(0,19))
          this.codeStr = this.codeStr.substr(19)
          console.log('codeStr', this.codeStr);
        } else if (this.firstStr == '9') {
          if (this.codeStr.length < 16) {
            this.splitStr = ""
            this.dialogVisible = false
            this.dialogVisibleCard = false
            this.$message.error('请输入合法卡号')
            return
          }
          this.splitStr = this.splitStr == '' ? this.splitStr.concat(this.codeStr.substring(0,16)) : this.splitStr.concat(',' + this.codeStr.substring(0,16))
          this.codeStr = this.codeStr.substr(16)
          console.log('codeStr', this.codeStr);
        } else {
          this.splitStr = ""
          this.dialogVisible = false
          this.dialogVisibleCard = false
          this.$message.error('请输入合法卡号')
        }
      }
      if (!newVal) {
        this.input = this.splitStr.split(',')
      }
    },
    formData(newVal) {
      if (newVal.code == '') {
        this.splitStr = ''
        this.input = []
      }
    },
    input(newVal) {
      if (newVal && newVal.length > 30) {
        this.splitStr = ''
        this.input = []
        this.dialogVisible = false
        this.dialogVisibleCard = false
        this.$message.error('一次最多可以充值30单')
      }
    }
  }, 
  methods: {
    // 获取充值金额
    async getRechargeAmount() {
      try {
        const res = await getRechargeAmount()
        console.log('充值金额', res);
        if (res && res.code == 200) {
          this.oil_amount = res.datas.oil_amount
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 点击充值金额
    hRecharge(item,idx) {
      this.curMoney = item
      this.curBtn = idx
    },
    // 查看按钮
    rechargeBtn() {
      this.disabled = true
      if (this.dialogVisible) {
        this.disabled = false
        return
      }
      if (!this.formData.code) {
        this.$message.error('请填写卡号')
        this.disabled = false
        return
      }
      if (!this.curMoney) {
        this.$message.error('请选择充值金额')
        this.disabled = false
        return
      }
      this.dialogVisible = true
      this.input = []
      // 去掉中间空格和中文
      this.codeStr = this.formData.code.replace(/\s/g,"").replace(/[\u4e00-\u9fa5]/g, "")
      console.log('1', this.codeStr);
      // this.inputBlur()
      setTimeout(() => {
        this.disabled = false
      }, 1000)

    },
    // 确认无误按钮
    trueBtn() {
      this.dialogVisible = false
      this.splitStr = this.input.toString()
      this.formData.code = this.splitStr.replace(/[',]/g, '\n')
      this.input = []
      // console.log('this.formData.code', this.formData.code);
    },
    // 充值
    confirmRecharge() {
      this.disabledRecharge = true
      if (this.dialogVisibleCard) {
        return
      }
      if (!this.formData.code) {
        this.disabledRecharge = false
        this.$message.error('请填写油卡号')
        return
      }
      if (!this.curMoney) {
        this.disabledRecharge = false
        this.$message.error('请选择充值金额')
        return
      }
      this.codeStr = this.formData.code.replace(/\s/g,"").replace(/[\u4e00-\u9fa5]/g, "")
      console.log('1', this.codeStr.substr(0,1));
      this.input = []
      this.splitStr = ''
      this.dialogVisibleCard = true
      setTimeout(() => {
        this.disabledRecharge = false
      }, 1000)
    },
    // 关闭弹层
    handleClose() {
      this.dialogVisible = false
      this.splitStr = ''
      this.input = []
    },
    handleCloseCard() {
      this.dialogVisibleCard = false
      this.splitStr = ''
      this.input = []
    },
    // 确认充值按钮
    async onSubmit() {
      this.dialogVisibleCard = false
      this.loading = true
      try {
        this.splitStr = this.input.toString()
        // cardno, amount
        let param = new URLSearchParams()
        param.append('cardno', this.splitStr)
        param.append('amount', this.curMoney)
        // const res = await OilCardRecharge({
        //   cardno: this.splitStr,
        //   amount: this.curMoney
        // })
        const res = await OilCardRecharge(param)
        console.log('油卡充值', res);
        if (res && res.code == 200) {
          this.tableData = res.datas.data
          this.all_no = res.datas.all_no
          this.success_no = res.datas.success_no
          this.error_no = res.datas.error_no
          this.splitStr = ''
          this.curMoney = ''
          this.curBtn = ''
          this.formData.code = ''
        }
        this.loading = false
      } catch (error) {
        console.log(error);
        this.loading = false
      }
    },
    // 分页
    async onPageChange(page) {
        if (page == this.pageNumber) {
            return;
        } else {
            // this.pageNumber = page;
            // // setTimeout(() => {
            // //     // this.getActionLogList();
            // //     this.getOrderList(this.pageNumber)
            // // }, 0);
            // const startTime = this.dataRange[0]
            // const endTime = this.dataRange[1]
            // const res = await queryList(this.pageNumber, startTime, endTime, this.RechargeType)
            // console.log('查询订单', res);
            // if (res && res.code == 200) {
            //     this.tableData = res.datas.data
            // }
        }
    }
  }
}
</script>

<style scoped lang="less">
.cardType {
  margin-right: 10px;
}
.cardType img {
  vertical-align: middle;
  margin-right: 5px;
}
.cardType  span {
  vertical-align: middle;
}
/deep/.el-table td, 
/deep/.el-table th {
    padding: 7px 0;
}
/deep/.el-table .cell,
/deep/.el-table--border td:first-child .cell,
/deep/.el-table--border th:first-child .cell {
    padding-left: 7px;
}
/deep/.el-table .cell {
    padding-right: 7px;
}
/deep/.el-card__body {
  padding: 10px;
}
/deep/.el-button+.el-button {
    margin-left: 6px;
}
/deep/.el-button--mini{
  padding: 7px 10px;
  font-size: 12px;
}
/deep/.el-input__inner {
  padding: 0 15px;/*no */
  text-align: left;
}
</style>
<style>
.el-main {
  padding: 0;
  margin-right: calc(100% - 100vw);
}
.el-card {
  margin: 20px 30px;
}
.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: #ccc; 
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #ccc;
}
.el-table td, .el-table th.is-leaf {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.el-table thead {
  color: #606266;
}
.el-message {
  min-width: 250px !important;
}
</style>