文物图片暂存一个版本

src/apis/tab1.js

@@ -0,0 +1,15 @@
+import axios from '../utils/request'
+// 获取项目类型
+export const getProjectType = () => {
+  return axios({
+    // method: 'post',
+    url: '/cms/project/base/getProjectType'
+  })
+}
+// 获取文物类型
+export const getGoodsType = () => {
+  return axios({
+    // method: 'post',
+    url: '/cms/goods/base/getGoodsType'
+  })
+}

src/assets/style/initial.css

@@ -44,4 +44,7 @@ a {
 }
 .el-upload-dragger .el-upload__text em{
   color: #DC3545;
-}
+}
+.v-modal{
+  z-index: 999 !important;
+}

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import { Message } from 'element-ui'
 
 Vue.use(VueRouter)
 
@@ -58,11 +59,24 @@ const routes = [
     ]
   }
 ]
-
 const router = new VueRouter({
-  mode: 'history',
+  // mode: 'history',
   base: process.env.BASE_URL,
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  // 如果是去登录页，不需要验证，直接下一步
+  if (to.name === 'login') next()
+  // 否则要有token值才能下一步，不然就返回登录页
+  else {
+    const token = localStorage.getItem('SWKK_token')
+    if (token) next()
+    else {
+      Message.warning('登录失效，请重新登录')
+      next({ name: 'login' })
+    }
+  }
+})
+
 export default router

src/views/tab1/tab1_add.vue

@@ -44,8 +44,12 @@
               </el-form-item>
               <el-form-item label="项目分类：">
                 <el-select v-model="ruleForm.typeId">
-                  <el-option label="区域一" value="shanghai"></el-option>
-                  <el-option label="区域二" value="beijing"></el-option>
+                  <el-option
+                    v-for="item in projectType"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  ></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="展示形式：">
@@ -91,30 +95,57 @@
           <div class="title">项目网址</div>
 
           <div class="row" v-for="(item, index) in tab1Arr" :key="index">
-            <el-input v-model="tab1Arr[index].name" placeholder="网址名称" style="width:200px;margin-right: 20px;"></el-input>
-            <el-input v-model="tab1Arr[index].herf" placeholder="URL网址链接" style="width:500px"></el-input>
-             <i class="el-icon-circle-close" @click="tab1Del(index)" v-if="index!==0"></i>
-             <div class="tab_btn" @click="tab1Add" v-else>+ 添加网址</div>
+            <el-input
+              v-model="tab1Arr[index].name"
+              placeholder="网址名称"
+              style="width: 200px; margin-right: 20px"
+            ></el-input>
+            <el-input
+              v-model="tab1Arr[index].herf"
+              placeholder="URL网址链接"
+              style="width: 500px"
+            ></el-input>
+            <i
+              class="el-icon-circle-close"
+              @click="tab1Del(index)"
+              v-if="index !== 0"
+            ></i>
+            <div class="tab_btn" @click="tab1Add" v-else>+ 添加网址</div>
           </div>
-
         </div>
         <div id="tab2" class="conten_box">
           <div class="title">三维场景</div>
 
           <div class="row" v-for="(item, index) in tab2Arr" :key="index">
-            <el-input v-model="tab2Arr[index].name" placeholder="场景名称" style="width:200px;margin-right: 20px;"></el-input>
-            <el-input v-model="tab2Arr[index].herf" placeholder="URL网址链接" style="width:500px"></el-input>
-             <i class="el-icon-circle-close" @click="tab2Del(index)" v-if="index!==0"></i>
-             <div class="tab_btn" @click="tab2Add" v-else>+ 添加场景</div>
+            <el-input
+              v-model="tab2Arr[index].name"
+              placeholder="场景名称"
+              style="width: 200px; margin-right: 20px"
+            ></el-input>
+            <el-input
+              v-model="tab2Arr[index].herf"
+              placeholder="URL网址链接"
+              style="width: 500px"
+            ></el-input>
+            <i
+              class="el-icon-circle-close"
+              @click="tab2Del(index)"
+              v-if="index !== 0"
+            ></i>
+            <div class="tab_btn" @click="tab2Add" v-else>+ 添加场景</div>
           </div>
         </div>
 
         <div id="tab3" class="conten_box">
