admin_home/src/views/template/templateBase.vue

<template>
    <div class="mainBox">
        <div class="layerBox">
            <tableTitle :name="templateStepTitle" />
            <step :activeNumber="1" />
        </div>
        <el-form ref="form" :model="form" class="login-form" autocomplete="on" label-position="left" label-width="120px">
            <div class="layerBox">
                <tableTitle :name="templateBaseTitle" />
                <div class="formDiv">
                    <el-form-item label="常规模板类型：" :label-width="formLabelWidth" prop="role_id"
                        class="custom-align-right">
                        <div class="formLabelFloatBox">
                            <el-checkbox-group v-model="form.page_type">
                                <el-checkbox label="1" disabled>首页</el-checkbox>
                                <el-checkbox label="2" disabled>频道页</el-checkbox>
                                <el-checkbox label="3" disabled>列表页</el-checkbox>
                                <el-checkbox label="4" disabled>详情页</el-checkbox>
                                <el-checkbox label="5">搜索页</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                    <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
                        <div class="formLabelFloatBox">
                            <div class="labelTitleStyle">
                                单页模板类型：
                                <el-tooltip class="item" effect="dark" content="该类型仅供底部导航栏使用" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>
                            <el-checkbox-group v-model="form.page_type">
                                <el-checkbox label="6" disabled>底部菜单列表页</el-checkbox>
                                <el-checkbox label="7" disabled>底部菜单详情页</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </div>
            </div>
            <div class="layerBox">
                <tableTitle :name="templateInfoTitle" />
                <div class="formDiv">
                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
                        class="custom-align-right">
                        <div class="formLabelFloatBox">
                            <div class="labelTitleStyle">
                                底部导航菜单展示：
                                <el-tooltip class="item" effect="dark" content="如需修改，请去其他设置-单页中进行修改/添加。" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>
                            <el-checkbox-group v-model="form.singlePage">
                                <el-checkbox label="1" disabled v-for="item in pageData.footer_category">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </div>
            </div>
            <div class="layerBox">
                <tableTitle :name="templateInfoTitle2" />
                <div class="formDiv">
                    <el-form-item :label="null" :label-width="formLabelWidth" prop="role_id"
                        class="custom-align-right">
                        <div class="formLabelFloatBox">
                            <div class="labelTitleStyle">
                                友情链接：
                                <el-tooltip class="item" effect="dark" content="如需修改，请去其他设置-友情链接中进行修改/添加。" placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </div>
                            <el-checkbox-group v-model="form.singlePage" class="linkBox">
                                <div class="linkItem" v-for="(item,index) in pageData.friend_link" :key="index">
                                    <div><el-checkbox :label="index" :checked="true" disabled>{{item.title}}</el-checkbox></div>
                                    <img :src="item.logo_url">
                                    <div class="linkUrl">{{item.url}}</div>
                                </div>
                            </el-checkbox-group>
                        </div>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <div class="bottomBtnBox">
            <el-button type="info" @click="goToWebsite">退出</el-button>
            <el-button type="primary" @click="addData">下一步</el-button>
        </div>
    </div>
</template>

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

export default {
    components: {
        tableTitle,//表格标题
        step//步骤条
    },
    data() {
        // 配置验证规则：用于表单验证
        const validateEmpty = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        return {
            templateStepTitle: "仅需四步，即可完成模板创建",
            templateBaseTitle: "网站页面类型设置",
            templateInfoTitle: "单页设置",
            templateInfoTitle2: "友情链接设置",
            formLabelWidth: "120px",
            editId: "",
            form: {
                website_id: "",//网站id
                page_type: ["1", "2", "3", "4", "6", "7"],//页面类型
                singlePage: ["1", "2", "3", "4", "5"],//单页类型
            },
            pageData:{}
        };
    },
    methods: {
        //0.全局操作 start ------------------------------------------------------------>
        //上一步
        goToWebsite() {
            this.$router.push({
                path: '/templateList'
            });
        },
        //下一步
        goToStyle() {
            //先判断表达能否提交
            this.$refs.form.validate(valid => {
                if (valid) {

                }
            })
            this.$router.push({
                path: '/templateStyle',
                query: {
                    id: this.editId
                }
            });
        },
        //0.全局操作 end ------------------------------------------------------------>

        //1.提交表单 start ------------------------------------------------------------>
        //1.1提交表单
        addData() {
            let data = {}
            //判断form.page_type中是否含有5
            if (this.form.page_type.includes("5")) {
                console.log("含有5")
                data.website_id = this.$route.query.website_id,
                data.is_search = 1;
                
            }else{
                console.log("不含有5")
                data.website_id = this.$route.query.website_id,
                data.is_search = 0;
            }
            this.$store.dispatch('template/addWebPageType',data).then(res => {
                if (res.code == 200) {
                    this.$router.push({
                        path: '/templateStyle',
                        query: {
                            website_id: this.$route.query.website_id
                        }
                    });
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        //1.2回显数据
        getWebsiteBase(website_id) {
            this.$store.dispatch('template/getWebPageType', { website_id: this.$route.query.website_id }).then(res => {
                if (res.code == 200) {
                    this.pageData = res.data;
                    if(res.data.page_type==0){
                        console.log("用户未使用搜索页！")
                        this.form.page_type = ["1", "2", "3", "4", "6", "7"];
                    }else{
                        console.log("用户已启用搜索页！")
                        this.form.page_type = ["1", "2", "3", "4", "5", "6", "7"];
                    }
                } else {
                    this.$message.error(res.message);
                }
            })
        },
        //1.提交表单 end ------------------------------------------------------------>
    },
    mounted() {
        //1.展示步骤
        this.$store.commit('template/showStepStatus');
        //2.判断是新建还是回显
        this.getWebsiteBase();
    }
};
</script>

<style scoped lang="less">
.labelTitleStyle {
    font-size: 14px;
    color: #606266;
    font-weight: bold;
}

.exampleBox {
    border: 1px solid #ccc;
}

.formDiv {
    background: #F5F7FB;
    padding: 10px 20px 10px 20px;
}

.uploaderBox .avatar-uploader {
    background: #fff;
}

.linkBox {
    display: flex;
    align-items: center;
    
    .linkItem:nth-child(1) {
        text-align: left;
        width: 160px;
        .linkUrl { 
            text-align: left;
        }
        img {
            display: block;
            width: 120px;
            height: 50px;
            margin-left: 0;
        }
    }
    .linkItem {
        text-align: center;
        width: 200px;
        padding-right: 20px;
        .linkUrl {
            font-size: 12px;
            color: #999;
            text-align: center;
        }
        img {
            display: block;
            width: 120px;
            height: 50px;
            margin: 0 auto;
        }
    }
}
::v-deep .formDiv .el-form-item:last-child {
    margin-bottom: 0 !important;
}
::v-deep .formDiv .el-form-item__content {
    margin-left: 0 !important;
}
::v-deep .formDiv .el-form-item__label {
    float: none;
}
//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
::v-deep .custom-form-item>.el-form-item__label {
    line-height: 140px !important;
}
::v-deep .custom-textarea .el-textarea__inner {
    resize: none;
    /* 禁止用户拖拽调整大小 */
}
::v-deep .custom-align-right .el-form-item__label {
    text-align: right;
    /* 设置标签文字右对齐 */
}
::v-deep .el-select {
    width: 100%;
    /* 禁止用户拖拽调整大小 */
}
//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
</style>