hemall.terabimsoft.com.cn/plugins/share-activity/views/reward-list.blade.php

@extends('layouts.base')
@section('title', "奖励记录")
@section('content')
    <style xmlns:v-bind="http://www.w3.org/1999/xhtml">
        .rightlist #app .rightlist-head {
            padding: 15px 0;
            line-height: 50px;
        }

        .rightlist #app {
            margin-left: 30px;
        }

        .rightlist-head-con {
            float: left;
            padding-right: 20px;
            font-size: 16px;
            color: #888;
        }

        .el-form-item__label {
            padding-right: 30px;
        }

        .mouse-active {
            cursor: pointer;
            border: 1px dotted #409EFF;
            border-radius: 4px;
        }

        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {
            left: 100%;
            margin-left: -17px;
        }

        .el-switch__core::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

    </style>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
    <div id="app-share-activity">
        <template>
            <el-container>
                <el-header height="auto">
                    <div class="">
                        <h4 class="card-title">奖励记录</h4>
                        <div style="padding-top: 24px">
                            <el-form v-loading="loading" ref="form" :model="form" :inline="true">
                                <el-form-item label="活动ID">
                                    <el-input v-model="searchParams.activity_id" placeholder="活动ID"></el-input>
                                </el-form-item>
                                <el-form-item label="活动名称">
                                    <el-input v-model="searchParams.activity_name" placeholder="请输入活动名称"></el-input>
                                </el-form-item>
                                <el-form-item label="奖励时间">
                                    <template>
                                        <div class="block">
                                            <span class="demonstration"></span>
                                            <el-date-picker
                                                    v-model="searchParams.create_time"
                                                    type="datetimerange"
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期"
                                                    align="right">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                                <el-form-item label="奖励类型">
                                    <template>
                                        <el-select v-model="searchParams.type" placeholder="请选择奖励类型">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-form-item>

                                <el-form-item label="奖励会员ID">
                                    <el-input v-model="searchParams.member_id" placeholder="输入会员ID"></el-input>
                                </el-form-item>
                                <el-form-item label="奖励会员姓名/昵称/手机号">
                                    <el-input v-model="searchParams.member_msg" placeholder="姓名/昵称/手机号"></el-input>
                                </el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
                            </el-form>
                        </div>
                    </div>
                </el-header>
                {{--表格start--}}
                <el-main>
                    <template>
                        <el-table :data="list">
                            <el-table-column
                                    align="center"
                                    prop="created_at"
                                    label="时间">
                            </el-table-column>
                            <el-table-column align="center" label="活动会员" width="auto">
                                <template slot-scope="scope">
                                    <div>
                                        <div v-if="scope.row.member.avatar"><img :src="scope.row.member.avatar" alt=""
                                                                                 style="width:40px;height:40px;border-radius:50%">
                                        </div>
                                        <div @click="gotoMember(scope.row.member_id)"
                                             style="line-height:32px;color:#29BA9C;cursor: pointer;"
                                             class="vue-ellipsis">[[scope.row.member.nickname]]
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" align="center" prop="activity_id" label="活动ID"
                                             width="auto"></el-table-column>
                            <el-table-column align="center" prop="name" label="活动名称" width="auto">
                                <template slot-scope="scope">
                                    <div style="line-height:32px;color:#29BA9C;cursor: pointer;" class="vue-ellipsis">
                                        [[scope.row.activity.name]]
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="奖励类型" align="center" align="center">
                                <template slot-scope="scope">
                                    [[scope.row.reward_name]]
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="amount"
                                    label="奖励数量">
                            </el-table-column>
                            <el-table-column align="center" label="备注">
                                <template slot-scope="scope">
                                    [[scope.row.remark]]
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-main>
                {{--表格end--}}
                <el-footer>
                    <el-pagination
                            layout="prev, pager, next"
                            @current-change="currentChange"
                            :current-page.sync="current_page"
                            :total="page_total"
                            :page-size="page_size"
                            background v-loading="loading">
                    </el-pagination>
                </el-footer>

            </el-container>
        </template>
    </div>
    <script>
        var app = new Vue({
            el: '#app-share-activity',
            delimiters: ['[[', ']]'],
            data() {
                let pageList = {!! $pageList ?: '{}'!!};
                return {
                    form: {},
                    loading: false,
                    options:
                        [{
                            value: 0,
                            label: '全部'
                        }, {
                            value: 1,
                            label: '余额'
                        }, {
                            value: 2,
                            label: '积分'
                        }, {
                            value: 3,
                            label: '优惠劵'
                        }, {
                            value: 4,
                            label: '微信零钱'
                        }, {
                            value: 5,
                            label: '微信红包'
                        }],
                    searchParams: {
                        'id': '',
                        'name': '',
                        'create_time': '',
                    },
                    real_search_form: {
                        'id': '',
                        'name': '',
                        'create_time': '',
                    },
                    list: pageList.data,
                    current_page: pageList.current_page,
                    page_total: pageList.total,
                    page_size: pageList.per_page,
                }
            },
            methods: {
                searchData() {
                    this.loading = true;
                    if (this.searchParams.create_time) {
                        this.searchParams.create_time[0] = Math.round(this.searchParams.create_time[0] / 1000).valueOf();
                        this.searchParams.create_time[1] = Math.round(this.searchParams.create_time[1] / 1000).valueOf();
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.share-activity.admin.activity-reward.reward-list') !!}', {search: this.searchParams}
                    ).then(function (response) {
                            if (response.data.result) {
                                let datas = response.data.data;
                                this.page_total = datas.total;
                                this.list = datas.data;
                                this.page_size = datas.per_page;
                                this.current_page = datas.current_page;
                                this.real_search_form = this.searchParams;
                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            this.loading = false;
                        }, function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    );
                },
                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.share-activity.admin.activity-reward.reward-list') !!}', {
                        page: val,
                        search: this.real_search_form
                    }).then(function (response) {
                            if (response.data.result) {
                                let datas = response.data.data;
                                this.page_total = datas.total;
                                this.list = datas.data;
                                this.page_size = datas.per_page;
                                this.current_page = datas.current_page;
                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            this.loading = false;
                        }, function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    );
                },
                gotoMember(id) {
                    window.location.href = `{!! yzWebFullUrl('member.member.detail') !!}` + `&id=` + id;
                },
            },
        });
    </script>
@endsection