235 lines
5.8 KiB
Vue
235 lines
5.8 KiB
Vue
<template>
|
||
<view class="mysetting">
|
||
<view class="ms-top">
|
||
<view class="contentAll ">
|
||
<view class="myhead">
|
||
<text>头像</text>
|
||
<u-avatar class="headimage" :src="isLogin?avatars[userMessage.gender||0]:''"></u-avatar>
|
||
<!-- @click="changeImg"
|
||
:src="userMessage.avatar?userMessage.avatar:''"></u-avatar> -->
|
||
|
||
</view>
|
||
<view class="myview">
|
||
<text>姓名</text>
|
||
<input v-model="userMessage.nickName" placeholder="请填写姓名"
|
||
class="mytext" disabled></input>
|
||
</view>
|
||
<view class="myview">
|
||
<text>手机</text>
|
||
<input type="tel" v-model="userMessage.phone" placeholder="请填写手机号"
|
||
class="mytext" disabled></input>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
<!-- <button class="settingSubmit" @click="submit">确定</button> -->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import configService from '@/common/config.service';
|
||
export default {
|
||
data() {
|
||
return {
|
||
userMessage: {
|
||
id: '',
|
||
avatar: '',
|
||
nickName: '',
|
||
phone: '',
|
||
gender: ''
|
||
},
|
||
isLogin: this.$store.state.vuex_token !== '',// 是否登录
|
||
avatars:[
|
||
configService.ip+"upload/20241028/82f6d605d70645a0aa30c94ee51714a3.png",
|
||
configService.ip+"upload/20241028/2cafd18a34364a70ba9bb8e0cd0ae023.png",
|
||
],
|
||
isChangeAvatar: false,// 是否上传了头像
|
||
}
|
||
},
|
||
created() {
|
||
// 监听从裁剪页发布的事件，获得裁剪结果
|
||
uni.$on('uAvatarCropper', path => {
|
||
this.userMessage.avatar = path;
|
||
this.isChangeAvatar = true;
|
||
// 上传头像-这里不自动上传
|
||
// this.uploadImage();
|
||
})
|
||
},
|
||
methods: {
|
||
changeImg() {
|
||
this.$u.route({
|
||
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
|
||
params: {
|
||
// 输出图片宽度，高等于宽，单位px
|
||
destWidth: 300,
|
||
// 裁剪框宽度，高等于宽，单位px
|
||
rectWidth: 200,
|
||
// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
fileType: 'jpg',
|
||
}
|
||
})
|
||
},
|
||
async uploadImage() {
|
||
let that = this;
|
||
await uni.uploadFile({
|
||
url: configService.apiUrl + '/enAttachment/upload',
|
||
filePath: that.userMessage.avatar,
|
||
name: 'file',
|
||
header: {
|
||
token: that.$store.state.vuex_token
|
||
},
|
||
formData: {
|
||
},
|
||
success: async (res) => {
|
||
if (res.success) {
|
||
that.userMessage.avatar = configService.ip + res.data.path;
|
||
that.realSubmit();
|
||
} else {
|
||
that.$refs.uToast.show({
|
||
type: 'error',
|
||
title: "图片上传失败，请重试!"
|
||
});
|
||
}
|
||
},
|
||
fail: function(res) {
|
||
that.$refs.uToast.show({
|
||
type: 'error',
|
||
title: "图片上传失败，请重试!"
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 提交申请
|
||
async submit() {
|
||
if (this.userMessage.nickName === '') {
|
||
this.$refs.uToast.show({type: 'warning',title: "请完善内容!"});
|
||
return;
|
||
}else if(!(/^1[345789]\d{9}$/.test(this.userMessage.phone))){
|
||
this.$refs.uToast.show({type: 'warning',title: "电话号码不符合规范!"});
|
||
return;
|
||
}
|
||
if (!this.isChangeAvatar) this.realSubmit();
|
||
else await this.uploadImage();
|
||
},
|
||
// 真正调用上传方法，否则有异步问题
|
||
async realSubmit() {
|
||
let result = await this.$api.editUserMessage(this.userMessage);
|
||
if (!result?.success) {
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
title: "信息修改失败!"
|
||
});
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
type: 'success',
|
||
title: "信息修改成功!"
|
||
});
|
||
let now = JSON.parse(this.$store.state.user_message);
|
||
now.avatar = this.userMessage.avatar;
|
||
now.nickName = this.userMessage.nickName;
|
||
now.phone = this.userMessage.phone;
|
||
this.$u.vuex('user_message', JSON.stringify(now));
|
||
}
|
||
},
|
||
},
|
||
onLoad() {
|
||
const { id, avatar, nickName, phone, gender } = JSON.parse(this.$store.state.user_message);
|
||
this.userMessage = {
|
||
id: id,
|
||
avatar: avatar,
|
||
nickName: nickName,
|
||
phone: phone,
|
||
gender: gender
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.mysetting{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.ms-top{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.contentAll {
|
||
display: flex;
|
||
/* 启用 flexbox 布局 */
|
||
height: 100vh;
|
||
justify-content: flex-start;
|
||
/* 子元素从顶部开始排列*/
|
||
align-items: center;
|
||
/* 垂直方向上居中 */
|
||
width: 100%;
|
||
flex-direction: column;
|
||
/* 改为垂直排列子元素 */
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
.myhead {
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 11%;
|
||
border-bottom: 2rpx solid #dfdfdf;
|
||
text{
|
||
padding-left: 5rpx;
|
||
size: 2rpx;
|
||
}
|
||
.headimage {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 25rpx;
|
||
border-radius: 50%;
|
||
/* 使其成为圆形 */
|
||
object-fit: cover;
|
||
margin-left: auto;
|
||
/* 将图片推到右侧 */
|
||
}
|
||
}
|
||
.myview {
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 8%;
|
||
border-bottom: 2rpx solid #dfdfdf;
|
||
text{
|
||
padding-left: 5rpx;
|
||
size: 2rpx;
|
||
}
|
||
.mytext {
|
||
text-align: right;
|
||
width: auto;
|
||
height: auto;
|
||
margin-top: auto;
|
||
margin-bottom: auto;
|
||
margin-right: 5rpx;
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
}
|
||
.settingSubmit {
|
||
background: -webkit-linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
|
||
background: linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
|
||
height: 100rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 56rpx;
|
||
padding: 0;
|
||
margin-bottom: 60rpx;
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
&::after{
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
</style> |