MM_Admin/src/views/recharge/index.vue

<template>
  <div
    class="login-container"
  >
    <!-- v-loading="loading"
    element-loading-text="Loading..."
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(0, 0, 0, 0.8)" -->
    <el-form ref="dataForm" :model="dataForm" :rules="ruleForm">
      <el-row :gutter="30">
        <el-col :span="4">
          <el-form-item label="游戏平台" prop="pid">
            <el-select v-model="dataForm.pid" placeholder="Select" class="filter-item">
              <el-option
                v-for="item in rechargePlatform"
                :key="item.pid"
                :label="item.platform"
                :value="item.pid"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="渠道余额" style="width: 300px;">
            <el-input v-model="balanceMoney" type="number" class="inline-input filter-item" disabled style="width: 160px;" />&nbsp;元
          </el-form-item> -->
          <el-form-item label="渠道账号" prop="cid">
            <el-select v-model="dataForm.cid" placeholder="Select" class="filter-item">
              <el-option
                v-for="item in rechargeChannelPlatform"
                :key="item.cid"
                :label="item.account"
                :value="item.cid"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择游戏" prop="gfid">
            <el-select v-model="dataForm.gfid" placeholder="Select" class="filter-item">
              <el-option
                v-for="item in rechargeGame"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label="充值账户" prop="username" class="filter-item">
            <span style="font-size: 5px; color: #67C23A;">：{{ accountNum }}</span>
            <el-input
              v-model="dataForm.username"
              type="textarea"
              placeholder="请输入充值账户."
              :autosize="{ minRows: 15, maxRows: 60 }"
              @change="setAccountNum"
            />
          </el-form-item>
        </el-col>

        <el-col v-show="repeatNumList" :span="3">
          <el-form-item label="重复账号：" class="filter-item">
            <span style="font-size: 5px; color: #F56C6C;">：{{ repeatNumNum }}</span>
            <el-input
              v-model="repeatNumList"
              type="textarea"
              :autosize="{ minRows: 15, maxRows: 60 }"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="账户余额">
            <span>{{ user_money }}元</span>
          </el-form-item>
          <el-form-item label="充值金额" prop="money">
            <el-input v-model="dataForm.money" type="number" min="0" :max="maxMoney" class="filter-item" />
            <span style="font-size: var(--el-font-size-extra-small); color: #909399;">最大充值金额：{{ maxMoney }}</span>
          </el-form-item>
          <!-- <el-form-item label="平台折扣">
            <span>9.8折</span>
          </el-form-item>
          <el-form-item label="游戏折扣">
            <span>9.8折</span>
          </el-form-item> -->
          <el-form-item label="支付方式">
            <el-radio-group v-model="dataForm.payway" prop="payway" class="filter-item">
              <el-radio :label="1">久币支付</el-radio>
              <!-- <el-radio :label="2">商务币支付</el-radio> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="总支付金额">
            <span>{{ rechargeMoney }} 元</span>
          </el-form-item>
          <el-form-item label="账号检测">
            <el-radio-group v-model="dataForm.payway" prop="payway" class="filter-item">
              <el-switch v-model="onCheck" />
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">立即支付</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          处理时间：<span>{{ startTime }}</span>  -- <span>{{ endTime }}</span>
          <el-row :gutter="10">
            <el-col :span="8">
              <span style="font-size: 5px; color: #67C23A;">成功账户：{{ thenAccountNum }}</span>
              <el-input
                v-model="thenAccount"
                type="textarea"
                :autosize="{ minRows: 15, maxRows: 60 }"
              />
            </el-col>
            <el-col :span="8">
              <span style="font-size: 5px; color: #F56C6C;">失败账户：{{ catchAccountNum }}</span>
              <el-input
                v-model="catchAccount"
                type="textarea"
                :autosize="{ minRows: 15, maxRows: 60 }"
              />
            </el-col>
            <el-col :span="8">
              <span style="font-size: 5px; color: #F56C6C;">账户不存在：{{ noExistenceNum }}</span>
              <el-input
                v-model="noExistence"
                type="textarea"
                :autosize="{ minRows: 15, maxRows: 60 }"
              />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
var LodashArray = require('lodash/array')
import { Message, MessageBox, Loading } from 'element-ui'
import { rechargeChannelPlatformAccount } from '@/api/common'

