qimall/addons/Coupon/backend/views/default/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:'coupon/default/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>
                <!-- 二维码 -->
                <!-- <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>
                <div id="mini_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>
                </div>
                </div>
            </div>
            <el-table v-loading="loading" stripe :data="list" style="width: 100%;margin-bottom: 15px">
                <el-table-column width='250' prop="name" label="优惠券名称" align="center"></el-table-column>
                <el-table-column width='150' prop="type" label="优惠券类型">
                    <template slot-scope="scope">
                        <div>
                            {{type_text[scope.row.type] ?? '未知优惠券类型'}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width='250' prop="discount" label="优惠内容">
                    <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" width="150">
                    <template slot-scope="scope">
                        <div v-if="total_count_id != scope.row.id">
                            <el-tooltip class="item" effect="dark" content="剩余数量" placement="top">
                                <span>{{scope.row.total_count}}</span>
                            </el-tooltip>
                            <el-button class="edit-sort" type="text" @click="edit(scope.row,'total_count')" v-if="scope.row.status == 1 && (scope.row.coupon_status == 1 || scope.row.coupon_status == 2)">
                                <img src="resources/img/mall/order/edit.png" alt="">
                            </el-button>
                        </div>
                        <div style="display: flex;align-items: center" v-else>
                            <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="total_count" autocomplete="off"></el-input>
                            <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('total_count')"></el-button>
                            <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('total_count',scope.row)">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="store" label="门店专用" align="center">
                    <template slot-scope="scope" v-if="scope.row.store_id!=''||scope.row.store_id!=0">
                        <el-button type="text" @click="showStore(scope.row)">门店列表</el-button>
                    </template>

                </el-table-column>
                <el-table-column prop="store" label="商户专用" align="center">
                    <template slot-scope="scope" v-if="scope.row.mch_id!=''||scope.row.mch_id!=0">
                        <el-button type="text" @click="showMch(scope.row)">商户列表</el-button>
                    </template>

                </el-table-column>

                <el-table-column width='150' prop="is_failure" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0 && scope.row.total_count > 0"> 已禁用 </span>
                        <span v-if="scope.row.status == 0 && scope.row.total_count == 0"> 已领完 </span>
                        <span v-if="scope.row.status == 1"> {{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) && scope.row.is_received == false" 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 v-if="scope.row.coupon_status==1 || scope.row.coupon_status==2" type="text" @click="openPop(scope.$index,4)">关闭</el-button>
                        <el-button v-if="scope.row.status == 1 && (scope.row.coupon_status==3 || scope.row.coupon_status==4)" type="text" @click="openPop(scope.$index,5)">删除</el-button>
                        <el-button type="text" @click="openPop(scope.$index,6)">复制</el-button>
                        <!-- <el-button class="set-el-button" size="mini" type="text" circle
                                   @click="handleSend(scope.$index, scope.row,list.id)" v-if="scope.row.is_failure == 0">
                            <el-tooltip class="item" effect="dark" content="发放优惠券" placement="top">
                                    <img src="statics/img/mall/send.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <el-button class="set-el-button" size="mini" type="text" circle
                                   @click="handleEdit(scope.$index, scope.row,list.id)">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <img src="statics/img/mall/edit.png" alt="">
                        </el-tooltip>
                        </el-button>
                        <el-button class="set-el-button" size="mini" type="text" circle
                                   @click="handleDel(scope.$index, scope.row,list.id)">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img src="statics/img/mall/del.png" alt="">
                        </el-tooltip>
                        </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%">
            <el-tabs :tab-position="tabPosition">
                <el-tab-pane label="H5" class="flex-x-centet">
                    <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>
                        <!-- downloadShareImg('poster') -->
                        <el-button flex type="text" @click="getPoster">下载海报</el-button>
                        <el-button flex type="text" @click="downloadShareImg('qrcode')">下载二维码</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="微信小程序" class="flex-x-centet">
<!--                    <div style="width: 180px; height: 180px;background: #F2F2F2;margin-right: 12px;" flex="main:center cross:center">-->
<!--                        <el-image id="code-img" style="width: 144px; height: 144px;" :src="applet_code"></el-image>-->
<!--                    </div>-->
<!--                    <el-button flex type="text" @click="downloadShareImg('mini_qrcode')">下载二维码</el-button>-->
                    <div class="tips-text" style="line-height: 24px;color: red;padding-left: 45px">
                        建议新增优惠券后5分钟后进行海报操作
                    </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="applet_code"></el-image>
                        </div>
                        <!-- downloadShareImg('poster') -->
                        <el-button flex type="text" @click="getMiniPoster">下载海报</el-button>
                        <el-button flex type="text" @click="downloadShareImg('mini_qrcode')">下载二维码</el-button>
                    </div>
                </el-tab-pane>
        </el-dialog>

        <el-dialog v-loading="posterLoading" element-loading-text="门店列表" :title="couponName" :visible.sync="store_list_show" width="30%">
            <el-table :data="storeList" style="width: 100%">
                <el-table-column prop="store_name" label="店名" width="180"></el-table-column>
                <el-table-column prop="shop_owner" label="店长"></el-table-column>
                <el-table-column prop="shop_mobile" label="手机" width="180"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog v-loading="posterLoading" element-loading-text="商户列表" :title="couponName" :visible.sync="mch_list_show" width="30%">
            <el-table :data="mchList" style="width: 100%">
                <el-table-column prop="store_name" label="商户名" width="180"></el-table-column>
                <el-table-column prop="shop_owner" label="商户主"></el-table-column>
                <el-table-column prop="shop_mobile" label="手机" width="180"></el-table-column>
            </el-table>
        </el-dialog>
    </el-card>
</div>
<!-- <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> -->
<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: '满减券',
                    4: '兑换券'
                },
                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,
                store_list_show: false, //门店列表弹窗
                mch_list_show: false, //商户列表弹窗
                storeList: [],
                mchList: [],
                couponName:'',
                total_count: 0,
                total_count_id: 0,
                applet_code:"",
                tabPosition:'left',
            };
        },
        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);
            },

            //删除
            handleDel: function(row, column) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    let para = {
                        id: column.id
                    };
                    request({
                        params: {
                            r: 'mall/coupon/destroy'
                        },
                        data: para,
                        method: 'post'
                    }).then(e => {
                        this.loading = false;
                        if (e.data.code === 0) {
                            const h = this.$createElement;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            setTimeout(() => {
                                this.loadData()
                            }, 300);
                        } else {
                            this.$alert(e.data.msg, '提示', {
                                confirmButtonText: '确定'
                            })
                        }
                    }).catch(e => {
                        this.$alert(e.data.msg, '提示', {
                            confirmButtonText: '确定'
                        })
                    });
                })
            },
            // 根据参数获取请求信息
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'coupon/default/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) {
                // console.info(index,type);
                this.list_index = index;
                if (type == 1) { //查看数据
                    let self = this
                    self.dataPop = true;
                    self.dataPopLoading = true;
                    request({
                        params: {
                            r: 'coupon/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;
                            } else {
                                self.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;
                    if(this.list[index].applet_code == ''){
                        let store_id = 0;
                        if(this.list[index].store_id){
                            store_id = 1;
                        }
                        request({
                            params: {
                                r: 'coupon/coupon/show-mini-promotion-code',
                            },
                            method: 'post',
                            data:  {
                                id: this.list[index].id,
                                store_id: store_id
                            },
                        }).then(e => {
                            if (e.data.code == 0) {
                                this.applet_code = e.data.data.applet_url;
                            } else {
                            }
                        }).catch(e => {
                            console.log(e);
                        });
                    } else {
                        this.applet_code = this.list[index].applet_code;
                    }

                    // this.applet_code = this.convertUrlToBase64(this.applet_code);
                    this.applet_code = await this.convertUrlToBase64(this.applet_code);

                    // this.applet_code = this.imageBase64;
                    // console.log('this.applet_code', this.applet_code);

                    if (this.applet_code) {
                        let qrcodeInfo = document.getElementById("qrcode-info");
                        document.getElementById("mini_qrcode").remove(); //删除生成的二维码
                        let addCodeDom = document.createElement("div")
                        addCodeDom.setAttribute("id", "mini_qrcode");
                        addCodeDom.setAttribute("style", "width:300px; height:300px;");
                        qrcodeInfo.appendChild(addCodeDom) //添加标签

                        let qrMiniCodeDom = document.getElementById("mini_qrcode")
                        var qrcode = new QRCode(qrMiniCodeDom, {
                            width: 300,
                            height: 300
                        });
                        let src = "";
                        src = qrMiniCodeDom.getElementsByTagName("img")[0].src;
                        const imgElement = qrMiniCodeDom.getElementsByTagName("img")[0];
                        if (imgElement) {
                            imgElement.src = this.applet_code;
                        }

                    }
                    this.sharePop = true;
                } else if (type == 3) { //编辑
                    navigateTo({
                        r: 'coupon/default/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) { //删除
                    // 删除优惠之前需要判断是否有正在使用的优惠券
                    request({
                        params: {
                            r: 'coupon/default/is-coupon',
                            id: this.list[index].id
                        },
                        method: 'get'
                    }).then((e) => {
                        if (e.data.code == 0) {
                            if (e.data.data.count > 0) {
                                this.$confirm('当前优惠券活动，仍然存在正常使用的优惠券，如若要删除该活动 请先将所有已领取的优惠券操作失效!', '警告', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                }).catch(() => { //点击取消
                                });
                                return false;
                            }
                            // 如果条件满足就删除优惠券
                            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 {
                            this.$message.error(e.data.msg);
                        }
                    })
                } else if (type == 6) { // 复制
                    navigateTo({
                        r: 'coupon/default/edit',
                        coupon_id: this.list[index].id,
                        is_copy: true,
                    });
                } else if (type == 7) { // 查看
                    navigateTo({
                        r: 'coupon/default/edit',
                        coupon_id: this.list[index].id,
                        status: this.list[index].status_int
                    });
                }
            },

            // 图片下载
            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('mini_qrcode' == type) {
                    img_url = this.applet_code;
                } 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 = 'coupon/user-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('生成失败');
                }
            },
            getMiniPoster() {
                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("mini_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('生成失败,请尝试刷新页面再试');
                }
            },
            async convertUrlToBase64(url) {
                try {
                    // 1. 添加时间戳避免缓存 ‌:ml-citation{ref="1" data="citationList"}
                    const timestamp = Date.now();
                    const finalUrl = url.includes('?')
                        ? `${url}&t=${timestamp}`
                        : `${url}?t=${timestamp}`;

                    // 2. 通过 fetch 获取图片数据 ‌:ml-citation{ref="1,2" data="citationList"}
                    const response = await fetch(finalUrl, {
                        mode: 'cors'  // 声明跨域请求 ‌:ml-citation{ref="1,3" data="citationList"}
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP错误: ${response.status}`);
                    }

                    // 3. 转换为 Blob 并读取为 Base64 ‌:ml-citation{ref="1,5" data="citationList"}
                    const blob = await response.blob();
                    return await new Promise((resolve, reject) => {
                        const reader = new FileReader();
                        reader.onloadend = () => resolve(reader.result);
                        reader.onerror = error => reject(error);
                        reader.readAsDataURL(blob);
                    });

                } catch (err) {
                    // 4. 处理跨域等错误 ‌:ml-citation{ref="1,3" data="citationList"}
                    console.error('转换失败:', err);
                    if (err.message.includes('CORS')) {
                        this.$message.error('跨域错误: 请检查服务器CORS配置');
                    }
                    throw err;
                }
            },
            async showStore(row, type) {
                this.store_list_show = true;
                this.couponName = row.name;
                request({
                    params: {
                        r: 'coupon/default/get-store-list'
                    },
                    data: {
                        store_id: row.store_id
                    },
                    method: 'post'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        console.log(e.data.data);
                        this.storeList = e.data.data;
                    } else {
                    }
                })
            },
            async showMch(row, type) {
                this.mch_list_show = true;
                this.couponName = row.name;
                request({
                    params: {
                        r: 'coupon/default/get-mch-list'
                    },
                    data: {
                        mch_id: row.mch_id
                    },
                    method: 'post'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.mchList = e.data.data;
                    } else {
                    }
                })
            },

            edit(row, type) {
                switch (type) {
                    case 'total_count':
                        this.total_count = row.total_count;
                        this.total_count_id = row.id;
                        break;
                }
            },
            cancelEdit(type) {
                switch (type) {
                    case 'total_count':
                        this.total_count = 0;
                        this.total_count_id = 0;
                        break;
                }
            },
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'total_count':
                        data.total_count = this.total_count;
                        console.log('修改数量===》', data);

                        if (this.total_count < 1) {
                            this.$message.error('优惠券发放数量不能小于1');
                            return false;
                        }

                        param = {
                            id: id,
                            total_count: this.total_count,
                        };
                        this.do_total_count(param);
                        break;
                }
                this.cancelEdit(type);
            },

            do_total_count(params) {
                let self = this;
                request({
                    params: {
                        r: 'coupon/default/edit-coupon-total-count',
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.loadData();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
        }
    })
</script>