mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
多模块重构 12：修改项目名字，按照新的规则
This commit is contained in:
YunaiV
271
yudao-ui-app-v1/pages/set/userInfo.vue
Normal file
271
yudao-ui-app-v1/pages/set/userInfo.vue
Normal file
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="cell">
|
||||
<text class="tit fill">头像</text>
|
||||
<view class="avatar-wrap" @click="chooseImage">
|
||||
<image class="avatar" :src="tempAvatar || userInfo.avatar || '/static/icon/default-avatar.png'" mode="aspectFill"></image>
|
||||
<!-- 进度遮盖 -->
|
||||
<view class="progress center"
|
||||
:class="{
|
||||
'no-transtion': uploadProgress === 0,
|
||||
show: uploadProgress != 100
|
||||
}"
|
||||
:style="{
|
||||
width: uploadProgress + '%',
|
||||
height: uploadProgress + '%',
|
||||
}"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell b-b">
|
||||
<text class="tit fill">昵称</text>
|
||||
<input class="input" v-model="userInfo.nickname" type="text" maxlength="8" placeholder="请输入昵称" placeholder-class="placeholder">
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<u-cell title="昵称" :value="userInfo.nickname" isLink @click="nicknameClick()"></u-cell>
|
||||
</u-cell-group>
|
||||
|
||||
<u-modal :show="nicknameOpen" title="修改昵称" showCancelButton @confirm="nicknameSubmit" @cancel="nicknameCancel">
|
||||
<view class="slot-content">
|
||||
<u--form labelPosition="left" :model="nicknameForm" :rules="nicknameRules" ref="nicknameForm" errorType="toast">
|
||||
<u-form-item prop="nickname">
|
||||
<u--input v-model="nicknameForm.nickname" placeholder="请输入昵称" border="none"></u--input>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploadProgress: 100, //头像上传进度
|
||||
tempAvatar: '',
|
||||
userInfo: {},
|
||||
nicknameOpen: false,
|
||||
nicknameForm: {
|
||||
nickname: ''
|
||||
},
|
||||
nicknameRules: {
|
||||
nickname: [{
|
||||
required: true,
|
||||
message: '请输入昵称'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
curUserInfo(){
|
||||
return this.$store.state.userInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
curUserInfo(curUserInfo){
|
||||
const {avatar, nickname, gender} = curUserInfo;
|
||||
this.userInfo = {avatar, nickname, gender,};
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const {avatar, nickname, gender, anonymous} = this.curUserInfo;
|
||||
this.userInfo = {avatar, nickname, gender};
|
||||
},
|
||||
methods: {
|
||||
nicknameClick() {
|
||||
this.nicknameOpen = true;
|
||||
this.nicknameForm.nickname = this.userInfo.nickname;
|
||||
},
|
||||
nicknameCancel() {
|
||||
this.nicknameOpen = false;
|
||||
},
|
||||
nicknameSubmit() {
|
||||
this.$refs.nicknameForm.validate().then(() => {
|
||||
this.loading = true;
|
||||
// 执行登陆
|
||||
const { mobile, code, password} = this.form;
|
||||
const loginPromise = this.loginType == 'password' ? login(mobile, password) :
|
||||
smsLogin(mobile, code);
|
||||
loginPromise.then(data => {
|
||||
// 登陆成功
|
||||
this.loginSuccessCallBack(data);
|
||||
}).catch(errors => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}).catch(errors => {
|
||||
});
|
||||
},
|
||||
// 提交修改
|
||||
async confirm() {
|
||||
// 校验信息是否变化
|
||||
const {uploadProgress, userInfo, curUserInfo} = this;
|
||||
let isUpdate = false;
|
||||
for (let key in userInfo) {
|
||||
if(userInfo[key] !== curUserInfo[key]){
|
||||
isUpdate = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isUpdate === false) {
|
||||
this.$util.msg('信息未修改');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (!userInfo.avatar) {
|
||||
this.$util.msg('请上传头像');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (uploadProgress !== 100) {
|
||||
this.$util.msg('请等待头像上传完毕');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
if (!userInfo.nickname) {
|
||||
this.$util.msg('请输入您的昵称');
|
||||
this.$refs.confirmBtn.stop();
|
||||
return;
|
||||
}
|
||||
const res = await this.$request('user', 'update', userInfo);
|
||||
this.$refs.confirmBtn.stop();
|
||||
this.$util.msg(res.msg);
|
||||
if(res.status === 1){
|
||||
this.$store.dispatch('getUserInfo'); //刷新用户信息
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack();
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 选择头像
|
||||
chooseImage(){
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res=> {
|
||||
uni.navigateTo({
|
||||
url: `./cutImage/cut?src=${res.tempFilePaths[0]}`
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 裁剪回调
|
||||
async setAvatar(filePath){
|
||||
this.tempAvatar = filePath;
|
||||
this.uploadProgress = 0;
|
||||
const result = await uniCloud.uploadFile({
|
||||
filePath: filePath,
|
||||
cloudPath: + new Date() + ('000000' + Math.floor(Math.random() * 999999)).slice(-6) + '.jpg',
|
||||
onUploadProgress: e=> {
|
||||
this.uploadProgress = Math.round(
|
||||
(e.loaded * 100) / e.total
|
||||
);
|
||||
}
|
||||
});
|
||||
if(!result.fileID){
|
||||
this.$util.msg('头像上传失败');
|
||||
return;
|
||||
}
|
||||
if(typeof uniCloud.getTempFileURL === 'undefined'){
|
||||
this.userInfo.avatar = result.fileID;
|
||||
}else{
|
||||
const tempFiles = await uniCloud.getTempFileURL({
|
||||
fileList: [result.fileID]
|
||||
})
|
||||
const tempFile = tempFiles.fileList[0];
|
||||
if(tempFile.download_url || tempFile.fileID){
|
||||
this.userInfo.avatar = tempFile.download_url || tempFile.fileID;
|
||||
}else{
|
||||
this.$util.msg('头像上传失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app{
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.cell{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
padding: 0 40rpx;
|
||||
|
||||
&:first-child{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
&:after{
|
||||
left: 40rpx;
|
||||
right: 40rpx;
|
||||
border-color: #d8d8d8;
|
||||
}
|
||||
.tit{
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
.avatar-wrap{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: relative;
|
||||
border-radius: 100rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
.progress{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
box-shadow: rgba(0,0,0,.6) 0px 0px 0px 2005px;
|
||||
border-radius: 100rpx;
|
||||
transition: .5s;
|
||||
opacity: 0;
|
||||
|
||||
&.no-transtion{
|
||||
transition: 0s;
|
||||
}
|
||||
&.show{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
switch{
|
||||
margin: 0;
|
||||
transform: scale(0.8) translateX(10rpx);
|
||||
transform-origin: center right;
|
||||
}
|
||||
.tip{
|
||||
margin-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
.checkbox{
|
||||
padding: 12rpx 0 12rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
|
||||
.mix-icon{
|
||||
margin-right: 12rpx;
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
.icon-xuanzhong{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user