index.vue

<template>
  <div class="putForward">
    <el-form :model="search" class="demo-form-inline" inline label-width="80px">
          <el-form-item label="提现单号">
            <el-input v-model="search.withdraw_no" placeholder="提现单号"></el-input>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="search.out_trade_no" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="search.user_id" placeholder="用户ID"></el-input>
          </el-form-item>
          <el-form-item label="提现金额">
            <el-input v-model="search.money" placeholder="提现金额"></el-input>
          </el-form-item>
          <el-form-item label="提现时间">
          <el-date-picker
            type="daterange"
            v-model="search.payTime"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
            :picker-options="{shortcuts:[today,yesterday,last7Day,last30Day]}"
            >
          </el-date-picker>
        </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="primary" @click="exportTable" v-if="$store.state.export">导出</el-button>
            <el-button type="primary" v-if="!$store.state.readonly" @click="manualPutForward">手动提现</el-button>
          </el-form-item>
    </el-form>
    <el-tabs v-model="search.status" type="card" style="background: white;padding-top: 10px" @tab-click="onSearch">
      <el-tab-pane label="提现成功" name="1"/>
      <el-tab-pane label="申请中" name="0"/>
      <el-tab-pane label="申请失败" name="2"/>
      <el-tab-pane label="全部" name="-1"/>
    </el-tabs>
    <el-table
      :data="tableData"
      border fixed
      style="width: 100%">
      <el-table-column
        prop="withdraw_no"
        label="提现单号"
      >
      </el-table-column>
      <el-table-column
        prop="out_trade_no"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        label="用户"
        width="200"
        className="f-c"
      >
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column
        prop="user_mobile"
        label="手机号"
      >
      </el-table-column>
      <el-table-column
        label="提现金额"
      >
        <template slot-scope="scope">
          {{ scope.row.money | moneyYuan}}
        </template>
      </el-table-column>
      <el-table-column
        label="提现状态"
      >
        <template slot-scope="scope">
                    <span :class="{status:true,red:scope.row.status === 2,green:scope.row.status === 1}">
                    {{ scope.row.status | filterStatus}}
                    </span>
        </template>
      </el-table-column>
      <el-table-column
        label="提现成功时间"
      >
        <template slot-scope="scope">
          {{ scope.row.success_at }}
        </template>
      </el-table-column>
      <el-table-column
        label="提现时间"
      >
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column
        prop="reason"
        label="失败原因"
      >
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注"
      >
      </el-table-column>
      <el-table-column
        label="操作" fixed="right"
        v-if="!$store.state.readonly"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 0"
            @click="checkMoney(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            审核
          </el-button>
          <el-button
            @click="addDesc(scope.row.id, scope.row.desc)"
            type="text"
            size="small">
            添加备注
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog :title="dialogTitle" v-if="showDialog" :visible.sync="showDialog">
      <el-form ref="saveuser" :model="nowObj" label-width="70px">
        <el-form-item label="订单状态" v-if="!showDesc">
          <template>
            <el-radio-group v-model="nowObj.status">
              <el-radio :label="1">提现成功</el-radio>
              <el-radio :label="2">提现失败</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="失败理由" v-if="nowObj.status === 2 &&  !showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.reason" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" v-if="showDesc">
          <el-input type="textarea" rows="3" v-model="nowObj.desc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSave(showDesc)">保 存</el-button>
        <el-button @click="showDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="手动提现" v-if="putForwardDialog.show" :visible.sync="putForwardDialog.show">
      <el-form :model="putForwardDialog" :rules="rules" ref="refPutForward" label-width="80px">
        <el-row>
          <el-col :span="20">
            <el-form-item label="用户" prop="userLabel">
              <el-input readonly v-model="putForwardDialog.userLabel" placeholder="请选择用户"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button style="float: right" type="primary" @click="userDialog.show = true">选择用户</el-button>
          </el-col>
        </el-row>

        <el-form-item label="提现金额" prop="money">
          <el-input-number :min="0" v-model="putForwardDialog.money" placeholder="提现金额"></el-input-number>
        </el-form-item>
        <el-form-item label="提现说明" prop="desc">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="putForwardDialog.desc">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putForwardDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="confirmPutForward">确 定</el-button>
      </span>
      <el-dialog :modal="false" :visible.sync="userDialog.show">
        <el-form label-width="90px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="ID">
                <el-input v-model="searchFrom.userId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="昵称">
                <el-input v-model="searchFrom.nickName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="searchFrom.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item>
                <el-button style="float: right" type="primary" plain @click="getUserList">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="userList"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
        </el-table>
        <page :total="userDialog.total" :limit="userDialog.limit" @pageChange="onUserPageChange" @sizeChange="onUserSizeChange"/>
        <span slot="footer" class="dialog-footer">
        <el-button @click="userDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {getWithdrawListApi,editOrderDescApi,withdrawApi,exportExcelApi,getUserListApi,payToUserApi} from "../../service/api";
  import page from '../framework/page'
  export default {
    name: "putForward",
    data(){
      return {
        today:{
        text:'今天',
        onClick:(vm)=>{
          vm.$emit('pick', [this.formatTime(new Date())+' 00:00:00',this.formatTime(new Date())+' 23:59:59'])
        }
      },
      yesterday:{
        text:'昨天',
        onClick:(vm)=>{
          let preDate = this.formatTime(new Date(new Date().getTime() - 24*60*60*1000));
          vm.$emit('pick', [preDate+' 00:00:00',preDate+' 23:59:59'])
        }
      },
      last30Day:{
        text:'过去30天',

        onClick:(vm)=>{
          let preDate = this.formatTime(new Date(new Date().getTime() - 30*24*60*60*1000));
          vm.$emit('pick', [preDate+' 00:00:00',this.formatTime(new Date())+' 23:59:59']);
        }
      },
      last7Day:{
        text:'过去7天',
        onClick:(vm)=>{
          let preDate = this.formatTime(new Date(new Date().getTime() - 7*24*60*60*1000));
          vm.$emit('pick', [preDate+' 00:00:00',this.formatTime(new Date())+' 23:59:59']);
        }
      },
        nowPage: 1,
        total: 0,
        limit: 10,
        search:{
          key:'',
          status:'1',
          payTime:[]
        },
        liStatus:[
          {
            label: '全部',
            status: ''
          },
          {
            label: '申请中',
            status: 0
          },{
            label: '提现成功',
            status: 1
          },{
            label: '提现失败',
            status: 2
          }
        ],
        tableData:[],
        showDialog:false,
        showDesc:false,
        dialogTitle:'审核',
        nowObj:{
          id:'',
          status:1,
          reason:'',
          desc:""
        },
        page:{
          current:1,
          pageSize:100,
          total:0
        },
        putForwardDialog: {
          show: false,
          user_id: '',
          userLabel: '',
          money: 0,
          desc: ''
        },
        userList: [],
        rules:{
          userLabel:[
            { required: true, message: '请选择用户', trigger: 'change' }
          ],
          money:[
            { required: true, message: '请输入提现金额', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入提现说明', trigger: 'change' }
          ]
        },
        searchFrom:{},
        selectUserList:[],
        userDialog: {
          show: false,
          nowPage: 1,
          total: 0,
          limit: 5
        }
      }
    },
    components:{
      page
    },
    filters:{
      moneyYuan:function (value) {
        if(!value){
            return 0 + '元';
        }
        return value = (value/100).toFixed(2) + '元';
      },
      filterStatus:function (value) {
        let msg = '';
        if(value === 0){
          msg = '审核中'
        }else if(value === 1){
          msg = '提现成功'
        }else if(value === 2){
          msg = '提现失败'
        }
        return msg;
      },
      userLabel: function (val) {
        return `${val.nickname}[${val.user_id}]`
      }
    },
    mounted:function(){
      this.getList()
    },
    methods:{
      formatTime(date){
      let year = date.getFullYear();
      let Month = date.getMonth()+1;
      if(Month < 10){
        Month = `0${Month}`
      }
      let Day = date.getDate();
      if(Day<10)Day = `0${Day}`;
      return `${year}-${Month}-${Day}`;
    },
      onSizeChange(val){
        this.nowPage = 1;
        this.limit = val;
        this.getList()
      },
      exportTable(){
        let json = {};
        if(this.search.withdraw_no){
          json.withdraw_no = this.search.withdraw_no
        }
        if(this.search.out_trade_no){
          json.out_trade_no = this.search.out_trade_no
        }
        if(this.search.status || this.search.status === 0){
          json.status = this.search.status
        }
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if(this.search.money){
          json.money = parseFloat(this.search.money) * 100
        }
        exportExcelApi('/api/admin/withdraw/export',json)
      },
      //获取列表
      getList:function () {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.search.withdraw_no){
          json.withdraw_no = this.search.withdraw_no
        }
        if(this.search.out_trade_no){
          json.out_trade_no = this.search.out_trade_no
        }
        if(this.search.status && this.search.status !== '-1'){
          json.status = this.search.status
        }
        if(this.search.user_id){
          json.user_id = this.search.user_id
        }
        if (this.search.payTime && this.search.payTime.length > 0) {
            json.success_start_at = this.search.payTime[0]
            json.success_end_at = this.search.payTime[1]
          }
        // if(this.search.success_start_at){
        //   json.success_start_at = this.search.success_start_at
        // }
        // if(this.search.success_end_at){
        //   json.success_end_at = this.search.success_end_at
        // }
        if(this.search.money){
          json.money = parseFloat(this.search.money) * 100
        }
        getWithdrawListApi(json).then(res=>{
          this.tableData = res.list;
          this.total = res.total;
        })
      },
      // 查询按钮
      onSearch(){
        this.nowPage = 1;
        //调用查询接口
        this.getList();
      },
      //点击审核
      checkMoney(id){
        this.nowObj.id = id;
        this.showDesc = false;
        this.showDialog=true;

      },
      //点击备注
      addDesc(id,desc){
        this.nowObj.id = id;
        this.nowObj.desc = desc;
        this.showDesc = true;
        this.showDialog=true;
      },
      //分页切换
      onPageChange(current){
        this.nowPage = current;
        this.page.current=current;
        this.getList();
      },
      // 弹框请求回调
      doCallback:function(){
        this.nowObj.id = '';
        this.nowObj.status = 1;
        this.nowObj.reason = '';
        this.nowObj.desc = '';
        this.page.current = 1;
        this.showDialog = false;
        this.getList();
        this.$message({
          message: '提交成功',
          type: 'success'
        });
      },
      // 弹框保存按钮
      onSave:function ( desc ) {
        // 添加备注
        if(desc){
          let data = {
            desc:this.nowObj.desc,
          };
          if(data.desc === '' || data.desc == null){
            this.$message.error( '请填写备注' );
            return false
          }
          editOrderDescApi(this.nowObj.id,'withdraw',data).then(res=>{
            this.doCallback()
          });
          // 审核
        }else{
          let data = {
            reason:this.nowObj.reason,
            status:this.nowObj.status,
          };
          if((data.reason === '' || data.reason == null) && data.status === 2){
            this.$message.error( '请填写失败理由' );
            return false
          }else {
            data.reason = '';
          }
          withdrawApi(this.nowObj.id, data ).then(res=>{
            this.doCallback()
          })
        }
      },
      manualPutForward() {
        this.putForwardDialog.show = true;
        this.putForwardDialog.user_id = '';
        this.putForwardDialog.userLabel = '';
        this.putForwardDialog.money = 0;
        this.putForwardDialog.desc = '';
        this.getUserList();
      },
      getUserList(){
        let json = {
          limit: this.userDialog.limit,
          page: this.userDialog.nowPage
        }
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.userDialog.total = res.total;
        })
      },
      confirmPutForward(){
        let json = {
          user_id: this.putForwardDialog.user_id,
          money: this.putForwardDialog.money,
          desc: this.putForwardDialog.desc
        }
        this.$refs["refPutForward"].validate((valid) => {
          if (valid) {
            this.$confirm('确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
              payToUserApi(json).then(res=>{
                this.$message({
                  type: 'success',
                  message: '保存成功'
                });
                this.getList();
                this.putForwardDialog.show = false;
              });
            });
          } else {
            return false;
          }
        });
      },
      handleSelectionChange(a){
        this.selectUserList = a
      },
      onUserPageChange(val){
        this.userDialog.nowPage = val
        this.getUserList()
      },
      onUserSizeChange(val){
        this.userDialog.limit = val
        this.userDialog.nowPage = 1;
        this.getUserList()
      },
      onAdd(){
        if(this.selectUserList.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择用户!'
          });
          return
        } else if (this.selectUserList.length !== 1){
          this.$message({
            type: 'error',
            message: '只能选择一个用户!'
          });
          return
        }
        this.putForwardDialog.userLabel = `${this.selectUserList[0].nickname}[${this.selectUserList[0].user_id}]`
        this.putForwardDialog.user_id = this.selectUserList[0].user_id
        this.userDialog.show = false
      },
    }
  }
</script>

<style scoped>
  .putForward {
    padding: 20px 0;
  }
  .status{
    color: #e9a038;
  }
  .status.red{
    color: #c30005;
  }
  .status.green{
    color: #00ac00;
  }
  .avatar{
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
    height: 50px;
  }
</style>
<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>