feat:文物列表和详情

env.development

 NODE_ENV = 'development'
 VUE_APP_CURRENTMODE = 'dev'
-VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/1100718-0-default/'
+VUE_APP_BASE_API = 'http://172.24.100.189:8080'
\ No newline at end of file

src/App.vue

 <template>
   <div id="app">
-    <!-- <NavBar /> -->
-    
-    <!-- <Footer /> -->
+    <NavBar />
     <router-view />
+    <Footer />
   </div>
 </template>
 <script>
-// import NavBar from "@/components/NavBar";
-// import Footer from "@/components/Footer";
-// export default {
-//   components: { NavBar, Footer },
-// };
+import NavBar from "@/components/NavBar";
+import Footer from "@/components/Footer";
+export default {
+  components: { NavBar, Footer },
+};
 </script>
 <style lang="scss">
 #app {
@@ -24,5 +23,12 @@ body {
   margin: 0;
   padding: 0;
   background: #f7f7f7;
+  box-sizing: border-box;
+}
+div,
+span,
+ul,
+li {
+  box-sizing: border-box;
 }
 </style>

src/api/culturalRelic.js

+import request from '@/utils/request'
+
+export function getCulturalRelicList(data) {
+  return request({
+    url: '/bizCulturalRelic/listByPage',
+    method: 'post',
+    data
+  })
+}
+// 根据文物id查询详情
+export function getRCDetailById(params) {
+  return request({
+    url: '/bizCulturalRelic/listById',
+    method: 'get',
+    params
+  })
+} 

src/api/dict.js

+import request from '@/utils/request'
+/**
+ * 
+ * @param {*} data  查询参数 data{limit:100,page:1,dictId:xxx}
+ * 
+ */
+export function getDictCode(data) {
+  return request({
+    url: '/sysDictDetail/getDictDetailsByTypes',
+    method: 'post',
+    data
+  })
+}

src/api/display.js

+import request from '@/utils/request'
+
+// 获取布展列表
+export function getList(data) {
+  return request({
+    url: '/bizExhibition/listByPage',
+    method: 'post',
+    data
+  })
+}
+export function getDisplayById(params) {
+  return request({
+    url: '/bizExhibition/listById',
+    method: 'get',
+    params
+  })
+}

src/api/literature.js

+
+
+import request from '@/utils/request'
+
+export function getLiteratureList(data) {
+  return request({
+    url: 'sysLiterature/listByPage',
+    method: 'post',
+    data
+  })
+}

src/api/org.js

+import request from '@/utils/request'
+
+export function getMuseumTree(params) {
+  return request({
+    url: '/sys/dept/tree',
+    method: 'get',
+    params
+  })
+}
+export function getMuseumTreeV1(params) {
+  return request({
+    url: '/sys/dept/v1/tree',
+    method: 'get',
+    params
+  })
+}
+
+export function addMuseum(data) {
+  return request({
+    url: '/sys/dept',
+    method: 'post',
+    data
+  })
+}
+export function editMuseum(data) {
+  return request({
+    url: '/sys/dept',
+    method: 'put',
+    data
+  })
+}
+
+// 获取博物馆列表
+export function getMuseumList(params) {
+  return request({
+    url: '/sys/depts',
+    method: 'get',
+    params
+  })
+}
+
+// 根据博物馆id查询详情
+export function getMSDetailById(id) {
+  return request({
+    url: `/sys/dept/${id}`,
+    method: 'get',
+  })
+}
+
+// 删除博物馆
+export function deleteMuseum(id) {
+  return request({
+    url: `/sys/dept/${id}`,
+    method: 'delete',
+  })
+}
+
+// 查询行政区划树
+export function getSysRegionTree(params) {
+  return request({
+    url: `/sysRegion/tree`,
+    method: 'get',
+    params
+  })
+}

src/components/Dict/index.js

