Raju/miniprogramme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source
This commit is contained in:
Rajuahamedkst 2025-09-12 16:08:17 +08:00
commit 1d71a02738
237 changed files with 64293 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

339
pages/personal-details/personal-details.js Normal file
View file

@ -0,0 +1,339 @@
const apiClient = require('../../utils/api-client.js');
const occupationOptions = [
"初中生", "高中生", "大学生", "研究生", "留学生", "科研", "警察", "医生", "护士",
"程序员", "老师", "化妆师", "摄影师", "音乐", "美术", "金融", "厨师", "工程师",
"公务员", "互联网", "产品经理", "模特", "演员", "导演", "律师", "创业者", "其他"
];
const educationOptions = ["博士", "硕士", "本科", "专科", "中专", "高中", "初中", "小学", "其他"];
const genderOptions = ["未知", "男", "女", "其他"];
const genderMap = {
"未知": 0,
"男": 1,
"女": 2,
"其他": 3
}
const constellationOptions = ["双鱼座", "白羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "摩羯座", "水瓶座"];
const personalityOptions = ["INTJ", "INTP", "ENTJ", "INFP", "ENTP", "INFJ", "ENFP", "ENFJ", "ISTJ", "ISFJ", "ISTP", "ISFP", "ESTJ", "ESFJ", "ESTP", "ESFP"];
const sleepOptions = ["早起鸟儿", "夜猫子", "规律型", "深度睡眠追求者", "碎片化睡眠者", "失眠困扰者", "咖啡因敏感型", "数字戒断者", "运动调节型", "挑战打卡型", "鼾声监测者", "生物钟调节者", "社区分享型"];
const socialOptions = ["内容创作者", "观察者", "吃瓜者", "潜水者", "机器人", "社群型用户", "KOL", "KOC", "普通用户", "算法依赖型用户", "事件驱动型用户", "季节性活跃用户", "社交维系型用户", "兴趣社群型用户", "职业网络型用户", "娱乐消遣型用户", "购物种草型用户", "互动型用户"];
const heightOptions = Array.from({ length: 71 }, (_, i) => (140 + i) + "cm");
Page({
data: {
occupationOptions,
educationOptions,
genderOptions,
constellationOptions,
personalityOptions,
sleepOptions,
socialOptions,
heightOptions,
user: {
avatar: "/images/default-avatar.png",
customId: "10000123",
nickname: "realrain",
bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.",
occupation: "程序员",
education: "本科",
gender: "男",
birthday: "1999-04-25",
hometown: [],
constellation: "金牛座",
height: "175cm",
personality: "INTJ",
sleep: "夜猫子",
social: "普通用户"
},
// 编辑态
isEditing: false,
editingIntro: false,
tempIntro: "",
tempNickname: "",
// sheet 控制
showSheet: false,
sheetOptions: [],
sheetTitle: "",
sheetKey: "",
selectedValue: ""
},
getKeyByValue(obj, value) {
return Object.keys(obj).find(key => obj[key] === value);
},
async onLoad() {
const pages = getCurrentPages();
const currPage = pages[pages.length - 1]; // 当前页面实例
const profile = pages[pages.length - 2]; // 上一个页面实例（profile）
if (profile && profile.initSystemInfo) {
profile.initSystemInfo();
}
if (profile && profile.loadUserData) {
profile.loadUserData();
}
const clearData = this.clearObjectValues(this.data.user);
// const appData = app.globalData.userInfo?.user;
const appData = await apiClient.getUserInfo();
if (appData?.code === 0) {
appData.data.gender = this.getKeyByValue(genderMap, appData['data']['gender'])
}
this.setData({ user: appData.data ?? clearData });
},
onUnload() {
console.log('页面被物理返回键关闭');
// 更新用户信息
const user = this.data.user;
user['gender'] = genderMap[user.gender];
apiClient.updateUserProfile(user)
.then(res => {
console.log('更新用户信息成功', res);
wx.showToast({ title: '更新用户信息成功', icon: 'success' });
})
.catch(err => {
console.error('更新用户信息失败', err);
wx.showToast({ title: '更新用户信息失败', icon: 'none' });
});
},
clearObjectValues(obj) {
Object.keys(obj).forEach(key => {
const value = obj[key];
if (Array.isArray(value)) {
// 清空为新数组
obj[key] = [];
} else {
const map = {
'object': {},
'string': '',
'number': 0,
'boolean': false,
}
const type = typeof value;
obj[key] = map[type] ?? null;
}
});
return obj
},
/* ---------- 头像 -------------- */
chooseAvatar() {
const pages = getCurrentPages();
const profile = pages[pages.length - 2]; // 上一个页面实例（profile）
if (profile && profile.changeAvatar) {
console.log('执行更换头像方法=======>', profile.changeAvatar());
profile.changeAvatar();
}
},
// chooseImage(useCamera) {
// const self = this;
// wx.chooseImage({
// count: 1,
// sizeType: ['compressed'],
// sourceType: useCamera ? ['camera'] : ['album'],
// success(res) {
// const tempPath = res.tempFilePaths[0];
// const user = Object.assign({}, self.data.user, { avatar: tempPath });
// self.setData({ user });
// wx.setStorageSync('user_profile_v1', user);
// }
// });
// },
startEdit() {
this.setData({
isEditing: true,
tempNickname: this.data.user.nickname
});
},
onInput(e) {
this.setData({
tempNickname: e.detail.value
});
},
confirmEdit() {
if (!this.data.tempNickname) return;
const user = Object.assign({}, this.data.user, { nickname: this.data.tempNickname });
this.setData({ user });
this.setData({
isEditing: false
});
},
onBlur() {
this.setData({
isEditing: false
});
},
/* ---------- 昵称 ---------- */
onEditNickname() {
this.setData({
editingNickname: !this.data.editingNickname,
tempNickname: this.data.user.nickname || ""
});
},
/* ---------- 个人简介 ---------- */
toggleIntroEdit() {
this.setData({
editingIntro: !this.data.editingIntro,
tempIntro: this.data.user.bio || ""
});
},
onIntroInput(e) {
this.setData({ tempIntro: e.detail.value });
},
cancelIntro() {
this.setData({ editingIntro: false, tempIntro: "" });
},
saveIntro() {
const user = Object.assign({}, this.data.user, { bio: this.data.tempIntro });
this.setData({ user, editingIntro: false, tempIntro: "" });
// 更新用户信息
// apiClient.updateUserProfile(user)
// .then(res => {
// console.log('更新用户信息成功', res);
// wx.showToast({ title: '更新用户信息成功', icon: 'success' });
// this.setData({ user, editingIntro: false, tempIntro: "" });
// })
// .catch(err => {
// console.error('更新用户信息失败', err);
// wx.showToast({ title: '更新用户信息失败', icon: 'none' });
// });
},
/* ---------- bottom sheet 通用打开 ---------- */
openSheet(e) {
// data-options 会以字符串形式传入，如果直接传对象需要自定义组件
// 这里我们支持两种写法：如果元素上有 data-options 属性且为 JSON 字符串，则尝试解析（注意：wxml 中直接传数组会被字符串化）
const dataset = e.currentTarget.dataset || {};
const key = dataset.key;
const title = dataset.title || '请选择';
let options = dataset.options;
// dataset.options 在 wxml 传递数组时通常会变成字符串 "[object Object]" —— 我们优先根据 key 在定义好的数组中取
if (!options || typeof options === 'string') {
// if (key === 'occupation') options = occupationOptions;
// else if (key === 'education') options = educationOptions;
// else if (key === 'gender') options = genderOptions;
// else if (key === 'constellation') options = constellationOptions;
// else if (key === 'personality') options = personalityOptions;
// else if (key === 'sleep') options = sleepOptions;
// else if (key === 'social') options = socialOptions;
// else if (key === 'height') options = heightOptions;
// else options = [];
const map = {
occupation: occupationOptions,
education: educationOptions,
gender: genderOptions,
// constellation: constellationOptions,
personality: personalityOptions,
sleep: sleepOptions,
social: socialOptions,
height: heightOptions,
}
options = map[key] || [];
}
const selectedValue = this.data.user[key] || "";
this.setData({
showSheet: true,
sheetOptions: options,
sheetTitle: title,
sheetKey: key,
selectedValue
});
},
closeSheet() {
this.setData({ showSheet: false, sheetOptions: [], sheetTitle: "", sheetKey: "", selectedValue: "" });
},
onSheetSelect(e) {
const idx = e.currentTarget.dataset.index;
const val = this.data.sheetOptions[idx];
const key = this.data.sheetKey;
if (!key) return this.closeSheet();
const user = Object.assign({}, this.data.user);
user[key] = val;
this.setData({ user, selectedValue: val }, () => {
this.closeSheet();
});
// 更新用户信息
// apiClient.updateUserProfile(user)
// .then(res => {
// console.log('更新用户信息成功', res);
// wx.showToast({ title: '更新用户信息成功', icon: 'success' });
// this.setData({ user, selectedValue: val }, () => {
// this.closeSheet();
// });
// })
// .catch(err => {
// console.error('更新用户信息失败', err);
// wx.showToast({ title: '更新用户信息失败', icon: 'none' });
// });
},
/* ---------- 生日 ---------- */
onBirthdayChange(e) {
const val = e.detail.value;
const user = Object.assign({}, this.data.user, { birthday: val });
// 更新星座
const [y, m, d] = val.split('-').map(x => parseInt(x, 10));
user.constellation = this.estimateConstellation(m, d);
this.setData({ user });
// 更新用户信息
// apiClient.updateUserProfile(user)
// .then(res => {
// console.log('更新用户信息成功', res);
// wx.showToast({ title: '更新用户信息成功', icon: 'success' });
// this.setData({ user });
// })
// .catch(err => {
// console.error('更新用户信息失败', err);
// wx.showToast({ title: '更新用户信息失败', icon: 'none' });
// });
},
estimateConstellation(m, d) {
if ((m === 3 && d >= 21) || (m === 4 && d <= 19)) return "白羊座";
if ((m === 4 && d >= 20) || (m === 5 && d <= 20)) return "金牛座";
if ((m === 5 && d >= 21) || (m === 6 && d <= 21)) return "双子座";
if ((m === 6 && d >= 22) || (m === 7 && d <= 22)) return "巨蟹座";
if ((m === 7 && d >= 23) || (m === 8 && d <= 22)) return "狮子座";
if ((m === 8 && d >= 23) || (m === 9 && d <= 22)) return "处女座";
if ((m === 9 && d >= 23) || (m === 10 && d <= 23)) return "天秤座";
if ((m === 10 && d >= 24) || (m === 11 && d <= 22)) return "天蝎座";
if ((m === 11 && d >= 23) || (m === 12 && d <= 21)) return "射手座";
if ((m === 12 && d >= 22) || (m === 1 && d <= 19)) return "摩羯座";
if ((m === 1 && d >= 20) || (m === 2 && d <= 18)) return "水瓶座";
return "双鱼座";
},
/* ---------- 家乡 ---------- */
onHometownChange(e) {
const nick = e.detail?.value ?? this.data.user.hometown;
const user = Object.assign({}, this.data.user, { hometown: nick });
this.setData({ user });
// 更新用户信息
// apiClient.updateUserProfile(user)
// .then(res => {
// console.log('更新用户信息成功', res);
// wx.showToast({ title: '更新用户信息成功', icon: 'success' });
// this.setData({ user });
// })
// .catch(err => {
// console.error('更新用户信息失败', err);
// wx.showToast({ title: '更新用户信息失败', icon: 'none' });
// });
}
});

7
pages/personal-details/personal-details.json Normal file
View file

@ -0,0 +1,7 @@
{
"navigationBarTitleText": "个人资料",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"backgroundColor": "#000000",
"backgroundTextStyle": "light"
}

159
pages/personal-details/personal-details.wxml Normal file
View file

@ -0,0 +1,159 @@
<view class="personal">
<scroll-view class="personal-container"
scroll-y="true"
enhanced="true"
bounces="true"
show-scrollbar="false"
refresher-enabled="true"
refresher-triggered="{{refreshing}}"
bindrefresherrefresh="onRefresh">
<!-- 头像 + customId + 昵称 -->
<view class="card intro-card">
<view class="row">
<text class="left">头像</text>
<view class="right">
<image src="{{user.avatar}}" class="avatar-img" mode="aspectFill" bindtap="chooseAvatar"/>
</view>
</view>
<view class="row">
<text class="left">用户ID</text>
<view class="right" >
<text class="value">{{user.customId}}</text>
</view>
</view>
<view class="row" bindtap="startEdit">
<text class="left">昵称</text>
<!-- 非编辑状态 -->
<view class="right" wx:if="{{!isEditing}}">
<text class="value">{{user.nickname || '请输入昵称'}}</text>
<text class="chev">›</text>
</view>
<view class="right" wx:if="{{isEditing}}">
<input
class="input"
placeholder="请输入昵称"
value="{{tempNickname}}"
maxlength="15"
bindinput="onInput"
bindblur="onBlur"
focus="{{true}}"
/>
<view class="icon-btn" bindtap="confirmEdit">✔️</view>
<!-- <view class="icon-btn" bindtap="cancelEdit">✖️</view> -->
</view>
</view>
</view>
<!-- 个人简介 -->
<text class="left" style="position:relative;top:-12rpx;">个人简介</text>
<view class="card intro-card">
<view wx:if="{{!editingIntro}}" class="intro-box" bindtap="toggleIntroEdit">
<text class="intro-text">{{user.bio || '点击编辑个人简介'}}</text>
</view>
<view wx:if="{{editingIntro}}" class="intro-edit">
<textarea class="textarea" value="{{tempIntro}}" bindinput="onIntroInput" maxlength="100" placeholder="请填写个人简介（最多100字）"></textarea>
<view class="intro-actions">
<button class="btn cancel" bindtap="cancelIntro">取消</button>
<button class="btn save" bindtap="saveIntro">保存</button>
</view>
</view>
</view>
<!-- 关于我 -->
<text class="left">关于我</text>
<view class="card intro-card">
<view class="row" bindtap="openSheet" data-key="occupation" data-title="选择职业" data-options="{{occupationOptions}}">
<text class="left">职业</text>
<view class="right">
<text class="value">{{user.occupation || '请选择'}}</text>
<text class="chev">›</text>
</view>
</view>
<view class="row" bindtap="openSheet" data-key="education" data-title="选择教育" data-options="{{educationOptions}}">
<text class="left">教育</text>
<view class="right">
<text class="value">{{user.education || '请选择'}}</text>
<text class="chev">›</text>
</view>
</view>
<view class="row" bindtap="openSheet" data-key="gender" data-title="选择性别" data-options="{{genderOptions}}">
<text class="left">性别</text>
<view class="right">
<text class="value">{{user.gender || '请选择'}}</text>
<text class="chev">›</text>
</view>
</view>
<view class="row">
<text class="left">生日</text>
<view class="right">
<picker mode="date" value="{{user.birthday}}" start="1900-01-01" end="2100-12-31" bindchange="onBirthdayChange">
<text class="value">{{user.birthday || '请选择'}}</text>
</picker>
<text class="chev">›</text>
</view>
</view>
<view class="row">
<text class="left">家乡</text>
<view class="right">
<picker mode="region" value="{{user.hometown}}" bindchange="onHometownChange">
<text class="value" wx:if="{{!user.hometown || user.hometown.length === 0}}">请选择</text>
<view class="value">{{user.hometown[0]}} {{user.hometown[1]}} {{user.hometown[2]}}</view>
</picker>
<text class="chev">›</text>
</view>
</view>
</view>
<!-- 更多 -->
<text class="left">更多</text>
<view class="card intro-card">
<view class="row" data-key="constellation" data-title="选择星座" data-options="{{constellationOptions}}">
<text class="left">星座</text>
<view class="right"><text style="color:#bfbfbf;">{{user.constellation || '选择生日后会自动试算哦😘'}}</text></view>
</view>
<view class="row" bindtap="openSheet" data-key="height" data-title="选择身高" data-options="{{heightOptions}}">
<text class="left">身高</text>
<view class="right"><text class="value">{{user.height || '请选择'}}</text><text class="chev">›</text></view>
</view>
<view class="row" bindtap="openSheet" data-key="personality" data-title="选择人格类型" data-options="{{personalityOptions}}">
<text class="left">人格类型</text>
<view class="right"><text class="value">{{user.personality || '请选择'}}</text><text class="chev">›</text></view>
</view>
<view class="row" bindtap="openSheet" data-key="sleep" data-title="选择睡眠习惯" data-options="{{sleepOptions}}">
<text class="left">睡眠习惯</text>
<view class="right"><text class="value">{{user.sleep || '请选择'}}</text><text class="chev">›</text></view>
</view>
<view class="row" bindtap="openSheet" data-key="social" data-title="选择社交活跃度" data-options="{{socialOptions}}">
<text class="left">社交活跃度</text>
<view class="right"><text class="value">{{user.social || '请选择'}}</text><text class="chev">›</text></view>
</view>
</view>
</scroll-view>
<!-- 底部内联选择面板（sheet） -->
<view wx:if="{{showSheet}}">
<view class="mask" bindtap="closeSheet"></view>
<view class="sheet">
<view class="sheet-handle"></view>
<view class="sheet-title">
<text>{{sheetTitle}}</text>
<!-- <button class="sheet-done" bindtap="closeSheet">完成</button> -->
</view>
<scroll-view class="sheet-list" scroll-y="true">
<view wx:for="{{sheetOptions}}" wx:key="{{index}}" wx:for-item="item" data-index="{{index}}" bindtap="onSheetSelect" class="sheet-item {{item==selectedValue? 'active' : ''}}">
<text class="sheet-item-text">{{item}}</text>
<text wx:if="{{item==selectedValue}}" class="sheet-check">✓</text>
</view>
</scroll-view>
</view>
</view>
</view>

247
pages/personal-details/personal-details.wxss Normal file
View file

@ -0,0 +1,247 @@
/* 全局背景与字体 */
page, .personal {
height: 100%;
background: #000000;
padding: 30rpx;
display: flex;
flex-direction: column;
position: relative;
}
/* 容器 */
.personal-container {
/* flex: 1; */
background: transparent;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 卡片基础 */
.card {
background: rgb(105 105 105 / 30%);
border-radius: 18rpx;
/* 减小整体内边距，给行内元素更多可用宽度 */
padding: 12rpx 14rpx;
margin-bottom: 20rpx;
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.6);
color: #e8e8e8;
}
/* 头像区域 */
.avatar-area {
display: flex;
align-items: center;
justify-content: space-between;
}
.avatar-area .left .label {
font-size: 26rpx;
color: #cfcfcf;
}
/* .avatar-right {
display: flex;
align-items: center;
} */
.avatar-img {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background: #000000;
margin-left: 18rpx;
margin-right: 18rpx;
display: block;
}
/* 头像外层容器（如有使用） */
.avatar-wrap {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
overflow: hidden;
background: #000;
margin-left: 18rpx;
margin-right: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.4);
}
/* 头像占位样式（无头像时） */
.avatar-placeholder {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background: linear-gradient(135deg, #151516 0%, #0F0F11 100%);
display: flex;
align-items: center;
justify-content: center;
color: #e8e8e8;
font-size: 40rpx;
margin-left: 18rpx;
margin-right: 18rpx;
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.4);
}
.chev {
color: #9b9b9b;
font-size: 30rpx;
margin-left: 8rpx;
}
/* 小按钮样式 */
.icon-btn {
/* 小按钮，移除强制宽度，允许在小屏上收缩 */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28rpx;
width: 120rpx;
padding: 4rpx 8rpx;
font-size: 26rpx;
background-color: rgb(143 49 255 / 32%);
box-sizing: border-box;
flex: 0 0 auto;
line-height: 1;
}
/* 输入框样式 */
.input {
font-size: 28rpx;
/* 可见的文本颜色 */
color: #ffffff;
/* 左对齐输入，通常更自然且减少换行问题 */
text-align: left;
flex: 1 1 auto; /* 主动占满剩余空间 */
width: auto;
min-width: 0; /* 允许在 flex 容器中收缩，避免换行 */
border: none; /* 移除默认边框 */
background: transparent;
padding: 0 8rpx 0 0;
}
/* 个人简介 */
.intro-box {
background: rgb(105 105 105 / 30%);
border-radius: 12rpx;
padding: 16rpx;
min-height: 140rpx;
}
.intro-text {
color: #bfbfbf;
line-height: 1.6;
font-size: 24rpx;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
/* 编辑态 textarea */
.textarea {
width: 95%;
min-height: 160rpx;
background: #0b0d0e;
color: #ddd;
border-radius: 12rpx;
padding: 16rpx;
font-size: 24rpx;
border: 1rpx solid rgba(255,255,255,0.02);
}
.intro-actions {
display: flex;
justify-content: flex-end;
margin-top: 12rpx;
}
.btn {
padding: 10rpx 20rpx;
margin-left: 12rpx;
border-radius: 12rpx;
font-size: 24rpx;
border: none;
}
.cancel {
background: transparent;
color: #9b9b9b;
border: 1rpx solid rgba(255,255,255,0.03);
}
.save {
background: linear-gradient(90deg,#00c2a8,#00a3ff);
color: #fff;
}
/* 卡片样式 */
.intro-card .row {
display: flex;
flex-wrap: nowrap; /* 禁止换行，保证左侧标签与右侧内容在同一行 */
justify-content: space-between;
align-items: center;
/* 减小行内上下与左右内边距，释放水平空间 */
padding: 22rpx 8rpx;
border-bottom: 1rpx solid rgba(255,255,255,0.02);
}
.intro-card .row:last-child { border-bottom: none; }
.left { color: #cfcfcf; font-size: 26rpx; /* 固定或最小宽度，避免被压缩换行 */
/* 将左侧最小宽度适度减小，给输入留出更多空间 */
min-width: 88rpx;
flex: 0 0 auto;
white-space: nowrap; /* 防止标签内换行 */
}
.right { display:flex; align-items:center; flex: 1 1 auto; justify-content: flex-end; gap: 6rpx; }
.value { color: #e3e3e3; font-size: 26rpx; margin-right: 10rpx; }
/* 底部选择面板（sheet）与遮罩 */
.mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 50;
}
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: #0f1112;
border-top-left-radius: 28rpx;
border-top-right-radius: 28rpx;
padding: 18rpx;
box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.6);
}
.sheet-handle {
width: 80rpx;
height: 6rpx;
background: rgba(255,255,255,0.06);
border-radius: 6rpx;
margin: 6rpx auto 12rpx;
}
.sheet-title {
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom: 12rpx;
border-bottom: 1rpx solid rgba(255,255,255,0.03);
}
.sheet-title text { color: white; font-size: 28rpx; }
.sheet-done {
background: transparent;
color: #9aa0a6;
border: none;
font-size: 24rpx;
}
.sheet-list {
max-height: 420rpx;
margin-top: 12rpx;
padding-bottom: 12rpx;
}
.sheet-item {
padding: 16rpx 12rpx;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom: 1rpx solid rgba(255,255,255,0.02);
font-size: 26rpx;
color: #d7d7d7;
}
.sheet-item.active {
background: rgba(0,160,255,0.06);
color: #00a3ff;
}
.sheet-check { color: #00a3ff; font-size: 28rpx; }