手机卡充值

src/pages/subPages/mobileCard.vue

@@ -1,10 +1,214 @@
 <template>
-  <div class="mobileCard">手机卡</div>
+  <div class="mobilrCard">
+    <el-card>
+      <!-- 表单 -->
+      <el-form ref="form" :model="formData" label-width="150px">
+        <el-form-item label="支持电话卡的类型">
+          <img src="../../assets/move@2x.png" alt="" style="width: 80px;margin-right: 10px;margin-top:10px">
+          <img src="../../assets/Unicom@2x.png" alt="" style="width: 80px;;margin-right: 10px;margin-top:10px">
+          <img src="../../assets/telecom@2x.png" alt="" style="width: 80px;margin-top:10px">
+        </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="请填写手机号" v-model.trim="formData.code" style="width: 70%"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="rechargeBtn">充值</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card style="margin-top:40px">
+        <!-- 提示 -->
+        <el-alert
+          v-if="tableData.length"
+          :title="'一共充值 '+all_no+' 条,成功 '+success_no+' 条，失败 '+error_no+' 条'"
+          type="info"
+          show-icon
+          style="margin-top:10px">
+        </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" 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" :value="item" style="margin-bottom: 10px"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</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: [],
+      // 分页
+      pageSize: 10,
+      pageNumber: 1,
+      total: 0,
+      // 卡号确认弹层
+      dialogVisible: false,
+      // 卡号
+      input: [],
+      // 第一位字符
+      firstStr: '',
+      // 文本域字符
+      codeStr: '',
+      // 分割后字符
+      splitStr: '',
+      loading: false,
+      // 充值数
+      all_no: 0,
+      // 成功数
+      success_no: 0,
+      // 失败数
+      error_no: 0
+    }
+  },
+  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(',')
+      }
+    }
+  }, 
+  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() {
+      if (!this.formData.code) {
+        this.$message.error('请填写手机号')
+        return
+      }
+      this.dialogVisible = true
+      this.codeStr = this.formData.code.replace(/\s/g,"")
+      console.log('1', this.codeStr.substr(0,1));
 
+    },
+    // 关闭弹层
+    handleClose() {
+      this.dialogVisible = false
+    },
+    // 确认无误按钮
+    async onSubmit() {
+      this.dialogVisible = false
+      this.loading = true
+      // cardno, amount
+      const res = await OilCardRecharge(this.splitStr, this.curMoney)
+      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.formData.code = ''
+        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>
 

src/pages/subPages/oilCard.vue

@@ -3,9 +3,9 @@
     <el-card>
       <!-- 表单 -->
       <el-form ref="form" :model="formData" label-width="150px">
-        <el-form-item label="支持电话卡的类型">
-          <img src="../../assets/petroleum@2x.png" alt="" style="width: 76px;margin-right: 10px;margin-top:8px">
-          <img src="../../assets/petrifaction@2x.png" alt="" style="width: 76px;margin-top:8px">
+        <el-form-item label="支持油卡的类型">
+          <img src="../../assets/petroleum@2x.png" alt="" style="width: 80px;margin-right: 10px;margin-top:10px">
+          <img src="../../assets/petrifaction@2x.png" alt="" style="width: 80px;margin-top:10px">
         </el-form-item>
         <el-form-item label="充值金额">
           <el-button
@@ -16,7 +16,7 @@
             size="small">{{item}}</el-button>
         </el-form-item>
         <el-form-item label="卡号">
-            <el-input type="textarea" v-model.trim="formData.code" style="width: 70%"></el-input>
+            <el-input type="textarea" placeholder="请填写油卡号" v-model.trim="formData.code" style="width: 70%"></el-input>
         </el-form-item>
         <el-form-item>
             <el-button type="primary" @click="rechargeBtn">充值</el-button>
@@ -24,8 +24,21 @@
       </el-form>
     </el-card>
     <el-card style="margin-top:40px">
+        <!-- 提示 -->
+        <el-alert
+          v-if="tableData.length"
+          :title="'一共充值 '+all_no+' 条,成功 '+success_no+' 条，失败 '+error_no+' 条'"
+          type="info"
+          show-icon
+          style="margin-top:10px">
+        </el-alert>
         <!-- 表格 -->
-        <el-table :data="tableData" border style="width: 100%;margin-top:20px">
+        <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" prop="amount" label="充值金额"></el-table-column>
           <el-table-column align="center" label="充值状态">
@@ -88,8 +101,17 @@ export default {
       input: [],
       // 第一位字符
       firstStr: '',
+      // 文本域字符
       codeStr: '',
-      splitStr: ''
+      // 分割后字符
+      splitStr: '',
+      loading: false,
+      // 充值数
+      all_no: 0,
+      // 成功数
+      success_no: 0,
+      // 失败数
+      error_no: 0
     }
   },
   created() {
@@ -98,6 +120,12 @@ export default {
   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位
@@ -161,14 +189,19 @@ export default {
     // 确认无误按钮
     async onSubmit() {
       this.dialogVisible = false
+      this.loading = true
       // cardno, amount
       const res = await OilCardRecharge(this.splitStr, this.curMoney)
       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.formData.code = ''
+        this.loading = false
       }
     },
     // 分页