merchant/src/pages/subPages/mobileCard.vue

<template>
  <div class="mobilrCard">
    <el-card>
      <!-- 表单 -->
      <el-form ref="form" :model="formData" label-width="150px">
        <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="充值金额：">
          <el-button
            :type="idx === curBtn ? 'success' : 'info'"
            v-for="(item,idx) in phone_amount"
            :key="idx"
            @click="hRecharge(item,idx)"
            size="small">{{item}}</el-button>
        </el-form-item>
        <el-form-item label="手机号：">
            <el-input
              type="textarea"
              placeholder="请填写手机号，最多一次可以充值30单"
              v-model.trim="formData.code"
              style="width: 70%;"
              :rows="15"></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">卡号校验</el-button>
            <el-button type="success" @click="confirmRecharge" :disabled="disabledRecharge">充值</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top:40px">
        <p>充值结果：</p>
        <!-- 提示 -->
        <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"
          v-loading="loading"
          element-loading-text="充值中">
          <el-table-column align="center" prop="card_no" label="手机号"></el-table-column>
          <el-table-column align="center" label="订单号">
            <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="充值状态">
            <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="错误原因">
            <template slot-scope="scope" v-if="scope.row.state != true">
              {{scope.row.err}}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- <el-row style="margin-top:10px;" type="flex" justify="end">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="onPageChange" :current-page="pageNumber"></el-pagination>
      </el-row> -->
    </el-card>

    <!-- 查看弹层 -->
    <el-dialog
      title="请审核手机号是否正确(可编辑)"
      :visible.sync="dialogVisible"
      width="30%"
      @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="30%"
      @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'
export default {
  name: 'mobileCard',
  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
    }
  },
  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) {
        // 手机卡11位
        if (this.codeStr.length < 11) {
            this.$message.error('请输入合法手机号')
            this.dialogVisible = false
            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 > 30) {
        this.$message.error('一次最多可以充值30单')
        this.splitStr = ''
        this.input = []
        this.dialogVisible = false
        this.dialogVisibleCard = false
      }
    }
  }, 
  methods: {
    // 获取充值金额
    async getRechargeAmount() {
      const res = await getRechargeAmount()
      console.log('充值金额', res);
      if (res && res.code == 200) {
        this.phone_amount = res.datas.phone_amount
      }
    },
    // 点击充值金额
    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
      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)
      // 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
      }
    },
  }
}
</script>

<style scoped>

.cardType {
  margin-right: 20px;
}
.cardType img {
  vertical-align: middle;
  margin-right: 10px;
}
.cardType  span {
  vertical-align: middle;
}
</style>