hemall.terabimsoft.com.cn/plugins/yz-supply/views/admin/push-message-vue.blade.php

@extends('layouts.base')
@section('title', "推送消息")
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods.css')}}"/>

    <div id="qrcode" ref="qrcode" style="display:none;"></div>
    <div class="rightlist">

        <div id="app"  v-cloak v-loading="all_loading">

            <template>
                <div class="second-list">
                    <div class="third-list">
                        <div class="form-list">
                            <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                                <el-row>
                                    <el-form-item>
                                        <el-select v-model="search_form.type" placeholder="请选择状态" clearable >
                                            <el-option v-for="item,index in category.msg"  :key="index" :label="item" :value="index"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="">
                                        <el-date-picker
                                                v-model="times"
                                                type="datetimerange"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                style="margin-left:5px;"
                                                align="right">
                                        </el-date-picker>
                                    </el-form-item>


                                        <el-button type="primary" icon="el-icon-search" @click="getMessageList(1)">搜索</el-button>

                                        <el-button type="danger" icon="el-icon-warning" @click="clean()">清空数据</el-button>
          
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <div class="table-list">
                            <div>
                                @section('search')
                                <template>
                                    <!-- 表格start -->
                                    <el-table :data="message_list" style="width: 100%" :class="table_loading==true?'loading-height':''"  v-loading="table_loading">
                                        <el-table-column prop="id" label="ID" width="70" align="center"></el-table-column>
                                        </el-table-column>
                                        <el-table-column prop="type_name" label="消息类型" max-width="150" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.type_array.type_name]]
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="content_name" label="内容" width="800" align="center">

                                            <template slot-scope="scope">
                                                <a :href="'{{yzWebUrl('plugin.yz-supply.admin.shop-goods.edit', ['id' => ''])}}'+[[scope.row.goods_id]]"  v-if="scope.row.type_array.type_order_or_goods == 1">
                                                    商品id：[[scope.row.goods_id]]
                                                </a>
                                                <a :href="'{!! yzWebUrl('plugin.yz-supply.admin.order-list.detail',['id'=>''])!!}'+[[scope.row.order_id]]" v-if="scope.row.type_array.type_order_or_goods != 1">
                                                    订单id：[[scope.row.order_id]]
                                                </a>
                                            </template>

                                        </el-table-column>
                                        <el-table-column prop="created_at" label="时间" width="200" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.created_at]]
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 表格end -->
                                </template>
                                @show
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="vue-page" v-show="total>1">
                        <el-row>
                            <el-col align="right">
                                <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total" :page-size="per_size" :current-page="current_page" background v-loading="loading"></el-pagination>
                            </el-col>
                        </el-row>
                    </div>
                </div>

            </template>

        </div>
    </div>
    <script src="{{resource_get('static/js/qrcode.min.js')}}"></script>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],

            data() {
                let category = JSON.parse('{!! $category !!}');
                return{
                    category:category,
                    times:[],
                    message_list:[],//商品列表
                    table_loading:false,
                    all_loading:false,
                    loading:false,
                    search_form:{},
                    //分页
                    total:0,
                    per_size:0,
                    current_page:0,

                }
            },
            created() {
                console.log('category');

                console.log(this.category)
                this.getMessageList();

            },
            methods: {
                /*
                  清空数据
                 */
                clean(){
                    let that = this;
                    that.$confirm('确定情况所有消息吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        that.table_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.push-message.clean') !!}",{}).then(response => {

                            if(response.data.result==1){
                                that.$message.success("清除成功！");
                                that.getMessageList(1);
                            }
                            else{
                                that.$message.error(response.data.msg);
                            }
                            that.table_loading = false;
                        }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消'});
                    });
                },
                getMessageList(page){
                    var that = this;
                    console.log(this.times);
                    this.search_form.start_time = "";
                    this.search_form.end_time = "";
                    if(this.times && this.times.length>0) {
                        this.search_form.start_time = this.times[0];
                        this.search_form.end_time = this.times[1];
                    }

                    that.table_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.yz-supply.admin.push-message.index') !!}",{page:page,search:that.search_form}).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.message_list = response.data.data.page_data.data;
                            that.total = response.data.data.page_data.total;
                            that.current_page = response.data.data.page_data.current_page;
                            that.per_size = response.data.data.page_data.per_page;
                        }
                        else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                // 搜索、分页
                search(page) {
                    this.getMessageList(page);
                },

                // 上一页
                prev() {
                    let page = parseInt(this.current_page) - 1;
                    if (page < 1) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //下一页
                next() {
                    let page = parseInt(this.current_page) + 1;
                    if (this.per_size < this.page_number) {
                        return false;
                    }

                    this.getMessageList(page);
                },
                //跳页
                jumpPage() {
                    if (this.current_page <= 1) {
                        this.current_page = 1;
                    }
                    // if(this.current_page>100){
                    //     this.current_page = 100
                    // }

                    this.getMessageList(this.current_page);
                },

            },
        })

    </script>
@endsection