qimall/addons/Happiness/client/views/voucher-order/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>提货管理</span>
        </div>
        <div class="table-body">
            <div>
                <el-form :inline="true" :model="search_data" size="small" class="demo-form-inline">
                    <div class="flex">
                        <el-form-item label="">
                            <el-select v-model="search_data.status" placeholder="请选择状态" size="small">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="待审核" value="0"></el-option>
                                <el-option label="已审核" value="1"></el-option>
                                <el-option label="部分发货" value="2"></el-option>
                                <el-option label="待确认" value="3"></el-option>
                                <el-option label="已收货" value="4"></el-option>
                                <el-option label="已拒绝" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提货时间">
                            <el-date-picker v-model="dates" size="small" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="selectedDates"> </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                            <el-button type="danger" @click="clearSearch" v-if="show_clear_search_btn">清除条件</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <el-table :data="list" stripe v-loading="listLoading" size="small" style="margin-bottom: 15px; width: 100%">
                <el-table-column label="提货时间" width="200" prop="money">
                    <template slot-scope="scope">
                        <div v-if="scope.row.created_at>0">{{scope.row.created_at | dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="order_no" label="提货批次" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_no}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="收货人信息" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>收货人姓名: {{scope.row.user_name}}</div>
                        <div>手机号: {{scope.row.mobile}}</div>
                        <div>地址: {{scope.row.address}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="配送方式" align="center">
                        <div>物流配送</div>
                </el-table-column>

                <el-table-column label="状态" width="200" prop="money">
                    <template slot-scope="scope">
                        <div>{{scope.row.order_status_text}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" style="width: 180px;" fixed="right" align="center">
                    <template slot-scope="scope">
                        <template>
                            <el-button v-if="scope.row.order_status==2 || scope.row.order_status==3" type="text"
                                       size="small" @click="confirm(scope
                            .row)">确认收货</el-button>
                            <el-button type="text" size="small" @click="express
                            (scope.row)">发货详情</el-button>
                            <el-button v-if="scope.row.order_status>=1" type="text" size="small" @click="showGoods(scope.row)">查看商品</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
        <el-dialog title="发货详情" :visible.sync="dialogExpressVisible" width="1200px">
            <div v-for="(item,index) in express_list">
                <div style="margin-left: 10px"><span style="margin-right: 50px">物流单号:{{item
                        .express_no}}</span><span>物流公司:{{item
                    .express_company}}</span></div>
                <el-table :data="item.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                    <el-table-column label="商品图片" width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.cover_pic">
                                <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="200">
                        <template slot-scope="scope">
                            <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.buy_num}}件</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="生产日期">
                        <template slot-scope="scope">
                            <div>{{scope.row.create_date | dateTimeFormat("Y-m-d")}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="保质期">
                        <template slot-scope="scope">
                            <div>{{scope.row.save_day}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="过期时间" >
                        <template slot-scope="scope">
                            <div>{{scope.row.expire_date | dateTimeFormat("Y-m-d")}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货数量">
                        <template slot-scope="scope">
                            <div>{{scope.row.num}}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 20px;text-align: center">
                <el-button size="mini" @click="dialogExpressVisible=false">取消</el-button>
            </div>

        </el-dialog>
        <el-dialog title="查看商品" :visible.sync="dialogGoodsVisible" width="1200px">
            <el-table :data="detail.goods" stripe size="small" style="margin-bottom: 15px; width: 100%">
                <el-table-column label="商品图片" width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cover_pic">
                            <img :src="scope.row.cover_pic" style="width: 50px;heightheight: 50px;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="200">
                    <template slot-scope="scope">
                        <div>{{scope.row.goods_name}}{{scope.row.goods_attr_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="提货数量">
                    <template slot-scope="scope">
                        <div>{{scope.row.num}}件</div>
                    </template>
                </el-table-column>
                <el-table-column label="剩余待发数量">
                    <template slot-scope="scope">
                        <div>{{scope.row.leave_num}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;text-align: center">
                <el-button size="mini" @click="dialogGoodsVisible=false">取消</el-button>
            </div>

        </el-dialog>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                search_data: {
                    status: '',
                    start_time:'',
                    end_time:''
                },
                btnLoading:false,
                list: [],
                dates: null,
                page: 1,
                pageCount: 0,
                listLoading: false,

                detail:[],
                dialogExpressVisible:false,
                dialogGoodsVisible:false,
                express_list:[],
            };
        },
        mounted: function() {
            this.getList();
        },
        computed: {
            show_clear_search_btn: function() {
                return  !isEmpty(this.search_data.start_time) || !isEmpty(this.search_data
                    .end_time)||!isEmpty(this.search_data
                    .status);
            }
        },
        methods: {
            showGoods(row)
            {
                this.getDetail(row.id,'goods');
                this.dialogGoodsVisible=true;
            },
            confirm(row)
            {
                //确认
                this.$confirm('确定要确认收货吗？', '提示').then(e => {
                    this.btnLoading=true;
                    this.$request({
                        params: {
                            r: 'happiness/client/voucher-order/confirm'
                        },
                        data:{id:row.id},
                        method: 'post',
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.getList();
                            this.btnLoading=false;
                        } else {
                            this.$message.error(e.data.msg);
                            this.btnLoading=false;
                        }
                    }).catch(e => {
                    });
                });

            },
            // 选中时间
            selectedDates(e) {
                if (e) {
                    this.search_data.start_time = e[0];
                    this.search_data.end_time = e[1];
                } else {
                    this.search_data.start_time = '';
                    this.search_data.end_time = '';
                    this.dates = null;
                }
            },
            getDetail(id,type)
            {
                let self = this;
                request({
                    params: {
                        r: 'happiness/store-voucher-order/detail',
                        id: id,
                    },
                    method: 'get',
                }).then(e => {
                    if(e.data.code === 0)
                    {
                        self.detail=e.data.data;
                    }
                    else
                    {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            express(row)
            {
                this.dialogExpressVisible=true;
                let self = this;
                let basic_params = {
                    r: 'happiness/client/voucher-order/express',
                    id:row.id
                };
                request({
                    params: basic_params,
                    method: 'get',
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.express_list = e.data.data;
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });

            },
            getList(id) {
                let self = this;
                let basic_params = {
                    r: 'happiness/client/voucher-order/index',
                    page: self.page,
                };
                params = Object.assign(basic_params, this.search_data);
                if (self.listLoading === false) {
                    self.listLoading = true;
                    request({
                        params: params,
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.list = e.data.data.list;
                            self.pageCount = e.data.data.page_count;

                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {

                    });
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            clearSearch() {
                this.search_data.start_time = null;
                this.search_data.end_time = null;
                this.dates = null;
                this.search_data.status = '';
                this.getList();
            }
        }
    })
</script>

<style>
    .flex {
        display: flex;
        align-items: center;
    }
    .stat_details{
        padding: 0 0 20px;
        display: flex;
    }
    .stat_details .order_module{
        flex: 1;
        background: #F2F2F2;
        margin: 0 5px;
        padding: 20px 25px;
    }

    .order_module{
        display: flex;
        flex-direction: column;
    }

    .order_module:last-child{
        margin-right: 0;
    }

    .order_module:first-child{
        margin-left: 0;
    }

    .price{
        font-size: 14px;
        flex: 1;
        word-break: break-all;
    }

    .oirder_modul_title{
        font-size: 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    ..el-input__inner{
        border-right: 1px solid #EBEEF5;
    }

    .oirder_modul_title .text{
        margin-right: 10px;
    }
    .stat_icon{
        font-size: 19px;
        color: #BFBFBF;
    }
</style>