TalentService-mobile/pages/my/mySetting.vue
2024-11-28 10:09:55 +08:00

235 lines
5.8 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>