mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 21:29:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,767 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user