123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <template>
- <view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
- <cus-header title='用户信息'></cus-header>
- <div class="info">
- <div class="item">
- <div class="left">头像</div>
- <div class="right" @tap="changeAvatar">
- <image :src="userInfo.headUrl||avatar" mode=""></image>
- <u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
- </div>
- </div>
- <div class="item">
- <div class="left">姓名</div>
- <div class="right">
- <input type="text" v-model="userInfo.realName" placeholder="请输入姓名">
- </div>
- </div>
- <div class="item">
- <div class="left">性别</div>
- <div class="right" @tap="sexShow = true">
- {{userInfo.gender===0?'男':(userInfo.gender==1?'女':'保密')}}
- <u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
- </div>
- </div>
- <div class="item">
- <div class="left">邮箱</div>
- <div class="right">
- <input type="text" v-model="userInfo.email" placeholder="请输入邮箱">
- </div>
- </div>
- </div>
- <div class="btn" @tap="confirm">确定</div>
- <u-picker :show="sexShow" :columns="sexColumns" title="性别" keyName="name" @cancel="sexShow = false;" @confirm="sexConfirm"></u-picker>
- </view>
- </template>
- <script>
- const baseApi = require("@/http/baseApi.js");
- export default {
- data(){
- return {
- avatar:this.$imgBase+'home/home_avator.png',
- userInfo:{},
- sexShow:false,
- sexColumns:[[{id:0,name:'男'},{id:1,name:'女'},{id:2,name:'保密'}]]
- }
- },
- created() {
- this.userInfo = JSON.parse(uni.getStorageSync('userInfo')||'{}');
- },
- methods:{
- sexConfirm(e){
- this.userInfo.gender = e.value[0].id;
- this.sexShow = false;
- },
- confirm(){
- if(!this.$reg.email(this.userInfo?.email)) return this.$showToast('请输入正确的邮箱');
- this.$api.put('/user',this.userInfo).then(res=>{
- if(res.data.code===0){
- uni.setStorageSync('userInfo',JSON.stringify(this.userInfo));
- this.$showToast('编辑成功');
- setTimeout(()=>{
- uni.navigateBack()
- },1500)
- }else this.$showToast(res.data.msg)
- })
- },
- // 上传头像
- changeAvatar() {
- uni.chooseImage({
- sourceType: ['album'], //从相册选择
- success: chooseImageRes => {
- const tempFilePaths = chooseImageRes.tempFilePaths;
- uni.uploadFile({
- url: baseApi.BaseApi + '/uploadFile',
- filePath: tempFilePaths[0],
- name: 'file',
- header: {
- token: uni.getStorageSync('token')
- },
- success: res => {
- let data = JSON.parse(res.data);
- this.userInfo.headUrl = data.data;
- }
- });
- },
- fail: err => {
- this.$showToast('图片上传失败');
- }
- });
- },
- }
- }
- </script>
- <style scoped lang="less">
- .page{
- background: #F4F8FB;
- box-sizing: border-box;
-
- .info{
- width: 100%;
- margin-top: 20rpx;
- .item{
- padding: 24rpx 25rpx;
- background: #FFFFFF;
- box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .left{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 30rpx;
- color: #1D2129;
- line-height: 42rpx;
- text-align: left;
- }
- .right{
- display: flex;
- align-items: center;
- image{
- width: 96rpx;
- height: 96rpx;
- border-radius: 50%;
- }
- input{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 30rpx;
- color: #4E5969;
- line-height: 42rpx;
- text-align: right;
- outline: none;
- border: none;
- }
- }
- }
- }
-
- .btn{
- width: calc(100% - 108rpx);
- height: 88rpx;
- background: #198CFF;
- border-radius: 16rpx;
- margin: 240rpx 54rpx 0;
- font-family: PingFang-SC, PingFang-SC;
- font-weight: bold;
- font-size: 32rpx;
- color: #FFFFFF;
- line-height: 88rpx;
- text-align: center;
- letter-spacing: 2rpx;
- }
- }
- </style>
|