dy-admin-manager/src/views/studentManager/components/studentOrder.vue

<template>
  <div class='studentOrder'>
    <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>账户余额:<span>{{ dataInfo.balance }}</span></p>
          <el-button type="text" v-permission="'userCashAccount/transferCourseBalanceToBalance'" @click="rechargeVisible=true">充值</el-button>
        </div>
        <div class="headItem">
          <p v-if="amountStatus">课程余额:<span>{{ dataInfo.courseBalance }}</span></p>
          <p v-else>课程余额:<span>
              <el-input style="width: 130px;"
                        v-model.trim="dataInfo.courseBalance"
                        placeholder="课程余额"></el-input>
            </span></p>

          <el-button v-if="amountStatus"
                     v-permission="'userCashAccount/updateCourseBalance'"
                     @click="amountStatus = false"
                     type="text">修改</el-button>
          <el-button style="top:0;"
                     @click="onUpdateCourse"
                     v-else
                     type="text">保存</el-button>
        </div>
        <div class="headItem">
          <p>银行卡:<span>{{ dataInfo.cardNo }}</span></p>
        </div>
        <!-- <div class="headItem">
          <p>支付宝:<span>{{ dataInfo.zfb }}</span></p>
        </div>
        <div class="headItem">
          <p>微信:<span>{{ dataInfo.wxBalance }}</span></p>
        </div> -->
      </div>
    </div>
    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <el-form-item>
        <el-date-picker style="width: 400px;"
                        v-model.trim="orderDate"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        @change="searchCourseDate"
                        range-separator="至"
                        start-placeholder="订单开始日期"
                        end-placeholder="订单结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model.trim="searchForm.paymentType"
                   filterable
                   clearable
                   @clear="onClear('paymentType')"
                   placeholder="交易类型">
          <el-option v-for="(item, index) in orderStatus"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input type="text"
                  @keyup.enter.native='search'
                  v-model.trim="searchForm.remark"
                  placeholder="订单说明"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search"
                   type="danger">搜索</el-button>
        <el-button @click="onReSet"
                   type="primary">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tableWrap">
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column label="订单日期"
                         prop="createTime"
                        align='center'
                         width="150px">
                   <template slot-scope="scope">
            {{ scope.row.createTime | dateForMinFormat }}
          </template>      
        </el-table-column>
        <el-table-column label="交易类型"
         align='center'
                         width="180px">
          <template slot-scope="scope">
            {{ scope.row.type | orderType }}
          </template>
        </el-table-column>
        <el-table-column width="180px"
         align='center'
                         label="应付金额"
                         prop="expectAmount">
        </el-table-column>
        <el-table-column width="180px"
         align='center'
                         label="余额支付"
                         prop="balancePaymentAmount">
        </el-table-column>
        <el-table-column width="180px"
         align='center'
                         label="实际金额"
                         prop="actualAmount">
        </el-table-column>
        <el-table-column width="180px"
         align='center'
                         label="订单状态"
                         prop="status">
                         <template slot-scope="scope">
                           <div >
                              {{scope.row.status | payStatus}}
                           </div>
                         </template>
        </el-table-column>
        <el-table-column label="订单说明"
         align='center'
                         prop="memo">
        </el-table-column>
      </el-table>
      <pagination :total="pageInfo.total"
                  :page.sync="pageInfo.page"
                  :limit.sync="pageInfo.limit"
                  :page-sizes="pageInfo.page_size"
                  @pagination="getList" />
    </div>
    <!-- 充值弹窗 -->
     <el-dialog
      title="课程余额转账户余额"
      width="400px"
      :visible.sync="rechargeVisible"
    >
      <el-form
        :model="rechargeForm"
        ref="rechargeForm"
        label-position="right"
        label-width="80px;"
        :inline="true"
      >
        <el-form-item label="课程余额" >
          ¥{{ dataInfo.courseBalance}}
        </el-form-item>
        <el-form-item label="本次充值" prop="money">
          <el-input type="number"  @mousewheel.native.prevent v-model.trim="rechargeForm.money"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRecharge">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { studentPaymentOrderList, getUserCashAccountBaseInfo, updateCourseBalance,transferCourseBalanceToBalance } from '@/api/studentManager'
import { orderStatus } from '@/utils/searchArray'
import store from '@/store'
export default {
  name: 'studentOrder',
  components: { pagination },
  data () {
    return {
      rechargeVisible:false,
      organId: null,
      orderDate: null,
      searchForm: {
        studentId: null,
        orderStartDate: null,
        orderEndDate: null,
        paymentType: null,
        remark: null
      },
      orderStatus: orderStatus,
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      tableList: [],
      dataInfo: {},
      amountStatus: true, // 账户余额状态
      rechargeForm:{
        money:null
      }
    }
  },
  mounted () {
    this.searchForm.studentId = this.$route.query.userId
    this.getList()
    this.__init()
  },
  activated() {
    this.searchForm.studentId = this.$route.query.userId
    this.getList()
    this.__init()
  },
  methods: {
    onClear (type) {
      if (type == 'paymentType') {
        this.searchForm.paymentType = null
      }
    },
    __init () {
      getUserCashAccountBaseInfo({ userId: this.$route.query.userId }).then(res => {
        if (res.code == 200) {
          this.dataInfo = {
            balance: res.data.balance,
            courseBalance: res.data.courseBalance,
            wxBalance: 0,
            cardNo: res.data.cardNo,
            zfb: null
          }
        }
      })
    },
    onUpdateCourse () {
      if (!this.dataInfo.courseBalance) {
        this.$message.error('请输入课程余额')
        return
      }
      this.$confirm(`确定是否修改该学生课程余额?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateCourseBalance({
          userId: this.searchForm.studentId,
          decimal: this.dataInfo.courseBalance
        }).then(res => {
          let result = res.data
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.amountStatus = true
            this.__init()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.amountStatus = true
      })

    },
    search () {
      this.pageInfo.page = 1;
      this.getList();
    },
    getList () {
      let params = this.searchForm
      params.rows = this.pageInfo.limit
      params.page = this.pageInfo.page
      if (params.remark == '' || !params.remark) {
        params.remark = null
      }
      studentPaymentOrderList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows
          this.pageInfo.total = res.data.total
        }
      })
    },
    searchCourseDate (value) {
      if (value) {
        this.searchForm.orderStartDate = value[0]
        this.searchForm.orderEndDate = value[1]
      } else {
        this.searchForm.orderStartDate = null
        this.searchForm.orderEndDate = null
      }
    },
    onReSet () { // 重置搜索
      this.orderDate = null
      this.searchForm = {
        studentId: this.$route.query.userId,
        orderStartDate: null,
        orderEndDate: null,
        paymentType: null,
        remark: null
      }
    },
    submitRecharge(){
      let money = parseFloat(this.dataInfo.courseBalance-this.rechargeForm.money).toFixed(2);
      // if(this.rechargeForm)
      if(money<0){
        this.$message.error('余额不足')
        return
      }
      if(!this.rechargeForm.money){
         this.$message.error('请输入金额')
        return
      }
      transferCourseBalanceToBalance({userId:this.searchForm.studentId,money:this.rechargeForm.money}).then(res=>{
        if(res.code == 200){
          this.$message.success('充值成功')
          this.rechargeVisible = false;
          this.__init();
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.headWrap .left .headItem {
  position: relative;
  /deep/.el-button {
    position: absolute;
    top: -3px;
    right: 20px;
  }
}

// .studentOrder {
// }
</style>