pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基本功能都已完成

Browse Source
This commit is contained in:
王利强
2026-02-08 09:30:43 +08:00
parent 1ad538f351
commit 721ef0ad54
494 changed files with 6837 additions and 42302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
pages/personalcenter/edit.vue
View File

@@ -5,7 +5,7 @@
<view class="flex justify-between align-center padding-tb solid-bottom" @click="chooseAvatar">
<view class="text-black">头像</view>
<view class="flex align-center">
<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
<image class="avatar" :src="avatarPreview || getImageUrl(userInfo.avatar) || defaultAvatar" mode="aspectFill"></image>
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
@@ -14,25 +14,25 @@
<view class="flex justify-between align-center padding-tb solid-bottom">
<view class="text-black label-text">昵称</view>
<view class="flex align-center flex-sub justify-end">
<input class="input-right" v-model="userInfo.nickname" placeholder="请输入昵称" />
<input class="input-right" v-model="userInfo.nickName" placeholder="请输入昵称" />
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
<!-- 用户名 -->
<!-- 电话号码 -->
<view class="flex justify-between align-center padding-tb solid-bottom">
<view class="text-black label-text">用户名</view>
<view class="flex align-center">
<text class="text-black">{{ userInfo.username }}</text>
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
<!-- 个性签名 -->
<view class="flex justify-between align-center padding-tb solid-bottom">
<view class="text-black label-text">个性签名</view>
<view class="text-black label-text">电话号码</view>
<view class="flex align-center flex-sub justify-end">
<input class="input-right" v-model="userInfo.signature" placeholder="请输入个性签名" />
<input class="input-right" v-model="userInfo.phonenumber" placeholder="请输入电话号码" type="number" />
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
<!-- 邮箱 -->
<view class="flex justify-between align-center padding-tb solid-bottom">
<view class="text-black label-text">邮箱</view>
<view class="flex align-center flex-sub justify-end">
<input class="input-right" v-model="userInfo.email" placeholder="请输入邮箱" />
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
@@ -44,15 +44,15 @@
<view class="gender-switch">
<view
class="gender-item"
:class="{ 'gender-active': userInfo.gender === 1, 'gender-male': userInfo.gender === 1 }"
@click="userInfo.gender = 1"
:class="{ 'gender-active': userInfo.sex === '0', 'gender-male': userInfo.sex === '0' }"
@click="userInfo.sex = '0'"
>
<text class="cuIcon-male"></text>
</view>
<view
class="gender-item"
:class="{ 'gender-active': userInfo.gender === 2, 'gender-female': userInfo.gender === 2 }"
@click="userInfo.gender = 2"
:class="{ 'gender-active': userInfo.sex === '1', 'gender-female': userInfo.sex === '1' }"
@click="userInfo.sex = '1'"
>
<text class="cuIcon-female"></text>
</view>
@@ -60,42 +60,59 @@
</view>
</view>
<!-- 日期选择 -->
<view class="flex justify-between align-center padding-tb solid-bottom" @click="showDatePicker = true">
<view class="text-black">日期选择</view>
<view class="flex align-center">
<text class="text-black">{{ userInfo.birthday || '请选择日期' }}</text>
<view class="lg text-gray cuIcon-right margin-left-xs"></view>
</view>
</view>
<up-calendar
:show="showDatePicker"
mode="single"
@confirm="confirmDate"
@close="showDatePicker = false"
></up-calendar>
<button class="bg-blue round margin-top-xl" @click="handleSave">保存</button>
<button class="round line-blue margin-top" @click="handleLogout">退出登录</button>
<button class="bg-blue round margin-top-xl" @click="handleSave" :loading="saving">保存</button>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted } from 'vue';
import { baseUrl, getToken } from '@/request/request.js';
import { getProfileDetail, updateProfile } from '@/request/three_one_api/info.js';
const showDatePicker = ref(false);
const saving = ref(false);
const defaultAvatar = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg';
const avatarPreview = ref(''); // 用于显示选择的图片临时预览
const userInfo = reactive({
avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
nickname: '希缝弗斯',
username: '17374339800',
signature: '',
gender: 1, // 1-男 2-女
birthday: '2025-10-09'
avatar: '', // 保存相对路径，用于提交
nickName: '',
phonenumber: '',
email: '',
sex: '0' // '0'-男 '1'-女
});
// 获取图片完整URL（用于显示）
const getImageUrl = (path) => {
if (!path) return '';
if (path.startsWith('http')) return path;
return baseUrl + path;
};
// 页面加载时获取个人信息
onMounted(() => {
loadProfileDetail();
});
// 获取个人信息
const loadProfileDetail = async () => {
try {
uni.showLoading({ title: '加载中...' });
const res = await getProfileDetail();
uni.hideLoading();
if (res.code === 0 && res.data) {
userInfo.avatar = res.data.avatar || '';
userInfo.nickName = res.data.nickName || '';
userInfo.phonenumber = res.data.phonenumber || '';
userInfo.email = res.data.email || '';
userInfo.sex = res.data.sex || '0';
}
} catch (err) {
uni.hideLoading();
console.error('获取个人信息失败:', err);
}
};
// 选择头像
const chooseAvatar = () => {
uni.chooseImage({
@@ -103,33 +120,84 @@ const chooseAvatar = () => {
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
userInfo.avatar = res.tempFilePaths[0];
const tempFilePath = res.tempFilePaths[0];
// 显示临时预览
avatarPreview.value = tempFilePath;
// 上传获取链接
uploadAvatar(tempFilePath);
}
});
};
// 日期选择确认
const confirmDate = (e) => {
userInfo.birthday = e[0];
showDatePicker.value = false;
// 上传头像获取链接
const uploadAvatar = (filePath) => {
uni.showLoading({ title: '上传中...' });
uni.uploadFile({
url: baseUrl + '/frontend/attachment/upload',
filePath: filePath,
name: 'file',
header: {
'Authorization': getToken()
},
success: (uploadRes) => {
uni.hideLoading();
try {
const data = JSON.parse(uploadRes.data);
if (data.code === 0 && data.data) {
// 上传成功，保存相对路径（用于提交）
userInfo.avatar = data.data.url || data.data;
uni.showToast({ title: '上传成功', icon: 'success' });
} else {
avatarPreview.value = ''; // 上传失败，清除预览
uni.showToast({ title: data.msg || '上传失败', icon: 'none' });
}
} catch (e) {
avatarPreview.value = '';
uni.showToast({ title: '上传失败', icon: 'none' });
}
},
fail: () => {
uni.hideLoading();
avatarPreview.value = '';
uni.showToast({ title: '上传失败', icon: 'none' });
}
});
};
// 保存
const handleSave = () => {
uni.showToast({ title: '保存成功', icon: 'success' });
};
// 退出登录
const handleLogout = () => {
uni.showModal({
title: '提示',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
uni.reLaunch({ url: '/pages/login/login' });
}
const handleSave = async () => {
// 表单验证
if (!userInfo.nickName) {
uni.showToast({ title: '请输入昵称', icon: 'none' });
return;
}
saving.value = true;
try {
const params = {
nickName: userInfo.nickName,
phonenumber: userInfo.phonenumber,
email: userInfo.email,
sex: userInfo.sex,
avatar: userInfo.avatar // 提交相对路径
};
const res = await updateProfile(params);
if (res.code === 0) {
uni.showToast({ title: '保存成功', icon: 'success' });
setTimeout(() => {
uni.navigateBack();
}, 1500);
} else {
uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
}
});
} catch (err) {
console.error('保存失败:', err);
uni.showToast({ title: '保存失败', icon: 'none' });
} finally {
saving.value = false;
}
};
</script>
@@ -197,4 +265,4 @@ const handleLogout = () => {
color: #2667E9;
background: #fff;
}
</style>
</style>