root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 2 months ago
parent
ae64e55532
commit
7dad11aade
1 changed files with 81 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 122
      package4/ieBrowser/profileSetup.vue

122
package4/ieBrowser/profileSetup.vue
View File

@ -25,10 +25,14 @@
<view class="card" v-if="step === 2"> <view class="card" v-if="step === 2">
<view class="eyebrow">Light Profile</view> <view class="eyebrow">Light Profile</view>
<view class="headline">设置一个轻社交资料</view> <view class="headline">设置一个轻社交资料</view>
<view class="avatar-wrap" @tap="chooseAvatar"> <view class="avatar-wrap" :class="{ 'avatar-wrap--auditing': avatarAuditing }" @tap="chooseAvatar">
<image class="avatar-img" v-if="form.avatarUrl" :src="form.avatarUrl" mode="aspectFill"></image> <image class="avatar-img" v-if="form.avatarUrl" :src="form.avatarUrl" mode="aspectFill"></image>
<view class="avatar-text" v-else>{{ avatarPreview }}</view> <view class="avatar-text" v-else>{{ avatarPreview }}</view>
<view class="avatar-tip">点一下换头像</view> <view class="avatar-audit-mask" v-if="avatarAuditing">
<view class="avatar-audit-spinner"></view>
<view>头像审核中...</view>
</view>
<view class="avatar-tip">{{ avatarAuditing ? '头像审核中，请稍候' : '点一下换头像' }}</view>
</view> </view>
<view class="random-name" @tap="randomName">随机一个昵称</view> <view class="random-name" @tap="randomName">随机一个昵称</view>
<input class="input" v-model="form.anonymousName" maxlength="16" placeholder="昵称，例如：南门慢跑员" /> <input class="input" v-model="form.anonymousName" maxlength="16" placeholder="昵称，例如：南门慢跑员" />
@ -55,6 +59,10 @@
<view class="eyebrow">Persona Cards</view> <view class="eyebrow">Persona Cards</view>
<view class="headline">上传你的人格卡片</view> <view class="headline">上传你的人格卡片</view>
<view class="card-desc">最多 5 张，像个人主页的形象展示。别人点击头像时可以看到。</view> <view class="card-desc">最多 5 张，像个人主页的形象展示。别人点击头像时可以看到。</view>
<view class="persona-audit-tip" v-if="personaAuditing">
<view class="persona-audit-spinner"></view>
<text>人格卡片审核中...</text>
</view>
<view class="persona-grid"> <view class="persona-grid">
<view class="persona-item" v-for="(img, index) in form.personaImages" :key="img"> <view class="persona-item" v-for="(img, index) in form.personaImages" :key="img">
<image :src="img" mode="aspectFill" @tap="previewPersona(index)"></image> <image :src="img" mode="aspectFill" @tap="previewPersona(index)"></image>
@ -113,6 +121,8 @@
step: 1, step: 1,
isEdit: false, isEdit: false,
submitting: false, submitting: false,
avatarAuditing: false,
personaAuditing: false,
profileCompleted: 0, profileCompleted: 0,
form: { form: {
currentMode: 'i', currentMode: 'i',
@ -158,7 +168,7 @@
}, },
fail() { 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)] this.form.anonymousName = this.nameSeeds[Math.floor(Math.random() * this.nameSeeds.length)]
}, },
chooseAvatar() { chooseAvatar() {
if (this.avatarAuditing) return
let that = this; let that = this;
uni.chooseMedia({ uni.chooseMedia({
count: 1, count: 1,
@ -209,41 +220,58 @@
}) })
}, },
async upLoadFile(path) { async upLoadFile(path) {
let that = this; this.avatarAuditing = true
uni.showLoading({ uni.showLoading({
title: '加载中...', title: '头像审核中...',
mask: true mask: true
}) })
let hiver_token = uni.getStorageSync("hiver_token") let hiver_token = uni.getStorageSync("hiver_token")
await uni.uploadFile({ return new Promise((resolve) => {
url: that.tui.interfaceUrl() + '/upload/file', uni.uploadFile({
filePath: path, url: tui.interfaceUrl() + '/upload/file',
name: 'file', filePath: path,
header: { name: 'file',
"content-type": "multipart/form-data", header: {
'accessToken': hiver_token "content-type": "multipart/form-data",
}, 'accessToken': hiver_token
formData: {}, },
success: (uploadFileRes) => { formData: {},
success: (uploadFileRes) => {
let path = JSON.parse(uploadFileRes.data) try {
let data = JSON.parse(uploadFileRes.data || '{}')
this.form.avatarUrl = path.result if (!data.result) {
}, this.avatarAuditing = false
fail: (err) => { uni.hideLoading()
uni.hideLoading(); uni.showToast({ title: '头像审核未通过，请更换图片', icon: 'none' })
uni.showToast({ resolve(false)
title: JSON.stringify(err), return
icon: 'none' }
}) this.form.avatarUrl = data.result
} this.avatarAuditing = false
}); uni.hideLoading()
await setTimeout(res => { uni.showToast({ title: '头像审核通过', icon: 'none', duration: 2200 })
that.parentId = '' resolve(true)
// uni.hideLoading(); } catch (e) {
}, 1000) 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() { choosePersonaImages() {
if (this.personaAuditing) return
const remain = 5 - this.form.personaImages.length const remain = 5 - this.form.personaImages.length
if (remain <= 0) { if (remain <= 0) {
uni.showToast({ title: '最多上传 5 张', icon: 'none' }) uni.showToast({ title: '最多上传 5 张', icon: 'none' })
@ -256,10 +284,18 @@
camera: 'back', camera: 'back',
success: async (res) => { success: async (res) => {
const files = res.tempFiles || [] const files = res.tempFiles || []
for (const file of files) { if (!files.length) return
if (this.form.personaImages.length >= 5) break this.personaAuditing = true
const url = await this.uploadPersonaFile(file.tempFilePath) uni.showLoading({ title: '人格卡片审核中...', mask: true })
if (url) this.form.personaImages.push(url) 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) { uploadPersonaFile(path) {
if (!path) return Promise.resolve('') if (!path) return Promise.resolve('')
const hiverToken = uni.getStorageSync('hiver_token') const hiverToken = uni.getStorageSync('hiver_token')
uni.showLoading({ title: '上传中...', mask: true })
return new Promise((resolve) => { return new Promise((resolve) => {
uni.uploadFile({ uni.uploadFile({
url: this.tui.interfaceUrl() + '/upload/file', url: tui.interfaceUrl() + '/upload/file',
filePath: path, filePath: path,
name: 'file', name: 'file',
header: { header: {
@ -285,8 +320,7 @@
resolve('') resolve('')
} }
}, },
fail: () => resolve(''), fail: () => resolve('')
complete: () => uni.hideLoading()
}) })
}) })
}, },
@ -380,10 +414,13 @@
.gender-row { display: flex; flex-wrap: wrap; } .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 { 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; } .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, .avatar-text { width: 154rpx; height: 154rpx; margin: 0 auto; border-radius: 50%; }
.avatar-img { display: block; } .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-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; } .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; } .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; } .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 { 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; } .tag.active { color: #11162a; background: #a9ffe7; font-weight: 800; }
.persona-grid { display: flex; flex-wrap: wrap; gap: 18rpx; } .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, .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-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; } .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 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 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 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%); } } @keyframes loadingSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(230%); } }
</style> </style>

Write Preview
Loading…
Cancel
Save