admin_home/src/views/template/templateStyle.vue

<template>
    <div class="mainBox">
        <div class="layerBox">
            <tableTitle :name="templateStepTitle" />
            <step :activeNumber="2" />
        </div>
        <!--搜索功能 start------------------------------------------------------------>
        <div class="layerBox_search">
            <div class="layerBoxLine">
                <el-row>
                    <el-col :span="8">
                        <div class="searchBox">
                            <div class="searchTitle">按风格搜索</div>
                            <el-select v-model="getApiData.template_class_id" placeholder="请选择..">
                                <el-option v-for="item in allClass" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="searchBox">
                            <div class="searchTitle">按关键字搜索</div>
                            <el-input v-model="getApiData.keyword[0]" placeholder="根据描述推荐皮肤"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="searchBtnBox">
                            <el-button type="primary" @click="getData('search')">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--搜索功能 end------------------------------------------------------------>
        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <div class="templateStyleBox">
                <div class="templateStyleItem" v-for="(item, index) in tableData" :key="index">
                    <div :class="['templateStyleItemBox', { active: item.status == 1 || item.id == userTemplateId }]" @click="useIt(item)">
                        <img :src="item.template_img[0].url">
                        <div class="templateStyleItemTitle">{{ item.template_name }}</div>
                    </div>
                </div>
            </div>
            <div class="paginationBox">
                <el-pagination 
                    @size-change="handleSizeChange" 
                    :current-page="getApiData.page"
                    @current-change="handleCurrentChange" 
                    :page-size="10" 
                    layout="total, prev, pager, next, jumper"
                    :total="allCount"
                >
                </el-pagination>
            </div>
        </div>
        <div class="layerBox">
            <tableTitle :name="useTemplateName" />
            <div class="thumbnailBox">
                <div class="thumbnailItem" @click="showImg(item.url)" v-for="item in userData">
                    <div class="thumbnailItemBox">
                        <img :src="item.url">
                        <div class="thumbnailItemTitle">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--步骤按钮 start------------------------------------------------------------>
        <div class="btnBox">
            <el-button type="info" @click="goBase">上一步</el-button>
            <el-button type="primary" @click="addData">下一步</el-button>
        </div>
        <!--步骤按钮 end------------------------------------------------------------>
        <!--表格内容 end------------------------------------------------------------>

        <!--弹出框 start------------------------------------------------------------>
        <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
            <div class="imgZoomBox">
                <img :src="classPic">
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="alignCenterBox">
                    <el-button @click="windowStatus = false">关闭</el-button>
                </div>
            </div>
        </el-dialog>
        <!--弹出框 end------------------------------------------------------------>
    </div>
</template>

<script>
//表格标题
import tableTitle from './public/tableTitle';
//引入公用样式
import '@/styles/global.less';
//步骤条
import step from './public/step';

