qimall/addons/Seed/backend/views/index/user.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-export-dialog');
?>
<style>
  .item-box .label{
	  margin-right:5px;
  }
  .item-box .search-btn{
	  margin-left:10px;
  }
</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">用户编号</div>
                    <el-input style="width: 80px" v-model="search.user_id" placeholder="订单号"></el-input>
                </div>
				<div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
				    <div class="label">用户手机号</div>
				    <el-input style="width: 80px" v-model="search.user_id" placeholder="订单号"></el-input>
				</div>
                <div class="item-box" flex="dir:left cross:center">
                    <el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="searchs">搜索
                    </el-button>
					<el-button type="primary" class="search-btn" style="padding: 12px 34px !important;" @click="searchs">导出
					</el-button>
                </div>
            </el-form> -->
			
			<el-form :model="search"  ref="searchForm" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="用户编号" prop="user_id">
						   <el-input v-model="search.user_id" placeholder="用户ID"></el-input>
						 </el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="用户手机号" prop="mobile">
						   <el-input v-model="search.mobile" placeholder="用户手机号"></el-input>
						 </el-form-item>
					</el-col>
					<el-col :span="5">
						<div class="item-box" flex="dir:left cross:center">
						    <el-button type="primary" size="small" class="search-btn" @click="searchs">搜索</el-button>
                            <com-export-dialog style="margin-left: 10px;" :field_list='export_list' :action_url="export_url" :params="search">
                            </com-export-dialog>
						</div>
					</el-col>
				</el-row>
			     
				  
			</el-form>
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<el-table-column prop="user_id"  label="用户ID" align="center"></el-table-column>
                <el-table-column prop="scope"  label="用户" 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="total_seed_num"  label="种子金数量" align="center"></el-table-column>
				<el-table-column prop="total_seed_cost"  label="种子金总价值" align="center"></el-table-column>
                <el-table-column
                    label="操作"
                    min-width="180"
                    align="center">
                    <template slot-scope="scope">
                        <el-button circle size="mini" type="text" @click="toOrder(scope.row.user_id)">
                            数据详情
                        </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:'',
				mobile:'',
			},
			page:1,
			limit:20,
			list:[],
			listLoading: false,
			pagination:null,
            export_url: 'seed/index/user',
            export_list: {},
        },
        mounted() {
           this.getList(); 
        },
        methods: {
			getList() {  //种子金用户记录
			    let self = this;
			    self.listLoading = true;
			    request({
			        method: 'get',
			        params: {
			            r: 'seed/index/user',
						page: self.page,
						limit:self.limit,
						user_id: self.search.user_id,
						mobile: self.search.mobile,
			        },
			        data: {},
			    }).then(e => {
			        self.listLoading = false;
			        self.list = e.data.data.list;
			        self.pagination = e.data.data.pagination;
			        self.pagination.pageSize = e.data.data.page_size;
			        self.pagination.total_count = e.data.data.count;
                    self.export_list = e.data.data.export_list;
			    }).catch(e => {
			        console.log(e);
			    });
			},
			toOrder(user_id){
				//this.$router.replace({name:'/seed/index/user',query:{user_id:user_id}})
				this.$navigate({
				    r: 'seed/index/order',
				    user_id: user_id
				})
			},
			pageChange(currentPage) {
			    let self = this;
			    self.page = currentPage;
			    self.getList();
			},
           searchs(){
			   this.page = 1;
			   this.getList();
		   }
        }
    });
</script>