123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- <template>
- <view class="media">
- <!-- 图片 -->
- <navigator url="#" class="item" v-for="(item, index) in files.images" :key="item.attachmentid">
- <image :src="item.url" mode="aspectFill" @click="viewMedias(index, 'image')" />
- <image v-if="isDelete" class="delete" src="../static/img/delete.png" @click.stop="handleDeleteFile(item)" />
- </navigator>
- <!-- 视频 -->
- <navigator url="#" class="item" v-for="(item, index) in files.videos" :key="item.attachmentid">
- <image :src="item.subfiles[0].url" mode="aspectFill" />
- <view class="shade" @click="viewMedias(index, 'video')"><van-icon size='48rpx' name="play" /></view>
- <image v-if="isDelete" class="delete" src="../static/img/delete.png" @click.stop="handleDeleteFile(item)" />
- </navigator>
- <!-- 文件 -->
- <navigator url="#" class="item file" v-for="item in files.files" :key="item.attachmentid" @click="viewFlies(item)">
- <image class="image" :src="item.cover" mode="heightFix" />
- <view class="name">{{ item.document }}</view>
- <image v-if="isDelete" class="delete" src="../static/img/delete.png" @click.stop="handleDeleteFile(item)" />
- </navigator>
- </view>
- </template>
- <script>
- export default {
- props: {
- isDelete: {
- type: Boolean
- },
- onDeteleFiles: {
- type: Function
- },
- strict: {
- type: Boolean,
- default: true
- },
- aDeletion: {
- type: Boolean,
- },
- attinfos: Array
- },
- watch: {
- attinfos: {
- handler(newVal, oldVal) {
- this.handleFiles(newVal)
- },
- immediate: true,
- }
- },
- data() {
- return {
- files: {
- images: [],
- viewImages: [],
- videos: [],
- viewVideos: [],
- files: []
- },
- }
- },
- methods: {
- /* 格式化附件 */
- formattedFiles(list) {
- if (list.length == 0) return [];
- let suffixList = {
- image: ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'svg', 'tiff'],
- video: ['mp4', 'ogg', 'webm'],
- word: ['doc', 'docx'],
- excel: ['xls', 'xlsx'],
- ppt: ['ppt', 'pptx'],
- txt: ['txt', 'md', 'js', 'json'],
- pdf: ['pdf'],
- rar: ['7z', 'zip', 'rar', 'kz', 'ace', 'arj', 'bz2', 'cab', 'gz', 'iso', 'jar', 'lzh', 'tar', 'z'],
- folder: ['"folder"']
- },
- typeList = [];
- for (let key in suffixList) typeList.push(key);
- for (let i = 0; i < list.length; i++) {
- list[i].fileType = 'unknown';
- list[i].cover = `/static/file/unknown.png`
- const suffix = list[i].postfix.toLowerCase();
- if (suffix != "folder") {
- for (var key in suffixList) {
- if (suffixList[key].some(value => value == suffix)) {
- list[i].fileType = key;
- if (key == 'image') {
- list[i].cover = list[i].url;
- } else if (typeList.includes(key)) {
- list[i].cover = `/static/file/${key}.png`;
- }
- }
- }
- } else {
- list[i].fileType = "folder";
- list[i].cover = `/static/file/folder.png`
- }
- }
- return list;
- },
- /* 删除文件 */
- handleDeleteFile(item) {
- let that = this;
- if (this.strict) {
- uni.showModal({
- title: '提示',
- content: '是否确定删除该附件',
- complete: ({ confirm }) => {
- if (confirm) start()
- }
- })
- } else {
- start()
- }
- function start() {
- if (that.aDeletion) return that.$emit("onDeteleFiles", {
- deleteid: item.linksid,
- attachmentid: item.attachmentid,
- ...that.getFiles()
- })
- that.$Http.basic({
- "classname": "system.attachment.Attachment",
- "method": "deleteFileLink",
- "content": {
- "linksids": [item.linksid]
- }
- }).then(res => {
- if (that.cutoff(res.msg)) return;
- let files = that.files;
- /* switch (item.fileType) {
- case "image":
- files.images = files.images.filter(v => v.url != item.url);
- files.viewImages = files.viewImages.filter(v => v.url != item.url);
- break;
- case "video":
- files.videos = files.videos.filter(v => v.url != item.url);
- files.viewVideos = files.viewVideos.filter(v => v.url != item.url);
- break;
- default:
- files.files = files.files.filter(v => v.attachmentid != item.attachmentid);
- break;
- };
- that.files = files; */
- that.$emit("onDeteleFiles", {
- deleteid: item.linksid,
- attachmentid: item.attachmentid,
- ...that.getFiles()
- })
- });
- }
- },
- /* 处理附件 */
- handleFiles(arr, init = false) {
- let files = init ? {
- images: [],
- viewImages: [],
- videos: [],
- viewVideos: [],
- files: []
- } : this.files,
- list = this.formattedFiles(arr);
- list.forEach(v => {
- switch (v.fileType) {
- case "video":
- files.videos.push(v)
- files.viewVideos.push({
- url: v.url,
- type: "video",
- poster: v.subfiles[0].url
- })
- break;
- case "image":
- files.images.push(v)
- files.viewImages.push({
- url: v.url,
- type: "image"
- })
- break;
- default:
- files.files.push(v)
- break;
- }
- });
- this.files = files;
- },
- /* 初始化数据 */
- initData() {
- this.files = {
- images: [],
- viewImages: [],
- videos: [],
- viewVideos: [],
- files: []
- }
- },
- /* 返回数据ID数组 用来换绑数据 */
- getFiles() {
- let data = {
- attachmentids: [],
- list: [],
- },
- files = this.files;
- files.files.forEach(v => {
- data.attachmentids.push(v.attachmentid);
- data.list.push(v);
- })
- files.images.forEach(v => {
- data.attachmentids.push(v.attachmentid);
- data.list.push(v);
- })
- files.videos.forEach(v => {
- data.attachmentids.push(v.attachmentid);
- data.list.push(v);
- });
- return data
- },
- /* 预览媒体 */
- viewMedias(index, type) {
- // #ifndef MP
- console.log(this.files.viewVideos)
- if (type == 'image') {
- uni.previewImage({
- current: index,
- urls: this.files.viewImages,
- loop: true,
- })
- } else {
- window.open(this.files.viewVideos[index].url)
- }
- // #endif
- // #ifdef MP-WEIXIN
- wx.previewMedia({
- current: index,
- sources: type == 'image' ? this.files.viewImages : this.files.viewVideos,
- })
- // #endif
- },
- /* 预览文档 */
- viewFlies(item) {
- console.log(item)
- uni.showLoading({
- title: '加载中...',
- })
- uni.downloadFile({
- url: item.url,
- complete({
- statusCode,
- tempFilePath
- }) {
- if (statusCode != 200) return;
- uni.openDocument({
- filePath: tempFilePath,
- fileType: item.postfix,
- showMenu: true,
- complete({
- errMsg
- }) {
- uni.hideLoading();
- if (errMsg != "openDocument:ok") uni.showToast({
- title: '打开失败',
- icon: "none"
- })
- }
- })
- }
- })
- },
- deleteAll() {
- let linksids = this.getFiles().list.map(v => v.linksid);
- if (linksids.length) this.$Http.basic({
- "classname": "system.attachment.Attachment",
- "method": "deleteFileLink",
- "content": {
- linksids
- }
- }).then(res => {
- console.log("删除所有未保存附件", linksids, res)
- if (res.msg != '成功') return uni.showToast({
- title: res.data,
- icon: "none"
- });
- });
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .media {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- box-sizing: border-box;
- .item {
- position: relative;
- width: 62px;
- height: 62px;
- margin-right: 6px;
- margin-bottom: 6px;
- border-radius: 4px;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- .delete {
- position: absolute;
- width: 20px;
- height: 20px;
- right: 0;
- top: 0;
- }
- .shade {
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.2);
- top: 0;
- left: 0;
- color: #ffffff;
- }
- }
- .item:nth-child(5n) {
- margin-right: 0;
- }
- .file {
- display: flex;
- flex-direction: column;
- border: 1px solid #CCCCCC;
- box-sizing: border-box;
- align-items: center;
- .name {
- width: 60px;
- font-size: 12px;
- font-family: PingFang SC-Regular, PingFang SC;
- color: #333333;
- margin-top: 10px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .image {
- height: 29px;
- margin-top: 12rpx;
- }
- }
- }
- </style>
|