wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善个人资料修改

Browse Source
This commit is contained in:
wangxiaowei
2025-05-02 17:03:32 +08:00
parent c7b6aacafb
commit 436a519966
285 changed files with 18545 additions and 5087 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
pages/my/my.vue
View File

@ -5,10 +5,10 @@
<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar + 'px'}">我的</view>
<!-- #endif -->
<view class="u-p-t-60 px32 row-between">
<view class="text-fff">
<view v-if="isLogin">
<navigator class="row u-col-top" url="/pages/my/profile" hover-class="none">
<view class="u-p-t-60 px32 text-fff">
<navigator class="row-between" :url="isLogin ? '/pages/my/profile' : '/pages/login/login'" hover-class="none">
<view>
<view v-if="isLogin" class="row u-col-top">
<view>
<u-avatar :src="userInfo.avatar ? userInfo.avatar : cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
</view>
@ -16,11 +16,9 @@
<view>{{ userInfo.nickname }}</view>
<view class="u-m-t-16">{{userInfo.mobile || userInfo.sn}}</view>
</view>
</navigator>
</view>
<view v-if="!isLogin">
<navigator class="row u-col-top" url="/pages/login/login" hover-class="none">
</view>
<view v-if="!isLogin" class="row u-col-top">
<view>
<u-avatar :src="cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
</view>
@ -28,12 +26,12 @@
<view>点击登录</view>
<view class="u-m-t-16">登录体验更多功能</view>
</view>
</navigator>
</view>
</view>
</view>
<view>
<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
</view>
<view>
<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
</view>
</navigator>
</view>
</view>
@ -42,7 +40,7 @@
<view class="u-flex u-row-center" @click="toWallet">
<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0.00</view>
<view class="nr">{{userInfo.user_money || 0.00}}</view>
<view class="xs">余额</view>
</view>
</view>
@ -52,7 +50,7 @@
<view class="u-flex u-row-center">
<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0.00</view>
<view class="nr">{{ userInfo.user_integral || 0}}</view>
<view class="xs">积分</view>
</view>
</view>
@ -62,7 +60,7 @@
<view class="u-flex u-row-center">
<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
<view class="u-m-l-60 u-text-center">
<view class="nr">0</view>
<view class="nr">{{ userInfo.coupon || 0}}</view>
<view class="xs u-text-center">券</view>
</view>
</view>
@ -109,12 +107,17 @@
}
},
onShow() {
this.getUser()
},
onLoad() {
console.log(this.isLogin)
console.log(this.userInfo)
},
methods: {
...mapActions(['getUser']),
// 跳转个人信息
toProfile() {
uni.navigateTo({

187
pages/my/profile.vue
View File

@ -1,29 +1,29 @@
<template>
<view>
<view class="u-m-t-34">
<view class="u-m-t-34" @tap="chooseAvatar">
<view class="row-center">
<u-avatar :src="cloudPath + 'img/icon_avatar.png'" mode="square" size="142"></u-avatar>
<u-avatar :src="userInfo.avatar ? userInfo.avatar : cloudPath + 'img/icon_avatar_empty2.png'" size="142"></u-avatar>
</view>
<view class="nr text-default u-text-center u-m-t-16">
点击更换头像
</view>
</view>
<view class=" u-m-l-62 u-m-r-62">
<view class="nr row-between u-col-center u-m-t-48">
<view>昵称</view>
<view class="u-m-l-62 u-m-r-62">
<view class="nr row-between u-col-center u-m-t-48" @tap="changeName">
<view style="width: 100rpx;">昵称</view>
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
<view>杨阳洋</view>
<view>{{userInfo.nickname || ''}}</view>
<view>
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
</view>
</view>
</view>
<view class="nr row-between u-col-center u-m-t-48">
<view>手机号</view>
<view class="nr row-between u-col-center u-m-t-48" @tap="changeMobile">
<view style="width: 100rpx;">手机号</view>
<view class="flex1 u-m-l-80 row u-row-between u-col-center">
<view>{{formatPhone()}}</view>
<view>{{formatPhone(userInfo.mobile)}}</view>
<view>
<u-image :src="cloudPath + 'img/icon_arrow_right.png'" width="44" height="44"></u-image>
</view>
@ -32,24 +32,183 @@
</view>
<view class="fixed left-0 right-0 save">
<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
<u-button @click="save" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">保存</u-button>
</view>
<!-- 昵称修改组件 -->
<u-popup
v-model="nickname.showPopup"
mode="center"
border-radius="16"
>
<view class="bg-white br16 w-full" style="width: 70vw;">
<view class="u-p-32">
<view class="title xl u-text-center bold-500">修改用户名</view>
<view>
<u-form :model="nickname" ref="nicknameForm">
<u-form-item label="昵称" :border-bottom="false">
<u-input v-model="nickname.value" value="请输入新的昵称"/>
</u-form-item>
<u-button @click="confirmChangeNickeName" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
</u-form>
</view>
</view>
</view>
</u-popup>
<mobile-login v-model="mobile.showPopup" @close="mobile.showPopup = false" :hideCancleBtn="false" @update="updateMobile"/>
</view>
</template>
<script>
import { changeUserMobile, getUserInfo, setUserInfo, setWechatInfo } from '@/api/user'
import { uploadFile, isWeixinClient, trottle } from '@/utils/tools'
import { mapState, mapGetters } from 'vuex'
const FieldType = {
NONE: '',
NICKNAME: 'nickname',
AVATAR: 'avatar',
MOBILE: 'mobile'
}
export default {
data() {
return {
fieldType: FieldType.NONE,
userInfo: {},
nickname: {
value: '',
showPopup: false
},
mobile: {
showPopup: false,
}
}
},
onUnload() {
uni.$off('uAvatarCropper')
},
onLoad(){
this.getUserInfo()
uni.$on('uAvatarCropper', (path) => {
this.uploadImage(path)
})
},
methods: {
formatPhone() {
const phone = '15005837859'
return phone.substring(0, 3) + '****' + phone.substring(7);
// 修改头像
chooseAvatar() {
this.fieldType = FieldType.AVATAR
uni.$u.route({
// 关于此路径，请见下方"注意事项"
url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
// 内部已设置以下默认参数值，可不传这些参数
params: {
// 输出图片宽度，高等于宽，单位px
destWidth: 300,
// 裁剪框宽度，高等于宽，单位px
rectWidth: 300,
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
fileType: 'jpg'
}
})
},
// 修改昵称
changeName() {
this.fieldType = FieldType.NICKNAME
this.nickname.value = ''
this.nickname.showPopup = true
},
// 确认修改昵称
async confirmChangeNickeName() {
if (!this.nickname.value) {
return this.$toast({
title: '请输入新的昵称'
})
}
await this.setUserInfo(this.nickname.value)
this.nickname.showPopup = false
},
// 修改手机号
changeMobile() {
this.fieldType = FieldType.MOBILE
this.mobile.showPopup = true
},
// 更新手机号码
async updateMobile(e) {
if (!e.mobile) {
return this.$toast({
title: '请授权获取您的手机号'
})
}
await this.setUserInfo(e.mobile)
this.nickname.showPopup = false
},
// 上传头像
uploadImage(path) {
uni.showLoading({
title: '正在上传中...',
mask: true
})
uploadFile(path).then((res) => {
uni.hideLoading()
this.setUserInfo(res.url)
}).catch(() => {
uni.hideLoading()
this.$toast({title: '上传失败'})
})
},
// 修改个人信息
async setUserInfo(value) {
const res = await setUserInfo({
field: this.fieldType,
value: value
})
if (res.code == 1) {
this.$toast({
title: res.msg
})
this.getUserInfo()
}
},
// 获取个人信息
getUserInfo() {
getUserInfo().then((res) => {
if (res.code == 1) {
this.userInfo = res.data
}
})
},
// 格式化手机号
formatPhone(p) {
if (p) {
return p.substring(0, 3) + '****' + p.substring(7)
}
return ''
},
save() {
uni.switchTab({
url: '/pages/my/my'
})
}
},
computed: {
...mapState(['token']),
...mapGetters(['appConfig'])
}
}
</script>