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

@extends('layouts.base')
@section('title', "开团列表")
@section('content')
<style>
    .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
    .rightlist #app{margin-left:30px;}
    .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
    /* .el-form-item__label{padding-right:30px;} */
    .tip{font-size:12px;color:#999;font-weight:500}
    .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;}
    /* .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;} */
    .el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
    .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
    /* 滑块选择小白点 */
    .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;}
    .tip1{font-size:12px;color:red;font-weight:500}
    [v-cloak]{
        display:none;
    }
</style>
<div id="qrcode" ref="qrcode" style="display:none;"></div>
<div class="rightlist">
    <div id="app"  v-cloak v-loading="all_loading">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.index') }}">活动列表</a></el-breadcrumb-item>
            <el-breadcrumb-item>开团列表</el-breadcrumb-item>
        </el-breadcrumb>
        <template>
            <el-form :inline="true" :model="search_form" ref="search_form" style="padding:20px 0 0 0;">
                <el-row>
                    <el-form-item label="团长昵称" prop="leader_name">
                        <el-input v-model="search_form.leader_name" placeholder="请输入团长昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围" prop="pay_way">
                        <el-date-picker v-model="search_form.times" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="几人团" prop="number">
                        <el-select v-model="search_form.member_num" placeholder="请选择" clearable>
                            <el-option v-for="item in level_list" :key="item.id" :label="item.member_num1" :value="item.member_num"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="拼团状态" prop="">
                        <el-select v-model="search_form.status" placeholder="请选择拼团状态" clearable>
                            <el-option v-for="item in pay_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="订单编号" prop="order_sn">
                        <el-input v-model="search_form.order_sn" placeholder="请输入订单编号"></el-input>
                    </el-form-item> -->
                        <a href="#">
                            <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                        </a>
                    </el-col>
                </el-row>
            </el-form>
            <template>
                <!-- 表格start -->
                <el-table :data="list" style="width: 100%"  v-loading="table_loading">
                    <el-table-column prop="id" label="编号" align="center"></el-table-column>
                    <el-table-column prop="member_name" label="团长" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatar" style="width:50px;height:50px">
                            <div>[[scope.row.nickname]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total" label="起止时间" min-width="150" align="center">
                        <template slot-scope="scope">
                            [[scope.row.start_time]]至[[scope.row.end_time1]]
                        </template>
                    </el-table-column>
                    <el-table-column prop="down_time" label="剩余时间" align="center">
                        <template slot-scope="scope">
                            [[scope.row.down_time ?scope.row.down_time: '-']]
                        </template>
                    </el-table-column>
                    <el-table-column prop="member_num" label="几人团" align="center"></el-table-column>
                    <el-table-column label="还差几人" align="center">
                        <template slot-scope="scope">
                            [[scope.row.member_num - scope.row.has_many_success_member_count >=0 ? scope.row.member_num - scope.row.has_many_success_member_count : '0']]
                        </template>
                    </el-table-column>
                    <el-table-column label="拼团状态" prop="status_message" align="center"></el-table-column>
                    <el-table-column label="管理" min-width="80" align="center">
                        <template slot-scope="scope">
                            <!-- <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.create', array('id' => '')) }}'+[[scope.row.id]]">
                                拼团链接
                            </a><br> -->
                            <el-popover class="item" placement="left" effect="light">
                                <div style="text-align:center;">
                                    <div style="padding:5px 0;text-align:left;">活动推广二维码：</div>
                                    <img :src="img" alt="" style="width:100px;height:100px;">
                                    <div style="padding-top:5px;">
                                        <el-button @click="copyList(scope.row.id)" type="mini">复制活动链接</el-button>
                                        <input v-model="scope.row.url" :ref="'list'+scope.row.id" style="position:absolute;opacity:0;height:1px;" />
                                    </div>
                                </div>
                                <a slot="reference" @click="listCode(scope.$index)">拼团链接</a>
                            </el-popover><br>
                            <el-popover class="item" placement="left" effect="light">
                                <div style="text-align:center;">
                                    <div style="padding:5px 0;text-align:left;">修改时间：</div>
                                    <el-date-picker v-model="change_time" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                        value-format="timestamp" placeholder="选择修改时间" :clearable="false" style="width:90%" @change="changed(scope.row)">
                                    </el-date-picker>                                    
                                </div>
                                <a slot="reference" v-if="scope.row.status==1" @click="changeTime(scope.row)">修改时间</a>
                            </el-popover><br v-if="scope.row.status==1">
                            <a v-if="scope.row.status==1" @click="virtual(scope.row.id)">
                                虚拟成团<br>
                            </a>
                            <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.team.details', array('id' => '')) }}'+[[scope.row.id]]">
                                查看详情
                            </a><br>               
                            <!-- <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.create', array('id' => '')) }}'+[[scope.row.id]]">
                                退款详情
                            </a> -->
                        </template>
                    </el-table-column>
                </el-table>
            <!-- 表格end -->
            </template> 
            <!-- 分页 -->
            <el-row>
                <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                    <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="total" :page-size="per_size" :current-page="current_page" background v-loading="loading"></el-pagination>
                </el-col>
            </el-row>
        </template>

    </div>
    <script src="{{resource_get('plugins/fight-groups/views/admin/qrcode.min.js')}}"></script>
<script>
    var app = new Vue({
        el:"#app",     
        delimiters: ['[[', ']]'],
        data() {
            return{
                id:"",
                img:"",//二维码
                search_form:{},
                form:{},
                level_list:[],
                pay_list:[
                    {id:0,name:"提交"},
                    {id:1,name:"拼团中"},
                    {id:2,name:"成功"},
                    {id:3,name:"失败"}
                ],
                change_time:1544444444444,
                list:[],
                loading:false,
                dialog_loading:false,
                table_loading:false,
                rules:{},
                 //分页
                total:0,
                per_size:0,
                current_page:0,
                rules:{},
            }
        },
        created() {
            this.id = "{{ request()-> id }}";

            var that = this;
            // //获得url传过来的id
            // var url = window.location.href;
            // var url_arr = url.split("=");
            // 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;
            let json = {id:this.id}
            //获取层级信息
            this.getLevel();
            this.getData(json);
        },
        methods: {
            getLevel() {
                var that = this;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team.get-levels') !!}",{id:that.id}).then(response => {
                    if(response.data.result==1){
                        console.log(response)
                        that.level_list = response.data.data;
                        that.level_list.forEach((item,index) => {
                            item.member_num = item.member_num;
                            item.member_num1 = item.member_num+'人团'
                        });
                        console.log(that.level_list)
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    that.all_loading = false;
                }),function(res){
                    that.all_loading = false;
                };
            },
            getData(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team.search') !!}",json).then(response => {
                    if(response.data.result==1){
                        console.log(response)
                        that.list = response.data.data.data;
                        that.list.forEach((item,index) => {
                            item.start_time = that.timeStyle(item.start_time)
                            item.end_time1 = that.timeStyle(item.end_time)
                            item.end_time = item.end_time*1000;
                            that.timing(item.end_time - new Date().getTime(),index);//倒计时
                        });
                        
                        that.total = response.data.data.total;
                        that.per_size = response.data.data.per_page;
                        that.current_page = response.data.data.current_page;
                        that.url = response.data.data.url;
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    console.log(this.list)
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            // 分页
            currentChange(page) {
                var that = this;
                let time1="";
                let time2="";
                if(that.search_form.times){
                    time1 = that.search_form.times[0]/1000;
                    time2 = that.search_form.times[1]/1000;
                }
                let json = {page:page,id:that.id,leader_name:that.search_form.leader_name,start_time:time1,end_time:time2,
                            member_num:that.search_form.member_num,status:that.search_form.status};
                that.getData(json);
            },
            // 搜索
            search() {
                var that = this;
                console.log(that.search_form)
                let time1="";
                let time2="";
                if(that.search_form.times){
                    time1 = that.search_form.times[0]/1000;
                    time2 = that.search_form.times[1]/1000;
                }
                let json = {page:1,id:that.id,leader_name:that.search_form.leader_name,start_time:time1,end_time:time2,
                            member_num:that.search_form.member_num,status:that.search_form.status};
                that.getData(json);
            },
            // 虚拟成团
            virtual(id) {
                var that = this;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team.virtual-team') !!}",{team_id:id}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.$message.success(response.data.msg);
                        window.location.reload();
                        // window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.index') !!}';
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            qrcodeScan (url) {//生成二维码
                let qrcode = new QRCode('qrcode', {
                    width: 100,  // 二维码宽度
                    height: 100, // 二维码高度
                    render: 'image',
                    text: url
                });
                var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");
                console.log(url)
                this.img = data;
            },
            // 活动二维码
            listCode(index) {
                this.qrcodeScan(this.list[index].url);
            },
            // 复制活动链接
            copyList(index) {
                that = this;
                let Url = that.$refs['list'+index];
                console.log(Url)
                Url.select(); // 选择对象
                document.execCommand("Copy",false);
                that.$message({message:"复制成功！",type:"success"});
            },
            // 修改时间
            changeTime(row) {
                console.log(row);
                this.change_time = "";
                this.change_time = row.end_time;
                console.log(this.change_time)
            },
            changed(row) {
                var that = this;
                this.$confirm('确定修改吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team.change-end-time') !!}",{team_id:row.id,end_time:that.change_time/1000}).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.$message.success("修改成功！");
                            let json = {id:this.id}
                            that.getData(json);
                        }
                        else{
                            that.$message.error(response.data.msg);
                            let json = {id:this.id}
                            that.getData(json);
                        }
                        that.all_loading = false;
                    }),function(res){
                        console.log(res);
                        that.all_loading = false;
                    };
                }).catch(() => {
                    this.cart_list[index].num++;
                    this.$message({type: 'info',message: '已取消修改'});
                    });
            },
            submitForm() {
                var that = this;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.add') !!}",{keywords_id:that.data.id}).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.keyword_list = response.data.data;
                        that.$message.success("保存成功！");
                        window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.index') !!}';
                    }
                    else{
                        that.$message.error(response.data);
                    }
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            // 定时器
            timing(down_time,index) {
                var that = this;
                if(down_time < 0) {
                    that.list[index].down_time = '-'
                    return false;
                }
                setTimeout(() => {
                    down_time = down_time - 1000;
                    var d=Math.floor(down_time/1000/60/60/24);
                    var hour=Math.floor(down_time/1000/60/60%24);
                    var min=Math.floor(down_time/1000/60%60);
                    var sec=Math.floor(down_time/1000%60);
                    let tt = d+'天'+hour+'时'+min+'分'+sec+'秒';
                    this.$set(that.list[index],'down_time',tt)
                    this.timing(down_time,index)
                }, 1000);
            },
            
            add0(m) {
                return m<10?'0'+m:m
            },
            timeStyle(time) {
                let time1 = new Date(time*1000);
                let y = time1.getFullYear();
                let m = time1.getMonth()+1;
                let d = time1.getDate();
                let h = time1.getHours();
                let mm = time1.getMinutes();
                let s = time1.getSeconds();
                return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
            },
        },
    })

</script>
@endsection