export default {
  name: 'Recharge',
  data() {
    return {
      loading: false,
      dataForm: {
        pid: 'd65aa6d7614589bffe62456b88e98811', // 游戏平台ID;默认魅族平台
        cid: '', // 渠道账号ID
        gfid: '', // 游戏ID
        paypwd: '', // 支付密码
        username: '', // 充值账户
        money: 1, // 充值金额(单位：元)
        recharge: 2, //
        payway: 1, // 充值方式
        type: 3 //
      },
      ruleForm: {
        pid: [{ required: true, message: '请选择平台.', trigger: 'change' }],
        cid: [{ required: true, message: '请选择渠道账号.', trigger: 'change' }],
        gfid: [{ required: true, message: '请选择游戏.', trigger: 'change' }],
        username: [{ required: true, message: '缺少充值账户.', trigger: 'blur' }],
        money: [{ required: true, message: '请输入充值金额，最低一元.', trigger: 'blur' }]
      },
      // 游戏平台列表
      rechargePlatform: [
        {
          'pid': 'd65aa6d7614589bffe62456b88e98811',
          'platform': 'MM',
          'disRate': 9.8,
          'rate': 9.7,
          'type': 0,
          'length': 2
        }
      ],
      // balanceMoney: 0, // 渠道余额
      user_money: 0, // 账户余额
      maxMoney: 0, // 最大充值金额
      rechargeChannelPlatform: [], // 渠道账号
      rechargeGame: [], // 游戏列表

      accountNum: 0, // 总账户个数
      repeatNumList: '', // 重复账号列表
      repeatNumNum: 0, // 重复账号个数

      thenAccount: '', // 成功账户
      thenAccountNum: 0, // 成功个数
      catchAccount: '', // 失败账户
      catchAccountNum: 0, // 失败个数

      noExistence: '', // 不存在账户
      noExistenceNum: 0, // 不存在账户个数

      startTime: 0, // 开始时间
      endTime: 0, // 结束时间
      onCheck: false, // 是否需要检测账号()
      rechargeMoney: 0 // 支付总金额

    }
  },
  watch: {
    'dataForm.money': {
      handler(val, oldVal) {
        this.checkMoney(val)
      }
    }
  },
  created() {
    // this.getBalanceMoney(this.dataForm.pid)
    this.getRechargePlatform(this.dataForm.pid)
    this.getRechargeGame(this.dataForm.pid)
    this.updateUserMoney()

    this.$store.dispatch('user/getF5').then((res) => {
      if (!res) {
        this.$store.dispatch('user/setF5')
        location.reload()
      }
    })
  },
  methods: {
    // 判断充值金额
    checkMoney(money) {
      this.rechargeMoney = this.accountNum * money
      if ((this.user_money - this.rechargeMoney) < 0) {
        // this.rechargeMoney = this.accountNum * oldVal
        return Message({
          type: 'warning',
          message: '账户余额不足以充值！'
        })
      }
    },
    // 更新用户余额
    updateUserMoney() {
      this.$store.dispatch('user/getInfo').then((res) => {
        const { data } = res
        this.user_money = data.user_money
        if (this.accountNum > 0) {
          this.maxMoney = Math.floor(data.user_money / this.accountNum)
        } else {
          this.maxMoney = Math.floor(data.user_money)
        }
      })
    },
    // 统计充值账户数量并处理行数是否账号
    setAccountNum() {
      if (!this.dataForm.username) {
        return false
      }
      this.accountNum = 0
      this.repeatNumList = []
      this.repeatNumNum = 0

      var newQuestion = this.dataForm.username.replace(/\n\n/, '\n')
      const list = newQuestion.split('\n')

      var newList = []
      for (var i = 0; i < list.length; i++) {
        if (list[i] === '') {
          continue
        }
        // 账户去重，并提示
        if (newList.indexOf(list[i]) === -1) {
          this.accountNum++
          newList.push(list[i])
        } else {
          if (this.repeatNumList.indexOf(list[i]) === -1) {
            this.repeatNumNum++
            this.repeatNumList.push(list[i])
          }
        }
      }
      this.repeatNumList = this.repeatNumList.join().replace(new RegExp(',', 'g'), '\n')
      this.dataForm.username = newList.join().replace(new RegExp(',', 'g'), '\n')
      this.rechargeMoney = this.accountNum * this.dataForm.money
      this.maxMoney = Math.floor(this.user_money / this.accountNum)
    },
    /**
     * 发起提交 游戏账号检测/提交充值 数据
     */
    onSubmit() {
      // this.setAccountNum()

      this.thenAccount = ''
      this.thenAccountNum = 0

      this.catchAccount = ''
      this.catchAccountNum = 0

      this.noExistence = ''
      this.noExistenceNum = 0

      this.startTime = ''
      this.endTime = ''

      // TODO: 正式服务器未上线，暂时不需要
      // if ((this.balanceMoney - this.dataForm.money) < 0) {
      //   return Message({
      //     type: 'info',
      //     message: '余额不足以充值.'
      //   })
      // }
      if ((this.user_money - this.rechargeMoney) < 0) {
        return Message({
          type: 'warning',
          message: '账户余额不足以充值！'
        })
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 截取账号
          var accountLists = this.dataForm.username.split('\n')
          // console.log('# accountLists: ', accountLists)

          MessageBox.prompt('输入支付密码', 'Tip', {
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            this.sublmeRecharge(accountLists, value)
          }).catch(() => {
            return Message({
              type: 'info',
              message: '取消充值.'
            })
          })
        } else {
          return Message({
            type: 'error',
            message: '请完善提交内容.'
          })
        }
      })
    },
    // 提交检测和充值
    sublmeRecharge(accountLists, paypwd) {
      this.startTime = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()

      // 是否需要验证账户
      // 提取第一条账号数据，进行提交测试
      const oneAccount = accountLists[0]
      const oneData = { pid: this.dataForm.pid, cid: this.dataForm.cid, gfid: this.dataForm.gfid, paypwd: paypwd, username: oneAccount, money: this.dataForm.money, recharge: this.dataForm.recharge, payway: this.dataForm.payway, type: this.dataForm.type }
      const loadingNum = accountLists.length - 2
      if (this.onCheck) {
        // 账号检测
        this.$store.dispatch('common/rechargePlayerType', { pid: this.dataForm.pid, cid: this.dataForm.cid, gfid: this.dataForm.gfid, username: oneAccount }).then((res) => {
          const { code, status, message } = res

          if (code === 200 && status === true) {
            // 充值
            this.$store.dispatch('common/rechargePlayer', oneData).then((res) => {
              const { code, status, message } = res
              if (code === 200 && status === true) {
                this.thenAccount = this.thenAccount + oneAccount + '\n'
                this.thenAccountNum++

                if (loadingNum > 1) {
                  // 遮屏
                  this.loading = Loading.service({
                    lock: true,
                    text: '处理中, 请稍等...',
                    background: 'rgba(0, 0, 0, 0.7)'
                  })

                  // 成功后处理剩下账号数据
                  accountLists = LodashArray.drop(accountLists) // 删除第一个账户
                  accountLists.forEach(async(item, index) => {
                    await this.rechargePlayer(
                      { pid: this.dataForm.pid, cid: this.dataForm.cid, gfid: this.dataForm.gfid, paypwd: paypwd, username: item, money: this.dataForm.money, recharge: this.dataForm.recharge, type: this.dataForm.type },
                      index,
                      this.onCheck,
                      loadingNum
                    )
                  })
                }
              } else {
                this.catchAccount = this.catchAccount + oneAccount + '\n'
                this.catchAccountNum++

                return Message({
                  type: 'warning',
                  message: message
                })
              }
            }).catch((error) => {
              this.catchAccount = this.catchAccount + oneAccount + '\n'
              this.catchAccountNum++

              return Message({
                type: 'error',
                message: error.message
              })
            })
          } else {
            this.noExistence = this.noExistence + oneAccount + '\n'
            this.noExistenceNum++

            Message({
              type: 'error',
              message: '检测:' + message
            })
          }
        }).catch((error) => {
          console.log('# catch-message:', error.message)
          this.catchAccount = this.catchAccount + oneAccount + '\n'
          this.catchAccountNum++

          Message({
            type: 'error',
            message: '检测:' + error.message
          })
        })
      } else {
        this.$store.dispatch('common/rechargePlayer', oneData).then((res) => {
          const { code, status, message } = res
          if (code === 200 && status === true) {
            this.thenAccount = this.thenAccount + oneAccount + '\n'
            this.thenAccountNum++

            if (loadingNum > 1) {
              // 遮屏
              this.loading = Loading.service({
                lock: true,
                text: '处理中, 请稍等...',
                background: 'rgba(0, 0, 0, 0.7)'
              })

              // 成功后处理剩下账号数据
              accountLists = LodashArray.drop(accountLists) // 删除第一个账户
              accountLists.forEach(async(item, index) => {
                await this.rechargePlayer(
                  { pid: this.dataForm.pid, cid: this.dataForm.cid, gfid: this.dataForm.gfid, paypwd: paypwd, username: item, money: this.dataForm.money, recharge: this.dataForm.recharge, type: this.dataForm.type },
                  index,
                  this.onCheck,
                  loadingNum
                )
              })
            }
          } else {
            this.catchAccount = this.catchAccount + oneAccount + '\n'
            this.catchAccountNum++

            return Message({
              type: 'warning',
              message: message
            })
          }
        }).catch((error) => {
          this.catchAccount = this.catchAccount + oneAccount + '\n'
          this.catchAccountNum++

          return Message({
            type: 'error',
            message: error.message
          })
        })
      }

      // // ## 测试（去除第一个账户单独测试）
      // // 是否需要验证账户
      // const loadingNum = accountLists.length - 1
      // // 遮屏
      // this.loading = Loading.service({
      //   lock: true,
      //   text: '处理中, 请稍等...',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      // // 成功后处理剩下账号数据
      // accountLists.forEach(async(item, index) => {
      //   await this.rechargePlayer(
      //     { pid: this.dataForm.pid, cid: this.dataForm.cid, gfid: this.dataForm.gfid, paypwd: paypwd, username: item, money: this.dataForm.money, recharge: this.dataForm.recharge, type: this.dataForm.type },
      //     index,
      //     this.onCheck,
      //     loadingNum
      //   )
      // })
    },
    // 关闭加载页面
    cloneLoading() {
      // this.loading = false
      this.loading.close()
      this.updateUserMoney()
      this.endTime = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
    },
    // 异步进行账户充值
    rechargePlayer(data, index, onCheck, count) {
      // 延迟一秒处理
      setTimeout((data, index, onCheck, count) => {
        return new Promise((resolve, reject) => {
          // 继续延迟
          setTimeout((_data, onCheck, { index, count }) => {
            if (index === count || index > count) {
              this.cloneLoading()
            }
            // 是否需要账号检测
            if (onCheck === true) {
              // 账号检测
              this.$store.dispatch('common/rechargePlayerType', { pid: _data.pid, cid: _data.cid, gfid: _data.gfid, username: _data.username }).then((res) => {
                const { code, status, message } = res
                if (code === 200 && status !== true) {
                  // this.thenAccount = this.thenAccount + _data.username + '\n'
                  // this.thenAccountNum++

                  // 充值
                  this.$store.dispatch('common/rechargePlayer', _data).then((res) => {
                    const { code, status, message } = res
                    if (code === 200 && status === true) {
                      this.thenAccount = this.thenAccount + _data.username + '\n'
                      this.thenAccountNum++
                    } else {
                      this.catchAccount = this.catchAccount + _data.username + '\n'
                      this.catchAccountNum++

                      Message({
                        type: 'warning',
                        message: 'Player:' + message
                      })
                    }
                  }).catch((error) => {
                    this.catchAccount = this.catchAccount + _data.username + '\n'
                    this.catchAccountNum++

                    Message({
                      type: 'error',
                      message: 'Player:' + error.message
                    })
                  })
                } else {
                  if (code === 10001) {
                    this.catchAccount = this.catchAccount + _data.username + '\n'
                    this.catchAccountNum++
                  } else {
                    this.noExistence = this.noExistence + _data.username + '\n'
                    this.noExistenceNum++
                  }

                  Message({
                    type: 'error',
                    message: '检测:' + message
                  })
                }
              }).catch((error) => {
                this.catchAccount = this.catchAccount + _data.username + '\n'
                this.catchAccountNum++

                Message({
                  type: 'error',
                  message: '检测:' + error.message
                })
                resolve()
              })
            } else {
              // 充值
              this.$store.dispatch('common/rechargePlayer', _data).then((res) => {
                const { code, status, message } = res
                if (code === 200 && status === true) {
                  this.thenAccount = this.thenAccount + _data.username + '\n'
                  this.thenAccountNum++
                } else {
                  this.catchAccount = this.catchAccount + _data.username + '\n'
                  this.catchAccountNum++

                  Message({
                    type: 'warning',
                    message: '充值:' + message
                  })
                }
              }).catch((error) => {
                this.catchAccount = this.catchAccount + _data.username + '\n'
                this.catchAccountNum++

                Message({
                  type: 'error',
                  message: '充值:' + error.message
                })
                resolve()
              })
            }
          }, 1800 * (index + 1), data, onCheck, { index, count })
          // }, (1600 + Math.round(Math.random() * 300)) * (index + 1), data, onCheck)
          // 1500 * (index + 1): +1的原因是，这里是从第二条数据开始处理的，异步处理之前单独处理了一个，所以时间久点。
        })
      }, 1000, data, index, onCheck, count)
    },
    // 渠道账号列表
    getRechargePlatform(val) {
      rechargeChannelPlatformAccount(val).then(response => {
        // console.log('# getRechargePlatform:', response)
        this.rechargeChannelPlatform = response.data.data
        this.dataForm.cid = response.data.data[0]['cid']
      }).catch(res => {
        return Message({
          message: res,
          type: 'error',
          duration: 5 * 1000
        })
      })
    },
    // 游戏列表
    getRechargeGame(pid) {
      this.$store.dispatch('common/rechargeGame', pid).then((res) => {
        this.rechargeGame = res

        // 设置默认游戏
        if (res.find(item => item.id === 54252)) {
          this.dataForm.gfid = 54252
        }
      }).catch((res) => {
        return Message({
          message: res,
          type: 'error',
          duration: 5 * 1000
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .login-container{
    margin: 20px;
    background-color: #FFFFFF;

    .el-bg-border{
      border: 2px dashed #909399;
      padding: 10px;
    }
  }
</style>