qimall/addons/CloudStockTwo/backend/views/order/index.php

<?php
/**
 * @link:http://www.goodmall.com/
 * @copyright: Copyright (c) 2020
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-08
 * Time: 16:11
 */
//Yii::$app->loadPluginComponentView('stock-goods-edit');
?>

<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;" style="min-width: 1600px;">
        <div slot="header">
            <div>
                <span>订单列表</span>
            </div>
        </div>
        <div class="table-body">



            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                
                <el-tab-pane label="代理商补货列表" name="second">

                    <div class="head" style="display: flex;margin-bottom: 20px;">
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="search2.keyword" @keyup.enter.native="searchFun2" placeholder="请输入会员昵称/id"></el-input>
                        <el-input clearable style="width: 130px;margin-right: 20px;" size="small" type="text" v-model="search2.id" @keyup.enter.native="searchFun2" placeholder="请输入订单id"></el-input>
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" v-model="search2.goods_name" @keyup.enter.native="searchFun2" placeholder="请输入商品名称"></el-input>
                        <el-date-picker
                            style="margin-right: 20px;"
                            size="small"
                            v-model="search2.selectDate"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>

                        <el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click="searchFun2">搜索</el-button>
                    </div>

                    <el-table
                        size="small"
                        :data="list"
                        style="width: 100%"
                        v-loading="listLoading">
                        <el-table-column
                            prop="id"
                            label="订单id"
                            align="center"
                            min-width="70"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="order_no"
                            label="订单编号"
                            align="center"
                            min-width="120"
                        >
                        </el-table-column>
                        <el-table-column label="代理商用户昵称" width="200">
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.user.nickname}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="user_id"
                            label="代理商用户id"
                            align="center"
                            min-width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="商品名称"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <div style="margin-right:10px;" ><img :src="scope.row.goods.cover_pic" style="width: 40px;height: 40px;display: block;" /></div>
                                    <div>
                                        <div style="text-align: left;line-height: 16px;">{{scope.row.goods.goods_name}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        </el-table-column>
                        <el-table-column
                            prop="num"
                            label="补货数量"
                            align="center"
                            min-width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="created_at"
                            label="订单创建时间"
                            align="center"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                {{formatTime(scope.row.created_at)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="pay_money"
                            label="实际支付金额(元)"
                            align="center"
                            min-width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="pay_money"
                            label="是否支付"
                            align="center"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.is_pay == 1" type="success">已支付</el-tag>
                                <el-tag v-if="scope.row.is_pay == 0" type="danger">未支付</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                          label="操作"
                          min-width="150">
                          <template slot-scope="scope">
                              <el-button type="primary" size="mini" @click="goCloudStockOrder(scope.row.id,scope.row.user_id)">查看详情</el-button>
                          </template>
                        </el-table-column>
                    </el-table>
                    <!-- 代理库存页面 end -->

                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination
                            @current-change="pagination1"
                            background
                            layout="prev, pager, next"
                            :page-count="pageCount1">
                        </el-pagination>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="会员买货订单列表" name="first">

                    <div class="head" style="display: flex;">
                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.keyword" placeholder="请输入会员昵称/id"></el-input>

                        <el-input clearable style="width: 125px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.id" placeholder="请输入订单id"></el-input>

                        <el-input clearable style="width: 200px;margin-right: 20px;" size="small" type="text" @keyup.enter.native="searchFun1" v-model="search1.goods_name"  placeholder="请输入商品名称"></el-input>

                        <el-date-picker
                            style="margin-right: 20px;"
                            size="small"
                            v-model="search1.selectDate"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>

                        <el-button type="primary" icon="el-icon-search" style="padding: 0 10px !important;" @click="searchFun1">搜索</el-button>
                    </div>

                    <el-table
                        size="small"
                        :data="list"
                        stripe
                        style="width: 100%"
                        v-loading="listLoading">
                        <el-table-column
                            prop="order_id"
                            label="订单id"
                            align="center"
                            min-width="70"
                        >
                        </el-table-column>
                        <el-table-column label="代理商用户昵称" width="200">
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.user.nickname}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="user_id"
                            label="买家用户id"
                            align="center"
                            min-width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="商品名称"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <div style="margin-right:10px;" ><img :src="scope.row.goods.cover_pic" style="width: 40px;height: 40px;display: block;" /></div>
                                    <div>
                                        <div style="text-align: left;line-height: 16px;">{{scope.row.goods.goods_name}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        </el-table-column>
                        <el-table-column
                            prop="num"
                            label="购买商品数量"
                            align="center"
                            min-width="120"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="created_at"
                            label="订单创建时间"
                            align="center"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                {{formatTime(scope.row.created_at)}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="order_no"
                            label="订单编号"
                            align="center"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" content="点击查看订单详情" placement="top">
                                    <el-button @click="goOrder(scope.row.order.id)" size="mini" type="primary" effect="dark">{{scope.row.order.order_no}}</el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>

<!--                        <el-button size="small" type="text" @click="handle('detail',item)">详情</el-button>-->
                        <el-table-column
                            prop="total_price"
                            label="实际支付金额(元)(未扣分佣前)"
                            align="center"
                            min-width="100"
                        >
                            <template slot-scope="scope">
                                    <div>
                                        <div style="text-align: left;line-height: 16px;">{{scope.row.order.pay_money}}</div>
                                    </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="after_distribution_price"
                            label="货款金额(元)"
                            align="center"
                            min-width="100"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="id"
                            align="center"
                            min-width="100"
                            label="订单状态">
                            <template slot-scope="scope">
                                <!-- 订单状态;1已完成;2未完成;3已退款 -->
                                <el-tag v-if="scope.row.order.order_status == 0" type="success">{{computedType(scope.row.order.order_status)}}</el-tag>
                                <el-tag v-if="scope.row.order.order_status == 1" type="success">{{computedType(scope.row.order.order_status)}}</el-tag>
                                <el-tag v-if="scope.row.order.order_status == 2" type="danger">{{computedType(scope.row.order.order_status)}}</el-tag>
                                <el-tag v-if="scope.row.order.order_status == 3" type="warning">{{computedType(scope.row.order.order_status)}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                          label="操作"
                          min-width="150">
                          <template slot-scope="scope">
                              <el-button type="primary" size="mini" @click="goCloudStockOrder(scope.row.id,scope.row.user_id)">查看详情</el-button>
                          </template>
                        </el-table-column>
                    </el-table>
                    <!-- 代理库存页面 end -->

                    <div style="text-align: right;margin: 20px 0;">
                        <el-pagination
                            @current-change="pagination1"
                            background
                            layout="prev, pager, next"
                            :page-count="pageCount1">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </div>
    </el-card>
<!--    <stock-goods-edit v-model="edit.show" :edit_row="edit"></stock-goods-edit>-->


    <el-dialog
        center
        title="库存详情"
        :visible.sync="dialogVisible"
        width="50%"
    >
        <el-table
            size="small"
            :data="tableData2"
            style="width: 100%;padding-bottom: 30px;">
            <el-table-column
                label="商品名称"
            >
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <img :src="scope.row.huiyuan.img" style="width: 35px;height: 35px;display: block;margin-right: 5px;" />
                        <div>{{scope.row.huiyuan.name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="拿货价"
            >
                <template slot-scope="scope">
                    ￥{{scope.row.id}}
                </template>
            </el-table-column>
            <el-table-column
                prop="id"
                align="center"
                label="库存">
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                edit:{
                    show:false,
                    id:0,
                },
                list: [],
                keyword: '',
                listLoading: false,
                page: 1,
                level:1,
                pageCount1: 0,
                condition_type_list: {
                    1: '下线用户数',
                    2: '累计佣金',
                    3: '已提现佣金'
                },
                price_type_list: {
                    1: '%',
                    2: '元'
                },
                dialogVisible:false,
                activeName: 'second',
                selectData:'',
                search1:{
                    keyword:'',
                    goods_name:'',
                    start:'',
                    end:'',
                    selectDate:'',
                    id:''
                },
                search2:{
                    keyword:'',
                    goods_name:'',
                    start:'',
                    end:'',
                    id:'',
                    selectDate:''
                },
                jiaJianKuncun:[
                    {
                        name:'减库存',
                        level:1
                    },{
                        name:'加库存',
                        level:2
                    }],
                jiaJianKuncunValue:'',
                tableData2: [{
                    id:1,
                    huiyuan:{
                        img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                        name:'张三'
                    },
                    phone:15219398480,
                    dengji:"等级1",
                    pro:[
                        {
                            name:'红酒红酒红酒红酒红酒红酒红酒',
                            price:199.99,
                            kucun:99
                        },
                        {
                            name:'红酒2',
                            price:199.99,
                            kucun:99
                        },
                        {
                            name:'红酒3',
                            price:199.99,
                            kucun:99
                        }
                    ]
                },
                    {
                        id:1,
                        huiyuan:{
                            img:'http://zhenai.ruinuomei.com/product/5a0bb3d1-cffe-49c7-99d7-b1481c31dc5c',
                            name:'张三'
                        },
                        phone:15219398480,
                        dengji:"等级1",
                        pro:[
                            {
                                name:'红酒1',
                                price:199.99,
                                kucun:99
                            },
                            {
                                name:'红酒2',
                                price:199.99,
                                kucun:99
                            },
                            {
                                name:'红酒3',
                                price:199.99,
                                kucun:99
                            }
                        ]
                    }],
                agentLevelList:[],
                order_type:2,

            };
        },
        mounted: function () {
            this.getList2();
        },
        methods: {
            goOrder(id){
                let params = {
                    r: 'mall/order/detail'
                };
                if (id) params = Object.assign(params, {
                    id: id,

                });
                navigateTo(params);
            },
            goCloudStockOrder(id,user_id){
                let params = {
                    r: 'cloud-stock-two/order/detail'
                };
                if (id) params = Object.assign(params, {
                    id: id,
                    user_id:user_id,
                    order_type:this.order_type,

                });
                navigateTo(params);
            },
            searchFun1(){
                if(this.search1.selectDate && this.search1.selectDate[0]){
                    this.search1.start = this.search1.selectDate[0];
                    this.search1.end = this.search1.selectDate[1];
                }else{
                    this.search1.start = '';
                    this.search1.end = '';
                }
                this.page = 1;
                this.getList();
            },
            searchFun2(){
                if(this.search2.selectDate && this.search2.selectDate[0]){
                    this.search2.start = this.search2.selectDate[0];
                    this.search2.end = this.search2.selectDate[1];
                }else{
                    this.search2.start = '';
                    this.search2.end = '';
                }
                this.page = 1;
                this.getList2();
            },
            computedType(type) {//订单状态;1已完成;2未完成;3已退款
                if (type == 0) {
                    return "待支付"
                } else if (type == 1) {
                    return "待发货(已付款)"
                } else if (type == 2) {
                    return "已发货"
                } else if (type == 3) {
                    return "已收货"
                } else if (type == 4) {
                    return "已完成"
                }
            },
            handleClick(tab, event) {
                // console.log(tab)
                //console.log("event="+event)
                // console.log('activeName='+this.activeName)
                if(this.activeName == 'first'){
                    this.page = 1;
                    this.pageCount1 = 0;
                    this.order_type = 1;
                    this.getList();
                }else if(this.activeName == 'second'){
                    this.page = 1;
                    this.pageCount1 = 0;
                    this.order_type = 2;
                    this.getList2();
                }
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination1(currentPage) {
                /* let self = this; */
                this.page = currentPage;
                if(this.activeName == 'first'){
                    this.getList();
                }else if(this.activeName == 'second'){
                    this.getList2();
                }
            },
            getList() {
                let self = this;
                self.listLoading = true;
                // console.log('会员买货订单列表page='+self.page)
                // console.log('会员买货订单列表search1='+JSON.stringify(this.search1))
                request({
                    params: {
                        r: 'cloud-stock-two/order/index',//会员买货订单列表
                        page:self.page,
                        list_type:'order',
                        limit: 10,
                        goods_name:this.search1.goods_name,
                        keyword:this.search1.keyword,
                        start:this.search1.start,
                        end:this.search1.end,
                        id:this.search1.id
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('会员买货订单列表=',e)
                    self.listLoading = false;
                    if(e.data.code == 0){
                        self.list = e.data.data.list;
                        self.pageCount1 = e.data.data.page_count;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            getList2(){
                this.listLoading = true;
                // console.log('补货订单列表page='+this.page)
                // console.log('补货订单列表this.search2='+JSON.stringify(this.search2))
                request({
                    params: {
                        r: 'cloud-stock-two/order/index',//plugin/cloud_stock/mall/fill-order/get-list补货订单列表
                        page:this.page,
                        list_type:'fill_order',
                        limit: 10,
                        goods_name:this.search2.goods_name,
                        keyword:this.search2.keyword,
                        start:this.search2.start,
                        end:this.search2.end,
                        id:this.search2.id
                    },
                    method: 'get',
                }).then(e => {
                    //console.log('补货订单列表='+JSON.stringify(e))
                    this.listLoading = false;
                    if(e.data.code == 0){
                        this.list = e.data.data.list;
                        this.pageCount1 = e.data.data.page_count;
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            switchStatus(row) {
                let self = this;
                self.listLoading = true;
                request({
                    params: {
                        r: 'cloud-stock-two/level/switch-status',
                    },
                    method: 'post',
                    data: {
                        id: row.id,
                    }
                }).then(e => {
                    self.listLoading = false;
                    if (e.data.code === 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    self.getList();
                }).catch(e => {
                    console.log(e);
                });
            },
            editClick(id){
                if (id){
                    this.edit.id=id;
                    this.edit.show=true;
                    this.edit.title="编辑商品"
                }else {
                    this.edit.show=true;
                    this.edit.title="添加商品"
                }

            },
            levelDelete(row, index) {
                let self = this;
                self.$confirm('删除该库存商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'cloud-stock-two/goods/delete',
                        },
                        method: 'post',
                        data: {
                            id: row.id,
                        }
                    }).then(e => {
                        self.listLoading = false;
                        if (e.data.code === 0) {
                            self.$message.success(e.data.msg);
                            self.list.splice(index, 1);
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                    self.$message.info('已取消删除')
                });
            },
            seeDetail(){
                this.dialogVisible = true
            },
            formatTime(timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d +' '+ h + ':' + minute + ':' + second;

            }
        }
    });
</script>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    /* .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    } */


    .el-table thead{
        font-size: 14px;
        color: #333;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
        border-bottom: 1.4px solid #D6D6D6;
    }

    .el-date-editor .el-range-separator{/* 设置选择日期框的中间的 ‘至’ 的宽度 */
        width: 8%;
    }

</style>