|
|
@@ -0,0 +1,275 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="mymain-container">
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ v-loading="listLoading"
|
|
|
+ :data="dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ stripe
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="left"
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ prop=""
|
|
|
+ width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="left"
|
|
|
+ label="账户名称"
|
|
|
+ prop="accountName"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="left"
|
|
|
+ label="银行卡号"
|
|
|
+ prop="bankCardId"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="left"
|
|
|
+ label="开户行名称"
|
|
|
+ prop="openBankName"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="left"
|
|
|
+ label="余额(元)"
|
|
|
+ prop="balanceAmount"
|
|
|
+ min-width="100"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ :disabled="scope.row.openState"
|
|
|
+ type="text"
|
|
|
+ @click="lookAmountFn(scope.$index, scope.row.id)"
|
|
|
+ >{{ scope.row.openState ? scope.row.time + 's' : '查看余额' }}</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button type="text" @click="lookAmountFn(scope.row.id)" :disabled="countDown != 60">{{
|
|
|
+ countDown == 60
|
|
|
+ ? '查看余额'
|
|
|
+ : countDown + "s"
|
|
|
+ }}</el-button> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 30, 50]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="listTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="查看余额"
|
|
|
+ :visible.sync="dialogForm"
|
|
|
+ width="30%"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <el-form ref="balanceForm" :rules="rules" :model="balanceForm" label-width="100px">
|
|
|
+ <el-form-item label="手机号码" prop="mobile">
|
|
|
+ <!-- <el-input placeholder="请输入"></el-input> -->
|
|
|
+ <el-select class="selectStyle" v-model="balanceForm.mobile" placeholder="请选择" filterable>
|
|
|
+ <!-- <el-option value="13800138000"></el-option>
|
|
|
+ <el-option value="13927887984"></el-option>
|
|
|
+ <el-option value="13452642451"></el-option> -->
|
|
|
+ <el-option v-for="(v, i) in phoneList" :key="i" :label="v.dictValue" :value="v.dictValue"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :lg="16">
|
|
|
+ <el-form-item label="手机验证码" prop="code">
|
|
|
+ <el-input v-model="balanceForm.code" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="6">
|
|
|
+ <!-- <el-button type="primary">验证码</el-button> -->
|
|
|
+ <el-button @click="codeFn" :disabled="countDown != 60">{{
|
|
|
+ countDown == 60 ? getCodeText : '重新获取(' + countDown + 's)'
|
|
|
+ }}</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancelFn">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmFn">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getList, getCode, getAcount, getbyCode } from '@/api/dailySettlement/bankBalanceQuery'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ rules: {},
|
|
|
+ balanceForm: {
|
|
|
+ mobile: '',
|
|
|
+ code: ''
|
|
|
+ },
|
|
|
+ listLoading: false, // 列表加载loading
|
|
|
+ dialogForm: false,
|
|
|
+ currentPage: 1, // 当前页码
|
|
|
+ pageSize: 10, // 每页数量
|
|
|
+ listTotal: 0, // 列表总数
|
|
|
+ getCodeText: '获取验证码',
|
|
|
+ countDown: 60,
|
|
|
+ seeIndex: '',
|
|
|
+ seeId: '',
|
|
|
+ phoneList: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDataList()
|
|
|
+
|
|
|
+ // setInterval(() => {
|
|
|
+ // console.log(2);
|
|
|
+ // this.dataList.forEach((v) => {
|
|
|
+ // if (v.openState) {
|
|
|
+ // v.time--;
|
|
|
+ // if (v.time == 0) {
|
|
|
+ // v.time = 60;
|
|
|
+ // v.openState = false;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取手机号
|
|
|
+ async getPhone() {
|
|
|
+ let res = await getbyCode({
|
|
|
+ code: 'SELECT'
|
|
|
+ })
|
|
|
+ this.phoneList = res.data
|
|
|
+ },
|
|
|
+ // 更改每页数量
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val
|
|
|
+ this.currentPage = 1
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+ // 更改当前页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val
|
|
|
+ this.getDataList()
|
|
|
+ },
|
|
|
+
|
|
|
+ //验证码
|
|
|
+ async codeFn() {
|
|
|
+ let params = {
|
|
|
+ mobile: this.balanceForm.mobile
|
|
|
+ }
|
|
|
+ await getCode(params)
|
|
|
+ this.$message.success('短信已发送')
|
|
|
+
|
|
|
+ this.countDown--
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.countDown--
|
|
|
+ if (this.countDown == 0) {
|
|
|
+ this.countDown = 60
|
|
|
+ this.getCodeText = '重新获取'
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ //查看余额
|
|
|
+ lookAmountFn(i, id) {
|
|
|
+ this.getPhone()
|
|
|
+ this.seeIndex = i
|
|
|
+ this.seeId = id
|
|
|
+ this.dialogForm = true
|
|
|
+ },
|
|
|
+ //获取列表数据
|
|
|
+ async getDataList() {
|
|
|
+ let params = {
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ pageNo: this.currentPage
|
|
|
+ }
|
|
|
+ let res = await getList(params)
|
|
|
+
|
|
|
+ this.dataList = res.data.records
|
|
|
+ this.dataList.forEach(v => {
|
|
|
+ v.time = 60
|
|
|
+ v.openState = false
|
|
|
+ v.balanceAmount = '******'
|
|
|
+ })
|
|
|
+ this.listTotal = res.data.total
|
|
|
+ },
|
|
|
+ //取消
|
|
|
+ async cancelFn() {
|
|
|
+ await this.$refs.balanceForm.resetFields()
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.countDown = 60
|
|
|
+ this.dialogForm = false
|
|
|
+ },
|
|
|
+ //确定
|
|
|
+ async confirmFn() {
|
|
|
+ let params = {
|
|
|
+ id: this.seeId,
|
|
|
+ ...this.balanceForm
|
|
|
+ }
|
|
|
+ let res = await getAcount(params)
|
|
|
+
|
|
|
+ this.$message.success('查询成功')
|
|
|
+
|
|
|
+ let index = this.seeIndex
|
|
|
+ this.dataList.forEach(v => {
|
|
|
+ if (v.id == this.seeId) {
|
|
|
+ v.balanceAmount = res.data.balanceAmount
|
|
|
+ // v.balanceAmount = 123;
|
|
|
+ v.openState = true
|
|
|
+ let a = 'aaa' + v.id
|
|
|
+
|
|
|
+ a = setInterval(() => {
|
|
|
+ v.time--
|
|
|
+ this.$set(this.dataList, index, v)
|
|
|
+ // Object.assign({}, this.dataList);
|
|
|
+ if (v.time == 0) {
|
|
|
+ v.time = 60
|
|
|
+ v.openState = false
|
|
|
+ v.balanceAmount = '******'
|
|
|
+ this.$set(this.dataList, index, v)
|
|
|
+ clearInterval(a)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.cancelFn()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.selectStyle {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+</style>
|
aXin-0810