203 lines
4.7 KiB
Vue
203 lines
4.7 KiB
Vue
<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> |