|
|
@@ -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>
|
|
|
|
