174 lines
3.9 KiB
Vue
174 lines
3.9 KiB
Vue
<template>
|
|
<view class="container">
|
|
<up-cell-group>
|
|
<up-cell title="头像">
|
|
<template #value>
|
|
<image :src="data.userInfo.avatar?data.userInfo.avatar:'../../static/default/avatar.png'" mode="aspectFill" @click="uploadImg"
|
|
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
|
</template>
|
|
</up-cell>
|
|
<up-cell title="用户名">
|
|
<template #value>
|
|
<input v-model="data.userInfo.userName" align="right" placeholder="请输入用户名" />
|
|
</template>
|
|
</up-cell>
|
|
<up-cell title="手机">
|
|
<template #value>
|
|
<input :disabled="data.userInfo.phone?true:false" v-model="data.userInfo.phone" align="right" placeholder="请输入联系电话" />
|
|
</template>
|
|
</up-cell>
|
|
</up-cell-group>
|
|
<view class="save" @click="save">保存</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
import { onShow} from '@dcloudio/uni-app'
|
|
import config from '@/commons/config.js';
|
|
import { selectUserById, updateUsers } from '@/api/user/user.js';
|
|
|
|
let data = reactive({
|
|
userInfo: {
|
|
avatar: '',
|
|
userName: '',
|
|
phone: '',
|
|
}
|
|
})
|
|
|
|
onShow(() => {
|
|
getUserInfo()
|
|
})
|
|
|
|
/**
|
|
* 获取个人信息
|
|
*/
|
|
async function getUserInfo () {
|
|
let res = await selectUserById()
|
|
data.userInfo = res
|
|
}
|
|
|
|
/**
|
|
* 上传头像
|
|
*/
|
|
function uploadImg () {
|
|
var url = null;
|
|
uni.showActionSheet({
|
|
// itemList按钮的文字接受的是数组
|
|
itemList: ["查看头像", "从相册选择图片"],
|
|
success(e) {
|
|
var index = e.tapIndex
|
|
console.log(index)
|
|
if (index === 0) {
|
|
// 用户点击了预览当前图片
|
|
// 可以自己实现当前头像链接的读取
|
|
let url = data.userInfo.avatar;
|
|
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)
|
|
data.userInfo.avatar = url.data
|
|
uni.hideLoading();
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 保存
|
|
*/
|
|
function save () {
|
|
if (!data.userInfo.userName) {
|
|
uni.showToast({
|
|
title: "用户名不能为空",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
if (!data.userInfo.phone) {
|
|
uni.showToast({
|
|
title: "手机号不能空",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
if (checkPhone(data.userInfo.phone) == false) {
|
|
uni.showToast({
|
|
title: "手机号格式不正确",
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '确定保存信息',
|
|
confirmColor: '#ff7581',
|
|
success: async e => {
|
|
if (e.confirm) {
|
|
let res = await updateUsers({
|
|
userName: data.userInfo.userName,
|
|
avatar: data.userInfo.avatar,
|
|
phone: data.userInfo.phone,
|
|
})
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: "none"
|
|
})
|
|
let userInfo = uni.getStorageSync('userInfo');
|
|
userInfo.userName = data.userInfo.userName
|
|
userInfo.avatar = data.userInfo.avatar
|
|
userInfo.phone = data.userInfo.phone
|
|
uni.setStorageSync('userInfo', userInfo);
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function 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>
|