export default {
    components: {
        tableTitle,//表格标题
        step//步骤条
    },
    data() {
        return {
            //1.列表和分页相关 start ------------------------------------------------------------>
            templateStepTitle: "仅需四步，即可完成模板创建",
            tableDivTitle: "模板列表",
            useTemplateName: "已选择风格",
            allClass: [],//所有风格
            windowStatus: false,//弹出框
            classPic: "",//放大缩略图
            tableData: [],//内容
            getApiData: {//搜索功能
                website_id: "",
                template_class_id: "",
                keyword: [],
                page: 1,
                page_size: 10
            },
            //用户选择的页面模板
            userData: [],
            userTemplateId: "",//用户选择的模板风格id
            allCount: 0,//总条数
            //分页相关 end ------------------------------------------------------------>
        }
    },
    methods: {
        //0.全局操作 start ------------------------------------------------------------>
        //上一步  
        goBase() {
            this.$router.push({
                path: '/templateBase',
                query: {
                    website_id: this.$route.query.website_id
                }
            });
        },
        //放大缩略图
        showImg(img) {
            this.windowStatus = true;
            this.classPic = img;
        },
        //0.全局操作 end ------------------------------------------------------------>

        //1.风格列表 start ------------------------------------------------------------>
        //1.1 获得所有风格
        getAllClass(type) {
            this.$store.dispatch('template/getAllTemplateClass', this.getApiData).then(res => {
                if (res.code != 200) {
                    this.$message.error(res.message)
                } else {
                    for (let item of res.data) {
                        let data = {};
                        data.value = item.id
                        data.label = item.name
                        this.allClass.push(data)
                    }
                }
            })
        },
        //1.2 获得所有模板
        getData(type) {
            this.$store.dispatch('template/getWebsiteTemplateList', this.getApiData).then(res => {
                if(res.code == 200){
                    console.log(res.data)
                    let data = res.data.template.data;
                    //格式化data中的template_img
                    for(let item of data){
                        item.template_img = JSON.parse(item.template_img);
                        console.log(item.template_img[0].url)
                        item.status = 0;
                    }
                    console.log(data)
                    //展示数据
                    this.tableData = data;
                    //总条数
                    this.allCount = res.data.template.total;
                    //标记用户之前的选择
                    if(res.data.template_id==0||res.data.template_id==null){
                        console.log("用户从未选择过皮肤！")
                    }else{
                        this.userTemplateId = res.data.template_id;
                        for(let item of this.tableData){
                            if(item.id == this.userTemplateId){
                                item.status = 1;
                                this.userData = item.template_img;
                                this.userTemplateId = item.id;
                            }
                        }
                    }
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        //1.3 选中一个模板
        useIt(item) {
            for (let item of this.tableData) {
                item.status = 0;
            }
            item.status = 1;
            this.userData = item.template_img;
            this.userTemplateId = item.id;
        },
        //1.4 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.getApiData.page = val;
            this.getData();
        },
        //1.5 点击分页
        handleCurrentChange(val) {
            this.getApiData.page = val;
            this.getData();
        },
        //1.风格列表 end ------------------------------------------------------------>
        //2.提交风格模板 start ------------------------------------------------------------>
        addData() {
            //2.1 判断是否已经选择了模板
            console.log(this.userData.length)
            if (this.userData.length == 0) {
                console.log("未选择模板")
                this.$message.error("必须选择一个模板风格！")
            } else {
                let data = {
                    website_id: this.$route.query.website_id,
                    template_id: this.userTemplateId
                }
                //console.log(this.userTemplateId)
                //this.$route.query.website_id
                this.$store.dispatch('template/addWebsiteTemplateclassintel', data).then(res => {
                    if (res.code != 200) {
                        this.$message.error(res.message)
                    } else {
                        //this.$message.success('模板风格保存成功！');
                        //保存模板风格成功,开始构建网站
                        this.$router.push({
                            path: '/templateCreat',
                            query: {
                                website_id: this.$route.query.website_id,
                                style: 1
                            }
                        });
                    }
                })
            }
        },
        //回显数据
        getUserTemplate() {
            this.$store.dispatch('template/getWebsiteTemplateclassintel', { website_id: this.$route.query.website_id }).then(res => {
                let that = this;
                if (res.code == 200) {
                    for (let item of that.tableData) {
                        if (item.id == res.data.tid) {
                            item.status = 1;
                        }
                    }
                    //给与所选缩略图
                    this.userData = res.data.template_img;
                    //给与所选id
                    this.userTemplateId = res.data.tid;
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        //2.提交风格模板 end ------------------------------------------------------------>
    },
    mounted() {
        //给与网站id
        this.getApiData.website_id = this.$route.query.website_id;
        //获取所有风格
        this.getAllClass();
        //获取所有皮肤
        this.getData();
    }
}
</script>

<style scoped lang="less">
.searchBtnBox {
    padding-top: 26px;
    text-align: right;
}

.paginationBox {
    padding: 20px 0 0 0;
    text-align: center;
}

.btnBox {
    padding: 0 0 40px 0;
    text-align: center;
}

.thumbnailBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;

    .thumbnailItem {
        //width: 12.5%;
        width: 180px;
        height: 180px;
        text-align: center;
        padding: 0 10px 10px 10px;

        .thumbnailItemBox {
            background: #ECEFFD;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            cursor: pointer;

            .thumbnailItemTitle {
                position: absolute;
                bottom: 10px;
                left: 10px;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                font-size: 14px;
                text-align: center;
                padding: 5px 10px;
                border-radius: 4px;
            }
        }
    }

    img {
        width: 140px;
        height: 140px;
        display: block;
    }
}

.templateStyleBox {
    padding: 20px 20px 0 20px;
    background-color: #F5F7FB;
    display: flex;
    flex-wrap: wrap;

    .templateStyleItem {
        width: 20%;
        box-sizing: border-box;
        padding: 10px 10px 10px 10px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 20px;

        .templateStyleItemBox {
            background: #fff;
            border-radius: 10px;
            padding: 20px 20px 0 20px;
            border-top: 5px solid #E9EDF7;
            border-bottom: 5px solid #E9EDF7;
            border-left: 1px solid #E9EDF7;
            border-right: 1px solid #E9EDF7;
            // &:hover {
            //   border-top: 5px solid #E9EDF7;
            //   border-bottom: 5px solid #E9EDF7;
            //   border-left: 1px solid #E9EDF7;
            //   border-right: 1px solid #E9EDF7;
            // }
        }

        .active {
            border-top: 5px solid #5570F1;
            border-bottom: 5px solid #5570F1;
            border-left: 1px solid #5570F1;
            border-right: 1px solid #5570F1;
        }

        .templateStyleItemTitle {
            font-size: 14px;
            color: #333;
            text-align: center;
            padding: 10px 0;
        }

        img {
            width: 100%;
            height: 340px;
        }
    }
}

.imgZoomBox {
    img {
        width: 100%;
    }
}

.alignCenterBox {
    text-align: center;
}
</style>