hemall.terabimsoft.com.cn/plugins/fight-groups/views/admin/order/index.blade.php

<!--  拼团订单列表页  -->
@extends('layouts.base')
@section('title', '拼团订单列表')
@section('content')
    <link href="{{static_url('yunshop/css/order.css')}}" media="all" rel="stylesheet" type="text/css"/>

    <div id="app-orders" xmlns:v-bind="http://www.w3.org/1999/xhtml" v-loading="all_loading">
        <template>
            <el-container>
                <el-header height="auto" style="margin-bottom: -50px">
                    <div class="card">
                        <div class="card-header card-header-icon" data-background-color="rose">
                            <i class="fa fa-bars" style="font-size: 24px;" aria-hidden="true"></i>
                        </div>
                        <h4 class="card-title">拼团订单管理</h4>
                        <div style="padding:24px">
                            <el-form v-loading="loading" :inline="true" ref="search_form" :model="search_form">
                                <el-form-item label="活动编号">
                                    <el-input v-model="search_form.fight_groups_id" placeholder="活动编号"></el-input>
                                </el-form-item>
                                <el-form-item label="活动标题">
                                    <el-input v-model="search_form.fight_groups_title" placeholder="活动标题"></el-input>
                                </el-form-item>
                                <el-form-item label="团队状态">
                                    <el-select v-model="search_form.team_status" clearable placeholder="团队状态">
                                        <el-option v-for="v in team_status" :key="v.id" :label="v.name" :value="v.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="团长昵称">
                                    <el-input v-model="search_form.leader_name" placeholder="团长昵称"></el-input>
                                </el-form-item>
                                <el-form-item label="订单号">
                                    <el-input v-model="search_form.order_sn" placeholder="订单号"></el-input>
                                </el-form-item>
                                <el-form-item label="订单状态">
                                    <el-select v-model="search_form.status" clearable placeholder="订单状态">
                                        <el-option v-for="v in allStatus" :key="v.id" :label="v.name" :value="v.id"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="下单时间">
                                    <div class="block">
                                        <span class="demonstration"></span>
                                        <el-date-picker v-model="search_form.create_time" type="datetimerange" range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                align="center"
                                                value-format="timestamp">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="searchOrder()">搜索
                                </el-button>
                            </el-form>
                        </div>
                        <table class='table'
                               style='float:left;margin-bottom:0;table-layout: fixed;line-height: 40px;height: 40px'>
                            <tr class='trhead'>
                                <td colspan='8' style="text-align: left;">
                                    订单数: <span id="total">[[order_total]]</span>
                                    订单金额: <span id="totalmoney" style="color:red">[[order_sum_price]]</span>元&nbsp;
                                </td>
                            </tr>
                        </table>
                    </div>

                </el-header>
                <el-main>
                    <div v-for="order in data.data">
                        <el-container class="order-info">
                            <el-header class="order-title"
                                       style="background: #f8f8f8;height: 36px;line-height: 36px;border: 1px solid #ccc;">

                                <b>订单编号 : </b>[[ order.order_sn ]]
                                <b>下单时间 :</b> [[ order.create_time ]]
                                <label class="label label-info">[[ order.shop_name ]]</label>
                                &nbsp;&nbsp;<b>活动名称 :</b> [[ order.group_title ]]&nbsp;&nbsp;
                                &nbsp;&nbsp;<b>[[ order.member_num ]]人团</b>&nbsp;&nbsp;
                                &nbsp;&nbsp;<b>团长 :</b> [[ order.leader_name ]]&nbsp;&nbsp;
                                </el-row>
                            </el-header>
                            <el-main class="order-main">
                                <el-row align="middle" type="flex" justify="space-between">
                                    <el-col :span="8">
                                        <template v-for="order_goods in order.has_many_order_goods">

                                            <el-row>

                                                <el-col :span="16">

                                                    <img v-bind:src="order_goods.thumb"
                                                         style='width:50px;height:50px;padding:1px;border:1px solid #ccc'>
                                                    <span>[[ order_goods.title ]]</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    原价: [[ order_goods.goods_price ]]
                                                    <br/>应付: [[ order_goods.price ]]
                                                    <br/>数量: [[ order_goods.total ]]
                                                </el-col>

                                            </el-row>
                                        </template>

                                    </el-col>
                                    <el-col :span="3">

                                        <!-- <template v-if="order.provider_platform_order.tripartite_provider">
                                            销售平台:[[order.provider_platform_order.tripartite_retailer.name]]<br/>
                                        </template> -->
                                        <!-- <template v-if="order.provider_platform_order.tripartite_retailer">

                                            供应平台:[[order.provider_platform_order.tripartite_provider.name]]
                                        </template> -->
                                    </el-col>
                                    <el-col :span="3">
                                        <a v-bind:href="'{{ yzWebUrl('member.member.detail', array('id' => '')) }}'+[[order.uid]]"
                                           target="_blank">
                                            [[order.belongs_to_member.nickname]]<br/>[[order.belongs_to_member.realname]]<br/>[[order.belongs_to_member.mobile]]
                                        </a>

                                    </el-col>


                                    <el-col :span="3">
                                        <label class='label label-info'>[[order.pay_type_name]]</label>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-row>
                                            <el-col :span="12">
                                                商品小计:
                                            </el-col>
                                            <el-col :span="12">
                                                [[order.goods_price]]
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">
                                                应收款:
                                            </el-col>
                                            <el-col :span="12">
                                                <span style="color:green">[[order.price]]</span>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col :span="2">
                                        <div style="padding-bottom: 5px"><label class='label label-info'>[[order.status_name]]</label>
                                        </div>
                                        <div>
                                            <a v-bind:href="'{{ yzWebUrl('order.detail', array('id' => '')) }}'+[[order.id]]"
                                               target="_blank">查看详情</a></div>
                                    </el-col>
                                    <el-col :span="2">
                                        <order-operation :order="order"></order-operation>


                                    </el-col>

                                </el-row>
                            </el-main>
                        </el-container>

                    </div>

                </el-main>
                <!-- 分页 -->
                <el-row>
                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                        <el-pagination layout="prev, pager, next" @current-change="currentChange" :current-page="current_page" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </el-container>
        </template>
    </div>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
