添加预览

src/helpers/utils.js

@@ -7,3 +7,15 @@ export const array2object = (list = [], k = 'id', v) => {
   }
   return data
 }
+
+export const getStuName = () => {
+  if (location.hostname.indexOf('dev') > -1) {
+    return 'http://mstudev.dayaedu.com'
+  } else if (location.hostname.indexOf('online') > -1) {
+    return 'https://mstuonline.dayaedu.com'
+  }  else if (location.hostname.indexOf('localhost') > -1) {
+    return 'http://localhost:9001'
+  } else {
+    return 'http://mstutest.dayaedu.com' //'http://localhost:9001' //
+  }
+}

src/views/resetTeaming/components/training-photos/index.vue

@@ -5,6 +5,7 @@
       <auth :auths="['photoAlbum/batchUpdate']"><el-button type="primary" v-if="!sorting" @click="startSort">调整排序</el-button></auth>
       <el-button type="primary" v-if="sorting" @click="setSort()">确定</el-button>
       <el-button type="primary" v-if="sorting" @click="stopSort()">取消</el-button>
+      <el-button type="primary" @click="openPreview()">预览</el-button>
     </div>
     <empty v-if="activeNames && activeNames.length == 0"/>
     <el-collapse style="margin-top: 20px;" v-model="activeNames">
@@ -70,6 +71,18 @@
         @submited="submited"
       />
     </el-dialog>
+    <el-dialog
+      :visible.sync="preview"
+      v-if="preview"
+      width="375px"
+      class="preview"
+    >
+      <div class="preview-title" slot="title">
+        <span>预览</span>
+        <span @click="backPreviewHome">返回相册首页</span>
+      </div>
+      <iframe v-if="previewShow" class="iframe" :src="stuPathname"/>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -77,6 +90,8 @@ import dayjs from 'dayjs'
 import draggable from 'vuedraggable'
 import { photoAlbumDel, photoAlbumQueryPage, photoAlbumUpdate } from './api'
 import cloneDeep from '@/helpers/deep-clone'
+import { getStuName } from '@/helpers/utils'
+import { getToken } from '@/utils/auth'
 import group from './group'
 import formPopup from './form'
 import uploadPopup from './upload'
@@ -102,6 +117,9 @@ export default {
       activeNames: [],
       changed: {},
       yearsList: [],
+      preview: false,
+      previewShow: true,
+      stuPathname: getStuName() + '?token=' + getToken() + '/#/preview/photos?musicGroupId=' + this.$route.query.id + '&canQuitTeam=1'
     }
   },
   mounted() {
@@ -234,6 +252,16 @@ export default {
     openUpload() {
       this.uploadVisible = true
     },
+    openPreview() {
+      this.preview = true
+    },
+    backPreviewHome() {
+      this.previewShow = false
+      setTimeout(() => {
+        this.previewShow = true
+      })
+      // this.$refs.preview?.src = this.stuPathname
+    }
   }
 }
 </script>
@@ -309,6 +337,23 @@ export default {
     margin-left: -100px;
   }
 }
+.preview{
+  /deep/.el-dialog__body{
+    padding: 0;
+  }
+}
+.preview-title{
+  color: #fff;
+  >span:last-child{
+    cursor: pointer;
+    font-size: 12px;
+  }
+}
+.iframe{
+  width: 375px;
+  height: 580px;
+  border: 0;
+}
 // .group{
 // }
 </style>