qimall/addons/GroupBuy/backend/views/default/index.php

<style>
    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .share-pop-model {
        margin-bottom: 20px;
    }

    .share-name {
        width: 90px;
        display: inline-block;
        margin-right: 18px;
        text-align: end;
    }
</style>
<div id="app">
    <div class="table-body" style="min-width: 1000px;">
        <div slot="header" class="clearfix" style="height: 20px;">
            <span>活动列表</span>
            <el-button style="float: right; padding: 3px 12px;margin-left: 20px;height: 32px;" type="primary" @click="toPageAdd">添加活动</el-button>
        </div>
        <div slot="header" class="clearfix" style="margin-top: 20px;">
            <div id="qrcode-info" style="position: fixed;top: 10000000000px;">
                <!-- 背景图 -->
                <el-image id="couponBak" style="width: 144px; height: 144px;" src="/resources/img/plugins/coupon/coupon_bak.png"></el-image>
                <!-- 头像 -->
                <el-image id="topImg" style="width: 144px; height: 144px;" v-if="mall_info" :src="mall_info.mall_logo"></el-image>
                <!-- 二维码 -->
                <!-- <el-image id="codeImg" style="width: 95px; height: 95px;" src="/resources/img/plugins/coupon/code.png"></el-image> -->
                <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
                <!-- 生成的海报图片 -->
<!--                <el-image id="posterImg" style="width: 375px; height: 603px;" :src="this.shareData.poster"></el-image>-->
                <!-- 生成海报 -->
