fnvtk/soul-yongping
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新文档，新增输入框样式最佳实践，强调在小程序和管理端开发中使用容器包裹输入框以避免布局问题。调整经验库，记录相关最佳实践和开发进度，确保团队共享经验的一致性和可追溯性。优化小程序页面，增加分享功能，提升用户体验。

Browse Source
This commit is contained in:
Alex-larget
2026-02-27 14:22:58 +08:00
parent 31f4e37345
commit 8655dca7b4
34 changed files with 514 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
miniprogram/pages/vip/vip.js
View File

@@ -20,11 +20,12 @@ Page({
{ title: '链接资源', desc: '进群聊天、链接资源的权利' },
{ title: '专属VIP标识', desc: '头像金色VIP光圈' }
],
profile: { name: '', project: '', contact: '', bio: '' },
profile: { vipName: '', vipProject: '', vipContact: '', vipAvatar: '', vipBio: '' },
purchasing: false
},
onLoad() {
wx.showShareMenu({ withShareTimeline: true })
this.setData({ statusBarHeight: app.globalData.statusBarHeight })
this.loadVipInfo()
},
@@ -55,10 +56,54 @@ Page({
async loadProfile(userId) {
try {
const res = await app.request(`/api/miniprogram/vip/profile?userId=${userId}`)
if (res?.success) this.setData({ profile: res.data })
if (res?.success) {
const p = res.data
// 头像若为相对路径则补全
if (p.vipAvatar && !p.vipAvatar.startsWith('http')) {
p.vipAvatar = app.globalData.baseUrl.replace(/\/$/, '') + (p.vipAvatar.startsWith('/') ? p.vipAvatar : '/' + p.vipAvatar)
}
this.setData({ profile: p })
}
} catch (e) { console.log('[VIP] 资料加载失败', e) }
},
async onChooseVipAvatar() {
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 d = JSON.parse(r.data)
d.success ? resolve(d) : reject(new Error(d.error || '上传失败'))
} catch { reject(new Error('解析失败')) }
},
fail: reject
})
})
const path = uploadRes.url || uploadRes.data?.url || ''
const avatarUrl = path.startsWith('http') ? path : (app.globalData.baseUrl.replace(/\/$/, '') + (path.startsWith('/') ? path : '/' + path))
this.setData({ 'profile.vipAvatar': avatarUrl })
wx.hideLoading()
wx.showToast({ title: '头像已更新', icon: 'success' })
} catch (e) {
wx.hideLoading()
wx.showToast({ title: e.message || '上传失败', icon: 'none' })
}
}
})
},
async handlePurchase() {
let userId = app.globalData.userInfo?.id
let openId = app.globalData.openId || app.globalData.userInfo?.open_id
@@ -110,10 +155,10 @@ Page({
} finally { this.setData({ purchasing: false }) }
},
onNameInput(e) { this.setData({ 'profile.name': e.detail.value }) },
onProjectInput(e) { this.setData({ 'profile.project': e.detail.value }) },
onContactInput(e) { this.setData({ 'profile.contact': e.detail.value }) },
onBioInput(e) { this.setData({ 'profile.bio': e.detail.value }) },
onVipNameInput(e) { this.setData({ 'profile.vipName': e.detail.value }) },
onVipProjectInput(e) { this.setData({ 'profile.vipProject': e.detail.value }) },
onVipContactInput(e) { this.setData({ 'profile.vipContact': e.detail.value }) },
onVipBioInput(e) { this.setData({ 'profile.vipBio': e.detail.value }) },
async saveProfile() {
const userId = app.globalData.userInfo?.id
@@ -121,7 +166,7 @@ Page({
const p = this.data.profile
try {
const res = await app.request('/api/miniprogram/vip/profile', {
method: 'POST', data: { userId, name: p.name, project: p.project, contact: p.contact, bio: p.bio }
method: 'POST', data: { userId, vipName: p.vipName, vipProject: p.vipProject, vipContact: p.vipContact, vipAvatar: p.vipAvatar, vipBio: p.vipBio }
})
if (res?.success) wx.showToast({ title: '资料已保存', icon: 'success' })
else wx.showToast({ title: res?.error || '保存失败', icon: 'none' })
@@ -136,5 +181,10 @@ Page({
title: 'Soul创业派对 - VIP会员',
path: ref ? `/pages/vip/vip?ref=${ref}` : '/pages/vip/vip'
}
},
onShareTimeline() {
const ref = app.getMyReferralCode()
return { title: 'Soul创业派对 - VIP会员', query: ref ? `ref=${ref}` : '' }
}
})

58
miniprogram/pages/vip/vip.wxml
View File

@@ -1,44 +1,50 @@
<!--VIP会员页-->
<!-- VIP会员页 -->
<view class="page">
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
<view class="nav-back" bindtap="goBack"><text class="back-icon">‹</text></view>
<view class="nav-back" bindtap="goBack">
<text class="back-icon">‹</text>
</view>
<text class="nav-title">卡若创业派对</text>
<view class="nav-placeholder-r"></view>
</view>
<view style="height: {{statusBarHeight + 44}}px;"></view>
<!-- 会员状态 -->
<view class="vip-hero {{isVip ? 'vip-hero-active' : ''}}">
<text class="vip-hero-tag">卡若创业派对</text>
<text class="vip-hero-title">加入卡若的<text class="gold">创业派对</text>会员</text>
<text class="vip-hero-title">
加入卡若的
<text class="gold">创业派对</text>
会员
</text>
<text class="vip-hero-sub" wx:if="{{isVip}}">有效期至 {{expireDateStr}}（剩余{{daysRemaining}}天）</text>
<text class="vip-hero-sub" wx:else>专属会员尊享权益</text>
</view>
<!-- 内容权益 -->
<view class="rights-card">
<text class="rights-section-title">内容权益</text>
<view class="rights-item" wx:for="{{contentRights}}" wx:key="title">
<view class="rights-check-wrap"><text class="rights-check">✓</text></view>
<view class="rights-check-wrap">
<text class="rights-check">✓</text>
</view>
<view class="rights-info">
<text class="rights-title">{{item.title}}</text>
<text class="rights-desc">{{item.desc}}</text>
</view>
</view>
</view>
<!-- 社交权益 -->
<view class="rights-card">
<text class="rights-section-title">社交权益</text>
<view class="rights-item" wx:for="{{socialRights}}" wx:key="title">
<view class="rights-check-wrap"><text class="rights-check">✓</text></view>
<view class="rights-check-wrap">
<text class="rights-check">✓</text>
</view>
<view class="rights-info">
<text class="rights-title">{{item.title}}</text>
<text class="rights-desc">{{item.desc}}</text>
</view>
</view>
</view>
<!-- 价格区 + 购买按钮 -->
<view class="buy-area" wx:if="{{!isVip}}">
<view class="price-row">
@@ -51,28 +57,46 @@
</button>
<text class="buy-sub">加入卡若创业派对，获取创业资讯与优质人脉资源</text>
</view>
<!-- VIP资料填写（仅VIP可见） -->
<view class="profile-card" wx:if="{{isVip}}">
<text class="profile-title">会员资料（展示在创业老板排行）</text>
<view class="avatar-row">
<view class="avatar-label">头像</view>
<view class="avatar-slot" bindtap="onChooseVipAvatar">
<image wx:if="{{profile.vipAvatar}}" class="avatar-img" src="{{profile.vipAvatar}}" mode="aspectFill"/>
<view wx:else class="avatar-placeholder">
<text class="avatar-add">+</text>
<text class="avatar-hint">上传头像</text>
</view>
</view>
</view>
<view class="form-group">
<text class="form-label">姓名</text>
<input class="form-input" placeholder="您的真实姓名" value="{{profile.name}}" bindinput="onNameInput"/>
<view class="form-input">
<input type="nickname" placeholder="您的真实姓名" placeholder-class="form-placeholder" value="{{profile.vipName}}" bindinput="onVipNameInput" />
</view>
</view>
<view class="form-group">
<text class="form-label">项目名称</text>
<input class="form-input" placeholder="您的项目/公司名称" value="{{profile.project}}" bindinput="onProjectInput"/>
<view class="form-input">
<input placeholder="您的项目/公司名称" placeholder-class="form-placeholder" value="{{profile.vipProject}}" bindinput="onVipProjectInput" />
</view>
</view>
<view class="form-group">
<text class="form-label">联系方式</text>
<input class="form-input" placeholder="微信号或手机号" value="{{profile.contact}}" bindinput="onContactInput"/>
<view class="form-input">
<input placeholder="微信号或手机号" placeholder-class="form-placeholder" value="{{profile.vipContact}}" bindinput="onVipContactInput" />
</view>
</view>
<view class="form-group">
<text class="form-label">一句话简介</text>
<input class="form-input" placeholder="简要描述您的业务" value="{{profile.bio}}" bindinput="onBioInput"/>
<view class="form-input">
<input placeholder="简要描述您的业务" placeholder-class="form-placeholder" value="{{profile.vipBio}}" bindinput="onVipBioInput" />
</view>
</view>
<view class="save-btn-wrap">
<button class="save-btn" bindtap="saveProfile">保存资料</button>
</view>
<button class="save-btn" bindtap="saveProfile">保存资料</button>
</view>
<view class="bottom-space"></view>
</view>
</view>

28
miniprogram/pages/vip/vip.wxss
View File

@@ -12,15 +12,16 @@
.gold { color: #FFD700; }
.vip-hero-sub { display: block; font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 12rpx; }
.rights-card { margin: 24rpx; }
.rights-item { display: flex; align-items: flex-start; gap: 20rpx; padding: 24rpx; margin-bottom: 16rpx; background: rgba(255,255,255,0.04); border: 1rpx solid rgba(255,255,255,0.06); border-radius: 16rpx; }
.rights-card { margin: 24rpx; padding: 0 8rpx; }
.rights-item { display: flex; align-items: flex-start; padding: 24rpx; margin-bottom: 16rpx; background: rgba(255,255,255,0.04); border: 1rpx solid rgba(255,255,255,0.06); border-radius: 16rpx; }
.rights-item .rights-check-wrap { margin-right: 20rpx; }
.rights-check-wrap { width: 44rpx; height: 44rpx; border-radius: 50%; background: rgba(0,206,209,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4rpx; }
.rights-check { color: #00CED1; font-size: 24rpx; font-weight: bold; }
.rights-info { display: flex; flex-direction: column; }
.rights-title { font-size: 30rpx; font-weight: 600; color: rgba(255,255,255,0.95); }
.rights-desc { font-size: 24rpx; color: rgba(255,255,255,0.45); margin-top: 6rpx; }
.rights-section-title { display: block; font-size: 26rpx; color: #00CED1; font-weight: 600; margin-bottom: 16rpx; padding-bottom: 12rpx; border-bottom: 1rpx solid rgba(0,206,209,0.15); }
.rights-section-title { display: block; font-size: 26rpx; color: #00CED1; font-weight: 600; margin-bottom: 16rpx; margin-left: 16rpx; padding-bottom: 12rpx; border-bottom: 1rpx solid rgba(0,206,209,0.15); }
.buy-area { margin: 24rpx; padding: 32rpx; text-align: center; background: rgba(255,255,255,0.03); border-radius: 20rpx; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 12rpx; margin-bottom: 24rpx; }
@@ -32,12 +33,23 @@
.buy-btn[disabled] { opacity: 0.5; }
.buy-sub { display: block; font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 16rpx; }
.profile-card { margin: 24rpx; padding: 28rpx; background: #1c1c1e; border-radius: 20rpx; }
.profile-card { margin: 24rpx; padding: 32rpx; background: rgba(255,255,255,0.04); border: 1rpx solid rgba(255,255,255,0.08); border-radius: 20rpx; }
.profile-title { font-size: 30rpx; font-weight: 600; color: rgba(255,255,255,0.9); display: block; margin-bottom: 24rpx; }
.form-group { margin-bottom: 20rpx; }
.form-label { font-size: 24rpx; color: rgba(255,255,255,0.5); display: block; margin-bottom: 8rpx; }
.form-input { background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; padding: 16rpx 20rpx; font-size: 28rpx; color: #fff; }
.save-btn { margin-top: 24rpx; width: 100%; height: 80rpx; line-height: 80rpx; background: #00CED1; color: #000; font-size: 30rpx; font-weight: 600; border-radius: 40rpx; border: none; }
.avatar-row { display: flex; align-items: center; margin-bottom: 24rpx; }
.avatar-label { font-size: 26rpx; color: rgba(255,255,255,0.6); width: 140rpx; flex-shrink: 0; }
.avatar-slot { width: 128rpx; height: 128rpx; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2rpx dashed rgba(255,255,255,0.2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.avatar-slot .avatar-img { width: 100%; height: 100%; }
.avatar-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
.avatar-add { font-size: 48rpx; line-height: 1; }
.avatar-hint { font-size: 20rpx; margin-top: 8rpx; }
.form-group { margin-bottom: 24rpx; }
.form-label { font-size: 26rpx; color: rgba(255,255,255,0.6); display: block; margin-bottom: 10rpx; }
.form-input { box-sizing: border-box; width: 100%; min-height: 76rpx; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; padding: 16rpx 24rpx; }
.form-input input { width: 100%; font-size: 28rpx; color: #fff; line-height: 1.5; background: transparent; }
.form-placeholder { color: rgba(255,255,255,0.35); }
.save-btn-wrap { margin-top: 32rpx; width: 100%; display: flex; justify-content: center; }
.save-btn { display: block; margin: 0; padding: 0; width: 100%; height: 88rpx; line-height: 88rpx; text-align: center; background: linear-gradient(135deg, #00CED1, #20B2AA); color: #000; font-size: 32rpx; font-weight: 600; border-radius: 44rpx; border: none; box-sizing: border-box; }
.save-btn::after { border: none; margin: 0; padding: 0; }
.author-section { margin: 32rpx 24rpx; padding: 24rpx; border-top: 1rpx solid rgba(255,255,255,0.08); }
.author-row { display: flex; justify-content: space-between; padding: 8rpx 0; }