mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-23 03:50:14 +09:00
768 lines
19 KiB
Vue
768 lines
19 KiB
Vue
<template>
|
||
<view class="app-page flex flex-col">
|
||
<!-- 搜索区域 -->
|
||
<view class="filter-wrap bg-white shadow-3">
|
||
<tm-search v-model="queryParams.keyword" :round="24" :shadow="0" color="light-blue" insert-color="light-blue" :clear="true" @confirm="fnOnSearch"></tm-search>
|
||
<tm-dropDownMenu :shadow="0" color="light-blue" @confirm="fnOnConfirm" :list="filterList"></tm-dropDownMenu>
|
||
</view>
|
||
|
||
<!-- 占位区域 -->
|
||
<view style="width: 100vw;height: 184rpx;"></view>
|
||
|
||
<view v-if="loading != 'success'" class="loading-wrap">
|
||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||
<tm-skeleton model="listAvatr"></tm-skeleton>
|
||
</view>
|
||
|
||
<view class="page-content pa-24 flex flex-col" v-else>
|
||
<view v-if="dataList.length == 0" class="content-empty flex flex-center">
|
||
<!-- 空布局 -->
|
||
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无任何附件"></tm-empty>
|
||
</view>
|
||
|
||
<block v-else>
|
||
<!-- 内容区域 -->
|
||
<block v-for="(item, index) in dataList" :key="index">
|
||
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
|
||
<view class="attachment-card mb-24 flex bg-white pa-24 round-3" @click="fnShowDetail(item)">
|
||
<view class="cover round-3 flex flex-center" :class="[fnGetIconClass(item.mediaType)]">
|
||
<text class="icon iconfont">{{ item.suffix }}</text>
|
||
</view>
|
||
<!-- 内容区域 -->
|
||
<view class="info pl-36">
|
||
<view class="file-name text-size-m text-weight-b">{{ item.name }}</view>
|
||
<view class="file-media mt-12 text-size-s text-grey-darken-1">附件类型：{{ item.mediaType }}</view>
|
||
<view class="file-media mt-8 text-size-s text-grey-darken-1">附件大小：{{ item.sizeText }}</view>
|
||
<view class="file-path mt-8 text-size-s text-grey-darken-1">上传日期：{{ { d: item.createTime, f: 'yyyy年MM月dd日 星期w' } | formatTime }}</view>
|
||
</view>
|
||
</view>
|
||
</tm-translate>
|
||
</block>
|
||
|
||
<tm-flotbutton @click="fnToTopPage" :offset="[16, 80]" color="bg-gradient-light-blue-accent" size="m" icon="icon-angle-up"></tm-flotbutton>
|
||
<view class="load-text ">{{ loadMoreText }}</view>
|
||
</block>
|
||
|
||
<!-- 弹窗详情 -->
|
||
<tm-poup v-model="detail.show" position="bottom" height="80vh">
|
||
<view class="poup-content">
|
||
<view class="poup-head text-align-center text-weight-b text-size-g ma-24 ">附件详情</view>
|
||
<scroll-view class="poup-body pa-24 pt-0" :scroll-y="true" @touchmove.stop>
|
||
<view class="preview-file pl-24 pr-24">
|
||
<!-- 图片预览 -->
|
||
<tm-images
|
||
v-if="$utils.fnCheckIsFileType('image', detail.form)"
|
||
:width="700"
|
||
:height="350"
|
||
:round="3"
|
||
:src="$utils.checkThumbnailUrl(detail.form.path)"
|
||
model="aspectFill"
|
||
></tm-images>
|
||
<!-- 视频 -->
|
||
<video
|
||
v-else-if="$utils.fnCheckIsFileType('video', detail.form)"
|
||
class="round-3"
|
||
style="width: 100%;height: 350rpx;"
|
||
:src="$utils.checkUrl(detail.form.path)"
|
||
controls
|
||
></video>
|
||
<view v-else class="flex flex-center border-a-1 round-3 text-align-center text-grey-darken-1" style="height: 280rpx;background-color: #f2f2f2;">
|
||
该文件暂不支持预览
|
||
</view>
|
||
</view>
|
||
|
||
<tm-input title="附件名称" v-model="detail.form.name" :clear="true" placeholder="请输入附件名称..."></tm-input>
|
||
<tm-input :disabled="true" color="grey" title="附件类型" v-model="detail.form.mediaType"></tm-input>
|
||
<tm-input :disabled="true" color="grey" title="附件位置" v-model="detail.form.type"></tm-input>
|
||
<tm-input :disabled="true" color="grey" title="附件大小" v-model="detail.form.sizeText"></tm-input>
|
||
<tm-input :disabled="true" color="grey" title="上传日期" v-model="detail.form.createTime"></tm-input>
|
||
<tm-input
|
||
:disabled="true"
|
||
:vertical="true"
|
||
:borderBottom="false"
|
||
input-type="textarea"
|
||
title="文件地址"
|
||
color="grey"
|
||
bg-color="grey-lighten-5"
|
||
:height="120"
|
||
v-model="detail.form.path"
|
||
>
|
||
<template v-slot:default="{ title }">
|
||
{{ title }}
|
||
<tm-button text theme="light-blue" size="xs" @click="$utils.copyText(detail.form.path, '复制成功！')">复制</tm-button>
|
||
</template>
|
||
</tm-input>
|
||
</scroll-view>
|
||
<view class="btn-wrap flex flex-center">
|
||
<tm-button size="m" navtie-type="form" theme="bg-gradient-blue-accent" @click="fnOnUpdate()">保存</tm-button>
|
||
<tm-button size="m" theme="bg-gradient-red-accent" @click="fnOnDelete()">删除</tm-button>
|
||
<tm-button size="m" theme="bg-gradient-blue-grey-accent" @click="detail.show = false">关闭</tm-button>
|
||
</view>
|
||
</view>
|
||
</tm-poup>
|
||
</view>
|
||
|
||
<tm-flotbutton :show-text="true" color="bg-gradient-orange-accent" @click="fnOnFlotButton"></tm-flotbutton>
|
||
|
||
<tm-actionSheetMenu title="文件上传操作" @change="fnOnFileSelectActionChange" v-model="fileSelectAction.show" :actions="fileSelectAction.list"></tm-actionSheetMenu>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef APP-PLUS
|
||
const AfDocument = uni.requireNativePlugin('Aq-ChooseFile'); // 临时替代
|
||
// #endif
|
||
import { getAdminAccessToken } from '@/utils/auth.js';
|
||
|
||
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
|
||
import tmSearch from '@/tm-vuetify/components/tm-search/tm-search.vue';
|
||
import tmDropDownMenu from '@/tm-vuetify/components/tm-dropDownMenu/tm-dropDownMenu.vue';
|
||
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
|
||
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
|
||
import tmCheckbox from '@/tm-vuetify/components/tm-checkbox/tm-checkbox.vue';
|
||
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
|
||
import tmPoup from '@/tm-vuetify/components/tm-poup/tm-poup.vue';
|
||
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
|
||
import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
|
||
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
|
||
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
|
||
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
|
||
import tmActionSheetMenu from '@/tm-vuetify/components/tm-actionSheetMenu/tm-actionSheetMenu.vue';
|
||
|
||
export default {
|
||
components: {
|
||
tmSkeleton,
|
||
tmSearch,
|
||
tmDropDownMenu,
|
||
tmEmpty,
|
||
tmButton,
|
||
tmCheckbox,
|
||
tmPoup,
|
||
tmForm,
|
||
tmUpload,
|
||
tmInput,
|
||
tmImages,
|
||
tmFlotbutton,
|
||
tmTranslate,
|
||
tmActionSheetMenu
|
||
},
|
||
data() {
|
||
return {
|
||
loading: 'loading',
|
||
filterLoading: 'loading',
|
||
btnOption: {
|
||
actions: [
|
||
{
|
||
icon: 'icon-like',
|
||
color: 'bg-gradient-orange-accent'
|
||
},
|
||
{
|
||
icon: 'icon-commentdots-fill',
|
||
color: 'bg-gradient-green-accent'
|
||
},
|
||
{
|
||
icon: 'icon-share1',
|
||
color: 'bg-gradient-blue-accent'
|
||
}
|
||
]
|
||
},
|
||
filterList: [
|
||
{
|
||
title: '存储位置',
|
||
children: [
|
||
{
|
||
title: '',
|
||
name: 'attachmentType',
|
||
model: 'radio',
|
||
children: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '文件类型',
|
||
children: [
|
||
{
|
||
title: '',
|
||
name: 'mediaType',
|
||
model: 'radio',
|
||
children: []
|
||
}
|
||
]
|
||
}
|
||
],
|
||
queryParams: {
|
||
size: 8,
|
||
page: 0,
|
||
attachmentType: undefined,
|
||
keyword: undefined,
|
||
mediaType: undefined,
|
||
sort: undefined
|
||
},
|
||
result: {},
|
||
dataList: [],
|
||
total: 0,
|
||
detail: {
|
||
params: {},
|
||
form: {},
|
||
show: false
|
||
},
|
||
isLoadMore: false,
|
||
loadMoreText: '加载中...',
|
||
|
||
fileSelectAction: {
|
||
show: false,
|
||
list: []
|
||
}
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
this.fnSetPageTitle('附件管理');
|
||
},
|
||
created() {
|
||
this.fnGetData();
|
||
this.fnGetFilters();
|
||
},
|
||
onPullDownRefresh() {
|
||
this.queryParams.page = 0;
|
||
this.dataList = [];
|
||
this.fnGetData();
|
||
if (this.filterLoading != 'success') {
|
||
this.fnGetFilters();
|
||
}
|
||
},
|
||
onReachBottom(e) {
|
||
if (this.result.hasNext) {
|
||
this.queryParams.page += 1;
|
||
this.isLoadMore = true;
|
||
this.fnGetData();
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '没有更多数据了'
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 文件大小 字节转换单位
|
||
* @param size
|
||
* @returns {string|*}
|
||
*/
|
||
fnTransFileSize(size) {
|
||
if (!size) return '';
|
||
if (size < this.fnPow1024(1)) return size + ' B';
|
||
if (size < this.fnPow1024(2)) return (size / this.fnPow1024(1)).toFixed(2) + ' KB';
|
||
if (size < this.fnPow1024(3)) return (size / this.fnPow1024(2)).toFixed(2) + ' MB';
|
||
if (size < this.fnPow1024(4)) return (size / this.fnPow1024(3)).toFixed(2) + ' GB';
|
||
return (size / this.fnPow1024(4)).toFixed(2) + ' TB';
|
||
},
|
||
|
||
// 求次幂
|
||
fnPow1024(num) {
|
||
return Math.pow(1024, num);
|
||
},
|
||
|
||
fnGetIconClass(mediaType) {
|
||
let _class = '';
|
||
if (mediaType.indexOf('video/') != -1) {
|
||
_class = 'is-video';
|
||
} else if (mediaType.indexOf('image/') != -1) {
|
||
_class = 'is-image';
|
||
}
|
||
return _class;
|
||
},
|
||
fnCheckIsFileType(type, attachment) {
|
||
if (type == 'video') return attachment.mediaType.indexOf('video/') != -1;
|
||
else if (type == 'image') return attachment.mediaType.indexOf('image/') != -1;
|
||
else return false;
|
||
},
|
||
fnGetFilters() {
|
||
this.filterLoading = 'loading';
|
||
Promise.all([this.$httpApi.admin.getAttachmentsTypes(), this.$httpApi.admin.getAttachmentsMediaTypes()])
|
||
.then(res => {
|
||
const res1 = res[0];
|
||
this.filterList[0].children[0].children = res1.data.map(item => {
|
||
return {
|
||
title: item,
|
||
id: item
|
||
};
|
||
});
|
||
const res2 = res[1];
|
||
this.filterList[1].children[0].children = res2.data.map(item => {
|
||
return {
|
||
title: item,
|
||
id: item
|
||
};
|
||
});
|
||
this.filterLoading = 'success';
|
||
})
|
||
.catch(err => {
|
||
this.filterLoading = 'error';
|
||
uni.$tm.toast('搜索条件数据加载失败！');
|
||
});
|
||
},
|
||
|
||
// 搜索区域确定
|
||
fnOnConfirm(e) {
|
||
this.queryParams.attachmentType = e[0].children.map(x => x.id).join('') || undefined;
|
||
this.queryParams.mediaType = e[1].children.map(x => x.id).join('') || undefined;
|
||
this.fnOnSearch();
|
||
},
|
||
fnOnSearch() {
|
||
this.queryParams.page = 0;
|
||
this.dataList = [];
|
||
this.fnGetData();
|
||
},
|
||
|
||
fnGetData() {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '加载中...'
|
||
});
|
||
// 设置状态为加载中
|
||
if (!this.isLoadMore) {
|
||
this.loading = 'loading';
|
||
}
|
||
this.loadMoreText = '加载中...';
|
||
this.$httpApi.admin
|
||
.getAttachmentsByPage(this.queryParams)
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
||
this.result = res.data;
|
||
this.total = res.data.total;
|
||
if (this.isLoadMore) {
|
||
let _list = this.dataList.concat(res.data.content);
|
||
this.dataList = _list.map(item => {
|
||
item['sizeText'] = this.fnTransFileSize(item.size);
|
||
return item;
|
||
});
|
||
} else {
|
||
this.dataList = res.data.content.map(item => {
|
||
item['sizeText'] = this.fnTransFileSize(item.size);
|
||
return item;
|
||
});
|
||
}
|
||
this.loading = 'success';
|
||
} else {
|
||
uni.$tm.toast('加载失败，请重试！');
|
||
thi.loading = 'error';
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error(err);
|
||
uni.$tm.toast('加载失败，请重试！');
|
||
this.loading = 'error';
|
||
this.loadMoreText = '加载失败，请下拉刷新！';
|
||
})
|
||
.finally(() => {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
uni.stopPullDownRefresh();
|
||
}, 300);
|
||
});
|
||
},
|
||
|
||
// 详情
|
||
fnShowDetail(item) {
|
||
this.detail.params = { ...item };
|
||
this.detail.form = { ...item };
|
||
this.detail.show = true;
|
||
},
|
||
// 删除
|
||
fnOnDelete() {
|
||
uni.$eShowModal({
|
||
title: '提示',
|
||
content: `您确定要删除该附件吗？`,
|
||
showCancel: true,
|
||
cancelText: '否',
|
||
cancelColor: '#999999',
|
||
confirmText: '是',
|
||
confirmColor: '#03a9f4'
|
||
})
|
||
.then(res => {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '正在删除...'
|
||
});
|
||
this.$httpApi.admin
|
||
.deleteAttachmentById(this.detail.params.id)
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
uni.$tm.toast('删除成功！');
|
||
setTimeout(() => {
|
||
this.detail.show = false;
|
||
this.detail.params = {};
|
||
this.detail.form = {};
|
||
this.fnGetData();
|
||
}, 1000);
|
||
} else {
|
||
uni.$tm.toast('删除失败，请重试！');
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error(err);
|
||
uni.$tm.toast('删除失败，请重试！');
|
||
});
|
||
})
|
||
.catch(err => {});
|
||
},
|
||
fnOnUpdate() {
|
||
if (this.detail.form.name == '') {
|
||
return uni.$tm.toast('附件名称不能为空！');
|
||
}
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '正在保存...'
|
||
});
|
||
this.$httpApi.admin
|
||
.updateAttachmentById(this.detail.params.id, this.detail.form.name)
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
uni.$tm.toast('保存成功！');
|
||
|
||
// setTimeout(() => {
|
||
// this.detail.show = false;
|
||
// this.detail.params = {};
|
||
// this.detail.form = {};
|
||
// this.fnGetData();
|
||
// }, 1000);
|
||
} else {
|
||
uni.$tm.toast('保存失败，请重试！');
|
||
}
|
||
})
|
||
.catch(err => {
|
||
uni.$tm.toast('保存失败，请重试！');
|
||
});
|
||
},
|
||
// 浮动按钮点击
|
||
fnOnFlotButton() {
|
||
// 微信小程序：提供从消息列表和媒体选择
|
||
// #ifdef MP-WEIXIN
|
||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||
// #endif
|
||
|
||
// 安卓app：使用第三方上传
|
||
// #ifdef APP-PLUS
|
||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||
// #endif
|
||
|
||
// h5
|
||
// #ifdef H5
|
||
this.fileSelectAction.list = ['上传照片', '上传视频', '上传文件'];
|
||
// #endif
|
||
|
||
// #ifndef H5||MP-WEIXIN||APP-PLUS
|
||
this.fileSelectAction.list = ['上传照片', '上传视频'];
|
||
// #endif
|
||
|
||
this.fileSelectAction.show = true;
|
||
},
|
||
fnOnFileSelectActionChange(e) {
|
||
// 微信小程序：提供从消息列表和媒体选择
|
||
// #ifdef MP-WEIXIN
|
||
switch (e.index) {
|
||
case 0:
|
||
// 上传照片
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||
}
|
||
});
|
||
break;
|
||
case 1:
|
||
// 上传视频
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||
}
|
||
});
|
||
break;
|
||
case 2:
|
||
// 会话选择
|
||
uni.chooseMessageFile({
|
||
count: 1,
|
||
success: res => {
|
||
this.fnOnUploadFileByPath(res.tempFiles[0].path);
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
|
||
// #endif
|
||
|
||
// 安卓app
|
||
// #ifdef APP-PLUS
|
||
switch (e.index) {
|
||
case 0:
|
||
// 上传照片
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||
}
|
||
});
|
||
break;
|
||
case 1:
|
||
// 上传视频
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||
}
|
||
});
|
||
break;
|
||
case 2:
|
||
// 上传文件：
|
||
// todo:使用第三方控件
|
||
AfDocument.openMode(
|
||
{
|
||
size: 1,
|
||
isDown: true,
|
||
types: [
|
||
{
|
||
name: '文档',
|
||
value: ['doc', 'wps', 'docx', 'xls', 'xlsx', 'pdf']
|
||
},
|
||
{
|
||
name: '视频',
|
||
value: ['mp4']
|
||
},
|
||
{
|
||
name: '音乐',
|
||
value: ['mp3', 'flac']
|
||
},
|
||
{
|
||
name: '图片',
|
||
value: ['jpg', 'png']
|
||
}
|
||
]
|
||
},
|
||
res => {
|
||
// this.data = JSON.stringify(res);
|
||
this.fnOnUploadFileByFile(res[0].path);
|
||
}
|
||
);
|
||
break;
|
||
}
|
||
// #endif
|
||
|
||
// h5
|
||
// #ifdef H5
|
||
switch (e.index) {
|
||
case 0:
|
||
// 上传照片
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||
}
|
||
});
|
||
break;
|
||
case 1:
|
||
// 上传视频
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePath);
|
||
}
|
||
});
|
||
break;
|
||
case 2:
|
||
// 上传文件
|
||
uni.chooseFile({
|
||
count: 1,
|
||
success: res => {
|
||
console.log(res);
|
||
this.fnOnUploadFileByPath(res.tempFilePaths[0]);
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5||MP-WEIXIN||APP-PLUS
|
||
switch (e.index) {
|
||
case 0:
|
||
// 上传照片
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: res => {
|
||
this.fnOnUploadFileByFile(res.tempFiles[0]);
|
||
}
|
||
});
|
||
break;
|
||
case 1:
|
||
// 上传视频
|
||
uni.chooseVideo({
|
||
count: 1,
|
||
success: res => {
|
||
this.fnOnUploadFileByFile(res.tempFile);
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
// 使用文件路径上传文件
|
||
fnOnUploadFileByPath(path) {
|
||
uni.showLoading({
|
||
title: '文件上传中...',
|
||
mask: true
|
||
});
|
||
uni.uploadFile({
|
||
filePath: path,
|
||
header: {
|
||
'admin-authorization': getAdminAccessToken()
|
||
},
|
||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||
name: 'file',
|
||
success: upladRes => {
|
||
const _uploadRes = JSON.parse(upladRes.data);
|
||
if (_uploadRes.status == 200) {
|
||
uni.$tm.toast('文件上传成功！');
|
||
setTimeout(() => {
|
||
this.fnGetData();
|
||
}, 1000);
|
||
} else {
|
||
uni.$tm.toast(_uploadRes.message);
|
||
}
|
||
},
|
||
fail: err => {
|
||
uni.$tm.toast(err.message);
|
||
}
|
||
});
|
||
},
|
||
// 使用文件对象上传文件
|
||
fnOnUploadFileByFile(file) {
|
||
uni.showLoading({
|
||
title: '文件上传中...',
|
||
mask: true
|
||
});
|
||
|
||
uni.uploadFile({
|
||
// #ifdef H5
|
||
file: file,
|
||
// #endif
|
||
// #ifndef H5
|
||
files: [file],
|
||
// #endif
|
||
header: {
|
||
'admin-authorization': getAdminAccessToken()
|
||
},
|
||
url: this.$baseApiUrl + '/api/admin/attachments/upload',
|
||
name: 'file',
|
||
success: upladRes => {
|
||
const _uploadRes = JSON.parse(upladRes.data);
|
||
if (_uploadRes.status == 200) {
|
||
uni.$tm.toast('文件上传成功！');
|
||
setTimeout(() => {
|
||
this.fnGetData();
|
||
}, 1000);
|
||
} else {
|
||
uni.$tm.toast(_uploadRes.message);
|
||
}
|
||
},
|
||
fail: err => {
|
||
uni.$tm.toast(err.message);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-page {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
}
|
||
.loading-wrap {
|
||
padding: 24rpx;
|
||
}
|
||
.filter-wrap {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
/* #ifdef H5 */
|
||
top: 88rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
top: 0;
|
||
/* #endif */
|
||
width: 100vw;
|
||
z-index: 6;
|
||
}
|
||
.page-content {
|
||
}
|
||
.content-empty {
|
||
width: 100vw;
|
||
height: 65vh;
|
||
}
|
||
.attachment-card {
|
||
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.05);
|
||
.cover {
|
||
width: 170rpx;
|
||
height: 160rpx;
|
||
background-color: rgb(104, 136, 151);
|
||
// box-shadow: 0 6rpx 10rpx rgba(51, 154, 204, 0.2);
|
||
&.is-video {
|
||
background-color: rgb(3, 174, 252);
|
||
}
|
||
&.is-image {
|
||
background-color: #1cbcb4;
|
||
}
|
||
.icon {
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
}
|
||
.thumbnai {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03);
|
||
border: 6rpx solid #fff;
|
||
}
|
||
}
|
||
.info {
|
||
width: 0;
|
||
flex-grow: 1;
|
||
|
||
.time-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poup-body {
|
||
box-sizing: border-box;
|
||
height: 66vh;
|
||
}
|
||
.poup-content {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.btn-wrap {
|
||
width: 100%;
|
||
}
|
||
.file-name {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|