diff --git a/src/components/uploadFile/index.json b/src/components/uploadFile/index.json new file mode 100644 index 0000000..5625d07 --- /dev/null +++ b/src/components/uploadFile/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-popup": "@vant/weapp/popup/index", + "van-uploader": "@vant/weapp/uploader/index" + } +} diff --git a/src/components/uploadFile/index.scss b/src/components/uploadFile/index.scss new file mode 100644 index 0000000..d70d62d --- /dev/null +++ b/src/components/uploadFile/index.scss @@ -0,0 +1,30 @@ +.button { + padding: 0; + line-height: 1; + background-color: transparent; + &::after { + border: none; + outline: none; + } +} + +.popup1 { + position: relative; + width: 580rpx; + height: 590rpx; + box-sizing: border-box; + .bg { + width: 100%; + height: 100%; + } + .sure { + position: absolute; + width: 100%; + bottom: 40rpx; + left: 0; + text-align: center; + font-size: 32rpx; + color: rgba(0, 180, 197, 1); + line-height: 48rpx; + } +} diff --git a/src/components/uploadFile/index.ts b/src/components/uploadFile/index.ts new file mode 100644 index 0000000..b38e768 --- /dev/null +++ b/src/components/uploadFile/index.ts @@ -0,0 +1,184 @@ +const app = getApp(); + +// pages/story/a.ts +Component({ + /** + * 组件的属性列表 + */ + properties: { + chooseAvatar: { + type: Boolean, + value: false, + }, + chooseMessage: { + type: Boolean, + value: false, + }, + accept: { + type: String, + value: "image", + }, + obscure: { + type: Boolean, + value: false, + }, + edit: { + type: Boolean, + value: false, + }, + }, + + /** + * 组件的初始数据 + */ + data: { + show1: false, + fileTypeList: { + doc: 5, + docx: 5, + pdf: 4, + xls: 6, + xlsx: 6, + ppt: 7, + }, + cacheEditParams: {}, + }, + + /** + * 组件的方法列表 + */ + methods: { + GetExtensionFileName(pathfilename) { + const reg = /(\\+)/g; + const pString = pathfilename.replace(reg, "#"); //用正则表达式来将\或\\替换成# + const arr = pString.split("#"); // 以“#”为分隔符,将字符分解为数组 例如 D Program Files bg.png + const lastString = arr[arr.length - 1]; //取最后一个字符 + const arr2 = lastString.split("."); // 再以"."作为分隔符 + return arr2[arr2.length - 1]; //将后缀名返回出来 + }, + handleAfterRead(e, editEnd = false) { + if (this.data.edit && !editEnd) { + this.setData({ + show1: true, + cacheEditParams: e, + }); + return; + } + if (this.data.obscure) { + wx.editImage({ + src: e.detail.file.url || e.detail.file.tempFilePath, + success: (res: any) => { + this.uploadFile({ + ...e.detail.file, + tempFilePath: res.tempFilePath, + }).then((res) => { + this.triggerEvent("file", res as object); + }); + }, + fail: (err) => { + if (err.errMsg.includes("开发者工具")) { + this.uploadFile(e.detail.file).then((res) => { + this.triggerEvent("file", res as object); + }); + } + }, + }); + } else { + this.uploadFile(e.detail.file).then((res) => { + this.triggerEvent("file", res as object); + }); + } + }, + handleEditEnd() { + this.setData({ + show1: false, + }); + this.handleAfterRead(this.data.cacheEditParams, true); + }, + handleChooseAvatar(e) { + this.uploadFile({ + fileType: "image", + tempFilePath: e.detail.avatarUrl, + size: 0, + }).then((res) => { + this.triggerEvent("file", res as object); + }); + }, + handleChooseFile() { + wx.chooseMessageFile({ + type: "file", + count: 1, + success: (res) => { + this.uploadFile({ + ...res.tempFiles[0], + fileType: res.tempFiles[0].type, + tempFilePath: res.tempFiles[0].path, + }).then((res) => { + this.triggerEvent("file", res as object); + }); + }, + fail() { + wx.showToast({ + icon: "none", + title: "取消选择", + }); + }, + }); + }, + uploadFile(item) { + wx.showLoading({ + title: "正在上传", + }); + return new Promise((resolve, reject) => { + let url = `${app.globalData.upFileUrl}?r=file-service/upload-`; + if (item.fileType === "image") { + url += "img"; + } else if (item.fileType === "video" || item.type === "video") { + url += "video"; + item.tempFilePath = item.url; + } else if (item.fileType === "audio") { + url += "audio"; + } else { + url += "doc"; + } + wx.uploadFile({ + filePath: item.tempFilePath, + name: "file", + url, + success: (res) => { + wx.hideLoading(); + const data = JSON.parse(res.data); + const suffix = this.GetExtensionFileName(data.data.Url); + const expandJson = { + fileId: "", + name: item.name || `病历相关文件.${suffix}`, + size: (item.size / 1024).toFixed(2), + fileUrl: data.data.Url, + suffix, + type: item.fileType, + imgUrl: "", + duration: 0, + fileType: this.data.fileTypeList[suffix] || 99, + videoUrl: "", + hash: "", + }; + if (item.fileType === "image") { + expandJson.imgUrl = data.data.Url; + } else if (item.fileType === "video" || item.type === "video") { + expandJson.imgUrl = data.data.SnapshotUrl; + } else if (item.fileType === "audio") { + expandJson.duration = Number.parseInt(String(item.duration / 1000)); + } + resolve(expandJson); + }, + fail() { + wx.hideLoading(); + reject(new Error("上传失败")); + }, + }); + }); + }, + }, +}); + +export {}; diff --git a/src/components/uploadFile/index.wxml b/src/components/uploadFile/index.wxml new file mode 100644 index 0000000..2ed103b --- /dev/null +++ b/src/components/uploadFile/index.wxml @@ -0,0 +1,19 @@ + + + + + + + + + + + 我知道了 去涂抹 + + + + diff --git a/src/pages/my/index.json b/src/pages/my/index.json index 4024b52..5fa5f3c 100644 --- a/src/pages/my/index.json +++ b/src/pages/my/index.json @@ -1,6 +1,7 @@ { "usingComponents": { "van-icon": "@vant/weapp/icon/index", - "global-toast":"/components/global-toast/index" + "global-toast": "/components/global-toast/index", + "uploadFile": "/components/uploadFile/index" } } diff --git a/src/pages/my/index.scss b/src/pages/my/index.scss index b8a5822..b2f7aac 100644 --- a/src/pages/my/index.scss +++ b/src/pages/my/index.scss @@ -22,10 +22,13 @@ page { display: flex; align-items: center; gap: 24rpx; - .avatar { - width: 160rpx; - height: 160rpx; - border-radius: 50%; + .upload { + flex-shrink: 0; + .avatar { + width: 160rpx; + height: 160rpx; + border-radius: 50%; + } } .user { flex: 1; diff --git a/src/pages/my/index.wxml b/src/pages/my/index.wxml index d6c2d1a..83d8154 100644 --- a/src/pages/my/index.wxml +++ b/src/pages/my/index.wxml @@ -1,7 +1,26 @@