qimall/addons/BusinessCard/backend/views/material/index.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 style="float: right;margin-top: -5px">
                <el-button type="primary"
                           @click="$navigate({r: 'business-card/material/edit'})"
                           size="small">新增素材
                </el-button>
            </div>
        </div>

        <div class="table-body">

            <div class="search-box">
                <!-- 搜索 -->
                <el-form :inline="true" :model="searchForm" size="small" class="demo-form-inline">
                    <el-form-item label="素材ID">
                        <el-input placeholder="请输入素材ID" v-model="searchForm.id"></el-input>
                    </el-form-item>
                    <el-form-item label="素材标题">
                        <el-input placeholder="请输入素材标题" v-model="searchForm.title"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="创建人">-->
<!--                        <el-input placeholder="请输入昵称/手机号" v-model="searchForm.nickname"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="创建人ID">-->
<!--                        <el-input placeholder="请输入创建人会员ID" v-model="searchForm.user_id"></el-input>-->
<!--                    </el-form-item>-->

                    <el-form-item label="素材格式">
                        <el-select v-model="searchForm.ext_type" placeholder="请选择素材格式">
                            <el-option v-for="(name, index) in material_ext_type" :label="name" :value="index" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="素材分类">
                        <el-select v-model="searchForm.cate_id" placeholder="请选择素材分类">
                            <el-option v-for="(item, index) in cateList" :label="item.name" :value="item.id" :key="index"></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="handle('search')">搜索</el-button>
                        <el-button type="danger" @click="resetSearch" v-if="show_clear_search_btn">清除条件</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="list" border v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column prop="id" label="素材ID" width="100" align="center"></el-table-column>
                <el-table-column prop="title" label="素材标题" align="left"></el-table-column>
                <el-table-column prop="ext_type_name" label="素材格式" width="100" align="center"></el-table-column>
                <el-table-column prop="cate.name" label="分类" align="left"></el-table-column>
<!--                <el-table-column align="left" label="创建人"  :show-overflow-tooltip="true">-->
<!--                    <template slot-scope="scope" v-if="scope.row.user">-->
<!--                        <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>（ ID:{{scope.row.user.id}}）{{scope.row.user.nickname}}</div>-->
<!--                                <div >{{scope.row.user.mobile}}</div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                        label="是否展示"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <el-switch
                                   @change="((val)=>{switchFun(val, scope.row.id, 'is_show')})"
                                   v-model="scope.row.is_show"
                                   :active-value="1"
                                   :inactive-value="0"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" width="160px">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" circle @click="$navigate({r: 'business-card/material/edit', id: 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 v-loading="QRcodeLoading" 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="handle('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;margin-left:5px" flex="main:center cross:center">
                    <el-image style="width: 144px; height: 144px;" :src="shareData.img"></el-image>
                </div>
            </div>
        </el-dialog>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            page: 1,
            keyword: '',
            loading: false,
            list: [],
            position: [],
            pagination: null,
            QRcodeLoading: false,
            sharePop: false,
            web_url:'',
            mall_sign:'',
            shareData: {
                url: '',
                img: ''
            },
            material_ext_type: [],
            searchForm: {
                id: null,
                title: null,
                nickname: null,
                user_id: null,
                ext_type: null,
                cate_id: null,
            },
            cateList: [],
        },
        mounted() {
            this.send('getCate');
            this.send('getData');
        },
        computed: {
            show_clear_search_btn: function() {
                return this.searchForm.id != null ||
                    this.searchForm.title != null ||
                    this.searchForm.user_id != null ||
                    this.searchForm.ext_type != null ||
                    this.searchForm.cate_id != null ||
                    this.searchForm.nickname != null;
            },
        },
        methods: {
            resetSearch() {
                this.searchForm = {
                    id: null,
                    title: null,
                    nickname: null,
                    user_id: null,
                    ext_type: null,
                    cate_id: null,
                };
                this.page = 1;
                this.send('getData');
            },
            async handle(type, param1 = null, param2 = null) {
                switch (type) {
                    case 'pageChange':
                        this.page = param1;
                        this.send('getData');
                        break;
                    case 'search':
                        this.page = 1;
                        this.send('getData');
                        break;
                    case 'delete':
                        this.$confirm('删除该卡片, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(e=>{


                            let param = {id: param1.id, status: -1};
                            this.handleReq('business-card/material/handle',param);

                        }).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+'&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;
                }
            },
            test(){
                let self = this;
                self.loading = true;
                let basic_params = {
                    page: self.page,
                };
                params = Object.assign(basic_params, this.searchForm);
                request({
                    params: {
                        r: 'business-card/card/test'
                    },
                    method: 'post',
                    data: params
                }).then(e => {

                }).catch(e => {
                    self.loading = false;
                });
            },
            switchFun(val, id, field) {

                if (field == 'is_show') {
                    let param = {id: id, is_show: val};
                    this.handleReq('business-card/material/handle',param);
                }


            },
            send(type, param1 = null) {
                switch(type) {
                    case 'getCate':
                        request({
                            params: {
                                r: 'business-card/material/cate-list'
                            }
                        }).then(e=>{
                            if (e.data.code == 0) {
                                this.cateList = e.data.data;
                            }
                        }).catch(e=>{

                        })
                        break;
                    case 'getData':
                        this.loading = true;
                        let basic_params = {
                            r: 'business-card/material/index',
                            page: this.page
                        };
                        let params_data = Object.assign(basic_params, this.searchForm);
                        console.log(params_data);
                        request({
                            params: params_data
                        }).then(e=>{
                            this.loading = false;
                            if (e.data.code == 0) {
                                this.list = e.data.data.list;
                                this.material_ext_type = e.data.data.material_ext_type;
                                let that = this;
                                this.list.map(function (item, index) {
                                    let ext = item.ext_type;
                                    item.ext_type_name = '';
                                    item.ext_type_name = that.material_ext_type[ext] ? that.material_ext_type[ext] : '';
                                    return item;
                                });
                                // console.log(this.list)
                                this.web_url = e.data.data.web_url;
                                this.mall_sign = e.data.data.mall_sign;
                                this.pagination = e.data.data.pagination;
                            } else{
                                this.$message.error(e.data.msg);
                            }

                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg || '未知错误');
                        })
                        break;


                }
            },
            handleReq(url, params, callback = null) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.send('getData');
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
                if(callback) return e.data;
            },
        }
    })
</script>

<style>



</style>