qimall/addons/Store/client/views/credit/index.php

<style>
  .item-box .label{
	  margin-right:5px;
	  width:100px;
  }
  .item-box{
	  width:30%;
	  margin-top:10px;
  }
  .el-form{
	  display:flex;
	  flex-wrap:wrap;
  }
  .item-box .search-btn{
	  margin-left:5px;
  }
  .goods-images{
	  width:50px;
	  height:50px;
	  border-radius:10px;
  }
  .credit-info{
	  margin:8px 0;
	  display: flex;
	  /*justify-content: space-around;*/
  }
  .credit-info .goods_name{
  	  margin-left:5px;
  }
  .uer-nickname{
      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"  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: 250px" v-model="search.order_no" 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: 250px" v-model="search.goods_name" placeholder="商品名称"></el-input>
				</div>
				<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.mobile" placeholder="赊账人手机号"></el-input>
				</div>
				<!--<div class="item-box" flex="dir:left cross:center" style="margin-right: 20px">
				    <div class="label">还款状态</div>
				    <el-select size="small" v-model="edit.level" class="select">
				        <el-option  label="未还款" value="0" ></el-option>
						<el-option  label="已还款" value="1" ></el-option>
				    </el-select>
				</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" class="search-btn" style="padding: 12px 34px !important;" @click="searchs">搜索
                    </el-button>
                </div>
            </el-form>
            <el-table v-loading="listLoading" :data="creditList" stripe style="width: 100%">
				<el-table-column prop="order_no"  label="商品信息" align="center" width="230px">
					<template slot-scope="scope">
					   <div class="credit-info" flex="cross:center" v-for="(item,index ) in scope.row.detail">
					       <el-image class="goods-images" :src="item.pic_url" ></el-image>
					       <div class="uer-nickname over1" >{{item.goods_name}}</div>
					   </div>
					</template>
				</el-table-column>
				<el-table-column prop="order_no"  label="订单编号" align="center" width="230px"></el-table-column>
                <el-table-column prop="pay_money"  label="订单金额" align="center">
					<template slot-scope="scope">
					    <div>￥{{scope.row.pay_money}}</div>
					</template>
				</el-table-column>
				<el-table-column   label="赊账人信息" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.nickname}}</span>
						<span>  ID:{{scope.row.user_id}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="mobile"  label="赊账人手机号" align="center"></el-table-column>
				<el-table-column label="赊账金额" align="center">
					<template slot-scope="scope">
						<span>￥{{scope.row.credit_money}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="is_repayment_text"  label="还款状态" align="center"></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>

            <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:'',
				goods_name:'',
				order_no:'',
				mobile:'',
				start:'',
				end:''
			},
			page:1,
			limit:20,
			creditList:[],
			listLoading: false,
			pagination:null,
			time:[]
        },
        mounted() {
			this.search.user_id = getQuery('user_id');
           this.getList() 
        },
        methods: {
           searchs(){
			  this.page = 1;
			  this.getList(); 
		   },
		   toOrderDetail(order_no){
			   this.$navigate({
			       r: 'seed/index/change-log',
			       order_no: order_no
			   })	
		   },
		   getList() {  
		       let self = this;
		       self.listLoading = true;
			   if(this.time){
				   this.search.start = this.time[0];
				   this.search.end = this.time[1];
			   }else{
				  this.search.start ='';
				  this.search.end = ''; 
			   }
		       request({
		           method: 'get',
		           params: {
		               r: '/store/client/credit/index',
		   			page: self.page,
		   			limit:self.limit,
		   			order_no: self.search.order_no,//订单号
		   			user_id: self.search.user_id,
					start: self.search.start,
					end: self.search.end,
					goods_name:self.search.goods_name,
					mobile:self.search.mobile
		           },
		           data: {},
		       }).then(e => {
		           self.listLoading = false;
		           self.creditList = 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;
		       }).catch(e => {
		           console.log(e);
		       });
		   },
		   pageChange(currentPage) {
		       let self = this;
		       self.page = currentPage;
		       self.getList();
		   },
        }
    });
</script>