-          <div class="title">资料文档</div>
+          <div class="title" style="margin-bottom: 20px">资料文档</div>
           <el-upload
             class="upload-demo"
             drag
-            action="https://jsonplaceholder.typicode.com/posts/"
+            :action="baseURL + `/cms/goods/upload/${projectId}`"
+            :headers="{ token }"
+            :on-success="successFujian"
+            :on-remove="handleRemove"
+            :show-file-list="true"
             multiple
           >
             <i class="el-icon-upload"></i>
@@ -122,14 +153,9 @@
               将文件拖到此处，或<em>点击上传</em>
             </div>
             <div class="el-upload__tip" slot="tip">
-              只能上传jpg/png文件，且不超过500kb
+              <!-- 只能上传jpg/png文件，且不超过500kb -->
             </div>
           </el-upload>
-          <div class="imgBox">
-            <div>
-              <img src="@/assets/img/wd1.png" alt="" />12345678911111111
-            </div>
-          </div>
         </div>
         <div id="tab4" class="conten_box">
           <div class="title">文物</div>
@@ -138,6 +164,8 @@
               <img src="@/assets/img/logo22.png" alt="" />1234567891111111111111
             </div>
             <div><img src="@/assets/img/logo22.png" alt="" />12345678</div>
+            <!-- 点击文物+号新增文物 -->
+            <div class="uploaImg" @click="addAntique">+</div>
           </div>
         </div>
       </div>
@@ -147,13 +175,104 @@
         <div class="edit">保 存</div>
       </div>
     </div>
