zhaojs
2023-06-25 afb7bcf6e31979be352bfcf14812d52339478cef
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
    <view class="modifyInfo-wrapper wrapperLayer">
        <titleBar :titleText="'修改信息'" :pageForm='"modifyInfo"'></titleBar>
        <view class="pagebottom-container colCen">
            <view class="userAvator-bar pd30 rowCenBet" @tap="avatarChoose()">
                <view class="leftkey">
                    头像
                </view>
                <view class="rightval rowCen">
                    <image :src="user.avatar" mode="aspectFill"></image>
                    <view class="arrow iconfont">
                        &#xe8d4;
                    </view>
                </view>
            </view>
            <view class="username-bar userAvator-bar rowCenBet pd30" @tap="nickname()">
                <view class="leftkey">
                    昵称
                </view>
                <view class="rightval rowCen">
                    <view class="nameinfo">
                        {{user.nickname}}
                    </view>
                    <view class="arrow iconfont">
                        &#xe8d4;
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
 
<script>
    import util from '../../../utils/utils.js'
    import titleBar from '@/components/backTitlebar.vue'
    import basicConfig from '../../../utils/config.js'
    export default {
        components: {
            titleBar
        },
        data() {
            return {
                user:''
            }
        },
        onShow() {
            util.getCache('userInfo').then(res=>{
                this.user = res
            })
        },
        methods:{
            nickname(){
                uni.navigateTo({
                    url:'./setNickname?nickName='+this.user.nickname
                })
            },
            avatarChoose(){
                var that =this;
                uni.chooseImage({
                    count: 1, //默认9
                    success: res=> {
                        uni.uploadFile({
                            url: basicConfig.httpUrl + '/api/common/upload', //仅为示例,非真实的接口地址
                            filePath: res.tempFilePaths[0],
                            name: 'file',
                            fileType: 'json',
                            //这个是参数根据你后台的需求可以隐藏
                            header: {
                            "token": this.user.token,
                            "appVersion":plus.runtime.version
                            }, 
                            success: obj => {
                                console.log(obj)
                                var result = JSON.parse(obj.data);
                                console.log(result)
                                that.$u.api.profile({
                                    avatar: result.data.url
                                }).then(e => {
                                    console.log(e)
                                    if(e.code == 1)return that.$alert(e.msg);
                                    that.user.avatar = result.data.fullurl
                                    //util.setCache('userInfo',that.userInfo)
                                }).catch(function (err) {
                                    uni.showToast({
                                        title:'很抱歉,您的头像上传失败!',
                                        icon:'none'
                                    })
                                })
                            }
                        });
                    }
                });
            }
        }
    }
</script>
 
<style lang="scss">
    .modifyInfo-wrapper {
        width: 100%;
 
        .pagebottom-container {
            width: 100%;
            margin-top: 20rpx;
 
            .userAvator-bar {
                width: 100%;
                height: 130rpx;
                background: #FFFFFF;
                box-shadow: 0px -1rpx 0px 0px #F1F1F1;
 
                .leftkey {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: #333333;
                }
 
                .rightval {
                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                    }
 
                    .arrow {
                        color: #666666;
                        font-size: 20rpx;
                        margin-left: 30rpx;
                        margin-top: 5rpx;
                    }
                }
            }
 
            .username-bar {
                height: 90rpx;
            }
        }
    }
</style>