qimall/addons/Seed/backend/views/index/order.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: 150px" 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="user_id"  label="用户ID" width="100" align="center"></el-table-column>
                <el-table-column prop="scope" label="用户" width="180" align="center">
                    <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="order_no"  label="身份" align="center">
                    <template slot-scope="scope">
                        {{ identity_arr[scope.row.identity] }}
                    </template>
                </el-table-column>
				<el-table-column prop="order_no"  label="订单号" align="center" width="230px"></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="unit_price"  label="现单价" align="center"></el-table-column>
				<el-table-column prop="basic_unit_price"  label="初始价值" align="center"></el-table-column>

                <el-table-column prop="scope" width="150" label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>

				<el-table-column label="当前状态" align="center">
                    <template slot-scope="scope">
                        {{orderStatus[scope.row.seed_status]}}
                    </template>
				</el-table-column>

                <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button circle size="mini" type="text" @click="toOrderDetail(scope.row)">
                            详情
                        </el-button>
                    </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:{
				user_id:null,
				order_no:null,
				start_at:null,
				end_at:null
			},
			page:1,
			limit:20,
			orderList:[],
			listLoading: false,
			pagination:null,
			time:[],
            orderStatus: {},
            identity_arr: {
			    1: '消费者',
			    2: '店长',
            },
        },
        mounted() {
			this.search.user_id = getQuery('user_id');
           this.getList() 
        },
        methods: {
           searchs(){
			  this.page = 1;
			  this.getList(); 
		   },
		   toOrderDetail(data){
			   this.$navigate({
			       r: 'seed/index/change-log',
                   seed_order_id: data.id,
			       user_id: data.user_id,
			       order_no: data.order_no
			   })
		   },
		   getList() {  //种子金用户记录
		       let self = this;
		       self.listLoading = true;
			   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/order',
		   			page: self.page,
		   			limit:self.limit,
		   			order_no: self.search.order_no,//订单号
		   			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.pagination = e.data.data.list.pagination;
		           self.pagination.pageSize = e.data.data.list.page_size;
		           self.pagination.total_count = e.data.data.list.count;
		           self.orderStatus = e.data.data.seed_status_arr
		       }).catch(e => {
		           console.log(e);
		       });
		   },
		   pageChange(currentPage) {
		       let self = this;
		       self.page = currentPage;
		       self.getList();
		   },
        }
    });
</script>