166 lines
3.3 KiB
Vue
166 lines
3.3 KiB
Vue
<template>
|
||
<view class="content bg" style="background-image: url('@@:static/bags_bg.png');">
|
||
|
||
|
||
<view class="title">
|
||
<view class="back" @click="toBack()">
|
||
<image src="@@:static/ic_back.png" mode=""></image>
|
||
</view>
|
||
|
||
<text>个人信息</text>
|
||
|
||
<view class="back">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<image class="head" src="" @click="chooseImage()" style="" mode=""></image>
|
||
<text class="setHead" @click="chooseImage()" style="">修改头像</text>
|
||
|
||
<view class="row nickName">
|
||
<text style="margin-left: 40.28rpx;">昵称</text>
|
||
<view class="" style="width: 50.58rpx; height: 20rpx; margin-right: 40.28rpx;">
|
||
<textarea v-model="nickName" fixed="true" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="row nickName">
|
||
|
||
<text style="margin-left: 40.28rpx;">绑定手机号</text>
|
||
|
||
<text style="margin-right: 40.28rpx;">13333333333</text>
|
||
|
||
</view>
|
||
<view class="row nickName">
|
||
|
||
<text style="margin-left: 40.28rpx;">我的ID</text>
|
||
|
||
<text style="margin-right: 40.28rpx;">5666</text>
|
||
|
||
</view>
|
||
|
||
<image class="save" src="@@:static/ic_save.png" mode="">
|
||
</image>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
nickName: "某某"
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
toBack() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
//修改头像
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1, // 默认9，设置图片的最大选择数
|
||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: (res) => {
|
||
// 返回选定照片的本地文件路径列表，数组格式
|
||
this.avatarUrl = res.tempFilePaths[0];
|
||
// 可以调用上传图片的函数，例如 this.uploadImage(res.tempFilePaths[0]);
|
||
}
|
||
});
|
||
},
|
||
|
||
//上传图片
|
||
uploadImage(filePath) {
|
||
uni.uploadFile({
|
||
url: '你的上传接口URL', // 仅为示例，请替换为实际接口地址
|
||
filePath: filePath,
|
||
name: 'file', // 必须填，对应服务器接收的参数名
|
||
formData: {
|
||
'user': 'test' // HTTP 请求中其他额外的 form data
|
||
},
|
||
success: (uploadFileRes) => {
|
||
console.log('上传成功');
|
||
// 处理上传成功后的逻辑，例如更新头像URL等
|
||
},
|
||
fail: (error) => {
|
||
console.error('上传失败', error);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
width: 688.88rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin-top: 119.44rpx;
|
||
|
||
text {
|
||
font-size: 29.17rpx;
|
||
color: #6E5B51;
|
||
}
|
||
}
|
||
|
||
.back {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
image {
|
||
width: 14.58rpx;
|
||
height: 27.08rpx;
|
||
}
|
||
}
|
||
|
||
.head {
|
||
width: 137.5rpx;
|
||
height: 137.5rpx;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
border: 1rpx solid #F5D677;
|
||
margin-top: 31.94rpx;
|
||
}
|
||
|
||
.setHead {
|
||
margin-top: 14.58rpx;
|
||
font-size: 19.42rpx;
|
||
color: #8C8574;
|
||
}
|
||
|
||
.nickName {
|
||
width: 689.58rpx;
|
||
height: 88.19rpx;
|
||
background-color: white;
|
||
margin-top: 60.42rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 16rpx;
|
||
font-size: 20.45rpx;
|
||
color: #876850;
|
||
}
|
||
|
||
.save {
|
||
width: 561.81rpx;
|
||
height: 122.92rpx;
|
||
margin-top: 259.03rpx;
|
||
}
|
||
</style> |