feat:修改布展详情页布局、接入虚拟展厅接口、接入个人信息

src/api/vitual.js

+import request from '@/utils/request'
+
+
+export function getVirtualList(data) {
+  return request({
+    url: '/bizVirtual/listByPage',
+    method: 'post',
+    data
+  })
+}
+
+export function getVirtualListById(data) {
+  return request({
+    url: '/bizVirtual/listById',
+    method: 'delete',
+    data
+  })
+}
+

src/components/MenuList/index.vue

@@ -41,7 +41,6 @@ export default {
   inheritAttrs:false,
   methods: {
     handleOpen(key, keyPath) {
-      debugger
       
     },
     handleClose(key, keyPath) {

src/components/NavBar/index.vue

@@ -141,9 +141,10 @@ a {
       .tabs {
         display: flex;
         margin-right: 100px;
+        min-width: 512px;
         .tab-item {
           margin-right: 40px;
-          min-width: 64px;
+          // min-width: 64px;
           // color: #fff;
         }
         .router-link-exact-active {

src/components/SearchBar/index.vue

@@ -14,8 +14,11 @@
       v-model="searchValue"
       placeholder="请输入关键词"
       class="center"
+      @keyup.enter.native="search"
     ></el-input>
-    <el-button style="width:300px" round type="primary">检索</el-button>
+    <el-button style="width: 300px" round type="primary" @click.native="search"
+      >检索</el-button
+    >
   </div>
 </template>
 
@@ -37,18 +40,21 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      searchValue: "",
+    };
   },
-  computed: {
-    select() {
-      return this.selectValue;
-    },
-    searchValue() {
-      return this.keyword;
+  watch: {
+    keyword(value) {
+      this.searchValue = value;
     },
   },
   mounted() {},
-  methods: {},
+  methods: {
+    search() {
+      this.$emit("search", this.searchValue);
+    },
+  },
 };
 </script>
 

src/views/culturalRelic/index.vue

@@ -13,7 +13,7 @@
                 clearable
                 ><i slot="suffix" class="el-input__icon el-icon-search"></i
               ></el-input>  -->
-              <SearchBar @search="search" />
+              <SearchBar @search="search" :keyword="keyword"/>
               <el-checkbox v-model="show3d">只看3D</el-checkbox>
             </div>
             <div class="display-group">
@@ -123,11 +123,11 @@ export default {
       }
     },
 
-    async search() {
+    async search(keyword) {
       var params = {
         page: this.list.current,
         limit: this.list.size,
-        name: this.keyword,
+        name: keyword,
       };
       console.log("params", params);
       let res = await getCulturalRelicList(params);

src/views/display/index.vue

 <template>
   <div class="display">
     <!-- <NavBar /> -->
+
     <div class="main">
       <div class="content">
         <el-row :gutter="20">
@@ -13,7 +14,7 @@
                 clearable
                 ><i slot="suffix" class="el-input__icon el-icon-search"></i
               ></el-input> -->
-              <SearchBar @search="search" />
+              <SearchBar @search="search" :keyword="keyword" />
             </div>
             <div class="display-group">
               <!-- <div class="total">
@@ -87,7 +88,7 @@ export default {
   data() {
     return {
       selectValue: "",
-      keyword: "",
+      keyword: "", //搜索关键词
       currentType: "all",
       list: {
         records: [],
@@ -95,8 +96,6 @@ export default {
         current: 1,
         total: 0,
       },
-      // years: ["新石器时代", "夏", "商", "春秋", "战国", "秦", "汉", "三国"],
-      // types: ["青铜", "石器"],
     };
   },
   created() {
@@ -119,13 +118,12 @@ export default {
       }
     },
 
-    async search() {
+    async search(keyword) {
       var params = {
         page: this.list.current,
         limit: this.list.size,
-        name: this.keyword,
+        title: keyword,
       };
-      console.log("params", params);
       let res = await getList(params);
       if (res.code == 0) {
         this.list = res.data;

src/views/home/index.vue

@@ -5,7 +5,10 @@
         <div class="recommend-item-container boutique">
           <!-- <NavBar class="navBar" /> -->
           <el-carousel height="100vh" style="width: 100%">
-            <el-carousel-item v-for="(item,index) in ['精品展1','精品展2','精品展3']" :key="index">
+            <el-carousel-item
+              v-for="(item, index) in ['精品展1', '精品展2', '精品展3']"
+              :key="index"
+            >
               <h3
                 class="small"
                 style="
@@ -20,7 +23,18 @@
             </el-carousel-item>
           </el-carousel>
         </div>
-        <div class="recommend-item-container virtural">虚拟展厅</div>
+        <div class="recommend-item-container virtural">
+          <div class="img" @click="handleClickVitual()">
+            <img src="@/assets/imgs/virtual/1.png" alt="" />
+            <div class="desc">
+              <span class="name">贵州世居民族展历史篇</span>——
+              <span class="deptName">贵州省民族博物馆</span>
+            </div>
+            <div class="play">
+              <i class="el-icon-caret-right"></i>
+            </div>
+          </div>
+        </div>
         <div class="recommend-item-container display">每日推送-布展</div>
         <div class="recommend-item-container culturalRelic">每日推送-文物</div>
         <div class="recommend-item-container musuem-map">文博地图</div>
@@ -75,10 +89,71 @@ export default {
       ],
     };
   },
+  methods: {
+    handleClickVitual() {
+      //暂时写死
+      window.open(
+        "https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980"
+      );
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+.virtural {
+  .img {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    // background-color: #fff;
+    cursor: pointer;
+    &:hover {
+      img {
+        transform: scale(1.1);
+      }
+      // .play {
+      //   width: 56px;
+      //   height: 56px;
+      //   i {
+      //     font-size: 46px;
+      //     color: #fff;
+      //   }
+      // }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all 0.5s ease;
+    }
+    .desc {
+      position: absolute;
+      width: 100%;
+      padding: 10px;
+      background-color: #fff;
+      opacity: 0.7;
+      bottom: 0;
+      left: 0;
+    }
+    .play {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 40px;
+        color: #fff;
+      }
+    }
+  }
+}
 .recommend-list {
   display: flex;
   flex-direction: column;

src/views/personal/components/Info.vue

 <template>
   <div class="personal-info">
     <el-form ref="form" label-width="80px">
-      <el-form-item label="昵称"> 游客12345 </el-form-item>
-      <el-form-item label="邮箱"> 117282299@qq.com </el-form-item>
-      <el-form-item label="手机号"> 11728229911 </el-form-item>
-      <el-form-item>
+      <el-form-item label="账号"> {{userInfo.username}} </el-form-item>
+      <el-form-item label="手机号"> {{userInfo.phone}}</el-form-item>
+      <!-- <el-form-item>
         <el-button @click="editInfo">修改个人信息</el-button>
         <el-button @click="editPassword">修改密码</el-button>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
-    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" width="400px">
-      <el-form :model="infoData" v-if="isEditBasicInfo" label-position="right" label-width="80px">
-        <el-form-item label="昵称" >
+    <el-dialog
+      title="修改个人信息"
+      :visible.sync="dialogFormVisible"
+      width="400px"
+    >
+      <el-form
+        :model="infoData"
+        v-if="isEditBasicInfo"
+        label-position="right"
+        label-width="80px"
+      >
+        <el-form-item label="昵称">
           <el-input v-model="infoData.name" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="邮箱" >
+        <el-form-item label="邮箱">
           <el-input v-model="infoData.email" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="手机号" >
+        <el-form-item label="手机号">
           <el-input v-model="infoData.phone" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
-      <el-form :model="pwdData" v-else label-position="right" label-width="80px">
-        <el-form-item label="旧密码" >
-          <el-input
-            v-model="pwdData.oldPwd"
-            type="password"
-          ></el-input>
+      <el-form
+        :model="pwdData"
+        v-else
+        label-position="right"
+        label-width="80px"
+      >
+        <el-form-item label="旧密码">
+          <el-input v-model="pwdData.oldPwd" type="password"></el-input>
         </el-form-item>
-        <el-form-item label="新密码" >
-          <el-input
-            v-model="pwdData.newPwd"
-            type="password"
-          ></el-input>
+        <el-form-item label="新密码">
+          <el-input v-model="pwdData.newPwd" type="password"></el-input>
         </el-form-item>
-        <el-form-item label="重复密码" >
-          <el-input
-            v-model="pwdData.repeatPwd"
-            type="password"
-          ></el-input>
+        <el-form-item label="重复密码">
+          <el-input v-model="pwdData.repeatPwd" type="password"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -52,6 +56,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   name: "Info",
   data() {
@@ -70,7 +75,9 @@ export default {
       isEditBasicInfo: true,
     };
   },
-
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
   methods: {
     editInfo() {
       this.dialogFormVisible = true;
@@ -84,7 +91,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.el-input{
-    width: 80%;
+.el-input {
+  width: 80%;
 }
 </style>
\ No newline at end of file

src/views/virtual/index.vue

@@ -4,24 +4,13 @@
     <!-- <h1>虚拟展厅</h1> -->
     <!-- <Footer /> -->
     <el-row :gutter="40" class="list">
-      <el-col :span="12">
-        <div class="img" @click="handleClick('1')">
-          <img src="@/assets/imgs/virtual/1.png" alt="" />
+      <el-col :span="8" v-for="(item, index) in list.records" :key="index">
+        <div class="img" @click="handleClick(item.url)">
+          <img :src="item.faceImageUrl" alt="" />
           <div class="desc">
-            <span class="name">贵州世居民族展历史篇</span>——
-            <span class="deptName">贵州省民族博物馆</span>
-          </div>
-          <div class="play">
-            <i class="el-icon-caret-right"></i>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="img" @click="handleClick('2')">
-          <img src="@/assets/imgs/virtual/2.png" alt="" />
-          <div class="desc">
-            <span class="name">贵州世居民族展文化篇</span>——
-            <span class="deptName">贵州省民族博物馆</span>
+            <span class="name">{{ item.name }}</span
+            >
+            <!-- <span class="deptName">{{ item.deptName }}</span> -->
           </div>
           <div class="play">
             <i class="el-icon-caret-right"></i>
@@ -35,20 +24,38 @@
 <script>
 import NavBar from "@/components/NavBar";
 import Footer from "@/components/Footer";
+import { getVirtualList } from "@/api/vitual";
 export default {
   name: "Virtual",
   components: { NavBar, Footer },
+  data() {
+    return {
+      list: {
+        records: [],
+        size: 10,
+        current: 1,
+        total: 0,
+      },
+    };
+  },
+  mounted() {
+    this.loadData();
+  },
   methods: {
-    handleClick(value) {
-      switch (value) {
-        case "1":
-          window.open('https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980')
-          break;
-        case "2":
-          window.open('https://720yun.com/t/99vkbwqb02e?scene_id=91494908#scene_id=91494908')
-          break;
+    //   加载表格数据
+    async loadData() {
+      var params = {
+        page: this.list.current,
+        limit: this.list.size,
+      };
+      let res = await getVirtualList(params);
+      if (res.code == 0) {
+        this.list = res.data;
       }
     },
+    handleClick(url) {
+      window.open(url);
+    },
   },
 };
 </script>
@@ -63,6 +70,9 @@ export default {
       width: 100%;
       position: relative;
       overflow: hidden;
+      height: 200px;
+      // background-color: #fff;
+      cursor: pointer;
       &:hover {
         img {
           transform: scale(1.1);
@@ -70,7 +80,9 @@ export default {
       }
       img {
         width: 100%;
+        height: 100%;
         transition: all 0.5s ease;
+        
       }
       .desc {
         position: absolute;