qimall/addons/Seed/backend/views/index/change-log.php

<style>
  .item-box .label{
	  margin-right:5px;
  }
  .item-box .search-btn{
	  margin-left:5px;
  }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>种子金记录</span>
            </div>
            </template>
        </div>

        <div class="table-body el-input--small">
            <!-- 搜索 -->
            <el-form size="small" :inline="true" flex="dir:left cross:center" style="margin-bottom: 12px;">
                <div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
                    <div class="label">用户ID</div>
                    <el-input style="width: 250px" v-model="search.user_id" placeholder="用户ID"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
                    <div class="label">订单号</div>
                    <el-input style="width: 250px" v-model="search.order_no" placeholder="订单号"></el-input>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <div class="label">时间</div>
                    <el-date-picker
                        v-model="time"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" size="small" class="search-btn" @click="searchs">搜索
                    </el-button>
                </div>
            </el-form>

            <!-- 表格开始 -->
            <el-table v-loading="listLoading" :data="orderList" stripe style="width: 100%">
				<el-table-column prop="order_no"  label="订单号" align="center" width="230px">
                    <template slot-scope="scope">
                        {{ scope.row.seedOrder.order_no }}
                    </template>
                </el-table-column>
				<el-table-column prop="user_id"  label="用户ID" align="center" ></el-table-column>
				<el-table-column prop="scope"  label="用户" align="center" width="230px">
					<template slot-scope="scope" >
					<div style="display:flex;justify-content: space-evenly;">
						<div style="font-size: 13px;" >{{scope.row.user.nickname}}</div>
						<div style="font-size: 13px;" >{{scope.row.user.mobile}}</div>
					</div>   
					</template>
				</el-table-column>
                <el-table-column prop="seed_num"  label="种子金数量" align="center"></el-table-column>
				<el-table-column prop="seed_cost"  label="种子金总价值" align="center"></el-table-column>
				<el-table-column prop="after_unit_price"  label="现单价" align="center"></el-table-column>
				<el-table-column prop="basic_unit_price"  label="初始价值" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.seedOrder.basic_unit_price }}
                    </template>
                </el-table-column>
                <el-table-column prop="scope" width="160" label="变动时间">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
				<el-table-column prop="user_id"  label="当前状态" align="center">
					<template slot-scope="scope">
					    {{orderStatus[scope.row.capital_type]}}
					</template>
				</el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination v-if="pagination" :page-size="pagination.pageSize"
                               style="display: inline-block;float: right;" background @current-change="pageChange"
                               layout="prev, pager, next" :total="pagination.total_count">
                </el-pagination>
            </div>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
			search:{
				seed_order_id:null,
				user_id:null,
				order_no:'',
				start_at:'',
				end_at:''
			},
			page:1,
			limit:20,
			orderList:[],
			listLoading: false,
			pagination:null,
			time:[],
			orderStatus:[]
        },
        mounted() {
		   this.search.user_id = getQuery('user_id');
		   this.search.order_no = getQuery('order_no');
		   if (getQuery('seed_order_id')) this.search.seed_order_id = getQuery('seed_order_id');
           this.getList()
        },
        methods: {
           searchs(){
			  this.page = 1;
			  this.getList(); 
		   },
		   getList() {  //种子金用户记录
		       let self = this;
		       self.listLoading = true;
			   console.log(this.time,'--------------')
			   if(this.time){
				   this.search.start_at = this.time[0];
				   this.search.end_at = this.time[1];
			   }else{
				  this.search.start_at ='';
				  this.search.end_at = ''; 
			   }
		       request({
		           method: 'get',
		           params: {
		               r: '/seed/index/change-log',
		   			page: self.page,
		   			limit:self.limit,
		   			order_no: self.search.order_no,//订单号
                    seed_order_id: self.search.seed_order_id,
		   			user_id: self.search.user_id,
					start_at: self.search.start_at,
					end_at: self.search.end_at,
		           },
		           data: {},
		       }).then(e => {
		           self.listLoading = false;
		           self.orderList = e.data.data.list.list;
				   self.orderStatus = e.data.data.seed_status_arr
		           self.pagination = e.data.data.list.pagination;
		           self.pagination.pageSize = e.data.data.list.page_size;
		           self.pagination.total_count = e.data.data.list.count;
		       }).catch(e => {
		           console.log(e);
		       });
		   },
		   pageChange(currentPage) {
		       let self = this;
		       self.page = currentPage;
		       self.getList();
		   },
        }
    });
</script>