qimall/addons/CloudStock/backend/views/components/price-difference-gift-package-list.php

<?php
?>

<style>
    .vue-line-clamp p {
        line-height: 22px;
    }
    .demo-form-inline .el-select .el-input {
        /* width: 100px; */
    }

    /* 订单表格 start */
    .width-pre10 {
        width: 10%;
    }

    .width-50 {
        width: 50px;
    }
    .width-100 {
        min-width: 100px;
    }
    .width-400 {
        width: 350px;
    }

    .order-table {
        overflow-x: scroll;
    }

    .tab-title,
    .tab-cont {
        width: 100%;
        min-width: 1290px;
        font-size: 13px;
    }

    .tab-title {
        padding: 20px 0;
    }

    .tab-title>li {
        padding: 0 10px;
        white-space: nowrap;
    }

    .tab-cont {
        border: 1px solid #F2F2F2;
        margin-bottom: 20px;
    }

    .tab-cont-row {
        padding: 10px 10px;
        background-color: #F7F7F7;
    }

    .tab-cont-info {
        display: flex;
        flex-direction: row;
    }

    .tab-cont-info>li {
        min-height: 120px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }
    /* 订单表格 end */

    /* 补货上级样式 */
    .tab-cont-info .tab-shop-info[style*="flex-direction: column"] {
        height: 100%;
        min-height: 120px;
    }
