|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <div class="mainBox">
|
|
|
+ <div class="stepBox">
|
|
|
+ <el-steps :active="2" align-center>
|
|
|
+ <el-step title="填写模板基本信息" description="设置类型和网站底部信息" />
|
|
|
+ <el-step title="选择模板风格" description="确定网站整体风格和样式" />
|
|
|
+ <el-step title="配置网站模块" description="选择展示哪些模块到网页" />
|
|
|
+ <el-step title="应用网站模板" description="应用该模板到您的站点" />
|
|
|
+ </el-steps>
|
|
|
+ </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.islink" placeholder="请选择..">
|
|
|
+ <el-option label="全部" value="0"></el-option>
|
|
|
+ <el-option label="简约" value="1"></el-option>
|
|
|
+ <el-option label="商务" value="2"></el-option>
|
|
|
+ <el-option label="科技" value="3"></el-option>
|
|
|
+ <el-option label="金融" value="4"></el-option>
|
|
|
+ <el-option label="教育" value="5"></el-option>
|
|
|
+ <el-option label="医疗" value="6"></el-option>
|
|
|
+ <el-option label="政府" value="7"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="searchBtnBox">
|
|
|
+ <el-button @click="clearSearchList">重置</el-button>
|
|
|
+ <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}]" @click="useIt(item.id)">
|
|
|
+ <img :src="item.img">
|
|
|
+ <div class="templateStyleItemTitle">{{item.title}}</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">
|
|
|
+ <div class="thumbnailItemBox">
|
|
|
+ <img src="@/assets/template/style1.png">
|
|
|
+ <div class="thumbnailItemTitle">首页</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="thumbnailItem">
|
|
|
+ <div class="thumbnailItemBox">
|
|
|
+ <img src="@/assets/template/style1.png">
|
|
|
+ <div class="thumbnailItemTitle">分类页</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="thumbnailItem">
|
|
|
+ <div class="thumbnailItemBox">
|
|
|
+ <img src="@/assets/template/style1.png">
|
|
|
+ <div class="thumbnailItemTitle">列表页</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="thumbnailItem">
|
|
|
+ <div class="thumbnailItemBox">
|
|
|
+ <img src="@/assets/template/style1.png">
|
|
|
+ <div class="thumbnailItemTitle">详情页</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--步骤按钮 start------------------------------------------------------------>
|
|
|
+ <div class="btnBox">
|
|
|
+ <el-button type="info" @click="goBase">上一步</el-button>
|
|
|
+ <el-button type="primary" @click="goCreat">下一步</el-button>
|
|
|
+ </div>
|
|
|
+ <!--步骤按钮 end------------------------------------------------------------>
|
|
|
+ <!--表格内容 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//表格标题
|
|
|
+import tableTitle from './components/tableTitle';
|
|
|
+//引入公用样式
|
|
|
+import '@/styles/global.less';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tableTitle,//表格标题
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ tableDivTitle:"模板列表",
|
|
|
+ useTemplateName:"已选择风格",
|
|
|
+ tableData:[
|
|
|
+ {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
|
|
|
+ {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
|
|
|
+ {id:3,img:require("@/assets/template/style3.png"),title:"逆转裁判",status:0},
|
|
|
+ {id:4,img:require("@/assets/template/style4.png"),title:"寒战",status:0},
|
|
|
+ {id:5,img:require("@/assets/template/style5.png"),title:"冲锋车",status:0},
|
|
|
+ {id:6,img:require("@/assets/template/style6.png"),title:"无间道",status:0},
|
|
|
+ {id:7,img:require("@/assets/template/style7.png"),title:"机动部队",status:0},
|
|
|
+ {id:8,img:require("@/assets/template/style8.png"),title:"枪火",status:0},
|
|
|
+ ],//内容
|
|
|
+ editId:0,//要修改的网站id
|
|
|
+ getApiData:{
|
|
|
+ title:"",//标题
|
|
|
+ category_name:"",//导航池id
|
|
|
+ author:"",//作者
|
|
|
+ islink:"",//是否使用外链
|
|
|
+ status:"",//资讯状态
|
|
|
+ page:1,//当前是第几页
|
|
|
+ pageSize:10,//一共多少条
|
|
|
+ },
|
|
|
+ allCount:0,//总条数
|
|
|
+ //分页相关 end ------------------------------------------------------------>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ //1.1 开始请求列表信息方法
|
|
|
+ getData(type){
|
|
|
+ if(type=="search"){
|
|
|
+ this.getApiData.page = 1;
|
|
|
+ }
|
|
|
+ this.$store.dispatch('news/getArticleList',this.getApiData).then(res=> {
|
|
|
+ //格式化：islink=0为不使用外面 islink=1为使用外链
|
|
|
+ //status=1为显示 status=2为不显示
|
|
|
+ let data = [];
|
|
|
+ for(let item of res.data.rows){
|
|
|
+ // if(item.status==0){item.status="隐藏"}
|
|
|
+ // if(item.status==1){item.status="显示"}
|
|
|
+ // if(item.status==404){item.status="已删除"}
|
|
|
+ if(item.islink==0){item.islink="否"}
|
|
|
+ if(item.islink==1){item.islink="是"}
|
|
|
+ data.push(item)
|
|
|
+ }
|
|
|
+ this.tableData = res.data.rows; //给与内容
|
|
|
+ this.allCount = res.data.count; //给与总条数
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //选择风格
|
|
|
+ useIt(id){
|
|
|
+ console.log(id)
|
|
|
+ this.tableData.forEach(item=>{
|
|
|
+ item.status = 0;
|
|
|
+ })
|
|
|
+ this.tableData.find(item=>item.id==id).status = 1;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //1.4 列表内容分页
|
|
|
+ //直接跳转
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.getApiData.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //1.5 点击分页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.getApiData.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //1.6 重置按钮
|
|
|
+ clearSearchList(){
|
|
|
+ this.tableData = [];
|
|
|
+ this.getApiData.title = "";
|
|
|
+ this.getApiData.category_name = "";
|
|
|
+ this.getApiData.author = "";
|
|
|
+ this.getApiData.islink = "";
|
|
|
+ this.getApiData.status = "";
|
|
|
+ this.getApiData.page = 1;
|
|
|
+ this.getApiData.pageSize = 10;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //列表和分页相关 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //2.添加新闻 start ------------------------------------------------------------>
|
|
|
+ //跳转到资讯发布页面
|
|
|
+ goBase(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/templateBase',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goCreat(id){
|
|
|
+ let data = {
|
|
|
+ id:id
|
|
|
+ }
|
|
|
+ this.$router.push({
|
|
|
+ path: '/templateCreat',
|
|
|
+ query: data
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //添加新闻 end ------------------------------------------------------------>
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ //1.获得初始数据
|
|
|
+ //this.getData();
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ .stepBox {
|
|
|
+ margin: 30px 30px 20px 30px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ 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 {
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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-top: 10px;
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
Sean
