|
@@ -3,39 +3,150 @@
|
|
|
<div class="headWrap">
|
|
|
<div class="left">
|
|
|
<div class="headItem">
|
|
|
- <p>账户余额:<span>12345</span></p>
|
|
|
+ <p>账户余额:<span>{{ dataInfo.balance }}</span></p>
|
|
|
</div>
|
|
|
<div class="headItem">
|
|
|
- <p>银行卡:<span>12345</span></p>
|
|
|
+ <p>银行卡:<span>{{ dataInfo.cardNo }}</span></p>
|
|
|
</div>
|
|
|
<div class="headItem">
|
|
|
- <p>支付宝:<span>12345</span></p>
|
|
|
+ <p>支付宝:<span>{{ dataInfo.zfb }}</span></p>
|
|
|
</div>
|
|
|
<div class="headItem">
|
|
|
- <p>微信:<span>12345</span></p>
|
|
|
+ <p>微信:<span>{{ dataInfo.wxBalance }}</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 搜索类型 -->
|
|
|
+ <el-form :inline="true"
|
|
|
+ class="searchForm"
|
|
|
+ v-model="searchForm">
|
|
|
+ <el-form-item>
|
|
|
+ <el-date-picker
|
|
|
+ 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="getList" type="danger">搜索</el-button>
|
|
|
+ <el-button @click="onReSet" type="primary">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
<div class="tableWrap">
|
|
|
- <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}">
|
|
|
- <el-table-column label="订单日期"
|
|
|
+ <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 label="订单说明"
|
|
|
- width="180px">
|
|
|
+ <el-table-column width="180px" label="实际金额" prop="actualAmount">
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="实际金额">
|
|
|
+ <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 } from '@/api/studentManager'
|
|
|
+import { orderStatus } from '@/utils/searchArray'
|
|
|
+import store from '@/store'
|
|
|
export default {
|
|
|
-
|
|
|
+ components: { pagination },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ organId: store.getters.organ,
|
|
|
+ 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: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ wxBalance: 0,
|
|
|
+ cardNo: res.data.cardNo,
|
|
|
+ zfb: null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList () {
|
|
|
+ let params = this.searchForm
|
|
|
+ params.rows = this.pageInfo.limit
|
|
|
+ params.page = this.pageInfo.page
|
|
|
+ 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" scope>
|