<!--                <canvas id="myCanvas" width="375" height="603" style="border:1px solid #d3d3d3;"></canvas>-->
            </div>

            <el-button :type="LoadDataType==-1?'primary':''" size="small" @click="getLoadData(-1)">全部</el-button>
            <el-button :type="LoadDataType==0?'primary':''" size="small" @click="getLoadData(0)">未开始</el-button>
            <el-button :type="LoadDataType==1?'primary':''" size="small" @click="getLoadData(1)">活动中</el-button>
            <el-button :type="LoadDataType==2?'primary':''" size="small" @click="getLoadData(2)">已结束</el-button>


            <div class="demo-input-suffix" style="margin-top: 20px;margin-bottom: 10px;">
                <el-input @keyup.enter.native="toSearchActivity" size="small" style="width:300px;margin-right: 20px;" placeholder="搜索商品名称" v-model="search.goods_name" clearable>
                </el-input>
                <el-button type="primary" size="small" @click="toSearchActivity">搜索</el-button>
            </div>

        </div>

        <template>
            <el-table :data="list" stripe style="width: 100%" v-loading="listLoading" class="table1">
                <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
                <el-table-column prop="goods.name,goods.cover_pic" label="商品名称" width="210">
                    <template slot-scope="scope">
                        <div flex="box:first cross:top cross:center" v-if="scope.row.goods">
                            <div style="padding-right: 5px;">
                                <com-image mode="aspectFill" :src="scope.row.goods.cover_pic"></com-image>
                            </div>
                            <div>
                                {{scope.row.goods.goods_name}}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="活动名称" align="center"></el-table-column>
                <el-table-column prop="group_size" label="成团人数" align="center"></el-table-column>
                <el-table-column prop="total_orders" label="成团订单数" align="center"></el-table-column>
                <el-table-column prop="total_orders_price" label="成团金额" align="center"></el-table-column>
                <el-table-column prop="goods_stock" label="拼团库存" align="center"></el-table-column>
                <el-table-column prop="give_balance" label="赠送余额" align="center"></el-table-column>
                <el-table-column prop="give_score" label="赠送积分" align="center"></el-table-column>
                <el-table-column prop="start_at,end_at" label="活动时间" width="300" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.start_at|dateTimeFormat('Y-m-d H:i:s')}} ~ {{scope.row.end_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="group_status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag effect="dark" size="small" type="info" v-if="scope.row.group_status == 0">未开始</el-tag>
                        <el-tag effect="dark" size="small" type="success" v-if="scope.row.group_status == 1">活动中</el-tag>
                        <el-tag effect="dark" size="small" type="warning" v-if="scope.row.group_status == 2">已结束</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="start_at,end_at" label="添加时间" width="150" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button @click="toGroupList(scope.row.id)" type="text" size="mini">开团列表</el-button>
                        <el-button @click="groupGoodsDetail(scope.row.id)" type="text" size="mini">查看</el-button>
                        <el-button @click="del(scope.row.id)" type="text" size="mini">删除</el-button>
                        <el-button @click="openPop(scope.$index,2)" type="text" size="mini">推广码</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div flex="main:right cross:center" style="margin-top: 20px;">
                <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize" style="display: inline-block;float: right;" background @current-change="pageChange" layout="prev, pager, next" :total="pagination.totalCount">
                </el-pagination>

            </div>

        </template>
    </div>

    <!-- 这个是查看商品详情弹窗 -->
    <el-dialog title="查看明细" :visible.sync="dialogFormVisible" center width="60%">
        <el-table :data="group_buy_attr_list" :border='true' v-loading="dialogLoading">
            <el-table-column property="goods" label="商品名称" min-width="150" header-align="center" align="center">
                <template slot-scope="scope">
                    <div style="display: flex;align-items: center;">
                        <el-image v-if="scope.row.goods.cover_pic" :src="scope.row.goods.cover_pic" style="width: 55px;height: 55px;display: block;margin-right: 5px;flex-shrink: 0;"></el-image>
                        <div>{{scope.row.goods.goods_name}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="goodsAttr" label="商品SKU" min-width="150" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.goodsAttr.name">{{scope.row.goodsAttr.name}} </span>
                    <span v-if="scope.row.goodsAttr.name==''">默认</span>
                </template>
            </el-table-column>
            <el-table-column label="单价" min-width="100" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.goodsAttr.price}} </span>
                </template>
            </el-table-column>
            <el-table-column property="group_buy_price" label="拼团价" min-width="100" align="center"></el-table-column>
            <el-table-column property="stock" label="当前库存" min-width="100" align="center"></el-table-column>
            <el-table-column label="成团人数" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.groupBuyActive.group_size}} </span>
                </template>
            </el-table-column>
            <el-table-column label="虚拟拼团人数" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.groupBuyActive.virtual_group_type==1">0</span>
                    <span v-if="scope.row.groupBuyActive.virtual_group_type==2">{{scope.row.groupBuyActive.group_size-scope.row.groupBuyActive.gt_group_size}} </span>
                </template>
            </el-table-column>
            <el-table-column label="是否虚拟成团" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.groupBuyActive.is_virtual==1">是</span>
                    <span v-if="scope.row.groupBuyActive.is_virtual==0">否</span>
                </template>
            </el-table-column>
            <el-table-column label="赠送积分" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.groupBuyActive.give_score}} </span>
                </template>
            </el-table-column>
            <el-table-column label="赠送余额" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.groupBuyActive.give_balance}} </span>
                </template>
            </el-table-column>
            <el-table-column label="有效时间" align="center">
                <template slot-scope="scope">
                    <span>{{formatEffectiveTime(scope.row.groupBuyActive.effective_time)}} </span>
                </template>
            </el-table-column>
            <el-table-column label="限购数量" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.groupBuyActive.limit_buy_num}} </span>
                </template>
            </el-table-column>
            <el-table-column label="指定团长会员等级" align="center">
                <template slot-scope="scope">
                    <span>{{commander_level_limit_text}}</span>
                </template>
            </el-table-column>
            <el-table-column label="指定团员会员等级" align="center">
                <template slot-scope="scope">
                    <span>{{user_level_limit_text}}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog v-loading="posterLoading" element-loading-text="生成海报中" title="分享" :visible.sync="sharePop" width="30%">
        <div class="share-pop-model">
            <div class="share-name">分享链接</div>
            <el-input style="width: 50%;" v-model="shareData.url" placeholder="暂无链接" disabled>
                <template slot="append">
                    <el-button circle size="mini" type="text" @click="copyLink(shareData.url)" class="copy_btn">复制</el-button>
                </template>
            </el-input>
        </div>
        <div class="share-pop-model" flex>
            <div class="share-name">二维码</div>
            <div style="width: 180px; height: 180px;background: #F2F2F2;margin-right: 12px;" flex="main:center cross:center">
                <el-image style="width: 144px; height: 144px;" :src="shareData.img"></el-image>
            </div>
<!--            <el-button flex type="text" @click="getPoster">下载海报</el-button>-->
            <el-button flex type="text" @click="downloadShareImg('qrcode')">下载二维码</el-button>
        </div>
    </el-dialog>


