Client-Teapay/src/pages/my/userinfo.vue

<template>
    <view class="container">
        <view class="list flex_r flex_ac">
            <view class="list_title flex_r flex_ac flex_jb"><text>头</text><text>像：</text></view>
            <img @click="upheadimg" :src="formDa.head_pic" alt="" srcset="" class="head_pic" />
        </view>
        <view class="list flex_r flex_ac">
            <view class="list_title flex_r flex_ac flex_jb"><text>昵</text><text>称：</text></view>
            <input type="text" class="flex_grow" v-model="formDa.nickname" placeholder="请输入昵称" />
        </view>
        <view class="confimBtn flex_r flex_ac flex_jc" @tap="upda">提交</view>
    </view>
</template>
<script>
let app = getApp();
let appEv = app.$vm.$options;
import { post } from "@/request/api.js";
export default {
    data() {
        return {
            formDa: {
                nickname: undefined,
                head_pic: undefined
            },
        };
    },
    onLoad() {
        this.loadData();
    },
    methods: {
        loadData() {
            let da = uni.getStorageSync("userinfo");
            this.formDa.nickname = da.nickname;
            this.formDa.head_pic = da.head_pic;
        },
        upheadimg() {
            // 上传图片uploadImg
            let that = this;
            uni.chooseImage({
                count: 1, // 最多可以选择的图片张数，默认9
                sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
                sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
                success: function(res) {
                    var arr = res.tempFiles;
                    that.$up(arr[0].path).then((res) => {
                        that.$set(that.formDa, "head_pic", res);
                        // that.formDa.head_pic = res;
                    });
                },
            });
        },
        upda() {
            post("user/setup", this.formDa).then((res) => {
                if (res.code === 0) {
                    appEv.errTips(res.msg);
                    this.getuserInfo();
                    uni.navigateBack({
                        delta: 1, //返回层数，2则上上页
                    });
                }
            });
        },
        getuserInfo() {
            post("/user/userinfo").then((res) => {
                if (res.code === 0) {
                    uni.setStorageSync("userinfo", res.data.data);
                    this.loadData();
                }
            });
        },
    },
};
</script>
<style lang="scss">
// 页面配置
.container {
    width: 100%;
    overflow: hidden;
    border-top: 20rpx solid #f5f5f5;
}

// 页面配置-end

// 表单
.list input {
    font-size: 30rpx;
    color: #343434;
}

.list_title {
    width: 120rpx;
    overflow: hidden;
    margin-right: 100rpx;
    font-size: 30rpx;
    color: #535353;
}

.confimBtn {
    width: 329rpx;
    height: 73rpx;
    margin: 74rpx auto 0;
    background: #18bb88;
    font-size: 40rpx;
    color: #fff;
}

.option {
    width: 172rpx;
    height: 54rpx;
    border-radius: 4rpx;
    background-color: #18bb88;
    color: #fff;
    font-size: 26rpx;
    margin-left: 12rpx;
}

.list {
    width: 100%;
    height: 92rpx;
    background-color: #fff;
    padding: 0 60rpx;
    box-sizing: border-box;
    border-bottom: 3rpx solid rgba(0, 0, 0, 0.12);

    &:first-child {
        height: 120rpx;
        justify-content: space-between;
    }
}

.g_color {
    background-color: #e8e8e8;
    color: #ff5758;
}

// 表单-end

.flex_grow {
    text-align: right;
}

.head_pic {
    width: 92rpx;
    height: 92rpx;
    border-radius: 50%;
}
</style>