更新项目配置和添加小程序模块
- 修改 ArticleController.java - 更新 application.yml 配置 - 更新 frontend/.env.production 环境配置 - 添加 single_uniapp22miao 小程序模块 - 添加 logs 目录
This commit is contained in:
panchengyong
281
single_uniapp22miao/pages/sub-pages/user-info/index.vue
Normal file
281
single_uniapp22miao/pages/sub-pages/user-info/index.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<view class="user-info-page">
|
||||
<!-- 头像 -->
|
||||
<view class="info-item" @click="chooseAvatar">
|
||||
<view class="label">头像</view>
|
||||
<view class="value">
|
||||
<image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar"></image>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称 -->
|
||||
<view class="info-item" @click="showNicknameDialog">
|
||||
<view class="label">昵称</view>
|
||||
<view class="value">
|
||||
<text class="text">{{ userInfo.nickname || '未设置' }}</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="info-item">
|
||||
<view class="label">手机号</view>
|
||||
<view class="value">
|
||||
<text class="text">{{ userInfo.mobile }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户ID -->
|
||||
<view class="info-item">
|
||||
<view class="label">用户ID</view>
|
||||
<view class="value">
|
||||
<text class="text">{{ userInfo.id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 注册时间 -->
|
||||
<view class="info-item">
|
||||
<view class="label">注册时间</view>
|
||||
<view class="value">
|
||||
<text class="text">{{ userInfo.created_at }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 昵称修改弹窗 -->
|
||||
<view class="modal" v-if="showModal" @click="hideModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-title">修改昵称</view>
|
||||
<input
|
||||
v-model="newNickname"
|
||||
placeholder="请输入新昵称"
|
||||
class="modal-input"
|
||||
maxlength="20"
|
||||
/>
|
||||
<view class="modal-footer">
|
||||
<button class="cancel-btn" @click="hideModal">取消</button>
|
||||
<button class="confirm-btn" @click="updateNickname">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {},
|
||||
showModal: false,
|
||||
newNickname: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载用户信息
|
||||
async loadUserInfo() {
|
||||
try {
|
||||
const res = await this.$http.post('/api/user/info');
|
||||
if (res.code === 0) {
|
||||
this.userInfo = res.data;
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户信息失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 选择头像
|
||||
chooseAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.uploadAvatar(res.tempFilePaths[0]);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
async uploadAvatar(filePath) {
|
||||
uni.showLoading({ title: '上传中...' });
|
||||
|
||||
try {
|
||||
const token = uni.getStorageSync('token');
|
||||
|
||||
uni.uploadFile({
|
||||
url: this.$config.baseUrl + '/api/user/avatar',
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authori-zation': 'Bearer ' + token
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
const data = JSON.parse(uploadRes.data);
|
||||
if (data.code === 0) {
|
||||
this.userInfo.avatar = data.data.avatar;
|
||||
uni.showToast({ title: '上传成功', icon: 'success' });
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '上传失败', icon: 'none' });
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
|
||||
// 显示昵称修改弹窗
|
||||
showNicknameDialog() {
|
||||
this.newNickname = this.userInfo.nickname;
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
// 隐藏弹窗
|
||||
hideModal() {
|
||||
this.showModal = false;
|
||||
},
|
||||
|
||||
// 更新昵称
|
||||
async updateNickname() {
|
||||
if (!this.newNickname || !this.newNickname.trim()) {
|
||||
uni.showToast({
|
||||
title: '请输入昵称',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await this.$http.post('/api/user/nickname', {
|
||||
nickname: this.newNickname
|
||||
});
|
||||
|
||||
if (res.code === 0) {
|
||||
this.userInfo.nickname = this.newNickname;
|
||||
uni.setStorageSync('userInfo', this.userInfo);
|
||||
uni.showToast({ title: '修改成功', icon: 'success' });
|
||||
this.hideModal();
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: error.msg || '修改失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-info-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 30rpx;
|
||||
margin-bottom: 2rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 40rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: linear-gradient(90deg, #FF6B6B, #FF4757);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user