start
This commit is contained in:
135
xui/wxapp/pages/mine/comp_profile/comp_profile.js
Normal file
135
xui/wxapp/pages/mine/comp_profile/comp_profile.js
Normal file
@@ -0,0 +1,135 @@
|
||||
// pages/mine/comp_profile/comp_profile.js
|
||||
Component({
|
||||
properties: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
data: {
|
||||
editData: {
|
||||
name: '',
|
||||
sex: 'male',
|
||||
birth: '1970-1-1',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
phone: ''
|
||||
},
|
||||
today: ''
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const today = new Date()
|
||||
this.setData({
|
||||
today: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
|
||||
})
|
||||
},
|
||||
ready() {
|
||||
this.initEditData()
|
||||
}
|
||||
},
|
||||
|
||||
observers: {
|
||||
visible(newVal) {
|
||||
if (newVal) {
|
||||
this.initEditData()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initEditData() {
|
||||
const app = getApp()
|
||||
const user = app.globalData.user || {}
|
||||
const profile = user.profile || {}
|
||||
const location = user.location || {}
|
||||
|
||||
let birth = ''
|
||||
if (profile.birth) {
|
||||
const date = new Date(profile.birth)
|
||||
birth = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
this.setData({
|
||||
editData: {
|
||||
avatar: profile.avatar || '/images/home-active2.png',
|
||||
name: profile.name || '',
|
||||
phone: profile.mobile || '',
|
||||
sex: profile.sex || '',
|
||||
birth: birth,
|
||||
province: location.province || '',
|
||||
city: location.city || '',
|
||||
district: location.district || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.triggerEvent('close')
|
||||
},
|
||||
|
||||
onSheetTap() {},
|
||||
|
||||
onChooseAvatar() {
|
||||
wx.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath
|
||||
this.setData({
|
||||
'editData.avatar': tempFilePath
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onSelectSex(e) {
|
||||
const sex = e.currentTarget.dataset.sex
|
||||
this.setData({
|
||||
'editData.sex': sex
|
||||
})
|
||||
},
|
||||
|
||||
onBirthChange(e) {
|
||||
this.setData({
|
||||
'editData.birth': e.detail.value
|
||||
})
|
||||
},
|
||||
|
||||
onRegionChange(e) {
|
||||
const region = e.detail.value
|
||||
this.setData({
|
||||
'editData.province': region[0] || '',
|
||||
'editData.city': region[1] || '',
|
||||
'editData.district': region[2] || ''
|
||||
})
|
||||
},
|
||||
|
||||
onFieldInput(e) {
|
||||
const field = e.currentTarget.dataset.field
|
||||
this.setData({
|
||||
[`editData.${field}`]: e.detail.value
|
||||
})
|
||||
},
|
||||
|
||||
onSave() {
|
||||
const editData = this.data.editData
|
||||
|
||||
if (editData.idnumber && editData.idnumber.length !== 18) {
|
||||
wx.showToast({
|
||||
title: '身份证号应为18位',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.triggerEvent('save', {
|
||||
editData: editData
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
6
xui/wxapp/pages/mine/comp_profile/comp_profile.json
Normal file
6
xui/wxapp/pages/mine/comp_profile/comp_profile.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
64
xui/wxapp/pages/mine/comp_profile/comp_profile.wxml
Normal file
64
xui/wxapp/pages/mine/comp_profile/comp_profile.wxml
Normal file
@@ -0,0 +1,64 @@
|
||||
<view class="profile-overlay" wx:if="{{visible}}" bindtap="onClose">
|
||||
<view class="profile-sheet" catchtap="onSheetTap">
|
||||
<view class="profile-header">
|
||||
<text class="profile-title">个人信息</text>
|
||||
<view class="profile-close" bindtap="onClose">
|
||||
<t-icon name="close" size="36rpx" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-body">
|
||||
<view class="profile-item profile-item-avatar" bindtap="onChooseAvatar">
|
||||
<text class="profile-label">头像</text>
|
||||
<view class="profile-avatar-wrap">
|
||||
<image class="profile-avatar" src="{{editData.avatar}}" mode="aspectFill" />
|
||||
<t-icon name="chevron-right" size="32rpx" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-item">
|
||||
<text class="profile-label">姓名</text>
|
||||
<input class="profile-input" value="{{editData.name}}" placeholder="请输入姓名" maxlength="20" bindinput="onFieldInput" data-field="name" />
|
||||
</view>
|
||||
|
||||
<view class="profile-item">
|
||||
<text class="profile-label">性别</text>
|
||||
<view class="profile-sex-wrap">
|
||||
<view class="profile-sex-tag {{editData.sex === 'male' ? 'profile-sex-tag-active' : ''}}" bindtap="onSelectSex" data-sex="male">
|
||||
<text class="profile-sex-text">男</text>
|
||||
</view>
|
||||
<view class="profile-sex-tag {{editData.sex === 'female' ? 'profile-sex-tag-active' : ''}}" bindtap="onSelectSex" data-sex="female">
|
||||
<text class="profile-sex-text">女</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-item">
|
||||
<text class="profile-label">出生日期</text>
|
||||
<picker mode="date" value="{{editData.birth}}" start="1930-01-01" end="{{today}}" bindchange="onBirthChange">
|
||||
<view class="picker">
|
||||
{{editData.birth || '请选择出生日期'}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="profile-item">
|
||||
<text class="profile-label">所在地区</text>
|
||||
<picker mode="region" value="{{[editData.province, editData.city, editData.district]}}" bindchange="onRegionChange">
|
||||
<view class="picker">
|
||||
{{editData.province || '请选择地区'}}{{editData.city ? '，' + editData.city : ''}}{{editData.district ? '，' + editData.district : ''}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="profile-item">
|
||||
<text class="profile-label">手机号</text>
|
||||
<text class="profile-value">{{editData.phone || '未绑定'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-footer">
|
||||
<button class="profile-save-btn" bindtap="onSave">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
158
xui/wxapp/pages/mine/comp_profile/comp_profile.wxss
Normal file
158
xui/wxapp/pages/mine/comp_profile/comp_profile.wxss
Normal file
@@ -0,0 +1,158 @@
|
||||
.profile-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.profile-sheet {
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
animation: slideUp 0.3s ease;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.profile-close {
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
padding: 0 32rpx;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.profile-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 100rpx;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.profile-item-avatar {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.profile-item-last {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.profile-label {
|
||||
font-size: 30rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.profile-input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 30rpx;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.picker {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.profile-value {
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.profile-avatar-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.profile-sex-wrap {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.profile-sex-tag {
|
||||
padding: 10rpx 48rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.profile-sex-tag-active {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
}
|
||||
|
||||
.profile-sex-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.profile-sex-tag-active .profile-sex-text {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.profile-footer {
|
||||
padding: 4rpx 32rpx 48rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-save-btn {
|
||||
background: linear-gradient(135deg, #FF9B33 0%, #FF8500 100%);
|
||||
color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 28rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.profile-save-btn::after {
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user