micro_vue/src/scrm_pages/weixinmp/components/ImageMaterialBox.vue

<template>
    <div id="image-material-box">
        <el-dialog title="选择图片" :visible.sync="ImageMaterialBoxVisible" width="900px" >
            <el-row>
                <el-col :span="24" style="text-align: right;" >
                    <el-upload
                        class="media-uploader"
                        :action="addMaterialUrl"
                        :show-file-list="false"
                        :with-credentials='true'
                        :on-success="handleMediaSuccess"
                        :before-upload="beforeMediaUpload"
                        >
                        <el-button type="primary" size="small" icon="el-icon-upload" >上传图片</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <div class="material-box">
                <div class="mateial-item" v-for="(media, index) in medias" :key="index" @click="selectThis(media.media_id, media.media_url)">
                    <div class="mateial-item-image" :class="selectId==media.media_id?'active':''">
                        <img :src="'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url='+media.media_url" alt="" srcset="">
                    </div>
                </div>
            </div>
            <el-row style="clear:both">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[20,50,100]"
                    :page-size="20"
                    :current-page="pageParams.page"
                    background
                    style="margin-top:20px;"
                    align="right"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="ImageMaterialBoxVisible = false">取消</el-button>
                <el-button
                type="primary"
                @click="submitSelect"
                >保 存
                </el-button>
            </div>
        </el-dialog>  
    </div>
</template>

<script>

import {GetMaterials} from "@/api/mpwechat/material";

export default {
    name:'imageMaterialBox',
    props:{
        currentMenu:{
            big_type:0,
            type:'',
            name:'',
            url:'',
            appid:'',
            pagepath:'',
            key:'',//key规则：V_[number]_click;VC_[number]_click
            message:'',
            sub_button:[],
            media_id:'',
            media_url:'',
        },
    },
    data(){
        return {
            addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
            ImageMaterialBoxVisible:false,
            medias:[],
            selectId:'',
            selectUrl:'',
            total:0,
            pageParams:{
                page:1,
                limit:20,
                media_type:'image',
            },
        }
    },
    methods:{
        open:function(){
            
            this.pageParams={
                page:1,
                limit:20,
                media_type:'image',
            },
            
            this.selectId='',
            this.selectUrl='',
            this.GetMaterials();
            this.ImageMaterialBoxVisible = true;
        },
        submitSelect:function(){
            if (this.selectId.length==0) {
                this.$message.error('未选择图片');
                return false;
            }
            this.currentMenu.media_id = this.selectId;
            this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' +  this.selectUrl;
            this.ImageMaterialBoxVisible = false;
        },
        selectThis(id, url) {
            this.selectId = id;
            this.selectUrl = url;
        },
        handleSizeChange(limit) {
            this.pageParams.limit = limit;
            this.GetMaterials();
        },
        handleCurrentChange(page) {
            this.pageParams.page = page;
            this.GetMaterials();
        },
        handleMediaSuccess:function(res, file) {
            if (res.state==1) {
                this.$message.success('上传成功');
                this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' + res.data.media.media_url;
                this.currentMenu.media_id =  res.data.media.media_id;
                this.pageParams.page = 1;
                
                this.selectId='',
                this.selectUrl='',
                this.GetMaterials();
            }else {
                this.$message.error(res.msg);
            }
        },
        beforeMediaUpload:function(file) {
            var allow = {"image/bmp":1,"image/png":1,"image/jpeg":1,"image/jpg":1,"image/gif":1};
            // const isJPG = file.type === 'image/jpeg';
            const isImg = file.type in allow;
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isImg) {
                this.$message.error('上传图片只能是 bmp/png/jpeg/jpg/gif 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isImg && isLt2M;
        },
        GetMaterials:function(){
            GetMaterials(this.pageParams).then(response=>{
                var res = response.data;
                if (res.state==1) {
                    this.medias = res.data.medias;
                    this.total = res.data.total;
                }
            }).catch(e=>{});
        }
    }
}
</script>

<style >
#image-material-box .mateial-item {
    float: left;
    margin: 6px;
}

#image-material-box  .mateial-item-image {
    width: 199px;
    height: 90px;
    position: relative;
    border: none;
    background: #dde1e4;
    color: #58a2ec;
    display: block;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    -webkit-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

#image-material-box  .mateial-item .active {
    border: 1px solid rgb(68, 181, 73);
}
#image-material-box  .mateial-item-image img {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>