@endsection('content')
@section('js')
@include('Yunshop\FightGroups::admin.order.orderOperation')

    <script>
        var app = new Vue({
            el: '#app-orders',
            delimiters: ['[[', ']]'],
            components: {
                'order-operation': orderOperation
            },
            data() {
                let data = {!! $data?:'{}' !!};
                console.log(data);
                return {
                    // data: data.orders,
                    id:'',
                    search_form:{},
                    order_sum_price:'',
                    order_total:"",
                    //分页
                    total:0,
                    per_size:0,
                    current_page:0,
                    all_loading:false,
                    team_status:[
                        {id:null,name:'全部'},
                        {id:1,name:'已开团'},
                        {id:2,name:'成团成功'},
                        {id:3,name:'成团失败'},
                    ],

                    rules:{},
                    data:{
                        data:[
                            {id:1,provider_platform_order:{tripartite_provider:""},belongs_to_member:{nickname:"",}}
                        ]
                    },
                    form: {},
                    allStatus: [
                        {id: null, name: "全部"},
                        ...data.allStatus
                    ],
                    orderInfo:{
                        // total_sum:data.total_info.total_amount,
                        total_sum:"",
                        // count:data.total_info.total,
                        count:"",
                        service_charge:'0',
                        withdrawals:'0'

                    },
                    tripartiteRetailers: [
                        {id: null, name: "全部"},
                        // ...data.tripartiteRetailers

                    ],
                    tripartiteProviders: [
                        {id: null, name: "全部"},
                        // ...data.tripartiteProviders
                    ],
                    searchParams: {
                        // ...data.searchParams,
                        "keywords": "",
                        "status": "",
                        "tripartite_retailer_id": "",
                        "tripartite_provider_id": "",
                        "create_time": "",
                    },
                    loading: false,
                    memberLoading: false,
                    members: false,
                    pageLoading: false
                }
            },
            created() {
                //获得url传过来的id
                var url = window.location.href;
                var url_arr = url.split("=");
                var url_arr2 = url_arr[url_arr.length-2].split("&");
                console.log(url_arr2)
                let json = {};
                if(url_arr2[url_arr2.length-1] == 'fight_groups_id'){
                    this.id = url_arr[url_arr.length-1];
                    let new_url = "";
                    for(let i=0;i<url_arr.length;i++) {
                        if(this.id.charAt(i)!="#") {
                            new_url = new_url+this.id.charAt(i);
                        }
                    }
                    this.id = new_url;
                    json = {fight_groups_id:this.id};
                }
                
                this.search_form.fight_groups_id = this.id;
                this.getData(json);
            },
            methods: {
                getData(json) {
                    var that = this;
                    that.all_loading = true;
                    this.$http.post("{!! yzWebUrl('plugin.fight-groups.admin.controllers.order.search')!!}", json).then(response => {
                        console.log(response.data);

                        that.data.data = response.data.data.data;
                        that.total = response.data.data.total;
                        that.per_size = response.data.data.per_page;
                        that.current_page = response.data.data.current_page;
                        that.order_sum_price = response.data.data.sum_price;
                        that.order_total = response.data.data.total;
                        that.all_loading = false;
                    }, response => {
                        console.log(response);
                        that.all_loading = false;
                    });
                },
                searchOrder() {
                    console.log(this.search_form);
                    let time = [];
                    if(this.search_form.create_time){
                        time[0] = this.search_form.create_time[0]/1000;
                        time[1] = this.search_form.create_time[1]/1000;
                    }
                    let json = {
                        page:1,
                        fight_groups_id:this.search_form.fight_groups_id,
                        fight_groups_title:this.search_form.fight_groups_title,
                        leader_name:this.search_form.leader_name,
                        order_sn:this.search_form.order_sn,
                        status:this.search_form.status,
                        team_status:this.search_form.team_status,
                        create_time:time,
                    };
                    this. getData(json);               
                },

                searchMember(queryString) {
                    this.$http.post("{!! yzWebUrl('member.fastSearch')!!}", {keyword: queryString}).then(response => {
                        let members = response.data.data.map(function (member) {
                            console.log(member);
                            member.label = member.mobile + '/' + member.realname + '/' + member.nickname;
                            return member;
                        });
                        this.members = members;
                    }, response => {
                        console.log(response);
                    });
                },
                currentChange(val) {
                    let time = [];
                    if(this.search_form.create_time){
                        time[0] = this.search_form.create_time[0]/1000;
                        time[1] = this.search_form.create_time[1]/1000;
                    }
                    let json = {
                        page:val,
                        fight_groups_id:this.search_form.fight_groups_id,
                        fight_groups_title:this.search_form.fight_groups_title,
                        leader_name:this.search_form.leader_name,
                        order_sn:this.search_form.order_sn,
                        status:this.search_form.status,
                        team_status:this.search_form.team_status,
                        create_time:time,
                    };
                    this. getData(json);
                },
            }
        });
    </script>
@endsection('js')