初步完成公共顶部用户功能

src/apis/tab4.js

@@ -0,0 +1,9 @@
+import axios from '../utils/request'
+// 修改密码
+export const updatePwd = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/user/updatePwd',
+    data
+  })
+}

src/main.js

@@ -7,6 +7,15 @@ import './assets/style/initial.css'
 import 'default-passive-events'
 Vue.config.productionTip = false
 
+const checkBtn = {
+  data () {
+    return {
+      defaultImg: 'this.src="' + require('./assets/img/IMGerror.png') + '"'
+    }
+  }
+}
+Vue.mixin(checkBtn)
+
 Vue.use(ElementUI)
 new Vue({
   router,

src/views/layout/index.vue

@@ -6,39 +6,118 @@
       </div>
       <div class="right">
         <div class="txt">项目资料管理系统</div>
-        <div class="user">
-          <span>用户名</span>
+        <div class="user" @click="cut = !cut">
+          <span>{{ userInfo.realName }}</span>
           <img src="@/assets/img/user.jpg" alt="" />
+          <!-- 下箭头 -->
+          <div class="pull_down" v-if="cut"></div>
+          <div class="pull_up" v-else></div>
         </div>
+        <!-- 点击箭头出来的ul -->
+        <ul class="user_handle" v-show="cut">
+          <li @click="isShow = true">修改密码</li>
+          <li @click="outLogin">退出登录</li>
+        </ul>
       </div>
     </div>
     <div class="conten">
-    <div class="leftTab">
-      <div class="title">数据管理</div>
-      <ul>
-        <li v-for="item in tabList1" :key="item.id" :class="{active:$route.meta.myInd===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
-      </ul>
-      <div class="title">系统管理</div>
-      <ul>
-        <li v-for="item in tabList2" :key="item.id"  :class="{active:$route.meta.myInd===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
-      </ul>
-    </div>
-    <!-- 右侧内容 -->
-      <Router-view style="width: 1630px;"/>
+      <div class="leftTab">
+        <div class="title">数据管理</div>
+        <ul>
+          <li
+            v-for="item in tabList1"
+            :key="item.id"
+            :class="{ active: $route.meta.myInd === item.id }"
+            @click="skip(item.id, item.path)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+        <div class="title">系统管理</div>
+        <ul>
+          <li
+            v-for="item in tabList2"
+            :key="item.id"
+            :class="{ active: $route.meta.myInd === item.id }"
+            @click="skip(item.id, item.path)"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      <!-- 右侧内容 -->
+      <Router-view style="width: 1630px" @click.native="cut = false" />
     </div>
+    <!-- 点击修改密码出现弹窗 -->
+    <el-dialog title="修改密码" :visible.sync="isShow"  @close="btnX()">
+      <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
+        <el-form-item label="旧密码：" prop="oldPassword">
+          <el-input
+            v-model="form.oldPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码：" prop="newPassword">
+          <el-input
+            v-model="form.newPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确定新密码：" prop="checkPass">
+          <el-input
+            v-model="form.checkPass"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="btnX">取 消</el-button>
+        <el-button type="primary" @click="btnOk">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 例如：import 《组件名称》 from '《组件路径》';
-
+import { updatePwd } from '@/apis/tab4'
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {},
   data () {
     // 这里存放数据
+    const validatePass2 = (rule, value, callback) => {
+      if (value !== this.form.newPassword) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
     return {
+      // 修改密码
+      form: {
+        oldPassword: '',
+        newPassword: '',
+        checkPass: ''
+      },
+      rules: {
+        checkPass: [
+          { validator: validatePass2, trigger: 'blur' }
+        ],
+        oldPassword: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      },
+      isShow: false,
+      cut: false,
+      userInfo: {},
       tabList1: [
         { id: 0, name: '项目资料', path: '/layout/tab1' },
         { id: 1, name: '文物案例', path: '/layout/tab2' },
@@ -56,12 +135,59 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+  // 修改密码点击取消
+    btnX () {
+      this.$refs.ruleForm.resetFields()
+      this.cut = false
+      this.isShow = false
+      this.form = {
+        oldPassword: '',
+        newPassword: '',
+        checkPass: ''
+      }
+    },
+    // 修改密码点击确定
+    async btnOk () {
+      await this.$refs.ruleForm.validate()
+      try {
+        await updatePwd(this.form)
+        this.$message.success('修改成功')
+        localStorage.clear('SWKK_token')
+        localStorage.clear('SWKK_userInfo')
+        this.$router.push('/')
+      } catch (error) {
+        this.$message.error('旧密码错误')
+      }
+    },
     skip (id, url) {
       this.$router.push(url).catch(() => {})
+    },
+    // 点击退出登录
+    outLogin () {
+      this.cut = false
+      this.$confirm('确定退出吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          localStorage.clear('SWKK_token')
+          localStorage.clear('SWKK_userInfo')
+          this.$router.push('/')
+          this.$message.success('退出成功!')
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取用户信息
+    const res = localStorage.getItem('SWKK_userInfo')
+    // console.log(999, JSON.parse(res))
+    this.userInfo = JSON.parse(res)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -87,6 +213,7 @@ export default {
     text-align: center;
   }
   .right {
+    position: relative;
     flex: 1;
     padding: 0 60px;
     height: 100%;
@@ -98,6 +225,8 @@ export default {
       font-weight: 700;
     }
     .user {
+      cursor: pointer;
+      position: relative;
       display: flex;
       align-items: center;
       img {
@@ -107,45 +236,83 @@ export default {
         border-radius: 50%;
         overflow: hidden;
       }
+      .pull_down {
+        position: absolute;
+        right: -24px;
+        bottom: 5px;
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-bottom: 8px solid black;
+      }
+      .pull_up {
+        cursor: pointer;
+        position: absolute;
+        right: -24px;
+        bottom: 5px;
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid black;
+      }
+    }
+    .user_handle {
+      z-index: 999;
+      padding: 10px 40px;
+      position: absolute;
+      right: 0;
+      bottom: -102px;
+      background-color: #f6f8f9;
+      li {
+        cursor: pointer;
+        margin: 10px 0;
+      }
+      li:hover {
+        color: #dc3545;
+      }
     }
   }
-  .leftTab {
-    font-size: 24px;
-    color: #fff;
-    padding: 30px 25px;
-    width: 290px;
-    height: calc(100vh - 60px);
-    min-height: 870px;
-    background-color: rgba(0, 0, 0, 0.8);
-    .title {
-      margin-top: 30px;
+}
+.leftTab {
+  font-size: 24px;
+  color: #fff;
+  padding: 30px 25px;
+  width: 290px;
+  height: calc(100vh - 60px);
+  min-height: 870px;
+  background-color: rgba(0, 0, 0, 0.8);
+  .title {
+    margin-top: 30px;
+    width: 230px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #dc3545;
+  }
+  ul {
+    margin-top: 15px;
+    li {
+      cursor: pointer;
       width: 230px;
       height: 60px;
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: #dc3545;
     }
-    ul {
-      margin-top: 15px;
-      li {
-        cursor: pointer;
-        width: 230px;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      li:hover{
-        background-color:rgba(220, 53, 69, .6) ;
-      }
-      .active {
-        background-color:rgba(220, 53, 69, .6) ;
-      }
+    li:hover {
+      background-color: rgba(220, 53, 69, 0.6);
+    }
+    .active {
+      background-color: rgba(220, 53, 69, 0.6);
     }
   }
-  .conten{
-    display: flex;
-  }
+}
+.conten {
+  display: flex;
 }
 </style>

src/views/login.vue

@@ -57,6 +57,7 @@ export default {
         const res = await userLogin(this.ruleForm)
         if (res.code === 0) {
           localStorage.setItem('SWKK_token', res.data.token)
+          localStorage.setItem('SWKK_userInfo', JSON.stringify(res.data.user))
           this.$router.push('/layout/tab1')
           this.$message.success('登录成功')
         } else this.$message.warning(res.msg)

src/views/tab1/tab1_add.vue

@@ -101,7 +101,7 @@
               style="width: 200px; margin-right: 20px"
             ></el-input>
             <el-input
-              v-model="tab1Arr[index].herf"
+              v-model="tab1Arr[index].href"
               placeholder="URL网址链接"
               style="width: 500px"
             ></el-input>
@@ -123,7 +123,7 @@
               style="width: 200px; margin-right: 20px"
             ></el-input>
             <el-input
-              v-model="tab2Arr[index].herf"
+              v-model="tab2Arr[index].href"
               placeholder="URL网址链接"
               style="width: 500px"
             ></el-input>
@@ -166,7 +166,9 @@
               @mouseenter="moveShowIdn = index"
               @mouseleave="moveShowIdn = null"
             >
-              <img :src="baseURL + item.url" alt="" />{{ item.name }}
+              <img :src="baseURL + item.url" alt="" :onerror="defaultImg" />{{
+                item.name
+              }}
               <!-- 鼠标移上去显示的盒子 -->
               <div class="moveShow" v-show="moveShowIdn === index">
                 <i class="el-icon-edit" @click="outEditAntique(item.id)"></i>
@@ -181,11 +183,15 @@
       <!-- 底部按钮 -->
       <div class="button_btn">
         <div @click="$router.go(-1)">取 消</div>
-        <div class="edit">保 存</div>
+        <div class="edit" @click="outBtnOk">保 存</div>
       </div>
     </div>
     <!-- 点击 文物 的+号出现弹出层 -->
-    <el-dialog :title="addForm.id?'编辑文物':'添加文物'" :visible.sync="addIsShow">
+    <el-dialog
+      :title="addForm.id ? '编辑文物' : '添加文物'"
+      :visible.sync="addIsShow"
+      @close="addBtnX()"
+    >
       <el-form
         :model="addForm"
         :rules="addRules"
@@ -230,6 +236,7 @@
               <img
                 style="width: 100%; height: 100%"
                 :src="baseURL + item.url"
+                :onerror="defaultImg"
               />
               <div class="imgIcon" v-show="index === imgIconInd">
                 <i class="el-icon-zoom-in" @click="lookImg(item.url)"></i>
@@ -271,7 +278,7 @@
     </el-dialog>
     <!-- 点击查看图片 -->
     <div class="lookImg" v-if="dialogImageIshow">
-      <img :src="baseURL + dialogImageUrl" alt="" />
+      <img :src="baseURL + dialogImageUrl" alt="" :onerror="defaultImg" />
       <div class="imgBtnX" @click="dialogImageIshow = false">关 闭</div>
     </div>
   </div>
@@ -322,16 +329,8 @@ export default {
       token: '',
       // 项目网址数据
       tab1Arr: [{ name: '', href: '' }],
-      tab1: {
-        name: '',
-        herf: ''
-      },
       // 三维场景数据
       tab2Arr: [{ name: '', href: '' }],
-      tab2: {
-        name: '',
-        herf: ''
-      },
       topTabInd: 0,
       topTab: [
         { name: '项目详情', id: '#tab0' },
@@ -379,6 +378,10 @@ export default {
     },
     // 点击添加网址
     tab1Add () {
+      if (
+        this.tab1Arr[this.tab1Arr.length - 1].name.trim() === '' ||
+        this.tab1Arr[this.tab1Arr.length - 1].href.trim() === ''
+      ) { return this.$message.warning('网址名称或链接不能为空') }
       this.tab1Arr.push({ name: '', href: '' })
     },
     tab1Del (index) {
@@ -397,6 +400,10 @@ export default {
     },
     // 点击添加场景
     tab2Add () {
+      if (
+        this.tab2Arr[this.tab2Arr.length - 1].name.trim() === '' ||
+        this.tab2Arr[this.tab2Arr.length - 1].href.trim() === ''
+      ) { return this.$message.warning('场景名称或链接不能为空') }
       this.tab2Arr.push({ name: '', href: '' })
     },
     tab2Del (index) {
@@ -445,6 +452,31 @@ export default {
           this.$message.info('已取消删除')
         })
     },
+    // 保存
+    outBtnOk () {
+      if (this.ruleForm.name.trim() === '') { return this.$message.warning('项目名称不能为空') }
+      // 遍历文物数组，得到文物id
+      const temp = []
+      this.saveAntiqueArr.forEach((v) => {
+        temp.push(v.id)
+      })
+      // 处理项目网址数据
+      const websites = {}
+      this.tab1Arr.forEach((v) => {
+        websites[v.name] = v.href
+      })
+      // 处理三维场景数据
+      const scenes = {}
+      this.tab2Arr.forEach((v) => {
+        scenes[v.name] = v.href
+      })
+      console.log(999, {
+        ...this.ruleForm,
+        goodsIds: temp.join(','),
+        websites,
+        scenes
+      })
+    },
     // --------------附件--------------
     successFujian (file) {
       console.log('上传附件成功', file)
@@ -474,7 +506,7 @@ export default {
         }
       })
     },
-    upload_thumb_success (data) {
+    async upload_thumb_success (data) {
       this.$message.success('上传成功')
       // console.log('上传文件成功', data)
       this.imgList.push({
@@ -483,7 +515,12 @@ export default {
         id: data.data.fileId
       })
       // 把第一张的url设置为封面---如果是新增
-      if (!this.addForm.id) this.addForm.thumb = this.imgList[0].url
+      // if (!this.addForm.id || this.imgList.length === 1) this.addForm.thumb = this.imgList[0].url
+      if (this.imgList.length === 1) {
+        await modelSetIndex(data.data.fileId)
+        this.fengmianInd = 0
+        this.addForm.thumb = this.imgList[0].url
+      }
       // this.loading = false
       // this.ruleForm.thumb = data.data.filePath
     },
@@ -496,6 +533,11 @@ export default {
       })
         .then(() => {
           this.imgList.splice(index, 1)
+          if (index === this.fengmianInd) {
+            // 删除的是封面
+            this.fengmianInd = null
+            this.addForm.thumb = ''
+          }
           this.$message.success('删除成功!')
         })
         .catch(() => {
@@ -518,8 +560,12 @@ export default {
     },
     // 点击弹窗里面的保存
     async addBtnOk () {
-      if (this.addForm.name.trim() === '') { return this.$message.warning('文物名称不能为空') }
-      if (this.addForm.url.trim() === '') { return this.$message.warning('文物链接不能为空') }
+      if (this.addForm.name.trim() === '') {
+        return this.$message.warning('文物名称不能为空')
+      }
+      if (this.addForm.url.trim() === '') {
+        return this.$message.warning('文物链接不能为空')
+      }
       const temp = []
       this.imgList.forEach((v) => {
         temp.push(v.id)
@@ -528,7 +574,8 @@ export default {
       // console.log(999, this.addForm)
       const res = await modelSave(this.addForm)
       if (res.code === 0) {
-        if (!this.addForm.id) { // 新增的push进去
+        if (!this.addForm.id) {
+          // 新增的push进去
           this.saveAntiqueArr.push({
             id: res.data.id,
             name: res.data.name,
@@ -536,7 +583,7 @@ export default {
           })
         } else {
           // 修改的改变之前的数组
-          this.saveAntiqueArr.forEach(v => {
+          this.saveAntiqueArr.forEach((v) => {
             if (v.id === this.addForm.id) {
               v.name = res.data.name
               v.url = res.data.thumb
@@ -605,6 +652,7 @@ export default {
     height: 30px;
     position: absolute;
     left: 50%;
+    transform: translateX(-50%);
     bottom: 20px;
     background-color: #fff;
     border-radius: 8px;
@@ -663,7 +711,6 @@ export default {
       }
     }
     i:hover {
-
       color: #dc3545;
     }
     & > span {

src/views/tab2/index.vue

@@ -28,7 +28,7 @@
             ></el-option>
           </el-select>
         </div>
-        <div class="btn">搜 索</div>
+        <div class="btn" @click="search">搜 索</div>
       </div>
       <!-- 表格 -->
       <div class="table">
@@ -49,7 +49,7 @@
           <el-table-column label="图片">
             <template #default="{ row }">
               <div class="tabImg">
-                <img :src="baseURL + row.thumb" alt="" />
+                <img :src="baseURL + row.thumb" alt="" :onerror='defaultImg'/>
               </div>
             </template>
           </el-table-column>
@@ -114,6 +114,11 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击搜索
+    search () {
+      this.form.pageNum = 1
+      this.getGoodsList(this.form)
+    },
     // 封装获取文物列表方法
     async getGoodsList (data) {
       const res = await getGoodsList(data)