hemall.terabimsoft.com.cn/plugins/picture-album/views/admin/tab.blade.php

@extends('layouts.base')
@section('title', '创建活动')
@section('content')
    <style>
        .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .el-button{margin-right:30px;}
        .attribute-label{display:inline-block;padding:20px 20px 20px 7%;}
        /* .el-textarea__inner{height:400px;margin:30px 5%;width:80%;} */
        /* 上传图片 */
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        /* .el-icon-circle-close{position:absolute;top:0;right:13%;color:#999;} */
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        .tip{color:#999;font-size:12px;}

        .add-tip{font-size:14px;font-weight:600;}
        .add-tip span{margin:0 15px;cursor:pointer;color:#409EFF}
    </style>

    <div id="app-add">
        <template>
            <el-form ref="form" :model="form" :rules="rules" v-loading="loading" label-width="15%">
                <el-tabs type="card" v-model="activeName" style="padding: 20px">
                    <el-tab-pane label="基础设置" name="base_set">@include('Yunshop\PictureAlbum::admin.base-set')</el-tab-pane>
                    <el-tab-pane label="分享设置" name="share_set">@include('Yunshop\PictureAlbum::admin.share-set')</el-tab-pane>
                </el-tabs>

                <el-form-item>
                    <a href="#">
                        <el-button type="success" @click="submitForm('form')">提交</el-button>
                    </a>
                    <a href="#">
                        <el-button @click="goBack()">返回列表</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </template>
         <!--弹框上传图片-->
        <el-dialog :visible.sync="centerDialogVisible" width="65%" center>
            <el-tabs v-model="activeName2" type="card">
                <el-tab-pane label="上传图片" name="first">
                <div
                    style="text-align: center"
                    class="submit_Img"
                    v-loading="submit_loading"
                >
                    <el-upload
                    class="avatar-uploader"
                    action="{{ yzWebFullUrl('plugin.picture-album.admin.controllers.activity.upload') }}"
                    accept="image/*"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                    :before-upload="beforeUpload"
                    >
                    <div class="avatar_box" v-if="uploadImg">
                        <img :src="uploadImg" class="avatar" />
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                </el-tab-pane>
                <el-tab-pane label="提取网络图片" name="second">
                <el-input
                    v-model="uploadImg"
                    placeholder="请输入网络图片地址"
                    style="width:90%"
                ></el-input>
                <!-- <el-button @click="transform(uploadImg)" v-loading="submit_loading">转换</el-button> -->
                </el-tab-pane>
                <el-tab-pane label="浏览图片" name="third">
                <div>
                    <el-radio-group v-model="radio1" size="medium" @change="chooseYear">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="2019">2019年</el-radio-button>
                    <el-radio-button label="2018">2018年</el-radio-button>
                    <el-radio-button label="2017">2017年</el-radio-button>
                    <el-radio-button label="2016">2016年</el-radio-button>
                    </el-radio-group>
                </div>

                <div style="margin-top: 10px;">
                    <el-radio-group v-model="radio2" size="small" @change="chooseMonth">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="1">1月</el-radio-button>
                    <el-radio-button label="2">2月</el-radio-button>
                    <el-radio-button label="3">3月</el-radio-button>
                    <el-radio-button label="4">4月</el-radio-button>
                    <el-radio-button label="5">5月</el-radio-button>
                    <el-radio-button label="6">6月</el-radio-button>
                    <el-radio-button label="7">7月</el-radio-button>
                    <el-radio-button label="8">8月</el-radio-button>
                    <el-radio-button label="9">9月</el-radio-button>
                    <el-radio-button label="10">10月</el-radio-button>
                    <el-radio-button label="11">11月</el-radio-button>
                    <el-radio-button label="12">12月</el-radio-button>
                    </el-radio-group>
                </div>

                <div id="upload-img" class="imgList" v-loading="submit_loading">
                    <div class="avatar-uploader-box" v-for="img in ImgList">
                    <img
                        @click="chooseTheImg(img.thumb_url)"
                        :src="img.thumb_url"
                        class="avatar"
                    />
                    <i
                        class="el-icon-circle-close"
                        @click="deleteImg(img.id)"
                        title="点击清除图片"
                    ></i>
                    </div>
                </div>

                <el-pagination
                    style="margin-top: 10px;text-align: right"
                    background
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :current-page.sync="current_page"
                    :total="total"
                    layout="prev, pager, next"
                >
                </el-pagination>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureImg">确 定 </el-button>
            </span>
        </el-dialog>
        <!--end-->
    </div>

    <script>
        var app = new Vue({
            el: '#app-add',
            delimiters: ['[[', ']]'],
            data() {
                let set = {!! $set ?: '{}' !!};
                let activity_id = {!! $id ?: '{}' !!};
                return {
                    //是否显示弹框
                    centerDialogVisible: false,
                    ImgList: [],
                    activeName2: "first",
                    uploadImg: "",
                    chooseImg: "",
                    radio1: "不限", //年
                    radio2: "不限", //月
                    loading : false,
                    pageSize: 0,
                    current_page: 0,
                    total: 0,
                    submit_loading:"",
                    form : {
                        'picture_name' : '',
                        'color' : '#409EFF',
                        'is_background' : 1,
                        'picture_peo' : 0,
                        'audio_url' : '',
                        'background_thumb' : '',
                        'code' : '',
                        'phone' : '',
                        'title' : '',
                        'describe' : '',
                        'share_picture' :'',
                        'created_at' : [new Date().getTime(), new Date().getTime() + 7 * 24 * 3600 * 1000],
                        'is_open' : 0,
                        ...set
                    },
                    goods : [],
                    good : set.goods_id ? '[GID:' + set.goods_id + '][商品名称:' + set.goods_title + ']' : '',
                    imageUrl : set.goods_thumb ? set.goods_thumb : '',
                    id : activity_id,
                    activeName : 'base_set',
                    rules: {
                        picture_name: [
                            { required: true, message: '请输入画册名称', trigger: 'blur' },
                        ],
                    },
                }
            },
            created(){
                this.currentChange(1);
            },
            methods:{
                addContent(name,index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words ="(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name,words)
                },

                insertInputTxt(ref,words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },
                loadGoods(query) {
                    console.log(query)
                    if (query !== '') {
                        this.loading = true;
                        this.$http.get("{!! yzWebUrl('plugin.picture-album.admin.controllers.activity.get-goods', ['keyword' => '']) !!}" + query).then(response => {
                            this.goods = response.data.data,
                            this.loading = false;
                    }, response => {
                            console.log(response);
                        });
                    } else {
                        this.goods = [];
                    }
                },
                getImgUrl(id) {
                    let good = this.goods.find(function (good) {
                        return good.id == id;
                    });
                    this.imageUrl = good.thumb;
                },
                chooseTheImg(img) {
                    this.form[this.chooseImg] = img;
                    this.centerDialogVisible = false;
                },
                chooseYear(year) {
                    this.currentChange(1);
                },
                chooseMonth(month) {
                    this.currentChange(1);
                },
                openUpload(str) {
                    this.chooseImg = str;
                    console.log(this.chooseImg)
                    this.uploadImg = "";
                    this.centerDialogVisible = true;
                },
                sureImg() {
                    this.form[this.chooseImg] = this.uploadImg;
                    this.centerDialogVisible = false;
                },
                uploadSuccess(res, file) {
                    if (res.result === 1) {
                        this.uploadImg = res.data.thumb_url;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                beforeUpload(file) {
                    this.submit_loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 4;
                    if (!isLt2M) {
                        this.$message.error("上传图片大小不能超过 4MB!");
                        this.submit_loading = false;
                    }
                    return isLt2M;
                },
                clearImg(str) {
                    this.form[str] = "";
                },
                deleteImg(id) {
                    this.submit_loading = true;
                    this.$http
                        .post("{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity.delLocalImg') !!}", { id: id })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("系统删除成功");
                            this.currentChange(1);
                            this.submit_loading = false;
                        } else {
                            this.$message.error("删除出错");
                            this.submit_loading = false;
                        }
                        })
                        .catch(err => {
                        console.error(err);
                        this.submit_loading = false;
                        });
                },
                
                currentChange(val) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity.getLocalList') !!}",{ page: val, year: this.radio1, month: this.radio2 })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.total = response.data.data.list.total;
                            this.ImgList = response.data.data.list.data;
                            this.current_page = response.data.data.list.current_page;
                            this.pageSize = response.data.data.list.per_page;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },
                // 转化网络地址
                transform(url) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity.fetch') !!}",{ url:url })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("转化成功！");
                            this.uploadImg = response.data.thumb_url
                        } else {
                            this.$message.error(response.data.msg);
                            this.uploadImg = "";
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },

                // 添加关键词
                addContent(name,index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words ="(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name,words)
                },

                insertInputTxt(ref,words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },

                // beforeUpload(file) {
                //     this.loading = true;
                //     const isLt2M = file.size / 1024 / 1024 < 2;
                //     if (!isLt2M) {
                //         this.$message.error('上传图片大小不能超过 2MB!');
                //         this.loading = false;
                //     }
                //     return isLt2M;
                // },
                // uploadMainSuccess (res, file){
                //     if (res.result == 1) {
                //         this.form.thumb = res.data.thumb;
                //         this.form.thumb_url = res.data.thumb_url;
                //         this.$message.success("上传成功！");
                //     } else {
                //         this.$message.error(res.msg);
                //     }
                //     this.loading = false;
                // },
                // uploadMainSuccess2 (res, file){
                //     if (res.result == 1) {
                //         this.form.background_thumb = res.data.thumb;
                //         this.form.background_thumb_url = res.data.thumb_url;
                //         this.$message.success("上传成功！");
                //     } else {
                //         this.$message.error(res.msg);
                //     }
                //     this.loading = false;
                // },
                // clearImg () {
                //     this.form.thumb = "";
                //     this.form.thumb_url = "";
                // },
                // clearImg2 () {
                //     this.form.background_thumb = "";
                //     this.form.background_thumb_url = "";
                // },
                goBack() {
                    history.back(-1);
                },
                submitForm(form) {
                        if(this.form.countdown_time){
                            this.form.countdown_time[0] = Math.round(this.form.countdown_time[0]/1000).valueOf();
                            this.form.countdown_time[1] = Math.round(this.form.countdown_time[1]/1000).valueOf();
                        }
                        delete(this.form.goods_thumb)
                        delete(this.form.goods_title)
                        delete(this.form.created_at)
                        delete(this.form.updated_at)
                        delete(this.form.has_one_good)
                        this.$refs[form].validate((valid) => {
                            if (valid) {
                                this.loading = true;
                                this.$http.post("{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity.add-activity') !!}",{'form':this.form, 'id':this.id}).then(response => {
                                    if (response.data.result) {
                                    this.$message({message: "操作成功",type: 'success'});
                                    window.location.href="{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity.index') !!}";
                                }
                            else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                }
                            },response => {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    this.loading = false;
                                });
                            } else {
                                console.log('error submit!!');
                        return false;
                    }
                    });
                },
            },
        });
    </script>
    <style>
        /*弹窗上传图片*/
        #upload-img .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }

        #upload-img .avatar-uploader-box {
            position: relative;
            margin: 20px 0 0 10px;
            width: 110px;
        }

        #upload-img .el-icon-circle-close {
            position: absolute;
            top: -7px;
            right: 1px;
            color: #999;
        }

        .imgList {
            display: flex;
            flex-wrap: wrap;
            margin: 10px auto;
        }
    </style>
@endsection