qimall/addons/Album/backend/views/default/edit.php

<?php
    use common\helpers\ComponentHelper;
    ComponentHelper::loadComponentView('com-dialog-select');
    ComponentHelper::loadComponentView("diy/style-components/diy-color");
?>

<div id="album-edit" v-cloak v-loading="albumLoading" flex>
    <div class="album-imgs">
        <div class="img-text">鼠标按住图片可拖动排序</div>
        <div class="album-model">
            <draggable v-model="album.page_data" group="image" filter=".img-info-add"  forceFallback="true"  animation="300" :move="onMove" @start="onStart" @end="onEnd">
                <transition-group flex="wrap:wrap">
                    <div class="img-info" :class="item.type == 'add'?'img-info-add pointer':''" v-for="(item,index) in album.page_data" :key="index" @click="ablutOperate(item.type)" @mouseover.stop="mouseOverIndex(index)" @mouseout.stop="mouseOutIndex">
                        <template v-if="item.type == 'add'">
                            <i class="el-icon-plus"></i>
                        </template>    
                        <template v-else >
                            <el-image fit="contain"  class="img-div" @mousedown="list_image(index)" :key="index" :preview-src-list="list_img"  :src="item.image" v-if="item.image"></el-image>
                            <div flex="main:center cross:center" class="img-div" v-else>
                                暂无图片
                            </div>
                            <div v-show="album.page_data.length > 2 && !draggableBoo && mouseIndex == index" class="img-info-bottom" flex>
                                <div class="el-icon-delete del-icon pointer" @click.stop="ablutOperate('del',index,item.id)"></div>
                                <div class="el-icon-edit edit-icon pointer" @click.stop="ablutOperate('edit',index)"></div>
                            </div>
                        </template>
                    </div>
                </transition-group>
            </draggable>
        </div>
        <div class="album-bottom">
            <el-button type="primary" size="small" v-loading="btnLoading" @click.stop="saveAlbum">保存</el-button>
        </div>
    </div>
    <div class="">
        <el-tabs v-model="activeName" tab-position="right" type="card" class="tabs_header">
            <el-tab-pane name="active_1">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-document tabs-icon" :style="{color: activeName == 'active_1'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">基础</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <div>画册封面</div>
                    <com-attachment :multiple="false" :max="1" type="images" @selected="addAblumImg($event,'album_image')">
                        <div class="card-upload" v-if="!album.album_image">
                            <i class="el-icon-plus"></i>
                        </div>
                        <div v-else>
                            <el-image class="div-img" fit="contain"  :src="album.album_image"></el-image>
                        </div>
                    </com-attachment>
                    <div>画册名称</div>
                    <el-input maxlength="12" v-model="album.title" placeholder="请输入画册名称"></el-input>
                    <com-attachment v-show="false" :open-dialog="albumImgBoo" :multiple="multipleBoo" :max="multipleBoo?999:1" type="images" @selected="addAblumImg($event)" @closed="closedAddAblum()">
                        <div class="card-upload" v-if="!album.page_data[editIndex].image">
                            <i class="el-icon-plus"></i>
                        </div>
                        <div v-else>
                            <el-image class="div-img" fit="contain"  :src="album.page_data[editIndex].image"></el-image>
                        </div>
                    </com-attachment>
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_2">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-mobile-phone tabs-icon" :style="{color: activeName == 'active_2'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">分享</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <div flex="cross:center">
                        <div class="tabs-left-name">分享标题</div>
                        <el-input maxlength="20" v-model="album.share_title" placeholder="请输入分享标题"></el-input>
                    </div>
                    <div flex="">
                        <div class="tabs-left-name">分享图片</div>
                        <com-attachment  :multiple="false" :max="1" type="images" @selected="addAblumImg($event,'share_image')">
                            <div class="card-upload" v-if="!album.share_image">
                                <i class="el-icon-plus"></i>
                            </div>
                            <div v-else>
                                <el-image class="div-img" :src="album.share_image"></el-image>
                            </div>
                        </com-attachment>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_3">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-goods tabs-icon" :style="{color: activeName == 'active_3'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">商品</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <com-dialog-select :multiple="true" title="商品选择" @selected="goodsSelect">
                        <el-button size="small">添加商品</el-button>
                    </com-dialog-select>
                    <el-table :data="album.goods_list" height="600px" stripe style="width: 100%">
                        <el-table-column prop="id" label="ID" width="80"></el-table-column>
                        <el-table-column label="名称">
                            <template slot-scope="scope">
                                <div flex>
                                    <el-image fit="cover" style="width: 40px;height: 40px;display: block;margin-right: 5px;" :src="scope.row.cover_pic"></el-image>
                                    <div>
                                        <com-ellipsis :line="2">{{scope.row.goods_name}}</com-ellipsis>
                                        <div style="font-size: 12px;color: red;">￥{{scope.row.price}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button type="text" @click="delteGoods(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_4">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-picture-outline tabs-icon" :style="{color: activeName == 'active_4'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">背景</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <div flex="cross:center">
                        <div class="tabs-left-name">背景样式</div>
                        <div>
                            <el-radio v-model="album.bg_type" :label="1">颜色</el-radio>
                            <el-radio v-model="album.bg_type" :label="2">图片</el-radio>
                        </div>
                    </div>
                    <div flex="cross:center">
                        <div class="tabs-left-name"></div>
                        <div v-if="album.bg_type == 1">
                            <el-color-picker v-model="album.bg_color"></el-color-picker>
                        </div>
                        <div v-if="album.bg_type == 2">
                            <com-attachment :multiple="false" :max="1" type="images" @selected="addAblumImg($event,'bg_image')">
                                <div class="card-upload" v-if="!album.bg_image">
                                    <i class="el-icon-plus"></i>
                                </div>
                                <div v-else>
                                    <el-image fit="contain" style="width: 100px; height: 100px" class="div-img" :src="album.bg_image"></el-image>
                                </div>
                            </com-attachment>
                        </div> 
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_5">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-link tabs-icon" :style="{color: activeName == 'active_5'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">附件</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <div flex="cross:center">
                        <div class="tabs-left-name">附件地址</div>
                        <el-input v-model="album.file" placeholder="请输入分享标题"></el-input>
                    </div>
                    <div flex="cross:center">
                        <div class="tabs-left-name"></div>
                        <div class="hint-text">
                            可上传 .doc / .pdf / .exl / .p
                        </div>
                    </div>
                    <div flex="cross:center">
                        <div class="tabs-left-name"></div>
                        <com-attachment :multiple="false" :max="1" type="files" @selected="editDownFile">
                            <el-button type="primary" size="small">选择文件</el-button>
                        </com-attachment>
                    </div>
                    
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_6">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-s-custom tabs-icon" :style="{color: activeName == 'active_6'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">联系人</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <div>会员手机号</div>
                    <el-input v-model="phoneKey" placeholder="请输入会员手机号"></el-input>
                    <div v-if="album.user" flex="cross:center">
                        <div style="width: 60px;">{{album.user.id}}</div>
                        <div class="table-info-img-text" style="flex: 1;">
                            <el-image class="table-info-img circle" :src="album.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="no_user" style="width: 50px; bottom:20px;" v-if="album.user.status == 0">黑名单</div>
                            <div class="table-info-text">
                                <div style="color:#000;">{{album.user.nickname}}</div>
                                <!-- <div style="font-size: 12px;">渠道：{{album.user.platform}}</div> -->
                            </div>
                        </div>
                        <div style="flex: 1;">
                            {{album.user.mobile}}
                        </div>
                        <div>
                        <el-button size="medium" type="text" @click="delSelUser">删除</el-button>
                        </div>
                    </div>
                    <el-button type="primary" size="medium" @click="searchPhone">搜索</el-button>
                    <el-table :data="searchUserList" stripe height="600" style="width: 100%">
                        <el-table-column prop="id" label="会员ID" width="66"></el-table-column>
                        <el-table-column label="会员">
                            <template slot-scope="scope">
                                <div class="table-info-img-text">
                                    <el-image class="table-info-img circle" :src="scope.row.avatar_url">
                                        <div slot="error" class="image-slot">
                                            <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                        </div>
                                    </el-image>
                                    <div class="no_user" style="width: 50px; bottom:20px;" v-if="scope.row.status == 0">黑名单</div>
                                    <div class="table-info-text">
                                        <div style="color:#000;">{{scope.row.nickname}}</div>
                                        <!-- <div style="font-size: 12px;">渠道：{{scope.row.platform}}</div> -->
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="mobile" label="手机号码"></el-table-column>
                        <el-table-column label="操作" width="80">
                            <template slot-scope="scope">
                                <el-button size="medium" type="text" @click="selUser(scope.row)">{{album.user && album.user.id == scope.row.id?'已选':'选择'}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane name="active_7">
                <template slot="label">
                    <div style="text-align: center;height: 50px;">
                        <i class="el-icon-bell tabs-icon" :style="{color: activeName == 'active_7'?'#409EFF':'#919294'}"></i>
                        <span class="tabs-text">音乐</span>
                    </div>
                </template>
                <div class="tabs-info">
                    <com-attachment :multiple="false" :max="1" type="voices" @selected="editBakVoices">
                        <el-button type="primary" size="small">选择音乐</el-button>
                    </com-attachment>
                    <div class="hint-text">
                        可上传音乐格式：MP3，大小 ≤ 20m
                    </div>
                    <div v-if="album.bg_video" flex="cross:center">
                        <video v-show="false" ref="soundPlay">
                            <source :src="album.bg_video.url" type="video/mp4">
                        </video>
                        <div class="voices-icon" flex="cross:center main:center">
                            <i class="el-icon-headset"></i>
                        </div>
                        <div style="flex: 1;">
                            {{album.bg_video.name}}
                        </div>
                        <div>
                            <el-button type="text" @click="playBgmusic">{{isPlayed?'暂停':'试听'}}</el-button>
                            <el-button type="text" @click="delVoices">删除</el-button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
<script src="/resources/js/Sortable.min.js"></script>
<script src="/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<script>
    new Vue({
        el: '#album-edit',
        data() {
            return {
                activeName: "active_1",
                type:0,
                list_img:[], //图片集合
                album: {
                    title: "",
                    album_image: "",
                    share_title: "",
                    share_image: "",
                    bg_type: 1,
                    bg_color: "#464646",
                    bg_image: "",
                    bg_video: null,
                    file: "",
                    user: null,
                    goods_ids: [],
                    goods_list: [],
                    page_data: [
                        {
                            image: "",
                            type: 'add',
                        }
                    ],
                    id: ''
                },
                isPlayed: false, //是否播放音乐
                phoneKey: "",  //会员手机号
                searchUserList: [],
                mouseIndex: -1, //鼠标移入的画册下标
                draggableBoo: false, //是否在拖拽中
                editIndex: 0, //编辑画册的下标
                albumImgBoo: false,
                multipleBoo: false,
                addType: '', //添加图片的类型 add: 新增 edit: 编辑

                albumLoading: false,
                btnLoading: false,
            }
        },
        created(){
            this.album.id = getQuery('album_id');
            this.type = getQuery('type');
            this.album.title = getQuery('name')
            if(this.album.id) this.getData();
        },
        methods: {
            getData(){
                let that = this;
                that.albumLoading = true;
                request({
                    params: {
                        r: 'album/default/edit',
                        id: this.album.id,
                    },
                    method: 'get',
                }).then(res => {
                    if (res.data.code == 0) {
                        if(res.data.data) that.album = Object.assign(that.album, res.data.data);
                        if(that.album.page_data.length <= 0){
                            that.album.page_data.push({
                                image: "",
                            });
                        }
                        that.album.page_data.push({
                            image: "",
                            type: 'add',
                        });
                        if(that.album.bg_video) that.album.bg_video = JSON.parse(that.album.bg_video);
                        
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                }).finally(e => {
                    that.albumLoading = false;
                });
            },
            //展示图片
            list_image(index){
                let img = this.album.page_data[index].image;
                this.list_img = [];
                if(img){
                    this.list_img.push(img)
                }
            },
            // 选择商品
            goodsSelect(param){
                for(let i = 0;i<param.length;i++){
                    let v = param[i];
                    let index = this.album.goods_list.findIndex(aInfo => aInfo.id == v.id);
                    if(index == -1){
                        if(this.album.goods_list.length == 10) {
                            this.$message.warning("最多添加10个商品");
                            break;
                        }
                        this.album.goods_list.push(v);
                        this.album.goods_ids.push(v.id);
                    }
                }
            },
            delteGoods(id){
                let index = this.album.goods_list.findIndex(v => v.id == id);
                if(index != -1){
                    this.album.goods_list.splice(index,1);
                    this.album.goods_ids.splice(index,1);
                }
            },
            // 背景音乐
            editBakVoices(info){
                this.album.bg_video = info[0];
            },
            playBgmusic(){
                if(this.isPlayed){
                    this.$refs.soundPlay.pause();
                } else {
                    this.$refs.soundPlay.play();
                }
                this.isPlayed = !this.isPlayed;
            },
            delVoices(){
                this.album.bg_video = null;
            },
            // 文件下载
            editDownFile(info){
                this.album.file = info[0].url;
            },
            // 搜索联系人
            searchPhone(){
                request({
                    params: {
                        r: 'album/default/user',
                    },
                    method: 'post',
                    data: {
                        keyword: this.phoneKey,
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        console.info(res.data);
                        this.searchUserList = res.data.data;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            selUser(data){
                this.album.user = data;
            },
            delSelUser(){
                this.album.user = null;
            },
            onStart(e){
                this.draggableBoo = true;
                
            },
            onEnd(e){
                this.draggableBoo = false;
                this.editIndex = e.newIndex;
            },
            onMove(e){ 
                console.log(e.relatedContext.element.type);
                if(e.relatedContext.element.type == 'add') return false;
                return true;
            },  
            mouseOverIndex(i){
                if(!this.draggableBoo){
                    this.mouseIndex = i;
                }
            },
            mouseOutIndex(){
                this.mouseIndex = -1
            },
            ablutOperate(type,index,id=null){
                if(type == 'add'){
                    this.multipleBoo = true;
                    this.albumImgBoo = true;
                    this.addType = 'add';
                } else if(type == 'del'){
                    if(id){
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {
                            this.album.page_data.splice(index,1);
                            this.delpage(id);
                        });
                    }else{
                        this.album.page_data.splice(index,1);
                    }
                    if(this.editIndex == index) this.editIndex = index - 1 >= 0?index - 1:0;
                } else if(type == 'edit'){
                    this.editIndex = index;
                    this.albumImgBoo = true;
                    this.addType = 'edit';
                }
            },
            delpage(id){
                request({
                    params: {
                        r: 'album/default/delpage',
                    },
                    method: 'post',
                    data: {id:id}
                }).then(res => {
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    });
                }).catch(e => {
                    console.log(e);
                });
            },
            addAblumImg(data,type){
                console.info(data,type);
                let url = data[0].url;
                if(type){
                    this.album[type] = url;
                } else if(data.length > 1){
                    data.forEach(v => {
                        let obj = {
                            image: v.url,
                        }
                        this.album.page_data.splice(this.album.page_data.length - 1,0,obj);
                    })
                } else if(this.addType == 'add'){
                    let obj = {
                         image: url,
                    }
                    this.album.page_data.splice(this.album.page_data.length - 1,0,obj);
                }else {
                    this.album.page_data[this.editIndex].image = url;
                }
                this.closedAddAblum();
            },
            closedAddAblum(){
                this.multipleBoo = false;
                this.albumImgBoo = false;
                this.addType = '';
            },
            saveAlbum(){
                let str = this.saveVerify();
                console.info(str);
                if(str){
                    this.$message({
                        message: str,
                        type: 'warning'
                    });
                    return;
                }
                let dataObj = JSON.parse(JSON.stringify(this.album));
                dataObj.page_data.splice(dataObj.page_data.length - 1,1);
                dataObj.author_id = dataObj.user?dataObj.user.id:'0';
                dataObj.bg_video = dataObj.bg_video?JSON.stringify(dataObj.bg_video):'';
                if(this.type==2) dataObj.type = this.type;
                if(!dataObj.album_image){
                    dataObj.album_image = dataObj.page_data[0].image;
                }
                console.info(dataObj);
                this.btnLoading = true;
                request({
                    params: {
                        r: 'album/default/edit',
                    },
                    method: 'post',
                    data: dataObj
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg);
                        let info = {r: 'album/default/index'};
                        navigateTo(info);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                }).finally(e => {
                    this.btnLoading = false;
                });

            },
            saveVerify(){
                if(!this.album.title){
                    return '请填写画册名称';
                }
                let length = this.album.page_data.filter(v => v.image == "" && v.type != 'add').length;
                if(length > 0 || this.album.page_data.length == 1){
                    return "请添加画册图片";
                }
                return '';
            }
        }

    })
</script>

<style>

    .el-main{
        padding: 0;
        /* padding-left: 20px; */
    }

    .album-imgs{
        position: relative;
        flex: 1;
    }

    #album-edit{
        height: 100%;
    }

    .album-model,.album-imgs > .img-text{
        padding-left: 20px;
    }

    .album-model{
        height: 90%;
        overflow: overlay;
    }

    .album-imgs > .img-text{
        margin-bottom: 10px;
        font-size: 14px;
        color: #333;
        margin-top: 20px;
    }

    .album-imgs .img-info-bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.5);
        font-size: 15px;
    }

    .album-imgs .img-info-bottom > div{
        flex: 1;
        text-align: center;
        margin: 4px 0;
    }

    .album-imgs .img-info-bottom > .del-icon{
        color: #E86666;
    }

    .album-imgs .img-info-bottom > .edit-icon{
        color: #3998FC;
    }

    .album-imgs .img-info{
        width: 155px;
        height: 155px;
        position: relative;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
    }

    .album-imgs .img-info-add{
        border: 1px solid #dad9d9;
        color: #dad9d9;
        font-size: 50px;
        background: #F5F5F5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .album-imgs .img-info .img-div{
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: 1px solid #dad9d9;
        background: #F5F5F5;
        color: #999;
    }

    

    #album-edit .el-tabs__item{
        height: 78px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
    }

    #album-edit .el-tabs__nav,#album-edit .el-tabs__header{
        border: none;
    }

    #album-edit .is-active{
        background: #343434;
    }

    #album-edit .is-right{
        margin-left: 0;
        background: #313131;
    }

    #album-edit .is-right{
        margin-left: 0;
        background: #313131;
    }

    #album-edit .el-tabs__content{
        height: 100%;
        background: #FFF;
        /* width: 284px; */
        width: 420px;
    }


    .tabs-icon{
        font-size: 30px;
        display: inherit;
        margin: auto;
    }

    .tabs-text{
        color: #FFF;
        display:block;
        line-height: 20px;
    }

    .tabs_header{
        height: 100%;
    }

    .tabs-info{
        padding: 20px;
    }

    .tabs-info > div{
        margin-bottom: 10px;
    }

    .tabs-info .div-img{
        width: 100px;
        height: 100px;
    }

    .tabs-left-name{
        min-width: 60px;
        margin-right: 8px;
    }

    .hint-text{
        font-size: 12px;
        color: #AEA6AE;
    }

    .voices-icon{
        width: 48px;
        height: 48px;
        background: #C0C4CC;
        color:#ffffff;
        font-size: 30px;
        margin-right: 10px;
        border-radius: 4px;
    }

    .pointer:hover{
        cursor: pointer;
    }

    .album-bottom{
        background: #FFF;
        padding: 8px 0;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        z-index: 10;
    }

</style>