180 lines
4.0 KiB
Vue
180 lines
4.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<up-cell-group>
|
|
<up-cell title="头像">
|
|
<template #value>
|
|
<image :src="userInfo.avatar?userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
|
|
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
|
</template>
|
|
</up-cell>
|
|
<up-cell title="用户名">
|
|
<template #value>
|
|
<input v-model="userInfo.userName" align="right" placeholder="请输入用户名" />
|
|
</template>
|
|
</up-cell>
|
|
<up-cell title="手机">
|
|
<template #value>
|
|
<input :disabled="userInfo.phone?true:false" v-model="userInfo.phone" align="right" placeholder="请输入联系电话" />
|
|
</template>
|
|
</up-cell>
|
|
</up-cell-group>
|
|
<view class="save" @click="save">保存</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/commons/config.js';
|
|
import http from '@/http/http.js';
|
|
export default {
|
|
data() {
|
|
return{
|
|
userInfo: {
|
|
avatar: '',
|
|
userName: '',
|
|
phone: '',
|
|
}
|
|
}
|
|
},
|
|
onLoad( options ) {
|
|
this.getUserInfo()
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 获取个人信息
|
|
*/
|
|
getUserInfo() {
|
|
http.request({
|
|
url:'app/user/selectUserById',
|
|
}).then(res => {
|
|
this.userInfo = res.data
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 上次头像
|
|
*/
|
|
uploadImg() {
|
|
let that = this;
|
|
var url = null;
|
|
uni.showActionSheet({
|
|
// itemList按钮的文字接受的是数组
|
|
itemList: ["查看头像", "从相册选择图片"],
|
|
success(e) {
|
|
var index = e.tapIndex
|
|
console.log(index)
|
|
if (index === 0) {
|
|
// 用户点击了预览当前图片
|
|
// 可以自己实现当前头像链接的读取
|
|
let url = that.headImg;
|
|
let arr = []
|
|
arr.push(url)
|
|
uni.previewImage({
|
|
// 预览功能图片也必须是数组的
|
|
urls: arr
|
|
})
|
|
} else if (index === 1) {
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: function(res) {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
});
|
|
uni.uploadFile({
|
|
url: config.baseApiUrl + 'alioss/upload',
|
|
filePath: res.tempFilePaths[0],
|
|
name: 'file',
|
|
success: uploadFileRes => {
|
|
url = JSON.parse(uploadFileRes.data);
|
|
console.log(url)
|
|
this.userInfo.avatar = url.data
|
|
uni.hideLoading();
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 保存
|
|
*/
|
|
save() {
|
|
if (!this.userInfo.userName) {
|
|
uni.showToast({
|
|
title: "用户名不能为空",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
if (!this.userInfo.phone) {
|
|
uni.showToast({
|
|
title: "手机号不能空",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
if (this.checkPhone(this.userInfo.phone) == false) {
|
|
uni.showToast({
|
|
title: "手机号格式不正确",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定保存信息',
|
|
confirmColor: '#ff7581',
|
|
success: e => {
|
|
if (e.confirm) {
|
|
http.request({
|
|
url:'app/user/updateUsers',
|
|
method: 'post',
|
|
data: {
|
|
userName: this.userInfo.userName,
|
|
avatar: this.userInfo.avatar,
|
|
phone: this.userInfo.phone,
|
|
}
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: "none"
|
|
})
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
})
|
|
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//根据正则验证手机号是否正确包括校验长度
|
|
checkPhone(phone) {
|
|
return /^1[3456789]\d{9}$/.test(phone);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style style="sass" scoped>
|
|
.save{
|
|
color: #FFFFFF;
|
|
background: #ff7581;
|
|
text-align: center;
|
|
width: 234px;
|
|
height: 41px;
|
|
font-size: 14px;
|
|
line-height: 41px;
|
|
margin: 0 auto;
|
|
border-radius: 20px;
|
|
margin-top: 78px;
|
|
}
|
|
</style>
|