qimall/addons/Store/client/views/coupon/index.php

<?php defined('YII_ENV') or exit('Access Denied'); ?>
<style>
    .set-el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .sort-input {
        width: 100%;
        background-color: #F3F5F6;
        height: 32px;
    }

    .sort-input span {
        height: 32px;
        width: 100%;
        line-height: 32px;
        display: inline-block;
        padding: 0 10px;
        font-size: 13px;
    }

    .sort-input .el-input__inner {
        height: 32px;
        line-height: 32px;
        background-color: #F3F5F6;
        float: left;
        padding: 0 10px;
        border: 0;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-info .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        margin: 0 0 20px;
    }

    .input-item-name {
        margin-right: 5px;
    }

    .input-search {
        margin-right: 30px;
    }


    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .data-pop-info {
        /* padding: 18px 15px 30px; */
        color: #333;
    }

    .data-pop-mode {
        background: #F8F8F8;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .data-pop-top {
        height: 90px;
    }

    .data-price {
        width: 200px;
        flex-direction: column;
        border-right: 1px solid #E5E5E5;
    }

    .data-info {
        flex: 1;
        padding: 22px 15px;
        font-size: 16px;
    }

    .data-info-name {
        display: inline-block;
        text-align: end;
    }

    .data-pop-detail {
        padding: 15px 18px;
    }

    .data-detail-mode {
        min-width: 33%;
        flex-shrink: 0;
        text-align: center;
        margin-top: 16px;
        line-height: 26px;
        font-size: 16px;
    }

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

    .share-name {
        width: 90px;
        display: inline-block;
        margin-right: 18px;
        text-align: end;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>优惠券管理</span>
            <el-button style="float: right; margin-top: -8px;" type="primary" size="small" @click="$navigate({r:'store/client/coupon/edit'})">新建优惠券
            </el-button>
        </div>
        <div class="table-body">
            <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>
                <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>
            <div class="input-item">
                <div flex>
                    <div flex="cross:center" class="input-search">
                        <div class="input-item-name">优惠券名称：</div>
                        <div class="input-item-text">
                            <el-input @keyup.enter.native="search" size="small" placeholder="请输入优惠券名称搜索" v-model="searchData.name" clearable @clear="search"></el-input>
                        </div>
                    </div>
                    <div flex="cross:center" class="input-search">
                        <div class="input-item-name">类型：</div>
                        <div>
                            <el-select v-model="searchData.type" placeholder="请选择" size="small">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option v-for="(item,index) in type_text" :key="index" :label="item" :value="index">{{item}}
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div flex="cross:center" class="input-search">
                        <div class="input-item-name">状态：</div>
                        <div>
                            <el-select v-model="searchData.status" placeholder="请选择" size="small">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option v-for="(item,index) in status_text" :key="index" :label="item" :value="index">{{item}}
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div style="margin-left: 90px;margin-top: 0px;">
                        <el-button type="primary" size="small" @click="search">搜索</el-button>
                        <el-button type="warning" @click="clereSearch" v-if="searchData.name || searchData.type || searchData.status" style="padding: 9px 15px !important;">清除搜索条件</el-button>
                        <el-button type="primary" size="small" @click="batchDel">批量删除</el-button>
                    </div>
                </div>
            </div>
            <el-table v-loading="loading" stripe :data="list" @selection-change="scFormTab" style="width: 100%;margin-bottom: 15px">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column width='100' prop="id" label="优惠券id" align="center"></el-table-column>
                <el-table-column width='250' prop="name" label="优惠券名称" align="center"></el-table-column>
                <el-table-column width='150' prop="type" label="优惠券类型"  align="center">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type == 1?'折扣券':'满减券'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width='250' prop="discount" label="优惠内容"  align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.content}}</div>
                    </template>
                </el-table-column>
                <el-table-column width='150' prop="received_number" label="已领取" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.received_number">
                            <el-button type="text" @click="couponDetail(1, scope.row.id)">{{scope.row.received_number}}</el-button>
                        </div>
                        <div v-else>{{scope.row.received_number}}</div>
                    </template>
                </el-table-column>
                <el-table-column width='150' prop="used_number" label="已使用" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.used_number">
                            <el-button @click="couponDetail(2, scope.row.id)" type="text">{{scope.row.used_number}}</el-button>
                        </div>
                        <div v-else>{{scope.row.used_number}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="total_count" label="剩余数量" align="center"></el-table-column>

                <el-table-column width='150' prop="is_failure" label="状态" align="center">
                    <template slot-scope="scope">
                        <span> {{status_text[scope.row.coupon_status]}} </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="290" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.coupon_status != 1" type="text" @click="openPop(scope.$index,1)">数据</el-button>
                        <el-button v-if="scope.row.coupon_status==1 || scope.row.coupon_status==2" type="text" @click="openPop(scope.$index,2)">推广码</el-button>
                        <el-button v-if="scope.row.coupon_status==1 || scope.row.coupon_status==2" type="text" @click="openPop(scope.$index,3)">编辑</el-button>
                        <el-button v-if="scope.row.coupon_status==3 || scope.row.coupon_status==4" type="text" @click="openPop(scope.$index,7)">查看</el-button>
                        <el-button type="text" @click="openPop(scope.$index,6)">复制</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div flex="box:last cross:center">
                <div style="visibility: hidden">
                    <el-button plain type="primary" size="small">批量操作1</el-button>
                    <el-button plain type="primary" size="small">批量操作2</el-button>
                </div>
                <el-col :span="24" class="toolbar">
                    <el-pagination v-if="pagination" style="float: right;" background @current-change="pageChange" layout="prev, pager, next" :page-count="pageCount">
                    </el-pagination>
                </el-col>
            </div>
        </div>
        <el-dialog title="效果数据" :visible.sync="dataPop" width="40%">
            <div class="data-pop-info" v-loading="dataPopLoading">
                <div class="data-pop-top data-pop-mode" flex>
                    <div class="data-price" flex="cross:center main:center">
                        <div v-if="coupon_info.type==2">
                            <span style="font-size: 14px;">￥</span>
                            <span style="font-size: 20px;">{{coupon_info.sub_price}}</span>
                        </div>
                        <div v-if="coupon_info.type==1">
                            <span style="font-size: 14px;"></span>
                            <span style="font-size: 20px;">{{coupon_info.discount}}折</span>
                        </div>
                        <div style="margin-top: 5px;font-size: 16px;color: #636363;">{{coupon_info.content}}</div>
                    </div>
                    <div class="data-info">
                        <div flex>
                            <div class="data-info-name">券名称：</div>
                            <div style="color: #4098F4;">{{coupon_info.name}}</div>
                        </div>
                        <div style="color: #636363;margin-top: 10px;">
                            <span class="data-info-name">使用时间：</span>
                            <span v-if="coupon_info.expire_type==2">{{coupon_info.use_time}}</span>
                            <span v-else-if="coupon_info.expire_type==1">领取后{{coupon_info.expire_day}}天过期</span>
                            <span v-else-if="coupon_info.expire_type==3">领取后{{coupon_info.effect_days}}天生效，有效期{{coupon_info.expire_day}}天</span>
                        </div>
                    </div>
                </div>
                <div class="data-pop-mode data-pop-detail" flex="wrap:wrap">
                    <div class="data-detail-mode">
                        <div class="data-detail-name">用券金额</div>
                        <div class="data-detail-num">{{user_coupons.total_payed_amount}}</div>
                    </div>
                    <div class="data-detail-mode">
                        <div class="data-detail-name">优惠总金额</div>
                        <div class="data-detail-num">{{user_coupons.total_discount_amount}}</div>
                    </div>
                    <div class="data-detail-mode">
                        <div class="data-detail-name">使用率</div>
                        <div class="data-detail-num">{{user_coupons.use_probability}}</div>
                    </div>
                    <div class="data-detail-mode">
                        <div class="data-detail-name">用券会员数</div>
                        <div class="data-detail-num">{{user_coupons.use_user_number}}</div>
                    </div>
                    <div class="data-detail-mode">
                        <div class="data-detail-name">支付订单数</div>
                        <div class="data-detail-num">{{user_coupons.use_order_number}}</div>
                    </div>
                    <div class="data-detail-mode">
                        <div class="data-detail-name">支付金额</div>
                        <div class="data-detail-num">{{user_coupons.total_use_coupon_payed_amount}}</div>
                    </div>
                </div>
                <div>
                    <div style="margin-bottom: 16px;">使用优惠券购买商品</div>
                    <el-table :data="good_statistics" style="width: 100%" stripe>
                        <el-table-column prop="good" label="商品" align="center">
                            <template slot-scope="scope">
                                <div size="small" class="flex-y-center">
                                    <com-image width='50px' height='50px' :src=scope.row.cover_pic style="border-radius: 50%"></com-image>
                                    <span style="padding-left: 10px;">{{scope.row.goods_name}}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="payed_number" label="付款件数" align="center"></el-table-column>
                        <el-table-column prop="buyed_user_number" label="付款人数" align="center"></el-table-column>
                    </el-table>
                </div>
                <div style="padding: 14px 0;">
                    <el-pagination v-if="dataPopPagination" :page-size="dataPopPagination.pageSize" style="float: right;" background @current-change="pageChangeDataPop" layout="prev, pager, next" :total="dataPopPagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </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>
    </el-card>
</div>
<script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                list: [],
                searchData: {
                    name: '',
                    type: 0,
                    status: 0,
                },
                pagination: null,
                dataPopPagination: null,
                page: 1,
                status_text: {
                    1: '未开始',
                    2: '领取中',
                    3: '已过期',
                    4: '已失效'
                },
                type_text: {
                    1: '折扣券',
                    2: '满减券'
                },
                dataPop: false, //数据弹窗
                dataPopLoading: false,
                user_coupons: {
                    total_payed_amount: 0,
                    total_discount_amount: 0,
                    use_probability: 0,
                    receive_user_number: 0,
                    use_order_number: 0,
                    total_use_coupon_payed_amount: 0,
                    use_user_number: 0,
                },
                coupon_info: {
                    name: '优惠券',
                    content: '满100减10元',
                    use_time: '--',
                },
                sharePop: false, //分享弹窗
                shareData: {
                    url: "", //链接
                    img: "", //二维码
                    poster: '', // 海报图片
                    poster_filename: '', // 海报图片文件名
                    qrcode_filename: '', // 二维码文件名
                },
                good_statistics: [],
                list_index: 0, // 当前选中的列表索引，用于弹窗
                posterLoading: false,
                posterArr: {}, //生成的海报列表
                posterSrc: "",
                mall_info: {},
                pageSize: 10,
                pageCount: 1,
                delIds:[],
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            //搜索
            search() {
                this.page = 1;
                this.loadData();
            },
            clereSearch() {
                this.searchData.name = '';
                this.searchData.type = 0;
                this.searchData.status = 0;
                this.search();
            },
            handleCenter: function(row, column) {
                let para = Object.assign({
                    id: column.id
                }, {
                    is_join: column.is_join
                });
                request({
                    params: {
                        r: 'mall/coupon/edit-center'
                    },
                    data: para,
                    method: 'post'
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message({
                            message: e.data.msg,
                            type: 'success'
                        });

                    } else {
                        this.$alert(e.data.msg, '提示', {
                            confirmButtonText: '确定'
                        })
                    }
                }).catch(e => {});

            },
            //带着ID前往编辑页面
            handleEdit: function(row, column) {
                navigateTo({
                    r: 'mall/coupon/edit',
                    id: column.id
                });
            },

            // 优惠券发放页面
            handleSend: function(row, column) {
                navigateTo({
                    r: 'mall/coupon/send',
                    id: column.id
                });
            },

            //分页
            pageChange(page) {
                this.page = page;
                this.loadData();
            },
            pageChangeDataPop(page) {
                this.dataPopPage = page;
                this.openPop(this.list_index, 1);
            },

            //删除
            batchDel(){
                if(this.delIds.length<=0){
                    this.$message.error('请选中要删除的数据');
                    return false;
                }
                var ids = this.delIds
                this.$confirm('确认删除所选中的记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    let para = {
                        id: ids
                    };
                    request({
                        params: {
                            r: 'store/client/coupon/del'
                        },
                        data: para,
                        method: 'post'
                    }).then(e => {
                        this.loading = false;
                        if (e.data.code === 0) {
                            const h = this.$createElement;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            setTimeout(() => {
                                navigateTo({ r: 'store/client/coupon/index'});
                            }, 300);
                        } else {
                            this.$alert(e.data.msg, '提示', {
                                confirmButtonText: '确定'
                            })
                        }
                    }).catch(e => {
                        this.$alert(e.data.msg, '提示', {
                            confirmButtonText: '确定'
                        })
                    });
                })
            },
            // 根据参数获取请求信息
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'store/client/coupon/index',
                        page: this.page,
                        page_size: this.pageSize,
                        name: this.searchData.name,
                        type: this.searchData.type,
                        status: this.searchData.status,
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        this.mall_info = e.data.data.mall_info;
                        this.pagination = e.data.data.pagination;
                        this.pageSize = e.data.data.pageSize;
                        this.pageCount = e.data.data.page_count;
                        // console.log(this.pagination.totalCount);
                    } else {
                        this.listLoading = false;
                        this.$message({
                            message: e.data.msg,
                            type: 'error'
                        });
                    }
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            // 打开数据弹窗
            async openPop(index, type) {
                this.list_index = index;
                if (type == 1) { //查看数据
                    let self = this
                    self.dataPop = true;
                    self.dataPopLoading = true;
                    request({
                        params: {
                            r: 'store/client/coupon/coupon-statistics',
                            coupon_id: this.list[index].id,
                            page: this.dataPopPage
                        },
                        method: 'get'
                    }).then(e => {
                        this.dataPopLoading = false;
                        if (e.data.code == 0) {
                            if (e.data.data.user_coupons) {
                                self.user_coupons = e.data.data.user_coupons;
                            }
                            if (e.data.data.good_statistics.length) {
                                self.good_statistics = e.data.data.good_statistics;
                            }
                            if (e.data.data.coupon_info) {
                                self.coupon_info = e.data.data.coupon_info;
                            }
                            self.dataPopPagination = e.data.data.good_statistics.pagination;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        this.dataPopLoading = false;
                        console.log(e);
                        this.$message.error('网络错误');
                    });

                } else if (type == 2) { //推广

                    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 = this.list[index].poster_url;
                    this.shareData.poster_filename = this.list[index].poster_filename;
                    this.shareData.qrcode_filename = this.list[index].qrcode_filename;
                    this.sharePop = true;
                } else if (type == 3) { //编辑
                    navigateTo({
                        r: 'store/client/coupon/edit',
                        coupon_id: this.list[index].id
                    });
                } else if (type == 4) { //失效
                    // this.$confirm('活动失效后，无法继续编辑优惠券内容；买家无法再领取该优惠券，但之前已领取的优惠券，在有效期内仍可继续使用。', '失效', {
                    //     confirmButtonText: '确定',
                    //     cancelButtonText: '取消',
                    // }).then(() => {
                    //     this.listLoading = true;
                    //     request({
                    //         params: {
                    //             r: 'coupon/coupon/failure',
                    //             coupon_id: this.list[index].id,
                    //         },
                    //         method: 'get'
                    //     }).then(e => {
                    //         this.listLoading = false;
                    //         if (e.data.code == 0) {
                    //             this.$message.success(e.data.msg);
                    //             this.list[index].coupon_status = 4;
                    //         } else {
                    //             this.$message.error(e.data.msg);
                    //         }
                    //     }).catch(e => {
                    //         this.listLoading = false;
                    //         console.log(e);
                    //         this.$message.error('网络错误');
                    //     });
                    // }).catch(() => { //点击取消
                    //
                    // });
                } else if (type == 5) { //删除
                    // this.$confirm('删除后将不可恢复，确定删除？', '删除', {
                    //     confirmButtonText: '确定',
                    //     cancelButtonText: '取消',
                    // }).then(() => {
                    //     let self = this;
                    //     self.loading = true;
                    //     request({
                    //         params: {
                    //             r: 'coupon/coupon/delete',
                    //         },
                    //         data: {
                    //             coupon_id: self.list[index].id
                    //         },
                    //         method: 'post'
                    //     }).then(e => {
                    //         this.loading = false;
                    //         if (e.data.code == 0) {
                    //             self.$message.success(e.data.msg);
                    //             self.list.splice(index, 1);
                    //         } else {
                    //             self.$message.error(e.data.msg)
                    //         }
                    //     }).catch(e => {
                    //         this.loading = false;
                    //         console.log(e);
                    //         this.$message.error('网络错误');
                    //     });
                    // }).catch(() => { //点击取消
                    //
                    // });
                } else if (type == 6) { // 复制
                    navigateTo({
                        r: 'store/client/coupon/edit',
                        coupon_id: this.list[index].id,
                        is_copy: true,
                    });
                } else if (type == 7) { // 查看
                    navigateTo({
                        r: 'store/client/coupon/edit',
                        coupon_id: this.list[index].id,
                        status: this.list[index].status_int
                    });
                }
            },
            // 图片下载
            downloadShareImg(type) {
                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);
                }))
            },
            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('复制失败，请手动复制');
                });
            },
            // 跳转 已使用/已领取页面
            couponDetail(status, coupon_id) {
                let url = 'store/client/coupon/user-coupon-detail';
                navigateTo({
                    r: url,
                    status: status,
                    coupon_id: coupon_id,
                });
            },
            // 生成二维码
            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('生成失败');
                }
            },
            scFormTab(sel){
                var ids =[];
                sel.forEach(function (item,index,sel){
                    ids.push(item.id);
                });
                this.delIds = ids;
            },
        }
    })
</script>