0.0.43

0.0.43

.env.mock

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'mock'
+
+# base api
+VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/4987755-4646495-default'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://127.0.0.1:4523/m1/4987755-4646495-default'

package.json

@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
+    "mock": "cross-env NODE_ENV=development vue-cli-service serve --mode mock",
     "liujian": "cross-env NODE_ENV=development vue-cli-service serve --mode liujian",
     "liujiawei": "cross-env NODE_ENV=development vue-cli-service serve --mode liujiawei",
     "fengrui": "cross-env NODE_ENV=development vue-cli-service serve --mode fengrui",

src/api/template.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+//mock
+//添加模板基本信息
+export function addBasic(data) {
+  return request({
+    url: '/template/addBasic',
+    method: 'post',
+    data
+  })
+}

src/layout/components/template/componentMenu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="componentMenuBox">
+    <logo />
+    <div v-if="type == 'sector'" class="sectorBox">
+      板块
+    </div>
+    <div v-if="type == 'component'" class="componentBox">
+      组件
+    </div>
+  </div>
+</template>
+
+<script>
+import Logo from '../Sidebar/Logo'
+
+export default {
+  components: { Logo },
+  name: 'componentMenu',
+  props: {
+    type: {
+      type: String, //sector component
+      required: true
+    },
+  },
+  data() {
+    return {
+      data: null
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .componentMenuBox {
+    transition: width 0.28s;
+    width: 290px !important;
+    background: #2F2F2F;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+  }
+</style>

src/layout/creatWebsite.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <!-- <sidebar class="sidebar-container" /> -->
+    <componentMenu :type="this.$store.state.template.menuType"/>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
@@ -18,6 +18,7 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
+import componentMenu from './components/template/componentMenu.vue'
 
 export default {
   name: 'Layout',
@@ -28,7 +29,8 @@ export default {
     Settings,
     Sidebar,
     TagsView,
-    Breadcrumb
+    Breadcrumb,
+    componentMenu
   },
   mixins: [ResizeMixin],
   computed: {

src/router/modules/dangyunlong.js

@@ -325,5 +325,21 @@ const dangyunlongRouter= [
       }
     ]
   },
+  {
+    path: '/templateList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateList'),
+        meta: {
+          title: '网站模板',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 ]
 export default dangyunlongRouter

src/store/modules/template.js

@@ -0,0 +1,38 @@
+import {addBasic} from '@/api/template'
+
+const state = {
+  stepStatus: true,//true显示步骤 false不显示
+  menuType: "sector" //sector板块 component组件
+}
+
+const mutations = {
+  //展示步骤
+  showStepStatus(state){
+    state.stepStatus = true;
+  },
+  //隐藏步骤
+  hiddenStepStatus(state){
+    state.stepStatus = false;
+  }
+}
+
+const actions = {
+  //添加模板基本信息
+  addBasic({commit},data) {
+    return new Promise((resolve, reject) => {
+      addBasic(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/views/chat/topic.vue

@@ -67,6 +67,7 @@
               <template slot-scope="scope">
                 <div v-if="scope.row.type==1">科研</div>
                 <div v-if="scope.row.type==2">维权</div>
+                <div v-if="scope.row.type==3">讨论</div>
               </template>
             </el-table-column>
             <el-table-column prop="user_name" label="作者" width=""></el-table-column>

src/views/template/components/step.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="stepBox">
+    <div class="stepBoxText" @click="hiddenStepStatus"><i class="el-icon-close"></i></div>
+    <el-steps :active="activeNumber" align-center>
+      <el-step title="填写模板基本信息" description="类型和网站底部信息" />
+      <el-step title="选择模板风格" description="网站整体风格和样式" />
+      <el-step title="配置网站模块" description="展示哪些模块到网页" />
+      <el-step title="应用网站模板" description="应用该模板到您的站点" />
+    </el-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeNumber: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    //隐藏步骤
+    hiddenStepStatus() {
+      console.log(123)
+      console.log(this.$store.state.template.stepStatus)
+      this.$store.commit('template/hiddenStepStatus');
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .stepBox {
+    margin: 30px 30px 20px 30px;
+    position: relative;
+    .stepBoxText {
+      position: absolute;
+      right: -30px;
+      top: -70px;
+      color: #1C1D22;
+      background: #FFF2E2;
+      border-radius: 8px;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/template/templateBase.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="mainBox">
-    <div class="stepBox">
-      <el-steps :active="1" align-center>
-        <el-step title="填写模板基本信息" description="设置类型和网站底部信息" />
-        <el-step title="选择模板风格" description="确定网站整体风格和样式" />
-        <el-step title="配置网站模块" description="选择展示哪些模块到网页" />
-        <el-step title="应用网站模板" description="应用该模板到您的站点" />
-      </el-steps>
+    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+      <tableTitle :name="templateStepTitle"/>
+      <step :activeNumber="1"/>
     </div>
     <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
       <div class="layerBox">
@@ -22,11 +18,17 @@
               </el-checkbox-group>
             </div>
           </el-form-item>
-          <el-form-item label="单页模板类型：" :label-width="formLabelWidth" class="custom-align-right">
+          <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.template_special_type">
                 <el-checkbox label="1">自定义列表页</el-checkbox>
-                <el-checkbox label="2">自定义详情页</el-checkbox>
+                <el-checkbox label="2" disabled>自定义详情页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -119,14 +121,19 @@
           <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
-            </div>
+            </div>  
           </el-form-item>
           <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="客服QQ号1：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="客服QQ号2：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
             </div>
@@ -146,10 +153,13 @@
 import '@/styles/global.less';
 //表格标题
 import tableTitle from './components/tableTitle';
+//步骤条
+import step from './components/step';
 
 export default {
   components: {
     tableTitle,//表格标题
+    step//步骤条
   },
   data() {
     // 配置验证规则：用于表单验证
@@ -168,13 +178,14 @@ export default {
       }
     }
     return {
+      templateStepTitle:"仅需四步，即可完成模板创建",
       templateBaseTitle:"模板类型设置",
       templateInfoTitle:"模板信息设置",
       formLabelWidth:"120px",
       editId:"",
       form:{
         template_base_type:["1"],//常规类型
-        template_special_type:[],//特殊类型
+        template_special_type:["2"],//特殊类型
         website_statement:"",//网站声明
         project_img_src:"",
       },
@@ -185,38 +196,42 @@ export default {
     };
   },
   methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步
+    goToWebsite(){
+      this.$router.push({
+        path: '/webSite'
+      });
+    },
+    //下一步
+    goToStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //1.提交表单 start ------------------------------------------------------------>
     //提交表单
     addData(){
       console.log(this.form);
       //1.先验证用户是否已经存在
-      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/createUser',this.form).then(res=>{
-            console.log(res);
-            this.$message({
-              type: 'success',
-              message: '用户添加成功！'
-            });
-            this.goList();
-          })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
+      this.$store.dispatch('template/addBasic',this.form).then(res=>{
+        if(res.code==200){
+          this.$message.success('基本信息添加成功！请选择模板风格');
+          //进入下一步
+          this.goToStyle();
         }
       }).catch(error=>{
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
+        this.$message.error('网络错误，请重试！');
       })
     },
     //提交表单 start ------------------------------------------------------------>
-    //3.编辑表单 start ------------------------------------------------------------>
+
+    //2.编辑表单 start ------------------------------------------------------------>
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -267,36 +282,32 @@ export default {
       })
     },
     //编辑表单 end ------------------------------------------------------------>
-    
-    goToWebsite(){
-      this.$router.push({
-        path: '/webSite',
-      });
-    },
-    goToStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-      });
-    },
+
   },
   mounted(){
-    //判断是新建还是回显
+    //1.展示步骤
+    this.$store.commit('template/showStepStatus');
+    //2.判断是新建还是回显
     if(this.$route.query.id!=undefined){
       this.editId = this.$route.query.id;
-      console.log("编辑用户！")
-      this.getUserInfo();
+      console.log("编辑模板！")
     }else{
-      console.log("添加用户！")
+      console.log("添加模板基本信息！")
     }
-
   }
 };
 </script>
 
 <style scoped lang="less">
-  .stepBox {
-    margin: 30px 30px 20px 30px;
+  .labelTitleStyle{
+    font-size: 14px;
+    color: #606266;
+    font-weight: bold;
+  }
+  .exampleBox {
+    border: 1px solid #ccc;
   }
+
   .formDiv{
     background: #F5F7FB;
     padding: 10px 20px 10px 20px;

src/views/template/templateCreat.vue

@@ -1,10 +1,28 @@
 <template>
   <div class="mainBox">
-    <div class="layerTabsBox">
+    <div class="topMenuBox">
+      <div>
+        <el-button icon="el-icon-refresh" type="warning" size="small">随机生成模板</el-button>
+      </div>
+      <div>
+        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">完成配置</el-button>
+        <el-button icon="el-icon-view" type="warning" size="small">预览</el-button>
+        <el-button icon="el-icon-circle-close" type="info" size="small" @click="goStyle">放弃配置</el-button>
+      </div>
+    </div>
+    <div class="pageTabsBox">
+      <div>首页<i class="el-icon-circle-check"></i></div>
+      <div>分类页<i class="el-icon-circle-check"></i></div>
+      <div>列表页<i class="el-icon-circle-check"></i></div>
+      <div>详情页<i class="el-icon-circle-check"></i></div>
+    </div>
+
+    <!-- <div class="layerTabsBox">
       <div class="layerTabsItem active">配置首页</div>
       <div class="layerTabsItem">配置列表页</div>
       <div class="layerTabsItem">配置详情页</div>
-    </div>
+    </div> -->
+
     <!-- 工具栏 start ---------------------------------------->
     <div class="menuPostionBox">
       <MenuTopBox @add-module="addModule"/>
@@ -12,8 +30,7 @@
     <!-- 工具栏 end ---------------------------------------->
 
     <!-- 栅格布局 预览模式 start ---------------------------------------->
-    <div class="layerBox">
-      <tableTitle :name="websiteTitle"/>
+    <div class="websiteBox">
       <div class="grid-layout-demo">
         <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
           <grid-item
@@ -241,9 +258,8 @@
       </div>
     </div>
     <!-- 栅格布局 预览模式 end ---------------------------------------->
-    <div class="bottomBtnBox">
-      <el-button type="primary">保存配置</el-button>
-    </div>
+
+
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="编辑模块" :visible.sync="windowStatus">
       <el-form :model="form" ref="form" autocomplete="off" label-position="left">
@@ -288,8 +304,8 @@ export default {
     return {
       //页面 start------------------------------------------------------------>
       headerTitle: '模块',
-      websiteTitle: '预览',
       windowStatus: false,
+      editPageStatus:0,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
       //页面 end------------------------------------------------------------>
 
       //弹出框 start------------------------------------------------------------>
@@ -358,11 +374,49 @@ export default {
         // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
         // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
         // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
-      ]
+      ],
       //预览 end------------------------------------------------------------>
+
+      //保存页面信息
+      pageData:{
+        page_index:{
+          
+        },
+        page_theme:{
+          
+        },
+        page_list:{
+          
+        },
+        page_article:{
+          
+        }
+      }
+
     }
   },
   methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    nextPage(){
+      //保存页面信息
+      this.pageData.page_theme = 1;
+    },
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //添加模块
     addModule(type) {
       // 计算当前布局的最大 y 值
@@ -520,35 +574,77 @@ export default {
 </script>
 
 <style scoped lang="less">
-  //菜单 start------------------------------------------------------------> 
-  .layerTabsBox {
-    margin: 30px;
-    border-radius: 20px;
-    background: #fff;
-    border: 1px solid #d3d3d3;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  //顶部菜单
+  .topMenuBox {
+    padding: 20px 30px 20px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    overflow: hidden;
-    .layerTabsItem {
-      width: 33.33%; /* 每个占3分之一的空间 */
-      padding: 10px 20px;
-      cursor: pointer;
-      text-align: center;
-      font-size: 14px;
-      border-right: 1px solid #d3d3d3;
-      background: #fff;
+    background: #fff
+  }
+  //当前步骤
+  .pageTabsBox {
+    border-top: 1px solid #E9EDF7;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-items: flex-start;
+    font-size:12px;
+    padding:10px 30px;
+    div {
+      margin-right: 30px;
+      color: #999;
+      i {
+        margin-left: 5px;
+      }
     }
     .active {
-      background: #5570F1;
-      color: #fff;
+      color: #5570F1;
     }
   }
-  .layerBox {
-    padding-bottom: 10px;
+  //页面容器
+  .websiteBox {
+    margin: 30px;
+    background: #fff;
+    border: 1px solid #E9EDF7;
+    padding: 20px 20px 20px 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
   }
+
+
+
+
+
+  //菜单 start------------------------------------------------------------> 
+  // .layerTabsBox {
+  //   margin: 30px;
+  //   border-radius: 20px;
+  //   background: #fff;
+  //   border: 1px solid #d3d3d3;
+  //   -webkit-box-sizing: border-box;
+  //   box-sizing: border-box;
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: space-between;
+  //   overflow: hidden;
+  //   .layerTabsItem {
+  //     width: 33.33%; /* 每个占3分之一的空间 */
+  //     padding: 10px 20px;
+  //     cursor: pointer;
+  //     text-align: center;
+  //     font-size: 14px;
+  //     border-right: 1px solid #d3d3d3;
+  //     background: #fff;
+  //   }
+  //   .active {
+  //     background: #5570F1;
+  //     color: #fff;
+  //   }
+  // }
+  // .layerBox {
+  //   padding-bottom: 10px;
+  // }
   //菜单 end------------------------------------------------------------> 
 
   //模块 start------------------------------------------------------------> 

src/views/template/templateList.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">网站名称：</div>
+              <el-input v-model="getApiData.website_name" placeholder="请输入网站名称"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">应用状态：</div>
+              <el-select v-model="getApiData.website_status" placeholder="请选择应用状态..">
+                <el-option label="全部" value="2"></el-option>
+                <el-option label="已应用" value="1"></el-option>
+                <el-option label="未应用" value="0"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBtnBox">
+              <el-button>重置</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"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="website_name" label="网站名称"></el-table-column>
+            <el-table-column prop="template_name" label="风格名称" width="100">
+              <template slot-scope="scope">
+                <div v-if="scope.row.template_name==''">无</div>
+                <div v-else>{{scope.row.template_name}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="template_page" label="模板页面"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间"></el-table-column>
+            <el-table-column prop="updated_at" label="更新时间"></el-table-column>
+            <el-table-column prop="status" label="状态" width="100">
+              <template slot-scope="scope">
+                <div v-if="scope.row.status==0">未应用</div>
+                <div v-if="scope.row.status==1">已应用</div>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)" v-if="scope.row.status==1"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0"><i class="el-icon-brush"></i>构建</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+//步骤条
+import step from './components/step';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+    step//步骤条
+  },
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      templateStepTitle:"仅需四步，即可完成模板创建",
+      tableDivTitle:"模板列表",
+      useTemplateName:"已选择风格",
+      windowStatus:false,//弹出框
+      tableData:[
+        {id:1,website_name:"中国三农市场网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
+        {id:2,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:3,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:4,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
+        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1}
+      ],//内容
+      getApiData:{  
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      allCount:20,//总条数
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goBase(){
+      this.$router.push({
+        path: '/templateBase',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //下一步
+    goCreat(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/templateCreat',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.请求数据 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(){
+      this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
+        let newData = [];
+        for(let item of res.data.rows){
+          if(item.city_name==null){item.city_name="--"}
+          newData.push(item)
+        }
+        this.tableData = newData; //给与内容
+        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();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+  },
+  mounted(){
+    //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;
+  }
+</style>
+

src/views/template/templateStyle.vue

@@ -1,12 +1,8 @@
 <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 class="layerBox" v-if="this.$store.state.template.stepStatus">
+      <tableTitle :name="templateStepTitle"/>
+      <step :activeNumber="2"/>
     </div>
     <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
@@ -55,7 +51,7 @@
     <div class="layerBox">
       <tableTitle :name="useTemplateName"/>
       <div class="thumbnailBox">
-        <div class="thumbnailItem">
+        <div class="thumbnailItem" @click="showImg">
           <div class="thumbnailItemBox">
             <img src="@/assets/template/style1.png">
             <div class="thumbnailItemTitle">首页</div>
@@ -88,6 +84,22 @@
     </div>
     <!--步骤按钮 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
+
+
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
+        <div class="imgZoomBox">
+          <img src="@/assets/template/style1.png">
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="windowStatus=false">关闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
   </div>
 </template>
 
@@ -96,16 +108,21 @@
 import tableTitle from './components/tableTitle';
 //引入公用样式
 import '@/styles/global.less';
+//步骤条
+import step from './components/step';
 
 export default {
   components: {
     tableTitle,//表格标题
+    step//步骤条
   },
   data() {
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      templateStepTitle:"仅需四步，即可完成模板创建",
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
+      windowStatus:false,//弹出框
       tableData:[
         {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
         {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
@@ -118,20 +135,41 @@ export default {
       ],//内容
       editId:0,//要修改的网站id
       getApiData:{
-        title:"",//标题
-        category_name:"",//导航池id
-        author:"",//作者
-        islink:"",//是否使用外链
-        status:"",//资讯状态
-        page:1,//当前是第几页
-        pageSize:10,//一共多少条
+        
       },
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
     }
   },
   methods: {
-    //1.列表和分页相关 start ------------------------------------------------------------>
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goBase(){
+      this.$router.push({
+        path: '/templateBase',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //下一步
+    goCreat(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/templateCreat',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //放大缩略图
+    showImg(img){
+      this.windowStatus = true;
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //1.1 开始请求列表信息方法
     getData(type){
       if(type=="search"){
@@ -166,8 +204,6 @@ export default {
         item.status = 0;
       })
       this.tableData.find(item=>item.id==id).status = 1;
-
-      
     },
 
 
@@ -193,49 +229,20 @@ export default {
       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();
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      console.log("编辑风格！")
+    }else{
+      console.log("选择风格！")
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
-  .stepBox {
-    margin: 30px 30px 20px 30px;
-  }
   .searchBtnBox {
     padding-top: 26px;
     text-align: right;
@@ -325,5 +332,10 @@ export default {
       }
     }
   }
+  .imgZoomBox {
+    img {
+      width: 100%;
+    }
+  }
 </style>
 

src/views/website/WebsiteList.vue

@@ -61,7 +61,7 @@
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
                   <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>搭建</div> -->
+                  <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>模板</div> -->
                 </div>
                 <!-- <div class="listMainBtn"><i class="el-icon-view"></i>详情</div> -->
                 <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>