+    <!-- 点击文物的+号出现弹出层 -->
+    <el-dialog title="添加文物" :visible.sync="addIsShow">
+      <el-form
+        :model="addForm"
+        :rules="addRules"
+        ref="addForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="名称：" prop="name">
+          <el-input
+            v-model="addForm.name"
+            placeholder="请输入名称"
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="链接：" prop="url">
+          <el-input
+            style="width: 500px"
+            v-model="addForm.url"
+            placeholder="请输入网址链接"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="文物类别：">
+          <el-select v-model="addForm.goodsTypeId">
+            <el-option
+              v-for="item in antiqueArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文物图片：">
+          <el-upload
+            :action="baseURL + '/cms/goods/upload'"
+            :headers="{token}"
+            list-type="picture-card"
+            :auto-upload="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <i slot="default" class="el-icon-plus"></i>
+            <div slot="file" slot-scope="{ file }" class="myttttttttt">
+              <!-- 底部的设为封面按钮 -->
+              <div class="fengmian">设为封面</div>
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+              />
+              <span class="el-upload-list__item-actions">
+                <span
+                  class="el-upload-list__item-preview"
+                  @click="handlePictureCardPreview(file)"
+                >
+                  <i class="el-icon-zoom-in"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleDownload(file)"
+                >
+                  <i class="el-icon-download"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemoveImg(file)"
+                >
+                  <i class="el-icon-delete"></i>
+                </span>
+              </span>
+            </div>
+            <div class="el-upload__tip" slot="tip">
+              支持png / jpg / gif / jpeg的图片格式，最大支持20M。
+            </div>
+          </el-upload>
+          <div class="lookImg" v-if="dialogVisible">
+            <img :src="dialogImageUrl" alt="" />
+            <div class="imgBtnX" @click="dialogVisible = false">关 闭</div>
+          </div>
+          <!-- <el-dialog :visible.sync="dialogVisible" class="lookImg">
+          </el-dialog> -->
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addIsShow = false">取 消</el-button>
+        <el-button type="primary" @click="addIsShow = false">保 存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { getProjectType, getGoodsType } from '@/apis/tab1'
+import axios from '@/utils/request'
 export default {
   // import引入的组件需要注入到对象中才能使用
   name: 'tab1Add',
@@ -161,6 +280,26 @@ export default {
   data () {
     // 这里存放数据
     return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      addIsShow: false,
+      addForm: {
+        name: '',
+        url: '',
+        goodsTypeId: null
+      },
+      addRules: {
+        name: { required: true, message: '不能为空', trigger: 'blur' },
+        url: { required: true, message: '不能为空', trigger: 'blur' }
+      },
+      // 文物类别数组
+      antiqueArr: [],
+      // 文物弹窗数据↑
+      projectId: 'SWKK',
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
       // 项目网址数据
       tab1Arr: [{ name: '', href: '' }],
       tab1: {
@@ -184,12 +323,14 @@ export default {
       ruleForm: {
         name: '',
         age: '',
-        typeId: 'shanghai',
+        typeId: 1,
         application: 'web',
         technology: 'live',
         level: 1,
         cooperation: ''
       },
+      // 项目分类数组
+      projectType: [],
       rules: {
         name: { required: true, message: '请输入项目名称', trigger: 'blur' }
       }
@@ -201,6 +342,13 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击文物+号新增文物
+    async addAntique () {
+      const res = await getGoodsType()
+      this.antiqueArr = res.data
+      this.antiqueArr.unshift({ id: '', name: '请选择' })
+      this.addIsShow = true
+    },
     // 上面的tab栏切换
     tabCut (index) {
       this.topTabInd = index
@@ -240,10 +388,62 @@ export default {
         .catch(() => {
           this.$message.info('已取消删除!')
         })
+    },
+    // --------------附件--------------
+    successFujian (file) {
+      console.log('上传附件成功', file)
+    },
+    handleRemove (file) {
+      console.log('删除附件成功', file)
+    },
+    // ----------------文物弹窗里面的图片---------------
+    beforethumbUpload (file) {
+      console.log('上传文件前校验', file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 20
+      const typeOk = file.type === 'image/png' || file.type === 'image/jpeg'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过20M！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+    },
+    upload_thumb_success (data) {
+      console.log('上传文件成功', data)
+      // this.loading = false
+      // this.ruleForm.thumb = data.data.filePath
+    },
+    handleRemoveImg (file) {
+      // 点击删除
+      console.log(file)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleDownload (file) {
+      // 点击下载
+      console.log(file)
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 获取用户token
+    this.token = localStorage.getItem('SWKK_token')
+    // 获取项目类型
+    const res = await getProjectType()
+    this.projectType = res.data
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -256,6 +456,65 @@ export default {
 }
 </script>
 <style lang='less' scoped>
+.lookImg {
+  padding-top: 15px;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.7);
+  img {
+    max-width: 80vw;
+    max-height: 80vh;
+  }
+  .imgBtnX {
+    cursor: pointer;
+    width: 100px;
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+/deep/.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: 146px;
+  height: 146px;
+  object-fit: contain;
+}
+/deep/.el-upload-list--picture-card .el-upload-list__item {
+  overflow: visible;
+}
+/deep/.el-upload-list--picture-card {
+  display: flex;
+  margin-bottom: 40px;
+}
+.myttttttttt {
+  .fengmian {
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    z-index: 999;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -35px;
+    background-color: #dc3545;
+    width: 100px;
+    height: 30px;
+    color: #fff;
+  }
+}
 /deep/.el-select {
   width: 500px;
 }
@@ -357,6 +616,28 @@ export default {
           font-size: 24px;
         }
       }
+      .imgBox {
+        display: flex;
+        flex-wrap: wrap;
+        & > div {
+          cursor: pointer;
+          word-wrap: break-word;
+          text-align: center;
+          width: 120px;
+          margin: 20px 0 0 10px;
+        }
+        img {
+          width: 100px;
+          height: 75px;
+          object-fit: contain;
+        }
+        .uploaImg {
+          color: #ccc;
+          border: 1px solid #ccc;
+          font-size: 80px;
+          font-weight: 700;
+        }
+      }
     }
     .tabAll {
       max-height: 600px;
@@ -387,6 +668,5 @@ export default {
       background-color: #dc3545 !important;
     }
   }
-
 }
 </style>