+import {
+  getDictCode
+} from "@/api/dict";
+import {
+  getLiteratureList
+} from '@/api/literature'
+import store from "@/store";
+import Vue from "vue";
+class Dict {
+  constructor(dict) {
+    this.dict = dict;
+  }
+
+  async init(names) {
+    // 先判断list中的name是否存在，如果不存在，把不存在的放置在一个list中，再对list进行获取
+    var nonExistentNames = []
+    // debugger
+    names.forEach(name => {
+      if (store.getters.dicts[name]) {
+        Vue.set(this.dict, name, store.getters.dicts[name]);
+      } else {
+        nonExistentNames.push(name) //存入list中，单独进行处理调用
+      }
+    });
+
+    var index = nonExistentNames.indexOf('literature')
+    
+    if (index != -1) {
+      // debugger
+      Vue.set(this.dict, 'literature', []);
+      nonExistentNames.splice(index, 1)
+      var params = {
+        limit: 100,
+        page: 1
+      }
+      var res = await getLiteratureList(params)
+      if (res.code == 0) {
+        var literatureList =  res.data.records
+        Vue.set(this.dict, 'literature', literatureList);
+        this.dict['literature'] = Object.freeze(literatureList)
+        store.commit("dict/SET_DICTS", {
+          label: 'literature',
+          value: Object.freeze(literatureList),
+        });
+      }
+    }
+    if (nonExistentNames.length > 0) {
+      // debugger
+      var res = await getDictCode(nonExistentNames)
+      nonExistentNames.forEach(n => {
+        Vue.set(this.dict, n, []);
+        // var arr = []
+        var obj = {}
+        if (res.code == 0) {
+          res.data.map(item => {
+            if (item.dictType === n) {
+              obj[item.value]=item.label
+            }
+          })
+          this.dict[n] = Object.freeze(obj)
+     
+          store.commit("dict/SET_DICTS", {
+            label: n,
+            value: Object.freeze(obj),
+          });
+        }
+      })
+    }
+
+  }
+
+}
+
+const install = function (Vue) {
+  Vue.mixin({
+    data() {
+      // 如果在调用组件处data中有定义dicts，再进行初始化dict
+      if (
+        this.$options.dicts instanceof Array &&
+        this.$options.dicts.length > 0
+      ) {
+        return {
+          dict: {}
+        };
+      } else {
+        return {};
+      }
+    },
+    created() {
+      // 如果在调用组件处data中有定义dicts，再进行获取dicts中定义的字典
+      if (
+        this.$options.dicts instanceof Array &&
+        this.$options.dicts.length > 0
+      ) {
+        new Dict(this.dict).init(this.$options.dicts);
+      }
+    },
+  });
+};
+
+export default {
+  install
+};

src/components/NavBar/index.vue

 <template>
   <div class="nav">
+    <div class="container">
       <div class="title">贵州省精品展览展示平台</div>
-    <div class="tabs" v-for="(item, index) in pages" :key="index">
-      <router-link :to="item.path">{{ item.name }}</router-link>
+      <div class="right">
+        <div class="tabs">
+          <router-link
+            :to="item.path"
+            v-for="(item, index) in pages"
+            :key="index"
+            class="tab-item"
+            >{{ item.name }}</router-link
+          >
         </div>
         <div class="operation">
           <span v-if="isLogged">欢迎你，{{ userInfo.userName }}</span>
           <router-link v-if="!isLogged" to="/login" class="operation-item"
             >登陆</router-link
           >|
-      <router-link to="/personal" class="operation-item">个人中心</router-link>|
+          <router-link to="/personal" class="operation-item"
+            >个人中心</router-link
+          >|
           <span class="logout">
             <el-popover
               placement="bottom"
@@ -34,6 +44,8 @@
           </span>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -90,25 +102,41 @@ a {
   text-decoration: none;
 }
 .nav {
-  display: flex;
   height: 120px;
+  width: 100%;
+  // background-color: #1e5fbb;
+  //  box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
     align-items: center;
     justify-content: space-between;
-  margin: auto;
-  width: 1200px;
+    padding: 0 100px;
     .title {
       font-size: 30px;
-    font-weight: bold;
+      // font-weight: bold;
+      font-family: LiSu;
+      // color: #c8945b;
     }
+    .right {
+      display: flex;
+
       .tabs {
         display: flex;
-    margin-right: 5px;
+        margin-right: 100px;
+        .tab-item{
+          margin-right: 80px;
+          // color: #fff;
+        }
       }
       .operation {
         .operation-item {
           margin-right: 8px;
           cursor: pointer;
-      color: #000;
+          // color: #fff;
+        }
+      }
     }
   }
 }