</div>
<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                listLoading: false,
                list: [],
                pagination: {
                    total: 0
                },
                loading: false,
                LoadDataType: -1, //默认显示全部数据
                dialogFormVisible: false, //默认不显示弹窗
                group_buy_attr_list: [],
                goodsDetail: {},
                dialogLoading: false,
                search: {
                    goods_name: '',
                    group_status: -1,
                    page: 1,
                },
                commander_level_limit_text: '',
                user_level_limit_text: '',
                shareData: {
                    url: "", //链接
                    img: "", //二维码
                    poster: '', // 海报图片
                    poster_filename: '', // 海报图片文件名
                    qrcode_filename: '', // 二维码文件名
                },
                sharePop: false, //分享弹窗
                posterLoading: false,
                mall_info: {},


            }
        },
        methods: {
            // 页面跳转
            toPageAdd() {
                navigateTo({
                    r: 'group-buy/default/add',
                })
            },

            // 跳转到当前商品活动的开团列表
            toGroupList(id) {
                navigateTo({
                    r: 'group-buy/default/open-list',
                    group_buy_active_id: id
                })
            },

            //状态按钮的点击事件
            getLoadData(e) {
                this.search.group_status = e;
                this.loadData()
            },

            toSearchActivity() {
                this.loadData()
            },

            // 查看商品详情
            groupGoodsDetail(id) {
                this.dialogFormVisible = true;
                this.dialogLoading = true;
                request({
                    params: {
                        r: 'group-buy/default/detail',
                        id: id,
                    },
                    method: 'GET',
                }).then(e => {
                    let res = e.data;
                    this.dialogLoading = false;
                    if (res.code === 0) {
                        this.group_buy_attr_list = res.data.list;
                        this.commander_level_limit_text = res.data.commander_level_limit_text;
                        this.user_level_limit_text = res.data.user_level_limit_text;
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {});
            },
            async openPop(index, type) {
                let codeImgSrc = await this.getQrCode(this.list[index].page_link);
                this.shareData.img = codeImgSrc;
                this.shareData.url = this.list[index].page_link;
                this.shareData.poster_filename = this.list[index].poster_filename;
                this.shareData.qrcode_filename = this.list[index].qrcode_filename;
                this.sharePop = true;
            },
            copyLink(str) {
                var clipboard = new Clipboard('.copy_btn', {
                    text: function() {
                        return str;
                    }
                });
                var self = this;
                clipboard.on('success', function(e) {
                    // console.log("success")
                    self.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    // console.log("error")
                    self.$message.error('复制失败，请手动复制');
                });
            },
            getQrCode(url) {
                let qrcodeInfo = document.getElementById("qrcode-info");
                document.getElementById("qrcode").remove(); //删除生成的二维码
                let addCodeDom = document.createElement("div")
                addCodeDom.setAttribute("id", "qrcode");
                addCodeDom.setAttribute("style", "width:300px; height:300px;");
                qrcodeInfo.appendChild(addCodeDom) //添加标签

                let qrCodeDom = document.getElementById("qrcode")
                var qrcode = new QRCode(qrCodeDom, {
                    width: 300,
                    height: 300
                });

                qrcode.makeCode(url);
                // 获取二维码生成的图片信息
                let src = "";
                return new Promise((req, rej) => {
                    setTimeout(() => {
                        src = qrCodeDom.getElementsByTagName("img")[0].src;
                        req(src)
                    }, 200);
                })

            },
            getPoster() {
                try {
                    // 存在海报则不重新生成
                    if (this.posterArr[this.list_index]) {
                        this.shareData.poster = this.posterArr[this.list_index];
                        return;
                    }
                    this.posterLoading = true;
                    let qrcodeInfo = document.getElementById("qrcode-info");
                    var c = document.getElementById("myCanvas");
                    // 清空上一个生成的海报
                    c.remove();
                    // 创建标签
                    let addPosterDom = document.createElement("canvas")
                    addPosterDom.setAttribute("id", "myCanvas");
                    addPosterDom.setAttribute("width", "375");
                    addPosterDom.setAttribute("height", "603");
                    qrcodeInfo.appendChild(addPosterDom);

                    c = document.getElementById("myCanvas");
                    var ctx = c.getContext("2d");
                    // 背景图
                    let bak = document.getElementById("couponBak");
                    ctx.drawImage(bak, 0, 0, 375, 603);
                    // 圆
                    ctx.beginPath();
                    ctx.arc(187.5, 105, 40, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = "#FFF";
                    ctx.fill(); //填充颜色
                    let mall_header_data = JSON.parse(localStorage.getItem("mall_header_data"));
                    // 店名
                    ctx.font = "bold 17px Arial";
                    ctx.fillStyle = "#000";
                    ctx.textAlign = 'center';
                    ctx.fillText(this.mall_info.mall_name, 187.5, 175);

                    // 优惠券类型
                    ctx.font = "bold 14px Arial";
                    ctx.fillStyle = "#000";
                    ctx.textAlign = 'center';
                    ctx.fillText("送你一张优惠券", 187.5, 205);

                    // 额度
                    ctx.font = "bold 22px Arial";
                    ctx.fillStyle = "#DB0505";
                    ctx.textAlign = 'center';
                    // ctx.fillText(this.list[this.list_index].content,187.5,265);
                    ctx.fillText(this.list[this.list_index].name, 187.5, 265);

                    let type = this.list[this.list_index].appoint_type;
                    let typeStr = "全场可用";
                    if (type == 1) {
                        typeStr = "指定商品分类可用";
                    } else if (type == 2) {
                        typeStr = "指定商品可用";
                    }

                    // 可使用的类型
                    ctx.font = "14px Arial";
                    ctx.fillStyle = "#DB0505";
                    ctx.textAlign = 'center';
                    // ctx.fillText("全部商品任意金额可用",187.5,295);
                    ctx.fillText(typeStr, 187.5, 295);


                    // 二维码
                    let code = document.getElementById("qrcode").getElementsByTagName("img")[0];
                    ctx.drawImage(code, 140, 380.5, 95, 95);

                    // 商城头像
                    ctx.beginPath();
                    ctx.arc(187.25, 104.75, 36.25, 0, 2 * Math.PI);
                    ctx.clip();
                    let topImg = document.getElementById("topImg");
                    ctx.drawImage(topImg, 147.5, 65, 80, 80);
                    this.shareData.poster = c.toDataURL('image/png');
                    this.posterArr[this.list_index] = this.shareData.poster;
                    console.info(this.shareData.poster);
                    this.posterLoading = false;
                    this.downloadShareImg('poster');
                } catch (error) {
                    console.info(error);
                    this.posterLoading = false;
                    this.$message.error('生成失败');
                }
            },
            downloadShareImg(type) {
                // console.log(this.shareData);return null;
                if ('qrcode' == type) {
                    if (!this.shareData.img) {
                        this.$message.error('暂无图片');
                        return;
                    }
                    var img_url = this.shareData.img;
                    var filename = this.shareData.qrcode_filename;
                } else {
                    if (!this.shareData.poster) {
                        this.$message.error('暂无图片');
                        return;
                    }
                    var img_url = this.shareData.poster;
                    var filename = this.shareData.poster_filename;
                }
                fetch(img_url).then(res => res.blob().then(blob => {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    a.href = url;
                    a.download = filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                }))
            },


            // 删除拼团商品
            del(id) {
                this.$confirm('此操作将删除该拼团商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delGroupGoods(id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            pageChange(page) {
                this.search.page = page;
                this.loadData();
            },
            delGroupGoods(id) {
                this.loading = true;
                request({
                    params: {
                        r: 'group-buy/default/del',
                        id: id
                    },
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.$message.success(res.msg);
                        this.loadData();
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {});
            },

            // 请求获取数据--获取拼团商品列表
            loadData() {
                this.listLoading = true;
                let params = {
                    r: 'group-buy/default/index'
                };
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    let res = e.data;
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.list = res.data.list;
                        this.mall_info = e.data.data.mall_info;
                        this.pagination = res.data.pagination; //拿到关于页码页容量的数据
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(e => {});
            },

            formatEffectiveTime(value) {
                var h = parseInt(value / 60);
                var m = value % 60;
                return h + '小时' + m + '分';
            }
        },
        // 加载的时候获取到列表页
        mounted() {
            // 数据初始化
            this.LoadDataType = -1;
            this.loadData();
        }
    })
</script>