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