diff --git a/package4/ieBrowser/profileSetup.vue b/package4/ieBrowser/profileSetup.vue index 22b5504..2ea619e 100644 --- a/package4/ieBrowser/profileSetup.vue +++ b/package4/ieBrowser/profileSetup.vue @@ -25,10 +25,14 @@ Light Profile 设置一个轻社交资料 - + {{ avatarPreview }} - 点一下换头像 + + + 头像审核中... + + {{ avatarAuditing ? '头像审核中，请稍候' : '点一下换头像' }} 随机一个昵称 @@ -55,6 +59,10 @@ Persona Cards 上传你的人格卡片 最多 5 张，像个人主页的形象展示。别人点击头像时可以看到。 + + + 人格卡片审核中... + @@ -113,6 +121,8 @@ step: 1, isEdit: false, submitting: false, + avatarAuditing: false, + personaAuditing: false, profileCompleted: 0, form: { currentMode: 'i', @@ -158,7 +168,7 @@ }, fail() { - this.tui.toast("您未授权，图片上传功能可能会出现错误") + uni.showToast({ title: '您未授权，图片上传功能可能会出现错误', icon: 'none' }) } }) }, @@ -194,6 +204,7 @@ this.form.anonymousName = this.nameSeeds[Math.floor(Math.random() * this.nameSeeds.length)] }, chooseAvatar() { + if (this.avatarAuditing) return let that = this; uni.chooseMedia({ count: 1, @@ -209,41 +220,58 @@ }) }, async upLoadFile(path) { - let that = this; + this.avatarAuditing = true uni.showLoading({ - title: '加载中...', + title: '头像审核中...', mask: true }) let hiver_token = uni.getStorageSync("hiver_token") - await uni.uploadFile({ - url: that.tui.interfaceUrl() + '/upload/file', - filePath: path, - name: 'file', - header: { - "content-type": "multipart/form-data", - 'accessToken': hiver_token - }, - formData: {}, - success: (uploadFileRes) => { - - let path = JSON.parse(uploadFileRes.data) - - this.form.avatarUrl = path.result - }, - fail: (err) => { - uni.hideLoading(); - uni.showToast({ - title: JSON.stringify(err), - icon: 'none' - }) - } - }); - await setTimeout(res => { - that.parentId = '' - // uni.hideLoading(); - }, 1000) + return new Promise((resolve) => { + uni.uploadFile({ + url: tui.interfaceUrl() + '/upload/file', + filePath: path, + name: 'file', + header: { + "content-type": "multipart/form-data", + 'accessToken': hiver_token + }, + formData: {}, + success: (uploadFileRes) => { + try { + let data = JSON.parse(uploadFileRes.data || '{}') + if (!data.result) { + this.avatarAuditing = false + uni.hideLoading() + uni.showToast({ title: '头像审核未通过，请更换图片', icon: 'none' }) + resolve(false) + return + } + this.form.avatarUrl = data.result + this.avatarAuditing = false + uni.hideLoading() + uni.showToast({ title: '头像审核通过', icon: 'none', duration: 2200 }) + resolve(true) + } catch (e) { + this.avatarAuditing = false + uni.hideLoading() + uni.showToast({ title: '头像上传失败，请重试', icon: 'none' }) + resolve(false) + } + }, + fail: () => { + this.avatarAuditing = false + uni.hideLoading() + uni.showToast({ + title: '头像上传失败，请检查网络后重试', + icon: 'none' + }) + resolve(false) + } + }) + }) }, choosePersonaImages() { + if (this.personaAuditing) return const remain = 5 - this.form.personaImages.length if (remain <= 0) { uni.showToast({ title: '最多上传 5 张', icon: 'none' }) @@ -256,10 +284,18 @@ camera: 'back', success: async (res) => { const files = res.tempFiles || [] - for (const file of files) { - if (this.form.personaImages.length >= 5) break - const url = await this.uploadPersonaFile(file.tempFilePath) - if (url) this.form.personaImages.push(url) + if (!files.length) return + this.personaAuditing = true + uni.showLoading({ title: '人格卡片审核中...', mask: true }) + try { + for (const file of files) { + if (this.form.personaImages.length >= 5) break + const url = await this.uploadPersonaFile(file.tempFilePath) + if (url) this.form.personaImages.push(url) + } + } finally { + this.personaAuditing = false + uni.hideLoading() } } }) @@ -267,10 +303,9 @@ uploadPersonaFile(path) { if (!path) return Promise.resolve('') const hiverToken = uni.getStorageSync('hiver_token') - uni.showLoading({ title: '上传中...', mask: true }) return new Promise((resolve) => { uni.uploadFile({ - url: this.tui.interfaceUrl() + '/upload/file', + url: tui.interfaceUrl() + '/upload/file', filePath: path, name: 'file', header: { @@ -285,8 +320,7 @@ resolve('') } }, - fail: () => resolve(''), - complete: () => uni.hideLoading() + fail: () => resolve('') }) }) }, @@ -380,10 +414,13 @@ .gender-row { display: flex; flex-wrap: wrap; } .gender-chip { height: 58rpx; line-height: 58rpx; margin: 0 14rpx 14rpx 0; padding: 0 24rpx; border-radius: 999rpx; color: rgba(21,26,45,.58); background: rgba(238,244,255,.82); font-size: 23rpx; } .gender-chip.active { color: #11162a; background: #a9ffe7; font-weight: 800; } - .avatar-wrap { width: 184rpx; margin: 0 auto 30rpx; text-align: center; } + .avatar-wrap { position: relative; width: 184rpx; margin: 0 auto 30rpx; text-align: center; } + .avatar-wrap--auditing { pointer-events: none; } .avatar-img, .avatar-text { width: 154rpx; height: 154rpx; margin: 0 auto; border-radius: 50%; } .avatar-img { display: block; } .avatar-text { text-align: center; line-height: 154rpx; color: #11162a; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 58rpx; font-weight: 800; } + .avatar-audit-mask { position: absolute; left: 15rpx; top: 0; width: 154rpx; height: 154rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: rgba(21,26,45,.62); color: #fff; font-size: 21rpx; font-weight: 800; line-height: 30rpx; } + .avatar-audit-spinner { width: 34rpx; height: 34rpx; margin-bottom: 10rpx; border: 4rpx solid rgba(255,255,255,.36); border-top-color: #a9ffe7; border-radius: 50%; animation: avatarAuditSpin .8s linear infinite; box-sizing: border-box; } .avatar-tip { margin-top: 14rpx; color: rgba(21,26,45,.42); font-size: 22rpx; } .random-name { width: 220rpx; height: 58rpx; margin: 0 auto 22rpx; border-radius: 999rpx; text-align: center; line-height: 58rpx; color: #6c69d8; background: rgba(139,124,255,.1); font-size: 23rpx; font-weight: 800; } .input, .textarea { width: 100%; box-sizing: border-box; border-radius: 28rpx; background: rgba(238,244,255,.78); color: #151a2d; font-size: 27rpx; } @@ -393,6 +430,8 @@ .tag { margin: 0 14rpx 18rpx 0; padding: 16rpx 24rpx; border-radius: 999rpx; color: rgba(21,26,45,.62); background: rgba(238,244,255,.82); font-size: 24rpx; } .tag.active { color: #11162a; background: #a9ffe7; font-weight: 800; } .persona-grid { display: flex; flex-wrap: wrap; gap: 18rpx; } + .persona-audit-tip { height: 64rpx; margin: -6rpx 0 22rpx; padding: 0 22rpx; display: flex; align-items: center; border-radius: 999rpx; color: #151a2d; background: rgba(169,255,231,.48); font-size: 24rpx; font-weight: 800; box-sizing: border-box; } + .persona-audit-spinner { width: 30rpx; height: 30rpx; margin-right: 12rpx; border: 4rpx solid rgba(108,105,216,.18); border-top-color: #6c69d8; border-radius: 50%; animation: avatarAuditSpin .8s linear infinite; box-sizing: border-box; } .persona-item, .persona-add { position: relative; width: 184rpx; height: 224rpx; border-radius: 30rpx; overflow: hidden; background: rgba(238,244,255,.82); } .persona-item image { width: 100%; height: 100%; display: block; } .persona-delete { position: absolute; right: 12rpx; top: 12rpx; width: 42rpx; height: 42rpx; border-radius: 50%; text-align: center; line-height: 38rpx; color: #fff; background: rgba(21,26,45,.56); font-size: 34rpx; } @@ -419,5 +458,6 @@ @keyframes creatingPulse { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.04); } } @keyframes dotFloatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10rpx, 8rpx); } } @keyframes dotFloatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12rpx, -8rpx); } } + @keyframes avatarAuditSpin { to { transform: rotate(360deg); } } @keyframes loadingSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(230%); } }