yihuo/pages/user_info/index.vue

<template>
    <page
        :title="type == 1 ? '完善资料' : '编辑资料'"
        ref="pageRef"
        nav-color="#fff"
        custom-class="paddingB25"
    >
        <view >
           
            <view >
                <div
                    class="avatar-wrapper btn-clear"
                    @click="onChooseAvatar"
                >
                    <view class="avatarView">
                        <image
                            v-if="(user && user.avatar) || ossurl.common.noavatar"
                            class="avatar"
                            :src="user.avatar"
                        ></image>
                        <image v-else class="avatar" :src="ossurl.common.noavatar"></image>
                        <image class="avatarEdit" :src="ossurl.mine.editIcon" />
                    </view>
                </div>
                <view
                    class="flex-align-between padding15 cell"
                    @click="showEdit('编辑昵称', 'nickname')"
                >
                    <view class="font5">昵称：</view>
                    <view class="flex-align">
                        <view class="marginR5">
                            {{ (user && user.nickname) || '请输入' }}
                        </view>
                       <view class="cuIcon-right"></view>
                    </view>
                </view>
            </view>
        </view>
       
    </page>
</template>
<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import loginInfo from './login_info'

    export default {
        components: { loginInfo },
        data() {
            return {
                resource,
                ossurl,
                type: 0
            }
        },
        computed: {
            user() {
                if (!this.$store.getters.token) return null
                return this.$store.getters.user
            },
            supportHigher() {
                let systemInfo = this.$store.state.systemInfo
                if (!systemInfo) return false
                return this.$common.compareVersion(systemInfo.SDKVersion, '2.21.2') >= 0
            }
        },
        onLoad(option) {
            this.type = option.type || 0
        },
        methods: {
            onChooseAvatar() {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType:['album'],
					success: (chooseImageRes) => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
						    url: self.$service.base.apis.UPLOAD, //仅为示例，非真实的接口地址
						    filePath: tempFilePaths[0],
							
						    name: 'file',
						    header: {
						        Authentication: self.$store.getters.token
						    },
						    formData: {
						        appId: 'supermart',
						        folder: 'avatar'
						    },
						    success: (res) => {
								console.log(res)
						        if (res.statusCode == 200) {
						            const result = JSON.parse(res.data)
						            if (result.code == 0) {
						                self.updateAvatar(result.data.url || resource.defaultAvatar)
						            }
						        }
						    },
						    error: (res) => {
						        self.$message.error('上传图片失败')
						    }
						})
					},
					error: (res) => {
					    self.$message.error('选择图片失败')
					}
				});
				
               
            },
            async updateAvatar(url) {
                const res = await this.$service.user.updateAvatar(url)
                this.$service.user.info()
            },
            showEdit(title, key) {
                this.$router.push('user_edit', {
                    title,
                    key,
                    value: (this.user && this.user[key]) || ''
                })
            },
            getUserProfile(e) {
                wx.getUserProfile({
                    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                    success: (res) => {
                        this.getUserinfo({ detail: res })
                    }
                })
            },
            async getUserinfo(e) {
                if (!e.detail || !e.detail.encryptedData) return
                const encryptedData = e.detail.encryptedData
                const signature = e.detail.signature
                const iv = e.detail.iv
                const rawData = e.detail.rawData

                const res = await this.$service.user.complete(encryptedData, iv, signature, rawData)
                if (res) {
                    this.initUser()
                    if (this.type == 1) {
                        this.$router.back()
                    }
                }
            },
            async initUser() {
                this.$service.user.info()
            }
        }
    }
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }

    .cell {
        border-top: 1px solid rgba($color: #fff, $alpha: 0.3);
        border-bottom: 1px solid rgba($color: #fff, $alpha: 0.3);
    }
    .btn {
        height: 100rpx;
        line-height: 100rpx;
        background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
        border-radius: 50rpx;
        color: #fff;
        font-size: 32rpx;
        text-align: center;
    }
	.avatar-wrapper{
		text-align: center;
	}
    .avatarView {
        position: relative;
        display: inline-block;

        margin-top: 40px;
        margin-bottom: 40px;
        .avatar {
            width: 148rpx;
            height: 148rpx;
            border-radius: 50%;

            border: 8rpx solid #ffe996;
        }
        .avatarEdit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 48rpx;
            height: 48rpx;
			z-index: 10;
        }
    }
</style>