src/components/SearchBar/index.vue

 <!-- -->
 <template>
   <div class="search-bar">
-    <el-select v-model="select" placeholder="请选择">
+    <!-- <el-select v-model="select" placeholder="请选择">
       <el-option
         v-for="item in options"
         :key="item.value"
@@ -9,7 +9,7 @@
         :value="item.value"
       >
       </el-option>
-    </el-select>
+    </el-select> -->
     <el-input
       v-model="searchValue"
       placeholder="请输入关键词"

src/main.js

@@ -11,6 +11,8 @@ import 'element-ui/lib/theme-chalk/index.css';
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 // Vue.prototype.$echarts = echarts
+import dict from '@/components/Dict'
+Vue.use(dict);
 
 new Vue({
   router,

src/router/index.js

@@ -43,7 +43,7 @@ const routes = [
   },
   // 文物详情页
   {
-    path: '/culturalRelic/:id',
+    path: '/culturalRelic/:crId',
     name: 'culturalRelicDetail',
     component: () => import('@/views/culturalRelic/Detail.vue')
   },

src/store/getters.js

 const getters = {
-    // 用户
   token: state => state.user.token,
-    avatar: state => state.user.userInfo.avatar,
-    name: state => state.user.userInfo.name,
   userInfo: state => state.user.userInfo,
-  }
-  export default getters
-  
+  avatar: state => state.user.avatar,
+  name: state => state.user.name,
+  dicts: state => state.dict.dicts,
\ No newline at end of file
+  museumTree: state => state.org.museumTree
+}
+export default getters

src/store/index.js

@@ -2,12 +2,16 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from './getters'
 import user from './modules/user'
+import dict from './modules/dict'
+import org from './modules/org'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
     user,
+    dict,
+    org
   },
   getters
 })

src/store/modules/dict.js

+const state = {
+    dicts: {},
+  };
+  
+  const mutations = {
+    SET_DICTS(state, obj) {
+      state.dicts[obj.label] = obj.value;
+    },
+  };
+  
+  export default {
+    namespaced: true,
+    state,
+    mutations,
+  };
+  
+  
\ No newline at end of file

src/store/modules/org.js