</style>
<template id="price-difference-gift-package-list">
      <div>
       <el-card shadow="never" body-style="background-color: #f3f3f3;padding:0" v-loading="listLoading">
            <div class="table-body">
                    <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                         <el-form-item > 
                            <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="search_data.keyword" @keyup.enter.native="search" placeholder="请输入用户昵称/id/手机号"></el-input>
                        </el-form-item>
                        <el-form-item > 
                          <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="search_data.order_no" @keyup.enter.native="search" placeholder="请输入订单编号"></el-input>
                        </el-form-item>
                        <el-form-item > 
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="search_data.goods_name" @keyup.enter.native="search" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                        <el-form-item > 
                        <el-date-picker
                                style="margin-right: 20px;"
                                size="small"
                                v-model="selectDate"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                        </el-date-picker>
                        </el-form-item>
                        <el-form-item >  
                        <el-select v-model="search_data.payment_type" placeholder="请选择" style="margin-right: 20px;" size="small">
                            <el-option v-for="(val, key) in payment_type_arr" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select> 
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 订单表格 start -->
                    <div class="order-table">
											<!-- 表格头 -->
                        <ul class="tab-title" flex="dir:left cross:center">
                             <li class="width-400"   style="text-align: center;">订单编号</li>
                            <li class="width-400"   style="text-align: center;">商品名称</li>
                            <li class="width-400"   style="text-align: center;">价格/补货数量</li>
                            <li class="width-400"   style="text-align: center;">实际支付金额(元)</li>
                            <li class="width-400"   style="text-align: center;">补货上级</li>
                            <li class="width-400"   style="text-align: center;">收货人信息</li>
                            <li class="width-400"   style="text-align: center;">随机减金额(元)</li>
                        </ul>
                     <div v-for="(item, index) in list" :key="item.id">
                        <div class="tab-cont" >
                            <div class="tab-cont-row" flex="main:justify cross:center">
                                <div flex="dir:left cross:center">
                                    <div  style="padding-right: 20px;">用户({{item.user.id}})：{{item.user.nickname}}</div>
                                    <div style="padding-right: 20px;">订单创建时间：{{item.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                                </div>

                        </div> 
                        <ul class="tab-cont-info" flex="dir:left cross:center" v-for="(it, i) in  item.fillOrder" :key="i">
                                    <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:center" > 
                                    <div>
                                      {{it.order_no}}
                                    </div>
                                </li>
                                   <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:left" >
                                        <el-image style="width: 50px; height: 50px; border-radius: 5px;margin-right:5px" :src="it.goods.cover_pic"></el-image>
                                        <div>{{it.goods.goods_name}}</div>
                                   </li>
                                   <li class="tab-shop-info width-400 border-bottom  border-right " flex="dir:left" >
                                    <div style="padding:10px">
                                         <div>￥{{it.goods_price}}</div>
                                         <div>总数：{{it.self_pickup_num+it.cloud_warehouse_num}}件</div>
                                         <div>自提：{{it.self_pickup_num}}件</div>
                                         <div>云仓：{{it.cloud_warehouse_num}}件</div>
                                         <p>
                                             <el-tag size="small" type="warning">{{payment_type_list[item.payment_type]}}</el-tag>
                                         </p>
                                    </div>
                                   </li>
                                       <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:left" >
                                    <div  v-show="i == 0">
                                         <div>￥{{item.pay_money}}</div>
                                          <div v-if="item.shipping_money>0">(含运费￥{{item.shipping_money}})</div>
                                    </div>
                                   </li>
                                    <!-- 补货上级 -->
                                    <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:left"  style="flex-direction: column;">
                                    <div   v-for="(user, i) in  it.from_user" :key="i" style="padding:5px">
                                                   <el-image class="default-avatar" :src="user.avatar_url"
                                              style="width: 50px;height: 50px;">
                                        <div slot="error" class="image-slot">
                                            <com-image src="resources/img/mall/default_avatar_url.png"
                                                       style="width: 50px;height: 50px;"></com-image>
                                        </div>
                                    </el-image>
                                      <div>
                                          <div>ID：{{user.id}}</div>
                                          <div>昵称：{{user.nickname}}</div>
                                      </div>
                                    </div>
                                    </li>

                                
                                    <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:left" >
                                      <div style="padding:0 10px" v-if="it.self_pickup_num>0">
                                          <div>{{item.receiver_name}}</div>
                                          <div>{{item.receiver_mobile}}</div>
                                          <div>{{item.address}}</div>
                                      </div>
                                         <div style="padding:0 10px" v-else>
                                       <div>--</div>
                                      </div>
                                    </li>

                                    <li class="tab-shop-info width-400 border-bottom  border-right" flex="dir:left" >
                                      <div  v-show="i == 0">
                                          <div>{{item.rand_fee}}</div>
                                         
                                      </div>
                                    </li>    
                        </ul>
                      </div>
                    </div>
                    </div>
                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                    </div>
                    <!-- 订单表格 end -->
             </div>
        </el-card>
      </div>
</template>
<script>
 Vue.component('price-difference-gift-package-list', {
        template: '#price-difference-gift-package-list',
        props: {
        },
         data() {
            return {
                exportList:{},
               listLoading:false,
               search_data:{
                goods_name:'',
                keyword:'',
                end:'',
                start:'',
                payment_type:'',
                order_no:''
               },
               selectDate:[
          
               ],
               datetime:'',
               list:[],
               marketing_type_map:{},
               isIndeterminate: false,
               changePriceLoading: false,
               page: 1,
               pageCount:1,
               limit:10,
               url:'cloud-stock/order/index',
               payment_type_list:[],
               pickerOptions: {
                    shortcuts: [
                        {
                        text: '今日',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0, 0, 0, 0);
                            end.setHours(23, 59, 59, 999);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                     {
                        text: '本月',
                        onClick(picker) {
                            const today = new Date();
                            const start = new Date(today.getFullYear(), today.getMonth(), 1);
                            const end = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                     {
                        text: '近七天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                     {
                        text: '近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
                },			
                  payment_type_arr: {
                    '0': "请选择",
                    '1': "微信",
                    '2': "支付宝",
                    '3': "银联卡",
                    '5': "余额支付",
                    '7': "汇聚支付",
                    '8': "汇聚快捷支付",
                    '12': "积分支付",
                    '15': "银典支付",
                    '16': "通联支付",
                },
            }
        },
        mounted(){
            
        },
        computed: { 
        },
        methods: {
                 getlist(page) {
                this.list = [];
                this.listLoading = true;
                request({
					params: {
					    r: this.url,
					    page: page,
						limit:this.limit,
						keyword:this.keyword,
                        list_type:'diff_order',
                        ...this.search_data
					},
					method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code === 0) {
                       this.list = e.data.data.list;
					   this.pageCount = e.data.data.page_count;
                       this.page=e.data.data.page
                       this.payment_type_list=e.data.data.payment_type_list
                       this.exportList=e.data.data.export_list
                      this.$emit('change-export-list', {search_data:this.search_data,export_list:e.data.data.export_list});
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
              search(){
                    if(this.selectDate && this.selectDate[0]){
                    this.search_data.start = this.selectDate[0];
                    this.search_data.end = this.selectDate[1];
                }else{
                    this.search_data.start = '';
                    this.search_data.end = '';
                }
                this.getlist()
              },
			        // 获取选择的时间
              changeTime(e){
			        	console.log(e);
                  if (e) {
                          this.search_data.start=e[0]
                        this.search_data.end=e[1]
                  }else{
                    this.search_data.start=''
                        this.search_data.end=''
                  }
			        	
			        },
			        // 获取分页的当前页数
              pagination(currentPage) {
			        	console.log(currentPage);
                        this.getlist(currentPage)
			        	
			        },   
						}
    });
</script>