qimall/addons/BusinessCard/backend/views/card/index.php

<?php

?>
<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>
        </div>

        <el-row :gutter="10" style="margin-bottom: 10px">
            <el-col :span="8">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <strong>名片总数量</strong>
                    </div>
                    <div>
                        <strong style="font-size: 18px">{{pagination.totalCount}}</strong>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <strong>分享总次数</strong>
                    </div>
                    <div>
                        <strong style="font-size: 18px">{{sum.share}}</strong>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <strong>访问总次数</strong>
                    </div>
                    <div>
                        <strong style="font-size: 18px">{{sum.view}}</strong>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="table-body">
            <div id="qrcode-info" style="position: fixed;top: 10000000000px;">
                <!-- 二维码 -->
                <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
            </div>
            <div class="input-item">
                <el-input @keyup.enter.native="handle('search')" size="small" placeholder="请输入用户ID/昵称/手机号" v-model="keyword"
                          clearable @clear="handle('search')">
                    <el-button slot="append" icon="el-icon-search" @click="handle('search')"></el-button>
                </el-input>
            </div>
            <el-table :data="list" border v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column prop="user_id" label="会员ID" width="100" align="center"></el-table-column>
                <el-table-column align="left" label="用户信息"  :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div flex="cross:center">
                            <div style="margin-right: 10px;">
                                <el-image 
                                    style="width: 50px; height: 50px;border-radius: 5px;" 
                                    :src="scope.row.user.avatar_url?scope.row.user.avatar_url:'/resources/img/common/default-avatar.png'">
                                </el-image>
                            </div>
                            <div class="table-info-text">
                                <div>{{scope.row.user.nickname}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.nickname}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="手机号码" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.mobile}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="角色" align="center">
                    <template slot-scope="scope">
                        <div>{{roles[scope.row.cardUser.role_type] ? roles[scope.row.cardUser.role_type] : '无角色'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="user_type" label="职位" align="center">
                    <template slot-scope="scope">
                        <div>{{position[scope.row.position_id] ? position[scope.row.position_id] : '无职位'}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="user_type" label="分享次数" align="center" width="100">
                        <template slot-scope="scope">
                            <div>{{scope.row.share_num}}</div>
                        </template>
                </el-table-column>
                <el-table-column prop="user_type" label="访问次数" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{scope.row.browse_num}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="user_type" label="点赞次数" align="center" width="100">
                    <template slot-scope="scope">
                        <div>{{scope.row.like_num}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="user_type" label="名片码" align="center">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" v-if="scope.row.qrcode" content="点击查看/下载二维码" placement="top">
                            <el-image @click="onDownloadQrcode(scope.row)" style="width: 80px; height: 80px;" :src="scope.row.qrcode"></el-image>
                        </el-tooltip>
                        <div v-else>
                            生成中...
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">          
                        <el-button type="text" style="display:none;" size="mini" circle @click.native="handle('getQrcode', scope.row)">名片码</el-button>
                        <el-button type="text" size="mini" circle @click.native="handle('info', scope.row.id)">查看</el-button>
                        <el-button @click="handle('delete', scope.row, scope.$index)" type="text" circle size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div flex="box:last cross:center">
                <div></div>
                <div>
                <el-pagination v-if="pagination" :page-size="pagination.defaultPageSize"
                                   style="display: inline-block;float: right;" background @current-change="handle('pageChange', $event)"
                                   layout="prev, pager, next" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog title="分享" :visible.sync="showQrcodeDialog" :append-to-body="true" width="30%">
            <div>
                <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 style="padding-top: 10px" 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 id="code-img" style="width: 144px; height: 144px;" :src="shareData.qrcode"></el-image>
                </div>
                <el-button flex type="text" @click="downloadShareImg()">下载二维码</el-button>
            </div>
        </el-dialog>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            keyword: '',
            loading: false,
            list: [],
            position: [],
            pagination: {
                totalCount: 0
            },
            QRcodeLoading: false,
            sharePop: false,
            web_url:'',
            mall_sign:'',
            shareData: {
                url: '',
                qrcode: ''
            },
            sum: {
                share: 0,
                view: 0
            },
            roles: {},
            store_collection_url: '',
            showQrcodeDialog: false
        },
        mounted() {
            this.send('getPosition');
            this.send('getData');
        },
        methods: {
            async handle(type, param1 = null, param2 = null) {
                switch (type) {
                    case 'pageChange':
                        this.page = param1;
                        this.send('getData');
                        break;
                    case 'search':
                        this.send('getData');
                        break;
                    case 'delete':
                        this.$confirm('删除该卡片, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(e=>{
                            this.loading = true;
                            request({
                                params: {
                                    r: 'business-card/card/delete',
                                },
                                method: 'post',
                                data: {
                                    id: param1.id,
                                }
                            }).then(e=>{
                                this.loading = false;
                                if (e.data.code === 0) {
                                    this.$message.success(e.data.msg);
                                    this.list.splice(param2, 1);
                                } else {
                                    this.$message.error(e.data.msg);
                                }
                            }).catch(e=>{
                                this.loading = false;
                                this.$message.error(e.data.msg);
                            })
                        }).catch(() => {
                            this.$message.info('已取消删除')
                        });
                        break;
                    case 'getQrcode':
                        this.QRcodeLoading = true;
                        this.sharePop = true;
                        let url = this.web_url+"/#/plugins/Card/index?card_id="+param1.id+'&mall_sign='+this.mall_sign+'&sign='+this.mall_sign+'&pid='+param1.user_id+'&share_id='+param1.user_id+'&share_type=1';
                        this.shareData.img = await this.handle('createQrcode', url);
                        this.shareData.url = url;      
                        this.QRcodeLoading = false;
                        break;
                    case 'createQrcode':
                        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(param1);
                        // 获取二维码生成的图片信息
                        return new Promise((req, rej) => {
                            setTimeout(() => {
                                src = qrCodeDom.getElementsByTagName("img")[0].src;
                                req(src)
                            }, 200);
                        })
                        break;
                    case 'copyLink':
                            if (!this.shareData.url) {
                                alert('请输入要复制的内容')
                            } else {
                                 var copyurl = this.shareData.url;
                                // createElement() 方法通过指定名称创建一个元素
                                var copyInput = document.createElement('input')
                                copyInput.setAttribute('value', copyurl)
                                document.body.appendChild(copyInput)
                                copyInput.select()

                                try {
                                    var copyed = document.execCommand('copy')
                                    if (copyed) {
                                        document.body.removeChild(copyInput)
                                        this.$message.success('复制成功')
                                    }
                                } catch {
                                    this.$message.success('复制失败，请检查浏览器兼容')
                                }
                            }
                        break;
                    case 'info':
                        navigateTo({
                            r: 'business-card/card/card-info',
                            id: param1
                        })
                        break;
                }
            },
            async batchGenQrcode(item, index) {
                let url = `${this.web_url}/#/plugins2/BusinessCard/index?card_id=${item.id}&mall_sign=${this.mall_sign}&sign=${this.mall_sign}&pid=${item.user_id}&share_id=${item.user_id}&share_type=1`
                // let url = this.web_url+"/#/plugins/BusinessCard/index?card_id="+item.id+'&mall_sign='+this.mall_sign+'&pid='+item.user_id+'&share_id='+item.user_id+'&share_type=1';
                this.$set(this.list[index], 'qrcode', await this.handle('createQrcode', url))
                this.$set(this.list[index], 'h5_url', url)
                // this.shareData.img = await this.handle('createQrcode', url);
                // this.shareData.url = url;
            },
            showCollectionCode(url, fun) {
                this.store_collection_url = url;
                setTimeout(() => {
                    fun();
                }, 300)
            },
            downloadShareImg() {
                fetch(this.shareData.qrcode).then(res => res.blob().then(blob => {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    a.href = url;
                    a.download = "";
                    a.click();
                    window.URL.revokeObjectURL(url);
                }))
            },
            onDownloadQrcode(item) {
                this.shareData.url = item.h5_url
                this.shareData.qrcode = item.qrcode
                this.showQrcodeDialog = true
            },
            copyLink(str) {
                var clipboard = new ClipboardJS('.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('复制失败，请手动复制');
                });
            },
            send(type, param1 = null) {
                switch(type) {
                    case 'getPosition':
                        request({
                            params: {
                                r: 'business-card/card/get-position'
                            }
                        }).then(e=>{
                            if (e.data.code == 0) {
                                this.position = e.data.data;
                                console.log('this.position', this.position)
                            } 
                        }).catch(e=>{
                            
                        })
                        break;
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {
                                r: 'business-card/card/index',
                                keyword: this.keyword,
                                page: this.page
                            }
                        }).then(e=>{
                            if (e.data.code == 0) {
                                this.list = e.data.data.list;
                                this.web_url = e.data.data.web_url;
                                this.mall_sign = e.data.data.mall_sign;
                                if (this.list.length > 0) {
                                    for (let listKey in this.list) {
                                        this.batchGenQrcode(this.list[listKey], listKey)
                                    }
                                }
                                this.pagination = e.data.data.pagination;
                                this.sum = e.data.data.sum
                                this.roles = e.data.data.roles
                            } else{
                                this.$message.error(e.data.msg);
                            }
                            this.loading = false;
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            }
        }
    })
</script>

<style>
    .el-tabs__header {
        font-size: 16px;
    }

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

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

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .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;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .item-box{
        margin-right: 20px;
    }
    .item-box .label{
        margin-right: 8px;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }
    .el-table__footer-wrapper, .el-table__header-wrapper{
    }
    .el-table .warning-row {
        background: #F5F7FC;
    }

    .el-table .success-row {
        background: #ffffff;
    }
	.popoverClass{
		text-align: center;
		background: #FFFFFF;
		box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 5px;
	}
    .share-name {
        width: 90px;
        display: inline-block;
        margin-right: 18px;
        text-align: end;
    }
    .share-pop-model {
        margin-top: 20px;
    }
</style>