merchant/src/pages/phoneSubPages/phoneMobileCard.vue

<template>
  <div class="mobilrCard">
    <el-card>
      <!-- 表单 -->
      <el-form ref="form" :model="formData" label-width="85px" label-position="left">
        <el-form-item label="支持电话卡的类型：">
          <div style="display:inline-block" class="cardType">
            <img src="../../assets/move.png" alt="">
            <span>中国移动</span>
          </div>
          <div style="display:inline-block" class="cardType">
            <img src="../../assets/Unicom.png" alt="">
            <span>中国联通</span>
          </div>
          <div style="display:inline-block" class="cardType">
            <img src="../../assets/telecom.png" alt="">
            <span>中国电信</span>
          </div>
        </el-form-item>
        <el-form-item label="充值金额：">
          <template v-if="phone_amount.length">
            <el-button
              :type="idx === curBtn ? 'success' : 'info'"
              v-for="(item,idx) in phone_amount"
              :key="idx"
              @click="hRecharge(item,idx)"
              size="mini"
              style="margin-left:0;margin-right:6px">{{item}}</el-button>
          </template>
          <span v-else style="margin-left: 20px;font-size: 13px;color: #909399;">请选择充值金额</span>
        </el-form-item>
        <el-form-item label="通道质量：">
          <el-button
            :type="item.value === qualityBtn ? 'success' : 'info'"
            v-for="item in qualityCon"
            :key="item.value"
            @click="hQucharge(item)"
            size="mini"
            style="margin-left:0;margin-right:6px">{{item.label}}</el-button>
        </el-form-item>
        <el-form-item label="手机号：">
            <el-input
              type="textarea"
              placeholder="请填写手机号，最多一次可以充值500单"
              v-model.trim="formData.code"
              style="width: 100%;"
              :rows="8"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
              @click="rechargeBtn"
              :loading="loadingSeeCard"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
              :disabled="disabled"
              size="small">卡号校验</el-button>
            <el-button type="success" @click="confirmRecharge" :disabled="disabledRecharge" size="small">充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px">
        <!-- <p>充值结果：</p> -->
        <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">取 消</el-button>
        <!-- <el-button type="primary" @click="onSubmit">确认无误</el-button> -->
        <el-button type="primary" @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">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确认充值</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// getRechargeAmount-充值金额 OilCardRecharge-油卡充值
import { getRechargeAmount, OilCardRecharge } from '@/api'
import { qualityCon } from '@/utils/constants'
export default {
  name: 'phoneMobileCard',
  data() {
    return {
      formData: {
        code: ''
      },
      // 充值金额
      phone_amount: [],
      // 点击的按钮
      curBtn: '',
      curMoney: '',
      // 表格数据
      tableData: [],
      // 卡号查看弹层
      dialogVisible: false,
      // 卡号充值弹层
      dialogVisibleCard: false,
      // 卡号
      input: [],
      // 第一位字符
      firstStr: '',
      // 文本域字符
      codeStr: '',
      // 分割后字符
      splitStr: '',
      loading: false,
      // 充值数
      all_no: 0,
      // 成功数
      success_no: 0,
      // 失败数
      error_no: 0,
      // 查看卡号loading
      loadingSeeCard: false,
      disabled: false,
      disabledRecharge: false,
      btnLoading: false,
      // 通道质量
      qualityCon,
      // 通道按钮
      qualityBtn: 1
    }
  },
  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(/[,，;；]/g, "")
        console.log('替换', this.codeStr);
      }
      if (this.codeStr.length > 0) {
        // 手机卡11位
        if (this.codeStr.length < 11) {
          this.dialogVisible = false
          this.dialogVisibleCard = false
          this.$message.error('请输入合法手机号')
          return
        }
        console.log('手机号', /^1[3-9]\d{9}$/.test(Number(this.codeStr.substr(0,11))));
        if (!/^1[3-9]\d{9}$/.test(Number(this.codeStr.substr(0,11)))) {
          this.dialogVisible = false
          this.dialogVisibleCard = false
          this.$message.error('请输入合法手机号')
          return
        }
        this.splitStr = this.splitStr == '' ? this.splitStr.concat(this.codeStr.substring(0,11)) : this.splitStr.concat(',' + this.codeStr.substring(0,11))
        this.codeStr = this.codeStr.substr(11)
      }
      if (!newVal) {
        this.input = this.splitStr.split(',')
      }
    },
    formData(newVal) {
      if (newVal.code == '') {
        this.splitStr = ''
        this.input = []
      }
    },
    input(newVal) {
      if (newVal && newVal.length > 500) {
        this.$message.error('一次最多可以充值500单')
        this.splitStr = ''
        this.input = []
        this.dialogVisible = false
        this.dialogVisibleCard = false
      }
    }
  }, 
  methods: {
    // 获取充值金额
    async getRechargeAmount() {
      try {
        const res = await getRechargeAmount()
        console.log('充值金额', res);
        if (res && res.code == 200) {
          this.phone_amount = res.datas.phone_amount
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 点击充值金额
    hRecharge(item,idx) {
      this.curMoney = item
      this.curBtn = idx
    },
    // 查看按钮
    rechargeBtn() {
      this.disabled = true
      if (this.dialogVisible) {
        return
      }
      this.loadingSeeCard = true
      if (!this.formData.code) {
        this.$message.error('请填写手机号')
        this.loadingSeeCard = false
        this.disabled = false
        return
      }
      if (!this.curMoney) {
        this.$message.error('请选择充值金额')
        this.loadingSeeCard = false
        this.disabled = false
        return
      }
      this.dialogVisible = true
      this.input = []
      this.splitStr = ''
      this.codeStr = this.formData.code.replace(/\s/g,"").replace(/[\u4e00-\u9fa5]/g, "")
      console.log('1', this.codeStr.substr(0,1));
      this.loadingSeeCard = false
      setTimeout(() => {
        this.disabled = false
      }, 1000)

    },
    confirmRecharge() {
      this.disabledRecharge = true
      if (this.dialogVisibleCard) {
        return
      }
      if (!this.formData.code) {
        this.$message.error('请填写手机号')
        this.disabledRecharge = false
        return
      }
      if (!this.curMoney) {
        this.$message.error('请选择充值金额')
        this.disabledRecharge = false
        return
      }
      this.dialogVisibleCard = true
      this.input = []
      this.splitStr = ''
      this.codeStr = this.formData.code.replace(/\s/g,"").replace(/[\u4e00-\u9fa5]/g, "")
      console.log('1', this.codeStr);
      setTimeout(() => {
        this.disabledRecharge = false
      }, 1000)
    },
    // 关闭弹层
    handleClose() {
      this.dialogVisible = false
      this.splitStr = ''
      this.input = []

    },
    handleCloseCard() {
      this.dialogVisibleCard = false
      this.splitStr = ''
      this.input = []
    },
    // 确认无误按钮
    trueBtn() {
      this.dialogVisible = false
      this.splitStr = this.input.toString()
      this.formData.code = this.splitStr.replace(/[',]/g, '\n')
      // console.log('this.formData.code', this.formData.code);
    },
    // 确认充值
    async onSubmit() {
      this.dialogVisibleCard = false
      this.loading = true
      try {
        this.splitStr = this.input.toString()
        // cardno, amount this.splitStr, this.curMoney
        let param = new URLSearchParams()
        param.append('cardno', this.splitStr)
        param.append('amount', this.curMoney)
        param.append('quality', this.qualityBtn)
        // 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
      }
    },
     // 选择通道质量
    hQucharge(item) {
      this.qualityBtn = item.value
    }
  }
}
</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--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>