油卡充值

src/api/index.js

@@ -222,6 +222,15 @@ export const getVoucherList = () => {
 export const queryVoucherList = (page, start_time, end_time) => {
     return requestLoading(`${Prefix}act=refill_evidence&op=index&client_type=ajax&curpage=${page}&start_time=${start_time}&end_time=${end_time}`, 'get')
 }
+
+// 获取充值金额
+export const getRechargeAmount = () => {
+    return requestLoading(`${Prefix}act=merchant_refill&op=goods&client_type=ajax`, 'post')
+}
+// 油卡充值 cardno-卡号 amount-充值金额
+export const OilCardRecharge = (cardno, amount) => {
+    return requestLoading(`${Prefix}act=merchant_refill&op=add&client_type=ajax&cardno=${cardno}&amount=${amount}`, 'post')
+}
 // 余额列表
 // export const balanceList = (params) => {
 //     return requestLoading(`${Prefix}/balanceList`, 'get', params)

src/pages/index.vue

@@ -65,6 +65,14 @@
                     <i class="el-icon-s-platform"></i>
                     <span slot="title">开发者设置</span>
                 </el-menu-item>
+                <el-menu-item index="oilCard" route="oilCard">
+                    <i class="el-icon-bank-card"></i>
+                    <span slot="title">油卡充值</span>
+                </el-menu-item>
+                <el-menu-item index="mobileCard" route="mobileCard">
+                    <i class="el-icon-mobile"></i>
+                    <span slot="title">手机卡充值</span>
+                </el-menu-item>
             </el-menu>
         </el-aside>
         <el-main class="el-menu">

src/pages/subPages/mobileCard.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="mobileCard">手机卡</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/subPages/oilCard.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="oilCard">
+    <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>
+        <el-form-item label="充值金额">
+          <el-button
+            :type="idx === curBtn ? 'success' : 'info'"
+            v-for="(item,idx) in oil_amount"
+            :key="idx"
+            @click="hRecharge(item,idx)"
+            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-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-table :data="tableData" border style="width: 100%;margin-top:20px">
+          <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: 'oilCard',
+  data() {
+    return {
+      formData: {
+        code: ''
+      },
+      // 充值金额
+      oil_amount: [],
+      // 点击的按钮
+      curBtn: '',
+      curMoney: '',
+      // 表格数据
+      tableData: [],
+      // 分页
+      pageSize: 10,
+      pageNumber: 1,
+      total: 0,
+      // 卡号确认弹层
+      dialogVisible: false,
+      // 卡号
+      input: [],
+      // 第一位字符
+      firstStr: '',
+      codeStr: '',
+      splitStr: ''
+    }
+  },
+  created() {
+    this.getRechargeAmount()
+  },
+  watch: {
+    codeStr(newVal) {
+      console.log('newVal', newVal);
+      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.$message.error('请输入合法卡号')
+            this.dialogVisible = false
+            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.$message.error('请输入合法卡号')
+            this.dialogVisible = false
+            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.$message.error('请输入合法卡号')
+          this.dialogVisible = false
+        }
+      }
+      if (!newVal) {
+        this.input = this.splitStr.split(',')
+      }
+    }
+  }, 
+  methods: {
+    // 获取充值金额
+    async getRechargeAmount() {
+      const res = await getRechargeAmount()
+      console.log('充值金额', res);
+      if (res && res.code == 200) {
+        this.oil_amount = res.datas.oil_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
+      // cardno, amount
+      const res = await OilCardRecharge(this.splitStr, this.curMoney)
+      console.log('油卡充值', res);
+      if (res && res.code == 200) {
+        this.tableData = res.datas.data
+        this.splitStr = ''
+        this.curMoney = ''
+        this.formData.code = ''
+      }
+    },
+    // 分页
+    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>
+
+</style>

src/router/index.js

@@ -13,6 +13,10 @@ const balance = () => import('@/pages/subPages/balance');
 const Message = () => import('@/pages/subPages/message');
 // const Status = () => import('@/pages/subPages/status');
 const View = () => import('@/pages/subPages/view');
+// 油卡充值
+const OilCard = () => import('@/pages/subPages/oilCard');
+// 手机卡充值
+const MobileCard = () => import('@/pages/subPages/mobileCard');
 
 Vue.use(VueRouter)
 
@@ -53,11 +57,23 @@ Vue.use(VueRouter)
       //   name:'status',
       //   component:Status
       // },
-      // 安全IP控制
+      // 开发者设置
       {
         path:'/view',
         name:'view',
         component:View
+      },
+      // 油卡充值
+      {
+        path:'/oilCard',
+        name:'oilCard',
+        component:OilCard
+      },
+      // 话费充值
+      {
+        path:'/mobileCard',
+        name:'mobileCard',
+        component:MobileCard
       }
     ]
   },