|
|
@@ -3,7 +3,7 @@
|
|
|
<el-card>
|
|
|
<!-- 表单 -->
|
|
|
<el-form ref="form" :model="formData" label-width="150px">
|
|
|
- <el-form-item label="支持电话卡的类型">
|
|
|
+ <el-form-item label="支持电话卡的类型：">
|
|
|
<div style="display:inline-block" class="cardType">
|
|
|
<img src="../../assets/move.png" alt="">
|
|
|
<span>中国移动</span>
|
|
|
@@ -17,7 +17,7 @@
|
|
|
<span>中国电信</span>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="充值金额">
|
|
|
+ <el-form-item label="充值金额：">
|
|
|
<el-button
|
|
|
:type="idx === curBtn ? 'success' : 'info'"
|
|
|
v-for="(item,idx) in phone_amount"
|
|
|
@@ -25,22 +25,30 @@
|
|
|
@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 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">充值</el-button>
|
|
|
+ <el-button type="primary" @click="rechargeBtn">卡号校验</el-button>
|
|
|
+ <el-button type="success" @click="confirmRecharge">充值</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+' 条'"
|
|
|
+ :title="'一共充值 '+all_no+' 单,成功 '+success_no+' 单，失败 '+error_no+' 单'"
|
|
|
type="info"
|
|
|
show-icon
|
|
|
- style="margin-top:10px">
|
|
|
+ style="margin-top:10px"
|
|
|
+ :closable="false">
|
|
|
</el-alert>
|
|
|
<!-- 表格 -->
|
|
|
<el-table
|
|
|
@@ -69,16 +77,30 @@
|
|
|
</el-row> -->
|
|
|
</el-card>
|
|
|
|
|
|
- <!-- 充值弹层 -->
|
|
|
+ <!-- 查看弹层 -->
|
|
|
<el-dialog
|
|
|
- title="请审核充值手机号是否正确"
|
|
|
+ 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="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">确认无误</el-button>
|
|
|
+ <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>
|
|
|
@@ -101,12 +123,10 @@ export default {
|
|
|
curMoney: '',
|
|
|
// 表格数据
|
|
|
tableData: [],
|
|
|
- // 分页
|
|
|
- pageSize: 10,
|
|
|
- pageNumber: 1,
|
|
|
- total: 0,
|
|
|
- // 卡号确认弹层
|
|
|
+ // 卡号查看弹层
|
|
|
dialogVisible: false,
|
|
|
+ // 卡号充值弹层
|
|
|
+ dialogVisibleCard: false,
|
|
|
// 卡号
|
|
|
input: [],
|
|
|
// 第一位字符
|
|
|
@@ -149,6 +169,21 @@ export default {
|
|
|
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: {
|
|
|
@@ -165,28 +200,58 @@ export default {
|
|
|
this.curMoney = item
|
|
|
this.curBtn = idx
|
|
|
},
|
|
|
- // 充值按钮
|
|
|
+ // 查看按钮
|
|
|
rechargeBtn() {
|
|
|
if (!this.formData.code) {
|
|
|
this.$message.error('请填写手机号')
|
|
|
return
|
|
|
}
|
|
|
this.dialogVisible = true
|
|
|
+ this.input = []
|
|
|
+ this.splitStr = ''
|
|
|
this.codeStr = this.formData.code.replace(/\s/g,"")
|
|
|
console.log('1', this.codeStr.substr(0,1));
|
|
|
|
|
|
},
|
|
|
+ confirmRecharge() {
|
|
|
+ if (!this.formData.code) {
|
|
|
+ this.$message.error('请填写手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dialogVisibleCard = true
|
|
|
+ this.input = []
|
|
|
+ this.splitStr = ''
|
|
|
+ this.codeStr = this.formData.code.replace(/\s/g,"")
|
|
|
+ console.log('1', this.codeStr.substr(0,1));
|
|
|
+ },
|
|
|
// 关闭弹层
|
|
|
handleClose() {
|
|
|
this.dialogVisible = false
|
|
|
+ this.splitStr = ''
|
|
|
+ this.input = []
|
|
|
+ },
|
|
|
+ handleCloseCard() {
|
|
|
+ this.dialogVisibleCard = false
|
|
|
+ this.splitStr = ''
|
|
|
+ this.input = []
|
|
|
},
|
|
|
// 确认无误按钮
|
|
|
- async onSubmit() {
|
|
|
+ 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
|
|
|
- const res = await OilCardRecharge(this.splitStr, this.curMoney)
|
|
|
+ // cardno, amount this.splitStr, this.curMoney
|
|
|
+ const res = await OilCardRecharge({
|
|
|
+ cardno: this.splitStr,
|
|
|
+ amount: this.curMoney
|
|
|
+ })
|
|
|
console.log('手机卡充值', res);
|
|
|
if (res && res.code == 200) {
|
|
|
this.tableData = res.datas.data
|
|
|
@@ -200,30 +265,12 @@ export default {
|
|
|
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>
|
|
|
|
|
|
<style scoped>
|
|
|
+
|
|
|
.cardType {
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
@@ -234,4 +281,19 @@ export default {
|
|
|
.cardType span {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
-</style>>
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
