9210b931c4
- Added a new feature for sharing profile cards, including special handling for forwarding to friends and displaying a canvas cover with user information. - Updated the mini program's profile-edit page to generate a shareable card with a structured layout, including user avatar, nickname, and additional information. - Improved the documentation to reflect the new sharing capabilities and updated the last modified date for relevant entries.
462 lines
17 KiB
JavaScript
462 lines
17 KiB
JavaScript
/**
|
||
* Soul创业派对 - 资料编辑完整版（comprehensive_profile_editor_v1_1）
|
||
* 温馨提示、头像、基本信息、核心联系方式、个人故事、互助需求、项目介绍
|
||
*
|
||
* 接口约定（/api/miniprogram/user/profile）：
|
||
* - GET ?userId= 返回 data: { avatar, nickname, mbti, region, industry, businessScale, position, skills, phone, wechatId, ... }，空值统一为 ""
|
||
* - POST body：普通用户提交基础字段；VIP 提交全部字段（含 skills、个人故事、互助需求、项目介绍）
|
||
*
|
||
* 表单展示：普通用户仅展示 温馨提示、头像、昵称、MBTI、地区、行业、业务体量、职位、核心联系方式；VIP 展示全部
|
||
*/
|
||
const app = getApp()
|
||
|
||
const MBTI_OPTIONS = ['INTJ', 'INFP', 'INTP', 'ENTP', 'ENFP', 'ENTJ', 'ENFJ', 'INFJ', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
|
||
|
||
Page({
|
||
data: {
|
||
statusBarHeight: 44,
|
||
isVip: false,
|
||
avatar: '',
|
||
nickname: '',
|
||
shareCardPath: '', // 分享名片封面图（预生成）
|
||
mbti: '',
|
||
mbtiIndex: 0,
|
||
region: '',
|
||
industry: '',
|
||
businessScale: '',
|
||
position: '',
|
||
skills: '',
|
||
phone: '',
|
||
wechatId: '',
|
||
storyBestMonth: '',
|
||
storyAchievement: '',
|
||
storyTurning: '',
|
||
helpOffer: '',
|
||
helpNeed: '',
|
||
projectIntro: '',
|
||
mbtiOptions: MBTI_OPTIONS,
|
||
showMbtiPicker: false,
|
||
saving: false,
|
||
loading: true,
|
||
showAvatarModal: false,
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.setData({ statusBarHeight: app.globalData.statusBarHeight || 44 })
|
||
wx.showShareMenu({ withShareTimeline: true })
|
||
// 从朋友圈/分享打开且带 id：跳转到名片详情（member-detail）
|
||
if (options?.id) {
|
||
const ref = options.ref ? `&ref=${options.ref}` : ''
|
||
wx.redirectTo({ url: `/pages/member-detail/member-detail?id=${options.id}${ref}` })
|
||
return
|
||
}
|
||
this.loadProfile()
|
||
},
|
||
|
||
async loadProfile() {
|
||
const userInfo = app.globalData.userInfo
|
||
if (!app.globalData.isLoggedIn || !userInfo?.id) {
|
||
this.setData({ loading: false })
|
||
wx.showToast({ title: '请先登录', icon: 'none' })
|
||
setTimeout(() => getApp().goBackOrToHome(), 1500)
|
||
return
|
||
}
|
||
try {
|
||
const userId = userInfo.id
|
||
const [profileRes, vipRes] = await Promise.all([
|
||
app.request({ url: `/api/miniprogram/user/profile?userId=${userId}`, silent: true }),
|
||
app.request({ url: `/api/miniprogram/vip/status?userId=${userId}`, silent: true }),
|
||
])
|
||
this.setData({ isVip: vipRes?.data?.isVip || false })
|
||
const res = profileRes
|
||
if (res?.success && res.data) {
|
||
const d = res.data
|
||
const v = (k) => (d[k] != null && d[k] !== '') ? String(d[k]) : ''
|
||
const mbtiIndex = MBTI_OPTIONS.indexOf(v('mbti')) >= 0 ? MBTI_OPTIONS.indexOf(v('mbti')) : 0
|
||
this.setData({
|
||
avatar: v('avatar'),
|
||
nickname: v('nickname'),
|
||
mbti: v('mbti'),
|
||
mbtiIndex,
|
||
region: v('region'),
|
||
industry: v('industry'),
|
||
businessScale: v('businessScale'),
|
||
position: v('position'),
|
||
skills: v('skills'),
|
||
phone: v('phone'),
|
||
wechatId: v('wechatId') || wx.getStorageSync('user_wechat') || '',
|
||
storyBestMonth: v('storyBestMonth'),
|
||
storyAchievement: v('storyAchievement'),
|
||
storyTurning: v('storyTurning'),
|
||
helpOffer: v('helpOffer'),
|
||
helpNeed: v('helpNeed'),
|
||
projectIntro: v('projectIntro'),
|
||
loading: false,
|
||
})
|
||
setTimeout(() => this.generateShareCard(), 200)
|
||
} else {
|
||
this.setData({ loading: false })
|
||
}
|
||
} catch (e) {
|
||
this.setData({ loading: false })
|
||
}
|
||
},
|
||
|
||
goBack() { getApp().goBackOrToHome() },
|
||
|
||
// 生成分享名片封面图（参考：头像左+昵称右，分隔线，四栏信息 5:4）
|
||
async generateShareCard() {
|
||
const { avatar, nickname, region, mbti, industry, position } = this.data
|
||
const userId = app.globalData.userInfo?.id
|
||
if (!userId) return
|
||
try {
|
||
const ctx = wx.createCanvasContext('shareCardCanvas', this)
|
||
const w = 500
|
||
const h = 400
|
||
const pad = 32
|
||
// 背景（深灰卡片感）
|
||
const grd = ctx.createLinearGradient(0, 0, w, h)
|
||
grd.addColorStop(0, '#1E293B')
|
||
grd.addColorStop(1, '#0F172A')
|
||
ctx.setFillStyle(grd)
|
||
ctx.fillRect(0, 0, w, h)
|
||
// 顶部区域：左头像 + 右昵称
|
||
const avatarSize = 100
|
||
const avatarX = pad + 10
|
||
const avatarY = 50
|
||
const avatarRadius = avatarSize / 2
|
||
const rightStart = avatarX + avatarSize + 28
|
||
const drawAvatar = () => new Promise((resolve) => {
|
||
if (avatar && avatar.startsWith('http')) {
|
||
wx.downloadFile({
|
||
url: avatar,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
ctx.arc(avatarX + avatarRadius, avatarY + avatarRadius, avatarRadius, 0, Math.PI * 2)
|
||
ctx.clip()
|
||
ctx.drawImage(res.tempFilePath, avatarX, avatarY, avatarSize, avatarSize)
|
||
ctx.restore()
|
||
} else {
|
||
this.drawAvatarPlaceholder(ctx, avatarX, avatarY, avatarSize, nickname)
|
||
}
|
||
resolve()
|
||
},
|
||
fail: () => {
|
||
this.drawAvatarPlaceholder(ctx, avatarX, avatarY, avatarSize, nickname)
|
||
resolve()
|
||
},
|
||
})
|
||
} else {
|
||
this.drawAvatarPlaceholder(ctx, avatarX, avatarY, avatarSize, nickname)
|
||
resolve()
|
||
}
|
||
})
|
||
await drawAvatar()
|
||
ctx.setStrokeStyle('rgba(94,234,212,0.5)')
|
||
ctx.setLineWidth(2)
|
||
ctx.beginPath()
|
||
ctx.arc(avatarX + avatarRadius, avatarY + avatarRadius, avatarRadius, 0, Math.PI * 2)
|
||
ctx.stroke()
|
||
// 右侧：昵称 + 个人名片
|
||
const displayName = (nickname || '').trim() || '创业者'
|
||
ctx.setFillStyle('#ffffff')
|
||
ctx.setFontSize(26)
|
||
ctx.setTextAlign('left')
|
||
ctx.fillText(displayName, rightStart, avatarY + 36)
|
||
ctx.setFillStyle('#94A3B8')
|
||
ctx.setFontSize(13)
|
||
ctx.fillText('个人名片', rightStart, avatarY + 62)
|
||
// 分隔线
|
||
const divY = 168
|
||
ctx.setStrokeStyle('rgba(255,255,255,0.08)')
|
||
ctx.setLineWidth(1)
|
||
ctx.beginPath()
|
||
ctx.moveTo(pad, divY)
|
||
ctx.lineTo(w - pad, divY)
|
||
ctx.stroke()
|
||
// 底部四栏：地区 | MBTI，行业 | 职位
|
||
const labelGray = '#64748B'
|
||
const valueWhite = '#F1F5F9'
|
||
const rowH = 52
|
||
const colW = (w - pad * 2) / 2
|
||
const truncate = (text, maxW) => {
|
||
if (!text) return ''
|
||
ctx.setFontSize(15)
|
||
let m = ctx.measureText(text)
|
||
if (m.width <= maxW) return text
|
||
for (let i = text.length - 1; i > 0; i--) {
|
||
const t = text.slice(0, i) + '…'
|
||
if (ctx.measureText(t).width <= maxW) return t
|
||
}
|
||
return text[0] + '…'
|
||
}
|
||
const maxValW = colW - 16
|
||
const items = [
|
||
{ label: '地区', value: truncate((region || '').trim() || '未填写', maxValW), x: pad },
|
||
{ label: 'MBTI', value: (mbti || '').trim() || '未填写', x: pad + colW },
|
||
{ label: '行业', value: truncate((industry || '').trim() || '未填写', maxValW), x: pad },
|
||
{ label: '职位', value: truncate((position || '').trim() || '未填写', maxValW), x: pad + colW },
|
||
]
|
||
items.forEach((item, i) => {
|
||
const row = Math.floor(i / 2)
|
||
const baseY = divY + 36 + row * rowH
|
||
ctx.setFillStyle(labelGray)
|
||
ctx.setFontSize(12)
|
||
ctx.fillText(item.label, item.x, baseY - 8)
|
||
ctx.setFillStyle(valueWhite)
|
||
ctx.setFontSize(15)
|
||
ctx.fillText(item.value, item.x, baseY + 14)
|
||
})
|
||
ctx.draw(true, () => {
|
||
wx.canvasToTempFilePath({
|
||
canvasId: 'shareCardCanvas',
|
||
destWidth: 500,
|
||
destHeight: 400,
|
||
success: (res) => {
|
||
this.setData({ shareCardPath: res.tempFilePath })
|
||
},
|
||
}, this)
|
||
})
|
||
} catch (e) {
|
||
console.warn('[ShareCard] 生成失败:', e)
|
||
}
|
||
},
|
||
|
||
drawAvatarPlaceholder(ctx, x, y, size, nickname) {
|
||
ctx.setFillStyle('rgba(94,234,212,0.2)')
|
||
ctx.beginPath()
|
||
ctx.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2)
|
||
ctx.fill()
|
||
ctx.setFillStyle('#5EEAD4')
|
||
ctx.setFontSize(size * 0.42)
|
||
ctx.setTextAlign('center')
|
||
ctx.fillText((nickname || '?')[0], x + size / 2, y + size / 2 + size * 0.14)
|
||
},
|
||
|
||
onShareAppMessage() {
|
||
const ref = app.getMyReferralCode()
|
||
const userId = app.globalData.userInfo?.id
|
||
const nickname = (this.data.nickname || '').trim() || '我'
|
||
const path = userId
|
||
? (ref ? `/pages/member-detail/member-detail?id=${userId}&ref=${ref}` : `/pages/member-detail/member-detail?id=${userId}`)
|
||
: (ref ? `/pages/profile-edit/profile-edit?ref=${ref}` : '/pages/profile-edit/profile-edit')
|
||
const result = {
|
||
title: `${nickname}为您分享名片`,
|
||
path,
|
||
}
|
||
if (this.data.shareCardPath) result.imageUrl = this.data.shareCardPath
|
||
return result
|
||
},
|
||
|
||
onShareTimeline() {
|
||
const ref = app.getMyReferralCode()
|
||
const userId = app.globalData.userInfo?.id
|
||
const nickname = (this.data.nickname || '').trim() || '我'
|
||
const query = userId
|
||
? (ref ? `id=${userId}&ref=${ref}` : `id=${userId}`)
|
||
: (ref ? `ref=${ref}` : '')
|
||
const result = {
|
||
title: `${nickname}为您分享名片`,
|
||
query: query || '',
|
||
}
|
||
if (this.data.shareCardPath) result.imageUrl = this.data.shareCardPath
|
||
return result
|
||
},
|
||
|
||
onNicknameInput(e) { this.setData({ nickname: e.detail.value }) },
|
||
onNicknameChange(e) { this.setData({ nickname: e.detail.value }) },
|
||
onRegionInput(e) { this.setData({ region: e.detail.value }) },
|
||
onIndustryInput(e) { this.setData({ industry: e.detail.value }) },
|
||
onBusinessScaleInput(e) { this.setData({ businessScale: e.detail.value }) },
|
||
onPositionInput(e) { this.setData({ position: e.detail.value }) },
|
||
onSkillsInput(e) { this.setData({ skills: e.detail.value }) },
|
||
onPhoneInput(e) { this.setData({ phone: e.detail.value }) },
|
||
onWechatInput(e) { this.setData({ wechatId: e.detail.value }) },
|
||
onStoryBestMonthInput(e) { this.setData({ storyBestMonth: e.detail.value }) },
|
||
onStoryAchievementInput(e) { this.setData({ storyAchievement: e.detail.value }) },
|
||
onStoryTurningInput(e) { this.setData({ storyTurning: e.detail.value }) },
|
||
onHelpOfferInput(e) { this.setData({ helpOffer: e.detail.value }) },
|
||
onHelpNeedInput(e) { this.setData({ helpNeed: e.detail.value }) },
|
||
onProjectIntroInput(e) { this.setData({ projectIntro: e.detail.value }) },
|
||
|
||
onMbtiPickerChange(e) {
|
||
const i = parseInt(e.detail.value, 10)
|
||
this.setData({ mbtiIndex: i, mbti: MBTI_OPTIONS[i] })
|
||
},
|
||
|
||
// 点击头像：选择微信头像或从相册选择
|
||
onAvatarTap() {
|
||
wx.showActionSheet({
|
||
itemList: ['使用微信头像', '从相册选择'],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
this.setData({ showAvatarModal: true })
|
||
} else if (res.tapIndex === 1) {
|
||
this.chooseAvatarFromAlbum()
|
||
}
|
||
},
|
||
})
|
||
},
|
||
|
||
closeAvatarModal() {
|
||
this.setData({ showAvatarModal: false })
|
||
},
|
||
|
||
// 从相册/相机选择头像
|
||
chooseAvatarFromAlbum() {
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
mediaType: ['image'],
|
||
sourceType: ['album', 'camera'],
|
||
success: async (res) => {
|
||
const tempPath = res.tempFiles[0].tempFilePath
|
||
wx.showLoading({ title: '上传中...', mask: true })
|
||
try {
|
||
const uploadRes = await new Promise((resolve, reject) => {
|
||
wx.uploadFile({
|
||
url: app.globalData.baseUrl + '/api/miniprogram/upload',
|
||
filePath: tempPath,
|
||
name: 'file',
|
||
formData: { folder: 'avatars' },
|
||
success: (r) => {
|
||
try {
|
||
const data = JSON.parse(r.data)
|
||
if (data.success) resolve(data)
|
||
else reject(new Error(data.error || '上传失败'))
|
||
} catch { reject(new Error('解析失败')) }
|
||
},
|
||
fail: reject,
|
||
})
|
||
})
|
||
const avatarUrl = app.globalData.baseUrl + uploadRes.data.url
|
||
this.setData({ avatar: avatarUrl })
|
||
await app.request({
|
||
url: '/api/miniprogram/user/profile',
|
||
method: 'POST',
|
||
data: { userId: app.globalData.userInfo?.id, avatar: avatarUrl },
|
||
})
|
||
if (app.globalData.userInfo) {
|
||
app.globalData.userInfo.avatar = avatarUrl
|
||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||
}
|
||
wx.hideLoading()
|
||
wx.showToast({ title: '头像已更新', icon: 'success' })
|
||
setTimeout(() => this.generateShareCard(), 200)
|
||
} catch (e) {
|
||
wx.hideLoading()
|
||
wx.showToast({ title: e.message || '上传失败', icon: 'none' })
|
||
}
|
||
},
|
||
})
|
||
},
|
||
|
||
// 微信原生 chooseAvatar 回调：使用当前微信头像
|
||
async onChooseAvatar(e) {
|
||
const tempAvatarUrl = e.detail?.avatarUrl
|
||
this.setData({ showAvatarModal: false })
|
||
if (!tempAvatarUrl) return
|
||
wx.showLoading({ title: '上传中...', mask: true })
|
||
|
||
try {
|
||
const uploadRes = await new Promise((resolve, reject) => {
|
||
wx.uploadFile({
|
||
url: app.globalData.baseUrl + '/api/miniprogram/upload',
|
||
filePath: tempAvatarUrl,
|
||
name: 'file',
|
||
formData: { folder: 'avatars' },
|
||
success: (r) => {
|
||
try {
|
||
const data = JSON.parse(r.data)
|
||
if (data.success) resolve(data)
|
||
else reject(new Error(data.error || '上传失败'))
|
||
} catch {
|
||
reject(new Error('解析失败'))
|
||
}
|
||
},
|
||
fail: reject,
|
||
})
|
||
})
|
||
|
||
const avatarUrl = app.globalData.baseUrl + uploadRes.data.url
|
||
this.setData({ avatar: avatarUrl })
|
||
await app.request({
|
||
url: '/api/miniprogram/user/profile',
|
||
method: 'POST',
|
||
data: { userId: app.globalData.userInfo?.id, avatar: avatarUrl },
|
||
})
|
||
if (app.globalData.userInfo) {
|
||
app.globalData.userInfo.avatar = avatarUrl
|
||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||
}
|
||
wx.hideLoading()
|
||
wx.showToast({ title: '头像已更新', icon: 'success' })
|
||
setTimeout(() => this.generateShareCard(), 200)
|
||
} catch (err) {
|
||
wx.hideLoading()
|
||
wx.showToast({ title: err.message || '上传失败，请重试', icon: 'none' })
|
||
}
|
||
},
|
||
|
||
async saveProfile() {
|
||
const userId = app.globalData.userInfo?.id
|
||
if (!userId) {
|
||
wx.showToast({ title: '请先登录', icon: 'none' })
|
||
return
|
||
}
|
||
this.setData({ saving: true })
|
||
try {
|
||
const s = (v) => (v || '').toString().trim()
|
||
const isVip = this.data.isVip
|
||
const payload = {
|
||
userId,
|
||
avatar: s(this.data.avatar),
|
||
nickname: s(this.data.nickname),
|
||
mbti: s(this.data.mbti),
|
||
region: s(this.data.region),
|
||
industry: s(this.data.industry),
|
||
businessScale: s(this.data.businessScale),
|
||
position: s(this.data.position),
|
||
phone: s(this.data.phone),
|
||
wechatId: s(this.data.wechatId),
|
||
}
|
||
const showHelp = isVip || this.data.helpOffer || this.data.helpNeed
|
||
if (isVip) {
|
||
payload.skills = s(this.data.skills)
|
||
payload.storyBestMonth = s(this.data.storyBestMonth)
|
||
payload.storyAchievement = s(this.data.storyAchievement)
|
||
payload.storyTurning = s(this.data.storyTurning)
|
||
payload.projectIntro = s(this.data.projectIntro)
|
||
}
|
||
if (showHelp) {
|
||
payload.helpOffer = s(this.data.helpOffer)
|
||
payload.helpNeed = s(this.data.helpNeed)
|
||
}
|
||
if (payload.wechatId) wx.setStorageSync('user_wechat', payload.wechatId)
|
||
if (payload.phone) wx.setStorageSync('user_phone', payload.phone)
|
||
const hasUpdate = Object.keys(payload).some(k => k !== 'userId' && payload[k] !== '')
|
||
if (!hasUpdate) {
|
||
wx.showToast({ title: '无变更', icon: 'none' })
|
||
this.setData({ saving: false })
|
||
return
|
||
}
|
||
await app.request({
|
||
url: '/api/miniprogram/user/profile',
|
||
method: 'POST',
|
||
data: payload,
|
||
})
|
||
wx.showToast({ title: '保存成功', icon: 'success' })
|
||
if (app.globalData.userInfo) {
|
||
if (payload.nickname) app.globalData.userInfo.nickname = payload.nickname
|
||
if (payload.avatar) app.globalData.userInfo.avatar = payload.avatar
|
||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||
}
|
||
setTimeout(() => getApp().goBackOrToHome(), 800)
|
||
} catch (e) {
|
||
wx.showToast({ title: e.message || '保存失败', icon: 'none' })
|
||
}
|
||
this.setData({ saving: false })
|
||
},
|
||
})
|