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>
        </div>
        <div class="headItem">
          <p v-if="amountStatus">课程余额:<span>{{ dataInfo.courseBalance }}</span></p>
          <p v-else>课程余额:<span>
              <el-input style="width: 130px;"
                        v-model="dataInfo.courseBalance"
                        placeholder="课程余额"></el-input>
            </span></p>

          <el-button v-if="amountStatus"
                     @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="searchForm">
      <el-form-item>
        <el-date-picker style="width: 400px;"
                        v-model="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="searchForm.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"
                  v-model="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"
                         width="180px">
        </el-table-column>
        <el-table-column label="交易类型"
                         width="180px">
          <template slot-scope="scope">
            {{ scope.row.type | orderType }}
          </template>
        </el-table-column>
        <el-table-column width="180px"
                         label="应付金额"
                         prop="expectAmount">
        </el-table-column>
        <el-table-column width="180px"
                         label="余额支付"
                         prop="balancePaymentAmount">
        </el-table-column>
        <el-table-column width="180px"
                         label="实际金额"
                         prop="actualAmount">
        </el-table-column>
        <el-table-column label="订单说明"
                         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>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { studentPaymentOrderList, getUserCashAccountBaseInfo, updateCourseBalance } from '@/api/studentManager'
import { orderStatus } from '@/utils/searchArray'
import store from '@/store'
export default {
  components: { pagination },
  data () {
    return {
      organId: null,
      orderDate: null,
      searchForm: {
        studentId: this.$route.query.userId,
        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, // 账户余额状态
    }
  },
  mounted () {
    this.getList()
    this.__init()
  },
  methods: {
    __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
      }
      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)
        }
      })
    },
    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
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.headWrap .left .headItem {
  position: relative;
  /deep/.el-button {
    position: absolute;
    top: -3px;
    right: 20px;
  }
}

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