+import {
+  getMuseumTreeV1,
+  getSysRegionTree
+} from '@/api/org'
+
+const getDefaultState = () => {
+  return {
+    museumTree: [], //博物馆树
+    regionTree: [], //行政区划树
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_MUSEUM_TREE: (state, museumTree) => {
+    state.museumTree = museumTree
+  },
+  SET_REGION_TREE: (state, regionTree) => {
+    state.regionTree = regionTree
+  }
+}
+
+const actions = {
+  getMuseumTreeData({
+    commit
+  }, isReload) {
+    // 如果是空或者需要重新加载则重新调取接口获取，否则直接获取状态管理中的
+    if (state.museumTree || state.museumTree.length < 0 || isReload) {
+      return new Promise((resolve, reject) => {
+        getMuseumTreeV1({
+          deptId: ''
+        }).then(response => {
+          const {
+            data
+          } = response
+          commit('SET_MUSEUM_TREE', data)
+          resolve(data)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    } else {
+      return new Promise((resolve, reject) => {
+        resolve(state.museumTree)
+      })
+    }
+
+  },
+  getSysRegionTreeData({
+    commit
+  }, parentId) {
+    if (state.regionTree && state.regionTree.length > 0) {
+      return new Promise((resolve, reject) => {
+        resolve(state.regionTree)
+      })
+    } else {
+      return new Promise((resolve, reject) => {
+        getSysRegionTree({
+          parentId
+        }).then(response => {
+          const {
+            data
+          } = response
+          commit('SET_REGION_TREE', data)
+          resolve(data)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }
+
+  },
+
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/user.js

 import {
   login,
-    // getInfo,
-    // getAsyncRouter
-  } from '@/api/user'
+  logout,
+} from '@/api/user'
 import {
   getToken,
   setToken,
   removeToken,
   getUserInfo,
   setUserInfo,
-  removeUserInfo,
+  removeUserInfo
 } from '@/utils/auth'
 
 
 const getDefaultState = () => {
   return {
     token: getToken(),
-    userInfo: getUserInfo(),
+    userInfo:getUserInfo(),
+    name: '',
+    avatar: '',
+    // deptList:{}
   }
 }
+
 const state = getDefaultState()
 
 const mutations = {
@@ -27,11 +30,19 @@ const mutations = {
   },
   SET_TOKEN: (state, token) => {
     state.token = token
-    console.log('登录后存在vuex中token',token);
   },
-  SET_INFO: (state, userInfo) => {
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  SET_USERINFO: (state, userInfo) => {
     state.userInfo = userInfo
   },
+  // SET_DEPTLIST:(state,deptList)=>{
+  //   state.deptList = deptList
+  // }
 }
 
 const actions = {
@@ -39,21 +50,26 @@ const actions = {
   login({
     commit
   }, userInfo) {
+    const {
+      username,
+      password,
+      captcha
+    } = userInfo
     return new Promise((resolve, reject) => {
-      login(userInfo).then(response => {
-        if (response.code != 0) {
-          userInfo.fail(response)
-        } else {
+      login({
+        username: username.trim(),
+        password: password,
+        captcha: captcha
+      }).then(response => {
         const {
-            data,
-            token
+          data
         } = response
-          commit('SET_TOKEN', token)
-          commit('SET_INFO', data)
-          setToken(token)
+        commit('SET_TOKEN', data.accessToken)
+        commit('SET_NAME', data.username)
+        commit('SET_USERINFO', data)
+        setToken(data.accessToken)
         setUserInfo(data)
         resolve()
-        }
       }).catch(error => {
         reject(error)
       })
@@ -61,28 +77,33 @@ const actions = {
   },
 
   // get user info
-  getInfo({
-    commit,
-    state
-  }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const {
-          data
-        } = response
+  // getInfo({
+  //   commit,
+  //   state
+  // }) {
+  //   return new Promise((resolve, reject) => {
+  //     getInfo(state.token).then(response => {
+  //       const {
+  //         data
+  //       } = response
 
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
-        commit('SET_INFO', data)
-        setUserInfo(data)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
+  //       if (!data) {
+  //         return reject('Verification failed, please Login again.')
+  //       }
+
+  //       const {
+  //         name,
+  //         avatar
+  //       } = data
 
+  //       commit('SET_NAME', name)
+  //       commit('SET_AVATAR', avatar)
+  //       resolve(data)
+  //     }).catch(error => {
+  //       reject(error)
+  //     })
+  //   })
+  // },
 
   // user logout
   logout({
@@ -90,11 +111,15 @@ const actions = {
     state
   }) {
     return new Promise((resolve, reject) => {
-      // logout(state.token).then(() => {
+      logout(state.token).then(() => {
         removeToken() // must remove  token  first
         removeUserInfo()
         commit('RESET_STATE')
         resolve()
+      }).catch(error => {
+       console.log('err',error);
+        // reject(error)
+      })
     })
   },
 
@@ -104,12 +129,28 @@ const actions = {
   }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
-      removeUserInfo()
       commit('RESET_STATE')
       resolve()
     })
   },
 
+  // getDeptList({
+  //   commit,
+  //   state
+  // }) {
+  //   return new Promise((resolve, reject) => {
+  //     let deptRes = await getDepList();
+  //     let deptList = {};
+  //     deptRes.data.map((dept) => {
+  //       deptList[dept[id]] = {
+  //         name: dept.name,
+  //         regionCode: dept.regionCode,
+  //       };
+  //     });
+  //     this.$store.commit('SET_DEPTLIST',deptList)
+  //   })
+  // },
+
 }
 
 export default {

src/utils/auth.js

@@ -4,7 +4,6 @@ const TokenKey = 'bwgzl_token'
 const UserInfoKey = 'bwgzl_user_info'
 
 export function getToken() {  
-  console.log('刷新后getToken',Cookies.get(TokenKey));
   return Cookies.get(TokenKey)
 }
 
@@ -17,7 +16,6 @@ export function removeToken() {
 }
 
 export function getUserInfo() {
-  console.log('刷新后getUserInfo',JSON.parse(localStorage.getItem(UserInfoKey)));
   return JSON.parse(localStorage.getItem(UserInfoKey))
 }
 

src/utils/request.js

-// 导入axios
 import axios from 'axios'
-// 使用element-ui Message做消息提醒
 import {
+  MessageBox,
   Message
-} from 'element-ui';
+} from 'element-ui'
+import store from '@/store'
 import {
   getToken
 } from '@/utils/auth'
-//1. 创建新的axios实例，
+
+// create an axios instance
 const service = axios.create({
-  // baseURL: process.env.BASE_API,
+  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
   baseURL: '/api',
-  // 超时时间 单位是ms，这里设置了3s的超时时间
-  timeout: 3 * 1000
+  timeout: 5000,
 })
-// 2.请求拦截器
-service.interceptors.request.use(config => {
-  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
-  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
-  config.headers = {
-    'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
-  }
-  const token = getToken();
-  if (token) {
-    config.params = {
-      'token': token
-    } //如果要求携带在参数中
-    config.headers.token = token; //如果要求携带在请求头中
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (getToken()) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['authorization'] = getToken()
     }
     return config
-}, error => {
-  Promise.reject(error)
-})
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
 
-// 3.响应拦截器
+  }
+)
+
+// response interceptor
 service.interceptors.response.use(
-  (response) => {
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  response => {
     const res = response.data
-    if (response.config.responseType !== 'blob') {
+    // console.log('响应拦截res--------',response);
+    if (response.config.url === '/api/sys/getVerify') {
+      // debugger
+      return res
+    }
+    // debugger
+    // if the custom code is not 20000, it is judged as an error.
     if (res.code !== 0) {
       Message({
         message: res.msg || 'Error',
         type: 'error',
-          duration: 3 * 1000,
+        duration: 5 * 1000
+      })
+      // 401001l令牌过期;
+      if (res.code === 401001) {
+        MessageBox.confirm('登录令牌已过期，请重新登录', '确认退出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
         })
+      }
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      // if (res.code === 50008 || res.code === 50012 || res.code === 50014 || res.code ===401001) {
+      //   // to re-login
+      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+      //     confirmButtonText: 'Re-Login',
+      //     cancelButtonText: 'Cancel',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     store.dispatch('user/resetToken').then(() => {
+      //       location.reload()
+      //     })
+      //   })
+      // }
       return Promise.reject(new Error(res.msg || 'Error'))
     } else {
       return res
     }
-    }
-    return res
   },
-  (error) => {
-    let res = error.response
-    if (error.response) {
-      if (res.status == 401) {
-        Vue.prototype.parentFns.portal_logout()
-      }
-    }
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.msg,
+      type: 'error',
+      duration: 5 * 1000
+    })
     return Promise.reject(error)
   }
 )
 
-//4.导入文件
 export default service

src/views/boutique/index.vue

 <template>
   <div class="boutique">
-    <NavBar />
+    <!-- <NavBar /> -->
     <h1>精品展</h1>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

src/views/culturalRelic/components/Area.vue → src/views/culturalRelic/components/Region.vue

@@ -38,7 +38,7 @@
 
 <script>
 export default {
-  name: "Area",
+  name: "Region",
   data() {
     return {
       area: [

src/views/culturalRelic/index.vue

 <template>
   <div class="display">
-     <NavBar />
+    <!-- <NavBar /> -->
+    <div class="main">
+      <div class="content">
+        <el-row :gutter="20">
+          <el-col :span="4" class="selectors">
+            <!-- <el-row class="select-card">
+              <div class="title">
+                <span>年代</span>
+              </div>
+              <div class="body">
+                <div class="select-group">
+                  <div
+                    class="select-items"
+                    v-for="(item, index) in years"
+                    :key="index"
+                  >
+                    <div class="check-box"></div>
+                    <div class="check-value">{{ item }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-row> -->
+            <el-row class="select-card">
+              <div class="title">
+                <span>分类</span>
+              </div>
+              <div class="body">
+                <div class="select-group">
+                  <div
+                    class="select-items"
+                    v-for="(item, index) in dict.culturalRelicType"
+                    :key="index"
+                  >
+                    <div class="check-box">
+                      <!-- <i class="el-icon-check" v-if="item.show"></i> -->
+                    </div>
+                    <div class="check-value">{{ item }}</div>
+                  </div>
+                </div>
+              </div>
+            </el-row>
+          </el-col>
+          <el-col :span="20" class="rclist">
             <div class="search">
-      <SearchBar
-        :options="options"
-        :selectValue="selectValue"
-        :keyword="keyword"
-      />
-      <div class="types">
-        <el-button  v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{
-          item.label
-        }}</el-button>
-      </div>
-    </div>
-    <ALL v-if="currentType === 'all'" @handleClick="handleClickCard" />
-    <Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
-    <ThreeDimension
-      v-if="currentType === '3d'"
-      @handleClick="handleClickCard"
-    />
+              <el-input
+                v-model="keyword"
+                class="search-bar"
+                @keyup.enter.native="search" clearable
+                ><i slot="suffix" class="el-input__icon el-icon-search"></i
+              ></el-input>
+            </div>
+            <div class="display-group">
+              <div class="total">
+                <span>{{ list.total }}</span
+                >件
+              </div>
+              <div class="divider"></div>
+              <el-row :gutter="10">
+                <el-col
+                  :span="6"
+                  class="cr-box"
+                  display-item
+                  @click.native="handleClick(item)"
+                  v-for="(item, index) in list.records"
+                  :key="index"
+                >
+                  <div class="img">
+                    <img :src="item.faceImageUrl" alt="" srcset="" />
+                    <div class="collect">
+                      <div class="collect-box">
+                        <img src="@/assets/imgs/like.png" alt="" srcset="" />
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
               <div class="pagination">
                 <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
-        :current-page="current"
-        :page-sizes="[12, 28, 40]"
-        :page-size="size"
+                  :current-page="Number(list.current)"
+                  :page-sizes="[10, 20, 40, 50]"
+                  :page-size="Number(list.size)"
                   layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+                  :total="Number(list.total)"
+                  class="pagination"
                 >
                 </el-pagination>
               </div>
-      <Footer />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
-import SearchBar from "@/components/SearchBar";
-import ALL from "./components/All";
-import Area from "./components/Area";
-import ThreeDimension from "./components/ThreeDimension";
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
+// import SearchBar from "@/components/SearchBar";
+// import NavBar from "@/components/NavBar";
+// import Footer from "@/components/Footer";
+import { getCulturalRelicList } from "@/api/culturalRelic";
 export default {
   name: "CulturalRelic",
-  components: { SearchBar, ALL, Area, ThreeDimension,NavBar,Footer },
+  // components: { SearchBar, NavBar, Footer },
+  // components: { SearchBar },
   data() {
     return {
-      buttons: [
-        {
-          label: "所有",
-          value: "all",
-        },
-        {
-          label: "区域",
-          value: "area",
-        },
-        {
-          label: "3D",
-          value: "3d",
-        },
-      ],
       options: [
         {
           value: "name",
@@ -69,28 +117,67 @@ export default {
       ],
       selectValue: "",
       keyword: "",
-
-      size: 12,
-      current: 1,
-      total: 1000,
       currentType: "all",
+      list: {
+        records: [],
+        size: 40,
+        current: 1,
+        total: 0,
+      },
+      years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
+      types: ["青铜", "石器"],
     };
   },
+  dicts: ["culturalRelicYears", "cultural_relic_texture", "culturalRelicType"],
+  created() {
+    setTimeout(() => {
+      // console.log(this.dicts);
+    });
+  },
+  mounted() {
+    this.loadData();
+  },
   methods: {
+    async loadData() {
+      var params = {
+        page: this.list.current,
+        limit: this.list.size,
+      };
+      let res = await getCulturalRelicList(params);
+      if (res.code == 0) {
+        this.list = res.data;
+      }
+    },
+
+    async search() {
+      var params = {
+        page: this.list.current,
+        limit: this.list.size,
+        name: this.keyword,
+      };
+      console.log("params", params);
+      let res = await getCulturalRelicList(params);
+      if (res.code == 0) {
+        this.list = res.data;
+      }
+    },
+    // 改变页容量
     handleSizeChange(value) {
-      console.log("handleSizeChange", value);
+      this.list.size = value;
+      this.loadData();
     },
+
+    // 改变当前显示页
     handleCurrentChange(value) {
-      console.log("handleCurrentChange", value);
+      this.list.current = value;
+      this.loadData();
     },
-    handleClickType(type) {
-      console.log("type", type);
-      this.currentType = type;
-    },
-    handleClickCard(value) {
-      console.log("接受到value", value);
+
+    handleClick(item) {
+      console.log(item);
+      const { crId } = item;
       this.$router.push({
-        path: "culturalRelic/1",
+        path: "culturalRelic/" + crId,
       });
     },
   },
@@ -98,18 +185,114 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$blue: #1e5fbb;
 $text-indent: 16px;
 .display {
-  margin: auto;
-  width: 1200px;
+  width: 100%;
+  // background-color: #2069c4;
+  // color: #fff;
+  .main {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 60px;
     .search {
-    // padding: 0 24%;
       display: flex;
-    justify-content: space-between;
-    margin-bottom: 32px;
-    .types {
-      width: 160px;
-      margin-left: 16px;
+      justify-content: flex-end;
+      margin-top: 20px;
+      .search-bar {
+        margin-bottom: 20px;
+        width: 400px;
+        border-radius: 48px !important;
+      }
+    }
+
+    .total {
+      margin-bottom: 40px;
+    }
+    .divider {
+      width: 100%;
+      height: 1px;
+      background-color: $blue;
+      margin-bottom: 20px;
+    }
+
+    .content {
+      width: 100%;
+      .selectors {
+        margin-top: 80px;
+
+        .select-card {
+          width: 100%;
+          box-shadow: 0 2px 10px 6px rgba(0, 0, 0, 0.12);
+          border-radius: 8px;
+          margin-bottom: 16px;
+          .title {
+            padding: 10px 20px;
+            background-color: #1e5fbb;
+            border-radius: 8px 8px 0 0;
+            color: #fff;
+            font-weight: bold;
+          }
+          .body {
+            padding: 10px 20px;
+            background-color: #fff;
+            border-radius: 0 0 8px 8px;
+            .select-items {
+              display: flex;
+              margin-bottom: 20px;
+              cursor: pointer;
+              margin-top: 24px;
+              .check-box {
+                border: 2px solid #563f17;
+                width: 20px;
+                height: 20px;
+                margin-right: 15px;
+                i {
+                  color: $blue;
+                  width: 2px;
+                  font-weight: bold;
+                }
+              }
+              .check-value {
+                color: #563f17;
+                font-size: 14px;
+                font-weight: bold;
+              }
+            }
+          }
+        }
+      }
+      .rclist {
+        .img {
+          width: 100%;
+          margin-bottom: 10px;
+          position: relative;
+          img {
+            width: 100%;
+          }
+          .collect {
+            position: absolute;
+            right: 20px;
+            bottom: 20px;
+            .collect-box {
+              width: 40px;
+              height: 40px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background-color: rgba(0, 0, 0, 0.15);
+              border-radius: 8px;
+              cursor: pointer;
+              img {
+                width: 20px;
+                height: 20px;
+                opacity: 0.5;
+              }
+            }
+          }
+        }
+      }
     }
   }
 

src/views/home/index.vue

@@ -3,7 +3,7 @@
     <div class="recommend-list">
       <div class="recommend-item">
         <div class="recommend-item-container boutique">
-          <NavBar class="navBar" />
+          <!-- <NavBar class="navBar" /> -->
           <el-carousel height="100vh" style="width: 100%">
             <el-carousel-item v-for="(item,index) in [1,2,3]" :key="index">
               <h3
@@ -27,7 +27,7 @@
         <!-- <MuseumMap /> -->
       </div>
     </div>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

src/views/virtual/index.vue

 <template>
   <div class="virtual">
-    <NavBar />
+    <!-- <NavBar /> -->
     <h1>虚拟展厅</h1>
-    <Footer />
+    <!-- <Footer /> -->
   </div>
 </template>
 

vue.config.js

@@ -16,7 +16,7 @@ module.exports = defineConfig({
     hot: true,
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:4523/m1/1100718-0-default',
+        target: 'http://172.24.100.189:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
@@ -33,18 +33,15 @@ module.exports = defineConfig({
         return args
       })
   },
-  configureWebpack: config => {
-    const configuration = {
+  configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
-      // name: name,
     resolve: {
       alias: {
         '@': resolve('src')
       }
     }
-    }
-    return configuration
   },
 
+
 })