TalentService-mobile/pages/my/mySetting.vue

203 lines
4.7 KiB
Vue
Raw Normal View History

2024-10-27 00:26:19 +08:00
<template>
<view class="mysetting">
<view class="ms-top">
<view class="contentAll ">
<view class="myhead">
<text>头像</text>
<u-avatar class="headimage" @click="changeImg"
:src="userMessage.avatar?userMessage.avatar:''"></u-avatar>
</view>
<view class="myview">
<text>姓名</text>
<input v-model="userMessage.name" placeholder="请填写姓名"
class="mytext"></input>
</view>
<view class="myview">
<text>手机</text>
<input type="tel" v-model="userMessage.tel" placeholder="请填写手机号"
class="mytext"></input>
</view>
</view>
<u-toast ref="uToast"></u-toast>
</view>
<button class="settingSubmit" @click="submit">确定</button>
</view>
</template>
<script>
export default {
data() {
return {
userMessage: {
avatar: '',
name: '',
tel: ''
},
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: '',
filePath: that.userMessage.avatar,
name: 'file',
header: {
},
formData: {
'biz': "temp"
},
success: async (res) => {
if (res.statusCode == 200) {
// that.userMessage.avatar = await JSON.parse(res.data).message;
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.name === '') {
this.$refs.uToast.show({type: 'warning',title: "请完善内容!"});
return;
}else if(!(/^1[345789]\d{9}$/.test(this.userMessage.tel))){
this.$refs.uToast.show({type: 'warning',title: "电话号码不符合规范!"});
return;
}
if (!this.isChangeAvatar) this.realSubmit();
else await this.uploadImage();
},
// 真正调用上传方法,否则有异步问题
async realSubmit() {
this.$refs.uToast.show({type: 'success',title: "信息修改成功!"});
},
},
onLoad() {
}
}
</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>