|
@@ -1,91 +1,78 @@
|
|
|
<template>
|
|
|
<div class="table-select">
|
|
|
- <span class="title">{{title}}</span>
|
|
|
+ <span class="title">{{ title }}</span>
|
|
|
<div class="close-btn"><i class="iconfont icon-pop-ups_shut-down" @click="$emit('cancle')"></i></div>
|
|
|
|
|
|
<div class="material-tab">
|
|
|
- <a v-if="selectableType.includes('image')" class="material-tab-item" @click.prevent="currentMaterialType = 'image'">
|
|
|
- <span
|
|
|
- :class="{active: currentMaterialType === 'image'}"
|
|
|
- class="text"
|
|
|
- >
|
|
|
- {{image}}
|
|
|
+ <a v-if="selectableType.includes('image')" class="material-tab-item"
|
|
|
+ @click.prevent="currentMaterialType = 'image'">
|
|
|
+ <span :class="{ active: currentMaterialType === 'image' }" class="text">
|
|
|
+ {{ image }}
|
|
|
</span>
|
|
|
<div v-if="currentMaterialType === 'image'" class="bottom-line"></div>
|
|
|
</a>
|
|
|
<a v-if="selectableType.includes('pano')" class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
|
|
|
- <span
|
|
|
- :class="{active: currentMaterialType === 'pano'}"
|
|
|
- class="text"
|
|
|
- >
|
|
|
- {{panorama}}
|
|
|
+ <span :class="{ active: currentMaterialType === 'pano' }" class="text">
|
|
|
+ {{ panorama }}
|
|
|
</span>
|
|
|
<div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
|
|
|
</a>
|
|
|
- <a v-if="selectableType.includes('audio')" class="material-tab-item" @click.prevent="currentMaterialType = 'audio'">
|
|
|
- <span
|
|
|
- :class="{active: currentMaterialType === 'audio'}"
|
|
|
- class="text"
|
|
|
- >
|
|
|
- {{audio}}
|
|
|
+ <a v-if="selectableType.includes('audio')" class="material-tab-item"
|
|
|
+ @click.prevent="currentMaterialType = 'audio'">
|
|
|
+ <span :class="{ active: currentMaterialType === 'audio' }" class="text">
|
|
|
+ {{ audio }}
|
|
|
</span>
|
|
|
<div v-if="currentMaterialType === 'audio'" class="bottom-line"></div>
|
|
|
</a>
|
|
|
- <a v-if="selectableType.includes('video')" class="material-tab-item" @click.prevent="currentMaterialType = 'video'">
|
|
|
- <span
|
|
|
- :class="{active: currentMaterialType === 'video'}"
|
|
|
- class="text"
|
|
|
- >
|
|
|
- {{video}}
|
|
|
+ <a v-if="selectableType.includes('video')" class="material-tab-item"
|
|
|
+ @click.prevent="currentMaterialType = 'video'">
|
|
|
+ <span :class="{ active: currentMaterialType === 'video' }" class="text">
|
|
|
+ {{ video }}
|
|
|
</span>
|
|
|
<div v-if="currentMaterialType === 'video'" class="bottom-line"></div>
|
|
|
</a>
|
|
|
<a v-if="selectableType.includes('3D')" class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
|
|
|
- <span
|
|
|
- :class="{active: currentMaterialType === '3D'}"
|
|
|
- class="text"
|
|
|
- >
|
|
|
- {{scene}}
|
|
|
+ <span :class="{ active: currentMaterialType === '3D' }" class="text">
|
|
|
+ {{ scene }}
|
|
|
</span>
|
|
|
<div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
|
|
|
</a>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="filter">
|
|
|
- <input type="text" :placeholder="keywords" v-model="searchKey"/>
|
|
|
- <i v-if="!searchKey" class="iconfont icon-editor_search search-icon"/>
|
|
|
- <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
|
|
|
+ <input type="text" :placeholder="keywords" v-model="searchKey" />
|
|
|
+ <i v-if="!searchKey" class="iconfont icon-editor_search search-icon" />
|
|
|
+ <i v-if="searchKey" @click="searchKey = ''" class="iconfont icontoast_red clear-icon"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="table table-pano" v-show="currentMaterialType === 'pano'">
|
|
|
<div class="table-head-row">
|
|
|
<span class="table-head">1</span>
|
|
|
- <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
|
|
|
+ <span class="table-head" v-for="(item, i) in tableHeadersForPano" :key="i">
|
|
|
+ {{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="panoListLocalLength !== 0 || hasMorePanoData"
|
|
|
- class="table-body"
|
|
|
+ <div v-if="panoListLocalLength !== 0 || hasMorePanoData" class="table-body"
|
|
|
v-infinite-scroll="requestMorePanoData"
|
|
|
- :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
|
|
|
- >
|
|
|
+ :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData">
|
|
|
<!-- vuex中的上传中数据 -->
|
|
|
<div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid" @click="onClickRow">
|
|
|
<!-- 如果已经上传成功 -->
|
|
|
<template v-if="item.status === 'SUCCESS'">
|
|
|
<span class="table-data">
|
|
|
- <RadioOrCheckbox
|
|
|
- class="checkbox"
|
|
|
- :isLightTheme="true"
|
|
|
- :isMultiSelection="isMultiSelection"
|
|
|
+ <RadioOrCheckbox class="checkbox" :isLightTheme="true" :isMultiSelection="isMultiSelection"
|
|
|
:isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
|
|
|
- @change="v => selectItem(item.successInfo, v)"
|
|
|
- />
|
|
|
+ @change="v => selectItem(item.successInfo, v)" />
|
|
|
</span>
|
|
|
<span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
|
|
|
- <div v-if="tableItemStructure.type=='image'" class="list-img">
|
|
|
- <img :src="item.successInfo[tableItemStructure.key] + (Number(item.fileSize)>512 ? `?x-oss-process=image/resize,p_20&${Math.random()}` : ``)" alt="">
|
|
|
+ <div v-if="tableItemStructure.type == 'image'" class="list-img">
|
|
|
+ <img
|
|
|
+ :src="item.successInfo[tableItemStructure.key] + (Number(item.fileSize) > 512 ? $imgsuffix : ``)"
|
|
|
+ alt="">
|
|
|
</div>
|
|
|
- <span v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
|
|
|
+ <span v-else class="ellipsis"
|
|
|
+ v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{
|
|
|
+ item.successInfo[tableItemStructure.key]
|
|
|
+ }}</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
<!-- 如果还在上传或切图处理中 -->
|
|
@@ -97,13 +84,16 @@
|
|
|
</div>
|
|
|
</span>
|
|
|
<span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
|
|
|
- <div v-if="tableItemStructure.type=='image'" class="list-img">
|
|
|
+ <div v-if="tableItemStructure.type == 'image'" class="list-img">
|
|
|
<img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
|
|
|
</div>
|
|
|
- <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
|
|
|
- <span v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">上传素材 {{Math.round(item.progress * 100)}}%</span>
|
|
|
- <span v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{item.statusText}}</span>
|
|
|
- <span v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
|
|
|
+ <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
|
|
|
+ <span v-if="tableItemStructure.key === 'fileSize' && item.ifKnowProgress">{{$i18n.t(`gather.upload_material`)}} {{ Math.round(item.progress
|
|
|
+ * 100)
|
|
|
+ }}%</span>
|
|
|
+ <span v-if="tableItemStructure.key === 'fileSize' && !item.ifKnowProgress">{{ item.statusText }}</span>
|
|
|
+ <span v-if="tableItemStructure.key === 'name'" class="ellipsis"
|
|
|
+ v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
<!-- 如果上传失败了 -->
|
|
@@ -115,31 +105,30 @@
|
|
|
</div>
|
|
|
</span>
|
|
|
<span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
|
|
|
- <div v-if="tableItemStructure.type=='image'" class="list-img">
|
|
|
+ <div v-if="tableItemStructure.type == 'image'" class="list-img">
|
|
|
<img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
|
|
|
</div>
|
|
|
- <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
|
|
|
- <span v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
|
|
|
- <span v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
|
|
|
+ <span v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
|
|
|
+ <span v-if="tableItemStructure.key === 'fileSize'">{{ $i18n.t(`tips_code.FAILURE_3025`) }}</span>
|
|
|
+ <span v-if="tableItemStructure.key === 'name'" class="ellipsis"
|
|
|
+ v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
<!-- 本组件内的列表数据 -->
|
|
|
- <div class="table-body-row" v-for="(item,i) in panoList" :key="i" @click="onClickRow">
|
|
|
+ <div class="table-body-row" v-for="(item, i) in panoList" :key="i" @click="onClickRow">
|
|
|
<span class="table-data">
|
|
|
- <RadioOrCheckbox
|
|
|
- class="checkbox"
|
|
|
- :isLightTheme="true"
|
|
|
- :isMultiSelection="isMultiSelection"
|
|
|
+ <RadioOrCheckbox class="checkbox" :isLightTheme="true" :isMultiSelection="isMultiSelection"
|
|
|
:isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
|
|
|
- @change="v => selectItem(item, v)"
|
|
|
- />
|
|
|
+ @change="v => selectItem(item, v)" />
|
|
|
</span>
|
|
|
- <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
|
|
|
- <div v-if="sub.type=='image'" class="list-img">
|
|
|
- <img :src="item[sub.key] + (Number(item.fileSize)>512 ? `?x-oss-process=image/resize,p_20&${Math.random()}` : ``)" alt="">
|
|
|
+ <span class="table-data" v-for="(sub, idx) in tableHeadersForPano" :key="idx">
|
|
|
+ <div v-if="sub.type == 'image'" class="list-img">
|
|
|
+ <img
|
|
|
+ :src="item[sub.key] + (Number(item.fileSize) > 512 ? $imgsuffix : ``)"
|
|
|
+ alt="">
|
|
|
</div>
|
|
|
- <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
|
|
|
+ <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{ item[sub.key] }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -147,11 +136,11 @@
|
|
|
<div v-else class="no-data">
|
|
|
<div v-if="latestUsedSearchKey">
|
|
|
<img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
|
|
|
- <span>{{no_serch_result}}</span>
|
|
|
+ <span>{{ no_serch_result }}</span>
|
|
|
</div>
|
|
|
<div v-if="!latestUsedSearchKey">
|
|
|
<img :src="require('@/assets/images/default/empty_04.png')" alt="">
|
|
|
- <span>{{no_material_result}}</span>
|
|
|
+ <span>{{ no_material_result }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -159,29 +148,24 @@
|
|
|
<div class="table table-3D" v-show="currentMaterialType === '3D'">
|
|
|
<div class="table-head-row">
|
|
|
<span class="table-head">1</span>
|
|
|
- <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{item.name}}</span>
|
|
|
+ <span class="table-head" v-for="(item, i) in tableHeadersFor3D" :key="i">
|
|
|
+ {{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="scene3DList.length !== 0 || hasMore3DData"
|
|
|
- class="table-body"
|
|
|
- v-infinite-scroll="requestMore3DData"
|
|
|
- :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData"
|
|
|
- >
|
|
|
- <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i">
|
|
|
+ <div v-if="scene3DList.length !== 0 || hasMore3DData" class="table-body" v-infinite-scroll="requestMore3DData"
|
|
|
+ :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData">
|
|
|
+ <div class="table-body-row" v-for="(item, i) in scene3DList" :key="i">
|
|
|
<span class="table-data">
|
|
|
- <RadioOrCheckbox
|
|
|
- class="checkbox"
|
|
|
- :isLightTheme="true"
|
|
|
- :isMultiSelection="isMultiSelection"
|
|
|
+ <RadioOrCheckbox class="checkbox" :isLightTheme="true" :isMultiSelection="isMultiSelection"
|
|
|
:isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
|
|
|
- @change="v => selectItem(item, v)"
|
|
|
- />
|
|
|
+ @change="v => selectItem(item, v)" />
|
|
|
</span>
|
|
|
- <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
|
|
|
- <div v-if="sub.type=='image'" class="list-img">
|
|
|
- <img :src="item[sub.key] + (Number(item.fileSize)>512 ? `?x-oss-process=image/resize,p_20&${Math.random()}` : ``)" alt="">
|
|
|
+ <span class="table-data" v-for="(sub, idx) in tableHeadersFor3D" :key="idx">
|
|
|
+ <div v-if="sub.type == 'image'" class="list-img">
|
|
|
+ <img
|
|
|
+ :src="item[sub.key] + (Number(item.fileSize) > 512 ? $imgsuffix : ``)"
|
|
|
+ alt="">
|
|
|
</div>
|
|
|
- <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
|
|
|
+ <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{ item[sub.key] }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -189,13 +173,13 @@
|
|
|
<div v-else class="no-data">
|
|
|
<div v-if="latestUsedSearchKey">
|
|
|
<img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
|
|
|
- <span>{{no_serch_result}}</span>
|
|
|
+ <span>{{ no_serch_result }}</span>
|
|
|
</div>
|
|
|
<div v-if="!latestUsedSearchKey">
|
|
|
<img :src="require('@/assets/images/default/empty_04.png')" alt="">
|
|
|
- <span>{{no_material_result}}</span>
|
|
|
+ <span>{{ no_material_result }}</span>
|
|
|
<a href="/#/">
|
|
|
- <button class="ui-button">{{how_to_shoot}}</button>
|
|
|
+ <button class="ui-button">{{ how_to_shoot }}</button>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -203,30 +187,23 @@
|
|
|
|
|
|
<div class="btns">
|
|
|
<button v-if="currentMaterialType !== '3D'" class="ui-button upload-btn" @click="onClickUpload">
|
|
|
- <span>{{upload_material}}</span>
|
|
|
- <i class="iconfont icon-material_prompt tool-tip-for-editor"
|
|
|
- v-tooltip="
|
|
|
- currentMaterialType === 'image' ? img_size :
|
|
|
+ <span>{{ upload_material }}</span>
|
|
|
+ <i :key="currentMaterialType" class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="
|
|
|
+ currentMaterialType === 'image' ? img_size :
|
|
|
currentMaterialType === 'pano' ? pano_size :
|
|
|
- currentMaterialType === 'audio' ? audio_size :
|
|
|
- currentMaterialType === 'video' ? video_size : ''
|
|
|
- ">
|
|
|
+ currentMaterialType === 'audio' ? audio_size :
|
|
|
+ currentMaterialType === 'video' ? video_size : ''
|
|
|
+ ">
|
|
|
</i>
|
|
|
- <FileInput
|
|
|
- ref="file-input"
|
|
|
- :failString="fileInputFailString"
|
|
|
- :limitFailStr="fileInputLimitFailStr"
|
|
|
- :acceptType="fileInputAcceptType"
|
|
|
- :mediaType="fileInputMediaType"
|
|
|
- :limit="fileInputLimit"
|
|
|
- @file-change="onFileInputChange"
|
|
|
- ></FileInput>
|
|
|
+ <FileInput ref="file-input" :failString="fileInputFailString" :limitFailStr="fileInputLimitFailStr"
|
|
|
+ :acceptType="fileInputAcceptType" :mediaType="fileInputMediaType" :limit="fileInputLimit"
|
|
|
+ @file-change="onFileInputChange"></FileInput>
|
|
|
</button>
|
|
|
<div v-else class="button-placeholder"></div>
|
|
|
<div>
|
|
|
- <button class="ui-button cancel" @click="$emit('cancle')">{{cancel}}</button>
|
|
|
- <button class="ui-button submit" :class="{disable: !select.length}" @click="onClickComfirm">
|
|
|
- {{comfirm}}
|
|
|
+ <button class="ui-button cancel" @click="$emit('cancle')">{{ cancel }}</button>
|
|
|
+ <button class="ui-button submit" :class="{ disable: !select.length }" @click="onClickComfirm">
|
|
|
+ {{ comfirm }}
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -249,20 +226,20 @@ import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
|
|
|
import { mapState } from "vuex";
|
|
|
// import AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
|
|
|
import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
|
|
|
-import {i18n} from "@/lang"
|
|
|
+import { i18n } from "@/lang"
|
|
|
|
|
|
export default {
|
|
|
- props:{
|
|
|
- title:{
|
|
|
- default:'',
|
|
|
- type:String
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
},
|
|
|
primaryKey: {
|
|
|
- default:'id'
|
|
|
+ default: 'id'
|
|
|
},
|
|
|
selectableType: {
|
|
|
type: Array,
|
|
|
- default: function() {
|
|
|
+ default: function () {
|
|
|
return [
|
|
|
'image',
|
|
|
'pano',
|
|
@@ -285,12 +262,12 @@ export default {
|
|
|
default: '',
|
|
|
},
|
|
|
},
|
|
|
- components:{
|
|
|
+ components: {
|
|
|
FileInput,
|
|
|
// AudioIconCanPlay,
|
|
|
RadioOrCheckbox,
|
|
|
},
|
|
|
- watch:{
|
|
|
+ watch: {
|
|
|
searchKey: {
|
|
|
handler: function () {
|
|
|
this.refreshMaterialList(this.currentMaterialType)
|
|
@@ -329,7 +306,7 @@ export default {
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
...mapState({
|
|
|
uploadStatusListAudio: 'uploadStatusListAudio',
|
|
|
uploadStatusListImage: 'uploadStatusListImage',
|
|
@@ -365,16 +342,16 @@ export default {
|
|
|
let ret = ''
|
|
|
switch (this.currentMaterialType) {
|
|
|
case 'pano':
|
|
|
- ret = '格式错误,请上传2:1、120MB以内、jpg格式的全景图片'
|
|
|
+ ret = this.$i18n.t(`gather.pano_fail`)
|
|
|
break;
|
|
|
case 'image':
|
|
|
- ret = '格式错误,请上传10MB以内、jpg/png格式的图片'
|
|
|
+ ret = this.$i18n.t(`gather.img_fail`)
|
|
|
break;
|
|
|
case 'audio':
|
|
|
- ret = '格式错误,请上传20MB以内、mp3格式的音频'
|
|
|
+ ret = this.$i18n.t(`gather.audio_fail`)
|
|
|
break;
|
|
|
case 'video':
|
|
|
- ret = '格式错误,请上传200MB以内、mp4格式的视频'
|
|
|
+ ret = this.$i18n.t(`gather.video_fail`)
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
@@ -385,16 +362,16 @@ export default {
|
|
|
let ret = ''
|
|
|
switch (this.currentMaterialType) {
|
|
|
case 'pano':
|
|
|
- ret = '过大,请上传2:1、120MB以内、jpg格式的全景图片'
|
|
|
+ ret = this.$i18n.t(`gather.pano_limit`)
|
|
|
break;
|
|
|
case 'image':
|
|
|
- ret = '过大,请上传10MB以内、jpg/png格式的图片'
|
|
|
+ ret = this.$i18n.t(`gather.img_limit`)
|
|
|
break;
|
|
|
case 'audio':
|
|
|
- ret = '过大,请上传20MB以内、mp3格式的音频'
|
|
|
+ ret = this.$i18n.t(`gather.audio_limit`)
|
|
|
break;
|
|
|
case 'video':
|
|
|
- ret = '过大,请上传200MB以内、mp4格式的视频'
|
|
|
+ ret = this.$i18n.t(`gather.video_limit`)
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
@@ -499,7 +476,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
no_serch_result: i18n.t("gather.no_serch_result"),
|
|
|
no_material_result: i18n.t("gather.no_material_result"),
|
|
@@ -517,19 +494,19 @@ export default {
|
|
|
video_size: i18n.t("gather.video_size"),
|
|
|
cancel: i18n.t("gather.cancel"),
|
|
|
comfirm: i18n.t("gather.comfirm"),
|
|
|
-
|
|
|
+
|
|
|
imageList: [],
|
|
|
panoList: [],
|
|
|
audioList: [],
|
|
|
videoList: [],
|
|
|
scene3DList: [],
|
|
|
-
|
|
|
+
|
|
|
select: [],
|
|
|
- searchKey:'', // 搜索关键词
|
|
|
+ searchKey: '', // 搜索关键词
|
|
|
latestUsedSearchKey: '',
|
|
|
|
|
|
currentMaterialType: this.initialMaterialType,
|
|
|
-
|
|
|
+
|
|
|
isRequestingMoreImageData: false,
|
|
|
isRequestingMorePanoData: false,
|
|
|
isRequestingMoreAudioData: false,
|
|
@@ -721,7 +698,7 @@ export default {
|
|
|
}
|
|
|
)
|
|
|
},
|
|
|
- refreshMaterialList: debounce(function(type) {
|
|
|
+ refreshMaterialList: debounce(function (type) {
|
|
|
if (type === 'image') {
|
|
|
this.isRequestingMoreImageData = false
|
|
|
this.hasMoreImageData = true
|
|
@@ -791,7 +768,7 @@ export default {
|
|
|
console.log('格式不对!');
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传2:1、120MB以内、jpg格式的全景图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -801,7 +778,7 @@ export default {
|
|
|
if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”名称过长,请上传标题在50字以内的全景图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.too_long_word`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -810,13 +787,13 @@ export default {
|
|
|
|
|
|
let WHRate = null
|
|
|
try {
|
|
|
- const {width, height} = await getImgWH(eachFile)
|
|
|
+ const { width, height } = await getImgWH(eachFile)
|
|
|
WHRate = width / height
|
|
|
- } catch(e) {
|
|
|
+ } catch (e) {
|
|
|
console.error('获取图像宽高失败:', e)
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传2:1、120MB以内、jpg格式的全景图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -825,7 +802,7 @@ export default {
|
|
|
if (WHRate !== 2) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传2:1、120MB以内、jpg格式的全景图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.pano_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -837,7 +814,7 @@ export default {
|
|
|
ifKnowProgress: true,
|
|
|
progress: 0,
|
|
|
status: 'LOADING',
|
|
|
- statusText: "正在上传素材",
|
|
|
+ statusText: this.$i18n.t(`gather.uploading_material`),
|
|
|
uid: `u_${this.$randomWord(true, 8, 8)}`,
|
|
|
abortHandler: null,
|
|
|
backendId: '',
|
|
@@ -852,7 +829,7 @@ export default {
|
|
|
uid: itemInUploadList.uid,
|
|
|
},
|
|
|
(response) => { // 上传成功
|
|
|
- itemInUploadList.statusText = '正在切图处理'
|
|
|
+ itemInUploadList.statusText = this.$i18n.t(`gather.cutting`)
|
|
|
itemInUploadList.ifKnowProgress = false
|
|
|
itemInUploadList.backendId = response.data.id
|
|
|
},
|
|
@@ -866,7 +843,7 @@ export default {
|
|
|
} else {
|
|
|
console.log('失败!');
|
|
|
itemInUploadList.status = 'FAIL'
|
|
|
- itemInUploadList.statusText = '素材上传失败'
|
|
|
+ itemInUploadList.statusText = this.$i18n.t(`gather.material_upload_fail`)
|
|
|
}
|
|
|
},
|
|
|
(progress) => {
|
|
@@ -880,7 +857,7 @@ export default {
|
|
|
},
|
|
|
onImageFileInputChange(e) {
|
|
|
console.log('tableHeadersForImage: ', this.tableHeadersForImage);
|
|
|
-
|
|
|
+
|
|
|
e.files.forEach((eachFile, i) => {
|
|
|
if (
|
|
|
eachFile.type.indexOf("jpeg") <= -1 &&
|
|
@@ -888,7 +865,7 @@ export default {
|
|
|
) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传10MB以内、jpg/png格式的图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.img_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -898,7 +875,7 @@ export default {
|
|
|
if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”名称过长,请上传标题在50字以内的图片`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.too_long_word`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -910,12 +887,12 @@ export default {
|
|
|
ifKnowProgress: true,
|
|
|
progress: 0,
|
|
|
status: 'LOADING',
|
|
|
- statusText: "正在上传素材",
|
|
|
+ statusText: this.$i18n.t(`gather.uploading_material`),
|
|
|
uid: `u_${this.$randomWord(true, 8, 8)}`,
|
|
|
abortHandler: null,
|
|
|
successInfo: null,
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
itemInUploadList.abortHandler = uploadMaterial(
|
|
|
{
|
|
|
file: eachFile
|
|
@@ -945,7 +922,7 @@ export default {
|
|
|
} else {
|
|
|
console.log('失败!');
|
|
|
itemInUploadList.status = 'FAIL'
|
|
|
- itemInUploadList.statusText = '素材上传失败'
|
|
|
+ itemInUploadList.statusText = this.$i18n.t(`gather.material_upload_fail`)
|
|
|
}
|
|
|
},
|
|
|
(progress) => {
|
|
@@ -962,7 +939,7 @@ export default {
|
|
|
if (eachFile.name.toLowerCase().indexOf("mp3") <= -1) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传20MB以内、mp3格式的音频`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.audio_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -972,7 +949,7 @@ export default {
|
|
|
if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”名称过长,请上传标题在50字以内的音频`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.too_long_word_audio`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -984,11 +961,11 @@ export default {
|
|
|
ifKnowProgress: true,
|
|
|
progress: 0,
|
|
|
status: 'LOADING',
|
|
|
- statusText: "正在上传素材",
|
|
|
+ statusText: this.$i18n.t(`gather.uploading_material`),
|
|
|
uid: `u_${this.$randomWord(true, 8, 8)}`,
|
|
|
abortHandler: null,
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
itemInUploadList.abortHandler = uploadMaterial(
|
|
|
{
|
|
|
file: eachFile
|
|
@@ -1019,7 +996,7 @@ export default {
|
|
|
} else {
|
|
|
console.log('上传失败');
|
|
|
itemInUploadList.status = 'FAIL'
|
|
|
- itemInUploadList.statusText = '素材上传失败'
|
|
|
+ itemInUploadList.statusText = this.$i18n.t(`gather.material_upload_fail`)
|
|
|
}
|
|
|
},
|
|
|
(progress) => {
|
|
@@ -1036,7 +1013,7 @@ export default {
|
|
|
if (eachFile.name.toLowerCase().indexOf("mp4") <= -1) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”格式错误,请上传200MB以内、mp4格式的视频`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.video_fail`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -1046,7 +1023,7 @@ export default {
|
|
|
if (eachFile.name.substring(0, eachFile.name.lastIndexOf(".")).length > 50) {
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
- message: `“${eachFile.name}”名称过长,请上传标题在50字以内的视频`,
|
|
|
+ message: `“${eachFile.name}”${this.$i18n.t(`gather.too_long_word_video`)}`,
|
|
|
type: "warning",
|
|
|
});
|
|
|
}, i * 100);
|
|
@@ -1058,11 +1035,11 @@ export default {
|
|
|
ifKnowProgress: true,
|
|
|
progress: 0,
|
|
|
status: 'LOADING',
|
|
|
- statusText: "正在上传素材",
|
|
|
+ statusText: this.$i18n.t(`gather.uploading_material`),
|
|
|
uid: `u_${this.$randomWord(true, 8, 8)}`,
|
|
|
abortHandler: null,
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
itemInUploadList.abortHandler = uploadMaterial(
|
|
|
{
|
|
|
file: eachFile
|
|
@@ -1091,7 +1068,7 @@ export default {
|
|
|
this.uploadStatusListVideo.splice(index, 1)
|
|
|
} else {
|
|
|
itemInUploadList.status = 'FAIL'
|
|
|
- itemInUploadList.statusText = '素材上传失败'
|
|
|
+ itemInUploadList.statusText = this.$i18n.t(`gather.material_upload_fail`)
|
|
|
}
|
|
|
},
|
|
|
(progress) => {
|
|
@@ -1119,7 +1096,7 @@ export default {
|
|
|
if (index >= 0) {
|
|
|
const targetItem = this.uploadStatusListPano[index]
|
|
|
targetItem.status = 'FAIL'
|
|
|
- targetItem.statusText = '素材切图失败'
|
|
|
+ targetItem.statusText = this.$i18n.t(`gather.material_cutting_fail`)
|
|
|
targetItem.ifKnowProgress = true
|
|
|
}
|
|
|
} else if (eachRes.status === 3) {
|
|
@@ -1146,13 +1123,13 @@ export default {
|
|
|
checkUserSize({}, (data) => {
|
|
|
//判断已用是否大于3G
|
|
|
if ((data.data / 1024 / 1024) > 3) {
|
|
|
- this.$alert({ content: "空间已满" });
|
|
|
+ this.$alert({ content: this.$i18n.t('tips_code.FAILURE_3024')});
|
|
|
} else {
|
|
|
this.$refs['file-input'].click()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- onClickComfirm: debounce(function() {
|
|
|
+ onClickComfirm: debounce(function () {
|
|
|
this.$emit('submit', this.select)
|
|
|
}, 250),
|
|
|
},
|
|
@@ -1179,7 +1156,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.ellipsis{
|
|
|
+.ellipsis {
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
@@ -1219,20 +1196,24 @@ export default {
|
|
|
|
|
|
.material-tab {
|
|
|
margin-top: 35px;
|
|
|
- > .material-tab-item {
|
|
|
+
|
|
|
+ >.material-tab-item {
|
|
|
display: inline-block;
|
|
|
margin-right: 20px;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
- > .text {
|
|
|
+
|
|
|
+ >.text {
|
|
|
font-size: 14px;
|
|
|
font-family: MicrosoftYaHei;
|
|
|
color: #969799;
|
|
|
+
|
|
|
&.active {
|
|
|
color: #323233;
|
|
|
}
|
|
|
}
|
|
|
- > .bottom-line {
|
|
|
+
|
|
|
+ >.bottom-line {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
@@ -1253,7 +1234,8 @@ export default {
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #EBEDF0;
|
|
|
position: relative;
|
|
|
- > input {
|
|
|
+
|
|
|
+ >input {
|
|
|
box-sizing: border-box;
|
|
|
width: calc(100% - 42px);
|
|
|
height: 100%;
|
|
@@ -1263,7 +1245,8 @@ export default {
|
|
|
color: #323233;
|
|
|
outline: none;
|
|
|
}
|
|
|
- > .search-icon {
|
|
|
+
|
|
|
+ >.search-icon {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
@@ -1271,7 +1254,8 @@ export default {
|
|
|
color: #C8C9CC;
|
|
|
font-size: 20px;
|
|
|
}
|
|
|
- > .clear-icon {
|
|
|
+
|
|
|
+ >.clear-icon {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
@@ -1292,11 +1276,13 @@ export default {
|
|
|
background: #ffffff;
|
|
|
width: 100%;
|
|
|
height: @table-height;
|
|
|
- > .table-head-row {
|
|
|
+
|
|
|
+ >.table-head-row {
|
|
|
width: 100%;
|
|
|
height: @table-head-row-height;
|
|
|
background: #F5F7FA;
|
|
|
color: #646566;
|
|
|
+
|
|
|
.table-head {
|
|
|
font-size: 16px;
|
|
|
line-height: @table-head-row-height;
|
|
@@ -1304,28 +1290,34 @@ export default {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
- > .table-body {
|
|
|
+
|
|
|
+ >.table-body {
|
|
|
height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
|
|
|
overflow: auto;
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
- > .table-body-row {
|
|
|
+
|
|
|
+ >.table-body-row {
|
|
|
height: 50px;
|
|
|
border-bottom: 1px solid #EBEDF0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
- > .table-data {
|
|
|
- font-size:14px;
|
|
|
- line-height:50px;
|
|
|
+
|
|
|
+ >.table-data {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 50px;
|
|
|
height: 100%;
|
|
|
color: #323233;
|
|
|
- > .list-img {
|
|
|
+
|
|
|
+ >.list-img {
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
- > img, .audio-player {
|
|
|
+
|
|
|
+ >img,
|
|
|
+ .audio-player {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
@@ -1337,27 +1329,32 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- > .no-data {
|
|
|
+
|
|
|
+ >.no-data {
|
|
|
height: calc(@table-height - @table-head-row-height - @table-border-size - @table-border-size);
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
text-align: center;
|
|
|
- > img {
|
|
|
+
|
|
|
+ >img {
|
|
|
width: 116px;
|
|
|
}
|
|
|
- > span {
|
|
|
+
|
|
|
+ >span {
|
|
|
margin-top: 20px;
|
|
|
display: block;
|
|
|
font-size: 14px;
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
}
|
|
|
- > a {
|
|
|
- > button {
|
|
|
+
|
|
|
+ >a {
|
|
|
+ >button {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
@@ -1371,18 +1368,22 @@ export default {
|
|
|
width: 50px;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(2) {
|
|
|
- width: calc(116px - 50px);
|
|
|
+ width: calc(146px - 50px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(3) {
|
|
|
- width: calc(316px - 116px);
|
|
|
+ width: calc(316px - 146px);
|
|
|
padding-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(4) {
|
|
|
- width: calc(416px - 316px);
|
|
|
+ width: calc(400px - 316px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(5) {
|
|
|
- width: calc(100% - 416px);
|
|
|
+ width: calc(100% - 400px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1392,15 +1393,18 @@ export default {
|
|
|
width: 50px;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(2) {
|
|
|
- width: calc(116px - 50px);
|
|
|
+ width: calc(146px - 50px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(3) {
|
|
|
- width: calc(416px - 116px);
|
|
|
+ width: calc(400px - 146px);
|
|
|
padding-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(4) {
|
|
|
- width: calc(100% - 416px);
|
|
|
+ width: calc(100% - 400px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1410,15 +1414,18 @@ export default {
|
|
|
width: 50px;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(2) {
|
|
|
- width: calc(116px - 50px);
|
|
|
+ width: calc(146px - 50px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(3) {
|
|
|
- width: calc(416px - 116px);
|
|
|
+ width: calc(400px - 146px);
|
|
|
padding-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(4) {
|
|
|
- width: calc(100% - 416px);
|
|
|
+ width: calc(100% - 400px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1428,15 +1435,18 @@ export default {
|
|
|
width: 50px;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(2) {
|
|
|
- width: calc(116px - 50px);
|
|
|
+ width: calc(146px - 50px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(3) {
|
|
|
- width: calc(416px - 116px);
|
|
|
+ width: calc(400px - 146px);
|
|
|
padding-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(4) {
|
|
|
- width: calc(100% - 416px);
|
|
|
+ width: calc(100% - 400px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1446,15 +1456,18 @@ export default {
|
|
|
width: 50px;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(2) {
|
|
|
- width: calc(116px - 50px);
|
|
|
+ width: calc(146px - 50px);
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(3) {
|
|
|
- width: calc(416px - 116px);
|
|
|
+ width: calc(400px - 146px);
|
|
|
padding-right: 30px;
|
|
|
}
|
|
|
+
|
|
|
&:nth-of-type(4) {
|
|
|
- width: calc(100% - 416px);
|
|
|
+ width: calc(100% - 400px);
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1467,20 +1480,24 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 40px;
|
|
|
+
|
|
|
.upload-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- > span {
|
|
|
+
|
|
|
+ >span {
|
|
|
display: inline-block;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
+
|
|
|
i.tool-tip-for-editor {
|
|
|
font-size: 12px;
|
|
|
transform: scale(0.923) translateY(1px);
|
|
|
cursor: default;
|
|
|
}
|
|
|
}
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
.cancel {
|
|
|
margin-right: 16px;
|
|
|
}
|