ea
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { client } from "../../../utils/api";
|
||||
import { updateuserinfo, userInfo } from "../../../utils/request";
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userinfo: {
|
||||
nickname: '创作小助手',
|
||||
id: '10010',
|
||||
avatar: 'https://cdn.zhuangb123.com/avatar/boy/a2cfe723-98ddc-12de-723b8f51b-71b1e3.jpeg',
|
||||
description: 'AI 创作，让想象力触手可及 ✨'
|
||||
},
|
||||
oldAvatar: '',
|
||||
newAvatar: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.setData({ userinfo: wx.getStorageSync('userInfo') });
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handleChangeAvatar() {
|
||||
let that = this
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
success(res) {
|
||||
let userInfo = that.data.userinfo;
|
||||
let oldAvatar = userInfo.avatar;
|
||||
userInfo.avatar = res.tempFilePaths[0];
|
||||
|
||||
that.setData({
|
||||
userinfo: userInfo,
|
||||
oldAvatar: oldAvatar
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
handleNicknameInput(e: any) {
|
||||
let userinfo = this.data.userinfo;
|
||||
userinfo.nickname = e.detail.value;
|
||||
this.setData({
|
||||
userinfo: userinfo,
|
||||
})
|
||||
},
|
||||
handleSave() {
|
||||
let nickname = this.data.userinfo;
|
||||
if (nickname.nickname.length < 2) {
|
||||
wx.showToast({ title: '昵称至少2个字符', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
let that = this;
|
||||
let update = () => {
|
||||
updateuserinfo(nickname.nickname, nickname.avatar).then((res: any) => {
|
||||
if (!res.code) {
|
||||
userInfo().then((res: any) => {
|
||||
wx.setStorageSync('userInfo', res.data);
|
||||
|
||||
that.setData({ userinfo: res.data });
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.data.userinfo.avatar.indexOf('http://tmp/') === -1) {
|
||||
update();
|
||||
return;
|
||||
}
|
||||
|
||||
client.upload(this.data.userinfo.avatar, {}).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
nickname.avatar = res.data.url;
|
||||
update();
|
||||
} else {
|
||||
wx.showModal({ title: '温馨提示', content: '头像上传失败' })
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,58 @@
|
||||
<view class="edit-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="edit-nav">
|
||||
<view class="nav-back" bindtap="handleBack">
|
||||
<text></text>
|
||||
</view>
|
||||
<text class="nav-title">编辑资料</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="edit-content">
|
||||
<view class="edit-card">
|
||||
<view class="section-title">
|
||||
<text class="section-mark"></text>
|
||||
<text>头像</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-row">
|
||||
<view class="avatar-wrap">
|
||||
<view class="avatar-large">
|
||||
<image src="{{userinfo.avatar}}"></image>
|
||||
</view>
|
||||
<view class="camera-badge">
|
||||
<image class="camera-icon icon-placeholder" src="/static/images/my/caram.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="change-avatar" bindtap="handleChangeAvatar">
|
||||
<image class="image-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>更换头像</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="section-title nickname-title">
|
||||
<text class="section-mark"></text>
|
||||
<text>昵称</text>
|
||||
</view>
|
||||
|
||||
<view class="input-shell">
|
||||
<input class="nickname-input" value="{{userinfo.nickname}}" maxlength="12" placeholder="请输入昵称" bindinput="handleNicknameInput" />
|
||||
<image class="edit-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="input-tip">2–12个字符</text>
|
||||
|
||||
<view class="card-spacer"></view>
|
||||
|
||||
<view class="sync-tip">
|
||||
<image class="shield-icon icon-placeholder" src="/static/images/my/image.png" mode="aspectFit"></image>
|
||||
<text>修改后将同步更新个人中心信息</text>
|
||||
</view>
|
||||
|
||||
<view class="save-btn" bindtap="handleSave">保存修改</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,299 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #f8f6ff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.edit-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 82% 4%, rgba(137, 95, 255, 0.18), transparent 20%),
|
||||
radial-gradient(circle at 16% 10%, rgba(118, 129, 255, 0.14), transparent 24%),
|
||||
linear-gradient(180deg, #f4f1ff 0%, #fbfaff 42%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.edit-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back,
|
||||
.nav-placeholder {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #101522;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
flex: 1;
|
||||
padding: 50rpx 32rpx 78rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.edit-card {
|
||||
width: 100%;
|
||||
min-height: 1074rpx;
|
||||
padding: 54rpx 40rpx 50rpx;
|
||||
border-radius: 34rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 16rpx 42rpx rgba(91, 84, 142, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
color: #111827;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.section-mark {
|
||||
width: 7rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(180deg, #aa6dff, #6f67ff);
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
margin-top: 32rpx;
|
||||
padding: 0 44rpx 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
width: 246rpx;
|
||||
height: 246rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
width: 222rpx;
|
||||
height: 222rpx;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #f3e0d7, #fff7f4);
|
||||
/* border: 4rpx solid #e6dcff; */
|
||||
box-shadow: inset 0 0 0 5rpx #ffffff;
|
||||
}
|
||||
|
||||
.avatar-large>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.camera-badge {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: linear-gradient(135deg, #9a6cff, #7656ef); */
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8rpx 18rpx rgba(115, 83, 238, 0.24), 0 0 0 8rpx #ffffff;
|
||||
margin-left: -70rpx;
|
||||
margin-top: 142rpx;
|
||||
}
|
||||
|
||||
.camera-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
border-radius: 6rpx;
|
||||
/* border: 4rpx solid #ffffff; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* .camera-icon::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
margin: 2rpx auto 0;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
} */
|
||||
|
||||
.change-avatar {
|
||||
width: 220rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14rpx;
|
||||
color: #7d5cff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
border: 2rpx solid #8d6cff;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
display: block;
|
||||
border: 4rpx solid currentColor;
|
||||
border-radius: 3rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image-icon::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
margin: 5rpx 0 0 6rpx;
|
||||
border-left: 4rpx solid currentColor;
|
||||
border-top: 4rpx solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
margin: 42rpx 0 54rpx;
|
||||
background: #e5e7ef;
|
||||
}
|
||||
|
||||
.nickname-title {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.input-shell {
|
||||
height: 86rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
border: 2rpx solid #ddd7ff;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 82rpx;
|
||||
color: #111827;
|
||||
font-size: 27rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #9a79ff;
|
||||
border-bottom: 5rpx solid #9a79ff;
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
margin-top: 18rpx;
|
||||
color: #8b90a2;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-spacer {
|
||||
flex: 1;
|
||||
min-height: 210rpx;
|
||||
}
|
||||
|
||||
.sync-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14rpx;
|
||||
color: #9095a5;
|
||||
font-size: 20rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.shield-icon {
|
||||
width: 24rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 6rpx 6rpx 12rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #a56dff, #715eff);
|
||||
}
|
||||
|
||||
.shield-icon::after {
|
||||
content: "";
|
||||
width: 9rpx;
|
||||
height: 5rpx;
|
||||
display: block;
|
||||
border-left: 3rpx solid #ffffff;
|
||||
border-bottom: 3rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
height: 86rpx;
|
||||
margin-top: 28rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #b26bff 0%, #7549f5 100%);
|
||||
box-shadow: 0 14rpx 26rpx rgba(117, 73, 245, 0.2);
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user